@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,78 +1,90 @@
-<script lang="ts" setup>
-import {VRadioGroup} from 'vuetify/components/VRadioGroup'
-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 VRadioGroup['$props']> {
-  returnObject?: boolean
-  groupKey: string
-  modelValue?: any
-  fields?: string[]
-  lang?: 'TH' | 'EN'
-}
-
-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)
-
-  useGraphQl().queryPromise('masterItemByGroupKey', fields, variables).then((result: any) => {
-    items.value = result
-  }).catch((error) => {
-    alert?.addAlert({
-      message: `${error.message}`,
-      alertType: 'error',
-    })
-  })
-}
-query()
-
-watch(() => props.modelValue, (newValue) => {
-  value.value = props.modelValue
-}, { 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)"
-  >
-    <template
-      v-for="(_, name, index) in ($slots as {})"
-      :key="index"
-      #[name]="slotData"
-    >
-      <slot
-        :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-group>
-</template>
+<script lang="ts" setup>
+/**
+ * MasterRadioGroup renders master-data driven option controls and synchronizes selected values with form models.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {VRadioGroup} from 'vuetify/components/VRadioGroup'
+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 VRadioGroup['$props']> {
+  returnObject?: boolean // Emits the full selected object instead of only primitive value.
+  groupKey: string // Master-data group key used to fetch option items.
+  modelValue?: any // Bound value for v-model synchronization with the parent component.
+  fields?: string[] // Field list/query selection used when fetching model or lookup data.
+  lang?: 'TH' | 'EN' // Language code used when selecting localized option labels.
+}
+
+/**
+ * Public props accepted by MasterRadioGroup.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  lang: 'TH',
+})
+/**
+ * Custom events emitted by MasterRadioGroup.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+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)
+
+  useGraphQl().queryPromise('masterItemByGroupKey', fields, variables).then((result: any) => {
+    items.value = result
+  }).catch((error) => {
+    alert?.addAlert({
+      message: `${error.message}`,
+      alertType: 'error',
+    })
+  })
+}
+query()
+
+watch(() => props.modelValue, (newValue) => {
+  value.value = props.modelValue
+}, { 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)"
+  >
+    <template
+      v-for="(_, name, index) in ($slots as {})"
+      :key="index"
+      #[name]="slotData"
+    >
+      <slot
+        :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-group>
+</template>

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

@@ -1,63 +1,71 @@
-<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 VCombobox['$props']> {}
-
-const props = withDefaults(defineProps<Props & StaticMasterLikeProps>(), {
-  sortBy: 'itemValue',
-  showCode: false,
-  lang: 'TH',
-  noDataText: 'ไม่พบข้อมูล',
-  waitForFilter: false,
-  cache: false,
-
-  statusField: 'statusCode',
-  activeValue: 'active',
-  hideInactiveInList: true,
-  preventSelectingInactive: true,
-})
-
-const {
-  computedModelName,
-  computedModelBy,
-  computedFields,
-  itemTitleField,
-  computedNoDataText,
-  computedSortBy,
-  formatItemTitle,
-} = useLookupListMaster(props)
-</script>
-
-<template>
-  <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"
-      :status-field="props.statusField"
-      :active-value="props.activeValue"
-      :hide-inactive-in-list="props.hideInactiveInList"
-      :prevent-selecting-inactive="props.preventSelectingInactive"
-  >
-    <!-- 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: itemProps, item }">
-      <v-list-item v-bind="itemProps" :title="formatItemTitle(item)" />
-    </template>
-
-    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
-      {{ formatItemTitle(item) }}
-    </template>
-  </model-combobox>
+<script lang="ts" setup>
+/**
+ * MasterSelect renders master-data driven option controls and synchronizes selected values with form models.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { VSelect } from 'vuetify/components/VSelect'
+import { withDefaults } from 'vue'
+import { useLookupListMaster, type StaticMasterLikeProps } from '../../composables/lookupListMaster'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VSelect['$props']> {}
+
+/**
+ * Public props accepted by MasterSelect.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props & StaticMasterLikeProps>(), {
+  sortBy: 'itemValue', // Field used to sort options before rendering.
+  showCode: false, // Displays code values alongside labels in option lists.
+  lang: 'TH', // Language code used when selecting localized option labels.
+  noDataText: 'ไม่พบข้อมูล', // Fallback message shown when there is no data to display.
+  waitForFilter: false, // Delays loading options until the user provides a search/filter value.
+  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: true, // Hides inactive options from the displayed selection list.
+  preventSelectingInactive: true, // Blocks selecting inactive options even if present in the dataset.
+})
+
+const {
+  computedModelName,
+  computedModelBy,
+  computedFields,
+  itemTitleField,
+  computedNoDataText,
+  computedSortBy,
+  formatItemTitle,
+} = useLookupListMaster(props)
+</script>
+
+<template>
+  <model-select
+      :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"
+      :status-field="props.statusField"
+      :active-value="props.activeValue"
+      :hide-inactive-in-list="props.hideInactiveInList"
+      :prevent-selecting-inactive="props.preventSelectingInactive"
+  >
+    <!-- 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: itemProps, item }">
+      <v-list-item v-bind="itemProps" :title="formatItemTitle(item)" />
+    </template>
+
+    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
+      {{ formatItemTitle(item) }}
+    </template>
+  </model-select>
 </template>

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

@@ -1,47 +1,55 @@
-<script lang="ts" setup>
-import {computed} from "vue";
-
-interface Props {
-  groupKey?: string | null
-  itemCode?: string | null
-  locale?: string
-  cache?: boolean | number
-
-  notFoundText?: string
-  placeholder?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  locale: 'TH',
-  cache: false,
-})
-
-const computedNotFoundText =  computed(()=>{
-  return props.notFoundText || `${props.itemCode}`
-})
-
-const computedPlaceholder = computed(()=>{
-  return props.placeholder || `${props.groupKey}(${props.itemCode})`
-})
-
-const computedItemTitle = computed(()=>{
-  return (props.locale == 'TH')
-      ? "itemValue"
-      :  (result : Record<string,any>) => result["itemValueAlternative"] || result["itemValue"]
-})
-</script>
-
-<template>
-  <model-label
-      model-name="masterItemByGroupKeyAndItemCode"
-      :model-by="{groupKey: props.groupKey, itemCode: props.itemCode}"
-      :item-title="computedItemTitle"
-      :not-found-text="computedNotFoundText"
-      :placeholder="computedPlaceholder"
-      :cache="props.cache"
-  >
-    <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
-      <slot :name="name" v-bind="((slotData || {}) as object)" />
-    </template>
-  </model-label>
-</template>
+<script lang="ts" setup>
+/**
+ * MasterLabel renders master-data driven option controls and synchronizes selected values with form models.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {computed} from "vue";
+
+interface Props {
+  groupKey?: string | null // Master-data group key used to fetch option items.
+  itemCode?: string | null // Master-data item code used to resolve a single label.
+  locale?: string // Locale used for date/time formatting and localized labels.
+  cache?: boolean | number // Enables cached requests; number values represent cache TTL in milliseconds.
+
+  notFoundText?: string // Text shown when the resolved value or label is unavailable.
+  placeholder?: string // placeholder text shown when value is empty
+}
+
+/**
+ * Public props accepted by MasterLabel.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'TH',
+  cache: false,
+})
+
+const computedNotFoundText =  computed(()=>{
+  return props.notFoundText || `${props.itemCode}`
+})
+
+const computedPlaceholder = computed(()=>{
+  return props.placeholder || `${props.groupKey}(${props.itemCode})`
+})
+
+const computedItemTitle = computed(()=>{
+  return (props.locale == 'TH')
+      ? "itemValue"
+      :  (result : Record<string,any>) => result["itemValueAlternative"] || result["itemValue"]
+})
+</script>
+
+<template>
+  <model-label
+      model-name="masterItemByGroupKeyAndItemCode"
+      :model-by="{groupKey: props.groupKey, itemCode: props.itemCode}"
+      :item-title="computedItemTitle"
+      :not-found-text="computedNotFoundText"
+      :placeholder="computedPlaceholder"
+      :cache="props.cache"
+  >
+    <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
+      <slot :name="name" v-bind="((slotData || {}) as object)" />
+    </template>
+  </model-label>
+</template>

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

@@ -1,79 +1,91 @@
-<script lang="ts" setup>
-import { VAutocomplete } from 'vuetify/components/VAutocomplete'
-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 VAutocomplete['$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, // ✅ moved into composable
-} = useLookupList(props as any, emit, selectedItems)
-</script>
-
-<template>
-  <v-autocomplete
-      :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"
-  >
-    <!-- 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-autocomplete>
-</template>
+<script lang="ts" setup>
+/**
+ * ModelAutocomplete 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 { VAutocomplete } from 'vuetify/components/VAutocomplete'
+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 VAutocomplete['$props']> {}
+
+/**
+ * Public props accepted by ModelAutocomplete.
+ * 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 ModelAutocomplete.
+ * 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, // ✅ moved into composable
+} = useLookupList(props as any, emit, selectedItems)
+</script>
+
+<template>
+  <v-autocomplete
+      :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"
+  >
+    <!-- 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-autocomplete>
+</template>