@ramathibodi/nuxt-commons 0.1.14 → 0.1.16

package/README.md

@@ -1,96 +1,96 @@
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: Ramahis Common Component
-- Package name: @ramahis/common-components
--->
-
-# @ramathibodi/nuxt-commons
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-
-## Quick Setup
-
-1. Add `'@ramathibodi/nuxt-commons'` dependency to your project
-
-```bash
-# Using pnpm
-pnpm add -D @ramathibodi/nuxt-commons
-
-# Using yarn
-yarn add --dev @ramathibodi/nuxt-commons
-
-# Using npm
-npm install --save-dev @ramathibodi/nuxt-commons
-```
-
-2. Add `my-module` to the `modules` section of `nuxt.config.ts`
-
-```js
-export default defineNuxtConfig({
-  modules: [
-    '@ramathibodi/nuxt-commons'
-  ]
-})
-```
-
-That's it! You can now use My Module in your Nuxt app ✨
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Generate type stubs
-npm run dev:prepare
-
-# Develop with the playground
-npm run dev
-
-# Build the playground
-npm run dev:build
-
-# Run ESLint
-npm run lint
-
-# Run Vitest
-npm run test
-npm run test:watch
-
-# Release new version
-npm run release
-```
-
-## NPM Login
-```bash
-npm login
-```
-- จะส่ง link url มาให้เข้าไปที่ url login npm
-
-## NPM PUBLISH
-```bash
-1. ตรวจสอบ source code, ตรวจสอบ Branch ว่าเป็น master แล้ว จากนั้นตรวจสอบ version ของ npm ว่ามีการเปลี่ยนและไม่ชนกับ version บน npm
-2. npm run dev:build
-3. npm publish --access public
-4. set token ใน link ที่ npm ให้มา
-5. เสร็จสิ้น
-```
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/my-module
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/my-module
-
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/my-module
-
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: Ramahis Common Component
+- Package name: @ramahis/common-components
+-->
+
+# @ramathibodi/nuxt-commons
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+
+## Quick Setup
+
+1. Add `'@ramathibodi/nuxt-commons'` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D @ramathibodi/nuxt-commons
+
+# Using yarn
+yarn add --dev @ramathibodi/nuxt-commons
+
+# Using npm
+npm install --save-dev @ramathibodi/nuxt-commons
+```
+
+2. Add `my-module` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: [
+    '@ramathibodi/nuxt-commons'
+  ]
+})
+```
+
+That's it! You can now use My Module in your Nuxt app ✨
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Generate type stubs
+npm run dev:prepare
+
+# Develop with the playground
+npm run dev
+
+# Build the playground
+npm run dev:build
+
+# Run ESLint
+npm run lint
+
+# Run Vitest
+npm run test
+npm run test:watch
+
+# Release new version
+npm run release
+```
+
+## NPM Login
+```bash
+npm login
+```
+- จะส่ง link url มาให้เข้าไปที่ url login npm
+
+## NPM PUBLISH
+```bash
+1. ตรวจสอบ source code, ตรวจสอบ Branch ว่าเป็น master แล้ว จากนั้นตรวจสอบ version ของ npm ว่ามีการเปลี่ยนและไม่ชนกับ version บน npm
+2. npm run dev:build
+3. npm publish --access public
+4. set token ใน link ที่ npm ให้มา
+5. เสร็จสิ้น
+```
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/my-module
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/my-module
+
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/my-module
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.json

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

package/dist/runtime/components/Alert.vue

