pukaad-ui-lib 1.0.1

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

@@ -0,0 +1,13 @@
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/filter/filter-list-chip.d.vue.ts

@@ -0,0 +1,14 @@
+interface Chip {
+    label: string;
+    checked: boolean;
+}
+type __VLS_ModelProps = {
+    modelValue?: Chip[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Chip[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Chip[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/filter/filter-list-chip.vue

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="hasSelectedChips" class="flex gap-[8px] flex-wrap">
+    <Chip
+      v-for="(chip, index) in selectedChips"
+      :key="index"
+      color="primary"
+      closable
+      @closable="onClosable(chip)"
+    >
+      {{ chip.label }}
+    </Chip>
+
+    <Button variant="text" color="primary" padding="8" @click="clearAll">
+      ล้างตัวกรอง
+    </Button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const modelValue = defineModel({ type: Array, ...{
+  default: () => []
+} });
+const onClosable = (chip) => {
+  chip.checked = false;
+};
+const hasSelectedChips = computed(
+  () => modelValue.value.some((chip) => chip.checked)
+);
+const selectedChips = computed(
+  () => modelValue.value.filter((chip) => chip.checked)
+);
+const clearAll = () => {
+  modelValue.value.map((chip) => {
+    chip.checked = false;
+    return chip;
+  });
+};
+</script>

package/dist/runtime/components/filter/filter-list-chip.vue.d.ts

@@ -0,0 +1,14 @@
+interface Chip {
+    label: string;
+    checked: boolean;
+}
+type __VLS_ModelProps = {
+    modelValue?: Chip[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Chip[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Chip[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/filter/filter-list.d.vue.ts

@@ -0,0 +1,21 @@
+interface TypeItem {
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+}
+type __VLS_Props = {
+    label?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: TypeItem[];
+};
+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: TypeItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TypeItem[]) => any) | undefined;
+}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/filter/filter-list.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col gap-[8px]">
+    <div class="text-gray font-body-large-prominent">
+      {{ props.label }}
+    </div>
+
+    <InputCheckbox
+      v-for="(item, index) in modelValue"
+      :key="index"
+      :label="item.label"
+      label-position="left"
+      :disabled="item.disabled"
+      labelGap="auto"
+      v-model="item.checked"
+    />
+
+    <Button type="text" variant="primary"> แสดงเพิ่มเติม </Button>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: { type: String, required: false, default: "" }
+});
+const modelValue = defineModel({ type: Array, ...{
+  default: () => []
+} });
+</script>

package/dist/runtime/components/filter/filter-list.vue.d.ts

@@ -0,0 +1,21 @@
+interface TypeItem {
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+}
+type __VLS_Props = {
+    label?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: TypeItem[];
+};
+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: TypeItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TypeItem[]) => any) | undefined;
+}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name?: string;
+    size?: number;
+    color?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/icons.vue

@@ -0,0 +1,11 @@
+<template>
+  <Icon :name="props.name" :size="props.size" :color="props.color" />
+</template>
+
+<script setup>
+const props = defineProps({
+  name: { type: String, required: false },
+  size: { type: Number, required: false },
+  color: { type: String, required: false }
+});
+</script>

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name?: string;
+    size?: number;
+    color?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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

