@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,124 +1,136 @@
-<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")
-
-function loadCropper() {
-  if (cropper.value) cropper.value?.destroy()
-  if (imageRef.value) {
-    cropper.value = new Cropper(<HTMLImageElement>imageRef.value,{
-      aspectRatio: props.aspectRatio,
-      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 accept = () => {
-  const croppedCanvas = cropper.value?.getCroppedCanvas()
-  imageData.value = croppedCanvas?.toDataURL(props.imageFormat,1)
-}
-const close = () => {
-  emit('close');
-}
-const reset = () => {
-  cropper.value?.reset()
-  cropper.value?.clear()
-}
-
-const computedMaxWidth = computed(() => {
-  if (typeof props.maxWidth === 'number') {
-    return `${props.maxWidth}px`
-  } else if (!isNaN(Number(props.maxWidth))) {
-    return `${props.maxWidth}px`
-  }
-  return props.maxWidth
-})
-
-const computedMaxHeight = computed(() => {
-  if (typeof props.maxHeight === 'number') {
-    return `${props.maxHeight}px`
-  } else if (!isNaN(Number(props.maxHeight))) {
-    return `${props.maxHeight}px`
-  }
-  return props.maxHeight
-})
-</script>
-<template>
-  <div :style="{maxWidth:computedMaxWidth,maxHeight:computedMaxHeight}">
-    <v-card>
-      <v-toolbar color="primary" dark>
-        <v-btn-toggle v-model="dragMode" class="ml-1">
-          <v-btn value="move" icon="mdi mdi-cursor-move" @click="setDragMode('move')"></v-btn>
-          <v-btn value="crop" icon="mdi mdi-crop" @click="setDragMode('crop')"></v-btn>
-        </v-btn-toggle>
-        <v-btn-group class="ml-1">
-          <v-btn value="rotateLeft" icon="mdi mdi-rotate-left-variant" @click="rotateLeft90"></v-btn>
-          <v-btn value="rotateRight" icon="mdi mdi-rotate-left" @click="rotateLeft"></v-btn>
-          <v-btn value="rotateRight" icon="mdi mdi-rotate-right" @click="rotateRight"></v-btn>
-          <v-btn value="rotateRight" icon="mdi mdi-rotate-right-variant" @click="rotateRight90"></v-btn>
-        </v-btn-group>
-        <v-btn-group class="ml-1">
-          <v-btn value="flipHorizontal" icon="mdi mdi-flip-horizontal" @click="flipHorizontal"></v-btn>
-          <v-btn value="flipVertical" icon="mdi mdi-flip-vertical" @click="flipVertical"></v-btn>
-        </v-btn-group>
-        <v-btn-group class="ml-1">
-          <v-btn value="flipHorizontal" icon="mdi mdi-magnify-plus-outline" @click="zoomIn"></v-btn>
-          <v-btn value="flipVertical" icon="mdi mdi-magnify-minus-outline" @click="zoomOut"></v-btn>
-        </v-btn-group>
-        <v-btn-group class="ml-1">
-          <v-btn value="moveUp" icon="mdi mdi-arrow-up" @click="moveUp"></v-btn>
-          <v-btn value="moveDown" icon="mdi mdi-arrow-down" @click="moveDown"></v-btn>
-          <v-btn value="moveLeft" icon="mdi mdi-arrow-left" @click="moveLeft"></v-btn>
-          <v-btn value="moveRight" icon="mdi mdi-arrow-right" @click="moveRight"></v-btn>
-        </v-btn-group>
-        <v-spacer></v-spacer>
-        <v-btn icon="mdi mdi-refresh" @click="reset"></v-btn>
-        <v-btn icon="mdi mdi-check" @click="accept"></v-btn>
-        <v-btn icon="mdi mdi-close" @click="close"></v-btn>
-      </v-toolbar>
-      <v-card-text class="ma-0 pa-0">
-        <img ref="imageRef" :src="imageData" alt="" @load="loadCropper" style="display: block; max-width: 100%">
-      </v-card-text>
-    </v-card>
-  </div>
-</template>
+<script lang="ts" setup>
+/**
+ * FormImagesEdit handles image capture, editing, preview, and value synchronization for schema-driven form image fields.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+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 // Output image MIME/encoding format for capture or editing.
+  maxHeight?: string | number // Maximum height constraint for previews, dialogs, or editors.
+  maxWidth?: string | number // Maximum width constraint for previews, dialogs, or editors.
+  aspectRatio?: number // Target aspect ratio used while cropping or capturing images.
+}
+
+/**
+ * Public props accepted by FormImagesEdit.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  imageFormat: "image/jpeg",
+  maxWidth: 1024
+})
+
+const imageData = defineModel<string>()
+/**
+ * Custom events emitted by FormImagesEdit.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['close'])
+
+const cropper = ref<Cropper>()
+const imageRef = ref<HTMLImageElement>()
+const dragMode = ref<string>("none")
+
+function loadCropper() {
+  if (cropper.value) cropper.value?.destroy()
+  if (imageRef.value) {
+    cropper.value = new Cropper(<HTMLImageElement>imageRef.value,{
+      aspectRatio: props.aspectRatio,
+      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 accept = () => {
+  const croppedCanvas = cropper.value?.getCroppedCanvas()
+  imageData.value = croppedCanvas?.toDataURL(props.imageFormat,1)
+}
+const close = () => {
+  emit('close');
+}
+const reset = () => {
+  cropper.value?.reset()
+  cropper.value?.clear()
+}
+
+const computedMaxWidth = computed(() => {
+  if (typeof props.maxWidth === 'number') {
+    return `${props.maxWidth}px`
+  } else if (!isNaN(Number(props.maxWidth))) {
+    return `${props.maxWidth}px`
+  }
+  return props.maxWidth
+})
+
+const computedMaxHeight = computed(() => {
+  if (typeof props.maxHeight === 'number') {
+    return `${props.maxHeight}px`
+  } else if (!isNaN(Number(props.maxHeight))) {
+    return `${props.maxHeight}px`
+  }
+  return props.maxHeight
+})
+</script>
+<template>
+  <div :style="{maxWidth:computedMaxWidth,maxHeight:computedMaxHeight}">
+    <v-card>
+      <v-toolbar color="primary" dark>
+        <v-btn-toggle v-model="dragMode" class="ml-1">
+          <v-btn value="move" icon="mdi mdi-cursor-move" @click="setDragMode('move')"></v-btn>
+          <v-btn value="crop" icon="mdi mdi-crop" @click="setDragMode('crop')"></v-btn>
+        </v-btn-toggle>
+        <v-btn-group class="ml-1">
+          <v-btn value="rotateLeft" icon="mdi mdi-rotate-left-variant" @click="rotateLeft90"></v-btn>
+          <v-btn value="rotateRight" icon="mdi mdi-rotate-left" @click="rotateLeft"></v-btn>
+          <v-btn value="rotateRight" icon="mdi mdi-rotate-right" @click="rotateRight"></v-btn>
+          <v-btn value="rotateRight" icon="mdi mdi-rotate-right-variant" @click="rotateRight90"></v-btn>
+        </v-btn-group>
+        <v-btn-group class="ml-1">
+          <v-btn value="flipHorizontal" icon="mdi mdi-flip-horizontal" @click="flipHorizontal"></v-btn>
+          <v-btn value="flipVertical" icon="mdi mdi-flip-vertical" @click="flipVertical"></v-btn>
+        </v-btn-group>
+        <v-btn-group class="ml-1">
+          <v-btn value="flipHorizontal" icon="mdi mdi-magnify-plus-outline" @click="zoomIn"></v-btn>
+          <v-btn value="flipVertical" icon="mdi mdi-magnify-minus-outline" @click="zoomOut"></v-btn>
+        </v-btn-group>
+        <v-btn-group class="ml-1">
+          <v-btn value="moveUp" icon="mdi mdi-arrow-up" @click="moveUp"></v-btn>
+          <v-btn value="moveDown" icon="mdi mdi-arrow-down" @click="moveDown"></v-btn>
+          <v-btn value="moveLeft" icon="mdi mdi-arrow-left" @click="moveLeft"></v-btn>
+          <v-btn value="moveRight" icon="mdi mdi-arrow-right" @click="moveRight"></v-btn>
+        </v-btn-group>
+        <v-spacer></v-spacer>
+        <v-btn icon="mdi mdi-refresh" @click="reset"></v-btn>
+        <v-btn icon="mdi mdi-check" @click="accept"></v-btn>
+        <v-btn icon="mdi mdi-close" @click="close"></v-btn>
+      </v-toolbar>
+      <v-card-text class="ma-0 pa-0">
+        <img ref="imageRef" :src="imageData" alt="" @load="loadCropper" style="display: block; max-width: 100%">
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
 <style>
 .cropper-bg{background-repeat:repeat!important}
 </style>