@ramathibodi/nuxt-commons 0.1.12 → 0.1.14

package/dist/module.json

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

package/dist/runtime/components/ExportCSV.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { ref, withDefaults } from 'vue'
+import {ref, withDefaults} from 'vue'
 import * as XLSX from 'xlsx'
-import { VBtn } from 'vuetify/components/VBtn'
-import { useAlert } from '../composables/alert'
+import {VBtn} from 'vuetify/components/VBtn'
+import {useAlert} from '../composables/alert'
 
 interface ExportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
   fileName?: string
@@ -48,7 +48,7 @@ function exportFile() {
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
       />
     </template>
   </VBtn>

package/dist/runtime/components/FileBtn.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { VBtn } from 'vuetify/components/VBtn'
+import {ref, watch} from 'vue'
+import {VBtn} from 'vuetify/components/VBtn'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
   accept?: string
@@ -48,7 +48,7 @@ defineExpose({ reset })
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
       />
     </template>
   </v-btn>

package/dist/runtime/components/ImportCSV.vue

@@ -57,7 +57,7 @@ function uploadedFile(files: File[] | File | undefined) {
     >
       <slot
         :name="name"
-        v-bind="(slotData as object)"
+        v-bind="((slotData || {}) as object)"
       />
     </template>
   </FileBtn>

package/dist/runtime/components/TabsGroup.vue

@@ -1,28 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { VTabs } from 'vuetify/components'
+import {ref} from 'vue'
+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 = ref<number | null>(null)
+const currentTab = ref<string | number>()
 </script>
 
 <template>
   <v-card :flat="props.flat">
     <v-tabs
-      v-model="currentTab"
       v-bind="$attrs"
+      v-model="currentTab"
       show-arrows
     >
       <slot name="tabs" />
     </v-tabs>
-    <v-card>
-      <v-window v-model="currentTab">
+    <v-card-text>
+      <v-tabs-window v-model="currentTab">
         <slot name="items" />
-      </v-window>
-    </v-card>
+      </v-tabs-window>
+    </v-card-text>
   </v-card>
 </template>

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

@@ -0,0 +1,216 @@
+<script lang="ts" setup>
+import Datepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import {nextTick, ref, watch, watchEffect,computed} from 'vue'
+import {type dateFormat, Datetime} from '../../utils/datetime'
+
+interface IDobPrecision {
+  yearMonthDay: string
+  yearMonth: string
+  year: string
+}
+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')[]
+  dobPrecisionText?: IDobPrecision
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+  locale: 'TH',
+  format: 'shortDate',
+  pickerOnly: false,
+  flow: () => ['year', 'month', 'calendar'],
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const dobPrecisionText = computed(() => {
+  if (props.dobPrecisionText) return props.dobPrecisionText
+  else return {
+    yearMonthDay: 'YMD',
+    yearMonth: 'YM',
+    year: 'Y',
+  }
+})
+const dobPrecisionChoice = ref<('yearMonthDay' | 'yearMonth' | 'year')[]>(['yearMonthDay', 'yearMonth', 'year'])
+const dobPrecisionSelected = defineModel<'yearMonthDay' | 'yearMonth' | 'year'>('dobPrecision', { default: 'yearMonthDay' })
+
+const dobPrecisionDisplay = computed(() => {
+  return (dobPrecisionSelected.value) ? dobPrecisionText.value[dobPrecisionSelected.value] : dobPrecisionText.value['yearMonthDay']
+})
+
+const changeDobPrecision = () => {
+  if (dobPrecisionSelected.value && dobPrecisionChoice.value.includes(dobPrecisionSelected.value)) {
+    dobPrecisionSelected.value = dobPrecisionChoice.value[(dobPrecisionChoice.value.indexOf(dobPrecisionSelected.value) + 1) % dobPrecisionChoice.value.length]
+  }
+  else {
+    dobPrecisionSelected.value = dobPrecisionChoice.value[0]
+  }
+}
+
+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 {
+    if (dobPrecisionSelected.value=="yearMonth") {
+      dateTime.luxonDateTime = dateTime.luxonDateTime.startOf('month')
+    }
+    if (dobPrecisionSelected.value=="year") {
+      dateTime.luxonDateTime = dateTime.luxonDateTime.startOf('year')
+    }
+    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
+
+  let displayFormat = props.format
+  if (dobPrecisionSelected.value=="yearMonth") {
+    displayFormat = "MMM yyyy"
+  }
+  if (dobPrecisionSelected.value=="year") {
+    displayFormat = "yyyy"
+  }
+
+  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
+  return dateTime.toFormat(displayFormat, props.locale)
+}
+
+function handleTextFieldClear() {
+  resetDatePicker()
+}
+
+function resetDatePicker() {
+  selectedDate.value = null
+  displayedDate.value = null
+}
+
+watchEffect(() => {
+  if (!isTextFieldFocused.value && selectedDate.value) {
+    displayedDate.value = formatDate(selectedDate.value)
+  }
+  else {
+    displayedDate.value = selectedDate.value
+  }
+})
+
+watch(selectedDate, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+watch(() => props.modelValue, () => {
+  updateDate(props.modelValue || null)
+}, { immediate: true })
+
+watch(dobPrecisionSelected,()=>{
+  updateDate(selectedDate.value)
+})
+
+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>
+          <span
+            style="cursor: pointer;"
+            class="font-weight-medium"
+            @click="changeDobPrecision"
+          >{{ dobPrecisionDisplay }}</span>
+          &nbsp;
+          <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/CodeEditor.vue

@@ -30,8 +30,8 @@ const model = defineModel<string>()
 
 <template>
   <codemirror
-      v-model="model"
-      :extensions="extensions"
-      :style="{ height: height, minHeight: minHeight }"
+    v-model="model"
+    :extensions="extensions"
+    :style="{ height: height, minHeight: minHeight }"
   />
 </template>

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

@@ -28,7 +28,7 @@ const emit = defineEmits(['create', 'update'])
 function save() {
   if (formPadRef.value.isValid) {
     isSaving.value = true
-    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value) , callback)
+    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value), callback)
   }
 }
 
