@ramathibodi/nuxt-commons 0.1.74 → 0.1.75

package/dist/runtime/components/ImportCSV.vue

@@ -1,151 +1,151 @@
-<script lang="ts" setup>
-/**
- * ImportCSV imports spreadsheet rows, maps nested object keys, and emits normalized records for downstream processing.
- * This doc block is consumed by vue-docgen for generated API documentation.
- */
-import * as XLSX from 'xlsx'
-import { ref } from 'vue'
-import { useAlert } from '../composables/alert'
-import { VBtn } from 'vuetify/components/VBtn'
-
-interface ImportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
-  stringFields?: Array<string> // Field paths that must stay as string values (no nested object conversion).
-  tooltip?: string | Record<string,any> | undefined // Tooltip text or config object shown for the action control.
-}
-
-/**
- * Public props accepted by ImportCSV.
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
- */
-const props = withDefaults(defineProps<ImportButtonProps>(), {
-  stringFields: ()=>[],
-  tooltip: ()=>({text: 'Import', location: 'bottom'}),
-})
-
-const alert = useAlert()
-/**
- * Custom events emitted by ImportCSV.
- * Parents can listen to these events to react to user actions and internal state changes.
- */
-const emit = defineEmits<{
-  (e: 'import', value: object[]): void
-}>()
-
-const loading = ref(false)
-const fileBtnRef = ref()
-
-function uploadedFile(files: File[] | File | undefined) {
-  if (!files) return
-
-  if (Array.isArray(files) && files.length != 1) {
-    alert?.addAlert({ message: 'Please select a single file for import', alertType: 'error' })
-    return
-  }
-
-  if (Array.isArray(files)) files = files[0]
-
-  const fileExtension = files.name.slice(files.name.lastIndexOf('.')).toLowerCase()
-  if (!['.xlsx', '.csv'].includes(fileExtension)) {
-    alert?.addAlert({ message: `Please upload a file with .csv or .xlsx extension only (${files.name})`, alertType: 'error' })
-    return
-  }
-
-  const reader = new FileReader()
-  reader.onload = (e: ProgressEvent<FileReader>) => {
-    const workbook = XLSX.read(e.target?.result)
-    const parsedData = parseAndAggregateColumns(
-        XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
-    )
-    emit('import', parsedData)
-    loading.value = false
-    fileBtnRef.value.reset()
-  }
-  loading.value = true
-  reader.readAsArrayBuffer(files)
-}
-
-/**
- * Recursively aggregates nested columns and properties.
- * @param items - Array of data from the Excel sheet
- */
-const parseAndAggregateColumns = (items: any[]) => {
-  return items.map((item: any) => {
-    const aggregatedItem: any = {}
-
-    for (const key in item) {
-      if (key.includes('.')) {
-        // Extract root key and subKey
-        const [rootKey, ...subKeys] = key.split('.')
-
-        // Recursively aggregate subKeys
-        aggregatedItem[rootKey] = aggregatedItem[rootKey] || {}
-        assignNestedValue(aggregatedItem[rootKey], subKeys, parseIfJson(item[key]))
-      } else {
-        // Directly assign root-level properties
-        if (props.stringFields.includes(key)) aggregatedItem[key] = item[key]
-        else aggregatedItem[key] = parseIfJson(item[key])
-      }
-    }
-
-    return aggregatedItem
-  })
-}
-
-/**
- * Recursively assigns a value to a nested key structure.
- * @param obj - The object to assign to
- * @param keys - Array of keys leading to the final property
- * @param value - The value to assign
- */
-const assignNestedValue = (obj: any, keys: string[], value: any) => {
-  const [currentKey, ...remainingKeys] = keys
-  if (remainingKeys.length === 0) {
-    obj[currentKey] = value
-  } else {
-    obj[currentKey] = obj[currentKey] || {}
-    assignNestedValue(obj[currentKey], remainingKeys, value)
-  }
-}
-
-/**
- * Attempt to parse a value as JSON or array.
- * @param value - The value to parse
- */
-const parseIfJson = (value: any) => {
-  if (typeof value === 'string') {
-    try {
-      let parsedValue = JSON.parse(value)
-      return (parsedValue==value) ? value : parsedValue
-    } catch {
-      // If parsing fails, return the original value
-      return value
-    }
-  }
-  return value
-}
-</script>
-
-<template>
-  <FileBtn
-      ref="fileBtnRef"
-      v-bind="$attrs"
-      color="primary"
-      :loading="loading"
-      text="Import CSV"
-      accept=".csv, .xlsx"
-      :multiple="false"
-      @update:model-value="uploadedFile"
-      :tooltip="props.tooltip"
-  >
-    <template
-        v-for="(_, name, index) in ($slots as {})"
-        :key="index"
-        #[name]="slotData"
-    >
-      <slot
-          :name="name"
-          v-bind="((slotData || {}) as object)"
-      />
-    </template>
-  </FileBtn>
-</template>
+<script lang="ts" setup>
+/**
+ * ImportCSV imports spreadsheet rows, maps nested object keys, and emits normalized records for downstream processing.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import * as XLSX from 'xlsx'
+import { ref } from 'vue'
+import { useAlert } from '../composables/alert'
+import { VBtn } from 'vuetify/components/VBtn'
+
+interface ImportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
+  stringFields?: Array<string> // Field paths that must stay as string values (no nested object conversion).
+  tooltip?: string | Record<string,any> | undefined // Tooltip text or config object shown for the action control.
+}
+
+/**
+ * Public props accepted by ImportCSV.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<ImportButtonProps>(), {
+  stringFields: ()=>[],
+  tooltip: ()=>({text: 'Import', location: 'bottom'}),
+})
+
+const alert = useAlert()
+/**
+ * Custom events emitted by ImportCSV.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits<{
+  (e: 'import', value: object[]): void
+}>()
+
+const loading = ref(false)
+const fileBtnRef = ref()
+
+function uploadedFile(files: File[] | File | undefined) {
+  if (!files) return
+
+  if (Array.isArray(files) && files.length != 1) {
+    alert?.addAlert({ message: 'Please select a single file for import', alertType: 'error' })
+    return
+  }
+
+  if (Array.isArray(files)) files = files[0]
+
+  const fileExtension = files.name.slice(files.name.lastIndexOf('.')).toLowerCase()
+  if (!['.xlsx', '.csv'].includes(fileExtension)) {
+    alert?.addAlert({ message: `Please upload a file with .csv or .xlsx extension only (${files.name})`, alertType: 'error' })
+    return
+  }
+
+  const reader = new FileReader()
+  reader.onload = (e: ProgressEvent<FileReader>) => {
+    const workbook = XLSX.read(e.target?.result)
+    const parsedData = parseAndAggregateColumns(
+        XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
+    )
+    emit('import', parsedData)
+    loading.value = false
+    fileBtnRef.value.reset()
+  }
+  loading.value = true
+  reader.readAsArrayBuffer(files)
+}
+
+/**
+ * Recursively aggregates nested columns and properties.
+ * @param items - Array of data from the Excel sheet
+ */
+const parseAndAggregateColumns = (items: any[]) => {
+  return items.map((item: any) => {
+    const aggregatedItem: any = {}
+
+    for (const key in item) {
+      if (key.includes('.')) {
+        // Extract root key and subKey
+        const [rootKey, ...subKeys] = key.split('.')
+
+        // Recursively aggregate subKeys
+        aggregatedItem[rootKey] = aggregatedItem[rootKey] || {}
+        assignNestedValue(aggregatedItem[rootKey], subKeys, parseIfJson(item[key]))
+      } else {
+        // Directly assign root-level properties
+        if (props.stringFields.includes(key)) aggregatedItem[key] = item[key]
+        else aggregatedItem[key] = parseIfJson(item[key])
+      }
+    }
+
+    return aggregatedItem
+  })
+}
+
+/**
+ * Recursively assigns a value to a nested key structure.
+ * @param obj - The object to assign to
+ * @param keys - Array of keys leading to the final property
+ * @param value - The value to assign
+ */
+const assignNestedValue = (obj: any, keys: string[], value: any) => {
+  const [currentKey, ...remainingKeys] = keys
+  if (remainingKeys.length === 0) {
+    obj[currentKey] = value
+  } else {
+    obj[currentKey] = obj[currentKey] || {}
+    assignNestedValue(obj[currentKey], remainingKeys, value)
+  }
+}
+
+/**
+ * Attempt to parse a value as JSON or array.
+ * @param value - The value to parse
+ */
+const parseIfJson = (value: any) => {
+  if (typeof value === 'string') {
+    try {
+      let parsedValue = JSON.parse(value)
+      return (parsedValue==value) ? value : parsedValue
+    } catch {
+      // If parsing fails, return the original value
+      return value
+    }
+  }
+  return value
+}
+</script>
+
+<template>
+  <FileBtn
+      ref="fileBtnRef"
+      v-bind="$attrs"
+      color="primary"
+      :loading="loading"
+      text="Import CSV"
+      accept=".csv, .xlsx"
+      :multiple="false"
+      @update:model-value="uploadedFile"
+      :tooltip="props.tooltip"
+  >
+    <template
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
+    >
+      <slot
+          :name="name"
+          v-bind="((slotData || {}) as object)"
+      />
+    </template>
+  </FileBtn>
+</template>

