pukaad-ui-lib 1.424.0 → 1.426.0

package/dist/module.json

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

package/dist/runtime/components/card/card-profile/card-profile-header.d.vue.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<CardProfileAboutProps,
     onChat?: (() => any) | undefined;
 }>, {
     type: "article" | "media" | "sale-info";
-    disabledPadding: boolean;
     preview: boolean;
+    disabledPadding: boolean;
     optionMenuButtonType: "solid" | "text";
     actionsHidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/card/card-profile/card-profile-header.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<CardProfileAboutProps,
     onChat?: (() => any) | undefined;
 }>, {
     type: "article" | "media" | "sale-info";
-    disabledPadding: boolean;
     preview: boolean;
+    disabledPadding: boolean;
     optionMenuButtonType: "solid" | "text";
     actionsHidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -25,6 +25,7 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;
@@ -32,7 +33,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     disabledDividerTop: boolean;
     disabledDividerBottom: boolean;
     iconSize: number | string;
-    state: string;
     loginPath: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -25,6 +25,7 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;
@@ -32,7 +33,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     disabledDividerTop: boolean;
     disabledDividerBottom: boolean;
     iconSize: number | string;
-    state: string;
     loginPath: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -36,17 +36,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
-    disabledMenu: boolean;
-    isProfile: boolean;
-    disabledLike: boolean;
-    allowReply: boolean;
-    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;
         address?: string;
         cover?: string;
     };
+    disabledMenu: boolean;
+    isProfile: boolean;
+    disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -36,17 +36,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
-    disabledMenu: boolean;
-    isProfile: boolean;
-    disabledLike: boolean;
-    allowReply: boolean;
-    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;
         address?: string;
         cover?: string;
     };
+    disabledMenu: boolean;
+    isProfile: boolean;
+    disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-post-content.vue

@@ -40,7 +40,7 @@
               @click="fileColumns = false"
             />
           </div>
-          <div v-show="!hasCoverText" class="flex gap-[8px]">
+          <div v-show="!hasCoverText" class="flex gap-[8px] items-center">
             <!-- วิดีโอมีได้ตัวเดียว — เปิดช่องอัปโหลดภาพหน้าปก (poster) ไว้ข้างหน้าวิดีโอ -->
             <InputFile
               v-if="coverFileType === 'video'"
@@ -159,11 +159,12 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, onBeforeUnmount, watch } from "vue";
 import { useNuxtApp } from "nuxt/app";
 import { useApi } from "../../composables/useApi";
 import { usePresignedUpload } from "../../composables/usePresignedUpload";
 import { CONTENT_COVER_COLORS } from "../../composables/useContentCard";
+import { createVideoThumbnail } from "../../utils/createVideoThumbnail";
 const emit = defineEmits(["success", "saveDraft"]);
 const { $toast, $alert } = useNuxtApp();
 const api = useApi();
@@ -188,6 +189,7 @@ const selectedColor = ref(colors[0].hex);
 const coverText = ref("");
 const coverFiles = ref([]);
 const posterFiles = ref([]);
+const generatedPoster = ref(null);
 const description = ref("");
 const fileColumns = ref(false);
 const selectedPlaces = ref([]);
@@ -227,6 +229,43 @@ watch(coverFileType, (type) => {
     posterFiles.value = [];
   }
 });
