@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

package/dist/runtime/components/MrzReader.vue

@@ -0,0 +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>

package/dist/runtime/components/SplitterPanel.vue

@@ -1,61 +1,69 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { VCard } from 'vuetify/components/VCard'
-
-const isResizing = ref(false)
-const pane1Width = ref('50%')
-const containerRef = ref<HTMLElement>()
-interface Props extends /* @vue-ignore */ InstanceType<typeof VCard['$props']> {
-  height?: number | string
-}
-const props = defineProps<Props>()
-
-const startResize = () => {
-  isResizing.value = true
-}
-
-const stopResize = () => {
-  isResizing.value = false
-}
-
-const resize = (event: MouseEvent) => {
-  if (isResizing.value && containerRef.value) {
-    const containerRect = containerRef.value.getBoundingClientRect()
-    const newWidth = event.clientX - containerRect.left
-    pane1Width.value = `${(newWidth / containerRect.width) * 100}%`
-  }
-}
-</script>
-
-<template>
-  <v-card :="$attrs">
-    <v-sheet
-      border
-      :height="props.height"
-    >
-      <div
-        ref="containerRef"
-        class="d-flex"
-        @mouseup="stopResize"
-        @mousemove="resize"
-      >
-        <v-sheet :width="pane1Width">
-          <slot name="left" />
-        </v-sheet>
-        <v-divider
-          :thickness="3"
-          vertical
-          class="cursor-move"
-          @mousedown="startResize"
-        />
-        <v-sheet :width="`calc(100% - ${pane1Width})`">
-          <slot name="right" />
-        </v-sheet>
-      </div>
-    </v-sheet>
-  </v-card>
-</template>
-
+<script setup lang="ts">
+/**
+ * SplitterPanel provides a resizable split layout panel for flexible, user-adjustable page composition.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { ref } from 'vue'
+import { VCard } from 'vuetify/components/VCard'
+
+const isResizing = ref(false)
+const pane1Width = ref('50%')
+const containerRef = ref<HTMLElement>()
+interface Props extends /* @vue-ignore */ InstanceType<typeof VCard['$props']> {
+  height?: number | string // Fixed or minimum height applied to the component container.
+}
+/**
+ * Public props accepted by SplitterPanel.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = defineProps<Props>()
+
+const startResize = () => {
+  isResizing.value = true
+}
+
+const stopResize = () => {
+  isResizing.value = false
+}
+
+const resize = (event: MouseEvent) => {
+  if (isResizing.value && containerRef.value) {
+    const containerRect = containerRef.value.getBoundingClientRect()
+    const newWidth = event.clientX - containerRect.left
+    pane1Width.value = `${(newWidth / containerRect.width) * 100}%`
+  }
+}
+</script>
+
+<template>
+  <v-card :="$attrs">
+    <v-sheet
+      border
+      :height="props.height"
+    >
+      <div
+        ref="containerRef"
+        class="d-flex"
+        @mouseup="stopResize"
+        @mousemove="resize"
+      >
+        <v-sheet :width="pane1Width">
+          <slot name="left" />
+        </v-sheet>
+        <v-divider
+          :thickness="3"
+          vertical
+          class="cursor-move"
+          @mousedown="startResize"
+        />
+        <v-sheet :width="`calc(100% - ${pane1Width})`">
+          <slot name="right" />
+        </v-sheet>
+      </div>
+    </v-sheet>
+  </v-card>
+</template>
+
 <style scoped>
 
-</style>
+</style>

package/dist/runtime/components/TabsGroup.vue

@@ -1,31 +1,39 @@
-<script lang="ts" setup>
-import {VTabs} from 'vuetify/components'
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VTabs['$props']> {
-  flat?: boolean
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<Props>()
-const currentTab = defineModel<string|number>()
-</script>
-
-<template>
-  <v-card :flat="props.flat">
-    <v-tabs
-      v-bind="$attrs"
-      v-model="currentTab"
-      show-arrows
-    >
-      <slot name="tabs" />
-    </v-tabs>
-    <v-card-text>
-      <v-tabs-window v-model="currentTab">
-        <slot name="items" />
-      </v-tabs-window>
-    </v-card-text>
-  </v-card>
-</template>
+<script lang="ts" setup>
+/**
+ * TabsGroup renders grouped tab content and keeps tab state consistent across controlled and uncontrolled usage.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {VTabs} from 'vuetify/components'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VTabs['$props']> {
+  flat?: boolean // Uses a flatter tab style with reduced elevation and borders.
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+/**
+ * Public props accepted by TabsGroup.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = defineProps<Props>()
+const currentTab = defineModel<string|number>()
+</script>
+
+<template>
+  <v-card :flat="props.flat">
+    <v-tabs
+      v-bind="$attrs"
+      v-model="currentTab"
+      show-arrows
+    >
+      <slot name="tabs" />
+    </v-tabs>
+    <v-card-text>
+      <v-tabs-window v-model="currentTab">
+        <slot name="items" />
+      </v-tabs-window>
+    </v-card-text>
+  </v-card>
+</template>

package/dist/runtime/components/TextBarcode.vue

@@ -1,54 +1,66 @@
-<script lang="ts" setup>
-import {ref, watch} from 'vue'
-import {useAlert} from '../composables/alert'
-
-interface Props {
-  modelValue?: string
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: string | undefined): void
-  (event: 'decode', value: string | undefined): void
-}>()
-const alert = useAlert()
-
-const scanCode = ref<boolean>(false)
-const currentValue = ref<string>()
-
-const handleData = (data: string) => {
-  currentValue.value = data
-  scanCode.value = false
-  emit('decode',data)
-}
-
-const handleError = (error: string | unknown) => {
-  alert?.addAlert({ message: error as string, alertType: 'error' })
-}
-
-watch(() => props.modelValue, () => {
-  currentValue.value = props.modelValue
-}, { immediate: true })
-
-watch(currentValue, (newValue) => {
-  emit('update:modelValue', newValue)
-})
-</script>
-
-<template>
-  <v-text-field
-    v-model="currentValue"
-    v-bind="$attrs"
-    append-inner-icon="mdi mdi-qrcode-scan"
-    @click:append-inner="scanCode = true"
-  />
-  <v-dialog
-    v-model="scanCode"
-    width="auto"
-  >
-    <BarcodeReader
-      @decode="handleData"
-      @error="handleError"
-    />
-  </v-dialog>
-</template>
+<script lang="ts" setup>
+/**
+ * TextBarcode renders barcode output from plain text and updates when bound values change.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {ref, watch} from 'vue'
+import {useAlert} from '../composables/alert'
+
+interface Props {
+  modelValue?: string // Bound value for v-model synchronization with the parent component.
+}
+
+/**
+ * Public props accepted by TextBarcode.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = defineProps<Props>()
+/**
+ * Custom events emitted by TextBarcode.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string | undefined): void
+  (event: 'decode', value: string | undefined): void
+}>()
+const alert = useAlert()
+
+const scanCode = ref<boolean>(false)
+const currentValue = ref<string>()
+
+const handleData = (data: string) => {
+  currentValue.value = data
+  scanCode.value = false
+  emit('decode',data)
+}
+
+const handleError = (error: string | unknown) => {
+  alert?.addAlert({ message: error as string, alertType: 'error' })
+}
+
+watch(() => props.modelValue, () => {
+  currentValue.value = props.modelValue
+}, { immediate: true })
+
+watch(currentValue, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+</script>
+
+<template>
+  <v-text-field
+    v-model="currentValue"
+    v-bind="$attrs"
+    append-inner-icon="mdi mdi-qrcode-scan"
+    @click:append-inner="scanCode = true"
+  />
+  <v-dialog
+    v-model="scanCode"
+    width="auto"
+  >
+    <BarcodeReader
+      @decode="handleData"
+      @error="handleError"
+    />
+  </v-dialog>
+</template>