@ramathibodi/nuxt-commons 0.1.73 → 4.0.0

package/dist/runtime/components/form/images/Capture.vue

@@ -1,180 +1,145 @@
-<script lang="ts" setup>
-import {computed, defineExpose, onBeforeUnmount, onMounted, ref, useTemplateRef, watchEffect} from "vue"
-import {useDevicesList, useUserMedia} from "@vueuse/core"
-import {getBase64Strings, type ImageFormat} from 'exif-rotate-js'
-import {useAlert} from '../../../composables/alert'
-import {VInput} from 'vuetify/components/VInput'
-
-interface Props {
-  imageFormat?: ImageFormat
-  autoStart?: boolean
-  fileOnly?: boolean
-  readonly?: boolean
-  disabled?: boolean
-  buttonText?: string
-  maxHeight?: string | number
-  maxWidth?: string | number
-  aspectRatio?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  imageFormat: "image/jpeg",
-  autoStart: true,
-  fileOnly: false,
-  readonly: false,
-  disabled: false,
-  buttonText: "Add Photo",
-  maxWidth: 1024
-})
-
-const alert = useAlert()
-
-const imageData = defineModel<string>()
-const inputRef = useTemplateRef<VInput>("inputRef")
-
-const isLoading = ref<boolean>(false)
-const isCaptured = computed(()=>!!imageData.value)
-const isEditing = ref<boolean>(false)
-
-const videoScreen = ref<HTMLVideoElement>()
-
-const currentCameraId = ref<ConstrainDOMString | undefined>()
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watchEffect } from "vue";
+import { useDevicesList, useUserMedia } from "@vueuse/core";
+import { getBase64Strings } from "exif-rotate-js";
+import { useAlert } from "../../../composables/alert";
+import { VInput } from "vuetify/components/VInput";
+const props = defineProps({
+  imageFormat: { type: String, required: false, default: "image/jpeg" },
+  autoStart: { type: Boolean, required: false, default: true },
+  fileOnly: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  buttonText: { type: String, required: false, default: "Add Photo" },
+  maxHeight: { type: [String, Number], required: false },
+  maxWidth: { type: [String, Number], required: false, default: 1024 },
+  aspectRatio: { type: Number, required: false }
+});
+const alert = useAlert();
+const imageData = defineModel({ type: String });
+const inputRef = useTemplateRef("inputRef");
+const isLoading = ref(false);
+const isCaptured = computed(() => !!imageData.value);
+const isEditing = ref(false);
+const videoScreen = ref();
+const currentCameraId = ref();
 const { videoInputs: cameras } = useDevicesList({
   requestPermissions: true,
   constraints: { audio: false, video: true },
   onUpdated() {
-    if (!cameras.value.find(camera => camera.deviceId === currentCameraId.value))
-      currentCameraId.value = cameras.value[0]?.deviceId
-  },
-})
-const hasCamera = computed(()=>{ return  !!currentCameraId.value })
-
+    if (!cameras.value.find((camera) => camera.deviceId === currentCameraId.value))
+      currentCameraId.value = cameras.value[0]?.deviceId;
+  }
+});
+const hasCamera = computed(() => {
+  return !!currentCameraId.value;
+});
 const { stream, start: cameraStart, stop: cameraStop, enabled: cameraEnabled } = useUserMedia({
-  constraints: { video: { deviceId: currentCameraId.value, width: {min: 1280}, aspectRatio: props.aspectRatio}},
-})
-
+  constraints: { video: { deviceId: currentCameraId.value, width: { min: 1280 }, aspectRatio: props.aspectRatio } }
+});
 watchEffect(() => {
-  if (videoScreen.value) videoScreen.value.srcObject = (stream.value) ? stream.value! : null
-})
-
+  if (videoScreen.value) videoScreen.value.srcObject = stream.value ? stream.value : null;
+});
 function startCamera() {
-  imageData.value = undefined
+  imageData.value = void 0;
   if (!cameraEnabled.value) {
-    isLoading.value = true
-    cameraStart().finally(()=>{
-      isLoading.value = false
-    })
+    isLoading.value = true;
+    cameraStart().finally(() => {
+      isLoading.value = false;
+    });
   }
 }
