@ramathibodi/nuxt-commons 0.0.1

package/dist/runtime/components/Pdf/Print.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import printJS from 'print-js'
+import { ref, watch } from 'vue'
+import { useAlert } from '../../composables/alert'
+
+interface Props {
+  base64String?: string
+  fileName?: string
+  print?: boolean
+  title?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  print: false,
+  disabled: false,
+})
+const emit = defineEmits(['update:print'])
+
+const isMobile = ref(false)
+const alert = useAlert()
+
+const openPdf = () => {
+  if (/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent)) {
+    isMobile.value = true
+  }
+  else {
+    printJS({
+      printable: props.base64String,
+      type: 'pdf',
+      base64: true,
+      onPrintDialogClose: endLoadPdf,
+      onError: (error: any) => {
+        alert?.addAlert({ message: error, alertType: 'error' })
+      },
+    })
+  }
+}
+
+const endLoadPdf = () => {
+  emit('update:print', false)
+  isMobile.value = false
+}
+
+watch(() => props.print, () => {
+  if (props.print) openPdf()
+})
+</script>
+
+<template>
+  <v-dialog
+    v-model="isMobile"
+    fullscreen
+  >
+    <PdfView
+      :base64-string="props.base64String"
+      :disabled="props.disabled"
+      :title="props.title"
+      :file-name="props.fileName"
+      @close-dialog="endLoadPdf"
+    />
+  </v-dialog>
+</template>

package/dist/runtime/components/Pdf/View.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import PDF from 'pdf-vue3'
+import { uid } from 'uid'
+
+const props = defineProps<{
+  base64String?: string
+  title?: string
+  fileName?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits(['closeDialog'])
+
+const generateUniqueId = (): string => {
+  const uniqueId: string = uid()
+  return props.fileName ? `${props.fileName}` : uniqueId
+}
+
+const downloadPdf = (): void => {
+  const byteString = atob(props.base64String || '')
+  const byteArray = new Uint8Array(byteString.length)
+
+  for (let i = 0; i < byteString.length; i++) {
+    byteArray[i] = byteString.charCodeAt(i)
+  }
+
+  const blob = new Blob([byteArray], { type: 'application/pdf' })
+  const link = URL.createObjectURL(blob)
+  const anchorElement = document.createElement('a')
+  anchorElement.style.display = 'none'
+  anchorElement.href = link
+  anchorElement.download = `${generateUniqueId()}.pdf`
+
+  document.body.appendChild(anchorElement)
+  anchorElement.click()
+  URL.revokeObjectURL(link)
+  document.body.removeChild(anchorElement)
+}
+</script>
+
+<template>
+  <v-card>
+    <v-toolbar density="compact">
+      <v-toolbar-title>{{ props.title }}</v-toolbar-title>
+      <v-spacer />
+      <v-btn
+        v-if="!props.disabled"
+        icon="mdi mdi-download"
+        variant="plain"
+        @click="downloadPdf"
+      />
+      <v-btn
+        icon="mdi mdi-close"
+        variant="plain"
+        @click="emit('closeDialog', false)"
+      />
+    </v-toolbar>
+    <v-card-text>
+      <v-row justify="center">
+        <PDF
+            :show-progress="true"
+            pdf-width="100%"
+            :src="props.base64String"
+            :show-page-tooltip="false"
+            :show-back-to-top-btn="false"
+        />
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>

package/dist/runtime/components/TabsGroup.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { VTabs } from 'vuetify/components'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VTabs['$props']> {
+  flat?: boolean
+}
+
+const props = defineProps<Props>()
+const currentTab = ref<number | null>(null)
+</script>
+
+<template>
+  <v-card :flat="props.flat">
+    <v-tabs
+      v-model="currentTab"
+      v-bind="$attrs"
+      show-arrows
+    >
+      <slot name="tabs" />
+    </v-tabs>
+    <v-card>
+      <v-window v-model="currentTab">
+        <slot name="items" />
+      </v-window>
+    </v-card>
+  </v-card>
+</template>

package/dist/runtime/components/TextBarcode.vue

@@ -0,0 +1,52 @@
+<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
+}>()
+const alert = useAlert()
+
+const scanCode = ref<boolean>(false)
+const currentValue = ref<string>()
+
+const handleData = (data: string) => {
+  currentValue.value = data
+  scanCode.value = false
+}
+
+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>

