@ramathibodi/nuxt-commons 0.0.1

package/README.md

@@ -0,0 +1,81 @@
+<!--
+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
+-->
+
+# Ramahis Common Component
+
+[![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 `@deverloprama/common-components` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D @deverloprama/common-components
+
+# Using yarn
+yarn add --dev @deverloprama/common-components
+
+# Using npm
+npm install --save-dev @deverloprama/common-components
+```
+
+2. Add `my-module` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: [
+    '@deverloprama/common-components'
+  ]
+})
+```
+
+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
+```
+
+<!-- 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.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ramathibodi/nuxt-commons",
+  "configKey": "nuxt-commons",
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "0.0.1"
+}

package/dist/module.mjs

@@ -0,0 +1,34 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addTypeTemplate } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@ramathibodi/nuxt-commons",
+    configKey: "nuxt-commons",
+    compatibility: {
+      nuxt: "^3.0.0"
+    }
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  async setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    await addComponentsDir({
+      path: resolver.resolve("runtime/components"),
+      pathPrefix: true,
+      global: true
+    });
+    addImportsDir(resolver.resolve("runtime/composables"));
+    addTypeTemplate({
+      filename: "types/modules.d.ts",
+      getContents: () => `
+        declare module 'painterro';
+        declare module "@zxing/browser"
+        declare module "vue-signature-pad"
+        declare module "accounting"
+        declare module "pdf-vue3"
+      `
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/Alert.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+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 }}{{ currentItem.data ? ' ' + currentItem.data : '' }}
+    </VAlert>
+  </VSnackbar>
+</template>

package/dist/runtime/components/BarcodeReader.vue

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

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import listPlugin from '@fullcalendar/list'
+import interactionPlugin from '@fullcalendar/interaction'
+import { ref, computed, withDefaults } from 'vue'
+import { type CalendarOptions } from '@fullcalendar/core'
+
+type Event = {
+  id: string | undefined
+  title: string
+  start: string // YYYY-MM-DD | YYYY-MM-DD HH:mm:ss
+  end: string // YYYY-MM-DD
+  color: string
+  detail?: string
+  props: Record<string, any> | any[]
+}
+
+interface CalendarProps {
+  modelValue: Event[]
+  locale?: 'th' | 'en'
+  toolBarLeft?: string
+  toolBarCenter?: string
+  toolBarRight?: string
+  height?: string | number
+  selectViewDay?: string
+  mode: 'dayGridMonth' | 'timeGridDay'
+}
+
+const props = withDefaults(defineProps<CalendarProps>(), {
+  locale: 'th',
+  height: 1200,
+  toolBarLeft: 'today prev,next',
+  toolBarCenter: 'title',
+  toolBarRight: 'timeGridDay,timeGridWeek,dayGridMonth',
+  mode: 'dayGridMonth',
+})
+
+const emit = defineEmits(['select', 'dialog'])
+
+const buttonText = computed(() => {
+  return {
+    today: props.locale === 'th' ? 'วันนี้' : 'today',
+    month: props.locale === 'th' ? 'เดือน' : 'month',
+    week: props.locale === 'th' ? 'สัปดาห์' : 'week',
+    day: props.locale === 'th' ? 'วัน' : 'day',
+    list: props.locale === 'th' ? 'รายการ' : 'list',
+    year: props.locale === 'th' ? 'ปี' : 'year',
+  }
+})
+
+const calendarRef = ref<InstanceType<typeof FullCalendar>>()
+const dateViewDay = ref({ date: '', props: {} })
+
+const handleDateClick = (info: any) => {
+  emit('select', info.event)
+}
+
+const handleEventClick = (info: any) => {
+  emit('dialog', true)
+  emit('select', info.event)
+}
+
+const eventContentDay = (arg: any) => {
+  const list = document.createElement('div')
+  list.innerHTML = document.getElementById(arg.event.id.toString())?.innerHTML || ''
+  return { domNodes: [list] }
+}
+
+// @ts-ignore
+const calendarOptions = ref<CalendarOptions>({
+  plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+  initialView: props.mode,
+  locale: props.locale,
+  dayMaxEvents: true,
+  timeZone: 'UTC',
+  headerToolbar: {
+    left: props.toolBarLeft,
+    center: props.toolBarCenter,
+    right: props.toolBarRight,
+  },
+  buttonText: buttonText.value,
+  events: props.modelValue,
+  initialDate: props.selectViewDay,
+  dateClick: handleDateClick,
+  eventClick: handleEventClick,
+  nowIndicator: true,
+  height: props.height,
+  eventColor: '#378006',
+})
+</script>
+
+<template>
+  <FullCalendar
+    ref="calendarRef"
+    :options="calendarOptions as CalendarOptions"
+  />
+</template>

package/dist/runtime/components/Camera.vue

@@ -0,0 +1,116 @@
+<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-icon>
+        <v-tooltip activator="parent" location="top">ถ่ายภาพ</v-tooltip>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>

package/dist/runtime/components/ExportCSV.vue

@@ -0,0 +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="(_, slot, index) in ($slots as {})"
+      :key="index"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="{ scope }"
+      />
+    </template>
+  </VBtn>
+</template>

package/dist/runtime/components/FileBtn.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { VBtn } from 'vuetify/components/VBtn'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
+  accept?: string
+  multiple?: boolean
+  iconOnly?: boolean
+  modelValue?: File | File[] | undefined
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  multiple: false,
+  accept: '*',
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: File | File[] | undefined): void
+}>()
+
+const fileInput = ref<HTMLInputElement>()
+const files = ref<File | File[]>()
+
+const openFileInput = () => {
+  fileInput.value?.click()
+}
+
+watch(files, () => {
+  emit('update:modelValue', files.value)
+}, { deep: true })
+</script>
+
+<template>
+  <v-btn
+    v-bind="$attrs"
+    @click="openFileInput"
+  >
+    <template
+      v-for="(_, slot, index) in ($slots as {})"
+      :key="index"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="{ scope }"
+      />
+    </template>
+  </v-btn>
+  <v-file-input
+    ref="fileInput"
+    v-model="files"
+    :accept="props.accept"
+    :multiple="props.multiple"
+    style="display: none"
+  />
+</template>

package/dist/runtime/components/ImportCSV.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import * as XLSX from 'xlsx'
+import { ref } from 'vue'
+import { useAlert } from '../composables/alert'
+
+const alert = useAlert()
+const emit = defineEmits<{
+  (e: 'import', value: object[]): void
+}>()
+
+const loading = ref(false)
+
+function uploadedFile(files: File[] | File | undefined) {
+  if (!files) {
+    alert?.addAlert({ message: 'Please upload a file again', alertType: 'error' })
+    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)
+    emit('import', XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]))
+    loading.value = false
+  }
+  loading.value = true
+  reader.readAsArrayBuffer(files)
+}
+</script>
+
+<template>
+  <FileBtn
+    v-bind="$attrs"
+    color="primary"
+    :loading="loading"
+    text="Import CSV"
+    accept=".csv, .xlsx"
+    :multiple="false"
+    @update:model-value="uploadedFile"
+  >
+    <template
+      v-for="(_, slot, index) in ($slots as {})"
+      :key="index"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="{ scope }"
+      />
+    </template>
+  </FileBtn>
+</template>