-
 function stopCamera() {
-  if (cameraEnabled.value) cameraStop()
+  if (cameraEnabled.value) cameraStop();
 }
-
 function captureImage() {
   if (videoScreen.value) {
-    const canvas = document.createElement('canvas')
-    canvas.width = videoScreen.value.videoWidth
-    canvas.height = videoScreen.value.videoHeight
-    const context = canvas.getContext('2d')
+    const canvas = document.createElement("canvas");
+    canvas.width = videoScreen.value.videoWidth;
+    canvas.height = videoScreen.value.videoHeight;
+    const context = canvas.getContext("2d");
     if (context) {
-      context.drawImage(videoScreen.value, 0, 0, canvas.width, canvas.height)
-      isEditing.value = false
-      imageData.value = canvas.toDataURL(props.imageFormat)
-      stopCamera()
+      context.drawImage(videoScreen.value, 0, 0, canvas.width, canvas.height);
+      isEditing.value = false;
+      imageData.value = canvas.toDataURL(props.imageFormat);
+      stopCamera();
     }
   }
 }
-
-function captureImageFile(selectedFile: File | File[] | undefined) {
+function captureImageFile(selectedFile) {
   if (!selectedFile) {
-    alert?.addAlert({ message: 'No file selected.', alertType: 'error' })
-    return
+    alert?.addAlert({ message: "No file selected.", alertType: "error" });
+    return;
   }
-
-  const scanImageSingleFile: File = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
-
-  getBase64Strings([scanImageSingleFile], { maxSize: computedMaxSize.value,type: props.imageFormat,quality: 1 }).then((returnData) => {
-    isEditing.value = false
-    imageData.value = returnData[0]
-    stopCamera()
-  }).catch((e) => void e)
+  const scanImageSingleFile = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile;
+  getBase64Strings([scanImageSingleFile], { maxSize: computedMaxSize.value, type: props.imageFormat, quality: 1 }).then((returnData) => {
+    isEditing.value = false;
+    imageData.value = returnData[0];
+    stopCamera();
+  }).catch((e) => void e);
 }
-
 onMounted(() => {
-  if (!isCaptured.value && props.autoStart && !props.fileOnly) startCamera()
-})
-
+  if (!isCaptured.value && props.autoStart && !props.fileOnly) startCamera();
+});
 onBeforeUnmount(() => {
-  stopCamera()
-})
-
+  stopCamera();
+});
 function reset() {
-  inputRef.value?.reset()
-  stopCamera()
-  if (props.autoStart && !props.fileOnly) startCamera()
+  inputRef.value?.reset();
+  stopCamera();
+  if (props.autoStart && !props.fileOnly) startCamera();
 }