package/dist/runtime/components/dialog/Confirm.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { type Ref, ref, watch, computed } from 'vue'
+import { isEqual, isUndefined, isEmpty } from 'lodash-es'
+
+interface DialogProps {
+  title?: string
+  modelValue: boolean
+  message?: string
+  buttonTrueText?: string
+  buttonFalseText?: string
+  type?: 'primary' | 'success' | 'warning' | 'info' | 'error'
+  confirmData?: string
+  width?: string
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  title: 'ยืนยัน',
+  message: 'ยืนยันทำรายการนี้',
+  buttonTrueText: 'ตกลง',
+  buttonFalseText: 'ยกเลิก',
+  width: 'auto',
+})
+
+const emit = defineEmits<{
+  (e: 'update:result', value: boolean): void
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const dialogVisible: Ref<boolean> = ref(false)
+dialogVisible.value = props.modelValue
+watch(
+  () => props.modelValue,
+  () => {
+    dialogVisible.value = props.modelValue
+  },
+)
+
+const txtConfirm = ref<string>()
+
+const isDisabled = computed(() => {
+  if (isUndefined(props.confirmData)) return false
+  if (isEmpty(props.confirmData)) return true
+  return props.confirmData ? !isEqual(txtConfirm.value, props.confirmData) : false
+})
+
+const handleResult = (result: boolean) => {
+  dialogVisible.value = false
+  emit('update:modelValue', dialogVisible.value)
+  emit('update:result', result)
+  txtConfirm.value = ''
+}
+</script>
+
+<template>
+  <v-row justify="center">
+    <v-dialog
+      v-model="dialogVisible"
+      persistent
+      :width="props.width"
+    >
+      <v-card>
+        <v-toolbar
+          :color="props.type"
+          :title="props.title"
+        />
+        <v-card-text>{{ props.message }}</v-card-text>
+        <v-card-text v-if="props.confirmData">
+          <v-text-field
+            v-model="txtConfirm"
+            variant="underlined"
+          >
+            <template #label>
+              <slot
+                name="labelTextConfirm"
+                :text="props.confirmData"
+              />
+            </template>
+          </v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="handleResult(false)"
+          >
+            {{ props.buttonFalseText }}
+          </v-btn>
+          <v-btn
+            :color="props.type"
+            variant="text"
+            :disabled="isDisabled"
+            @click="handleResult(true)"
+          >
+            {{ props.buttonTrueText }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>

package/dist/runtime/components/dialog/Index.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+interface DialogProps {
+  modelValue?: boolean
+  title?: string
+  message?: string
+  type?: 'success' | 'error' | 'warning' | 'info'
+  width?: number | string
+}
+
+const props = defineProps<DialogProps>()
+const emit = defineEmits(['update:modelValue'])
+
+const dialogIcon = computed(() => {
+  switch (props.type) {
+    case 'success':
+      return 'mdi mdi-check-circle'
+    case 'error':
+      return 'mdi mdi-alert-circle'
+    case 'warning':
+      return 'mdi mdi-alert'
+    case 'info':
+      return 'mdi mdi-information-variant-circle'
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <VDialog
+    :model-value="modelValue"
+    :width="width"
+    max-width="800"
+    @update:model-value="emit('update:modelValue', false)"
+  >
+    <VCard>
+      <VToolbar :color="type">
+        <VToolbarTitle>
+          <VIcon :icon="dialogIcon" />
+          {{ title }}
+        </VToolbarTitle>
+        <VBtn
+          icon="mdi mdi-close"
+          size="x-small"
+          @click="emit('update:modelValue', false)"
+        />
+      </VToolbar>
+      <VCardText>
+        <slot>
+          {{ message }}
+        </slot>
+      </VCardText>
+      <VDivider />
+      <VCardActions>
+        <VBtn
+          :color="type"
+          block
+          class="ma-auto"
+          @click="emit('update:modelValue', false)"
+        >
+          ตกลง
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="">
+
+</style>

package/dist/runtime/components/dialog/Loading.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface DialogProps {
+  modelValue: boolean
+  color?: string
+}
+
+const props = defineProps<DialogProps>()
+const dialogVisible = ref<boolean>(false)
+
+watch(() => props.modelValue, (newValue) => {
+  dialogVisible.value = newValue
+})
+</script>
+
+<template>
+  <v-dialog
+    v-model="dialogVisible"
+    persistent
+    max-width="500"
+  >
+    <v-card :color="props.color">
+      <v-card-text>
+        <v-row>
+          <v-col class="text-center">
+            กรุณารอสักครู่
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-progress-linear indeterminate />
+    </v-card>
+  </v-dialog>
+</template>

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

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import Datepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { ref, watch, watchEffect, nextTick } from 'vue'
+import { type dateFormat, Datetime } from '../../utils/datetime'
+
+interface Props {
+  readonly?: boolean
+  locale?: 'TH' | 'EN'
+  format?: dateFormat | string
+  modelValue?: string | null
+  holiday?: object[] | undefined
+  minDate?: Date | string
+  maxDate?: Date | string
+  pickerOnly?: boolean
+  flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+  locale: 'TH',
+  format: 'shortDate',
+  pickerOnly: false,
+  flow: () => [],
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const selectedDate = ref<string | null>(null)
+const displayedDate = ref<string | null>(null)
+
+const isMenuOpen = ref(false)
+const isTextFieldFocused = ref(false)
+const hasTextFieldInput = ref(false)
+
+function handleTextFieldFocus(event: Event) {
+  isTextFieldFocused.value = true
+  nextTick(() => {
+    (event.target as HTMLInputElement).select()
+  })
+}
+
+function handleTextFieldInput() {
+  if (!hasTextFieldInput.value) {
+    hasTextFieldInput.value = true
+    isMenuOpen.value = false
+  }
+}
+
+function handleTextFieldBlur() {
+  if (hasTextFieldInput.value) {
+    updateDate(displayedDate.value)
+    hasTextFieldInput.value = false
+  }
+  isTextFieldFocused.value = false
+}
+
+function handleTextFieldEnterKey() {
+  handleTextFieldBlur()
+}
+
+function updateDatePicker(dateString: string | null) {
+  isMenuOpen.value = false
+  updateDate(dateString)
+}
+
+function updateDate(dateString: string | null) {
+  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
+  if (!dateTime.luxonDateTime.isValid) {
+    displayedDate.value = null
+    selectedDate.value = null
+  }
+  else {
+    selectedDate.value = dateTime.toFormat('yyyy-MM-dd', 'EN')
+    displayedDate.value = selectedDate.value
+  }
+
+  if (!isTextFieldFocused.value) displayedDate.value = formatDate(displayedDate.value)
+}
+
+function formatDate(dateString: string | null) {
+  if (!dateString) return null
+
+  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
+  return dateTime.toFormat(props.format, props.locale)
+}
+
+function handleTextFieldClear() {
+  resetDatePicker()
+}
+
+function resetDatePicker() {
+  selectedDate.value = null
+  displayedDate.value = null
+}
+
+watchEffect(() => {
+  if (!isTextFieldFocused.value && selectedDate.value) {
+    const dateTime = Datetime().fromString(selectedDate.value, undefined, props.locale)
+    displayedDate.value = dateTime.toFormat(props.format, props.locale)
+  }
+  else {
+    displayedDate.value = selectedDate.value
+  }
+})
+
+watch(selectedDate, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+watch(() => props.modelValue, () => {
+  updateDate(props.modelValue || null)
+}, { immediate: true })
+
+function toggleMenuOpen(trigger: string) {
+  if ((trigger === 'textField' && props.pickerOnly) || (trigger === 'icon' && !props.pickerOnly)) {
+    isMenuOpen.value = true
+  }
+}
+</script>
+
+<template>
+  <v-menu
+    v-model="isMenuOpen"
+    :open-on-click="false"
+  >
+    <template #activator="{ props: activatorProps }">
+      <v-text-field
+        ref="textField"
+        v-model="displayedDate"
+        :readonly="readonly"
+        v-bind="$attrs"
+        @focus="handleTextFieldFocus"
+        @blur="handleTextFieldBlur"
+        @keydown="handleTextFieldInput"
+        @keyup.enter="handleTextFieldEnterKey"
+        @click:clear="handleTextFieldClear"
+        @click="toggleMenuOpen('textField')"
+      >
+        <template #append-inner>
+          <v-icon
+            v-bind="activatorProps"
+            @click="toggleMenuOpen('icon')"
+          >
+            fa:fa-regular fa-calendar
+          </v-icon>
+        </template>
+      </v-text-field>
+    </template>
+    <Datepicker
+      v-model="selectedDate"
+      model-type="yyyy-MM-dd"
+      :enable-time-picker="false"
+      :flow="flow"
+      :min-date="props.minDate"
+      :max-date="props.maxDate"
+      auto-apply
+      inline
+      :locale="locale"
+      @update:model-value="updateDatePicker"
+    />
+  </v-menu>
+</template>

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

@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { ref, computed, watch, watchEffect } from 'vue'
+import { union } from 'lodash-es'
+import { type dateFormat, Datetime } from '../../utils/datetime'
+
+interface Props {
+  modelValue?: string | null
+  format?: dateFormat | string
+  label?: string
+  enableSeconds?: boolean
+  rules?: typeof import('vuetify/components')['VTextField']['rules']
+  dateRules?: typeof import('vuetify/components')['VTextField']['rules']
+  timeRules?: typeof import('vuetify/components')['VTextField']['rules']
+  dense?: boolean
+  pickerOnly?: boolean
+  minDate?: Date | string
+  maxDate?: Date | string
+  readonly?: boolean
+  locale?: 'TH' | 'EN'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dense: false,
+  locale: 'TH',
+  enableSeconds: false,
+  format: 'shortDate',
+  pickerOnly: false,
+  readonly: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const computedDateRules = computed(() => union(props.rules, props.dateRules))
+const computedTimeRules = computed(() => union(props.rules, props.timeRules))
+
+const datePart = ref<string | null>(null)
+const timePart = ref<string | null>(null)
+const pauseEmit = ref(false)
+
+function reset() {
+  datePart.value = null
+  timePart.value = null
+}
+
+watchEffect(() => {
+  if (!pauseEmit.value) {
+    if (datePart.value && timePart.value) {
+      emit('update:modelValue', Datetime().fromString(`${datePart.value}T${timePart.value}`).toISO())
+    }
+    else if (!datePart.value) {
+      emit('update:modelValue', null)
+    }
+  }
+})
+
+watch(() => props.modelValue, () => {
+  pauseEmit.value = true
+  if (!props.modelValue) {
+    reset()
+  }
+  else {
+    const dateTime = Datetime().fromString(props.modelValue)
+    if (dateTime.luxonDateTime.isValid) {
+      datePart.value = dateTime.toFormat('yyyy-MM-dd')
+      timePart.value = dateTime.toFormat('HH:mm:ss')
+    }
+    else {
+      reset()
+    }
+  }
+  pauseEmit.value = false
+}, { immediate: true })
+</script>
+
+<template>
+  <v-container
+    :fluid="true"
+    class="pa-0"
+  >
+    <v-row :dense="dense">
+      <v-col cols="8">
+        <FormDate
+          v-model="datePart"
+          :rules="computedDateRules"
+          :label="label"
+          :format="format"
+          :picker-only="pickerOnly"
+          :readonly="readonly"
+          :min-date="minDate"
+          :max-date="maxDate"
+          v-bind="$attrs"
+        />
+      </v-col>
+      <v-col cols="4">
+        <FormTime
+          v-model="timePart"
+          :rules="computedTimeRules"
+          :label="label"
+          :enable-seconds="enableSeconds"
+          :picker-only="pickerOnly"
+          :readonly="readonly"
+          v-bind="$attrs"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>