@@ -61,7 +61,8 @@ const createOriginalValue = computed(() => {
 const loadFormData = () => {
   if (props.formData) {
     formData.value = cloneDeep(props.formData)
-  } else {
+  }
+  else {
     formData.value = Object.assign({}, props.initialData)
   }
 }

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

@@ -1,10 +1,21 @@
 <script lang="ts" setup>
 /* eslint-disable @typescript-eslint/no-explicit-any,import/no-self-import */
-import { compile, defineComponent, inject, onMounted, ref, shallowRef, watch, computed, withDefaults, defineOptions } from 'vue'
-import { isObject } from 'lodash-es'
-import { watchDebounced } from '@vueuse/core'
-import { useRules } from '../../composables/utils/validation'
-import { useDocumentTemplate } from '../../composables/document/template'
+import {
+  compile,
+  computed,
+  defineComponent,
+  defineOptions,
+  inject,
+  onMounted,
+  ref,
+  shallowRef,
+  watch,
+  withDefaults
+} from 'vue'
+import {isObject} from 'lodash-es'
+import {watchDebounced} from '@vueuse/core'
+import {useRules} from '../../composables/utils/validation'
+import {useDocumentTemplate} from '../../composables/document/template'
 import FormPad from './Pad.vue'
 
 defineOptions({
@@ -18,18 +29,21 @@ interface Props {
   disabled?: boolean
   readonly?: boolean
   isolated?: boolean
+  decoration?: object
 }
 
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   readonly: false,
   isolated: false,
+  decoration: () => { return {} },
 })
 
 const emit = defineEmits(['update:modelValue'])
 
 const disabled = ref(props.disabled)
 const readonly = ref(props.readonly)
+const decoration = ref(props.decoration)
 
 watch(() => props.disabled, (newValue) => {
   disabled.value = newValue
@@ -39,6 +53,10 @@ watch(() => props.readonly, (newValue) => {
   readonly.value = newValue
 })
 
+watch(() => props.decoration, (newValue) => {
+  decoration.value = newValue
+}, { deep: true })
+
 const { rules } = useRules()
 
 const trimmedTemplate = ref<string>('')
@@ -73,7 +91,7 @@ function buildFormComponent() {
   const originalConsoleError = console.warn
   console.warn = (error) => { throw new Error(error) } // eslint-disable-line
   try {
-    const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :disabled="disabled" :readonly="readonly" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided }">' + trimmedTemplate.value + '</template></form-pad>'
+    const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :disabled="disabled" :readonly="readonly" :decoration="decoration" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided,decoration }">' + trimmedTemplate.value + '</template></form-pad>'
     compile(componentTemplate)
     formComponent.value = defineComponent({
       components: { FormPad },
@@ -81,6 +99,7 @@ function buildFormComponent() {
         modelValue: { type: Object, default: undefined },
         disabled: { type: Boolean, default: false },
         readonly: { type: Boolean, default: false },
+        decoration: { type: Object, default: () => { return {} } },
         isolated: { type: Boolean, default: false },
       },
       emits: ['update:modelValue'],
@@ -116,17 +135,17 @@ function buildFormComponent() {
 
 function reset() {
   if (!formInjected.value) formPad.value.reset()
-  else formInjected.value.items.forEach((item: any)=>item.reset())
+  else formInjected.value.items.forEach((item: any) => item.reset())
 }
 
 function validate() {
   if (!formInjected.value) formPad.value.validate()
-  else formInjected.value.items.forEach((item: any)=>item.validate())
+  else formInjected.value.items.forEach((item: any) => item.validate())
 }
 
 function resetValidate() {
   if (!formInjected.value) formPad.value.resetValidate()
-  else formInjected.value.items.forEach((item: any)=>item.resetValidate())
+  else formInjected.value.items.forEach((item: any) => item.resetValidate())
 }
 
 const isValid = computed(() => {
@@ -170,6 +189,7 @@ defineExpose({
         :is-disabled="disabled"
         :is-readonly="readonly"
         :rules="rules"
+        :decoration="decoration"
       />
     </template>
   </v-form>
@@ -180,6 +200,7 @@ defineExpose({
       :is-disabled="disabled"
       :is-readonly="readonly"
       :rules="rules"
+      :decoration="decoration"
     />
   </template>
   <component
@@ -189,6 +210,7 @@ defineExpose({
     v-model="formData"
     :disabled="disabled"
     :readonly="readonly"
+    :decoration="decoration"
     :isolated="isolated"
     :class="$attrs.class"
   />

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import {VDataTable} from 'vuetify/components/VDataTable'
 import {computed, defineOptions, nextTick, ref, useAttrs, watch} from 'vue'
-import type {FormDialogCallback} from '../../types/formDialog'
 import {omit} from 'lodash-es'
+import type {FormDialogCallback} from '../../types/formDialog'
 
 defineOptions({
   inheritAttrs: false,
@@ -65,7 +65,7 @@ watch(items, (newValue) => {
 }, { deep: true })
 
 function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
-  if (items.value.length>0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
+  if (items.value.length > 0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
   else item[props.modelKey] = 1
 
   items.value.push(item)
@@ -124,14 +124,14 @@ function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallba
   if (callback) callback.done()
 }
 
-const operation = ref({ createItem, updateItem, deleteItem, moveUpItem, moveDownItem })
-
 function openDialog(item?: object) {
   currentItem.value = item
   nextTick(() => {
     isDialogOpen.value = true
   })
 }
+
+const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem })
 </script>
 
 <template>
@@ -205,7 +205,7 @@ function openDialog(item?: object) {
       >
         <slot
           :name="name"
-          v-bind="(slotData as object)"
+          v-bind="((slotData || {}) as object)"
           :operation="operation"
         />
       </template>