@ramathibodi/nuxt-commons 0.1.12 → 0.1.13

package/dist/module.json

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

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,199 @@
+<script lang="ts" setup>
+import Datepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import {nextTick, ref, watch, watchEffect} 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 {
+    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>
+          <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>

package/dist/runtime/components/master/Combobox.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { VCombobox } from "vuetify/components/VCombobox";
-import {ref, watch, computed} from "vue";
-import {useAlert} from "../../composables/alert";
-import {concat} from "lodash-es";
-import {useGraphQl} from "../../composables/graphql";
+import {VCombobox} from 'vuetify/components/VCombobox'
+import {computed, ref, watch} from 'vue'
+import {concat} from 'lodash-es'
+import {useAlert} from '../../composables/alert'
+import {useGraphQl} from '../../composables/graphql'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {
   modelValue?: string
@@ -12,8 +12,8 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props'
   lang?: 'TH' | 'EN'
 }
 
-const props = withDefaults(defineProps<Props>(),{
-  lang: 'TH'
+const props = withDefaults(defineProps<Props>(), {
+  lang: 'TH',
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -25,12 +25,12 @@ function query() {
   let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
   if (props.fields) fields = concat(fields, props.fields)
 
-  useGraphQl().queryPromise('masterItemByGroupKey',fields, variables).then((result : any)=>{
+  useGraphQl().queryPromise('masterItemByGroupKey', fields, variables).then((result: any) => {
     items.value = result
-  }).catch((error)=>{
+  }).catch((error) => {
     alert?.addAlert({
-      message : `${error.message}`,
-      alertType:"error"
+      message: `${error.message}`,
+      alertType: 'error',
     })
   })
 }
@@ -53,30 +53,34 @@ query()
 
 <template>
   <v-combobox
-      v-model="selectedItem"
-      :items="items"
-      :item-title="itemTitleField"
-      item-value="itemCode"
+    v-model="selectedItem"
+    :items="items"
+    :item-title="itemTitleField"
+    item-value="itemCode"
   >
     <template
-        v-for="(_, name, index) in ($slots as {})"
-        :key="index"
-        #[name]="slotData"
+      v-for="(_, name, index) in ($slots as {})"
+      :key="index"
+      #[name]="slotData"
     >
       <slot
-          :name="name"
-          v-bind="(slotData as object)"
-          :operation="operation"
+        :name="name"
+        v-bind="(slotData as object)"
+        :operation="operation"
       />
     </template>
     <template
-        v-if="!$slots.item"
-        #item="{ props, item }">
-      <v-list-item v-bind="props" :title="item.raw.itemValue"></v-list-item>
+      v-if="!$slots.item"
+      #item="{ props, item }"
+    >
+      <v-list-item
+        v-bind="props"
+        :title="item.raw.itemValue"
+      />
     </template>
   </v-combobox>
 </template>
 
 <style scoped>
 
-</style>
+</style>

package/dist/runtime/components/master/RadioGroup.vue

@@ -1,68 +1,78 @@
 <script lang="ts" setup>
 import {VRadioGroup} from 'vuetify/components/VRadioGroup'
 import {computed, ref, watch} from 'vue'
-import {useAlert} from "../../composables/alert";
-import {useGraphQl} from "../../composables/graphql";
-import {concat} from "lodash-es";
+import {concat} from 'lodash-es'
+import {useAlert} from '../../composables/alert'
+import {useGraphQl} from '../../composables/graphql'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VRadioGroup['$props']> {
   returnObject?: boolean
   groupKey: string
   modelValue?: any
-  fields?:string[]
+  fields?: string[]
   lang?: 'TH' | 'EN'
 }
 
-const props = withDefaults(defineProps<Props>(),{
-  lang: 'TH'
+const props = withDefaults(defineProps<Props>(), {
+  lang: 'TH',
 })
 const emit = defineEmits(['update:modelValue'])
 const items: any = ref([])
 const value = ref()
 const alert = useAlert()
-const query =  () => {
-  const variables = { groupKey : {
-      name : 'groupKey',
-      type : 'String!',
-      value : props.groupKey
-    } }
-  let fields :any[]= ["itemCode", "itemValue", 'itemValueAlternative']
-  if(props.fields) fields = concat(fields,props.fields);
+const query = () => {
+  const variables = { groupKey: {
+    name: 'groupKey',
+    type: 'String!',
+    value: props.groupKey,
+  } }
+  let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
+  if (props.fields) fields = concat(fields, props.fields)
 
-  useGraphQl().queryPromise('masterItemByGroupKey',fields, variables).then((result : any)=>{
+  useGraphQl().queryPromise('masterItemByGroupKey', fields, variables).then((result: any) => {
     items.value = result
-  }).catch((error)=>{
+  }).catch((error) => {
     alert?.addAlert({
-      message : `${error.message}`,
-      alertType:"error"
+      message: `${error.message}`,
+      alertType: 'error',
     })
   })
-};
-query();
+}
+query()
 
 watch(() => props.modelValue, (newValue) => {
   value.value = props.modelValue
-
-}, {deep: true, immediate: true})
+}, { deep: true, immediate: true })
 
 const itemTitleField = computed(() => {
   if (props.lang == 'TH') return 'itemValue'
   else return 'itemValueAlternative'
 })
 </script>
+
 <template>
-  <v-radio-group v-model="value" v-bind="$attrs" @update:model-value="emit('update:modelValue', value.value)">
+  <v-radio-group
+    v-model="value"
+    v-bind="$attrs"
+    @update:model-value="emit('update:modelValue', value.value)"
+  >
     <template
-        v-for="(_, name, index) in ($slots as {})"
-        :key="index"
-        #[name]="slotData"
+      v-for="(_, name, index) in ($slots as {})"
+      :key="index"
+      #[name]="slotData"
     >
       <slot
-          :name="name"
-          v-bind="(slotData as object)"
-          :operation="operation"
+        :name="name"
+        v-bind="(slotData as object)"
+        :operation="operation"
       />
     </template>
-    <v-radio v-for="i in items" :key="i.itemCode" v-bind="$attrs" :label="i[itemTitleField]" :value="returnObject ? i : i.itemCode"></v-radio>
+    <v-radio
+      v-for="i in items"
+      :key="i.itemCode"
+      v-bind="$attrs"
+      :label="i[itemTitleField]"
+      :value="returnObject ? i : i.itemCode"
+    />
   </v-radio-group>
 </template>