@ramathibodi/nuxt-commons 0.1.74 → 0.1.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/README.md +115 -115
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/components/Alert.vue +58 -58
  4. package/dist/runtime/components/BarcodeReader.vue +130 -130
  5. package/dist/runtime/components/ExportCSV.vue +110 -110
  6. package/dist/runtime/components/FileBtn.vue +79 -79
  7. package/dist/runtime/components/ImportCSV.vue +151 -151
  8. package/dist/runtime/components/MrzReader.vue +168 -168
  9. package/dist/runtime/components/SplitterPanel.vue +67 -67
  10. package/dist/runtime/components/TabsGroup.vue +39 -39
  11. package/dist/runtime/components/TextBarcode.vue +66 -66
  12. package/dist/runtime/components/device/IdCardButton.vue +95 -95
  13. package/dist/runtime/components/device/IdCardWebSocket.vue +207 -207
  14. package/dist/runtime/components/device/Scanner.vue +350 -350
  15. package/dist/runtime/components/dialog/Confirm.vue +112 -112
  16. package/dist/runtime/components/dialog/Host.vue +88 -88
  17. package/dist/runtime/components/dialog/Index.vue +84 -84
  18. package/dist/runtime/components/dialog/Loading.vue +51 -51
  19. package/dist/runtime/components/dialog/default/Confirm.vue +112 -112
  20. package/dist/runtime/components/dialog/default/Loading.vue +60 -60
  21. package/dist/runtime/components/dialog/default/Notify.vue +82 -82
  22. package/dist/runtime/components/dialog/default/Printing.vue +46 -46
  23. package/dist/runtime/components/dialog/default/VerifyUser.vue +144 -144
  24. package/dist/runtime/components/document/Form.vue +50 -50
  25. package/dist/runtime/components/document/TemplateBuilder.vue +536 -536
  26. package/dist/runtime/components/form/ActionPad.vue +156 -156
  27. package/dist/runtime/components/form/Birthdate.vue +116 -116
  28. package/dist/runtime/components/form/CheckboxGroup.vue +99 -99
  29. package/dist/runtime/components/form/CodeEditor.vue +45 -45
  30. package/dist/runtime/components/form/Date.vue +270 -270
  31. package/dist/runtime/components/form/DateTime.vue +220 -220
  32. package/dist/runtime/components/form/Dialog.vue +178 -178
  33. package/dist/runtime/components/form/EditPad.vue +157 -157
  34. package/dist/runtime/components/form/File.vue +295 -295
  35. package/dist/runtime/components/form/Hidden.vue +44 -44
  36. package/dist/runtime/components/form/Iterator.vue +538 -538
  37. package/dist/runtime/components/form/Login.vue +143 -143
  38. package/dist/runtime/components/form/Pad.vue +399 -399
  39. package/dist/runtime/components/form/SignPad.vue +226 -226
  40. package/dist/runtime/components/form/System.vue +34 -34
  41. package/dist/runtime/components/form/Table.vue +391 -391
  42. package/dist/runtime/components/form/TableData.vue +236 -236
  43. package/dist/runtime/components/form/Time.vue +177 -177
  44. package/dist/runtime/components/form/images/Capture.vue +245 -245
  45. package/dist/runtime/components/form/images/Edit.vue +133 -133
  46. package/dist/runtime/components/form/images/Field.vue +331 -331
  47. package/dist/runtime/components/form/images/Pad.vue +54 -54
  48. package/dist/runtime/components/label/Date.vue +37 -37
  49. package/dist/runtime/components/label/DateAgo.vue +102 -102
  50. package/dist/runtime/components/label/DateCount.vue +152 -152
  51. package/dist/runtime/components/label/Field.vue +111 -111
  52. package/dist/runtime/components/label/FormatMoney.vue +37 -37
  53. package/dist/runtime/components/label/Mask.vue +46 -46
  54. package/dist/runtime/components/label/Object.vue +21 -21
  55. package/dist/runtime/components/master/Autocomplete.vue +89 -89
  56. package/dist/runtime/components/master/Combobox.vue +88 -88
  57. package/dist/runtime/components/master/RadioGroup.vue +90 -90
  58. package/dist/runtime/components/master/Select.vue +70 -70
  59. package/dist/runtime/components/master/label.vue +55 -55
  60. package/dist/runtime/components/model/Autocomplete.vue +91 -91
  61. package/dist/runtime/components/model/Combobox.vue +90 -90
  62. package/dist/runtime/components/model/Pad.vue +114 -114
  63. package/dist/runtime/components/model/Select.vue +78 -84
  64. package/dist/runtime/components/model/Table.vue +370 -370
  65. package/dist/runtime/components/model/iterator.vue +497 -497
  66. package/dist/runtime/components/model/label.vue +58 -58
  67. package/dist/runtime/components/pdf/Print.vue +75 -75
  68. package/dist/runtime/components/pdf/View.vue +146 -146
  69. package/dist/runtime/composables/dialog.d.ts +1 -1
  70. package/dist/runtime/composables/graphql.d.ts +1 -1
  71. package/dist/runtime/composables/graphqlModel.d.ts +9 -9
  72. package/dist/runtime/composables/graphqlModelItem.d.ts +7 -7
  73. package/dist/runtime/composables/graphqlModelOperation.d.ts +6 -6
  74. package/dist/runtime/composables/userPermission.d.ts +1 -1
  75. package/dist/runtime/labs/Calendar.vue +99 -99
  76. package/dist/runtime/labs/form/EditMobile.vue +152 -152
  77. package/dist/runtime/labs/form/TextFieldMask.vue +43 -43
  78. package/dist/runtime/plugins/clientConfig.d.ts +1 -1
  79. package/dist/runtime/plugins/default.d.ts +1 -1
  80. package/dist/runtime/plugins/dialogManager.d.ts +1 -1
  81. package/dist/runtime/plugins/permission.d.ts +1 -1
  82. package/dist/runtime/types/alert.d.ts +11 -11
  83. package/dist/runtime/types/clientConfig.d.ts +13 -13
  84. package/dist/runtime/types/dialogManager.d.ts +35 -35
  85. package/dist/runtime/types/formDialog.d.ts +5 -5
  86. package/dist/runtime/types/graphqlOperation.d.ts +23 -23
  87. package/dist/runtime/types/menu.d.ts +31 -31
  88. package/dist/runtime/types/modules.d.ts +7 -7
  89. package/dist/runtime/types/permission.d.ts +13 -13
  90. package/package.json +131 -131
  91. package/scripts/enrich-vue-docs-from-ai.mjs +197 -197
  92. package/scripts/generate-ai-summary.mjs +321 -321
  93. package/scripts/generate-composables-md.mjs +129 -129
  94. package/scripts/postInstall.cjs +70 -70
  95. package/templates/.codegen/codegen.ts +32 -32
  96. package/templates/.codegen/plugin-schema-object.js +161 -161