@@ -1,53 +1,53 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { isEmpty } from 'lodash-es'
-import { useAlert } from '../composables/alert'
-import type { AlertItem } from '../types/alert'
-
-const isAlertOpen = ref(false)
-const timeout = ref(3000)
-const alert = useAlert()
-const currentItem = ref<AlertItem | undefined>()
-
-const renewAlert = () => {
-  if (alert?.hasAlert()) {
-    currentItem.value = alert?.takeAlert()
-    isAlertOpen.value = true
-  }
-  else {
-    currentItem.value = undefined
-    isAlertOpen.value = false
-  }
-}
-
-watch(() => alert?.hasAlert(), (hasAlert) => {
-  if (hasAlert) {
-    renewAlert()
-  }
-})
-</script>
-
-<template>
-  <VSnackbar
-    v-if="currentItem"
-    v-model="isAlertOpen"
-    :timeout="timeout"
-    location="center"
-    multi-line
-    variant="text"
-    @update:model-value="renewAlert()"
-  >
-    <!-- @vue-expected-error Type conversion problem -->
-    <VAlert
-      v-model="isAlertOpen"
-      closable
-      :type="currentItem.alertType"
-      elevation="2"
-      theme="dark"
-      variant="flat"
-      @click:close="renewAlert()"
-    >
-      {{ currentItem.statusCode ? currentItem.statusCode + ' ' : '' }} {{ currentItem.message }} {{ !isEmpty(currentItem.data) ? currentItem.data : '' }}
-    </VAlert>
-  </VSnackbar>
-</template>
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { isEmpty } from 'lodash-es'
+import { useAlert } from '../composables/alert'
+import type { AlertItem } from '../types/alert'
+
+const isAlertOpen = ref(false)
+const timeout = ref(3000)
+const alert = useAlert()
+const currentItem = ref<AlertItem | undefined>()
+
+const renewAlert = () => {
+  if (alert?.hasAlert()) {
+    currentItem.value = alert?.takeAlert()
+    isAlertOpen.value = true
+  }
+  else {
+    currentItem.value = undefined
+    isAlertOpen.value = false
+  }
+}
+
+watch(() => alert?.hasAlert(), (hasAlert) => {
+  if (hasAlert) {
+    renewAlert()
+  }
+})
+</script>
+
+<template>
+  <VSnackbar
+    v-if="currentItem"
+    v-model="isAlertOpen"
+    :timeout="timeout"
+    location="center"
+    multi-line
+    variant="text"
+    @update:model-value="renewAlert()"
+  >
+    <!-- @vue-expected-error Type conversion problem -->
+    <VAlert
+      v-model="isAlertOpen"
+      closable
+      :type="currentItem.alertType"
+      elevation="2"
+      theme="dark"
+      variant="flat"
+      @click:close="renewAlert()"
+    >
+      {{ currentItem.statusCode ? currentItem.statusCode + ' ' : '' }} {{ currentItem.message }} {{ !isEmpty(currentItem.data) ? currentItem.data : '' }}
+    </VAlert>
+  </VSnackbar>
+</template>

package/dist/runtime/components/BarcodeReader.vue

@@ -1,98 +1,98 @@
-<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'
-
-const videoElementRef = ref<HTMLVideoElement | null>(null)
-const barcodeReader = new BrowserMultiFormatReader()
-const alert = useAlert()
-const hasCameraAvailable = ref(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')
-}
-
-async function startCamera() {
-  try {
-    const videoInputDevices = await BrowserMultiFormatReader.listVideoInputDevices()
-    if (videoInputDevices.length === 0) {
-      alert?.addAlert({ message: 'No camera devices found.', alertType: 'error' })
-      return
-    }
-
-    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()
-      }
-    })
-  }
-  catch (error) {
-    emit('error', error)
-    alert?.addAlert({ message: 'Error starting camera.', alertType: 'error' })
-  }
-}
-
-function scanImageFile(selectedFile: File | File[] | undefined) {
-  if (!selectedFile) {
-    alert?.addAlert({ message: 'No file selected.', alertType: 'error' })
-    return
-  }
-
-  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' })
-    }
-  }
-  const scanImageSingleFile: File = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
-  reader.readAsDataURL(scanImageSingleFile)
-}
-
-onMounted(async () => {
-  await checkCameraAvailability()
-  if (hasCameraAvailable.value) await startCamera()
-})
-</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"
-          />
-        </div>
-      </v-col>
-      <v-col v-else>
-        <FileBtn
-          accept="image/*"
-          text="Upload Image"
-          @update:model-value="scanImageFile"
-        />
-      </v-col>
-    </v-card-item>
-  </v-card>
-</template>
+<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'
+
+const videoElementRef = ref<HTMLVideoElement | null>(null)
+const barcodeReader = new BrowserMultiFormatReader()
+const alert = useAlert()
+const hasCameraAvailable = ref(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')
+}
+
+async function startCamera() {
+  try {
+    const videoInputDevices = await BrowserMultiFormatReader.listVideoInputDevices()
+    if (videoInputDevices.length === 0) {
+      alert?.addAlert({ message: 'No camera devices found.', alertType: 'error' })
+      return
+    }
+
+    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()
+      }
+    })
+  }
+  catch (error) {
+    emit('error', error)
+    alert?.addAlert({ message: 'Error starting camera.', alertType: 'error' })
+  }
+}
+
+function scanImageFile(selectedFile: File | File[] | undefined) {
+  if (!selectedFile) {
+    alert?.addAlert({ message: 'No file selected.', alertType: 'error' })
+    return
+  }
+
+  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' })
+    }
+  }
+  const scanImageSingleFile: File = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
+  reader.readAsDataURL(scanImageSingleFile)
+}
+
+onMounted(async () => {
+  await checkCameraAvailability()
+  if (hasCameraAvailable.value) await startCamera()
+})
+</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"
+          />
+        </div>
+      </v-col>
+      <v-col v-else>
+        <FileBtn
+          accept="image/*"
+          text="Upload Image"
+          @update:model-value="scanImageFile"
+        />
+      </v-col>
+    </v-card-item>
+  </v-card>
+</template>

