pukaad-ui-lib 1.110.0 → 1.112.0

package/dist/module.json

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

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

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-select-province.d.vue.ts

@@ -1,10 +1,27 @@
+interface Province {
+    id: number;
+    name_th: string;
+    name_en: string;
+    domain: string;
+    image_cover_url: string | null;
+}
+type __VLS_Props = {
+    items?: Province[];
+    itemsPopular?: Province[];
+};
 type __VLS_ModelProps = {
-    modelValue?: string;
+    modelValue?: Province;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (province: Province) => any;
+    "update:modelValue": (value: Province | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((province: Province) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Province | undefined) => any) | undefined;
+}>, {
+    items: Province[];
+    itemsPopular: Province[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-select-province.vue

@@ -24,10 +24,10 @@
                     <ShadCarousel>
                       <ShadCarouselContent>
                         <ShadCarouselItem
-                          v-for="province in provinces"
-                          :key="province.value"
+                          v-for="province in itemsPopular"
+                          :key="province.id"
                           class="flex cursor-pointer basis-1/3.5"
-                          @click="selectProvince(province.value)"
+                          @click="selectProvince(province)"
                         >
                           <Card
                             class="relative overflow-hidden bg-mercury w-[140px] h-[180px]"
@@ -35,7 +35,7 @@
                             <!-- No image state -->
                             <template v-if="province.image_cover_url === null">
                               <div class="font-medium">
-                                {{ province.label }}
+                                {{ province.name_th }}
                               </div>
                               <div
                                 class="flex flex-col items-center justify-center gap-[4px] h-full mt-2"
@@ -56,7 +56,7 @@
                               <div
                                 class="absolute top-0 left-0 right-0 p-2 font-medium text-white bg-gradient-to-b from-black/70 to-transparent"
                               >
-                                {{ province.label }}
+                                {{ province.name_th }}
                               </div>
                             </template>
                           </Card>
@@ -70,16 +70,16 @@
                 <ShadCommandGroup>
                   <ShadCommandItem
                     v-for="province in filteredProvinces"
-                    :key="province.value"
-                    :value="province.label"
-                    @select="selectProvince(province.value)"
+                    :key="province.id"
+                    :value="province.name_th"
+                    @select="selectProvince(province)"
                     class="flex items-center justify-between"
                   >
                     <span>
-                      {{ province.label }}
+                      {{ province.name_th }}
                     </span>
                     <Icon
-                      v-if="modelValue === province.value"
+                      v-if="modelValue?.id === province.id"
                       name="lucide:check"
                       class="h-4 w-4"
                     />
@@ -96,51 +96,26 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
-import { useFetch, useNuxtApp, useRuntimeConfig } from "nuxt/app";
-const { BASE_URL_API } = useRuntimeConfig().public;
-const modelValue = defineModel({ type: String });
+import { ref, computed } from "vue";
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  itemsPopular: { type: Array, required: false, default: () => [] }
+});
+const emit = defineEmits(["select"]);
+const modelValue = defineModel({ type: Object });
 const open = ref(false);
 const search = ref("");
-const provinces = ref([]);
-const fetchProvinces = async () => {
-  try {
-    const response = await $fetch(
-      `${BASE_URL_API}/api/master/address/provinces`,
-      { credentials: "include" }
-    );
-    const data = response.data ?? response;
-    if (data && Array.isArray(data)) {
-      provinces.value = data.filter((p) => p.is_active === true).map((p) => ({
-        value: String(p.id),
-        label: p.name_th,
-        image_cover_url: p.image_cover_url ?? null,
-        domain: p.domain ?? null
-      }));
-    }
-  } catch (error) {
-    console.error("Failed to fetch provinces:", error);
-  }
-};
 const selectedLabel = computed(() => {
-  const found = provinces.value.find((p) => p.value === modelValue.value);
-  return found?.label || "";
+  return modelValue.value?.name_th || "";
 });
 const filteredProvinces = computed(() => {
-  if (!search.value) return provinces.value;
+  if (!search.value) return props.items;
   const query = search.value.toLowerCase();
-  return provinces.value.filter((p) => p.label.toLowerCase().includes(query));
+  return props.items.filter((p) => p.name_th.toLowerCase().includes(query));
 });