@@ -1,46 +1,46 @@
1
- <script setup lang="ts">
2
- /**
3
- * LabelMask renders read-only label output with formatting logic for display-oriented model values.
4
- * This doc block is consumed by vue-docgen for generated API documentation.
5
- */
6
- import { computed } from 'vue'
7
-
8
- interface Props {
9
- modelValue: string // Bound value for v-model synchronization with the parent component.
10
- variant?: 'mobilePhone' | 'homePhone' | 'citizenId' | 'creditCard' // Mask pattern to apply to the displayed value.
11
- hideContent?: boolean // Hides the middle part of the value for privacy.
12
- }
13
-
14
- /**
15
- * Public props accepted by LabelMask.
16
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
17
- */
18
- const props = withDefaults(defineProps<Props>(), {
19
- hideContent: false,
20
- })
21
-
22
- const labelMask = computed(() => {
23
- if (!props.hideContent) {
24
- if (props.variant == 'mobilePhone') return props.modelValue.length == 10 ? `${props.modelValue.substring(0, 3)}-${props.modelValue.substring(3, 6)}-${props.modelValue.substring(6, 10)}` : 'invalid format'
25
- if (props.variant == 'homePhone') return props.modelValue.length == 9 ? `${props.modelValue.substring(0, 2)}-${props.modelValue.substring(2, 5)}-${props.modelValue.substring(5, 9)}` : 'invalid format'
26
- if (props.variant == 'citizenId') return props.modelValue.length == 13 ? `${props.modelValue.substring(0, 1)}-${props.modelValue.substring(1, 5)}-${props.modelValue.substring(5, 10)}-${props.modelValue.substring(10, 12)}-${props.modelValue.substring(12, 13)}` : 'invalid format'
27
- if (props.variant == 'creditCard') return props.modelValue.length == 16 ? `${props.modelValue.substring(0, 4)}-${props.modelValue.substring(4, 8)}-${props.modelValue.substring(8, 12)}-${props.modelValue.substring(12, 16)}` : 'invalid format'
28
-
29
- const middlePart = 'x'.repeat(props.modelValue.length - 6)
30
- return `${props.modelValue.substring(0, 3)}${middlePart}${props.modelValue.slice(-3)}`
31
- }
32
- else {
33
- if (props.variant == 'mobilePhone') return props.modelValue.length == 10 ? `${props.modelValue.substring(0, 2)}x-xxx-${props.modelValue.substring(6, 10)}` : 'invalid format'
34
- if (props.variant == 'homePhone') return props.modelValue.length == 9 ? `${props.modelValue.substring(0, 2)}-xxx-${props.modelValue.substring(5, 9)}` : 'invalid format'
35
- if (props.variant == 'citizenId') return props.modelValue.length == 13 ? `${props.modelValue.substring(0, 1)}-xxxx-xxxxx-${props.modelValue.substring(10, 12)}-${props.modelValue.substring(12, 13)}` : 'invalid format'
36
- if (props.variant == 'creditCard') return props.modelValue.length == 16 ? `xxxx-xxxx-xxxx-${props.modelValue.substring(12, 16)}` : 'invalid format'
37
-
38
- const middlePart = 'x'.repeat(props.modelValue.length - 6)
39
- return `${props.modelValue.substring(0, 3)}${middlePart}${props.modelValue.slice(-3)}`
40
- }
41
- })
42
- </script>
43
-
44
- <template>
45
- {{ labelMask }}
46
- </template>
1
+ <script setup lang="ts">
2
+ /**
3
+ * LabelMask renders read-only label output with formatting logic for display-oriented model values.
4
+ * This doc block is consumed by vue-docgen for generated API documentation.
5
+ */
6
+ import { computed } from 'vue'
7
+
8
+ interface Props {
9
+ modelValue: string // Bound value for v-model synchronization with the parent component.
10
+ variant?: 'mobilePhone' | 'homePhone' | 'citizenId' | 'creditCard' // Mask pattern to apply to the displayed value.
11
+ hideContent?: boolean // Hides the middle part of the value for privacy.
12
+ }
13
+
14
+ /**
15
+ * Public props accepted by LabelMask.
16
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
17
+ */
18
+ const props = withDefaults(defineProps<Props>(), {
19
+ hideContent: false,
20
+ })
21
+
22
+ const labelMask = computed(() => {
23
+ if (!props.hideContent) {
24
+ if (props.variant == 'mobilePhone') return props.modelValue.length == 10 ? `${props.modelValue.substring(0, 3)}-${props.modelValue.substring(3, 6)}-${props.modelValue.substring(6, 10)}` : 'invalid format'
25
+ if (props.variant == 'homePhone') return props.modelValue.length == 9 ? `${props.modelValue.substring(0, 2)}-${props.modelValue.substring(2, 5)}-${props.modelValue.substring(5, 9)}` : 'invalid format'
26
+ if (props.variant == 'citizenId') return props.modelValue.length == 13 ? `${props.modelValue.substring(0, 1)}-${props.modelValue.substring(1, 5)}-${props.modelValue.substring(5, 10)}-${props.modelValue.substring(10, 12)}-${props.modelValue.substring(12, 13)}` : 'invalid format'
27
+ if (props.variant == 'creditCard') return props.modelValue.length == 16 ? `${props.modelValue.substring(0, 4)}-${props.modelValue.substring(4, 8)}-${props.modelValue.substring(8, 12)}-${props.modelValue.substring(12, 16)}` : 'invalid format'
28
+
29
+ const middlePart = 'x'.repeat(props.modelValue.length - 6)
30
+ return `${props.modelValue.substring(0, 3)}${middlePart}${props.modelValue.slice(-3)}`
31
+ }
32
+ else {
33
+ if (props.variant == 'mobilePhone') return props.modelValue.length == 10 ? `${props.modelValue.substring(0, 2)}x-xxx-${props.modelValue.substring(6, 10)}` : 'invalid format'
34
+ if (props.variant == 'homePhone') return props.modelValue.length == 9 ? `${props.modelValue.substring(0, 2)}-xxx-${props.modelValue.substring(5, 9)}` : 'invalid format'
35
+ if (props.variant == 'citizenId') return props.modelValue.length == 13 ? `${props.modelValue.substring(0, 1)}-xxxx-xxxxx-${props.modelValue.substring(10, 12)}-${props.modelValue.substring(12, 13)}` : 'invalid format'
36
+ if (props.variant == 'creditCard') return props.modelValue.length == 16 ? `xxxx-xxxx-xxxx-${props.modelValue.substring(12, 16)}` : 'invalid format'
37
+
38
+ const middlePart = 'x'.repeat(props.modelValue.length - 6)
39
+ return `${props.modelValue.substring(0, 3)}${middlePart}${props.modelValue.slice(-3)}`
40
+ }
41
+ })
42
+ </script>
43
+
44
+ <template>
45
+ {{ labelMask }}
46
+ </template>
@@ -1,22 +1,22 @@
1
- <script lang="ts" setup>
2
- /**
3
- * LabelObject renders read-only label output with formatting logic for display-oriented model values.
4
- * This doc block is consumed by vue-docgen for generated API documentation.
5
- */
6
- import {joinObject} from "../../utils/formatter";
7
-
8
- interface Props {
9
- object: any, // Source object used to resolve and render selected attributes.
10
- attribute?: string, // Object key(s) to extract for display from the source object.
11
- separator?: string, // Separator used when joining multiple extracted values.
12
- }
13
- /**
14
- * Public props accepted by LabelObject.
15
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
16
- */
17
- const props = withDefaults(defineProps<Props>(), {
18
- })
19
- </script>
20
- <template>
21
- <span>{{joinObject(object,attribute,separator)}}</span>
1
+ <script lang="ts" setup>
2
+ /**
3
+ * LabelObject renders read-only label output with formatting logic for display-oriented model values.
4
+ * This doc block is consumed by vue-docgen for generated API documentation.
5
+ */
6
+ import {joinObject} from "../../utils/formatter";
7
+
8
+ interface Props {
9
+ object: any, // Source object used to resolve and render selected attributes.
10
+ attribute?: string, // Object key(s) to extract for display from the source object.
11
+ separator?: string, // Separator used when joining multiple extracted values.
12
+ }
13
+ /**
14
+ * Public props accepted by LabelObject.
15
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
16
+ */
17
+ const props = withDefaults(defineProps<Props>(), {
18
+ })
19
+ </script>
20
+ <template>
21
+ <span>{{joinObject(object,attribute,separator)}}</span>
22
22
  </template>
