pukaad-ui-lib 1.0.1

package/dist/runtime/components/modal/modal-user-account-search.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    confirmedText?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    complete: (...args: any[]) => void;
+    "update:modelValue": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onComplete?: ((...args: any[]) => any) | undefined;
+}>, {
+    confirmedText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,47 @@
+import type { HTMLAttributes } from "vue";
+export interface ModalProps {
+    class?: HTMLAttributes["class"];
+    title?: string;
+    description?: string;
+    footer?: string;
+    disabledCloseBtn?: boolean;
+}
+type __VLS_Props = ModalProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_20: {}, __VLS_27: {}, __VLS_34: {}, __VLS_36: {
+    meta: any;
+}, __VLS_43: {
+    meta: any;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_20) => any;
+} & {
+    title?: (props: typeof __VLS_27) => any;
+} & {
+    description?: (props: typeof __VLS_34) => any;
+} & {
+    default?: (props: typeof __VLS_36) => any;
+} & {
+    footer?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabledCloseBtn: 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/modal/modal.vue

@@ -0,0 +1,46 @@
+<template>
+  <ShadDialog v-model:open="isOpen">
+    <ShadDialogContent
+      :class="props.class"
+      :disabled-close-btn="props.disabledCloseBtn"
+      v-slot="{ meta }"
+      @submit="onSubmit"
+    >
+      <ShadDialogHeader>
+        <slot name="header">
+          <ShadDialogTitle>
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </ShadDialogTitle>
+          <ShadDialogDescription>
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </ShadDialogDescription>
+        </slot>
+      </ShadDialogHeader>
+      <slot name="default" :meta="meta" />
+      <ShadDialogFooter>
+        <slot name="footer" :meta="meta" />
+      </ShadDialogFooter>
+    </ShadDialogContent>
+  </ShadDialog>
+</template>
+
+<script setup>
+const emits = defineEmits(["submit"]);
+const props = defineProps({
+  class: { type: null, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  footer: { type: String, required: false },
+  disabledCloseBtn: { type: Boolean, required: false, default: false }
+});
+const isOpen = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const onSubmit = (e) => {
+  emits("submit");
+};
+</script>

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

@@ -0,0 +1,47 @@
+import type { HTMLAttributes } from "vue";
+export interface ModalProps {
+    class?: HTMLAttributes["class"];
+    title?: string;
+    description?: string;
+    footer?: string;
+    disabledCloseBtn?: boolean;
+}
+type __VLS_Props = ModalProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_20: {}, __VLS_27: {}, __VLS_34: {}, __VLS_36: {
+    meta: any;
+}, __VLS_43: {
+    meta: any;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_20) => any;
+} & {
+    title?: (props: typeof __VLS_27) => any;
+} & {
+    description?: (props: typeof __VLS_34) => any;
+} & {
+    default?: (props: typeof __VLS_36) => any;
+} & {
+    footer?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabledCloseBtn: 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/pagination.d.vue.ts

@@ -0,0 +1,20 @@
+interface PaginationProps {
+    totalPage?: number;
+}
+type __VLS_Props = PaginationProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+} & {
+    "change-item-per-page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    "onChange-item-per-page"?: ((value: number) => any) | undefined;
+}>, {
+    totalPage: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/pagination.vue

@@ -0,0 +1,60 @@
+<template>
+  <ShadPagination
+    v-slot="{ page }"
+    :items-per-page="itemPerPage"
+    :total="props.totalPage"
+    v-model:page="pageModel"
+  >
+    <ShadPaginationContent v-slot="{ items }">
+      <ShadPaginationFirst />
+      <ShadPaginationPrevious />
+      <template v-for="(item, index) in items" :key="index">
+        <ShadPaginationItem
+          v-if="item.type === 'page'"
+          :value="item.value"
+          :is-active="item.value === page"
+        >
+          {{ item.value }}
+        </ShadPaginationItem>
+      </template>
+      <ShadPaginationEllipsis />
+      <ShadPaginationNext />
+      <ShadPaginationLast />
+
+      <ShadDropdownMenu>
+        <ShadDropdownMenuTrigger>
+          <Button variant="outline">
+            <div class="flex gap-2 items-center">
+              <div>{{ itemPerPage }} / หน้า</div>
+              <Icon name="lucide:chevron-down" />
+            </div>
+          </Button>
+        </ShadDropdownMenuTrigger>
+        <ShadDropdownMenuContent class="max-h-96">
+          <ShadDropdownMenuItem
+            v-for="n in [10, 50, 100]"
+            :key="n"
+            @click="onSlectItemPerPage(n)"
+          >
+            {{ n }} / หน้า
+          </ShadDropdownMenuItem>
+        </ShadDropdownMenuContent>
+      </ShadDropdownMenu>
+    </ShadPaginationContent>
+  </ShadPagination>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const emits = defineEmits(["change-item-per-page"]);
+const props = defineProps({
+  totalPage: { type: Number, required: false, default: 1 }
+});
+const pageModel = defineModel({ type: Number, ...{
+  default: 1
+} });
+const itemPerPage = ref(10);
+const onSlectItemPerPage = (value) => {
+  itemPerPage.value = value;
+};
+</script>

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

@@ -0,0 +1,20 @@
+interface PaginationProps {
+    totalPage?: number;
+}
+type __VLS_Props = PaginationProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+} & {
+    "change-item-per-page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    "onChange-item-per-page"?: ((value: number) => any) | undefined;
+}>, {
+    totalPage: 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

@@ -0,0 +1,10 @@
+interface Props {
+    item?: File | null;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    complete: (file: File) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onComplete?: ((file: File) => 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

@@ -0,0 +1,181 @@
+<template>
+  <Dropdown>
+    <template #default="{ isOpen }">
+      <Button
+        prepend-icon="lucide:camera"
+        size="small"
+        variant="flat-outline"
+        color="black"
+      >
+        แก้ไขรูปภาพหน้าปก</Button
+      >
+    </template>
+    <template #content>
+      <div
+        class="flex gap-[4px] px-[8px] py-[8px] items-center cursor-pointer hover:bg-gray-100"
+        @click="onEditImage"
+      >
+        <Icon name="lucide:crop" />
+        <div class="font-body-medium">แก้ไขรูปภาพหน้าปก</div>
+      </div>
+      <div
+        class="flex gap-[4px] px-[8px] py-[8px] items-center cursor-pointer hover:bg-gray-100"
+        @click="onUploadImage"
+      >
+        <Icon name="lucide:upload" />
+        <div class="font-body-medium">อัปโหลดรูปภาพ</div>
+      </div>
+    </template>
+  </Dropdown>
+  <input
+    ref="fileInputRef"
+    type="file"
+    accept="image/*"
+    @change="onFileChange"
+    class="hidden"
+  />
+  <Modal
+    title="ปรับแต่งรูปภาพหน้าปก"
+    :width="632"
+    v-model="isOpenModal"
+    divider
+    disabled-padding-content
+  >
+    <div
+      class="flex justify-center items-center rounded-[8px] overflow-hidden relative p-[16px]"
+    >
+      <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"
+      >
+        <div
+          class="flex h-[40px] items-center gap-[8px] px-[16px] py-[8px] rounded-[8px] bg-black/60"
+        >
+          <Icon name="lucide:move" color="white" />
+          <div class="text-white font-body-large">ลากเพื่อเปลี่ยนตำแหน่ง</div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex items-center gap-[16px] w-full">
+        <Button variant="outline" full-width @click="onCancel"> ยกเลิก </Button>
+        <Button color="primary" full-width @click="onCropImage">
+          บันทึก
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const cropperRef = ref(null);
+const fileInputRef = ref(null);
+const imageUrl = ref(null);
+const isOpenModal = ref(false);
+const selectedFile = ref(null);
+const originalFile = ref(null);
+const props = defineProps({
+  item: { type: null, required: false }
+});
+const emit = defineEmits(["complete"]);
+const onEditImage = () => {
+  const fileToEdit = originalFile.value || props.item;
+  if (fileToEdit) {
+    selectedFile.value = fileToEdit;
+    if (imageUrl.value) {
+      URL.revokeObjectURL(imageUrl.value);
+    }
+    imageUrl.value = URL.createObjectURL(fileToEdit);
+    isOpenModal.value = true;
+  }
+};
+const onUploadImage = () => {
+  fileInputRef.value?.click();
+};
+const onFileChange = (event) => {
+  const input = event.target;
+  if (input.files && input.files.length > 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 = "";
+    }
+  }
+};
+const onCancel = () => {
+  isOpenModal.value = false;
+  if (imageUrl.value) {
+    URL.revokeObjectURL(imageUrl.value);
+    imageUrl.value = null;
+  }
+  selectedFile.value = null;
+};
+const onCropImage = async () => {
+  if (!cropperRef.value) return;
+  const cropper = cropperRef.value;
+  const croppedFile = await getFileFromCanvas(
+    cropper,
+    "image_cover_crop.jpg",
+    "image/jpeg"
+  );
+  emit("complete", croppedFile);
+  isOpenModal.value = false;
+  if (imageUrl.value) {
+    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);
+  });
+}
+</script>

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

@@ -0,0 +1,10 @@
+interface Props {
+    item?: File | null;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    complete: (file: File) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onComplete?: ((file: File) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+type __VLS_ModelProps = {
+    modelValue?: File | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: File | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, 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/picker/picker-image-profile.vue

@@ -0,0 +1,172 @@
+<template>
+  <label class="relative cursor-pointer">
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      class="absolute w-full h-full hidden cursor-pointer"
+      @change="onChange"
+    />
+
+    <div @click="onTriggerFileInput">
+      <slot name="default" />
+    </div>
+  </label>
+
+  <Modal
+    title="ปรับแต่งรูปภาพหน้าปก"
+    width="500"
+    title-position="left"
+    divider-header
+    divider-footer
+    disabled-padding-content
+    v-model="isOpenModal"
+  >
+    <div
+      class="h-[500px] flex justify-center items-center overflow-hidden circular-cropper-container"
+    >
+      <ImageCropper
+        v-if="imageFile"
+        ref="cropperRef"
+        dragMode="move"
+        :container-style="{
+  width: '320px',
+  height: '320px',
+  overflow: 'visible',
+  position: 'relative'
+}"
+        :img-style="{ display: 'block', maxWidth: '100%', maxHeight: '100%' }"
+        :src="imageUrl"
+        :aspect-ratio="1"
+        :initial-aspect-ratio="1"
+        :view-mode="3"
+        :guides="false"
+        :movable="true"
+        :crop-box-movable="false"
+        :crop-box-resizable="false"
+        :background="false"
+        :center="false"
+        :min-crop-box-width="320"
+        :min-crop-box-height="320"
+        :min-canvas-width="320"
+        :min-canvas-height="320"
+        :auto-crop-area="1"
+        :responsive="true"
+        :zoom-on-wheel="false"
+        :zoom-on-touch="false"
+        @zoom="onZoom"
+      />
+    </div>
+
+    <div class="p-[16px] flex gap-[16px] items-center text-mercury">
+      <Button variant="text" disabled-padding @click="onZoomOut">
+        <Icon name="f7:minus" size="16" />
+      </Button>
+      <InputSlider
+        thumb-size="16"
+        :min="isZoomMin"
+        :max="isZoomMax"
+        :step="isZoomStep"
+        full-width
+        v-model="isZoom"
+      />
+      <Button variant="text" disabled-padding @click="onZoomIn">
+        <Icon name="f7:plus" size="16" />
+      </Button>
+    </div>
+
+    <template #footer>
+      <div class="flex items-center gap-[16px]">
+        <Button variant="outline" full-width @click="isOpenModal = false">
+          ยกเลิก
+        </Button>
+        <Button color="primary" full-width @click="onCropImage">
+          บันทึก
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+const fileInputRef = ref(null);
+const cropperRef = ref(null);
+const isOpenModal = ref(false);
+const imageFile = ref();
+const imageUrl = ref(null);
+const isZoom = ref(0);
+const isZoomMin = 0;
+const isZoomMax = 5;
+const isZoomStep = 1;
+const fileCrop = defineModel({ type: null });
+const onTriggerFileInput = (event) => {
+  event.preventDefault();
+  fileInputRef.value?.click();
+};
+const onZoomOut = () => {
+  if (isZoom.value > isZoomMin) {
+    isZoom.value -= isZoomStep;
+  }
+};
+const onZoomIn = () => {
+  if (isZoom.value < isZoomMax) {
+    isZoom.value += isZoomStep;
+  }
+};
+const onChange = (event) => {
+  const input = event.target;
+  if (input.files && input.files.length > 0) {
+    imageFile.value = input.files[0];
+    imageUrl.value = URL.createObjectURL(imageFile.value);
+    input.value = "";
+    isOpenModal.value = true;
+  }
+};
+const onZoom = (event) => {
+  const numberZoom = event.detail.ratio;
+  if (numberZoom <= isZoomMax) {
+    isZoom.value = numberZoom;
+  } else {
+    event.preventDefault();
+  }
+};
+const onCropImage = async () => {
+  if (!cropperRef.value) return;
+  const cropper = cropperRef.value;
+  fileCrop.value = await getFileFromCanvas(
+    cropper,
+    "image_crop.jpg",
+    "image/jpeg"
+  );
+  isOpenModal.value = false;
+};
+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);
+  });
+}
+watch(
+  () => isZoom.value,
+  (newZoom) => {
+    if (cropperRef.value) {
+      const cropper = cropperRef.value;
+      cropper.zoomTo(newZoom);
+    }
+  }
+);
+</script>
+
+<style>
+.circular-cropper-container .cropper-view-box{border:2px solid var(--color-primary)!important;border-radius:50%!important}.circular-cropper-container .cropper-face,.circular-cropper-container .cropper-modal{background-color:transparent!important}.circular-cropper-container .cropper-wrap-box{opacity:.25!important;overflow:visible!important}
+</style>

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

@@ -0,0 +1,20 @@
+type __VLS_ModelProps = {
+    modelValue?: File | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: File | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};