rudeshark.net/packages/client/src/pages/search.vue

123 lines
2.6 KiB
Vue
Raw Normal View History

<template>
2023-04-08 02:01:42 +02:00
<MkStickyContainer>
<template #header
><MkPageHeader
v-model:tab="tab"
:actions="headerActions"
:tabs="headerTabs"
:display-back-button="true"
/></template>
<MkSpacer :content-max="800">
2023-05-26 04:47:10 +02:00
<swiper
2023-05-26 23:02:17 +02:00
:round-lengths="true"
2023-05-26 04:47:10 +02:00
:touch-angle="25"
:threshold="10"
:centeredSlides="true"
:modules="[Virtual]"
:space-between="20"
:virtual="true"
2023-06-26 21:47:05 +02:00
:allow-touch-move="
defaultStore.state.swipeOnMobile &&
(deviceKind !== 'desktop' ||
defaultStore.state.swipeOnDesktop)
"
@swiper="setSwiperRef"
@slide-change="onSlideChange"
>
<swiper-slide>
2023-04-08 02:01:42 +02:00
<XNotes ref="notes" :pagination="notesPagination" />
</swiper-slide>
<swiper-slide>
2023-04-08 02:01:42 +02:00
<XUserList
ref="users"
class="_gap"
:pagination="usersPagination"
/>
</swiper-slide>
</swiper>
2023-04-08 02:01:42 +02:00
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
2023-04-08 02:01:42 +02:00
import { computed, watch, onMounted } from "vue";
import { Virtual } from "swiper/modules";
2023-04-08 02:01:42 +02:00
import { Swiper, SwiperSlide } from "swiper/vue";
import XNotes from "@/components/MkNotes.vue";
import XUserList from "@/components/MkUserList.vue";
import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import { defaultStore } from "@/store";
import { deviceKind } from "@/scripts/device-kind";
2023-04-08 02:01:42 +02:00
import "swiper/scss";
import "swiper/scss/virtual";
const props = defineProps<{
query: string;
channel?: string;
}>();
const notesPagination = {
2023-04-08 02:01:42 +02:00
endpoint: "notes/search" as const,
limit: 10,
params: computed(() => ({
query: props.query,
channelId: props.channel,
})),
};
const usersPagination = {
2023-04-08 02:01:42 +02:00
endpoint: "users/search" as const,
limit: 10,
params: computed(() => ({
query: props.query,
2023-04-08 02:01:42 +02:00
origin: "combined",
})),
};
2023-04-08 02:01:42 +02:00
const tabs = ["notes", "users"];
let tab = $ref(tabs[0]);
2023-04-08 02:01:42 +02:00
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
const headerActions = $computed(() => []);
2023-04-08 02:01:42 +02:00
const headerTabs = $computed(() => [
{
key: "notes",
icon: "ph-magnifying-glass ph-bold ph-lg",
title: i18n.ts.notes,
},
{
key: "users",
icon: "ph-users ph-bold ph-lg",
title: i18n.ts.users,
},
]);
let swiperRef = null;
function setSwiperRef(swiper) {
swiperRef = swiper;
syncSlide(tabs.indexOf(tab));
}
function onSlideChange() {
tab = tabs[swiperRef.activeIndex];
}
function syncSlide(index) {
swiperRef.slideTo(index);
}
onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex));
});
2023-04-08 02:01:42 +02:00
definePageMetadata(
computed(() => ({
title: i18n.t("searchWith", { q: props.query }),
icon: "ph-magnifying-glass ph-bold ph-lg",
2023-07-06 03:28:27 +02:00
})),
2023-04-08 02:01:42 +02:00
);
</script>