@@ -0,0 +1,88 @@
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+import type { ImageCropperProps } from "@/types/components/image/image-cropper";
+declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
+    getCropper: () => {
+        clear: () => Cropper;
+        crop: () => Cropper;
+        destroy: () => Cropper;
+        disable: () => Cropper;
+        enable: () => Cropper;
+        getCanvasData: () => Cropper.CanvasData;
+        getContainerData: () => Cropper.ContainerData;
+        getCropBoxData: () => Cropper.CropBoxData;
+        getCroppedCanvas: (options?: Cropper.GetCroppedCanvasOptions) => HTMLCanvasElement;
+        getData: (rounded?: boolean) => Cropper.Data;
+        getImageData: () => Cropper.ImageData;
+        move: (offsetX: number, offsetY?: number) => Cropper;
+        moveTo: (x: number, y?: number) => Cropper;
+        replace: (url: string, onlyColorChanged?: boolean) => Cropper;
+        reset: () => Cropper;
+        rotate: (degree: number) => Cropper;
+        rotateTo: (degree: number) => Cropper;
+        scale: (scaleX: number, scaleY?: number) => Cropper;
+        scaleX: (scaleX: number) => Cropper;
+        scaleY: (scaleY: number) => Cropper;
+        setAspectRatio: (aspectRatio: number) => Cropper;
+        setCanvasData: (data: Cropper.SetCanvasDataOptions) => Cropper;
+        setCropBoxData: (data: Cropper.SetCropBoxDataOptions) => Cropper;
+        setData: (data: Cropper.SetDataOptions) => Cropper;
+        setDragMode: (dragMode: Cropper.DragMode) => Cropper;
+        zoom: (ratio: number) => Cropper;
+        zoomTo: (ratio: number, pivot?: {
+            x: number;
+            y: number;
+        } | undefined) => Cropper;
+    } | null;
+    reset: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    clear: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    initCrop: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    replace: import("vue").Ref<(url: string, onlyColorChanged?: boolean) => Cropper | undefined, (url: string, onlyColorChanged?: boolean) => Cropper | undefined>;
+    enable: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    disable: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    destroy: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    move: import("vue").Ref<(offsetX: number, offsetY: number) => Cropper | undefined, (offsetX: number, offsetY: number) => Cropper | undefined>;
+    moveTo: import("vue").Ref<(x: number, y?: number) => Cropper | undefined, (x: number, y?: number) => Cropper | undefined>;
+    relativeZoom: import("vue").Ref<(ratio: number, _originalEvent?: Event) => Cropper | undefined, (ratio: number, _originalEvent?: Event) => Cropper | undefined>;
+    zoomTo: import("vue").Ref<(ratio: number, _originalEvent?: Event) => Cropper | undefined, (ratio: number, _originalEvent?: Event) => Cropper | undefined>;
+    rotate: import("vue").Ref<(degree: number) => Cropper | undefined, (degree: number) => Cropper | undefined>;
+    rotateTo: import("vue").Ref<(degree: number) => Cropper | undefined, (degree: number) => Cropper | undefined>;
+    scaleX: import("vue").Ref<(scaleX: number) => Cropper | undefined, (scaleX: number) => Cropper | undefined>;
+    scaleY: import("vue").Ref<(scaleY: number) => Cropper | undefined, (scaleY: number) => Cropper | undefined>;
+    scale: import("vue").Ref<(scaleX: number, scaleY?: number) => Cropper | undefined, (scaleX: number, scaleY?: number) => Cropper | undefined>;
+    getData: import("vue").Ref<(rounded?: boolean) => Cropper.Data | undefined, (rounded?: boolean) => Cropper.Data | undefined>;
+    setData: import("vue").Ref<(data: Record<string, any>) => Cropper | undefined, (data: Record<string, any>) => Cropper | undefined>;
+    getContainerData: import("vue").Ref<() => Cropper.ContainerData | undefined, () => Cropper.ContainerData | undefined>;
+    getImageData: import("vue").Ref<() => Cropper.ImageData | undefined, () => Cropper.ImageData | undefined>;
+    getCanvasData: import("vue").Ref<() => Cropper.CanvasData | undefined, () => Cropper.CanvasData | undefined>;
+    setCanvasData: import("vue").Ref<(data: Record<string, any>) => Cropper | undefined, (data: Record<string, any>) => Cropper | undefined>;
+    getCropBoxData: import("vue").Ref<() => Cropper.CropBoxData | undefined, () => Cropper.CropBoxData | undefined>;
+    setCropBoxData: import("vue").Ref<(data: Record<string, any>) => Cropper | undefined, (data: Record<string, any>) => Cropper | undefined>;
+    getCroppedCanvas: import("vue").Ref<(options?: Record<string, any>) => HTMLCanvasElement | undefined, (options?: Record<string, any>) => HTMLCanvasElement | undefined>;
+    setAspectRatio: import("vue").Ref<(aspectRatio: number) => Cropper | undefined, (aspectRatio: number) => Cropper | undefined>;
+    setDragMode: import("vue").Ref<(mode: "crop" | "move" | "none") => Cropper | undefined, (mode: "crop" | "move" | "none") => Cropper | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
+    center: boolean;
+    src: string;
+    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;
+    scalable: boolean;
+    zoomable: boolean;
+    zoomOnTouch: boolean;
+    zoomOnWheel: boolean;
+    cropBoxMovable: boolean;
+    cropBoxResizable: boolean;
+    toggleDragModeOnDblclick: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,134 @@
+<template>
+  <div :style="containerStyle">
+    <img
+      ref="imgRef"
+      :src="src"
+      :alt="alt || 'image'"
+      :style="[{ 'max-width': '100%' }, imgStyle]"
+      :crossorigin="crossorigin"
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  onMounted,
+  watch,
+  reactive,
+  toRefs,
+  onUnmounted,
+  nextTick
+} from "vue";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+const props = defineProps({
+  containerStyle: { type: Object, required: false },
+  src: { type: String, required: true, default: "" },
+  alt: { type: String, required: false },
+  imgStyle: { type: Object, required: false },
+  viewMode: { type: Number, required: false },
+  dragMode: { type: String, required: false },
+  initialAspectRatio: { type: Number, required: false },
+  aspectRatio: { type: Number, required: false },
+  data: { type: Object, required: false },
+  preview: { type: [String, Array, Object], required: false },
+  responsive: { type: Boolean, required: false, default: true },
+  restore: { type: Boolean, required: false, default: true },
+  checkCrossOrigin: { type: Boolean, required: false, default: true },
+  checkOrientation: { type: Boolean, required: false, default: true },
+  crossorigin: { type: String, required: false, default: "" },
+  modal: { type: Boolean, required: false, default: true },
+  guides: { type: Boolean, required: false, default: true },
+  center: { type: Boolean, required: false, default: true },
+  highlight: { type: Boolean, required: false, default: true },
+  background: { type: Boolean, required: false, default: true },
+  autoCrop: { type: Boolean, required: false, default: true },
+  autoCropArea: { type: Number, required: false },
+  movable: { type: Boolean, required: false, default: true },
+  rotatable: { type: Boolean, required: false, default: true },
+  scalable: { type: Boolean, required: false, default: true },
+  zoomable: { type: Boolean, required: false, default: true },
+  zoomOnTouch: { type: Boolean, required: false, default: true },
+  zoomOnWheel: { type: Boolean, required: false, default: true },
+  wheelZoomRatio: { type: Number, required: false },
+  cropBoxMovable: { type: Boolean, required: false, default: true },
+  cropBoxResizable: { type: Boolean, required: false, default: true },
+  toggleDragModeOnDblclick: { type: Boolean, required: false, default: true },
+  minCanvasWidth: { type: Number, required: false },
+  minCanvasHeight: { type: Number, required: false },
+  minCropBoxWidth: { type: Number, required: false },
+  minCropBoxHeight: { type: Number, required: false },
+  minContainerWidth: { type: Number, required: false },
+  minContainerHeight: { type: Number, required: false },
+  ready: { type: Function, required: false },
+  cropstart: { type: Function, required: false },
+  cropmove: { type: Function, required: false },
+  cropend: { type: Function, required: false },
+  crop: { type: Function, required: false },
+  zoom: { type: Function, required: false }
+});
+const imgRef = ref(null);
+const cropperInstance = ref(null);
+onMounted(() => {
+  const { containerStyle, src, alt, imgStyle, ...options } = props;
+  const filteredOptions = {};
+  for (const key in options) {
+    if (options[key] !== void 0) {
+      filteredOptions[key] = options[key];
+    }
+  }
+  nextTick(() => {
+    if (imgRef.value) {
+      cropperInstance.value = new Cropper(imgRef.value, filteredOptions);
+    }
+  });
+});
+watch(
+  () => props.src,
+  (newSrc, oldSrc) => {
+    if (newSrc && newSrc !== oldSrc && cropperInstance.value) {
+      cropperInstance.value.replace(newSrc);
+    }
+  }
+);
+const cropperMethods = reactive({
+  reset: () => cropperInstance.value?.reset(),
+  clear: () => cropperInstance.value?.clear(),
+  initCrop: () => cropperInstance.value?.crop(),
+  replace: (url, onlyColorChanged = false) => cropperInstance.value?.replace(url, onlyColorChanged),
+  enable: () => cropperInstance.value?.enable(),
+  disable: () => cropperInstance.value?.disable(),
+  destroy: () => cropperInstance.value?.destroy(),
+  move: (offsetX, offsetY) => cropperInstance.value?.move(offsetX, offsetY),
+  moveTo: (x, y = x) => cropperInstance.value?.moveTo(x, y),
+  relativeZoom: (ratio, _originalEvent) => cropperInstance.value?.zoom(ratio),
+  zoomTo: (ratio, _originalEvent) => cropperInstance.value?.zoomTo(ratio),
+  rotate: (degree) => cropperInstance.value?.rotate(degree),
+  rotateTo: (degree) => cropperInstance.value?.rotateTo(degree),
+  scaleX: (scaleX) => cropperInstance.value?.scaleX(scaleX),
+  scaleY: (scaleY) => cropperInstance.value?.scaleY(scaleY),
+  scale: (scaleX, scaleY = scaleX) => cropperInstance.value?.scale(scaleX, scaleY),
+  getData: (rounded = false) => cropperInstance.value?.getData(rounded),
+  setData: (data) => cropperInstance.value?.setData(data),
+  getContainerData: () => cropperInstance.value?.getContainerData(),
+  getImageData: () => cropperInstance.value?.getImageData(),
+  getCanvasData: () => cropperInstance.value?.getCanvasData(),
+  setCanvasData: (data) => cropperInstance.value?.setCanvasData(data),
+  getCropBoxData: () => cropperInstance.value?.getCropBoxData(),
+  setCropBoxData: (data) => cropperInstance.value?.setCropBoxData(data),
+  getCroppedCanvas: (options = {}) => cropperInstance.value?.getCroppedCanvas(options),
+  setAspectRatio: (aspectRatio) => cropperInstance.value?.setAspectRatio(aspectRatio),
+  setDragMode: (mode) => cropperInstance.value?.setDragMode(mode)
+});
+onUnmounted(() => {
+  if (cropperInstance.value) {
+    cropperInstance.value.destroy();
+    cropperInstance.value = null;
+  }
+});
+defineExpose({
+  ...toRefs(cropperMethods),
+  getCropper: () => cropperInstance.value
+});
+</script>

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

