@ramathibodi/nuxt-commons 0.1.44 → 0.1.46

package/dist/module.d.mts

@@ -4,4 +4,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -4,4 +4,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -4,9 +4,9 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.44",
+  "version": "0.1.46",
   "builder": {
-    "@nuxt/module-builder": "0.8.3",
+    "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"
   }
 }

package/dist/runtime/components/ExportCSV.vue

@@ -8,11 +8,13 @@ interface ExportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['
   fileName?: string
   sheetName?: string
   modelValue?: object[]
+  stringFields?: Array<string>
 }
 
 const props = withDefaults(defineProps<ExportButtonProps>(), {
   fileName: 'download',
   sheetName: 'Sheet1',
+  stringFields: ()=>[],
 })
 
 const alert = useAlert()
@@ -63,7 +65,7 @@ function flattenObject(obj: any, parentKey = '', separator = '.') {
     const newKey = parentKey ? `${parentKey}${separator}${key}` : key
     const value = obj[key]
 
-    if (value && typeof value === 'object' && !Array.isArray(value)) {
+    if (value && typeof value === 'object' && !Array.isArray(value) && !props.stringFields.includes(newKey)) {
       Object.assign(acc, flattenObject(value, newKey, separator))
     } else {
       acc[newKey] = typeof value === 'object' ? JSON.stringify(value) : value

package/dist/runtime/components/ImportCSV.vue

@@ -2,6 +2,15 @@
 import * as XLSX from 'xlsx'
 import { ref } from 'vue'
 import { useAlert } from '../composables/alert'
+import { VBtn } from 'vuetify/components/VBtn'
+
+interface ImportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
+  stringFields?: Array<string>
+}
+
+const props = withDefaults(defineProps<ImportButtonProps>(), {
+  stringFields: ()=>[],
+})
 
 const alert = useAlert()
 const emit = defineEmits<{
@@ -59,7 +68,8 @@ const parseAndAggregateColumns = (items: any[]) => {
         assignNestedValue(aggregatedItem[rootKey], subKeys, parseIfJson(item[key]))
       } else {
         // Directly assign root-level properties
-        aggregatedItem[key] = parseIfJson(item[key])
+        if (props.stringFields.includes(key)) aggregatedItem[key] = item[key]
+        else aggregatedItem[key] = parseIfJson(item[key])
       }
     }
 

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

@@ -59,7 +59,6 @@ watch(props.modelValue, () => {
 </script>
 
 <template>
-  <v-container fluid>
     <label class="text-body-1 opacity-60">{{props.label}}</label>
     <div :class="`d-flex ${inline ? 'flex-row':'flex-column'}`">
       <v-checkbox v-for="item in computeItems"
@@ -83,7 +82,6 @@ watch(props.modelValue, () => {
     <label class="text-error text-subtitle-2 ml-1">
       {{computedRules}}
     </label>
-  </v-container>
 
 </template>
 

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

@@ -6,7 +6,6 @@ import '@vuepic/vue-datepicker/dist/main.css'
 import {isArray, isString} from "lodash-es";
 import { type dateFormat, Datetime } from '../../utils/datetime'
 import { useRules } from "../../composables/utils/validation";
-import {VInput} from "vuetify/components/VInput";
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   locale?: 'TH' | 'EN'
@@ -180,50 +179,45 @@ defineExpose({
 </script>
 
 <template>
-  <v-input v-model="displayedDate" v-bind="$attrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
-      <v-menu
-          v-model="isMenuOpen"
-          :open-on-click="false"
+  <v-menu
+      v-model="isMenuOpen"
+      :open-on-click="false"
+  >
+    <template #activator="{ props: activatorProps }">
+      <v-text-field
+          ref="textFieldRef"
+          v-model="displayedDate"
+          :rules="computedRules"
+          v-bind="$attrs"
+          @focus="handleTextFieldFocus"
+          @blur="handleTextFieldBlur"
+          @keydown="handleTextFieldInput"
+          @keyup.enter="handleTextFieldEnterKey"
+          @click:clear="handleTextFieldClear"
+          @click="toggleMenuOpen('textField')"
       >
-        <template #activator="{ props: activatorProps }">
-            <v-text-field
-                ref="textFieldRef"
-                v-model="displayedDate"
-                :rules="computedRules"
-                v-bind="$attrs"
-                @focus="handleTextFieldFocus"
-                @blur="handleTextFieldBlur"
-                @keydown="handleTextFieldInput"
-                @keyup.enter="handleTextFieldEnterKey"
-                @click:clear="handleTextFieldClear"
-                @click="toggleMenuOpen('textField')"
-            >
-              <template #append-inner>
-                <v-icon v-if="!isReadonly.value"
-                    v-bind="activatorProps"
-                    @click="toggleMenuOpen('icon')"
-                >
-                  fa:fa-regular fa-calendar
-                </v-icon>
-              </template>
-            </v-text-field>
+        <template #append="{ isReadonly, isDisabled }">
+          <v-icon
+              :disabled="isReadonly.value || isDisabled.value"
+              v-bind="activatorProps"
+              @click="toggleMenuOpen('icon')"
+          >
+            fa:fa-regular fa-calendar
+          </v-icon>
         </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>
+      </v-text-field>
     </template>
-
-  </v-input>
-
-</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

@@ -4,7 +4,6 @@ import { union,isBoolean,isArray,isString } from 'lodash-es'
 import { VTextField } from 'vuetify/components/VTextField'
 import { type dateFormat, Datetime } from '../../utils/datetime'
 import { useRules } from '../../composables/utils/validation'
-import {VInput} from "vuetify/components/VInput";
 
 interface Props {
   modelValue?: string | null
@@ -97,7 +96,7 @@ const computedTimeRules = computed(() => union(computedRules.value, props.timeRu
 
 const datePart = ref<string | null>(null)
 const timePart = ref<string | null>(null)
-const pauseEmit = ref(false)
+const pauseEmit = ref(true)
 
 function reset() {
   datePart.value = null
@@ -159,43 +158,38 @@ watch(() => props.modelValue, () => {
 </script>
 
 <template>
-  <v-input v-model="datePart" v-bind="$attrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
-      <v-container
-          :fluid="true"
-          class="pa-0"
-      >
-        <v-row :dense="dense">
-          <v-col cols="8">
-            <FormDate
-                v-model="datePart"
-                ref="dateRef"
-                :rules="computedDateRules"
-                :label="label"
-                :format="format"
-                :picker-only="pickerOnly"
-                :readonly="isReadonly.value"
-                :disabled="fixedDate"
-                :min-date="minDate"
-                :max-date="maxDate"
-                v-bind="$attrs"
-            />
-          </v-col>
-          <v-col cols="4">
-            <FormTime
-                v-model="timePart"
-                ref="timeRef"
-                :rules="computedTimeRules"
-                :label="label"
-                :enable-seconds="enableSeconds"
-                :picker-only="pickerOnly"
-                :readonly="isReadonly.value"
-                v-bind="$attrs"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-    </template>
-  </v-input>
-
+  <v-container
+      :fluid="true"
+      class="pa-0"
+  >
+    <v-row :dense="dense">
+      <v-col cols="8">
+        <FormDate
+            v-model="datePart"
+            ref="dateRef"
+            :rules="computedDateRules"
+            :label="label"
+            :format="format"
+            :picker-only="pickerOnly"
+            :readonly="readonly"
+            :disabled="fixedDate"
+            :min-date="minDate"
+            :max-date="maxDate"
+            v-bind="$attrs"
+        />
+      </v-col>
+      <v-col cols="4">
+        <FormTime
+            v-model="timePart"
+            ref="timeRef"
+            :rules="computedTimeRules"
+            :label="label"
+            :enable-seconds="enableSeconds"
+            :picker-only="pickerOnly"
+            :readonly="readonly"
+            v-bind="$attrs"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>

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

@@ -11,24 +11,30 @@ interface Props {
   formData?: object
   saveCaption?: string
   cancelCaption?: string
+  closeCaption?: string
+  saveAndStay?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   saveCaption: 'บันทึก',
   cancelCaption: 'ยกเลิก',
+  closeCaption: 'ปิด',
+  saveAndStay: false,
 })
 
 const isShowing = defineModel<boolean>({ default: false })
 const isSaving = ref<boolean>(false)
+const isSavedAndStay = ref<boolean>(false)
 const formPadRef = ref()
 const formData = ref<object>({})
+const formDataOriginalValue = ref<object>()
 
 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), (props.saveAndStay) ? stayCallback : callback)
   }
 }
 
@@ -46,12 +52,26 @@ const callback: FormDialogCallback = {
   },
 }
 
+const stayCallback: FormDialogCallback = {
+  done: function () {
+    isSaving.value = false
+    isSavedAndStay.value = true
+  },
+  error: function () {
+    isSaving.value = false
+  },
+  setData: function (item: object) {
+    formData.value = cloneDeep(item)
+    formDataOriginalValue.value = cloneDeep(item)
+  }
+}
+
 const isDataChange = computed(() => {
-  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, props.formData))
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formDataOriginalValue.value))
 })
 
 const isCreating = computed(() => {
-  return !props.formData
+  return !props.formData && !isSavedAndStay.value
 })
 
 const createOriginalValue = computed(() => {
@@ -61,12 +81,16 @@ const createOriginalValue = computed(() => {
 const loadFormData = () => {
   if (props.formData) {
     formData.value = cloneDeep(props.formData)
+    formDataOriginalValue.value = cloneDeep(props.formData)
   }
   else {
     formData.value = Object.assign({}, props.initialData)
   }
+  isSavedAndStay.value = false
 }
 
+const operation = ref({ isDataChange, isCreating, isSaving, save, cancel })
+
 watchEffect(loadFormData)
 
 watch(() => isShowing.value, (newValue) => {
@@ -85,7 +109,7 @@ watch(() => isShowing.value, (newValue) => {
     <VCard>
       <VToolbar>
         <VToolbarTitle>
-          <slot name="title">
+          <slot name="title" :operation="operation">
             {{ (isCreating) ? "New" : "Edit" }} {{ title }}
           </slot>
         </VToolbarTitle>
@@ -113,24 +137,26 @@ watch(() => isShowing.value, (newValue) => {
         </form-pad>
       </VCardText>
       <VCardActions>
-        <VSpacer />
-        <VBtn
-          color="primary"
-          variant="flat"
-          :loading="isSaving"
-          :disabled="!isDataChange"
-          @click="save"
-        >
-          {{ saveCaption }}
-        </VBtn>
-        <VBtn
-          color="error"
-          variant="flat"
-          :disabled="isSaving"
-          @click="cancel"
-        >
-          {{ cancelCaption }}
-        </VBtn>
+        <slot name="action" :operation="operation">
+          <VSpacer />
+          <VBtn
+              color="primary"
+              variant="flat"
+              :loading="isSaving"
+              :disabled="!isDataChange"
+              @click="save"
+          >
+            {{ saveCaption }}
+          </VBtn>
+          <VBtn
+              color="error"
+              variant="flat"
+              :disabled="isSaving"
+              @click="cancel"
+          >
+            {{ (!isDataChange) ? closeCaption : cancelCaption }}
+          </VBtn>
+        </slot>
       </VCardActions>
     </VCard>
   </v-dialog>

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

@@ -23,6 +23,8 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   searchable?: boolean
   inputPad?: boolean
   inputPadOnly?: boolean
+  saveAndStay?: boolean
+  stringFields?: Array<string>
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -36,6 +38,8 @@ const props = withDefaults(defineProps<Props>(), {
   searchable: true,
   inputPad: false,
   inputPadOnly: false,
+  saveAndStay: false,
+  stringFields: ()=>[],
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -85,6 +89,7 @@ function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
 
   items.value.push(item)
 
+  if (callback && callback.setData) callback.setData(item)
   if (callback) callback.done()
 }
 
@@ -102,6 +107,7 @@ function updateItem(newItem: Record<string, any>, callback?: FormDialogCallback)
     items.value[index] = newItem
   }
 
+  if (callback && callback.setData) callback.setData(newItem)
   if (callback) callback.done()
 }
 
@@ -238,6 +244,7 @@ defineExpose({
                     variant="flat"
                     @import="importItems"
                     :color="toolbarColor"
+                    :stringFields="props.stringFields"
                 />
                 <ExportCSV
                     v-if="props.exportable && items.length && !(isReadonly.value || isDisabled.value)"
@@ -246,6 +253,7 @@ defineExpose({
                     :file-name="title"
                     :model-value="items"
                     :color="toolbarColor"
+                    :stringFields="props.stringFields"
                 />
                 <VBtn
                     v-if="props.insertable && !props.inputPadOnly && !(isReadonly.value || isDisabled.value)"
@@ -313,6 +321,7 @@ defineExpose({
               :form-data="currentItem"
               @create="createItem"
               @update="updateItem"
+              :saveAndStay="saveAndStay"
               v-if="!props.inputPadOnly"
           >
             <template #default="slotData">
@@ -321,6 +330,18 @@ defineExpose({
                   v-bind="slotData"
               />
             </template>
+            <template #title="slotData">
+              <slot
+                  name="formTitle"
+                  v-bind="slotData"
+              />
+            </template>
+            <template #action="slotData">
+              <slot
+                  name="formAction"
+                  v-bind="slotData"
+              />
+            </template>
           </FormDialog>
         </v-card>
         <slot name="inputPad" :operation="operation" :isReadonly="isReadonly" :isDisabled="isDisabled">

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

@@ -4,7 +4,6 @@ import { VTextField } from 'vuetify/components/VTextField'
 import Datepicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 import { Datetime } from '../../utils/datetime'
-import {VInput} from "vuetify/components/VInput";
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   enableSeconds?: boolean
@@ -123,49 +122,45 @@ defineExpose({
 </script>
 
 <template>
-  <v-input v-model="displayedDate" v-bind="$attrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
-      <v-menu
-          v-model="isMenuOpen"
-          :close-on-content-click="false"
-          :open-on-click="false"
+  <v-menu
+      v-model="isMenuOpen"
+      :close-on-content-click="false"
+      :open-on-click="false"
+  >
+    <template #activator="{ props }">
+      <v-text-field
+          ref="textFieldRef"
+          v-model="tempTime"
+          v-bind="$attrs"
+          @focus="onTextFieldFocus"
+          @blur="onTextFieldBlur"
+          @keydown="onTextFieldTyped"
+          @keyup.enter="onTextFieldEnterKey"
+          @click:clear="onTextFieldClear"
+          @click="toggleMenuOpen('textField')"
       >
-        <template #activator="{ props }">
-          <v-text-field
-              ref="textFieldRef"
-              v-model="tempTime"
-              v-bind="$attrs"
-              @focus="onTextFieldFocus"
-              @blur="onTextFieldBlur"
-              @keydown="onTextFieldTyped"
-              @keyup.enter="onTextFieldEnterKey"
-              @click:clear="onTextFieldClear"
-              @click="toggleMenuOpen('textField')"
+        <template #append="{ isReadonly, isDisabled }">
+          <v-icon
+              :disabled="isReadonly.value || isDisabled.value"
+              v-bind="props"
+              @click="toggleMenuOpen('icon')"
           >
-            <template #append-inner>
-              <v-icon v-if="!isReadonly.value"
-                  v-bind="props"
-                  @click="toggleMenuOpen('icon')"
-              >
-                fa:fa-regular fa-clock
-              </v-icon>
-            </template>
-          </v-text-field>
+            fa:fa-regular fa-clock
+          </v-icon>
         </template>
-        <Datepicker
-            v-model="time"
-            model-type="HH:mm:ss"
-            :enable-seconds="enableSeconds"
-            minutes-grid-increment="1"
-            time-picker
-            auto-apply
-            :close-on-auto-apply="false"
-            inline
-            :locale="locale"
-            @update:model-value="setDatePicker"
-        />
-      </v-menu>
+      </v-text-field>
     </template>
-  </v-input>
-
-</template>
+    <Datepicker
+        v-model="time"
+        model-type="HH:mm:ss"
+        :enable-seconds="enableSeconds"
+        minutes-grid-increment="1"
+        time-picker
+        auto-apply
+        :close-on-auto-apply="false"
+        inline
+        :locale="locale"
+        @update:model-value="setDatePicker"
+    />
+  </v-menu>
+</template>

package/dist/runtime/components/label/Field.vue

@@ -7,6 +7,7 @@ interface Props {
   horizontal?: boolean;
   size?: 'large' | 'medium';
   truncate?: boolean;
+  notFoundText?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,6 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
   horizontal: false,
   size: 'large',
   truncate: false,
+  notFoundText : '-'
 });
 
 const valueText = ref<HTMLElement | null>(null);
@@ -27,6 +29,9 @@ const setTruncate = (event: Event) => {
   const target = event.target as HTMLElement;
   isTooltip.value = target.offsetWidth < target.scrollWidth;
 };
+const valueData = computed(()=>{
+  return (props.value) ? props.value : props.notFoundText
+})
 
 </script>
 
@@ -41,8 +46,8 @@ const setTruncate = (event: Event) => {
       <slot name="label">{{ props.label }}:</slot>
     </div>
     <div :class="`ml-1 ${calTruncate}`" ref="valueText">
-      <slot name="value">
-        <div v-if="!props.truncate">{{ props.value }}</div>
+      <slot name="value" :value="valueData">
+        <div v-if="!props.truncate">{{ valueData }}</div>
         <div
             v-else
             @mouseover="setTruncate"
@@ -54,10 +59,10 @@ const setTruncate = (event: Event) => {
                   class="text-truncate"
                   v-bind="isTooltip ? props : ''"
               >
-                {{ value }}
+                {{ valueData }}
               </div>
             </template>
-            <span>{{ value }}</span>
+            <span>{{ valueData }}</span>
           </v-tooltip>
         </div>
       </slot>
@@ -70,8 +75,8 @@ const setTruncate = (event: Event) => {
     </VCardSubtitle>
     <VCardText :class="`pa-0 mb-2 ${calSize}`">
       <div :class="calTruncate" ref="valueText">
-        <slot name="value">
-          <div v-if="!props.truncate">{{ props.value }}</div>
+        <slot name="value" :value="valueData">
+          <div v-if="!props.truncate">{{ valueData }}</div>
           <div
               v-else
               @mouseover="setTruncate"
@@ -83,10 +88,10 @@ const setTruncate = (event: Event) => {
                     class="text-truncate"
                     v-bind="isTooltip ? props : ''"
                 >
-                  {{ value }}
+                  {{ valueData }}
                 </div>
               </template>
-              <span>{{ value }}</span>
+              <span>{{ valueData }}</span>
             </v-tooltip>
           </div>
         </slot>