@ramathibodi/nuxt-commons 0.1.13 → 0.1.14

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.13"
+  "version": "0.1.14"
 }

package/dist/runtime/components/ExportCSV.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { ref, withDefaults } from 'vue'
+import {ref, withDefaults} from 'vue'
 import * as XLSX from 'xlsx'
-import { VBtn } from 'vuetify/components/VBtn'
-import { useAlert } from '../composables/alert'
+import {VBtn} from 'vuetify/components/VBtn'
+import {useAlert} from '../composables/alert'
 
 interface ExportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
   fileName?: string
@@ -48,7 +48,7 @@ function exportFile() {
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
       />
     </template>
   </VBtn>

package/dist/runtime/components/FileBtn.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { VBtn } from 'vuetify/components/VBtn'
+import {ref, watch} from 'vue'
+import {VBtn} from 'vuetify/components/VBtn'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
   accept?: string
@@ -48,7 +48,7 @@ defineExpose({ reset })
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
       />
     </template>
   </v-btn>

package/dist/runtime/components/ImportCSV.vue

@@ -57,7 +57,7 @@ function uploadedFile(files: File[] | File | undefined) {
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
       />
     </template>
   </FileBtn>

package/dist/runtime/components/form/Birthdate.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Datepicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
-import {nextTick, ref, watch, watchEffect} from 'vue'
+import {nextTick, ref, watch, watchEffect,computed} from 'vue'
 import {type dateFormat, Datetime} from '../../utils/datetime'
 
 interface IDobPrecision {
@@ -101,6 +101,12 @@ function updateDate(dateString: string | null) {
     selectedDate.value = null
   }
   else {
+    if (dobPrecisionSelected.value=="yearMonth") {
+      dateTime.luxonDateTime = dateTime.luxonDateTime.startOf('month')
+    }
+    if (dobPrecisionSelected.value=="year") {
+      dateTime.luxonDateTime = dateTime.luxonDateTime.startOf('year')
+    }
     selectedDate.value = dateTime.toFormat('yyyy-MM-dd', 'EN')
     displayedDate.value = selectedDate.value
   }
@@ -111,8 +117,16 @@ function updateDate(dateString: string | null) {
 function formatDate(dateString: string | null) {
   if (!dateString) return null
 
+  let displayFormat = props.format
+  if (dobPrecisionSelected.value=="yearMonth") {
+    displayFormat = "MMM yyyy"
+  }
+  if (dobPrecisionSelected.value=="year") {
+    displayFormat = "yyyy"
+  }
+
   const dateTime = Datetime().fromString(dateString, undefined, props.locale)
-  return dateTime.toFormat(props.format, props.locale)
+  return dateTime.toFormat(displayFormat, props.locale)
 }
 
 function handleTextFieldClear() {
@@ -126,8 +140,7 @@ function resetDatePicker() {
 
 watchEffect(() => {
   if (!isTextFieldFocused.value && selectedDate.value) {
-    const dateTime = Datetime().fromString(selectedDate.value, undefined, props.locale)
-    displayedDate.value = dateTime.toFormat(props.format, props.locale)
+    displayedDate.value = formatDate(selectedDate.value)
   }
   else {
     displayedDate.value = selectedDate.value
@@ -142,6 +155,10 @@ watch(() => props.modelValue, () => {
   updateDate(props.modelValue || null)
 }, { immediate: true })
 
+watch(dobPrecisionSelected,()=>{
+  updateDate(selectedDate.value)
+})
+
 function toggleMenuOpen(trigger: string) {
   if ((trigger === 'textField' && props.pickerOnly) || (trigger === 'icon' && !props.pickerOnly)) {
     isMenuOpen.value = true

package/dist/runtime/components/form/Table.vue

@@ -205,7 +205,7 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
       >
         <slot
           :name="name"
-          v-bind="(slotData as object)"
+          v-bind="((slotData || {}) as object)"
           :operation="operation"
         />
       </template>

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

@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import {computed, onBeforeUnmount, onMounted, ref, watchEffect} from "vue"
+import {useDevicesList, useUserMedia} from "@vueuse/core"
+import {getBase64Strings, type ImageFormat} from 'exif-rotate-js'
+import {useAlert} from '../../../composables/alert'
+
+interface Props {
+  imageFormat?: ImageFormat
+  autoStart?: boolean
+  fileOnly?: boolean
+  required?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  requiredMessage?: string
+  buttonText?: string
+  maxHeight?: string | number
+  maxWidth?: string | number
+  aspectRatio?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  imageFormat: "image/jpeg",
+  autoStart: true,
+  fileOnly: false,
+  required: false,
+  readonly: false,
+  disabled: false,
+  requiredMessage: "This field is required",
+  buttonText: "Add Photo",
+  maxWidth: 1024
+})
+
+const alert = useAlert()
+
+const imageData = defineModel<string>()
+
+const isLoading = ref<boolean>(false)
+const isCaptured = computed(()=>!!imageData.value)
+const isEditing = ref<boolean>(false)
+const showRequiredMessage = ref<boolean>(false)
+
+const videoScreen = ref<HTMLVideoElement>()
+
+const currentCameraId = ref<ConstrainDOMString | undefined>()
+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 })
+
+const { stream, start: cameraStart, stop: cameraStop, enabled: cameraEnabled } = useUserMedia({
+  constraints: { video: { deviceId: currentCameraId.value, width: {min: 1280}, aspectRatio: props.aspectRatio}},
+})
+
+watchEffect(() => {
+  if (videoScreen.value) videoScreen.value.srcObject = (stream.value) ? stream.value! : null
+})
+
+function startCamera() {
+  imageData.value = undefined
+  if (!cameraEnabled.value && hasCamera) {
+    isLoading.value = true
+    cameraStart().finally(()=>{
+      isLoading.value = false
+    })
+  }
+}
+
+function stopCamera() {
+  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')
+    if (context) {
+      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) {
+  if (!selectedFile) {
+    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)
+}
+
+onMounted(() => {
+  if (!isCaptured.value && props.autoStart && !props.fileOnly) startCamera()
+})
+
+onBeforeUnmount(() => {
+  stopCamera()
+})
+
+function validate() {
+  if (!props.required || isCaptured.value) {
+    showRequiredMessage.value = false
+    return true
+  } else {
+    showRequiredMessage.value = true
+    return false
+  }
+}
+
+function reset() {
+  imageData.value = undefined
+  stopCamera()
+  if (props.autoStart && !props.fileOnly) startCamera()
+}
+
+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
+})
+
+const computedMaxSize = computed(() => {
+  let tmpMaxHeight : number = 1024
+  let tmpMaxWidth : number = 1024
+
+  if (typeof props.maxWidth === 'number') {
+    tmpMaxWidth = <number>props.maxWidth
+  } else if (!isNaN(Number(props.maxWidth))) {
+    tmpMaxWidth = Number(props.maxWidth)
+  }
+
+  if (typeof props.maxHeight === 'number') {
+    tmpMaxHeight = <number>props.maxHeight
+  } else if (!isNaN(Number(props.maxHeight))) {
+    tmpMaxHeight = Number(props.maxHeight)
+  }
+
+  return (tmpMaxWidth>tmpMaxHeight) ? tmpMaxWidth : tmpMaxHeight
+})
+
+const operation = ref({startCamera,stopCamera,reset,captureImage,captureImageFile,isLoading,isCaptured,hasCamera})
+</script>
+
+<template>
+  <v-card>
+    <v-card-text class="d-flex justify-center text-center" v-if="!isLoading && !isCaptured">
+      <template v-if="!hasCamera || fileOnly">
+        <FileBtn
+            color="primary"
+            variant="flat"
+            accept="image/*"
+            @update:model-value="captureImageFile"
+            :disabled="disabled || readonly"
+        >
+          <v-icon>mdi mdi-image-plus</v-icon>
+          {{ buttonText }}
+        </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: absolute; bottom: 10px; right: 10px; z-index: 2000;">
+            <FileBtn
+                accept="image/*"
+                icon="mdi mdi-image-plus"
+                icon-only
+                @update:model-value="captureImageFile"
+                :disabled="disabled || readonly"
+            />
+          </div>
+        </div>
+      </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">
+        <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"
+              :disabled="disabled || readonly"
+          />
+        </div>
+      </div>
+      <form-images-edit v-model="imageData" :aspect-ratio="aspectRatio" :image-format="imageFormat" @update:model-value="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>
+    </v-card-text>
+    <v-card-text v-if="showRequiredMessage" class="text-center">
+      <span class="red--text">{{ requiredMessage }}</span>
+    </v-card-text>
+    <v-card-actions v-if="!readonly && (!fileOnly || isCaptured) && !isEditing">
+      <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="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>
+      </slot>
+    </v-card-actions>
+  </v-card>
+</template>

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

@@ -1,143 +1,117 @@
-<script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+<script lang="ts" setup>
+import {ref,computed} from 'vue'
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
+import type {ImageFormat} from "exif-rotate-js"
 
 interface Props {
-  modelValue?: string
-  readonly?: boolean
-  flat?: boolean
+  imageFormat?: ImageFormat
+  maxHeight?: string | number
+  maxWidth?: string | number
+  aspectRatio?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  readonly: false,
-  flat: false,
+  imageFormat: "image/jpeg",
+  maxWidth: 1024
 })
 
-const emit = defineEmits(['update:modelValue', 'closeDialog', 'openCamera'])
+const imageData = defineModel<string>()
 
-const cropper = ref<Cropper | null>(null)
-const imageCanvas = ref<HTMLCanvasElement | null>(null)
+const cropper = ref<Cropper>()
+const imageRef = ref<HTMLImageElement>()
+const dragMode = ref<string>("crop")
 
-const loadImageToCanvas = () => {
-  if (imageCanvas.value && props.modelValue) {
-    const canvas = imageCanvas.value as HTMLCanvasElement
-    const context = canvas.getContext('2d')
-    const image = new Image()
-    image.src = props.modelValue
-    image.onload = () => {
-      canvas.width = image.width
-      canvas.height = image.height
-      context?.clearRect(0, 0, canvas.width, canvas.height)
-      context?.drawImage(image, 0, 0)
-      if (!props.readonly) {
-        cropper.value?.destroy()
-        cropper.value = new Cropper(canvas, {
-          aspectRatio: 1,
-          rotatable: true,
-        })
-      }
-    }
+function loadCropper() {
+  if (cropper.value) cropper.value?.destroy()
+  if (imageRef.value) {
+    cropper.value = new Cropper(<HTMLImageElement>imageRef.value,{
+      aspectRatio: props.aspectRatio
+    })
   }
 }
 
-onMounted(() => {
-  loadImageToCanvas()
-})
+const dragMove = () => {
+  cropper.value?.setDragMode('move')
+}
+const dragCrop = () => {
+  cropper.value?.setDragMode('crop')
+}
+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()
+  console.log(props.imageFormat)
+  imageData.value = croppedCanvas?.toDataURL(props.imageFormat,1)
+}
+const reset = () => cropper.value?.reset()
 
-watch(() => props.modelValue, (newValue, oldValue) => {
-  if (newValue !== oldValue) {
-    loadImageToCanvas()
+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 handleCrop = () => {
-  const croppedCanvas = cropper.value?.getCroppedCanvas()
-  if (croppedCanvas) {
-    const dataURL = croppedCanvas.toDataURL()
-    emit('update:modelValue', dataURL)
-    emit('closeDialog', false)
+const computedMaxHeight = computed(() => {
+  if (typeof props.maxHeight === 'number') {
+    return `${props.maxHeight}px`
+  } else if (!isNaN(Number(props.maxHeight))) {
+    return `${props.maxHeight}px`
   }
-}
-
-const resetCrop = () => {
-  emit('closeDialog', false)
-  emit('openCamera', true)
-}
-
-const close = () => {
-  emit('closeDialog', false)
-}
+  return props.maxHeight
+})
 </script>
-
 <template>
-  <v-card :flat="flat">
-    <v-card-title>
-      <v-row
-        align="center"
-        justify="end"
-      >
-        <slot
-          name="closeButton"
-          :close="close"
-        >
-          <v-btn
-            icon="mdi mdi-close"
-            variant="text"
-            @click="close"
-          />
-        </slot>
-      </v-row>
-    </v-card-title>
-    <v-card-text>
-      <v-row
-        v-if="props.readonly"
-        justify="center"
-      >
-        <v-img
-          :src="props.modelValue as string"
-          height="70vh"
-        />
-      </v-row>
-      <v-row
-        v-else
-        justify="center"
-      >
-        <v-col cols="12">
-          <canvas
-            ref="imageCanvas"
-            class="canvas-photo"
-            style="max-height: 70vh; max-width: 40vh"
-          />
-          <v-row
-            justify="center"
-            class="mt-2"
-          >
-            <slot
-              name="actionButtons"
-              :reset-crop="resetCrop"
-              :handle-crop="handleCrop"
-            >
-              <v-btn
-                class="ma-1"
-                prepend-icon="mdi mdi-camera"
-                color="primary"
-                @click="resetCrop"
-              >
-                Retake
-              </v-btn>
-              <v-btn
-                class="ma-1"
-                prepend-icon="fa-solid fa-check"
-                color="success"
-                @click="handleCrop"
-              >
-                Done
-              </v-btn>
-            </slot>
-          </v-row>
-        </v-col>
-      </v-row>
-    </v-card-text>
-  </v-card>
+  <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="dragMove"></v-btn>
+          <v-btn value="crop" icon="mdi mdi-crop" @click="dragCrop"></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-check" @click="accept"></v-btn>
+        <v-btn icon="mdi mdi-refresh" @click="reset"></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>

package/dist/runtime/components/label/Field.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 interface Props {
   label: string
-  value?: string | string | null | undefined
+  value?: string  | null | undefined
+  horizontal?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -10,18 +11,30 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <v-card variant="flat">
-    <VCardSubtitle class="ma-0 pa-0">
+  <div v-if="horizontal" class="d-flex align-end" :="$attrs">
+    <div class="text-medium-emphasis">
       <slot name="label">
-        {{ label }}
+        {{ label }}:
       </slot>
-    </VCardSubtitle>
-    <VCardText class="text-h6 pa-0 mb-2">
+    </div>
+    <div class="ml-1">
       <slot name="value">
         {{ value }}
       </slot>
-    </VCardText>
-  </v-card>
+    </div>
+  </div>
+  <v-card v-else variant="flat" :="$attrs">
+  <VCardSubtitle class="ma-0 pa-0 text-black">
+    <slot name="label">
+      {{ label }}
+    </slot>
+  </VCardSubtitle>
+  <VCardText class="text-h6 pa-0 mb-2">
+    <slot name="value">
+      {{ value }}
+    </slot>
+  </VCardText>
+</v-card>
 </template>
 
 <style lang="">

package/dist/runtime/components/master/Autocomplete.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { VAutocomplete } from 'vuetify/components/VAutocomplete'
-import { concat, isEmpty } from 'lodash-es'
-import { computed, ref, watch } from 'vue'
-import { watchDebounced } from '@vueuse/core'
-import { useFuzzy } from '../../composables/utils/fuzzy'
-import { useGraphQl } from '../../composables/graphql'
+import {VAutocomplete} from 'vuetify/components/VAutocomplete'
+import {concat, isEmpty} from 'lodash-es'
+import {computed, ref, watch} from 'vue'
+import {watchDebounced} from '@vueuse/core'
+import {useFuzzy} from '../../composables/utils/fuzzy'
+import {useGraphQl} from '../../composables/graphql'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
   fuzzy?: boolean
@@ -134,7 +134,7 @@ const computedNoDataText = computed(() => {
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
         :operation="operation"
       />
     </template>

package/dist/runtime/components/master/Combobox.vue

@@ -65,7 +65,7 @@ query()
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
         :operation="operation"
       />
     </template>

package/dist/runtime/components/master/RadioGroup.vue

@@ -63,7 +63,7 @@ const itemTitleField = computed(() => {
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
         :operation="operation"
       />
     </template>

package/dist/runtime/components/master/Select.vue

@@ -63,7 +63,7 @@ query()
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
         :operation="operation"
       />
     </template>

package/dist/runtime/components/model/Table.vue

@@ -155,7 +155,7 @@ defineExpose({ reload })
       >
         <slot
           :name="name"
-          v-bind="(slotData as object)"
+          v-bind="((slotData || {}) as object)"
           :operation="operation"
         />
       </template>
@@ -196,7 +196,7 @@ defineExpose({ reload })
       >
         <slot
           :name="name"
-          v-bind="(slotData as object)"
+          v-bind="((slotData || {}) as object)"
           :operation="operation"
         />
       </template>

package/dist/runtime/components/model/iterator.vue

@@ -77,7 +77,7 @@ type SortItem = { key: string, order?: boolean | 'asc' | 'desc' }
 const sortBy = ref<SortItem[]>()
 
 const pageCount = computed(() => {
-  if (itemsPerPageInternal.value == 'All' || itemsPerPageInternal.value == '-1' || itemsPerPageInternal.value <= 0 || !itemsPerPageInternal.value) return 1
+  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || itemsPerPageInternal.value == '-1' || Number(itemsPerPageInternal.value) <= 0) return 1
   else return Math.ceil(itemsLength.value / Number(itemsPerPageInternal.value))
 })
 const currentPage = ref<number>(1)
@@ -86,7 +86,7 @@ watch([currentPage, itemsPerPageInternal, sortBy], () => {
   if (canServerPageable.value) {
     loadItems({
       page: currentPage.value,
-      itemsPerPage: (itemsPerPageInternal.value == 'All' || itemsPerPageInternal.value <= 0) ? '-1' : itemsPerPageInternal.value,
+      itemsPerPage: (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) ? '-1' : itemsPerPageInternal.value,
       sortBy: sortBy.value,
     })
   }
@@ -99,7 +99,7 @@ const computedInitialData = computed(() => {
 })
 
 const computedSkeletonPerPage = computed(() => {
-  if (itemsPerPageInternal.value == 'All' || itemsPerPageInternal.value <= 0) return 1
+  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) return 1
   else return Number(itemsPerPageInternal.value)
 })
 

package/dist/runtime/composables/graphqlModel.d.ts

@@ -3,7 +3,10 @@ import { type GraphqlModelConfigProps } from './graphqlModelOperation';
 export interface HeaderProps {
     headers?: any[];
 }
-export type GraphqlModelProps = GraphqlModelConfigProps & Partial<HeaderProps>;
+export interface InitialDataProps {
+    initialData?: Record<string, any>;
+}
+export type GraphqlModelProps = GraphqlModelConfigProps & Partial<HeaderProps> & Partial<InitialDataProps>;
 export declare function useGraphqlModel<T extends GraphqlModelProps>(props: T): {
     items: import("vue").Ref<Record<string, any>[]>;
     itemsLength: import("vue").Ref<number>;

package/dist/runtime/composables/graphqlModel.mjs

@@ -63,7 +63,7 @@ export function useGraphqlModel(props) {
   function createItem(item, callback, importing = false) {
     isLoading.value = true;
     return operationCreate.value?.call(fields.value, { input: item }).then((result) => {
-      if (canServerPageable) {
+      if (canServerPageable.value) {
         if (!importing)
           loadItems(currentOptions.value);
       } else
@@ -81,7 +81,7 @@ export function useGraphqlModel(props) {
     isLoading.value = true;
     const importPromise = [];
     importItems2.forEach((item) => {
-      const eachPromise = createItem(item, void 0, true);
+      const eachPromise = createItem(Object.assign({}, props.initialData, item), void 0, true);
       if (eachPromise)
         importPromise.push(eachPromise);
     });
@@ -95,7 +95,7 @@ export function useGraphqlModel(props) {
   function updateItem(item, callback) {
     isLoading.value = true;
     return operationUpdate.value?.call(fields.value, { input: item }).then((result) => {
-      if (canServerPageable)
+      if (canServerPageable.value)
         loadItems(currentOptions.value);
       else {
         const index = items.value.findIndex((item2) => item2[props.modelKey || "id"] === result[props.modelKey || "id"]);
@@ -124,7 +124,7 @@ export function useGraphqlModel(props) {
   }
   function loadItems(options) {
     currentOptions.value = options;
-    if (canServerPageable) {
+    if (canServerPageable.value) {
       const pageableVariable = {
         page: options.page,
         perPage: options.itemsPerPage,

package/dist/runtime/composables/graphqlModelOperation.mjs

@@ -7,6 +7,9 @@ export function useGraphqlModelOperation(props) {
   function lowercaseFirstLetter(string) {
     return string?.charAt(0).toLowerCase() + string?.slice(1);
   }
+  const computedModelName = computed(() => {
+    return props.modelName.split("By")[0].trim();
+  });
   const operationCreate = computed(() => {
     if (props.operationCreate) {
       if (typeof props.operationCreate === "string") {
@@ -16,7 +19,7 @@ export function useGraphqlModelOperation(props) {
         return props.operationCreate;
       }
     }
-    return graphqlOperation["create" + capitalizeFirstLetter(props.modelName)];
+    return graphqlOperation["create" + capitalizeFirstLetter(computedModelName.value)];
   });
   const operationUpdate = computed(() => {
     if (props.operationUpdate) {
@@ -27,7 +30,7 @@ export function useGraphqlModelOperation(props) {
         return props.operationUpdate;
       }
     }
-    return graphqlOperation["update" + capitalizeFirstLetter(props.modelName)];
+    return graphqlOperation["update" + capitalizeFirstLetter(computedModelName.value)];
   });
   const operationDelete = computed(() => {
     if (props.operationDelete) {
@@ -38,7 +41,7 @@ export function useGraphqlModelOperation(props) {
         return props.operationDelete;
       }
     }
-    return graphqlOperation["delete" + capitalizeFirstLetter(props.modelName)];
+    return graphqlOperation["delete" + capitalizeFirstLetter(computedModelName.value)];
   });
   const operationRead = computed(() => {
     if (props.operationRead) {
@@ -71,7 +74,7 @@ export function useGraphqlModelOperation(props) {
         return props.operationSearch;
       }
     }
-    return graphqlOperation["search" + capitalizeFirstLetter(props.modelName)];
+    return graphqlOperation["search" + capitalizeFirstLetter(computedModelName.value)];
   });
   return { operationCreate, operationUpdate, operationDelete, operationRead, operationReadPageable, operationSearch };
 }

package/dist/runtime/labs/form/TextFieldMask.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { VTextField } from 'vuetify/components/VTextField'
-import { type MaskaDetail, type MaskOptions, vMaska } from 'maska'
+import {computed} from 'vue'
+import {VTextField} from 'vuetify/components/VTextField'
+import {type MaskaDetail, type MaskOptions, vMaska} from 'maska'
 
 export interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   type: 'eReceipt' | 'telephone'
@@ -36,7 +36,7 @@ function onMaska(event: CustomEvent<MaskaDetail>) {
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
       />
     </template>
   </v-text-field>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -66,8 +66,8 @@
     "@fullcalendar/multimonth": "^6.1.11",
     "@fullcalendar/timegrid": "^6.1.11",
     "@fullcalendar/vue3": "^6.1.11",
-    "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/add": "^5.0.2",
+    "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/plugin-helpers": "^5.0.4",
     "@graphql-codegen/typescript": "^4.0.6",
     "@mdi/font": "^7.4.47",
@@ -79,20 +79,21 @@
     "@zxing/browser": "^0.1.4",
     "cropperjs": "^1.6.2",
     "currency.js": "^2.0.4",
+    "exif-rotate-js": "^1.5.0",
     "fuse.js": "^7.0.0",
-    "graphql": "^16.9.0",
     "gql-query-builder": "^3.8.0",
+    "graphql": "^16.9.0",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "maska": "^2.1.11",
     "pdf-vue3": "^1.0.12",
+    "prettier": "3.3.2",
     "print-js": "^1.6.0",
     "uid": "^2.0.2",
     "vue": "^3.4.25",
     "vue-codemirror": "^6.1.1",
     "vue-signature-pad": "^3.0.2",
     "vuetify": "^3.6.8",
-    "prettier": "3.3.2",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz"
   },
   "devDependencies": {

package/dist/runtime/components/Camera.vue

@@ -1,129 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, watchEffect } from 'vue'
-import { useDevicesList, useUserMedia } from '@vueuse/core'
-import { useAlert } from '../composables/alert'
-
-interface Props {
-  modelValue?: string
-}
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue', 'closeDialog'])
-
-const alert = useAlert()
-const videoRef = ref<HTMLVideoElement>()
-const capturedPhoto = ref<string | null>(null)
-const currentCameraId = ref<ConstrainDOMString | undefined>()
-
-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 { stream, enabled } = useUserMedia({
-  constraints: { video: { deviceId: currentCameraId.value } },
-})
-
-watchEffect(() => {
-  if (videoRef.value) (videoRef.value as HTMLVideoElement).srcObject = stream.value!
-})
-
-const captureImage = () => {
-  if (videoRef.value) {
-    const canvas = document.createElement('canvas')
-    canvas.width = (videoRef.value as HTMLVideoElement).videoWidth
-    canvas.height = (videoRef.value as HTMLVideoElement).videoHeight
-    const context = canvas.getContext('2d')
-    if (context) {
-      context.drawImage(videoRef.value as HTMLVideoElement, 0, 0, canvas.width, canvas.height)
-      capturedPhoto.value = canvas.toDataURL('image/jpeg')
-
-      enabled.value = false
-      emit('update:modelValue', capturedPhoto.value)
-    }
-  }
-}
-
-function loadImageFile(selectedFile: File | File[] | undefined) {
-  if (!selectedFile) {
-    alert?.addAlert({ message: 'No file selected.', alertType: 'error' })
-    return
-  }
-
-  const reader = new FileReader()
-  reader.onload = (event) => {
-    capturedPhoto.value = event.target?.result as string
-
-    enabled.value = false
-    emit('update:modelValue', capturedPhoto.value)
-  }
-  const scanImageSingleFile: File = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
-  reader.readAsDataURL(scanImageSingleFile)
-}
-
-const openCamera = () => {
-  enabled.value = true
-}
-
-const closeDialog = () => {
-  enabled.value = false
-  emit('closeDialog')
-}
-
-defineExpose({
-  openCamera,
-})
-
-onMounted(() => {
-  enabled.value = true
-})
-</script>
-
-<template>
-  <v-card>
-    <v-card-title class="d-flex justify-end">
-      <v-btn
-        icon="fa:fa-solid fa-xmark"
-        variant="text"
-        @click="closeDialog"
-      />
-    </v-card-title>
-    <v-card-text class="d-flex justify-center">
-      <video
-        ref="videoRef"
-        autoplay
-        style="max-width: 1024px"
-      />
-      <div style="z-index: 2000; position: relative; bottom: -410px; left: -80px; height: 50px">
-        <FileBtn
-          accept="image/*"
-          icon="mdi mdi-image-plus"
-          icon-only
-          @update:model-value="loadImageFile"
-        />
-      </div>
-    </v-card-text>
-    <v-card-actions class="d-flex justify-center">
-      <v-btn
-        icon
-        size="x-large"
-        variant="tonal"
-        @click="captureImage()"
-      >
-        <v-icon
-          icon="fa:fa-solid fa-circle"
-          size="x-large"
-        />
-        <v-tooltip
-          activator="parent"
-          location="top"
-        >
-          ถ่ายภาพ
-        </v-tooltip>
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>

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

@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { isUndefined } from 'lodash'
-
-interface Props {
-  modelValue?: string
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue', 'closeDialog', 'openCamera'])
-
-const selectedImage = ref<string>()
-const isDialogOpen = ref<boolean>(false)
-const cameraRef = ref()
-
-const handleAddImage = (image: string) => {
-  selectedImage.value = image
-  isDialogOpen.value = true
-}
-
-const handleCloseDialog = () => {
-  isDialogOpen.value = false
-  emit('openCamera', true)
-  emit('closeDialog', false)
-}
-
-const handleCameraClose = (shouldClose: boolean, editStatus: string) => {
-  if (isUndefined(editStatus)) {
-    emit('closeDialog', shouldClose)
-  }
-}
-
-const handleImageEdit = (imageData: any) => {
-  emit('update:modelValue', imageData)
-}
-
-const handleOpenCamera = () => {
-  emit('openCamera', true)
-  isDialogOpen.value = false
-  cameraRef.value.openCamera()
-}
-</script>
-
-<template>
-  <Camera
-    ref="cameraRef"
-    @update:model-value="handleAddImage"
-    @close-dialog="handleCameraClose"
-  />
-  <v-dialog v-model="isDialogOpen">
-    <FormImagesEdit
-      v-model="selectedImage"
-      @update:model-value="handleImageEdit"
-      @close-dialog="handleCloseDialog"
-      @open-camera="handleOpenCamera"
-    />
-  </v-dialog>
-</template>

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

@@ -1,48 +0,0 @@
-<script lang="ts" setup>
-interface Props {
-  modelValue?: any
-  readonly?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  readonly: false,
-})
-
-const emit = defineEmits([
-  'update:modelValue',
-  'closeDialogPreview',
-  'toPaint',
-])
-
-const editImage = () => {
-  emit('toPaint')
-}
-</script>
-
-<template>
-  <v-card>
-    <v-toolbar>
-      <v-toolbar-title>Preview</v-toolbar-title>
-      <v-spacer />
-      <v-btn
-        v-if="!props.readonly"
-        icon="fa:fa-solid fa-pen"
-        variant="text"
-        @click="editImage"
-      />
-      <v-btn
-        icon="fa:fa-solid fa-xmark"
-        variant="text"
-        @click="$emit('closeDialogPreview', false)"
-      />
-    </v-toolbar>
-    <v-card-text>
-      <v-row>
-        <v-img
-          :src="modelValue.data"
-          height="70dvh"
-        />
-      </v-row>
-    </v-card-text>
-  </v-card>
-</template>