package/dist/runtime/components/MrzReader.vue

@@ -1,168 +1,168 @@
-<script lang="ts" setup>
-/**
- * MrzReader captures passport/ID images from camera or upload, runs OCR + MRZ parsing,
- * and emits normalized MRZ data once checksum validation passes.
- */
-import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'
-import { useDevicesList, useUserMedia } from '@vueuse/core'
-import { useAlert } from '../composables/alert'
-import { useMrzReader, type MrzResult } from '../composables/useMrzReader'
-
-const mrzReaderControl = ref<number | null>(null)
-
-const alert = useAlert()
-const isLoading = ref(false)
-
-interface Props {
-  intervalMs?: number // Scan interval (ms) for periodic camera-frame OCR attempts.
-  scaleFactor?: number // Upscale factor applied before OCR to improve small-text readability.
-  useOpenCv?: boolean // Enables OpenCV-assisted region detection before OCR.
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  intervalMs: 900,
-  scaleFactor: 2,
-  useOpenCv: true,
-})
-
-const emit = defineEmits<{
-  (event: 'decode', value: MrzResult): void // Emitted when a valid MRZ payload is parsed.
-  (event: 'error', error: string | unknown): void // Emitted when camera/OCR/parsing fails.
-}>()
-
-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(() => !!currentCameraId.value)
-
-const { stream, start: cameraStart, stop: cameraStop, enabled: cameraEnabled } = useUserMedia({
-  constraints: { video: { deviceId: currentCameraId.value } },
-})
-
-watchEffect(() => {
-  if (videoScreen.value)
-    videoScreen.value.srcObject = stream.value ?? null
-})
-
-const mrzReader = useMrzReader({
-  scaleFactor: props.scaleFactor,
-  useOpenCv: props.useOpenCv,
-  lang: 'ocrb',
-  langPath: '/tesseract/',
-})
-
-async function scanOnce() {
-  if (!videoScreen.value || !cameraEnabled.value) return
-
-  try {
-    const parsed = await mrzReader.decodeFromVideoElement(videoScreen.value)
-    if (parsed) {
-      emit('decode', parsed)
-      stopCamera()
-    }
-  }
-  catch (err) {
-    emit('error', err)
-  }
-}
-
-function startCamera() {
-  if (cameraEnabled.value) return
-
-  isLoading.value = true
-  cameraStart()
-    .then(() => {
-      if (mrzReaderControl.value) {
-        window.clearInterval(mrzReaderControl.value)
-        mrzReaderControl.value = null
-      }
-
-      mrzReaderControl.value = window.setInterval(() => {
-        void scanOnce()
-      }, props.intervalMs)
-    })
-    .catch((err) => {
-      emit('error', err)
-    })
-    .finally(() => {
-      isLoading.value = false
-    })
-}
-
-function stopCamera() {
-  if (mrzReaderControl.value) {
-    window.clearInterval(mrzReaderControl.value)
-    mrzReaderControl.value = null
-  }
-  if (cameraEnabled.value)
-    cameraStop()
-}
-
-function scanImageFile(selectedFile: File | File[] | undefined) {
-  if (!selectedFile) {
-    alert?.addAlert({ message: 'No file selected.', alertType: 'error' })
-    return
-  }
-
-  const file = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
-
-  void mrzReader.decodeFromImageFile(file)
-    .then((parsed) => {
-      if (parsed)
-        emit('decode', parsed)
-      else
-        alert?.addAlert({ message: 'MRZ not found or checksum invalid.', alertType: 'warning' })
-    })
-    .catch((err) => {
-      emit('error', err)
-    })
-}
-
-onMounted(() => {
-  void mrzReader.ensureOpenCvReady()
-  startCamera()
-})
-
-onBeforeUnmount(() => {
-  stopCamera()
-})
-</script>
-
-<template>
-  <v-card flat>
-    <v-card-text class="d-flex justify-center" v-if="isLoading">
-      <v-progress-circular indeterminate />
-    </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>
-        <FileBtn
-          accept="image/*"
-          text="Upload Image"
-          @update:model-value="scanImageFile"
-        />
-      </v-col>
-    </v-card-text>
-  </v-card>
-</template>
+<script lang="ts" setup>
+/**
+ * MrzReader captures passport/ID images from camera or upload, runs OCR + MRZ parsing,
+ * and emits normalized MRZ data once checksum validation passes.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'
+import { useDevicesList, useUserMedia } from '@vueuse/core'
+import { useAlert } from '../composables/alert'
+import { useMrzReader, type MrzResult } from '../composables/useMrzReader'
+
+const mrzReaderControl = ref<number | null>(null)
+
+const alert = useAlert()
+const isLoading = ref(false)
+
+interface Props {
+  intervalMs?: number // Scan interval (ms) for periodic camera-frame OCR attempts.
+  scaleFactor?: number // Upscale factor applied before OCR to improve small-text readability.
+  useOpenCv?: boolean // Enables OpenCV-assisted region detection before OCR.
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  intervalMs: 900,
+  scaleFactor: 2,
+  useOpenCv: true,
+})
+
+const emit = defineEmits<{
+  (event: 'decode', value: MrzResult): void // Emitted when a valid MRZ payload is parsed.
+  (event: 'error', error: string | unknown): void // Emitted when camera/OCR/parsing fails.
+}>()
+
+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(() => !!currentCameraId.value)
+
+const { stream, start: cameraStart, stop: cameraStop, enabled: cameraEnabled } = useUserMedia({
+  constraints: { video: { deviceId: currentCameraId.value } },
+})
+
+watchEffect(() => {
+  if (videoScreen.value)
+    videoScreen.value.srcObject = stream.value ?? null
+})
+
+const mrzReader = useMrzReader({
+  scaleFactor: props.scaleFactor,
+  useOpenCv: props.useOpenCv,
+  lang: 'ocrb',
+  langPath: '/tesseract/',
+})
+
+async function scanOnce() {
+  if (!videoScreen.value || !cameraEnabled.value) return
+
+  try {
+    const parsed = await mrzReader.decodeFromVideoElement(videoScreen.value)
+    if (parsed) {
+      emit('decode', parsed)
+      stopCamera()
+    }
+  }
+  catch (err) {
+    emit('error', err)
+  }
+}
+
+function startCamera() {
+  if (cameraEnabled.value) return
+
+  isLoading.value = true
+  cameraStart()
+    .then(() => {
+      if (mrzReaderControl.value) {
+        window.clearInterval(mrzReaderControl.value)
+        mrzReaderControl.value = null
+      }
+
+      mrzReaderControl.value = window.setInterval(() => {
+        void scanOnce()
+      }, props.intervalMs)
+    })
+    .catch((err) => {
+      emit('error', err)
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+function stopCamera() {
+  if (mrzReaderControl.value) {
+    window.clearInterval(mrzReaderControl.value)
+    mrzReaderControl.value = null
+  }
+  if (cameraEnabled.value)
+    cameraStop()
+}
+
+function scanImageFile(selectedFile: File | File[] | undefined) {
+  if (!selectedFile) {
+    alert?.addAlert({ message: 'No file selected.', alertType: 'error' })
+    return
+  }
+
+  const file = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
+
+  void mrzReader.decodeFromImageFile(file)
+    .then((parsed) => {
+      if (parsed)
+        emit('decode', parsed)
+      else
+        alert?.addAlert({ message: 'MRZ not found or checksum invalid.', alertType: 'warning' })
+    })
+    .catch((err) => {
+      emit('error', err)
+    })
+}
+
+onMounted(() => {
+  void mrzReader.ensureOpenCvReady()
+  startCamera()
+})
+
+onBeforeUnmount(() => {
+  stopCamera()
+})
+</script>
+
+<template>
+  <v-card flat>
+    <v-card-text class="d-flex justify-center" v-if="isLoading">
+      <v-progress-circular indeterminate />
+    </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>
+        <FileBtn
+          accept="image/*"
+          text="Upload Image"
+          @update:model-value="scanImageFile"
+        />
+      </v-col>
+    </v-card-text>
+  </v-card>
+</template>