@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,79 +1,91 @@
-<script lang="ts" setup>
-import { VCombobox } from 'vuetify/components/VCombobox'
-import { defineModel, withDefaults } from 'vue'
-import { useLookupList, type LookupProps } from '../../composables/lookupList'
-import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {}
-
-const props = withDefaults(defineProps<Props & LookupProps & PersistSlimProps>(), {
-  fuzzy: false,
-  showCode: false,
-  cache: false,
-  serverSearch: false,
-  searchSearchSort: false,
-  serverSearchText: 'Type to search…',
-  serverSearchLoadingText: 'Searching…',
-  serverSearchDebounce: 500,
-
-  statusField: 'statusCode',
-  activeValue: 'active',
-  hideInactiveInList: false,
-  preventSelectingInactive: false,
-})
-
-const emit = defineEmits<{
-  (e: 'update:selectedObject', object: any | any[]): void
-}>()
-
-const selectedItems = defineModel<any>()
-useLocalStorageModel(selectedItems, props)
-
-const {
-  searchData,
-  computedItems,
-  computedFilterKeys,
-  computedPlaceholder,
-  computedNoDataText,
-  isLoading,
-  isErrorLoading,
-  onUpdateModelValue, // ✅ from composable
-} = useLookupList(props as any, emit, selectedItems)
-</script>
-
-<template>
-  <v-combobox
-      :model-value="selectedItems"
-      @update:model-value="onUpdateModelValue"
-      v-model:search="searchData"
-      v-bind="$attrs"
-      :items="computedItems"
-      :filter-keys="computedFilterKeys"
-      :no-filter="props.fuzzy || props.serverSearch"
-      :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>
+<script lang="ts" setup>
+/**
+ * ModelCombobox connects model metadata to reusable selection, labeling, iterator, or table UI patterns.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { VCombobox } from 'vuetify/components/VCombobox'
+import { defineModel, withDefaults } from 'vue'
+import { useLookupList, type LookupProps } from '../../composables/lookupList'
+import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {}
+
+/**
+ * Public props accepted by ModelCombobox.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props & LookupProps & PersistSlimProps>(), {
+  fuzzy: false, // Enables fuzzy matching when filtering local options.
+  showCode: false, // Displays code values alongside labels in option lists.
+  cache: false, // Enables cached requests; number values represent cache TTL in milliseconds.
+  serverSearch: false, // Uses remote search requests instead of local filtering.
+  searchSearchSort: false, // Sorts server-search results based on search relevance.
+  serverSearchText: 'Type to search…', // Placeholder/help text shown before server search starts.
+  serverSearchLoadingText: 'Searching…', // Status text shown while server search request is running.
+  serverSearchDebounce: 500, // Debounce delay in milliseconds before sending server search.
+
+  statusField: 'statusCode', // Field name that indicates active/inactive status in each item.
+  activeValue: 'active', // Value in statusField treated as active/selectable.
+  hideInactiveInList: false, // Hides inactive options from the displayed selection list.
+  preventSelectingInactive: false, // Blocks selecting inactive options even if present in the dataset.
+})
+
+/**
+ * Custom events emitted by ModelCombobox.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits<{
+  (e: 'update:selectedObject', object: any | any[]): void
+}>()
+
+const selectedItems = defineModel<any>()
+useLocalStorageModel(selectedItems, props)
+
+const {
+  searchData,
+  computedItems,
+  computedFilterKeys,
+  computedPlaceholder,
+  computedNoDataText,
+  isLoading,
+  isErrorLoading,
+  onUpdateModelValue, // ✅ from composable
+} = useLookupList(props as any, emit, selectedItems)
+</script>
+
+<template>
+  <v-combobox
+      :model-value="selectedItems"
+      @update:model-value="onUpdateModelValue"
+      v-model:search="searchData"
+      v-bind="$attrs"
+      :items="computedItems"
+      :filter-keys="computedFilterKeys"
+      :no-filter="props.fuzzy || props.serverSearch"
+      :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/Pad.vue

@@ -1,102 +1,114 @@
-<script lang="ts" setup>
-import { computed, useTemplateRef, defineExpose } from 'vue'
-import { type GraphqlModelItemProps, useGraphqlModelItem } from '../../composables/graphqlModelItem'
-import type {FormDialogCallback} from '../../types/formDialog'
-import EditPad from '../form/EditPad.vue'
-import {useDialog} from "../../composables/dialog";
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof EditPad['$props']> {
-  title?: string
-  saveCaption?: string
-  cancelCaption?: string
-}
-
-const props = withDefaults(defineProps<Props & GraphqlModelItemProps>(), {
-  fields: () => ['*'],
-
-  saveCaption: 'บันทึก',
-  cancelCaption: 'ยกเลิก',
-})
-
-const emit = defineEmits(['create', 'update'])
-
-const { item,
-  canCreate, canUpdate,
-  createItem, updateItem,
-  reload, isLoading } = useGraphqlModelItem(props)
-
-const editPad = useTemplateRef<typeof EditPad>("editPadRef")
-
-const canSave = computed<boolean>(() => { return ((canCreate.value && editPad.value?.operation?.isCreating?.value) || canUpdate.value) as boolean})
-
-const operation : any = computed(()=>{
-  return Object.assign({},editPad.value?.operation,{canSave,reload,item})
-})
-
-const onCreateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
-  createItem(item,callback).then(()=>{
-    useDialog().notify({message: "Data created successfully",type: 'success',title:"Success"})
-    emit("create",item,callback)
-  })
-}
-
-const onUpdateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
-  updateItem(item,callback).then(()=>{
-    useDialog().notify({message: "Data updated successfully",type: 'success',title:"Success"})
-    emit("update",item,callback)
-  })
-}
-
-defineExpose({ operation, formPad: editPad.value?.formPad })
-</script>
-
-<template>
-  <FormEditPad v-bind="$attrs" :form-data="item" ref="editPadRef" @create="onCreateItem" @update="onUpdateItem">
-    <template #titleToolbar>
-      <slot name="titleToolbar" :operation="operation">
-        <VToolbarTitle>
-          <slot name="title" :operation="operation">
-            {{ title }}
-            <v-icon
-                size="small"
-                @click="reload"
-            >
-              mdi mdi-refresh
-            </v-icon>
-          </slot>
-        </VToolbarTitle>
-      </slot>
-    </template>
-    <template #action="slotData">
-      <slot name="action" :operation="operation">
-        <VSpacer />
-        <VBtn
-            color="primary"
-            variant="flat"
-            :loading="isLoading"
-            :disabled="!slotData.operation?.isDataChange || !canSave"
-            @click="slotData.operation?.save"
-        >
-          {{ props.saveCaption }}
-        </VBtn>
-        <VBtn
-            color="error"
-            variant="flat"
-            :disabled="isLoading"
-            @click="slotData.operation?.cancel"
-        >
-          {{ props.cancelCaption }}
-        </VBtn>
-      </slot>
-    </template>
-    <template #default="slotData">
-      <slot
-          v-bind="slotData"
-      />
-    </template>
-  </FormEditPad>
-</template>
+<script lang="ts" setup>
+/**
+ * ModelPad connects model metadata to reusable selection, labeling, iterator, or table UI patterns.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { computed, useTemplateRef, defineExpose } from 'vue'
+import { type GraphqlModelItemProps, useGraphqlModelItem } from '../../composables/graphqlModelItem'
+import type {FormDialogCallback} from '../../types/formDialog'
+import EditPad from '../form/EditPad.vue'
+import {useDialog} from "../../composables/dialog";
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof EditPad['$props']> {
+  title?: string // Title text displayed in the component header or dialog.
+  saveCaption?: string // Label text for the save/confirm action button.
+  cancelCaption?: string // Label text for the cancel action button.
+}
+
+/**
+ * Public props accepted by ModelPad.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props & GraphqlModelItemProps>(), {
+  fields: () => ['*'],
+
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
+})
+
+/**
+ * Custom events emitted by ModelPad.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['create', 'update'])
+
+const { item,
+  canCreate, canUpdate,
+  createItem, updateItem,
+  reload, isLoading } = useGraphqlModelItem(props)
+
+const editPad = useTemplateRef<typeof EditPad>("editPadRef")
+
+const canSave = computed<boolean>(() => { return ((canCreate.value && editPad.value?.operation?.isCreating?.value) || canUpdate.value) as boolean})
+
+const operation : any = computed(()=>{
+  return Object.assign({},editPad.value?.operation,{canSave,reload,item})
+})
+
+const onCreateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  createItem(item,callback).then(()=>{
+    useDialog().notify({message: "Data created successfully",type: 'success',title:"Success"})
+    emit("create",item,callback)
+  })
+}
+
+const onUpdateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  updateItem(item,callback).then(()=>{
+    useDialog().notify({message: "Data updated successfully",type: 'success',title:"Success"})
+    emit("update",item,callback)
+  })
+}
+
+defineExpose({ operation, formPad: editPad.value?.formPad })
+</script>
+
+<template>
+  <FormEditPad v-bind="$attrs" :form-data="item" ref="editPadRef" @create="onCreateItem" @update="onUpdateItem">
+    <template #titleToolbar>
+      <slot name="titleToolbar" :operation="operation">
+        <VToolbarTitle>
+          <slot name="title" :operation="operation">
+            {{ title }}
+            <v-icon
+                size="small"
+                @click="reload"
+            >
+              mdi mdi-refresh
+            </v-icon>
+          </slot>
+        </VToolbarTitle>
+      </slot>
+    </template>
+    <template #action="slotData">
+      <slot name="action" :operation="operation">
+        <VSpacer />
+        <VBtn
+            color="primary"
+            variant="flat"
+            :loading="isLoading"
+            :disabled="!slotData.operation?.isDataChange || !canSave"
+            @click="slotData.operation?.save"
+        >
+          {{ props.saveCaption }}
+        </VBtn>
+        <VBtn
+            color="error"
+            variant="flat"
+            :disabled="isLoading"
+            @click="slotData.operation?.cancel"
+        >
+          {{ props.cancelCaption }}
+        </VBtn>
+      </slot>
+    </template>
+    <template #default="slotData">
+      <slot
+          v-bind="slotData"
+      />
+    </template>
+  </FormEditPad>
+</template>

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

@@ -1,73 +1,79 @@
-<script lang="ts" setup>
-import { VCombobox } from 'vuetify/components/VCombobox'
-import { defineModel, withDefaults } from 'vue'
-import { useLookupList, type StaticLookupProps } from '../../composables/lookupList'
-import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {}
-
-const props = withDefaults(defineProps<Props & StaticLookupProps & PersistSlimProps>(), {
-  fuzzy: false,
-  showCode: false,
-  cache: false,
-
-  statusField: 'statusCode',
-  activeValue: 'active',
-  hideInactiveInList: false,
-  preventSelectingInactive: false,
-})
-
-const emit = defineEmits<{
-  (e: 'update:selectedObject', object: any | any[]): void
-}>()
-
-const selectedItems = defineModel<any>()
-useLocalStorageModel(selectedItems, props)
-
-const {
-  computedItems,
-  computedFilterKeys,
-  computedPlaceholder,
-  computedNoDataText,
-  isLoading,
-  isErrorLoading,
-  searchData,
-  onUpdateModelValue, // ✅ from composable
-} = useLookupList(props as any, emit, selectedItems)
-</script>
-
-<template>
-  <v-combobox
-      :model-value="selectedItems"
-      @update:model-value="onUpdateModelValue"
-      v-model:search="searchData"
-      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>
+<script lang="ts" setup>
+/**
+ * ModelSelect connects model metadata to reusable selection, labeling, iterator, or table UI patterns.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { VSelect } from 'vuetify/components/VSelect'
+import { defineModel, withDefaults } from 'vue'
+import { useLookupList, type StaticLookupProps } from '../../composables/lookupList'
+import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VSelect['$props']> {}
+
+/**
+ * Public props accepted by ModelSelect.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props & StaticLookupProps & PersistSlimProps>(), {
+  fuzzy: false, // Enables fuzzy matching when filtering local options.
+  showCode: false, // Displays code values alongside labels in option lists.
+  cache: false, // Enables cached requests; number values represent cache TTL in milliseconds.
+
+  statusField: 'statusCode', // Field name that indicates active/inactive status in each item.
+  activeValue: 'active', // Value in statusField treated as active/selectable.
+  hideInactiveInList: false, // Hides inactive options from the displayed selection list.
+  preventSelectingInactive: false, // Blocks selecting inactive options even if present in the dataset.
+})
+
+/**
+ * Custom events emitted by ModelSelect.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits<{
+  (e: 'update:selectedObject', object: any | any[]): void
+}>()
+
+const selectedItems = defineModel<any>()
+useLocalStorageModel(selectedItems, props)
+
+const {
+  computedItems,
+  computedNoDataText,
+  isLoading,
+  isErrorLoading,
+  onUpdateModelValue,
+} = useLookupList(props as any, emit, selectedItems)
+</script>
+
+<template>
+  <v-select
+      :model-value="selectedItems"
+      @update:model-value="onUpdateModelValue"
+      v-bind="$attrs"
+      :items="computedItems"
+      :item-title="props.itemTitle"
+      :item-value="props.itemValue"
+      :loading="isLoading"
+      :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-select>
 </template>