@@ -0,0 +1,88 @@
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+import type { ImageCropperProps } from "@/types/components/image/image-cropper";
+declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
+    getCropper: () => {
+        clear: () => Cropper;
+        crop: () => Cropper;
+        destroy: () => Cropper;
+        disable: () => Cropper;
+        enable: () => Cropper;
+        getCanvasData: () => Cropper.CanvasData;
+        getContainerData: () => Cropper.ContainerData;
+        getCropBoxData: () => Cropper.CropBoxData;
+        getCroppedCanvas: (options?: Cropper.GetCroppedCanvasOptions) => HTMLCanvasElement;
+        getData: (rounded?: boolean) => Cropper.Data;
+        getImageData: () => Cropper.ImageData;
+        move: (offsetX: number, offsetY?: number) => Cropper;
+        moveTo: (x: number, y?: number) => Cropper;
+        replace: (url: string, onlyColorChanged?: boolean) => Cropper;
+        reset: () => Cropper;
+        rotate: (degree: number) => Cropper;
+        rotateTo: (degree: number) => Cropper;
+        scale: (scaleX: number, scaleY?: number) => Cropper;
+        scaleX: (scaleX: number) => Cropper;
+        scaleY: (scaleY: number) => Cropper;
+        setAspectRatio: (aspectRatio: number) => Cropper;
+        setCanvasData: (data: Cropper.SetCanvasDataOptions) => Cropper;
+        setCropBoxData: (data: Cropper.SetCropBoxDataOptions) => Cropper;
+        setData: (data: Cropper.SetDataOptions) => Cropper;
+        setDragMode: (dragMode: Cropper.DragMode) => Cropper;
+        zoom: (ratio: number) => Cropper;
+        zoomTo: (ratio: number, pivot?: {
+            x: number;
+            y: number;
+        } | undefined) => Cropper;
+    } | null;
+    reset: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    clear: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    initCrop: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    replace: import("vue").Ref<(url: string, onlyColorChanged?: boolean) => Cropper | undefined, (url: string, onlyColorChanged?: boolean) => Cropper | undefined>;
+    enable: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    disable: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    destroy: import("vue").Ref<() => Cropper | undefined, () => Cropper | undefined>;
+    move: import("vue").Ref<(offsetX: number, offsetY: number) => Cropper | undefined, (offsetX: number, offsetY: number) => Cropper | undefined>;
+    moveTo: import("vue").Ref<(x: number, y?: number) => Cropper | undefined, (x: number, y?: number) => Cropper | undefined>;
+    relativeZoom: import("vue").Ref<(ratio: number, _originalEvent?: Event) => Cropper | undefined, (ratio: number, _originalEvent?: Event) => Cropper | undefined>;
+    zoomTo: import("vue").Ref<(ratio: number, _originalEvent?: Event) => Cropper | undefined, (ratio: number, _originalEvent?: Event) => Cropper | undefined>;
+    rotate: import("vue").Ref<(degree: number) => Cropper | undefined, (degree: number) => Cropper | undefined>;
+    rotateTo: import("vue").Ref<(degree: number) => Cropper | undefined, (degree: number) => Cropper | undefined>;
+    scaleX: import("vue").Ref<(scaleX: number) => Cropper | undefined, (scaleX: number) => Cropper | undefined>;
+    scaleY: import("vue").Ref<(scaleY: number) => Cropper | undefined, (scaleY: number) => Cropper | undefined>;
+    scale: import("vue").Ref<(scaleX: number, scaleY?: number) => Cropper | undefined, (scaleX: number, scaleY?: number) => Cropper | undefined>;
+    getData: import("vue").Ref<(rounded?: boolean) => Cropper.Data | undefined, (rounded?: boolean) => Cropper.Data | undefined>;
+    setData: import("vue").Ref<(data: Record<string, any>) => Cropper | undefined, (data: Record<string, any>) => Cropper | undefined>;
+    getContainerData: import("vue").Ref<() => Cropper.ContainerData | undefined, () => Cropper.ContainerData | undefined>;
+    getImageData: import("vue").Ref<() => Cropper.ImageData | undefined, () => Cropper.ImageData | undefined>;
+    getCanvasData: import("vue").Ref<() => Cropper.CanvasData | undefined, () => Cropper.CanvasData | undefined>;
+    setCanvasData: import("vue").Ref<(data: Record<string, any>) => Cropper | undefined, (data: Record<string, any>) => Cropper | undefined>;
+    getCropBoxData: import("vue").Ref<() => Cropper.CropBoxData | undefined, () => Cropper.CropBoxData | undefined>;
+    setCropBoxData: import("vue").Ref<(data: Record<string, any>) => Cropper | undefined, (data: Record<string, any>) => Cropper | undefined>;
+    getCroppedCanvas: import("vue").Ref<(options?: Record<string, any>) => HTMLCanvasElement | undefined, (options?: Record<string, any>) => HTMLCanvasElement | undefined>;
+    setAspectRatio: import("vue").Ref<(aspectRatio: number) => Cropper | undefined, (aspectRatio: number) => Cropper | undefined>;
+    setDragMode: import("vue").Ref<(mode: "crop" | "move" | "none") => Cropper | undefined, (mode: "crop" | "move" | "none") => Cropper | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
+    center: boolean;
+    src: string;
+    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;
+    scalable: boolean;
+    zoomable: boolean;
+    zoomOnTouch: boolean;
+    zoomOnWheel: boolean;
+    cropBoxMovable: boolean;
+    cropBoxResizable: boolean;
+    toggleDragModeOnDblclick: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+import type { ImageProps } from "@/types/components/image/image";
+declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {
+    class: string;
+    width: number | string;
+    height: number | string;
+    src: string;
+    fit: import("@/types/components/image/image").ImageFit;
+    alt: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/image/image.vue

@@ -0,0 +1,66 @@
+<template>
+  <NuxtImg
+    :class="props.class"
+    :src="props.src"
+    :alt="props.alt"
+    :custom="true"
+    :style="{
+  width: props.width == 'auto' ? '100%' : `${props.width}px`,
+  height: props.height == 'auto' ? '100%' : `${props.height}px`,
+  objectFit: props.fit
+}"
+    loading="lazy"
+    v-slot="{ src, isLoaded, imgAttrs }"
+  >
+    <div
+      v-if="isLoaded || src"
+      :style="{
+  width: props.width == 'auto' ? '100%' : `${props.width}px`,
+  height: props.height == 'auto' ? '100%' : `${props.height}px`
+}"
+    >
+      <img
+        v-bind="imgAttrs"
+        :src="src"
+        :alt="props.alt"
+        :style="{
+  width: '100%',
+  height: '100%',
+  objectFit: props.fit
+}"
+      />
+    </div>
+    <div
+      v-else
+      ref="refLazy"
+      :class="['flex justify-center items-center bg-fade', props.class]"
+      :style="{
+  width: props.width == 'auto' ? '100%' : `${props.width}px`,
+  height: props.height == 'auto' ? '100%' : `${props.height}px`
+}"
+    ></div>
+
+  
+  </NuxtImg>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+const props = defineProps({
+  class: { type: String, required: false, default: "" },
+  src: { type: String, required: false, default: "" },
+  width: { type: [Number, String], required: false, default: "" },
+  height: { type: [Number, String], required: false, default: "" },
+  fit: { type: String, required: false, default: "cover" },
+  alt: { type: String, required: false, default: "" }
+});
+const refLazy = ref(null);
+const iconSize = computed(() => {
+  const containerWidth = refLazy.value?.clientWidth;
+  const containerHeight = refLazy.value?.clientHeight;
+  const size = Math.min(containerWidth ?? 0, containerHeight ?? 0) * 0.5;
+  if (size > 150) return 150;
+  if (size < 24) return 24;
+  return size;
+});
+</script>

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

@@ -0,0 +1,11 @@
+import type { ImageProps } from "@/types/components/image/image";
+declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {
+    class: string;
+    width: number | string;
+    height: number | string;
+    src: string;
+    fit: import("@/types/components/image/image").ImageFit;
+    alt: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,24 @@
+export interface InputOTPProps {
+    id?: string;
+    name?: string;
+    digit?: number | string;
+    rules?: object | string | Function;
+    disabled?: boolean;
+}
+type __VLS_Props = InputOTPProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+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: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    id: string;
+    name: string;
+    disabled: boolean;
+    digit: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;