@finema/core 1.4.152 → 1.4.153

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 (168) hide show
  1. package/README.md +60 -60
  2. package/dist/module.json +1 -5
  3. package/dist/module.mjs +1 -1
  4. package/dist/runtime/components/Alert.vue +48 -48
  5. package/dist/runtime/components/Avatar.vue +27 -27
  6. package/dist/runtime/components/Badge.vue +11 -11
  7. package/dist/runtime/components/Breadcrumb.vue +44 -44
  8. package/dist/runtime/components/Button/Group.vue +37 -37
  9. package/dist/runtime/components/Button/index.vue +75 -75
  10. package/dist/runtime/components/Card.vue +38 -38
  11. package/dist/runtime/components/Core.vue +37 -37
  12. package/dist/runtime/components/Dialog/index.vue +108 -108
  13. package/dist/runtime/components/Dropdown/index.vue +70 -70
  14. package/dist/runtime/components/FlexDeck/Base.vue +143 -143
  15. package/dist/runtime/components/FlexDeck/index.vue +68 -68
  16. package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
  17. package/dist/runtime/components/Form/Fields.vue +230 -230
  18. package/dist/runtime/components/Form/InputCheckbox/index.vue +28 -28
  19. package/dist/runtime/components/Form/InputDateTime/index.vue +60 -60
  20. package/dist/runtime/components/Form/InputDateTimeRange/date_range_time_field.types.d.ts +1 -1
  21. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +83 -83
  22. package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
  23. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  24. package/dist/runtime/components/Form/InputSelect/index.vue +45 -45
  25. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +54 -54
  26. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  27. package/dist/runtime/components/Form/InputTags/index.vue +145 -145
  28. package/dist/runtime/components/Form/InputText/index.vue +67 -67
  29. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  30. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  31. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
  32. package/dist/runtime/components/Form/InputUploadDropzone/types.d.ts +1 -1
  33. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +342 -342
  34. package/dist/runtime/components/Form/InputUploadDropzoneAuto/types.d.ts +1 -1
  35. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemUpload.vue +241 -241
  36. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +89 -89
  37. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +164 -164
  38. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/types.d.ts +1 -1
  39. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemUpload.vue +161 -161
  40. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemView.vue +64 -64
  41. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +172 -172
  42. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/types.d.ts +1 -1
  43. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
  44. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +151 -151
  45. package/dist/runtime/components/Form/InputUploadFileClassicAuto/types.d.ts +1 -1
  46. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +219 -219
  47. package/dist/runtime/components/Form/InputUploadImageAuto/types.d.ts +1 -1
  48. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +53 -53
  49. package/dist/runtime/components/Form/index.vue +6 -6
  50. package/dist/runtime/components/Icon.vue +23 -23
  51. package/dist/runtime/components/Image.vue +36 -36
  52. package/dist/runtime/components/Loader.vue +27 -27
  53. package/dist/runtime/components/Modal/index.vue +146 -146
  54. package/dist/runtime/components/QRCode.vue +22 -22
  55. package/dist/runtime/components/SimplePagination.vue +96 -96
  56. package/dist/runtime/components/Slideover/index.vue +110 -110
  57. package/dist/runtime/components/Table/Base.vue +139 -139
  58. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  59. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  60. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  61. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  62. package/dist/runtime/components/Table/ColumnText.vue +25 -25
  63. package/dist/runtime/components/Table/Simple.vue +69 -69
  64. package/dist/runtime/components/Table/index.vue +65 -65
  65. package/dist/runtime/components/Tabs/index.vue +64 -64
  66. package/dist/runtime/components/TeleportSafe.vue +40 -40
  67. package/dist/runtime/composables/loaderList.d.ts +2 -2
  68. package/dist/runtime/composables/{loaderList.js → loaderList.mjs} +2 -2
  69. package/dist/runtime/composables/loaderObject.d.ts +1 -1
  70. package/dist/runtime/composables/{loaderObject.js → loaderObject.mjs} +2 -2
  71. package/dist/runtime/composables/loaderPage.d.ts +1 -1
  72. package/dist/runtime/composables/{loaderPage.js → loaderPage.mjs} +3 -3
  73. package/dist/runtime/composables/useConfig.d.ts +1 -1
  74. package/dist/runtime/composables/useForm.d.ts +1 -1
  75. package/dist/runtime/composables/useTable.d.ts +2 -2
  76. package/dist/runtime/composables/{useTable.js → useTable.mjs} +1 -1
  77. package/dist/runtime/composables/{useUpload.js → useUpload.mjs} +1 -1
  78. package/dist/runtime/helpers/{apiListHelper.js → apiListHelper.mjs} +1 -1
  79. package/dist/runtime/helpers/{apiObjectHelper.js → apiObjectHelper.mjs} +1 -1
  80. package/dist/runtime/helpers/apiPageHelper.d.ts +1 -1
  81. package/dist/runtime/helpers/{apiPageHelper.js → apiPageHelper.mjs} +4 -4
  82. package/dist/runtime/ui.config/index.d.ts +16 -16
  83. package/dist/runtime/ui.config/index.mjs +16 -0
  84. package/dist/runtime/ui.config/{uploadDropzoneImage.js → uploadDropzoneImage.mjs} +1 -1
  85. package/dist/runtime/utils/ArrayHelper.d.ts +1 -1
  86. package/dist/runtime/utils/{ArrayHelper.spec.js → ArrayHelper.spec.mjs} +1 -1
  87. package/dist/runtime/utils/{FileHelper.spec.js → FileHelper.spec.mjs} +1 -1
  88. package/dist/runtime/utils/ObjectHelper.d.ts +2 -2
  89. package/dist/runtime/utils/{ObjectHelper.js → ObjectHelper.mjs} +2 -2
  90. package/dist/runtime/utils/{ObjectHelper.spec.js → ObjectHelper.spec.mjs} +1 -1
  91. package/dist/runtime/utils/ParamHelper.d.ts +1 -1
  92. package/dist/runtime/utils/{ParamHelper.spec.js → ParamHelper.spec.mjs} +1 -1
  93. package/dist/runtime/utils/{StringHelper.spec.js → StringHelper.spec.mjs} +1 -1
  94. package/dist/runtime/utils/{TimeHelper.spec.js → TimeHelper.spec.mjs} +1 -1
  95. package/dist/runtime/utils/{TimeHelper.thai.spec.js → TimeHelper.thai.spec.mjs} +1 -1
  96. package/dist/types.d.mts +16 -1
  97. package/dist/types.d.ts +16 -1
  98. package/package.json +92 -93
  99. package/dist/runtime/ui.config/index.js +0 -16
  100. /package/dist/runtime/components/Dropdown/{types.js → types.mjs} +0 -0
  101. /package/dist/runtime/components/FlexDeck/{types.js → types.mjs} +0 -0
  102. /package/dist/runtime/components/Form/InputCheckbox/{types.js → types.mjs} +0 -0
  103. /package/dist/runtime/components/Form/InputDateTime/{date_time_field.types.js → date_time_field.types.mjs} +0 -0
  104. /package/dist/runtime/components/Form/InputDateTimeRange/{date_range_time_field.types.js → date_range_time_field.types.mjs} +0 -0
  105. /package/dist/runtime/components/Form/InputNumber/{types.js → types.mjs} +0 -0
  106. /package/dist/runtime/components/Form/InputRadio/{types.js → types.mjs} +0 -0
  107. /package/dist/runtime/components/Form/InputSelect/{types.js → types.mjs} +0 -0
  108. /package/dist/runtime/components/Form/InputSelectMultiple/{types.js → types.mjs} +0 -0
  109. /package/dist/runtime/components/Form/InputStatic/{types.js → types.mjs} +0 -0
  110. /package/dist/runtime/components/Form/InputTags/{types.js → types.mjs} +0 -0
  111. /package/dist/runtime/components/Form/InputText/{types.js → types.mjs} +0 -0
  112. /package/dist/runtime/components/Form/InputTextarea/{types.js → types.mjs} +0 -0
  113. /package/dist/runtime/components/Form/InputToggle/{types.js → types.mjs} +0 -0
  114. /package/dist/runtime/components/Form/InputUploadDropzone/{types.js → types.mjs} +0 -0
  115. /package/dist/runtime/components/Form/InputUploadDropzoneAuto/{types.js → types.mjs} +0 -0
  116. /package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/{types.js → types.mjs} +0 -0
  117. /package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/{types.js → types.mjs} +0 -0
  118. /package/dist/runtime/components/Form/InputUploadFileClassic/{types.js → types.mjs} +0 -0
  119. /package/dist/runtime/components/Form/InputUploadFileClassicAuto/{types.js → types.mjs} +0 -0
  120. /package/dist/runtime/components/Form/InputUploadImageAuto/{types.js → types.mjs} +0 -0
  121. /package/dist/runtime/components/Form/InputWYSIWYG/{types.js → types.mjs} +0 -0
  122. /package/dist/runtime/components/Form/{types.js → types.mjs} +0 -0
  123. /package/dist/runtime/components/Table/{types.js → types.mjs} +0 -0
  124. /package/dist/runtime/composables/{useApp.js → useApp.mjs} +0 -0
  125. /package/dist/runtime/composables/{useConfig.js → useConfig.mjs} +0 -0
  126. /package/dist/runtime/composables/{useDialog.js → useDialog.mjs} +0 -0
  127. /package/dist/runtime/composables/{useFlexDeck.js → useFlexDeck.mjs} +0 -0
  128. /package/dist/runtime/composables/{useForm.js → useForm.mjs} +0 -0
  129. /package/dist/runtime/composables/{useNotification.js → useNotification.mjs} +0 -0
  130. /package/dist/runtime/composables/{useWatch.js → useWatch.mjs} +0 -0
  131. /package/dist/runtime/{core.config.js → core.config.mjs} +0 -0
  132. /package/dist/runtime/helpers/{componentHelper.js → componentHelper.mjs} +0 -0
  133. /package/dist/runtime/lib/{Requester.js → Requester.mjs} +0 -0
  134. /package/dist/runtime/{plugin.js → plugin.mjs} +0 -0
  135. /package/dist/runtime/{quill.plugin.js → quill.plugin.mjs} +0 -0
  136. /package/dist/runtime/types/{common.js → common.mjs} +0 -0
  137. /package/dist/runtime/types/{config.js → config.mjs} +0 -0
  138. /package/dist/runtime/types/{lib.js → lib.mjs} +0 -0
  139. /package/dist/runtime/ui.config/{alert.js → alert.mjs} +0 -0
  140. /package/dist/runtime/ui.config/{badge.js → badge.mjs} +0 -0
  141. /package/dist/runtime/ui.config/{breadcrumb.js → breadcrumb.mjs} +0 -0
  142. /package/dist/runtime/ui.config/{button.js → button.mjs} +0 -0
  143. /package/dist/runtime/ui.config/{buttonGroup.js → buttonGroup.mjs} +0 -0
  144. /package/dist/runtime/ui.config/{card.js → card.mjs} +0 -0
  145. /package/dist/runtime/ui.config/{checkbox.js → checkbox.mjs} +0 -0
  146. /package/dist/runtime/ui.config/{formGroup.js → formGroup.mjs} +0 -0
  147. /package/dist/runtime/ui.config/{icon.js → icon.mjs} +0 -0
  148. /package/dist/runtime/ui.config/{input.js → input.mjs} +0 -0
  149. /package/dist/runtime/ui.config/{modal.js → modal.mjs} +0 -0
  150. /package/dist/runtime/ui.config/{notification.js → notification.mjs} +0 -0
  151. /package/dist/runtime/ui.config/{pagination.js → pagination.mjs} +0 -0
  152. /package/dist/runtime/ui.config/{select.js → select.mjs} +0 -0
  153. /package/dist/runtime/ui.config/{selectMenu.js → selectMenu.mjs} +0 -0
  154. /package/dist/runtime/ui.config/{slideover.js → slideover.mjs} +0 -0
  155. /package/dist/runtime/ui.config/{table.js → table.mjs} +0 -0
  156. /package/dist/runtime/ui.config/{tabs.js → tabs.mjs} +0 -0
  157. /package/dist/runtime/ui.config/{tags.js → tags.mjs} +0 -0
  158. /package/dist/runtime/ui.config/{textarea.js → textarea.mjs} +0 -0
  159. /package/dist/runtime/ui.config/{toggle.js → toggle.mjs} +0 -0
  160. /package/dist/runtime/ui.config/{uploadFileDropzone.js → uploadFileDropzone.mjs} +0 -0
  161. /package/dist/runtime/ui.config/{uploadFileInputClassicAuto.js → uploadFileInputClassicAuto.mjs} +0 -0
  162. /package/dist/runtime/ui.config/{uploadImage.js → uploadImage.mjs} +0 -0
  163. /package/dist/runtime/utils/{ArrayHelper.js → ArrayHelper.mjs} +0 -0
  164. /package/dist/runtime/utils/{FileHelper.js → FileHelper.mjs} +0 -0
  165. /package/dist/runtime/utils/{ParamHelper.js → ParamHelper.mjs} +0 -0
  166. /package/dist/runtime/utils/{StringHelper.js → StringHelper.mjs} +0 -0
  167. /package/dist/runtime/utils/{TimeHelper.js → TimeHelper.mjs} +0 -0
  168. /package/dist/runtime/utils/{lodash.js → lodash.mjs} +0 -0
