pukaad-ui-lib 1.211.0 → 1.212.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.211.0",
+  "version": "1.212.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/card/card-place-detail.d.vue.ts

@@ -1,9 +1,28 @@
-import type { Place } from "@/types/components/card/card-place-detail";
+interface BusinessHour {
+    day: string;
+    time_range: string;
+}
+interface OpeningHours {
+    Business_hour: BusinessHour[];
+    Special_hour?: BusinessHour[];
+}
+interface SocialLink {
+    name: string;
+    link: string;
+}
+interface PlaceDetail {
+    description?: string;
+    category?: string;
+    open_status?: string;
+    opening_hour: OpeningHours;
+    phone?: string;
+    links?: SocialLink[];
+}
 type __VLS_Props = {
-    item?: Place;
+    item?: PlaceDetail;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    item: Place;
+    item: PlaceDetail;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-place-detail.vue

@@ -1,94 +1,63 @@
 <template>
-  <div class="w-full">
-    <Card full-width>
-      <div class="flex flex-col gap-[8px] font-body-large">
-        <div class="flex gap-[8px]">
-          <div class="pt-[3px]">
-            <Icon name="lucide:circle-alert" size="20" class="text-primary" />
-          </div>
-          <div>
-            {{ props.item.description }}
-          </div>
-        </div>
-        <div class="flex gap-[8px]">
-          <div class="pt-[3px]">
-            <Icon name="lucide:tag" size="20" class="text-primary" />
-          </div>
-          <div>{{ props.item.category }}</div>
-        </div>
-        <div class="flex gap-[8px]">
-          <div class="pt-[3px]">
-            <Icon name="lucide:clock" size="20" class="text-primary" />
-          </div>
-          <div class="w-full flex flex-col gap-[8px]">
-            <div class="text-success font-body-large-prominent">เปิดอยู่</div>
-            <div class="flex flex-col gap-[4px]">
-              <div
-                v-for="(time, index) in props.item.opening_hour.Business_hour"
-                :key="index"
-                class="flex items-center justify-between w-full"
-              >
-                <div>{{ time.day }}</div>
-                <div>{{ time.time_range }}</div>
-              </div>
-            </div>
+  <Card variant="outline">
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex gap-[12px]">
+        <Icon name="lucide:circle-alert" :size="20" class="text-primary shrink-0 mt-[2px]" />
+        <div v-if="props.item.description">{{ props.item.description }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลคำอธิบาย</div>
+      </div>
 
-            <div class="text-warning font-body-large-prominent">วันทำการพิเศษ</div>
+      <div class="flex gap-[12px]">
+        <Icon name="lucide:tag" :size="20" class="text-primary shrink-0 mt-[2px]" />
+        <div v-if="props.item.category">{{ props.item.category }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลประเภท</div>
+      </div>
 
-            <div class="flex flex-col gap-[4px]">
-              <div
-                v-for="(time, i) in props.item.opening_hour.Special_hour"
-                :key="i"
-                class="flex items-center justify-between w-full text-warning"
-              >
-                <div>{{ time.day }}</div>
-                <div>{{ time.time_range }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="flex gap-[8px]">
-          <div class="pt-[3px]">
-            <Icon name="lucide:phone" size="20" class="text-primary" />
-          </div>
-          <div>{{ props.item.phone }}</div>
-        </div>
+      <div class="flex gap-[12px]">
+        <Icon name="lucide:clock" :size="20" class="text-primary shrink-0 mt-[2px]" />
+        <div v-if="props.item.opening_hour?.Business_hour?.length" class="flex flex-col gap-[4px] flex-1">
+          <div class="font-body-large-prominent text-success">{{ props.item.open_status ?? "\u0E40\u0E1B\u0E34\u0E14\u0E2D\u0E22\u0E39\u0E48" }}</div>
 
-        <div class="flex gap-[8px]">
-          <div class="pt-[3px]">
-            <Icon name="lucide:square-pen" size="20" class="text-primary" />
+          <div v-for="(time, index) in props.item.opening_hour?.Business_hour" :key="`bh-${index}`"
+            class="flex items-center justify-between">
+            <span>{{ time.day }}</span>
+            <span>{{ time.time_range }}</span>
           </div>
-          <div>{{ props.item.suggested_corrections }}</div>
-        </div>
-        <Divider />
 
-        <div
-          v-if="props.item.links && props.item.links.length > 0"
-          class="flex flex-col gap-[8px]"
-        >
-          <div
-            v-for="(linkItem, index) in props.item.links"
-            :key="index"
-            class="flex gap-[8px]"
-          >
-            <div class="pt-[3px]">
-              <Icon
-                :name="`pukaad-social:${linkItem.name}`"
-                :size="20"
-                class="text-primary"
-              />
-            </div>
-            <div
-              class="cursor-pointer hover:underline"
-              @click="onClickLink(linkItem.link)"
-            >
-              {{ linkItem.link }}
+          <template v-if="props.item.opening_hour?.Special_hour?.length">
+            <div class="font-body-large-prominent text-warning mt-[8px]">วันทำการพิเศษ</div>
+            <div v-for="(time, i) in props.item.opening_hour.Special_hour" :key="`sh-${i}`"
+              class="flex items-center justify-between text-warning">
+              <span>{{ time.day }}</span>
+              <span>{{ time.time_range }}</span>
             </div>
-          </div>
+          </template>
+        </div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลเวลาทำการ</div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon name="lucide:phone" :size="20" class="text-primary shrink-0 mt-[2px]" />
+        <div v-if="props.item.phone">{{ props.item.phone }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลเบอร์โทรศัพท์</div>
+      </div>
+
+      <Divider />
+
+      <div v-if="props.item.links?.length" class="flex flex-col gap-[8px]">
+        <div v-for="(linkItem, index) in props.item.links" :key="index"
+          class="flex gap-[12px] items-center cursor-pointer hover:underline" @click="onClickLink(linkItem.link)">
+          <Icon :name="`pukaad-social:${linkItem.name}`" :size="20" class="shrink-0" />
+          <span>{{ linkItem.link }}</span>
         </div>
       </div>
-    </Card>
-  </div>
+
+      <div v-else class="flex gap-[12px] items-center">
+        <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
+        <span class="text-cloud">ไม่มีข้อมูลช่องทางติดต่อ</span>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script setup>
@@ -96,9 +65,9 @@ const props = defineProps({
   item: { type: Object, required: false, default: () => ({
     description: "",
     category: "",
+    open_status: "",
     opening_hour: { Business_hour: [], Special_hour: [] },
     phone: "",
-    suggested_corrections: "",
     links: []
   }) }
 });

package/dist/runtime/components/card/card-place-detail.vue.d.ts

@@ -1,9 +1,28 @@
-import type { Place } from "@/types/components/card/card-place-detail";
+interface BusinessHour {
+    day: string;
+    time_range: string;
+}
+interface OpeningHours {
+    Business_hour: BusinessHour[];
+    Special_hour?: BusinessHour[];
+}
+interface SocialLink {
+    name: string;
+    link: string;
+}
+interface PlaceDetail {
+    description?: string;
+    category?: string;
+    open_status?: string;
+    opening_hour: OpeningHours;
+    phone?: string;
+    links?: SocialLink[];
+}
 type __VLS_Props = {
-    item?: Place;
+    item?: PlaceDetail;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    item: Place;
+    item: PlaceDetail;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-reaction.vue

@@ -89,14 +89,14 @@ const listReaction = computed(() => {
 const reactions = [
   {
     name: "liked",
-    icon: "pukaad:thumbs-up-regular",
-    iconReacted: "pukaad:thumbs-up-solid",
+    icon: "fa6-regular:thumbs-up",
+    iconReacted: "fa6-solid:thumbs-up",
     action: toggleLike
   },
   {
     name: "bookmarked",
     icon: "lucide:bookmark",
-    iconReacted: "pukaad:bookmark-solid",
+    iconReacted: "fa6-solid:bookmark",
     action: toggleBookmark
   },
   {

package/dist/runtime/components/card/card-review.d.vue.ts

@@ -2,6 +2,8 @@ import type { CardReviewProps } from "@/types/components/card/card-review";
 type __VLS_Props = {
     item: CardReviewProps;
     isProfile: boolean;
+    disabledLike?: boolean;
+    disabledMenu?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
@@ -12,6 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     item: CardReviewProps;
     isProfile: boolean;
+    disabledLike: boolean;
+    disabledMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-review.vue

@@ -1,51 +1,33 @@
 <template>
   <div class="py-[16px] border-b-[1px] border-mercury flex gap-[16px] w-full">
     <div v-if="props.item.user.avatar">
-      <!-- <Avatar :src="props.item.user.avatar" alt="profile_myProfile" size="30" class="cursor-pointer"
-        @click="NavigateToProfile(props.item.user.path_name)" /> -->
+      <Avatar :src="props.item.user.avatar" alt="profile_myProfile" :size="30" class="cursor-pointer"
+        @click="NavigateToProfile(props.item.user.path_name)" />
     </div>
     <div class="flex flex-col gap-[24px] w-full">
       <div class="flex flex-col gap-[8px]">
         <div class="flex flex-col gap-[6px]">
           <div class="flex flex-col gap-[4px]">
             <div class="flex justify-between items-center">
-              <div
-                @click="NavigateToProfile(props.item.user.path_name)"
-                class="font-body-large cursor-pointer"
-              >
+              <div @click="NavigateToProfile(props.item.user.path_name)" class="font-body-large cursor-pointer">
                 {{ props.item.user?.name }}
               </div>
               <div class="flex gap-[8px] items-center">
-                <Button
-                  type="text"
-                  :variant="liked ? 'primary' : 'black'"
-                  :icon-size="20"
-                  size="tiny"
-                  :prepend-icon="
-  liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
-"
-                  :aria-pressed="liked"
-                  @click="toggleLike"
-                  disabled-padding
-                >
-                  <div>
-                    {{ likeCount }}
-                  </div>
+                <Button variant="text" :color="liked ? 'primary' : 'default'" :disabled="props.disabledLike"
+                  :aria-pressed="liked" @click="toggleLike">
+                  <Icon :name="liked ? 'fa6-solid:thumbs-up' : 'fa6-regular:thumbs-up'" :size="20" />
+                  {{ convertNumber(likeCount) }}
                 </Button>
-                <PickerOptionMenuUser :state="menuType" disabled-padding />
+                <PickerOptionMenuUser v-if="!props.disabledMenu" :state="menuType" disabled-padding />
               </div>
             </div>
             <div class="text-gray font-body-small">
-              {{ props.item.user?.review_count }} รีวิว •
-              {{ props.item.user?.like_count }} ชื่นชอบรีวิว
+              {{ convertNumber(props.item.user?.review_count ?? 0) }} รีวิว •
+              {{ convertNumber(props.item.user?.like_count ?? 0) }} ชื่นชอบรีวิว
             </div>
           </div>
           <div class="flex gap-[8px] items-center">
-            <InputRating
-              :size="16"
-              readonly
-              :model-value="props.item.review?.rating"
-            />
+            <InputRating :size="16" readonly :model-value="props.item.review?.rating" />
             <div class="text-gray font-body-small">
               {{ props.item.review?.created_at }}
             </div>
@@ -57,10 +39,7 @@
         </div>
 
         <div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
-          <DisplayImageReview
-            :items="props.item.review?.images"
-            @select="selectImage"
-          />
+          <DisplayImageReview :items="props.item.review?.images" @select="selectImage" />
         </div>
       </div>
       <div v-if="props.item.replies">
@@ -75,12 +54,16 @@
       </div>
     </div>
   </div>
+
+  <ModalMediaView v-model="isOpen" :items="props.item.review?.images" :start-index="startIndex" title="รูปภาพรีวิว" />
 </template>
 
 <script setup>
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
+import { useConvert } from "../../composables/useConvert";
 const router = useRouter();
+const { convertNumber } = useConvert();
 const isOpen = ref(false);
 const props = defineProps({
   item: { type: Object, required: true, default: () => ({
@@ -107,7 +90,9 @@ const props = defineProps({
       created_at: ""
     }
   }) },
-  isProfile: { type: Boolean, required: true, default: false }
+  isProfile: { type: Boolean, required: true, default: false },
+  disabledLike: { type: Boolean, required: false, default: false },
+  disabledMenu: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["toggle-like", "select-image"]);
 const liked = ref(props.item.review?.liked ?? false);
@@ -127,7 +112,9 @@ function toggleLike() {
   }
   emit("toggle-like", props.item, liked.value);
 }
+const startIndex = ref(0);
 const selectImage = (index) => {
+  startIndex.value = index;
   isOpen.value = true;
   emit("select-image", props.item, index, liked.value);
 };

package/dist/runtime/components/card/card-review.vue.d.ts

@@ -2,6 +2,8 @@ import type { CardReviewProps } from "@/types/components/card/card-review";
 type __VLS_Props = {
     item: CardReviewProps;
     isProfile: boolean;
+    disabledLike?: boolean;
+    disabledMenu?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
@@ -12,6 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     item: CardReviewProps;
     isProfile: boolean;
+    disabledLike: boolean;
+    disabledMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/carousel.d.vue.ts

@@ -1,25 +1,8 @@
 import type { CarouselProps } from "@/types/components/carousel";
-declare var __VLS_25: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_25) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<CarouselProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "clicked-image": () => any;
-    change: (value: number) => any;
-}, string, import("vue").PublicProps, Readonly<CarouselProps> & Readonly<{
-    "onClicked-image"?: (() => any) | undefined;
-    onChange?: ((value: number) => any) | undefined;
-}>, {
+type __VLS_Props = Pick<CarouselProps, "items" | "selectIndex">;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     items: string[];
     selectIndex: number;
-    fullWidth: boolean;
-    fullHeight: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/carousel.vue

@@ -1,35 +1,34 @@
 <template>
-  <div class="relative bg-black" @mouseenter="isHovered = true" @mouseleave="isHovered = false" :style="{
-  width: props.fullWidth ? '100%' : `${props.width}px`,
-  height: props.fullHeight ? '100%' : `${props.height}px`
-}">
-    <div v-if="props.items?.length && props.items[currentIndex]" class="flex items-center justify-center w-full h-full"
-      @click="onClickedImage">
-      <Image v-if="!props.items[currentIndex]?.includes('.mp4')" :src="props.items[currentIndex]"
-        :width="props.fullWidth ? 'auto' : props.width" :height="props.fullHeight ? 'auto' : props.height"
-        fit="contain" />
-      <Video v-else :src="props.items[currentIndex]" fit="contain" controls full-width full-height />
-    </div>
-    <div v-if="props.items.length > 1 && isHovered" class="absolute top-[16px] left-1/2 transform -translate-x-1/2">
-      <div class="rounded-full py-[4px] px-[8px] bg-black/50 w-[100px] items-center">
-        <div class="font-body-medium w-full text-center text-white">
-          {{ currentIndex + 1 }}/{{ props.items.length }}
-        </div>
+  <div class="relative w-full h-full">
+    <div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
+      <div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
+        <span class="text-white text-sm font-medium tracking-widest">
+          {{ currentIndex + 1 }} / {{ props.items.length }}
+        </span>
       </div>
     </div>
-    <div v-if="props.items.length > 1 && currentIndex > 0 && isHovered"
-      class="absolute left-[16px] top-1/2 transform -translate-y-1/2">
-      <Button prependIcon="lucide:chevron-left" circle variant="solid" color="black" @click="back" :icon-size="24"
-        :padding="0" />
-    </div>
-    <div v-if="props.items.length > 1 && currentIndex < props.items.length - 1 && isHovered"
-      class="absolute right-[16px] top-1/2 transform -translate-y-1/2">
-      <Button prependIcon="lucide:chevron-right" circle variant="solid" color="black" @click="next" :icon-size="24"
-        :padding="0" />
-    </div>
-    <div class="absolute bottom-[0] w-full">
-      <slot name="default" />
-    </div>
+
+    <ShadCarousel
+      :opts="{ startIndex: props.selectIndex }"
+      class="carousel-media w-full h-full"
+      @init-api="onInitApi"
+    >
+      <ShadCarouselContent class="h-full">
+        <ShadCarouselItem
+          v-for="(item, i) in props.items"
+          :key="i"
+          class="h-full flex items-center justify-center"
+        >
+          <img
+            :src="item"
+            class="w-full h-full object-contain select-none"
+            draggable="false"
+          />
+        </ShadCarouselItem>
+      </ShadCarouselContent>
+      <ShadCarouselPrevious class="!left-[12px]" />
+      <ShadCarouselNext class="!right-[12px]" />
+    </ShadCarousel>
   </div>
 </template>
 
@@ -37,32 +36,23 @@
 import { ref, watch } from "vue";
 const props = defineProps({
   items: { type: Array, required: true, default: () => [] },
-  selectIndex: { type: Number, required: false, default: 0 },
-  width: { type: [Number, String], required: false },
-  height: { type: [Number, String], required: false },
-  fullWidth: { type: Boolean, required: false, default: false },
-  fullHeight: { type: Boolean, required: false, default: false }
+  selectIndex: { type: Number, required: false, default: 0 }
 });
-const emit = defineEmits(["clicked-image", "change"]);
 const currentIndex = ref(props.selectIndex);
-const isHovered = ref(false);
-function onClickedImage() {
-  emit("clicked-image");
-}
-function back() {
-  if (currentIndex.value > 0) {
-    currentIndex.value--;
-    emit("change", currentIndex.value);
-  }
-}
-function next() {
-  if (currentIndex.value < props.items.length - 1) {
-    currentIndex.value++;
-    emit("change", currentIndex.value);
-  }
-}
+const api = ref();
+const onInitApi = (val) => {
+  api.value = val;
+  val.on("select", () => {
+    currentIndex.value = val.selectedScrollSnap();
+  });
+};
 watch(
   () => props.selectIndex,
-  (newVal) => currentIndex.value = newVal
+  (newVal) => {
+    currentIndex.value = newVal;
+    if (api.value) {
+      api.value.scrollTo(newVal);
+    }
+  }
 );
 </script>

package/dist/runtime/components/carousel.vue.d.ts

@@ -1,25 +1,8 @@
 import type { CarouselProps } from "@/types/components/carousel";
-declare var __VLS_25: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_25) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<CarouselProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "clicked-image": () => any;
-    change: (value: number) => any;
-}, string, import("vue").PublicProps, Readonly<CarouselProps> & Readonly<{
-    "onClicked-image"?: (() => any) | undefined;
-    onChange?: ((value: number) => any) | undefined;
-}>, {
+type __VLS_Props = Pick<CarouselProps, "items" | "selectIndex">;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     items: string[];
     selectIndex: number;
-    fullWidth: boolean;
-    fullHeight: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/display/display-image-place.d.vue.ts

@@ -1,3 +1,14 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    photos?: string[];
+    videos?: string[];
+    variant?: "featured" | "album";
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    variant: "featured" | "album";
+    photos: string[];
+    videos: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;