-
 const computedMaxWidth = computed(() => {
-  if (typeof props.maxWidth === 'number') {
-    return `${props.maxWidth}px`
+  if (typeof props.maxWidth === "number") {
+    return `${props.maxWidth}px`;
   } else if (!isNaN(Number(props.maxWidth))) {
-    return `${props.maxWidth}px`
+    return `${props.maxWidth}px`;
   }
-  return props.maxWidth
-})
-
+  return props.maxWidth;
+});
 const computedMaxHeight = computed(() => {
-  if (typeof props.maxHeight === 'number') {
-    return `${props.maxHeight}px`
+  if (typeof props.maxHeight === "number") {
+    return `${props.maxHeight}px`;
   } else if (!isNaN(Number(props.maxHeight))) {
-    return `${props.maxHeight}px`
+    return `${props.maxHeight}px`;
   }
-  return props.maxHeight
-})
-
+  return props.maxHeight;
+});
 const computedMaxSize = computed(() => {
-  let tmpMaxHeight : number = 1024
-  let tmpMaxWidth : number = 1024
-
-  if (typeof props.maxWidth === 'number') {
-    tmpMaxWidth = <number>props.maxWidth
+  let tmpMaxHeight = 1024;
+  let tmpMaxWidth = 1024;
+  if (typeof props.maxWidth === "number") {
+    tmpMaxWidth = props.maxWidth;
   } else if (!isNaN(Number(props.maxWidth))) {
-    tmpMaxWidth = Number(props.maxWidth)
+    tmpMaxWidth = Number(props.maxWidth);
   }
-
-  if (typeof props.maxHeight === 'number') {
-    tmpMaxHeight = <number>props.maxHeight
+  if (typeof props.maxHeight === "number") {
+    tmpMaxHeight = props.maxHeight;
   } else if (!isNaN(Number(props.maxHeight))) {
-    tmpMaxHeight = Number(props.maxHeight)
+    tmpMaxHeight = Number(props.maxHeight);
   }
-
-  return (tmpMaxWidth>tmpMaxHeight) ? tmpMaxWidth : tmpMaxHeight
-})
-
-const operation = ref({startCamera,stopCamera,reset,captureImage,captureImageFile,isLoading,isCaptured,hasCamera})
-
-const isValid = computed(()=>{
-  return inputRef.value?.isValid
-})
-
-const errorMessages = computed(()=>{
-  return inputRef.value?.errorMessages
-})
-
+  return tmpMaxWidth > tmpMaxHeight ? tmpMaxWidth : tmpMaxHeight;
+});
+const operation = ref({ startCamera, stopCamera, reset, captureImage, captureImageFile, isLoading, isCaptured, hasCamera });
+const isValid = computed(() => {
+  return inputRef.value?.isValid;
+});
+const errorMessages = computed(() => {
+  return inputRef.value?.errorMessages;
+});
 defineExpose({
   errorMessages,
   isValid,
   reset,
-  resetValidation : ()=>inputRef.value?.resetValidation(),
-  validate : ()=>inputRef.value?.validate(),
+  resetValidation: () => inputRef.value?.resetValidation(),
+  validate: () => inputRef.value?.validate(),
   operation
-})
+});
 </script>
 
 <template>
   <v-input v-model="imageData" v-bind="$attrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
+    <template #default="{ isReadonly, isDisabled }">
       <v-container fluid class="ma-0 pa-0">
         <v-card>
           <v-card-text class="d-flex justify-center text-center" v-if="!isLoading && !isCaptured">