-const selectProvince = (value) => {
-  modelValue.value = value;
+const selectProvince = (province) => {
+  modelValue.value = province;
   open.value = false;
-  const selected = provinces.value.find((p) => p.value === value);
-  if (selected?.domain) {
-    const url = selected.domain.startsWith("http") ? selected.domain : `https://${selected.domain}`;
-    window.location.href = url;
-  }
+  emit("select", province);
 };
-onMounted(() => {
-  fetchProvinces();
-});
 </script>

package/dist/runtime/components/input/input-select-province.vue.d.ts

@@ -1,10 +1,27 @@
+interface Province {
+    id: number;
+    name_th: string;
+    name_en: string;
+    domain: string;
+    image_cover_url: string | null;
+}
+type __VLS_Props = {
+    items?: Province[];
+    itemsPopular?: Province[];
+};
 type __VLS_ModelProps = {
-    modelValue?: string;
+    modelValue?: Province;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (province: Province) => any;
+    "update:modelValue": (value: Province | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((province: Province) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Province | undefined) => any) | undefined;
+}>, {
+    items: Province[];
+    itemsPopular: Province[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
     name: string;
-    limit: number;
     placeholder: string;
+    limit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
     name: string;
-    limit: number;
     placeholder: string;
+    limit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/picker/picker-image-cover-profile.d.vue.ts

@@ -1,10 +1,16 @@
+export interface IImageCoverProfile {
+    file?: File | null;
+    src?: string | null;
+    x?: number;
+    y?: number;
+}
 type __VLS_ModelProps = {
-    modelValue?: File | null;
+    modelValue?: IImageCoverProfile | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: File | null | undefined) => any;
+    "update:modelValue": (value: IImageCoverProfile | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: File | null | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: IImageCoverProfile | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/picker/picker-image-cover-profile.vue

@@ -1,176 +1,240 @@
 <template>
-  <ShadDropdownMenu>
-    <ShadDropdownMenuTrigger as-child>
-      <Button variant="outline" class="bg-white"
-        ><Icon name="lucide:camera" /> แก้ไขรูปภาพหน้าปก
-      </Button>
-    </ShadDropdownMenuTrigger>
+  <div class="w-full">
+    <ShadDropdownMenu>
+      <ShadDropdownMenuTrigger as-child>
+        <Button variant="outline" class="bg-white">
+          <Icon name="lucide:camera" /> แก้ไขรูปภาพหน้าปก
+        </Button>
+      </ShadDropdownMenuTrigger>
 
-    <ShadDropdownMenuContent align="start">
-      <ShadDropdownMenuItem
-        v-if="originalFile || modelValue"
-        class="flex gap-[4px] items-center cursor-pointer"
-        @click="onEditImage"
-      >
-        <Icon name="lucide:crop" :size="16" />
-        <span class="font-body-medium">แก้ไขรูปภาพหน้าปก</span>
-      </ShadDropdownMenuItem>
-      <ShadDropdownMenuItem
-        class="flex gap-[4px] items-center cursor-pointer"
-        @click="onUploadImage"
-      >
-        <Icon name="lucide:upload" :size="16" />
-        <span class="font-body-medium">อัปโหลดรูปภาพ</span>
-      </ShadDropdownMenuItem>
-    </ShadDropdownMenuContent>
-  </ShadDropdownMenu>
-  <input
-    ref="fileInputRef"
-    type="file"
-    accept="image/*"
-    @change="onFileChange"
-    class="hidden"
-  />
-  <Modal
-    title="ปรับแต่งรูปภาพหน้าปก"
-    class="min-w-[512px]"
-    v-model="isOpenModal"
-  >
-    <div
-      class="flex justify-center items-center rounded-[8px] overflow-hidden relative"
+      <ShadDropdownMenuContent align="start">
+        <ShadDropdownMenuItem
+          v-if="hasImage"
+          class="flex gap-[4px] items-center cursor-pointer"
+          @click="onEditImage"
+        >
+          <Icon name="lucide:crop" :size="16" />
+          <span class="font-body-medium">จัดตำแหน่ง</span>
+        </ShadDropdownMenuItem>
+        <ShadDropdownMenuItem
+          class="flex gap-[4px] items-center cursor-pointer"
+          @click="onUploadImage"
+        >
+          <Icon name="lucide:upload" :size="16" />
+          <span class="font-body-medium">อัปโหลดรูปภาพ</span>
+        </ShadDropdownMenuItem>
+      </ShadDropdownMenuContent>
+    </ShadDropdownMenu>
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="onFileChange"
+    />
+    <Modal
+      title="ปรับแต่งรูปภาพหน้าปก"
+      class="w-[512px]"
+      v-model="isOpenModal"
+      @close="onCancel"
     >
-      <ImageCropper
-        v-if="imageUrl"
-        ref="cropperRef"
-        dragMode="move"
-        :container-style="{
-  width: '600px',
-  height: '240px',
-  overflow: 'hidden',
-  position: 'relative'
-}"
-        :img-style="{ display: 'block', maxWidth: '100%', maxHeight: '100%' }"
-        :src="imageUrl"
-        :aspect-ratio="5 / 2"
-        :initial-aspect-ratio="5 / 2"
-        :view-mode="3"
-        :guides="false"
-        :movable="true"
-        :crop-box-movable="false"
-        :crop-box-resizable="false"
-        :background="false"
-        :center="false"
-        :auto-crop-area="1"
-        :responsive="true"
-        :zoom-on-wheel="false"
-        :zoom-on-touch="false"
-        :zoomable="false"
-        :rotatable="false"
-        :scalable="false"
-      />
-
       <div
-        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+        ref="containerRef"
+        class="relative w-full h-[261px] overflow-hidden select-none cursor-move group"
+        @mousedown="startDrag"
+        @touchstart="startDrag"
       >
+        <img
+          v-if="imageUrl"
+          :src="imageUrl"
+          class="absolute inset-0 w-full h-full object-cover pointer-events-none"
+          :style="{ objectPosition: `${posX}% ${posY}%` }"
+          @load="onImageLoad"
+          alt="Cover Preview"
+          draggable="false"
+        />
+
         <div
-          class="flex h-[40px] items-center gap-[8px] px-[16px] py-[8px] rounded-[8px] bg-black/60"
+          class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-opacity"
+          :class="{ 'opacity-0': isDragging, 'opacity-100': !isDragging }"
         >
-          <Icon name="lucide:move" color="white" />
-          <div class="text-white font-body-large">ลากเพื่อเปลี่ยนตำแหน่ง</div>
+          <div
+            class="flex items-center gap-[8px] px-[8px] py-[6px] rounded-[8px] bg-black/50"
+          >
+            <Icon name="lucide:move" class="text-white" :size="16" />
+            <span class="text-white font-body-medium">ลากเพื่อจัดตำแหน่ง</span>
+          </div>
         </div>
       </div>
-    </div>
 
-    <template #footer>
-      <div class="flex items-center gap-[16px] w-full">
-        <Button variant="outline" class="w-full" @click="onCancel">
-          ยกเลิก
-        </Button>
-        <Button color="primary" class="w-full" @click="onCropImage">
-          บันทึก
-        </Button>
-      </div>
-    </template>
-  </Modal>
+      <template #footer>
+        <div class="flex items-center gap-[16px] w-full">
+          <Button variant="outline" class="w-full" @click="onCancel">
+            ยกเลิก
+          </Button>
+          <Button color="primary" class="w-full" @click="onSave">
+            บันทึก
+          </Button>
+        </div>
+      </template>
+    </Modal>
+  </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-const cropperRef = ref(null);
+import { ref, computed, onUnmounted } from "vue";
+const modelValue = defineModel({ type: [Object, null], ...{ default: null } });
 const fileInputRef = ref(null);
-const imageUrl = ref(null);
+const containerRef = ref(null);
 const isOpenModal = ref(false);
-const selectedFile = ref(null);
-const originalFile = ref(null);
-const modelValue = defineModel({ type: null });
+const imageUrl = ref(null);
+const workingFile = ref(null);
+const posX = ref(50);
+const posY = ref(50);
+const isDragging = ref(false);
+let startClientX = 0;
+let startClientY = 0;
+let startPosX = 50;
+let startPosY = 50;
+let imageNaturalWidth = 0;
+let imageNaturalHeight = 0;
+const hasImage = computed(
+  () => !!(modelValue.value?.file || modelValue.value?.src)
+);
+const onUploadImage = () => {
+  fileInputRef.value?.click();
+};
 const onEditImage = () => {
-  const fileToEdit = originalFile.value || modelValue.value;
-  if (fileToEdit) {
-    selectedFile.value = fileToEdit;
-    if (imageUrl.value) {
-      URL.revokeObjectURL(imageUrl.value);
-    }
-    imageUrl.value = URL.createObjectURL(fileToEdit);
+  if (!modelValue.value) return;
+  const { file, src, x, y } = modelValue.value;
+  posX.value = x ?? 50;
+  posY.value = y ?? 50;
+  if (file) {
+    prepareImageForModal(file);
+    workingFile.value = file;
+  } else if (src) {
+    imageUrl.value = src;
+    workingFile.value = null;
     isOpenModal.value = true;
   }
 };
-const onUploadImage = () => {
-  fileInputRef.value?.click();
-};
 const onFileChange = (event) => {
   const input = event.target;
-  if (input.files && input.files.length > 0) {
+  if (input.files?.[0]) {
     const file = input.files[0];
-    if (file) {
-      selectedFile.value = file;
-      originalFile.value = file;
-      if (imageUrl.value) {
-        URL.revokeObjectURL(imageUrl.value);
-      }
-      imageUrl.value = URL.createObjectURL(file);
-      isOpenModal.value = true;
-      input.value = "";
+    posX.value = 50;
+    posY.value = 50;
+    prepareImageForModal(file);
+    workingFile.value = file;
+  }
+  input.value = "";
+};
+const prepareImageForModal = (file) => {
+  if (imageUrl.value && imageUrl.value.startsWith("blob:")) {
+    URL.revokeObjectURL(imageUrl.value);
+  }
+  imageUrl.value = URL.createObjectURL(file);
+  isOpenModal.value = true;
+};
+const onImageLoad = (e) => {
+  const img = e.target;
+  imageNaturalWidth = img.naturalWidth;
+  imageNaturalHeight = img.naturalHeight;
+};
+const startDrag = (e) => {
+  e.preventDefault();
+  isDragging.value = true;
+  if (e instanceof MouseEvent) {
+    startClientX = e.clientX;
+    startClientY = e.clientY;
+  } else {
+    const touch = e.touches?.[0];
+    if (touch) {
+      startClientX = touch.clientX;
+      startClientY = touch.clientY;
     }
   }
+  startPosX = posX.value;
+  startPosY = posY.value;
+  window.addEventListener("mousemove", onDrag);
+  window.addEventListener("touchmove", onDrag, { passive: false });
+  window.addEventListener("mouseup", stopDrag);
+  window.addEventListener("touchend", stopDrag);
+};
+const onDrag = (e) => {
+  if (!isDragging.value || !containerRef.value) return;
+  e.preventDefault();
+  let clientX, clientY;
+  if (e instanceof MouseEvent) {
+    clientX = e.clientX;
+    clientY = e.clientY;
+  } else {
+    const touch = e.touches?.[0];
+    if (touch) {
+      clientX = touch.clientX;
+      clientY = touch.clientY;
+    } else {
+      return;
+    }
+  }
+  const deltaXPixels = clientX - startClientX;
+  const deltaYPixels = clientY - startClientY;
+  const containerW = containerRef.value.offsetWidth;
+  const containerH = containerRef.value.offsetHeight;
+  const imgRatio = imageNaturalWidth / imageNaturalHeight;
+  const containerRatio = containerW / containerH;
+  let slidableWidth = 0;
+  let slidableHeight = 0;
+  if (imgRatio > containerRatio) {
+    const renderedWidth = containerH * imgRatio;
+    slidableWidth = renderedWidth - containerW;
+    if (slidableWidth > 0) {
+      const deltaPercent = deltaXPixels / slidableWidth * 100;
+      posX.value = clamp(startPosX - deltaPercent, 0, 100);
+    }
+  } else {
+    const renderedHeight = containerW / imgRatio;
+    slidableHeight = renderedHeight - containerH;
+    if (slidableHeight > 0) {
+      const deltaPercent = deltaYPixels / slidableHeight * 100;
+      posY.value = clamp(startPosY - deltaPercent, 0, 100);
+    }
+  }
+};
+const stopDrag = () => {
+  isDragging.value = false;
+  window.removeEventListener("mousemove", onDrag);
+  window.removeEventListener("touchmove", onDrag);
+  window.removeEventListener("mouseup", stopDrag);
+  window.removeEventListener("touchend", stopDrag);
+};
+const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+const onSave = () => {
+  const newModel = {
+    ...modelValue.value || {},
+    x: Math.round(posX.value * 100) / 100,
+    y: Math.round(posY.value * 100) / 100
+  };
+  if (workingFile.value) {
+    newModel.file = workingFile.value;
+    newModel.src = null;
+  }
+  modelValue.value = newModel;
+  onCancel();
 };
 const onCancel = () => {
   isOpenModal.value = false;
-  if (imageUrl.value) {
+  if (imageUrl.value && imageUrl.value.startsWith("blob:")) {
     URL.revokeObjectURL(imageUrl.value);
-    imageUrl.value = null;
   }
-  selectedFile.value = null;
+  imageUrl.value = null;
+  workingFile.value = null;
+  stopDrag();
 };
-const onCropImage = async () => {
-  if (!cropperRef.value) return;
-  const cropper = cropperRef.value;
-  const croppedFile = await getFileFromCanvas(
-    cropper,
-    "image_cover_crop.jpg",
-    "image/jpeg"
-  );
-  originalFile.value = croppedFile;
-  modelValue.value = croppedFile;
-  isOpenModal.value = false;
-  if (imageUrl.value) {
+onUnmounted(() => {
+  if (imageUrl.value && imageUrl.value.startsWith("blob:")) {
     URL.revokeObjectURL(imageUrl.value);
-    imageUrl.value = null;
   }
-  selectedFile.value = null;
-};
-function getFileFromCanvas(cropper, fileName, mimeType = "image/jpeg") {
-  return new Promise((resolve, reject) => {
-    const canvas = cropper.getCroppedCanvas();
-    if (!canvas || typeof canvas.toBlob !== "function") {
-      return reject(new Error("Canvas \u0E2B\u0E23\u0E37\u0E2D toBlob \u0E44\u0E21\u0E48\u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19"));
-    }
-    canvas.toBlob((blob) => {
-      if (!blob) {
-        return reject(new Error("\u0E2A\u0E23\u0E49\u0E32\u0E07 Blob \u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08"));
-      }
-      const file = new File([blob], fileName, { type: mimeType });
-      resolve(file);
-    }, mimeType);
-  });
-}
+  stopDrag();
+});
 </script>

package/dist/runtime/components/picker/picker-image-cover-profile.vue.d.ts

@@ -1,10 +1,16 @@
+export interface IImageCoverProfile {
+    file?: File | null;
+    src?: string | null;
+    x?: number;
+    y?: number;
+}
 type __VLS_ModelProps = {
-    modelValue?: File | null;
+    modelValue?: IImageCoverProfile | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: File | null | undefined) => any;
+    "update:modelValue": (value: IImageCoverProfile | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: File | null | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: IImageCoverProfile | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

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