@@ -1,143 +1,143 @@
1
- <template>
2
- <slot v-if="!status.isLoading && rawData.length === 0" name="empty-state">
3
- <div class="min-h-60">
4
- <p class="text-center text-sm italic">ไม่พบข้อมูล!</p>
5
- </div>
6
- </slot>
7
-
8
- <div
9
- v-if="pageOptions && isEnableInfiniteScroll && !isHideTopPagination"
10
- class="mb-4 flex items-center justify-end"
11
- >
12
- <p class="text-xs text-gray-500">
13
- ผลลัพธ์ {{ totalInnerRawData }} ของ {{ totalCountWithComma }} รายการ
14
- </p>
15
- </div>
16
-
17
- <div :class="containerClass">
18
- <slot v-for="(row, index) in innerRawData" :key="index" :row="row" />
19
- <div ref="bottomEdgeElement" />
20
- </div>
21
-
22
- <slot v-if="status.isLoading" name="loading-state">
23
- <div class="flex h-60 items-center justify-center">
24
- <Icon name="i-svg-spinners:180-ring-with-bg" class="text-primary size-8" />
25
- </div>
26
- </slot>
27
-
28
- <div v-if="pageOptions && !isEnableInfiniteScroll" class="mt-4 flex justify-between px-3">
29
- <p class="text-xs text-gray-500">
30
- ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
31
- </p>
32
- <UPagination
33
- v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
34
- v-model="page"
35
- :page-count="pageOptions.limit"
36
- :total="pageOptions.totalCount"
37
- />
38
- <SimplePagination
39
- v-if="pageOptions.totalPage > 1 && isSimplePagination"
40
- v-model="page"
41
- :page-count="pageOptions.limit"
42
- :total="pageOptions.totalCount"
43
- />
44
- </div>
45
- </template>
46
-
47
- <script lang="ts" setup>
48
- import { computed, type PropType } from 'vue'
49
- import { useElementVisibility } from '@vueuse/core'
50
- import { StringHelper } from '#core/utils/StringHelper'
51
- import { ref, useWatchTrue, watch } from '#imports'
52
- import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
53
-
54
- const emits = defineEmits(['pageChange'])
55
-
56
- const props = defineProps({
57
- status: {
58
- type: Object as PropType<IFlexDeckOptions['status']>,
59
- required: true,
60
- },
61
- pageOptions: {
62
- type: Object as PropType<IFlexDeckOptions['pageOptions']>,
63
- required: false,
64
- },
65
- rawData: {
66
- type: Array as PropType<IFlexDeckOptions['rawData']>,
67
- required: true,
68
- },
69
- isSimplePagination: {
70
- type: Boolean as PropType<IFlexDeckOptions['isSimplePagination']>,
71
- default: false,
72
- },
73
- isHideTopPagination: {
74
- type: Boolean as PropType<IFlexDeckOptions['isHideTopPagination']>,
75
- default: false,
76
- },
77
- isHideBottomPagination: {
78
- type: Boolean as PropType<IFlexDeckOptions['isHideBottomPagination']>,
79
- default: false,
80
- },
81
- isEnableInfiniteScroll: {
82
- type: Boolean as PropType<IFlexDeckOptions['isEnableInfiniteScroll']>,
83
- default: false,
84
- },
85
- containerClass: { type: [String, Array, Object] },
86
- })
87
-
88
- const bottomEdgeElement = ref<HTMLElement | null>(null)
89
-
90
- const page = ref(props.pageOptions?.currentPage || 1)
91
-
92
- const innerRawData = ref<object[]>([])
93
-
94
- const targetElement = useElementVisibility(bottomEdgeElement)
95
-
96
- const pageBetween = computed((): string => {
97
- const length = props.rawData?.length
98
-
99
- if (length === 0) {
100
- return '0'
101
- }
102
-
103
- const start = (props.pageOptions!.currentPage - 1) * props.pageOptions!.limit + 1
104
- const end = start + length - 1
105
-
106
- return `${start} - ${end}`
107
- })
108
-
109
- const totalCountWithComma = computed((): string => {
110
- return !props.pageOptions!.totalCount
111
- ? '0'
112
- : StringHelper.withComma(props.pageOptions!.totalCount)
113
- })
114
-
115
- const totalInnerRawData = computed((): number => {
116
- return innerRawData.value?.length || 0
117
- })
118
-
119
- useWatchTrue(
120
- () => props.status.isSuccess,
121
- () => {
122
- if (props.isEnableInfiniteScroll) {
123
- innerRawData.value = [...(innerRawData.value || []), ...props.rawData]
124
-
125
- return
126
- }
127
-
128
- innerRawData.value = props.rawData
129
- }
130
- )
131
-
132
- watch(page, () => {
133
- emits('pageChange', page.value)
134
- })
135
-
136
- watch(targetElement, (value) => {
137
- if (props.status.isLoading || !props.isEnableInfiniteScroll) return
138
-
139
- if (page.value < props.pageOptions!.totalPage && value) {
140
- page.value++
141
- }
142
- })
143
- </script>
1
+ <template>
2
+ <slot v-if="!status.isLoading && rawData.length === 0" name="empty-state">
3
+ <div class="min-h-60">
4
+ <p class="text-center text-sm italic">ไม่พบข้อมูล!</p>
5
+ </div>
6
+ </slot>
7
+
8
+ <div
9
+ v-if="pageOptions && isEnableInfiniteScroll && !isHideTopPagination"
10
+ class="mb-4 flex items-center justify-end"
11
+ >
12
+ <p class="text-xs text-gray-500">
13
+ ผลลัพธ์ {{ totalInnerRawData }} ของ {{ totalCountWithComma }} รายการ
14
+ </p>
15
+ </div>
16
+
17
+ <div :class="containerClass">
18
+ <slot v-for="(row, index) in innerRawData" :key="index" :row="row" />
19
+ <div ref="bottomEdgeElement" />
20
+ </div>
21
+
22
+ <slot v-if="status.isLoading" name="loading-state">
23
+ <div class="flex h-60 items-center justify-center">
24
+ <Icon name="i-svg-spinners:180-ring-with-bg" class="text-primary size-8" />
25
+ </div>
26
+ </slot>
27
+
28
+ <div v-if="pageOptions && !isEnableInfiniteScroll" class="mt-4 flex justify-between px-3">
29
+ <p class="text-xs text-gray-500">
30
+ ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
31
+ </p>
32
+ <UPagination
33
+ v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
34
+ v-model="page"
35
+ :page-count="pageOptions.limit"
36
+ :total="pageOptions.totalCount"
37
+ />
38
+ <SimplePagination
39
+ v-if="pageOptions.totalPage > 1 && isSimplePagination"
40
+ v-model="page"
41
+ :page-count="pageOptions.limit"
42
+ :total="pageOptions.totalCount"
43
+ />
44
+ </div>
45
+ </template>
46
+
47
+ <script lang="ts" setup>
48
+ import { computed, type PropType } from 'vue'
49
+ import { useElementVisibility } from '@vueuse/core'
50
+ import { StringHelper } from '#core/utils/StringHelper'
51
+ import { ref, useWatchTrue, watch } from '#imports'
52
+ import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
53
+
54
+ const emits = defineEmits(['pageChange'])
55
+
56
+ const props = defineProps({
57
+ status: {
58
+ type: Object as PropType<IFlexDeckOptions['status']>,
59
+ required: true,
60
+ },
61
+ pageOptions: {
62
+ type: Object as PropType<IFlexDeckOptions['pageOptions']>,
63
+ required: false,
64
+ },
65
+ rawData: {
66
+ type: Array as PropType<IFlexDeckOptions['rawData']>,
67
+ required: true,
68
+ },
69
+ isSimplePagination: {
70
+ type: Boolean as PropType<IFlexDeckOptions['isSimplePagination']>,
71
+ default: false,
72
+ },
73
+ isHideTopPagination: {
74
+ type: Boolean as PropType<IFlexDeckOptions['isHideTopPagination']>,
75
+ default: false,
76
+ },
77
+ isHideBottomPagination: {
78
+ type: Boolean as PropType<IFlexDeckOptions['isHideBottomPagination']>,
79
+ default: false,
80
+ },
81
+ isEnableInfiniteScroll: {
82
+ type: Boolean as PropType<IFlexDeckOptions['isEnableInfiniteScroll']>,
83
+ default: false,
84
+ },
85
+ containerClass: { type: [String, Array, Object] },
86
+ })
87
+
88
+ const bottomEdgeElement = ref<HTMLElement | null>(null)
89
+
90
+ const page = ref(props.pageOptions?.currentPage || 1)
91
+
92
+ const innerRawData = ref<object[]>([])
93
+
94
+ const targetElement = useElementVisibility(bottomEdgeElement)
95
+
96
+ const pageBetween = computed((): string => {
97
+ const length = props.rawData?.length
98
+
99
+ if (length === 0) {
100
+ return '0'
101
+ }
102
+
103
+ const start = (props.pageOptions!.currentPage - 1) * props.pageOptions!.limit + 1
104
+ const end = start + length - 1
105
+
106
+ return `${start} - ${end}`
107
+ })
108
+
109
+ const totalCountWithComma = computed((): string => {
110
+ return !props.pageOptions!.totalCount
111
+ ? '0'
112
+ : StringHelper.withComma(props.pageOptions!.totalCount)
113
+ })
114
+
115
+ const totalInnerRawData = computed((): number => {
116
+ return innerRawData.value?.length || 0
117
+ })
118
+
119
+ useWatchTrue(
120
+ () => props.status.isSuccess,
121
+ () => {
122
+ if (props.isEnableInfiniteScroll) {
123
+ innerRawData.value = [...(innerRawData.value || []), ...props.rawData]
124
+
125
+ return
126
+ }
127
+
128
+ innerRawData.value = props.rawData
129
+ }
130
+ )
131
+
132
+ watch(page, () => {
133
+ emits('pageChange', page.value)
134
+ })
135
+
136
+ watch(targetElement, (value) => {
137
+ if (props.status.isLoading || !props.isEnableInfiniteScroll) return
138
+
139
+ if (page.value < props.pageOptions!.totalPage && value) {
140
+ page.value++
141
+ }
142
+ })
143
+ </script>
@@ -1,68 +1,68 @@
1
- <template>
2
- <div>
3
- <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
4
- <UInput
5
- v-model="q"
6
- icon="i-heroicons-magnifying-glass"
7
- :placeholder="options.searchPlaceholder || 'ค้นหา...'"
8
- />
9
- </div>
10
- <Base
11
- :raw-data="options.rawData"
12
- :status="options.status"
13
- :page-options="options.pageOptions"
14
- :is-simple-pagination="isShowSimplePagination"
15
- :is-hide-top-pagination="options.isHideTopPagination"
16
- :is-hide-bottom-pagination="options.isHideBottomPagination"
17
- :is-enable-infinite-scroll="options.isEnableInfiniteScroll"
18
- :container-class="containerClass"
19
- @page-change="onPageChange"
20
- >
21
- <template v-for="(_, slot) of $slots" #[slot]="slotProps">
22
- <slot :name="slot" v-bind="slotProps || {}" />
23
- </template>
24
- </Base>
25
- </div>
26
- </template>
27
- <script lang="ts" setup>
28
- import { type PropType } from 'vue'
29
- import { _debounce, computed, ref, watch } from '#imports'
30
- import { useCoreConfig } from '#core/composables/useConfig'
31
- import Base from '#core/components/FlexDeck/Base.vue'
32
- import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
33
-
34
- defineSlots<{
35
- default: (props: { row: any }) => any
36
- 'empty-state': () => any
37
- 'loading-state': () => any
38
- }>()
39
-
40
- const emits = defineEmits<{
41
- (event: 'pageChange', page: number): void
42
- (event: 'search', q: string): void
43
- }>()
44
-
45
- const props = defineProps({
46
- options: { type: Object as PropType<IFlexDeckOptions>, required: true },
47
- containerClass: { type: [String, Array, Object], default: '' },
48
- })
49
-
50
- const coreConfig = useCoreConfig()
51
-
52
- const q = ref(props.options?.pageOptions.search ?? '')
53
-
54
- const isShowSimplePagination = computed(
55
- (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
56
- )
57
-
58
- watch(
59
- q,
60
- _debounce((value) => {
61
- emits('search', value)
62
- }, 500)
63
- )
64
-
65
- const onPageChange = (page: number) => {
66
- emits('pageChange', page)
67
- }
68
- </script>
1
+ <template>
2
+ <div>
3
+ <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
4
+ <UInput
5
+ v-model="q"
6
+ icon="i-heroicons-magnifying-glass"
7
+ :placeholder="options.searchPlaceholder || 'ค้นหา...'"
8
+ />
9
+ </div>
10
+ <Base
11
+ :raw-data="options.rawData"
12
+ :status="options.status"
13
+ :page-options="options.pageOptions"
14
+ :is-simple-pagination="isShowSimplePagination"
15
+ :is-hide-top-pagination="options.isHideTopPagination"
16
+ :is-hide-bottom-pagination="options.isHideBottomPagination"
17
+ :is-enable-infinite-scroll="options.isEnableInfiniteScroll"
18
+ :container-class="containerClass"
19
+ @page-change="onPageChange"
20
+ >
21
+ <template v-for="(_, slot) of $slots" #[slot]="slotProps">
22
+ <slot :name="slot" v-bind="slotProps || {}" />
23
+ </template>
24
+ </Base>
25
+ </div>
26
+ </template>
27
+ <script lang="ts" setup>
28
+ import { type PropType } from 'vue'
29
+ import { _debounce, computed, ref, watch } from '#imports'
30
+ import { useCoreConfig } from '#core/composables/useConfig'
31
+ import Base from '#core/components/FlexDeck/Base.vue'
32
+ import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
33
+
34
+ defineSlots<{
35
+ default: (props: { row: any }) => any
36
+ 'empty-state': () => any
37
+ 'loading-state': () => any
38
+ }>()
39
+
40
+ const emits = defineEmits<{
41
+ (event: 'pageChange', page: number): void
42
+ (event: 'search', q: string): void
43
+ }>()
44
+
45
+ const props = defineProps({
46
+ options: { type: Object as PropType<IFlexDeckOptions>, required: true },
47
+ containerClass: { type: [String, Array, Object], default: '' },
48
+ })
49
+
50
+ const coreConfig = useCoreConfig()
51
+
52
+ const q = ref(props.options?.pageOptions.search ?? '')
53
+
54
+ const isShowSimplePagination = computed(
55
+ (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
56
+ )
57
+
58
+ watch(
59
+ q,
60
+ _debounce((value) => {
61
+ emits('search', value)
62
+ }, 500)
63
+ )
64
+
65
+ const onPageChange = (page: number) => {
66
+ emits('pageChange', page)
67
+ }
68
+ </script>
@@ -1,23 +1,23 @@
1
- <template>
2
- <UFormGroup
3
- :label="label"
4
- :name="name"
5
- :description="description"
6
- :hint="hint"
7
- :size="size as FormGroupSize"
8
- :data-testid="name"
9
- :help="help"
10
- :error="errorMessage"
11
- :required="!!isRequired"
12
- :ui="containerUi"
13
- >
14
- <slot />
15
- </UFormGroup>
16
- </template>
17
-
18
- <script lang="ts" setup>
19
- import { type IFieldProps } from '#core/components/Form/types'
20
- import type { FormGroupSize } from '#ui/types'
21
-
22
- defineProps<IFieldProps>()
23
- </script>
1
+ <template>
2
+ <UFormGroup
3
+ :label="label"
4
+ :name="name"
5
+ :description="description"
6
+ :hint="hint"
7
+ :size="size as FormGroupSize"
8
+ :data-testid="name"
9
+ :help="help"
10
+ :error="errorMessage"
11
+ :required="!!isRequired"
12
+ :ui="containerUi"
13
+ >
14
+ <slot />
15
+ </UFormGroup>
16
+ </template>
17
+
18
+ <script lang="ts" setup>
19
+ import { type IFieldProps } from '#core/components/Form/types'
20
+ import type { FormGroupSize } from '#ui/types'
21
+
22
+ defineProps<IFieldProps>()
23
+ </script>