@ramathibodi/nuxt-commons 0.1.17 → 0.1.19

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.17"
+  "version": "0.1.19"
 }

package/dist/runtime/components/BarcodeReader.vue

@@ -1,45 +1,64 @@
 <script lang="ts" setup>
-import { BrowserMultiFormatReader } from '@zxing/browser'
-import { type IScannerControls } from '@zxing/browser/esm'
-import type { Exception, Result } from '@zxing/library'
-import { ref, onMounted } from 'vue'
-import { useAlert } from '../composables/alert'
+import {BrowserMultiFormatReader} from '@zxing/browser'
+import {type IScannerControls} from '@zxing/browser/esm'
+import type {Exception, Result} from '@zxing/library'
+import {computed, onBeforeUnmount, onMounted, ref, watchEffect} from 'vue'
+import {useAlert} from '../composables/alert'
+import {useDevicesList, useUserMedia} from "@vueuse/core";
 
-const videoElementRef = ref<HTMLVideoElement | null>(null)
 const barcodeReader = new BrowserMultiFormatReader()
+const barcodeReaderControl = ref()
+
 const alert = useAlert()
-const hasCameraAvailable = ref(false)
+const isLoading = ref<boolean>(false)
 
 const emit = defineEmits<{
   (event: 'decode', barcodeValue: string): void
   (event: 'error', error: string | unknown): void
 }>()
 
-async function checkCameraAvailability() {
-  const devices = await navigator.mediaDevices.enumerateDevices()
-  hasCameraAvailable.value = devices.some(device => device.kind === 'videoinput')
-}
+const videoScreen = ref<HTMLVideoElement>()
 
