@ramathibodi/nuxt-commons 0.1.58 → 0.1.60

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.58",
+  "version": "0.1.60",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/ImportCSV.vue

@@ -102,7 +102,8 @@ const assignNestedValue = (obj: any, keys: string[], value: any) => {
 const parseIfJson = (value: any) => {
   if (typeof value === 'string') {
     try {
-      return JSON.parse(value)
+      let parsedValue = JSON.parse(value)
+      return (parsedValue==value) ? value : parsedValue
     } catch {
       // If parsing fails, return the original value
       return value

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

@@ -1,37 +1,30 @@
 <script lang="ts" setup>
-import Datepicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 import {computed, nextTick, onMounted, ref, watch, watchEffect} from 'vue'
-import {type dateFormat, Datetime} from '../../utils/datetime'
+import {VTextField} from "vuetify/components/VTextField";
+import {isArray, isString} from "lodash-es";
+import {useRules} from "../../composables/utils/validation";
 
 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
+  rules?: typeof VTextField['rules']
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  readonly: false,
-  locale: 'TH',
-  format: 'shortDate',
-  pickerOnly: false,
   flow: () => ['year', 'month', 'calendar'],
 })
 
 const emit = defineEmits(['update:modelValue'])
 
+const modelValue = defineModel<string>()
+
 const dobPrecisionText = computed(() => {
   if (props.dobPrecisionText) return props.dobPrecisionText
   else return {
@@ -61,161 +54,47 @@ const changeDobPrecision = () => {
   }
 }
 
-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
+const computedRules = computed(() => {
+  if (props.rules && isArray(props.rules)) {
+    return props.rules.includes("DateHappen") ? props.rules : props.rules.concat("DateHappen")
+  } else {
+    return ['DateHappen']
   }
+})
 
-  if (!isTextFieldFocused.value) displayedDate.value = formatDate(displayedDate.value)
-}
-
-function formatDate(dateString: string | null) {
-  if (!dateString) return null
-
-  let displayFormat = props.format
+const dobFormat = computed(() => {
+  let displayFormat : string|undefined = undefined
   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)
+  return displayFormat
 })
-
-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"
+  <FormDate
+      v-model="modelValue"
+      :flow="props.flow"
+      :format="dobFormat"
+      :rules="computedRules"
   >
-    <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="{ isReadonly, isDisabled, activatorProps, toggleMenuOpen}">
+      <span
+          style="cursor: pointer;"
+          class="font-weight-medium"
+          @click="(isReadonly.value || isDisabled.value) ? undefined : changeDobPrecision()"
+      >{{ dobPrecisionDisplay }}</span>
+      &nbsp;
+      <v-icon
+          :disabled="isReadonly.value || isDisabled.value"
+          v-bind="activatorProps"
+          @click="toggleMenuOpen('icon')"
       >
-        <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>
+        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>
+  </FormDate>
 </template>

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

@@ -3,9 +3,10 @@ import { ref, watch, watchEffect, nextTick, defineExpose, computed} from 'vue'
 import { VTextField } from 'vuetify/components/VTextField'
 import Datepicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
-import {isArray, isString} from "lodash-es";
+import { isArray, isString } from "lodash-es";
 import { type dateFormat, Datetime } from '../../utils/datetime'
 import { useRules } from "../../composables/utils/validation";
+import { th } from 'date-fns/locale';
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   locale?: 'TH' | 'EN'
@@ -17,6 +18,8 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props
   pickerOnly?: boolean
   flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
   rules?: typeof VTextField['rules']
+
+  defaultDate?: boolean | string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -24,6 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   format: 'shortDate',
   pickerOnly: false,
   flow: () => [],
+
+  defaultDate: false,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -155,8 +160,29 @@ watch(selectedDate, (newValue) => {
   emit('update:modelValue', newValue)
 })
 
-watch(() => props.modelValue, () => {
-  updateDate(props.modelValue || null)
+watch(() => props.modelValue, (newValue,oldValue) => {
+  if (!oldValue && !newValue && props.defaultDate) {
+    if (!oldValue && !newValue && props.defaultDate) {
+      let defaultDate: string | null = null;
+
+      if (props.defaultDate === true) {
+        defaultDate = Datetime().now().toFormat('yyyy-MM-dd', 'EN');
+      } else if (typeof props.defaultDate === 'string' &&/^[+-]?\d+$/.test(props.defaultDate.trim())) {
+        defaultDate = Datetime().now().luxonDateTime
+            .plus({ days: Number(props.defaultDate) })
+            .toFormat('yyyy-MM-dd');
+      } else {
+        const dateTime = Datetime().fromString(props.defaultDate)
+        if (dateTime.luxonDateTime.isValid) defaultDate = dateTime.toFormat('yyyy-MM-dd')
+      }
+
+      updateDate(defaultDate);
+    } else {
+      updateDate(newValue ?? null);
+    }
+  } else {
+    updateDate(props.modelValue || null)
+  }
 }, { immediate: true })
 
 function toggleMenuOpen(trigger: string) {
@@ -196,14 +222,16 @@ defineExpose({
           @click:clear="handleTextFieldClear"
           @click="toggleMenuOpen('textField')"
       >
-        <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 #append="appendProps">
+          <slot name="append" v-bind="appendProps" :toggleMenuOpen="toggleMenuOpen" :activatorProps="activatorProps">
+            <v-icon
+                :disabled="appendProps.isReadonly?.value || appendProps.isDisabled?.value"
+                v-bind="activatorProps"
+                @click="toggleMenuOpen('icon')"
+            >
+              fa:fa-regular fa-calendar
+            </v-icon>
+          </slot>
         </template>
       </v-text-field>
     </template>
@@ -217,7 +245,15 @@ defineExpose({
         auto-apply
         inline
         :locale="locale"
+        :format-locale="(locale=='TH') ? th : undefined"
         @update:model-value="updateDatePicker"
-    />
+    >
+      <template #year="{value}" v-if="locale=='TH'">
+        {{value+543}}
+      </template>
+      <template #year-overlay-value="{value}" v-if="locale=='TH'">
+        {{value+543}}
+      </template>
+    </Datepicker>
   </v-menu>
 </template>

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, computed, watch, watchEffect, nextTick } from 'vue'
-import { union,isBoolean,isArray,isString } from 'lodash-es'
+import {ref, computed, watch, watchEffect, nextTick, useAttrs} from 'vue'
+import {union, isBoolean, isArray, isString, omit} from 'lodash-es'
 import { VTextField } from 'vuetify/components/VTextField'
 import { type dateFormat, Datetime } from '../../utils/datetime'
 import { useRules } from '../../composables/utils/validation'
@@ -39,6 +39,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['update:modelValue'])
 
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  return omit(attrs, ['modelValue', 'onUpdate:modelValue','defaultDate','defaultDateTime','fixedDate'])
+})
+
 const dateRef = ref<VTextField>()
 const timeRef = ref<VTextField>()
 
@@ -109,8 +114,16 @@ function reset() {
     }
   } else {
     if (props.defaultDate) {
-      const dateTime = (isBoolean(props.defaultDate)) ? Datetime().now() : Datetime().fromString(props.defaultDate)
-      if (dateTime.luxonDateTime.isValid) datePart.value = dateTime.toFormat('yyyy-MM-dd')
+      if (props.defaultDate === true) {
+        datePart.value = Datetime().now().toFormat('yyyy-MM-dd', 'EN');
+      } else if (typeof props.defaultDate === 'string' &&/^[+-]?\d+$/.test(props.defaultDate.trim())) {
+        datePart.value = Datetime().now().luxonDateTime
+            .plus({ days: Number(props.defaultDate) })
+            .toFormat('yyyy-MM-dd');
+      } else {
+        const dateTime = Datetime().fromString(props.defaultDate)
+        if (dateTime.luxonDateTime.isValid) datePart.value = dateTime.toFormat('yyyy-MM-dd')
+      }
     }
   }
 }
@@ -175,7 +188,7 @@ watch(() => props.modelValue, () => {
             :disabled="fixedDate"
             :min-date="minDate"
             :max-date="maxDate"
-            v-bind="$attrs"
+            v-bind="plainAttrs"
         />
       </v-col>
       <v-col cols="4">
@@ -187,7 +200,7 @@ watch(() => props.modelValue, () => {
             :enable-seconds="enableSeconds"
             :picker-only="pickerOnly"
             :readonly="readonly"
-            v-bind="$attrs"
+            v-bind="plainAttrs"
         />
       </v-col>
     </v-row>

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

@@ -4,7 +4,6 @@ import {cloneDeep, isEqual} from 'lodash-es'
 import type {FormDialogCallback} from '../../types/formDialog'
 
 interface Props {
-  maxWidth?: number | string
   fullscreen?: boolean
   title?: string
   initialData?: object
@@ -104,7 +103,6 @@ watch(() => isShowing.value, (newValue) => {
   <v-dialog
     v-model="isShowing"
     :fullscreen="fullscreen"
-    :max-width="maxWidth"
     persistent
     scrollable
   >

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

@@ -15,6 +15,10 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   noDataText?: string
   modelValue?: Record<string, any>[]
   modelKey?: string
+  dialogWidth?: string | number
+  dialogMaxWidth?: string | number
+  dialogHeight?: string | number
+  dialogMaxHeight?: string | number
   dialogFullscreen?: boolean
   initialData?: Record<string, any>
   toolbarColor?: string
@@ -327,6 +331,10 @@ defineExpose({
               @update="updateItem"
               @afterLeave="emit('close:dialog')"
               :saveAndStay="saveAndStay"
+              :width="dialogWidth"
+              :height="dialogHeight"
+              :max-width="dialogMaxWidth"
+              :max-height="dialogMaxHeight"
               v-if="!props.inputPadOnly"
           >
             <template #default="slotData">

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

@@ -1,96 +1,54 @@
-<script setup lang="ts">
-import {VSelect} from 'vuetify/components/VSelect'
-import {concat} from 'lodash-es'
-import {computed, ref, watch} from 'vue'
-import {useGraphQl} from '../../composables/graphql'
-import {useAlert} from '../../composables/alert'
+<script lang="ts" setup>
+import { VCombobox } from 'vuetify/components/VCombobox'
+import { withDefaults } from 'vue'
+import { useLookupListMaster, type StaticMasterLikeProps } from '../../composables/lookupListMaster'
 
-interface Props extends /* @vue-ignore */ InstanceType<typeof VSelect['$props']> {
-  modelValue?: string
-  groupKey: string
-  fields?: string[]
-  lang?: 'TH' | 'EN'
-}
-const props = withDefaults(defineProps<Props>(), {
-  lang: 'TH',
-})
-
-const emit = defineEmits(['update:modelValue'])
-const items = ref<Array<any>>([])
-const alert = useAlert()
-const selectedItem = ref<any>()
-function query() {
-  const variables: Record<string, any> = { groupKey: { value: props.groupKey, required: true } }
-  let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
-  if (props.fields) fields = concat(fields, props.fields)
-
-  useGraphQl().queryPromise('masterItemByGroupKey', fields, variables).then((result: any) => {
-    items.value = result
-  }).catch((error) => {
-    alert?.addAlert({
-      message: `${error.message}`,
-      alertType: 'error',
-    })
-  })
-}
-
-watch(() => props.groupKey, () => {
-  query()
-}, { immediate: true })
-
-watch(selectedItem, (newValue) => {
-    emit('update:modelValue', newValue.itemCode)
-})
+interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {}
 
-watch(
-    () => props.modelValue,
-    (newVal) => {
-      if (newVal && items.value.length > 0) {
-        const found = items.value.find(item => item.itemCode === newVal)
-        if (found) selectedItem.value = found
-      }
-    },
-    { immediate: true }
-)
-
-const itemTitleField = computed(() => {
-  if (props.lang == 'TH') return 'itemValue'
-  else return 'itemValueAlternative'
+const props = withDefaults(defineProps<Props & StaticMasterLikeProps>(), {
+  sortBy: 'itemValue',
+  showCode: false,
+  lang: 'TH',
+  noDataText: 'ไม่พบข้อมูล',
+  waitForFilter: false,
+  cache: false,
 })
 
-query()
+const {
+  computedModelName,
+  computedModelBy,
+  computedFields,
+  itemTitleField,
+  computedNoDataText,
+  computedSortBy,
+  formatItemTitle,
+} = useLookupListMaster(props)
 </script>
 
 <template>
-  <v-select
-    v-model="selectedItem"
-    :item-title="itemTitleField"
-    :items="items"
-    item-value="itemCode"
+  <model-combobox
+      :model-name="computedModelName"
+      :model-by="computedModelBy"
+      :fields="computedFields"
+      :sort-by="computedSortBy"
+      :item-title="itemTitleField"
+      item-value="itemCode"
+      :no-data-text="computedNoDataText"
+      :show-code="props.showCode"
+      :cache="props.cache"
   >
-    <template
-      v-for="(_, name, index) in ($slots as {})"
-      :key="index"
-      #[name]="slotData"
-    >
-      <slot
-        :name="name"
-        v-bind="((slotData || {}) as object)"
-        :operation="operation"
-      />
+    <!-- pass-through slots -->
+    <!-- @ts-ignore -->
+    <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
+      <slot :name="name" v-bind="((slotData || {}) as object)" :operation="computedModelName" />
     </template>
-    <template
-      v-if="!$slots.item"
-      #item="{ props, item }"
-    >
-      <v-list-item
-        v-bind="props"
-        :title="item.raw.itemValue"
-      />
-    </template>
-  </v-select>
-</template>
 
-<style scoped>
+    <template v-if="!$slots.item" #item="{ props: itemProps, item }">
+      <v-list-item v-bind="itemProps" :title="formatItemTitle(item)" />
+    </template>
 
-</style>
+    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
+      {{ formatItemTitle(item) }}
+    </template>
+  </model-combobox>
+</template>

package/dist/runtime/components/model/Select.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { VCombobox } from 'vuetify/components/VCombobox'
+import { defineModel, withDefaults } from 'vue'
+import { useLookupList, type StaticLookupProps } from '../../composables/lookupList'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {}
+
+const props = withDefaults(defineProps<Props & StaticLookupProps>(), {
+  fuzzy: false,
+  showCode: false,
+  cache: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:selectedObject', object: any | any[]): void
+}>()
+
+const selectedItems = defineModel<any>()
+
+const {
+  computedItems,
+  computedFilterKeys,
+  computedPlaceholder,
+  computedNoDataText,
+  isLoading,
+  isErrorLoading,
+} = useLookupList(props, emit, selectedItems)
+</script>
+
+<template>
+  <v-combobox
+      v-model="selectedItems"
+      v-bind="$attrs"
+      :items="computedItems"
+      :filter-keys="computedFilterKeys"
+      :item-title="props.itemTitle"
+      :item-value="props.itemValue"
+      :loading="isLoading"
+      :placeholder="computedPlaceholder"
+      :no-data-text="computedNoDataText"
+      :multiple="props.multiple"
+      :return-object="false"
+  >
+    <!-- passthrough slots -->
+    <!-- @ts-ignore -->
+    <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
+      <slot :name="name" v-bind="((slotData || {}) as object)" />
+    </template>
+
+    <template v-if="!$slots.item" #item="{ props: itemProps, item }">
+      <v-list-item v-bind="itemProps" :title="(props.showCode ? item.value + '-' : '') + item.title" />
+    </template>
+
+    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
+      {{ item.value + '-' + item.title }}
+    </template>
+
+    <template v-if="isErrorLoading" #append>
+      <v-icon color="error">mdi mdi-alert</v-icon>
+    </template>
+  </v-combobox>
+</template>

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

@@ -16,6 +16,10 @@ defineOptions({
 interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
   title: string
   noDataText?: string
+  dialogWidth?: string | number
+  dialogMaxWidth?: string | number
+  dialogHeight?: string | number
+  dialogMaxHeight?: string | number
   dialogFullscreen?: boolean
   initialData?: Record<string, any>
   toolbarColor?: string
@@ -302,6 +306,10 @@ defineExpose({ reload,operation })
       @afterLeave="emit('close:dialog')"
       :saveAndStay="saveAndStay"
       :readonly="isDialogReadonly"
+      :width="dialogWidth"
+      :height="dialogHeight"
+      :max-width="dialogMaxWidth"
+      :max-height="dialogMaxHeight"
     >
       <template #default="slotData">
         <slot

package/dist/runtime/composables/lookupList.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-export interface LookupProps {
+export interface StaticLookupProps {
     fuzzy?: boolean;
     sortBy?: string | string[];
     showCode?: boolean;
@@ -9,16 +9,18 @@ export interface LookupProps {
     itemValue: string;
     fields?: Array<string | object>;
     cache?: boolean | number;
+    filterKeys?: string | string[];
+    noDataText?: string;
+    placeholder?: string;
+    multiple?: boolean;
+}
+export interface LookupProps extends StaticLookupProps {
     serverSearch?: boolean;
     serverSearchKey?: string;
     searchSearchSort?: boolean;
     serverSearchDebounce?: number;
     serverSearchText?: string;
     serverSearchLoadingText?: string;
-    filterKeys?: string | string[];
-    noDataText?: string;
-    placeholder?: string;
-    multiple?: boolean;
     modelSelectedItem?: string;
     modelSelectedItemBy?: Record<string, any>;
     modelSelectedItemKey?: string;

package/dist/runtime/composables/lookupList.js

@@ -128,7 +128,7 @@ export function useLookupList(props, emit, selectedItems) {
     }
     emit("update:selectedObject", props.multiple ? selectedItemsObject.value : selectedItemsObject.value[0]);
   }
-  watch(
+  watchDebounced(
     () => [
       props.modelName,
       props.serverSearch,
@@ -138,7 +138,7 @@ export function useLookupList(props, emit, selectedItems) {
       queryFields.value
     ],
     () => loadItems(),
-    { immediate: true, deep: true }
+    { immediate: true, deep: true, debounce: 30, maxWait: 200 }
   );
   watchDebounced(
     searchData,

package/dist/runtime/composables/lookupListMaster.d.ts

@@ -1,6 +1,6 @@
 export type Lang = 'TH' | 'EN';
 export type MasterSortBy = 'itemCode' | 'itemValue';
-export interface MasterLikeProps {
+export interface StaticMasterLikeProps {
     sortBy?: MasterSortBy;
     showCode?: boolean;
     groupKey: string;
@@ -11,9 +11,11 @@ export interface MasterLikeProps {
     filterText?: string;
     waitForFilter?: boolean;
     waitForFilterText?: string;
-    meilisearch?: boolean;
     cache?: boolean | number;
 }
+export interface MasterLikeProps extends StaticMasterLikeProps {
+    meilisearch?: boolean;
+}
 export declare function useLookupListMaster(props: MasterLikeProps): {
     computedModelName: import("vue").ComputedRef<string>;
     computedModelBy: import("vue").ComputedRef<Record<string, any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",