+let generatedPosterUrl = "";
+let thumbnailGeneration = 0;
+let thumbnailPromise = Promise.resolve();
+const clearGeneratedPoster = () => {
+  if (generatedPosterUrl) URL.revokeObjectURL(generatedPosterUrl);
+  generatedPosterUrl = "";
+  generatedPoster.value = null;
+};
+watch(
+  [() => coverFiles.value[0]?.file, () => posterFiles.value[0]],
+  ([videoFile, manualPoster]) => {
+    const generation = ++thumbnailGeneration;
+    clearGeneratedPoster();
+    if (manualPoster || typeof File === "undefined" || !(videoFile instanceof File) || !videoFile.type.startsWith("video/")) {
+      thumbnailPromise = Promise.resolve();
+      return;
+    }
+    thumbnailPromise = createVideoThumbnail(videoFile).then((thumbnail) => {
+      if (generation !== thumbnailGeneration) return;
+      generatedPosterUrl = URL.createObjectURL(thumbnail);
+      generatedPoster.value = {
+        file: thumbnail,
+        url: generatedPosterUrl,
+        mediaType: "image"
+      };
+    }).catch(() => {
+    });
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => {
+  thumbnailGeneration++;
+  clearGeneratedPoster();
+});
+const effectivePoster = computed(
+  () => posterFiles.value[0] ?? generatedPoster.value
+);
 const previewItem = computed(() => {
   if (hasCoverFile.value) {
     const file = coverFiles.value[0];
@@ -234,7 +273,7 @@ const previewItem = computed(() => {
       return {
         id: "preview",
         type: "video",
-        video: { src: file.url, poster: posterFiles.value[0]?.url },
+        video: { src: file.url, poster: effectivePoster.value?.url },
         title: description.value,
         location: previewLocation.value
       };
@@ -404,9 +443,12 @@ const submitContent = async (status) => {
   isSubmitting.value = true;
   try {
     const contentType = hasCoverFile.value ? coverFileType.value === "video" ? "video" : "image" : "post_it";
+    if (contentType === "video" && !posterFiles.value[0]) {
+      await thumbnailPromise;
+    }
     const [uploadedMedia, uploadedPoster] = await Promise.all([
       uploadFiles(coverFiles.value, "content-media"),
-      contentType === "video" ? uploadFiles(posterFiles.value, "content-media") : Promise.resolve([])
+      contentType === "video" && effectivePoster.value ? uploadFiles([effectivePoster.value], "content-media") : Promise.resolve([])
     ]);
     const media = uploadedMedia.map((item, index) => ({
       media_type: contentType === "video" ? "video" : "photo",

package/dist/runtime/components/drawer/drawer-profile-network.d.vue.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onExplore-places"?: (() => any) | undefined;
     "onRequire-auth"?: (() => any) | undefined;
 }>, {
-    isMyProfile: boolean;
     profileId: string;
     defaultTab: "followers" | "following" | "favorites";
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-profile-network.vue.d.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onExplore-places"?: (() => any) | undefined;
     "onRequire-auth"?: (() => any) | undefined;
 }>, {
-    isMyProfile: boolean;
     profileId: string;
     defaultTab: "followers" | "following" | "favorites";
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -69,13 +69,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
     labelKey: string;
+    placeholder: string;
+    options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     returnObject: boolean;
     freeText: boolean;
     valueKey: string;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -69,13 +69,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
     labelKey: string;
+    placeholder: string;
+    options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     returnObject: boolean;
     freeText: boolean;
     valueKey: string;

package/dist/runtime/components/input/input-birth-date.d.vue.ts

@@ -30,8 +30,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
-    placeholder: string;
     locale: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;

package/dist/runtime/components/input/input-birth-date.vue.d.ts

@@ -30,8 +30,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
-    placeholder: string;
     locale: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -44,8 +44,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    placeholder: string;
     locale: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -44,8 +44,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    placeholder: string;
     locale: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;

package/dist/runtime/components/input/input-file.d.vue.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     name: string;
     fullHeight: boolean;
     fullWidth: boolean;
-    disabledErrorMessage: boolean;
     limit: number;
+    disabledErrorMessage: boolean;
     accept: string;
     labelIcon: string;
     disabledDrop: boolean;

package/dist/runtime/components/input/input-file.vue

@@ -7,6 +7,7 @@
 ]"
     >
       <Draggable
+        v-if="arrFiles.length"
         v-model="arrFiles"
         :class="[
   'flex gap-[8px]',

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     name: string;
     fullHeight: boolean;
     fullWidth: boolean;
-    disabledErrorMessage: boolean;
     limit: number;
+    disabledErrorMessage: boolean;
     accept: string;
     labelIcon: string;
     disabledDrop: boolean;

package/dist/runtime/components/input/input-link.d.vue.ts

@@ -17,8 +17,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     label: string;
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     format: "legacy" | "contact_channel";
     hideType: boolean;
     hideAddButton: boolean;

package/dist/runtime/components/input/input-link.vue.d.ts

@@ -17,8 +17,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     label: string;
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     format: "legacy" | "contact_channel";
     hideType: boolean;
     hideAddButton: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -11,10 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    options: InputSelectItem[];
     placeholder: string;
-    showCounter: boolean;
+    options: InputSelectItem[];
     limit: number;
+    showCounter: boolean;
     addLabel: string;
     removable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -11,10 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    options: InputSelectItem[];
     placeholder: string;
-    showCounter: boolean;
+    options: InputSelectItem[];
     limit: number;
+    showCounter: boolean;
     addLabel: string;
     removable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-mention.vue

@@ -44,8 +44,9 @@
                     />
                   </div>
                   <div v-if="post.type === 'video'" class="shrink-0">
-                    <div class="relative w-[40px] h-[40px] shrink-0">
+                    <div class="relative w-[40px] h-[40px] shrink-0 bg-black/20 rounded-[4px]">
                       <Image
+                        v-if="post.thumnail"
                         :src="post.thumnail"
                         :width="40"
                         :height="40"
@@ -185,8 +186,9 @@
           <Icon name="fa6-solid:message" size="24" class="text-primary" />
         </div>
         <div v-else-if="item.type === 'video'" class="shrink-0">
-          <div class="relative w-[40px] h-[40px] shrink-0">
+          <div class="relative w-[40px] h-[40px] shrink-0 bg-black/20 rounded-[4px]">
             <Image
+              v-if="item.thumnail"
               :src="item.thumnail"
               :width="40"
               :height="40"
@@ -334,7 +336,7 @@ const mapContentToPostOption = (raw) => {
     type,
     title,
     image: type === "image" ? firstMedia?.url ?? null : null,
-    thumnail: type === "video" ? raw.video_poster_url || firstMedia?.url : void 0
+    thumnail: type === "video" ? raw.video_poster_url : void 0
   };
 };
 const mapBlogToOption = (raw) => ({

package/dist/runtime/components/input/input-search.d.vue.ts

@@ -36,8 +36,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    readonly: boolean;
     placeholder: string;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
     disabledIcon: boolean;

package/dist/runtime/components/input/input-search.vue.d.ts

@@ -36,8 +36,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    readonly: boolean;
     placeholder: string;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
     disabledIcon: boolean;

package/dist/runtime/components/input/input-suggest.d.vue.ts

@@ -20,12 +20,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    placeholder: string;
     labelKey: string;
+    placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-suggest.vue.d.ts

@@ -20,12 +20,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    placeholder: string;
     labelKey: string;
+    placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-tag-modal.d.vue.ts

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    options: InputTagModalOption[];
-    placeholder: string;
     labelKey: string;
+    placeholder: string;
+    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

package/dist/runtime/components/input/input-tag-modal.vue.d.ts

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    options: InputTagModalOption[];
-    placeholder: string;
     labelKey: string;
+    placeholder: string;
+    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    state: "user" | "admin";
     placeholder: string;
+    state: "user" | "admin";
     profileScope: "personal" | "business";
     limit: number;
     ignore: string[];

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    state: "user" | "admin";
     placeholder: string;
+    state: "user" | "admin";
     profileScope: "personal" | "business";
     limit: number;
     ignore: string[];

package/dist/runtime/components/input/input-text-field.d.vue.ts

@@ -60,10 +60,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -60,10 +60,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-textarea.d.vue.ts

@@ -46,12 +46,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    readonly: boolean;
     rows: number;
+    readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     heightScroll: boolean;
     spaceToComma: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-textarea.vue.d.ts

@@ -46,12 +46,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    readonly: boolean;
     rows: number;
+    readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     heightScroll: boolean;
     spaceToComma: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-typed-field.d.vue.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     name: string;
     required: boolean;
     options: import("../../../types/components/input/input-select.js").InputSelectItem[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     removable: boolean;
     selectClass: import("vue").HTMLAttributes["class"];
     resetOnTypeChange: boolean;

package/dist/runtime/components/input/input-typed-field.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     name: string;
     required: boolean;
     options: import("../../../types/components/input/input-select.js").InputSelectItem[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     removable: boolean;
     selectClass: import("vue").HTMLAttributes["class"];
     resetOnTypeChange: boolean;

package/dist/runtime/components/ui/chart/ChartTooltipContent.d.vue.ts

@@ -18,8 +18,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    payload: Record<string, any>;
     config: ChartConfig;
+    payload: Record<string, any>;
     indicator: "line" | "dot" | "dashed";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/chart/ChartTooltipContent.vue.d.ts

@@ -18,8 +18,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    payload: Record<string, any>;
     config: ChartConfig;
+    payload: Record<string, any>;
     indicator: "line" | "dot" | "dashed";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts

@@ -14,7 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -208,7 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts

@@ -14,7 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -208,7 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts

@@ -16,7 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -212,7 +212,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts

@@ -16,7 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -212,7 +212,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/utils/createVideoThumbnail.d.ts

@@ -0,0 +1 @@
+export declare const createVideoThumbnail: (file: File, atSecond?: number) => Promise<File>;

package/dist/runtime/utils/createVideoThumbnail.js

@@ -0,0 +1,47 @@
+export const createVideoThumbnail = (file, atSecond = 0.1) => new Promise((resolve, reject) => {
+  const video = document.createElement("video");
+  const objectUrl = URL.createObjectURL(file);
+  const timeout = window.setTimeout(fail, 1e4);
+  function cleanup() {
+    window.clearTimeout(timeout);
+    URL.revokeObjectURL(objectUrl);
+  }
+  function fail() {
+    cleanup();
+    reject(new Error("Failed to create video thumbnail"));
+  }
+  video.preload = "auto";
+  video.muted = true;
+  video.playsInline = true;
+  video.src = objectUrl;
+  video.addEventListener("error", fail, { once: true });
+  video.addEventListener(
+    "loadeddata",
+    () => {
+      const duration = Number.isFinite(video.duration) ? video.duration : 0;
+      const target = duration > 0 ? Math.min(atSecond, duration / 2) : 0;
+      if (target === 0) captureFrame();
+      else video.currentTime = target;
+    },
+    { once: true }
+  );
+  video.addEventListener("seeked", captureFrame, { once: true });
+  function captureFrame() {
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext("2d")?.drawImage(video, 0, 0);
+    canvas.toBlob(
+      (blob) => {
+        cleanup();
+        if (!blob)
+          return reject(new Error("Failed to create video thumbnail"));
+        resolve(
+          new File([blob], "video-thumbnail.jpg", { type: "image/jpeg" })
+        );
+      },
+      "image/jpeg",
+      0.85
+    );
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.424.0",
+  "version": "1.426.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",