-async function startCamera() {
-  try {
-    const videoInputDevices = await BrowserMultiFormatReader.listVideoInputDevices()
-    if (videoInputDevices.length === 0) {
-      alert?.addAlert({ message: 'No camera devices found.', alertType: 'error' })
-      return
-    }
+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 selectedDeviceId = videoInputDevices[0].deviceId
-    barcodeReader.decodeFromVideoDevice(selectedDeviceId, videoElementRef.value, (result: Result | undefined, error: Exception | undefined, controls: IScannerControls) => {
-      if (result) {
-        emit('decode', result.getText())
-        controls.stop()
-      }
+const { stream, start: cameraStart, stop: cameraStop, enabled: cameraEnabled } = useUserMedia({
+  constraints: { video: { deviceId: currentCameraId.value}},
+})
+
+watchEffect(() => {
+  if (videoScreen.value) videoScreen.value.srcObject = (stream.value) ? stream.value! : null
+})
+
+function startCamera() {
+  if (!cameraEnabled.value) {
+    isLoading.value = true
+    cameraStart().then(()=>{
+      barcodeReader.decodeFromVideoDevice(currentCameraId.value, videoScreen.value, (result: Result | undefined, error: Exception | undefined, controls: IScannerControls) => {
+        if (result) {
+          emit('decode', result.getText())
+          cameraStop()
+        }
+      }).then((result: any)=>{
+        barcodeReaderControl.value = result
+      })
+    }).finally(()=>{
+      isLoading.value = false
     })
   }
-  catch (error) {
-    emit('error', error)
-    alert?.addAlert({ message: 'Error starting camera.', alertType: 'error' })
-  }
+}
+
+function stopCamera() {
+  if (barcodeReaderControl.value) barcodeReaderControl.value.stop()
+  if (cameraEnabled.value) cameraStop()
 }
 
 function scanImageFile(selectedFile: File | File[] | undefined) {
@@ -48,42 +67,47 @@ function scanImageFile(selectedFile: File | File[] | undefined) {
     return
   }
 
+  const scanImageSingleFile: File = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
+
   const reader = new FileReader()
   reader.onload = async (event) => {
     try {
       const result = await barcodeReader.decodeFromImageUrl(event.target?.result as string)
       emit('decode', result.getText())
     }
-    catch (error) {
-      alert?.addAlert({ message: 'Unable to read barcode from image.', alertType: 'error' })
+    catch (e) {
+      void e
     }
   }
-  const scanImageSingleFile: File = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
   reader.readAsDataURL(scanImageSingleFile)
 }
 
-onMounted(async () => {
-  await checkCameraAvailability()
-  if (hasCameraAvailable.value) await startCamera()
+onMounted( () => {
+  startCamera()
+})
+
+onBeforeUnmount(  () => {
+  stopCamera()
 })
 </script>
 
 <template>
   <v-card flat>
-    <v-card-item>
-      <v-col v-if="hasCameraAvailable">
-        <video
-          ref="videoElementRef"
-          autoplay
-          style="max-width: 1024px"
-        />
-        <div style="z-index: 2000; position: relative; bottom: 84px; left: 550px">
-          <FileBtn
-            accept="image/*"
-            icon="mdi mdi-image-plus"
-            icon-only
-            @update:model-value="scanImageFile"
-          />
+    <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-else>
+      <v-col v-if="hasCamera">
+        <div style="position: relative; display: inline-block; width: 100%;" :style="{maxWidth: '1024px'}">
+          <video autoplay ref="videoScreen" width="100%" :style="{maxWidth:'1024px'}"></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="scanImageFile"
+            />
+          </div>
         </div>
       </v-col>
       <v-col v-else>
@@ -93,6 +117,6 @@ onMounted(async () => {
           @update:model-value="scanImageFile"
         />
       </v-col>
-    </v-card-item>
+    </v-card-text>
   </v-card>
 </template>

package/dist/runtime/components/TextBarcode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { useAlert } from '../composables/alert'
+import {ref, watch} from 'vue'
+import {useAlert} from '../composables/alert'
 
 interface Props {
   modelValue?: string
@@ -9,6 +9,7 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string | undefined): void
+  (event: 'decode', value: string | undefined): void
 }>()
 const alert = useAlert()
 
@@ -18,6 +19,7 @@ const currentValue = ref<string>()
 const handleData = (data: string) => {
   currentValue.value = data
   scanCode.value = false
+  emit('decode',data)
 }
 
 const handleError = (error: string | unknown) => {

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,computed} from 'vue'
+import {computed, nextTick, onMounted, ref, watch, watchEffect} from 'vue'
 import {type dateFormat, Datetime} from '../../utils/datetime'
 
 interface IDobPrecision {
@@ -41,7 +41,12 @@ const dobPrecisionText = computed(() => {
   }
 })
 const dobPrecisionChoice = ref<('yearMonthDay' | 'yearMonth' | 'year')[]>(['yearMonthDay', 'yearMonth', 'year'])
-const dobPrecisionSelected = defineModel<'yearMonthDay' | 'yearMonth' | 'year'>('dobPrecision', { default: 'yearMonthDay' })
+const dobPrecisionSelected = defineModel<'yearMonthDay' | 'yearMonth' | 'year'>('dobPrecision')
+onMounted(()=>{
+  if (!dobPrecisionSelected.value) {
+    dobPrecisionSelected.value = 'yearMonthDay'
+  }
+})
 
 const dobPrecisionDisplay = computed(() => {
   return (dobPrecisionSelected.value) ? dobPrecisionText.value[dobPrecisionSelected.value] : dobPrecisionText.value['yearMonthDay']

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

@@ -190,14 +190,14 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
         <slot name="toolbarItems" />
         <ImportCSV
           v-if="props.importable"
-          icon="mdi mdi-file-upload"
+          icon="mdi:mdi-file-upload"
           variant="flat"
           @import="importItems"
           :color="toolbarColor"
         />
         <ExportCSV
           v-if="props.exportable && items.length"
-          icon="mdi mdi-file-download"
+          icon="mdi:mdi-file-download"
           variant="flat"
           :file-name="title"
           :model-value="items"
@@ -205,7 +205,7 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
         />
         <VBtn
           :color="toolbarColor"
-          prepend-icon="mdi mdi-plus"
+          prepend-icon="mdi:mdi-plus"
           variant="flat"
           @click="openDialog()"
         >
@@ -239,20 +239,20 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
           :disabled="props.index==0"
           variant="flat"
           density="compact"
-          icon="mdi mdi-arrow-up-thick"
+          icon="mdi:mdi-arrow-up-thick"
           @click="moveUpItem(props.item)"
         />
         <v-btn
             variant="flat"
             density="compact"
-            icon="fa fa-arrow-right-to-bracket"
+            icon="fa:fas fa-arrow-right-to-bracket"
             @click="moveToItem(props.item)"
         />
         <v-btn
           :disabled="props.index==items.length-1"
           variant="flat"
           density="compact"
-          icon="mdi mdi-arrow-down-thick"
+          icon="mdi:mdi-arrow-down-thick"
           @click="moveDownItem(props.item)"
         />
       </template>
@@ -263,13 +263,13 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
         <v-btn
           variant="flat"
           density="compact"
-          icon="mdi mdi-note-edit"
+          icon="mdi:mdi-note-edit"
           @click="openDialog(item)"
         />
         <v-btn
           variant="flat"
           density="compact"
-          icon="mdi mdi-delete"
+          icon="mdi:mdi-delete"
           @click="deleteItem(item)"
         />
       </template>

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

@@ -62,7 +62,7 @@ watchEffect(() => {
 
 function startCamera() {
   imageData.value = undefined
-  if (!cameraEnabled.value && hasCamera) {
+  if (!cameraEnabled.value) {
     isLoading.value = true
     cameraStart().finally(()=>{
       isLoading.value = false

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {ref,computed} from 'vue'
+import {computed, ref} from 'vue'
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import type {ImageFormat} from "exif-rotate-js"
@@ -51,7 +51,6 @@ 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()

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { DateTime, type ToRelativeOptions } from "luxon";
+import { computed } from "vue";
+
+interface Props {
+  modelValue: DateTime;
+  locale?: 'TH' | 'EN';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'TH',
+});
+
+const timeAgo = computed(() => {
+  const now = DateTime.now();
+  const diff = now.diff(props.modelValue, ['years', 'months', 'days', 'hours', 'minutes', 'seconds']).toObject();
+
+  let unit: ToRelativeOptions['unit'] = 'seconds';
+  if (diff.years && diff.years > 0) {
+    unit = 'years';
+  } else if (diff.months && diff.months > 0) {
+    unit = 'months';
+  } else if (diff.days && diff.days > 0) {
+    unit = 'days';
+  } else if (diff.hours && diff.hours > 0) {
+    unit = 'hours';
+  } else if (diff.minutes && diff.minutes > 0) {
+    unit = 'minutes';
+  }
+
+  return props.modelValue.setLocale(props.locale).toRelative({ unit });
+});
+</script>
+
+<template>
+  <span>{{ timeAgo }}</span>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -1,48 +1,100 @@
 <script lang="ts" setup>
-import {computed} from 'vue'
+import { computed, ref } from 'vue';
+
 interface Props {
-  label: string
-  value?: string  | null | undefined
-  horizontal?: boolean
-  size? : 'large' | 'medium'
+  label: string;
+  value?: string | null;
+  horizontal?: boolean;
+  size?: 'large' | 'medium';
+  truncate?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  label: '', value: '',
-})
-const cal_size = computed(()=>{
-  if(props.size=='medium') return 'text-subtitle-1'
-  else return 'text-h6'
-})
+  label: '',
+  value: '',
+  horizontal: false,
+  size: 'large',
+  truncate: false,
+});
+
+const valueText = ref<HTMLElement | null>(null);
+const isTooltip = ref(false);
+
+const calSize = computed(() => (props.size === 'medium' ? 'text-subtitle-1' : 'text-h6'));
+const calTruncate = computed(() => (props.truncate ? 'text-truncate' : ''));
+
+const setTruncate = (event: Event) => {
+  const target = event.target as HTMLElement;
+  isTooltip.value = target.offsetWidth < target.scrollWidth;
+};
+
 </script>
 
 <template>
-  <div v-if="horizontal" class="d-flex align-end" :="$attrs">
+  <div
+      v-if="props.horizontal"
+      class="d-flex align-top"
+      v-bind="$attrs"
+      @resize="setTruncate"
+  >
     <div class="text-medium-emphasis text-no-wrap">
-      <slot name="label">
-        {{ label }}:
-      </slot>
+      <slot name="label">{{ props.label }}:</slot>
     </div>
-    <div class="ml-1">
+    <div :class="`ml-1 ${calTruncate}`" ref="valueText">
       <slot name="value">
-        {{ value }}
+        <div v-if="!props.truncate">{{ props.value }}</div>
+        <div
+            v-else
+            @mouseover="setTruncate"
+            @mouseout="isTooltip = false"
+        >
+          <v-tooltip :model-value="isTooltip" location="bottom">
+            <template #activator="{ props }">
+              <div
+                  class="text-truncate"
+                  v-bind="isTooltip ? props : ''"
+              >
+                {{ value }}
+              </div>
+            </template>
+            <span>{{ value }}</span>
+          </v-tooltip>
+        </div>
       </slot>
     </div>
   </div>
-  <v-card v-else variant="text" :="$attrs">
-  <VCardSubtitle class="ma-0 pa-0 text-black">
-    <slot name="label">
-      {{ label }}
-    </slot>
-  </VCardSubtitle>
-  <VCardText :class="`pa-0 mb-2 ${cal_size}`">
-    <slot name="value">
-      {{ value }}
-    </slot>
-  </VCardText>
-</v-card>
+
+  <v-card v-else variant="text" v-bind="$attrs">
+    <VCardSubtitle class="ma-0 pa-0 text-black">
+      <slot name="label">{{ props.label }}</slot>
+    </VCardSubtitle>
+    <VCardText :class="`pa-0 mb-2 ${calSize}`">
+      <div :class="calTruncate" ref="valueText">
+        <slot name="value">
+          <div v-if="!props.truncate">{{ props.value }}</div>
+          <div
+              v-else
+              @mouseover="setTruncate"
+              @mouseout="isTooltip = false"
+          >
+            <v-tooltip :model-value="isTooltip" location="bottom">
+              <template #activator="{ props }">
+                <div
+                    class="text-truncate"
+                    v-bind="isTooltip ? props : ''"
+                >
+                  {{ value }}
+                </div>
+              </template>
+              <span>{{ value }}</span>
+            </v-tooltip>
+          </div>
+        </slot>
+      </div>
+    </VCardText>
+  </v-card>
 </template>
 
-<style lang="">
+<style scoped>
 
 </style>

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {VAutocomplete} from 'vuetify/components/VAutocomplete'
-import {concat, isEmpty} from 'lodash-es'
+import {concat, isEmpty,sortBy} from 'lodash-es'
 import {computed, ref, watch} from 'vue'
 import {watchDebounced} from '@vueuse/core'
 import {useFuzzy} from '../../composables/utils/fuzzy'
@@ -16,13 +16,15 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$pr
   waitForFilter?: boolean
   waitForFilterText?: string
   modelValue?: string
+  sortBy?: 'itemCode' | 'itemValue'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  fuzzy: true,
+  fuzzy: false,
   noDataText: 'ไม่พบข้อมูล',
   lang: 'TH',
   waitForFilter: false,
+  sortBy: 'itemValue'
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -112,6 +114,23 @@ const computedNoDataText = computed(() => {
   if (props.waitForFilter && !props.filterText) return props.waitForFilterText
   return props.noDataText
 })
+
+const computedSortBy = computed(()=>{
+  let sortByField = props.sortBy
+  if (sortByField == 'itemValue') {
+    return [itemTitleField.value,'itemValue','itemCode']
+  } else {
+    return [sortByField]
+  }
+})
+
+const computedItems = computed(()=>{
+  if (pros.fuzzy && !isEmpty(searchData.value)) {
+    return items.value
+  } else {
+    return sortBy(items.value, computedSortBy.value)
+  }
+})
 </script>
 
 <template>
@@ -119,7 +138,7 @@ const computedNoDataText = computed(() => {
     v-model="selectedItem"
     v-model:search="searchData"
     v-bind="$attrs"
-    :items="items"
+    :items="computedItems"
     :no-filter="props.fuzzy"
     :item-title="itemTitleField"
     item-value="itemCode"

package/dist/runtime/composables/graphqlModel.mjs

@@ -12,23 +12,17 @@ export function useGraphqlModel(props) {
   const { operationCreate, operationUpdate, operationDelete, operationRead, operationReadPageable, operationSearch } = useGraphqlModelOperation(props);
   function keyToField(key) {
     const parts = key.split(".");
-    if (parts.length > 1) {
-      const result = {};
-      let current = result;
-      for (let i = 0; i < parts.length; i++) {
-        const part = parts[i];
-        const isLast = i === parts.length - 1;
-        if (isLast) {
-          current[part] = [part];
-        } else {
-          current[part] = [{}];
-          current = current[part][0];
-        }
-      }
-      return result;
-    } else {
+    if (parts.length <= 1)
       return key;
+    let lastValue = parts.pop();
+    let result = {};
+    for (let i = parts.length - 1; i >= 0; i--) {
+      if (i == parts.length - 1)
+        result = { [parts[i]]: [lastValue] };
+      else
+        result = { [parts[i]]: result };
     }
+    return result;
   }
   const fields = computed(() => {
     const tmpFields = [];

package/dist/runtime/composables/utils/validation.mjs

@@ -16,7 +16,7 @@ export function useRules() {
   const telephone = (customError = "Invalid telephone number") => (value) => condition(!value || /^(?:\s*(?:0[2-57]\d{7}|0[689]\d{8})(?:#\d{1,5})?\s*(?:\([^()]+\)\s*)?(?:,(?=.+))?)*$/.test(value), customError);
   const email = (customError = "Invalid email address") => (value) => condition(!value || /^([\w\-.]+)@([\w\-.]+)\.([a-z]{2,5})$/i.test(value), customError);
   const regex = (regex2, customError = "Invalid format") => (value) => condition(!value || new RegExp(regex2).test(value), customError);
-  const idcard = (customError = "Invalid idcard") => (value) => condition(/^\d{13}$/.test(value) && (11 - [...value].slice(0, 12).reduce((sum, n, i) => sum + +n * (13 - i), 0) % 11) % 10 === +value[12], customError);
+  const idcard = (customError = "Invalid ID Card format") => (value) => condition(!value || /^\d{13}$/.test(value) && (11 - [...value].slice(0, 12).reduce((sum, n, i) => sum + +n * (13 - i), 0) % 11) % 10 === +value[12], customError);
   const rules = ref({
     require,
     requireIf,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -116,5 +116,5 @@
     "vitest": "^1.5.1",
     "vue-tsc": "^1.8.27"
   },
-  "packageManager": "pnpm@9.7.1+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247"
+  "packageManager": "pnpm@9.8.0+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"
 }