@@ -191,8 +156,8 @@ defineExpose({
               </FileBtn>
             </template>
             <template v-else>
-              <div style="position: relative; display: inline-block; width: 100%;" :style="{maxWidth:computedMaxWidth,maxHeight:computedMaxHeight}">
-                <video autoplay ref="videoScreen" width="100%" :style="{maxWidth:computedMaxWidth,maxHeight:computedMaxHeight}"></video>
+              <div style="position: relative; display: inline-block; width: 100%;" :style="{ maxWidth: computedMaxWidth, maxHeight: computedMaxHeight }">
+                <video autoplay ref="videoScreen" width="100%" :style="{ maxWidth: computedMaxWidth, maxHeight: computedMaxHeight }"></video>
                 <div style="position: absolute; bottom: 10px; right: 10px; z-index: 2000;">
                   <FileBtn
                       accept="image/*"
@@ -206,18 +171,18 @@ defineExpose({
             </template>
           </v-card-text>
           <v-card-text class="d-flex justify-center" v-if="isCaptured">
-            <div style="position: relative; display: inline-block; width: 100%;" :style="{maxWidth:computedMaxWidth,maxHeight:computedMaxHeight}" v-if="!isEditing">
+            <div style="position: relative; display: inline-block; width: 100%;" :style="{ maxWidth: computedMaxWidth, maxHeight: computedMaxHeight }" v-if="!isEditing">
               <v-img :src="imageData" :max-height="maxHeight" :max-width="maxWidth" contain></v-img>
               <div style="position: absolute; bottom: 10px; right: 10px; z-index: 2000;">
                 <v-btn
                     icon="mdi mdi-image-edit"
                     icon-only
-                    @click="isEditing=true"
+                    @click="isEditing = true"
                     :disabled="disabled || readonly || (isReadonly.value || isDisabled.value)"
                 />
               </div>
             </div>
-            <form-images-edit v-model="imageData" :aspect-ratio="aspectRatio" :image-format="imageFormat" @update:model-value="isEditing=false" @close="isEditing=false"  v-else></form-images-edit>
+            <form-images-edit v-model="imageData" :aspect-ratio="aspectRatio" :image-format="imageFormat" @update:model-value="isEditing = false" @close="isEditing = false"  v-else></form-images-edit>
           </v-card-text>
           <v-card-text class="d-flex justify-center" v-if="isLoading">
             <v-progress-circular indeterminate></v-progress-circular>
@@ -225,7 +190,7 @@ defineExpose({
           <v-card-actions v-if="!readonly && (!fileOnly || isCaptured) && !isEditing && !(isReadonly.value || isDisabled.value)">
             <slot name="actions" :operation="operation">
               <v-spacer></v-spacer>
-              <v-btn color="primary" variant="flat" @click="startCamera" v-if="!cameraEnabled && hasCamera && !fileOnly" :disabled="disabled">{{ (isCaptured) ? "Retake" : "Start" }}</v-btn>
+              <v-btn color="primary" variant="flat" @click="startCamera" v-if="!cameraEnabled && hasCamera && !fileOnly" :disabled="disabled">{{ isCaptured ? "Retake" : "Start" }}</v-btn>
               <v-btn color="primary" variant="flat" @click="captureImage" v-if="cameraEnabled" :disabled="disabled">Capture</v-btn>
               <v-btn color="primary" variant="flat" @click="reset" :disabled="disabled">Reset</v-btn>
               <v-spacer></v-spacer>
@@ -235,4 +200,4 @@ defineExpose({
       </v-container>
     </template>
   </v-input>
-</template>
+</template>

package/dist/runtime/components/form/images/Capture.vue.d.ts

@@ -0,0 +1,96 @@
+import { type ImageFormat } from 'exif-rotate-js';
+interface Props {
+    imageFormat?: ImageFormat;
+    autoStart?: boolean;
+    fileOnly?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    buttonText?: string;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    aspectRatio?: number;
+}
+/**
+ * Public props accepted by FormImagesCapture.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+type __VLS_Props = Props;
+declare function startCamera(): void;
+declare function stopCamera(): void;
+declare function captureImage(): void;
+declare function captureImageFile(selectedFile: File | File[] | undefined): void;
+declare function reset(): void;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_92: {
+    operation: {
+        startCamera: typeof startCamera;
+        stopCamera: typeof stopCamera;
+        reset: typeof reset;
+        captureImage: typeof captureImage;
+        captureImageFile: typeof captureImageFile;
+        isLoading: boolean;
+        isCaptured: boolean;
+        hasCamera: boolean;
+    };
+};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_92) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessages: import("vue").ComputedRef<(string & string[]) | (readonly string[] & string[]) | undefined>;
+    isValid: import("vue").ComputedRef<boolean | null | undefined>;
+    reset: typeof reset;
+    resetValidation: () => Promise<void> | undefined;
+    validate: () => Promise<string[]> | undefined;
+    operation: import("vue").Ref<{
+        startCamera: typeof startCamera;
+        stopCamera: typeof stopCamera;
+        reset: typeof reset;
+        captureImage: typeof captureImage;
+        captureImageFile: typeof captureImageFile;
+        isLoading: boolean;
+        isCaptured: boolean;
+        hasCamera: boolean;
+    }, {
+        startCamera: typeof startCamera;
+        stopCamera: typeof stopCamera;
+        reset: typeof reset;
+        captureImage: typeof captureImage;
+        captureImageFile: typeof captureImageFile;
+        isLoading: import("vue").Ref<boolean, boolean>;
+        isCaptured: import("vue").ComputedRef<boolean>;
+        hasCamera: import("vue").ComputedRef<boolean>;
+    } | {
+        startCamera: typeof startCamera;
+        stopCamera: typeof stopCamera;
+        reset: typeof reset;
+        captureImage: typeof captureImage;
+        captureImageFile: typeof captureImageFile;
+        isLoading: boolean;
+        isCaptured: boolean;
+        hasCamera: boolean;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    maxWidth: string | number;
+    readonly: boolean;
+    buttonText: string;
+    imageFormat: ImageFormat;
+    autoStart: boolean;
+    fileOnly: 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/form/images/Edit.d.vue.ts

@@ -0,0 +1,29 @@
+import 'cropperjs/dist/cropper.css';
+import type { ImageFormat } from "exif-rotate-js";
+interface Props {
+    imageFormat?: ImageFormat;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    aspectRatio?: number;
+}
+/**
+ * Public props accepted by FormImagesEdit.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+type __VLS_Props = Props;
+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, {
+    close: (...args: any[]) => void;
+    "update:modelValue": (value: string | undefined) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    maxWidth: string | number;
+    imageFormat: ImageFormat;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/images/Edit.vue

@@ -1,87 +1,74 @@
-<script lang="ts" setup>
-import {computed, ref} from 'vue'
-import Cropper from 'cropperjs'
-import 'cropperjs/dist/cropper.css'
-import type {ImageFormat} from "exif-rotate-js"
-
-interface Props {
-  imageFormat?: ImageFormat
-  maxHeight?: string | number
-  maxWidth?: string | number
-  aspectRatio?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  imageFormat: "image/jpeg",
-  maxWidth: 1024
-})
-
-const imageData = defineModel<string>()
-const emit = defineEmits(['close'])
-
-const cropper = ref<Cropper>()
-const imageRef = ref<HTMLImageElement>()
-const dragMode = ref<string>("none")
-
+<script setup>
+import { computed, ref } from "vue";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+const props = defineProps({
+  imageFormat: { type: String, required: false, default: "image/jpeg" },
+  maxHeight: { type: [String, Number], required: false },
+  maxWidth: { type: [String, Number], required: false, default: 1024 },
+  aspectRatio: { type: Number, required: false }
+});
+const imageData = defineModel({ type: String });
+const emit = defineEmits(["close"]);
+const cropper = ref();
+const imageRef = ref();
+const dragMode = ref("none");
 function loadCropper() {
-  if (cropper.value) cropper.value?.destroy()
+  if (cropper.value) cropper.value?.destroy();
   if (imageRef.value) {
-    cropper.value = new Cropper(<HTMLImageElement>imageRef.value,{
+    cropper.value = new Cropper(imageRef.value, {
       aspectRatio: props.aspectRatio,
-      autoCrop:false,
-      autoCropArea:1,
-    })
+      autoCrop: false,
+      autoCropArea: 1
+    });
   }
 }
-
-const setDragMode = (mode: "none"|"crop"|"move") => {
-  cropper.value?.setDragMode(mode)
-}
-
-const rotateLeft90 = () => cropper.value?.rotate(-90)
-const rotateLeft = () => cropper.value?.rotate(-5)
-const rotateRight = () => cropper.value?.rotate(5)
-const rotateRight90 = () => cropper.value?.rotate(90)
-const flipHorizontal = () => cropper.value?.scaleX(cropper.value.getData().scaleX * -1)
-const flipVertical = () => cropper.value?.scaleY(cropper.value.getData().scaleY * -1)
-const zoomIn = () => cropper.value?.zoom(0.1)
-const zoomOut = () => cropper.value?.zoom(-0.1)
-const moveUp = () => cropper.value?.move(0, -10)
-const moveDown = () => cropper.value?.move(0, 10)
-const moveLeft = () => cropper.value?.move(-10, 0)
-const moveRight = () => cropper.value?.move(10, 0)
+const setDragMode = (mode) => {
+  cropper.value?.setDragMode(mode);
+};
+const rotateLeft90 = () => cropper.value?.rotate(-90);
+const rotateLeft = () => cropper.value?.rotate(-5);
+const rotateRight = () => cropper.value?.rotate(5);
+const rotateRight90 = () => cropper.value?.rotate(90);
+const flipHorizontal = () => cropper.value?.scaleX(cropper.value.getData().scaleX * -1);
+const flipVertical = () => cropper.value?.scaleY(cropper.value.getData().scaleY * -1);
+const zoomIn = () => cropper.value?.zoom(0.1);
+const zoomOut = () => cropper.value?.zoom(-0.1);
+const moveUp = () => cropper.value?.move(0, -10);
+const moveDown = () => cropper.value?.move(0, 10);
+const moveLeft = () => cropper.value?.move(-10, 0);
+const moveRight = () => cropper.value?.move(10, 0);
 const accept = () => {
-  const croppedCanvas = cropper.value?.getCroppedCanvas()
-  imageData.value = croppedCanvas?.toDataURL(props.imageFormat,1)
-}
+  const croppedCanvas = cropper.value?.getCroppedCanvas();
+  imageData.value = croppedCanvas?.toDataURL(props.imageFormat, 1);
+};
 const close = () => {
-  emit('close');
-}
+  emit("close");
+};
 const reset = () => {
-  cropper.value?.reset()
-  cropper.value?.clear()
-}
-
+  cropper.value?.reset();
+  cropper.value?.clear();
+};
 const computedMaxWidth = computed(() => {
-  if (typeof props.maxWidth === 'number') {
-    return `${props.maxWidth}px`
+  if (typeof props.maxWidth === "number") {
+    return `${props.maxWidth}px`;
   } else if (!isNaN(Number(props.maxWidth))) {
-    return `${props.maxWidth}px`
+    return `${props.maxWidth}px`;
   }
-  return props.maxWidth
-})
-
+  return props.maxWidth;
+});
 const computedMaxHeight = computed(() => {
-  if (typeof props.maxHeight === 'number') {
-    return `${props.maxHeight}px`
+  if (typeof props.maxHeight === "number") {
+    return `${props.maxHeight}px`;
   } else if (!isNaN(Number(props.maxHeight))) {
-    return `${props.maxHeight}px`
+    return `${props.maxHeight}px`;
   }
-  return props.maxHeight
-})
+  return props.maxHeight;
+});
 </script>
+
 <template>
-  <div :style="{maxWidth:computedMaxWidth,maxHeight:computedMaxHeight}">
+  <div :style="{ maxWidth: computedMaxWidth, maxHeight: computedMaxHeight }">
     <v-card>
       <v-toolbar color="primary" dark>
         <v-btn-toggle v-model="dragMode" class="ml-1">
@@ -119,6 +106,7 @@ const computedMaxHeight = computed(() => {
     </v-card>
   </div>
 </template>
+
 <style>
 .cropper-bg{background-repeat:repeat!important}
-</style>
+</style>

package/dist/runtime/components/form/images/Edit.vue.d.ts

@@ -0,0 +1,29 @@
+import 'cropperjs/dist/cropper.css';
+import type { ImageFormat } from "exif-rotate-js";
+interface Props {
+    imageFormat?: ImageFormat;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    aspectRatio?: number;
+}
+/**
+ * Public props accepted by FormImagesEdit.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+type __VLS_Props = Props;
+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, {
+    close: (...args: any[]) => void;
+    "update:modelValue": (value: string | undefined) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    maxWidth: string | number;
+    imageFormat: ImageFormat;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/images/Field.d.vue.ts

@@ -0,0 +1,27 @@
+import { type Base64Image } from '../../../composables/assetFile.js';
+interface Props {
+    modelValue?: Base64Image[];
+    readonly?: boolean;
+    label?: string;
+    accept?: string;
+    autoHydrate?: boolean;
+    maxFileSize?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    errorMessages: import("vue").ComputedRef<(string & string[]) | (readonly string[] & string[]) | undefined>;
+    isValid: import("vue").ComputedRef<boolean | null | undefined>;
+    reset: () => Promise<void> | undefined;
+    resetValidation: () => Promise<void> | undefined;
+    validate: () => Promise<string[]> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: Base64Image[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Base64Image[]) => any) | undefined;
+}>, {
+    modelValue: Base64Image[];
+    accept: string;
+    autoHydrate: boolean;
+    maxFileSize: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;