package/dist/runtime/components/ExportCSV.vue

@@ -1,55 +1,55 @@
-<script lang="ts" setup>
-import {ref, withDefaults} from 'vue'
-import * as XLSX from 'xlsx'
-import {VBtn} from 'vuetify/components/VBtn'
-import {useAlert} from '../composables/alert'
-
-interface ExportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
-  fileName?: string
-  modelValue?: object[]
-}
-
-const props = withDefaults(defineProps<ExportButtonProps>(), {
-  fileName: 'download',
-})
-
-const alert = useAlert()
-const loading = ref(false)
-
-function exportFile() {
-  if (props.modelValue && Array.isArray(props.modelValue)) {
-    loading.value = true
-    const workbook = XLSX.utils.book_new()
-    const worksheet = XLSX.utils.json_to_sheet(props.modelValue)
-    const fileName = `${props.fileName}.xlsx`
-    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
-    XLSX.writeFile(workbook, fileName)
-    loading.value = false
-  }
-  else {
-    alert?.addAlert({ message: 'Invalid or no data to export', alertType: 'error' })
-  }
-}
-</script>
-
-<template>
-  <VBtn
-    v-bind="$attrs"
-    color="primary"
-    :loading="loading"
-    :disabled="loading"
-    text="Export CSV"
-    @click="exportFile"
-  >
-    <template
-      v-for="(_, name, index) in ($slots as {})"
-      :key="index"
-      #[name]="slotData"
-    >
-      <slot
-        :name="name"
-        v-bind="((slotData || {}) as object)"
-      />
-    </template>
-  </VBtn>
-</template>
+<script lang="ts" setup>
+import {ref, withDefaults} from 'vue'
+import * as XLSX from 'xlsx'
+import {VBtn} from 'vuetify/components/VBtn'
+import {useAlert} from '../composables/alert'
+
+interface ExportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
+  fileName?: string
+  modelValue?: object[]
+}
+
+const props = withDefaults(defineProps<ExportButtonProps>(), {
+  fileName: 'download',
+})
+
+const alert = useAlert()
+const loading = ref(false)
+
+function exportFile() {
+  if (props.modelValue && Array.isArray(props.modelValue)) {
+    loading.value = true
+    const workbook = XLSX.utils.book_new()
+    const worksheet = XLSX.utils.json_to_sheet(props.modelValue)
+    const fileName = `${props.fileName}.xlsx`
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+    XLSX.writeFile(workbook, fileName)
+    loading.value = false
+  }
+  else {
+    alert?.addAlert({ message: 'Invalid or no data to export', alertType: 'error' })
+  }
+}
+</script>
+
+<template>
+  <VBtn
+    v-bind="$attrs"
+    color="primary"
+    :loading="loading"
+    :disabled="loading"
+    text="Export CSV"
+    @click="exportFile"
+  >
+    <template
+      v-for="(_, name, index) in ($slots as {})"
+      :key="index"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="((slotData || {}) as object)"
+      />
+    </template>
+  </VBtn>
+</template>