@@ -1,91 +1,91 @@
1
- <script lang="ts" setup>
2
- /**
3
- * MasterAutocomplete renders master-data driven option controls and synchronizes selected values with form models.
4
- * This doc block is consumed by vue-docgen for generated API documentation.
5
- */
6
- import { VAutocomplete } from 'vuetify/components/VAutocomplete'
7
- import { withDefaults } from 'vue'
8
- import { useLookupListMaster, type MasterLikeProps } from '../../composables/lookupListMaster'
9
-
10
- interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {}
11
-
12
- /**
13
- * Public props accepted by MasterAutocomplete.
14
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
15
- */
16
- const props = withDefaults(defineProps<Props & MasterLikeProps>(), {
17
- sortBy: 'itemValue', // Field used to sort options before rendering.
18
- showCode: false, // Displays code values alongside labels in option lists.
19
- lang: 'TH', // Language code used when selecting localized option labels.
20
- noDataText: 'ไม่พบข้อมูล', // Fallback message shown when there is no data to display.
21
- waitForFilter: false, // Delays loading options until the user provides a search/filter value.
22
- meilisearch: false, // Enables Meilisearch-backed server filtering for options.
23
- cache: false, // Enables cached requests; number values represent cache TTL in milliseconds.
24
-
25
- statusField: 'statusCode', // Field name that indicates active/inactive status in each item.
26
- activeValue: 'active', // Value in statusField treated as active/selectable.
27
- hideInactiveInList: true, // Hides inactive options from the displayed selection list.
28
- preventSelectingInactive: true, // Blocks selecting inactive options even if present in the dataset.
29
- })
30
-
31
- const {
32
- computedModelName,
33
- computedModelBy,
34
- computedModelSelectedItemBy,
35
- computedFields,
36
- itemTitleField,
37
- computedNoDataText,
38
- computedSortBy,
39
- formatItemTitle,
40
- } = useLookupListMaster(props)
41
- </script>
42
-
43
- <template>
44
- <model-autocomplete
45
- :model-name="computedModelName"
46
- :model-by="computedModelBy"
47
- :fields="computedFields"
48
- :sort-by="computedSortBy"
49
- :item-title="itemTitleField"
50
- item-value="itemCode"
51
- :no-data-text="computedNoDataText"
52
- :show-code="props.showCode"
53
- :cache="props.cache && !props.meilisearch"
54
- :server-search="props.meilisearch && !!computedModelName"
55
- server-search-key="keyword"
56
- model-selected-item="masterItemByGroupKeyAndItemCodeIn"
57
- :model-selected-item-by="computedModelSelectedItemBy"
58
- model-selected-item-key="itemCodes"
59
-
60
- :status-field="props.statusField"
61
- :active-value="props.activeValue"
62
- :hide-inactive-in-list="props.hideInactiveInList"
63
- :prevent-selecting-inactive="props.preventSelectingInactive"
64
- >
65
- <!-- pass-through slots -->
66
- <!-- @ts-ignore -->
67
- <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
68
- <slot :name="name" v-bind="((slotData || {}) as object)" :operation="computedModelName" />
69
- </template>
70
-
71
- <template v-if="!$slots.item && !props.meilisearch" #item="{ props: itemProps, item }">
72
- <v-list-item v-bind="itemProps" :title="formatItemTitle(item)" />
73
- </template>
74
-
75
- <template v-if="!$slots.item && props.meilisearch" #item="{ props: itemProps, item }">
76
- <v-list-item v-bind="itemProps">
77
- <template #title v-if="item.raw?._formatted?.itemValue">
78
- <span v-html="formatItemTitle(item)" class="meilisearch-item"></span>
79
- </template>
80
- </v-list-item>
81
- </template>
82
-
83
- <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
84
- {{ formatItemTitle(item) }}
85
- </template>
86
- </model-autocomplete>
87
- </template>
88
-
1
+ <script lang="ts" setup>
2
+ /**
3
+ * MasterAutocomplete renders master-data driven option controls and synchronizes selected values with form models.
4
+ * This doc block is consumed by vue-docgen for generated API documentation.
5
+ */
6
+ import { VAutocomplete } from 'vuetify/components/VAutocomplete'
7
+ import { withDefaults } from 'vue'
8
+ import { useLookupListMaster, type MasterLikeProps } from '../../composables/lookupListMaster'
9
+
10
+ interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {}
11
+
12
+ /**
13
+ * Public props accepted by MasterAutocomplete.
14
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
15
+ */
16
+ const props = withDefaults(defineProps<Props & MasterLikeProps>(), {
17
+ sortBy: 'itemValue', // Field used to sort options before rendering.
18
+ showCode: false, // Displays code values alongside labels in option lists.
19
+ lang: 'TH', // Language code used when selecting localized option labels.
20
+ noDataText: 'ไม่พบข้อมูล', // Fallback message shown when there is no data to display.
21
+ waitForFilter: false, // Delays loading options until the user provides a search/filter value.
22
+ meilisearch: false, // Enables Meilisearch-backed server filtering for options.
23
+ cache: false, // Enables cached requests; number values represent cache TTL in milliseconds.
24
+
25
+ statusField: 'statusCode', // Field name that indicates active/inactive status in each item.
26
+ activeValue: 'active', // Value in statusField treated as active/selectable.
27
+ hideInactiveInList: true, // Hides inactive options from the displayed selection list.
28
+ preventSelectingInactive: true, // Blocks selecting inactive options even if present in the dataset.
29
+ })
30
+
31
+ const {
32
+ computedModelName,
33
+ computedModelBy,
34
+ computedModelSelectedItemBy,
35
+ computedFields,
36
+ itemTitleField,
37
+ computedNoDataText,
38
+ computedSortBy,
39
+ formatItemTitle,
40
+ } = useLookupListMaster(props)
41
+ </script>
42
+
43
+ <template>
44
+ <model-autocomplete
45
+ :model-name="computedModelName"
46
+ :model-by="computedModelBy"
47
+ :fields="computedFields"
48
+ :sort-by="computedSortBy"
49
+ :item-title="itemTitleField"
50
+ item-value="itemCode"
51
+ :no-data-text="computedNoDataText"
52
+ :show-code="props.showCode"
53
+ :cache="props.cache && !props.meilisearch"
54
+ :server-search="props.meilisearch && !!computedModelName"
55
+ server-search-key="keyword"
56
+ model-selected-item="masterItemByGroupKeyAndItemCodeIn"
57
+ :model-selected-item-by="computedModelSelectedItemBy"
58
+ model-selected-item-key="itemCodes"
59
+
60
+ :status-field="props.statusField"
61
+ :active-value="props.activeValue"
62
+ :hide-inactive-in-list="props.hideInactiveInList"
63
+ :prevent-selecting-inactive="props.preventSelectingInactive"
64
+ >
65
+ <!-- pass-through slots -->
66
+ <!-- @ts-ignore -->
67
+ <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
68
+ <slot :name="name" v-bind="((slotData || {}) as object)" :operation="computedModelName" />
69
+ </template>
70
+
71
+ <template v-if="!$slots.item && !props.meilisearch" #item="{ props: itemProps, item }">
72
+ <v-list-item v-bind="itemProps" :title="formatItemTitle(item)" />
73
+ </template>
74
+
75
+ <template v-if="!$slots.item && props.meilisearch" #item="{ props: itemProps, item }">
76
+ <v-list-item v-bind="itemProps">
77
+ <template #title v-if="item.raw?._formatted?.itemValue">
78
+ <span v-html="formatItemTitle(item)" class="meilisearch-item"></span>
79
+ </template>
80
+ </v-list-item>
81
+ </template>
82
+
83
+ <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
84
+ {{ formatItemTitle(item) }}
85
+ </template>
86
+ </model-autocomplete>
87
+ </template>
88
+
89
89
  <style>
90
90
  .meilisearch-item em{font-weight:700}
91
- </style>
91
+ </style>
@@ -1,91 +1,91 @@
1
- <script lang="ts" setup>
2
- /**
3
- * MasterCombobox renders master-data driven option controls and synchronizes selected values with form models.
4
- * This doc block is consumed by vue-docgen for generated API documentation.
5
- */
6
- import { VCombobox } from 'vuetify/components/VCombobox'
7
- import { withDefaults } from 'vue'
8
- import { useLookupListMaster, type MasterLikeProps } from '../../composables/lookupListMaster'
9
-
10
- interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {}
11
-
12
- /**
13
- * Public props accepted by MasterCombobox.
14
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
15
- */
16
- const props = withDefaults(defineProps<Props & MasterLikeProps>(), {
17
- sortBy: 'itemValue', // Field used to sort options before rendering.
18
- showCode: false, // Displays code values alongside labels in option lists.
19
- lang: 'TH', // Language code used when selecting localized option labels.
20
- noDataText: 'ไม่พบข้อมูล', // Fallback message shown when there is no data to display.
21
- waitForFilter: false, // Delays loading options until the user provides a search/filter value.
22
- meilisearch: false, // Enables Meilisearch-backed server filtering for options.
23
- cache: false, // Enables cached requests; number values represent cache TTL in milliseconds.
24
-
25
- statusField: 'statusCode', // Field name that indicates active/inactive status in each item.
26
- activeValue: 'active', // Value in statusField treated as active/selectable.
27
- hideInactiveInList: true, // Hides inactive options from the displayed selection list.
28
- preventSelectingInactive: true, // Blocks selecting inactive options even if present in the dataset.
29
- })
30
-
31
- const {
32
- computedModelName,
33
- computedModelBy,
34
- computedModelSelectedItemBy,
35
- computedFields,
36
- itemTitleField,
37
- computedNoDataText,
38
- computedSortBy,
39
- formatItemTitle,
40
- } = useLookupListMaster(props)
41
- </script>
42
-
43
- <template>
44
- <model-combobox
45
- :model-name="computedModelName"
46
- :model-by="computedModelBy"
47
- :fields="computedFields"
48
- :sort-by="computedSortBy"
49
- :item-title="itemTitleField"
50
- item-value="itemCode"
51
- :no-data-text="computedNoDataText"
52
- :show-code="props.showCode"
53
- :cache="props.cache && !props.meilisearch"
54
- :server-search="props.meilisearch && !!computedModelName"
55
- server-search-key="keyword"
56
- model-selected-item="masterItemByGroupKeyAndItemCodeIn"
57
- :model-selected-item-by="computedModelSelectedItemBy"
58
- model-selected-item-key="itemCodes"
59
-
60
- :status-field="props.statusField"
61
- :active-value="props.activeValue"
62
- :hide-inactive-in-list="props.hideInactiveInList"
63
- :prevent-selecting-inactive="props.preventSelectingInactive"
64
- >
65
- <!-- pass-through slots -->
66
- <!-- @ts-ignore -->
67
- <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
68
- <slot :name="name" v-bind="((slotData || {}) as object)" :operation="computedModelName" />
69
- </template>
70
-
71
- <template v-if="!$slots.item && !props.meilisearch" #item="{ props: itemProps, item }">
72
- <v-list-item v-bind="itemProps" :title="formatItemTitle(item)" />
73
- </template>
74
-
75
- <template v-if="!$slots.item && props.meilisearch" #item="{ props: itemProps, item }">
76
- <v-list-item v-bind="itemProps">
77
- <template #title v-if="item.raw?._formatted?.itemValue">
78
- <span v-html="formatItemTitle(item)" class="meilisearch-item"></span>
79
- </template>
80
- </v-list-item>
81
- </template>
82
-
83
- <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
84
- {{ formatItemTitle(item) }}
85
- </template>
86
- </model-combobox>
87
- </template>
88
-
1
+ <script lang="ts" setup>
2
+ /**
3
+ * MasterCombobox renders master-data driven option controls and synchronizes selected values with form models.
4
+ * This doc block is consumed by vue-docgen for generated API documentation.
5
+ */
6
+ import { VCombobox } from 'vuetify/components/VCombobox'
7
+ import { withDefaults } from 'vue'
8
+ import { useLookupListMaster, type MasterLikeProps } from '../../composables/lookupListMaster'
9
+
10
+ interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {}
11
+
12
+ /**
13
+ * Public props accepted by MasterCombobox.
14
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
15
+ */
16
+ const props = withDefaults(defineProps<Props & MasterLikeProps>(), {
17
+ sortBy: 'itemValue', // Field used to sort options before rendering.
18
+ showCode: false, // Displays code values alongside labels in option lists.
19
+ lang: 'TH', // Language code used when selecting localized option labels.
20
+ noDataText: 'ไม่พบข้อมูล', // Fallback message shown when there is no data to display.
21
+ waitForFilter: false, // Delays loading options until the user provides a search/filter value.
22
+ meilisearch: false, // Enables Meilisearch-backed server filtering for options.
23
+ cache: false, // Enables cached requests; number values represent cache TTL in milliseconds.
24
+
25
+ statusField: 'statusCode', // Field name that indicates active/inactive status in each item.
26
+ activeValue: 'active', // Value in statusField treated as active/selectable.
27
+ hideInactiveInList: true, // Hides inactive options from the displayed selection list.
28
+ preventSelectingInactive: true, // Blocks selecting inactive options even if present in the dataset.
29
+ })
30
+
31
+ const {
32
+ computedModelName,
33
+ computedModelBy,
34
+ computedModelSelectedItemBy,
35
+ computedFields,
36
+ itemTitleField,
37
+ computedNoDataText,
38
+ computedSortBy,
39
+ formatItemTitle,
40
+ } = useLookupListMaster(props)
41
+ </script>
42
+
43
+ <template>
44
+ <model-combobox
45
+ :model-name="computedModelName"
46
+ :model-by="computedModelBy"
47
+ :fields="computedFields"
48
+ :sort-by="computedSortBy"
49
+ :item-title="itemTitleField"
50
+ item-value="itemCode"
51
+ :no-data-text="computedNoDataText"
52
+ :show-code="props.showCode"
53
+ :cache="props.cache && !props.meilisearch"
54
+ :server-search="props.meilisearch && !!computedModelName"
55
+ server-search-key="keyword"
56
+ model-selected-item="masterItemByGroupKeyAndItemCodeIn"
57
+ :model-selected-item-by="computedModelSelectedItemBy"
58
+ model-selected-item-key="itemCodes"
59
+
60
+ :status-field="props.statusField"
61
+ :active-value="props.activeValue"
62
+ :hide-inactive-in-list="props.hideInactiveInList"
63
+ :prevent-selecting-inactive="props.preventSelectingInactive"
64
+ >
65
+ <!-- pass-through slots -->
66
+ <!-- @ts-ignore -->
67
+ <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
68
+ <slot :name="name" v-bind="((slotData || {}) as object)" :operation="computedModelName" />
69
+ </template>
70
+
71
+ <template v-if="!$slots.item && !props.meilisearch" #item="{ props: itemProps, item }">
72
+ <v-list-item v-bind="itemProps" :title="formatItemTitle(item)" />
73
+ </template>
74
+
75
+ <template v-if="!$slots.item && props.meilisearch" #item="{ props: itemProps, item }">
76
+ <v-list-item v-bind="itemProps">
77
+ <template #title v-if="item.raw?._formatted?.itemValue">
78
+ <span v-html="formatItemTitle(item)" class="meilisearch-item"></span>
79
+ </template>
80
+ </v-list-item>
81
+ </template>
82
+
83
+ <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
84
+ {{ formatItemTitle(item) }}
85
+ </template>
86
+ </model-combobox>
87
+ </template>
88
+
89
89
  <style>
90
90
  .meilisearch-item em{font-weight:700}
91
91
  </style>