@finema/core 1.4.152 → 1.4.154

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 +10 -2
  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,38 +1,38 @@
1
- <template>
2
- <UCard v-bind="attrs" :class="$props.class" :as="as" :ui="ui">
3
- <template #header>
4
- <slot name="header" />
5
- </template>
6
-
7
- <slot />
8
-
9
- <template #footer>
10
- <slot name="footer" />
11
- </template>
12
- </UCard>
13
- </template>
14
-
15
- <script setup lang="ts">
16
- import { useUiConfig, type PropType, useUI, toRef } from '#imports'
17
- import { card } from '#core/ui.config'
18
- import type { Strategy } from '#ui/types'
19
-
20
- const config = useUiConfig<typeof card>(card, 'card')
21
-
22
- const props = defineProps({
23
- as: {
24
- type: String,
25
- default: 'div',
26
- },
27
- class: {
28
- type: [String, Object, Array] as PropType<any>,
29
- default: () => '',
30
- },
31
- ui: {
32
- type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
33
- default: () => ({}),
34
- },
35
- })
36
-
37
- const { ui, attrs } = useUI('card', toRef(props, 'ui'), config, toRef(props, 'class'))
38
- </script>
1
+ <template>
2
+ <UCard v-bind="attrs" :class="$props.class" :as="as" :ui="ui">
3
+ <template #header>
4
+ <slot name="header" />
5
+ </template>
6
+
7
+ <slot />
8
+
9
+ <template #footer>
10
+ <slot name="footer" />
11
+ </template>
12
+ </UCard>
13
+ </template>
14
+
15
+ <script setup lang="ts">
16
+ import { useUiConfig, type PropType, useUI, toRef } from '#imports'
17
+ import { card } from '#core/ui.config'
18
+ import type { Strategy } from '#ui/types'
19
+
20
+ const config = useUiConfig<typeof card>(card, 'card')
21
+
22
+ const props = defineProps({
23
+ as: {
24
+ type: String,
25
+ default: 'div',
26
+ },
27
+ class: {
28
+ type: [String, Object, Array] as PropType<any>,
29
+ default: () => '',
30
+ },
31
+ ui: {
32
+ type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
33
+ default: () => ({}),
34
+ },
35
+ })
36
+
37
+ const { ui, attrs } = useUI('card', toRef(props, 'ui'), config, toRef(props, 'class'))
38
+ </script>
@@ -1,37 +1,37 @@
1
- <template>
2
- <NuxtLoadingIndicator :color="color" />
3
- <Dialog />
4
- <UNotifications />
5
- <div v-if="isDevEnv" class="fixed bottom-4 right-4 z-50">
6
- <div class="flex flex-col items-end justify-end">
7
- <div
8
- v-show="isShowDevTools"
9
- class="max-w-screen mb-4 h-[750px] max-h-screen w-[600px] overflow-auto rounded-lg border bg-white opacity-80 shadow-2xl"
10
- >
11
- <p class="p-3 text-lg font-semibold">Debug Tools</p>
12
- <hr />
13
- <div id="dev-logs" class="flex flex-col space-y-3 p-3" />
14
- </div>
15
- <Button
16
- :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
17
- color="info"
18
- square
19
- :ui="{ rounded: 'rounded-full' }"
20
- @click="isShowDevTools = !isShowDevTools"
21
- />
22
- </div>
23
- </div>
24
- </template>
25
- <script lang="ts" setup>
26
- import { ref } from 'vue'
27
-
28
- defineProps({
29
- color: {
30
- type: String,
31
- default: '#3675FB',
32
- },
33
- })
34
-
35
- const isShowDevTools = ref(false)
36
- const isDevEnv = process.env.NODE_ENV === 'development'
37
- </script>
1
+ <template>
2
+ <NuxtLoadingIndicator :color="color" />
3
+ <Dialog />
4
+ <UNotifications />
5
+ <div v-if="isDevEnv" class="fixed bottom-4 right-4 z-50">
6
+ <div class="flex flex-col items-end justify-end">
7
+ <div
8
+ v-show="isShowDevTools"
9
+ class="max-w-screen mb-4 h-[750px] max-h-screen w-[600px] overflow-auto rounded-lg border bg-white opacity-80 shadow-2xl"
10
+ >
11
+ <p class="p-3 text-lg font-semibold">Debug Tools</p>
12
+ <hr />
13
+ <div id="dev-logs" class="flex flex-col space-y-3 p-3" />
14
+ </div>
15
+ <Button
16
+ :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
17
+ color="info"
18
+ square
19
+ :ui="{ rounded: 'rounded-full' }"
20
+ @click="isShowDevTools = !isShowDevTools"
21
+ />
22
+ </div>
23
+ </div>
24
+ </template>
25
+ <script lang="ts" setup>
26
+ import { ref } from 'vue'
27
+
28
+ defineProps({
29
+ color: {
30
+ type: String,
31
+ default: '#3675FB',
32
+ },
33
+ })
34
+
35
+ const isShowDevTools = ref(false)
36
+ const isDevEnv = process.env.NODE_ENV === 'development'
37
+ </script>
@@ -1,108 +1,108 @@
1
- <template>
2
- <Modal
3
- v-if="dialog.meta?.type"
4
- v-model="dialog.isShow"
5
- :ui="{
6
- innerWrapper: 'p-6',
7
- }"
8
- is-hide-close-btn
9
- prevent-close
10
- >
11
- <UNotification
12
- :ui="{
13
- padding: '',
14
- shadow: '',
15
- ring: '',
16
- icon: {
17
- base: 'flex-shrink-0 w-10 h-10',
18
- },
19
- }"
20
- :icon="getIcon"
21
- :description="dialog.meta?.description"
22
- :timeout="0"
23
- :title="dialog.meta?.title"
24
- :color="getColor"
25
- close-button=""
26
- />
27
- <div :class="[uiConfig.actionGroup.wrapper]">
28
- <Button
29
- v-if="dialog.meta?.isShowCancelBtn"
30
- :color="uiConfig.actionGroup.cancelColor"
31
- :variant="uiConfig.actionGroup.cancelVariant"
32
- type="button"
33
- @click="dialog.closeDialogCancel"
34
- >
35
- {{ dialog.meta?.cancelText || 'ยกเลิก' }}
36
- </Button>
37
- <Button
38
- :color="uiConfig.actionGroup.confirmColor"
39
- :variant="uiConfig.actionGroup.confirmVariant"
40
- :class="[
41
- {
42
- 'btn-success': dialog.meta?.type === DialogType.SUCCESS,
43
- 'btn-danger': dialog.meta?.type === DialogType.ERROR,
44
- 'btn-info': dialog.meta?.type === DialogType.INFO,
45
- 'btn-warning': dialog.meta?.type === DialogType.WARNING,
46
- 'mr-3': dialog.meta.isShowCancelBtn,
47
- },
48
- ]"
49
- @click="dialog.closeDialogProceed"
50
- >
51
- {{ dialog.meta?.confirmText || 'ตกลง' }}
52
- </Button>
53
- </div>
54
- </Modal>
55
- </template>
56
- <script lang="tsx" setup>
57
- import { DialogType, useDialog } from '#core/composables/useDialog'
58
- import { computed } from 'vue'
59
- import { useUiConfig } from '#core/composables/useConfig'
60
- import { notification } from '#core/ui.config/notification'
61
-
62
- const dialog = useDialog()
63
- const uiConfig = useUiConfig<typeof notification>(notification, 'notification')
64
-
65
- const getColor = computed(() => {
66
- if (dialog.meta?.type === DialogType.SUCCESS) {
67
- return 'success'
68
- }
69
-
70
- if (dialog.meta?.type === DialogType.ERROR) {
71
- return 'danger'
72
- }
73
-
74
- if (dialog.meta?.type === DialogType.INFO) {
75
- return 'info'
76
- }
77
-
78
- if (dialog.meta?.type === DialogType.WARNING) {
79
- return 'warning'
80
- }
81
-
82
- return ''
83
- })
84
-
85
- const getIcon = computed(() => {
86
- if (dialog.meta?.isHideIcon) {
87
- return ''
88
- }
89
-
90
- if (dialog.meta?.type === DialogType.SUCCESS) {
91
- return 'i-heroicons-check-circle'
92
- }
93
-
94
- if (dialog.meta?.type === DialogType.ERROR) {
95
- return 'i-heroicons-x-circle'
96
- }
97
-
98
- if (dialog.meta?.type === DialogType.INFO) {
99
- return 'i-heroicons-information-circle'
100
- }
101
-
102
- if (dialog.meta?.type === DialogType.WARNING) {
103
- return 'i-heroicons-exclamation-circle'
104
- }
105
-
106
- return ''
107
- })
108
- </script>
1
+ <template>
2
+ <Modal
3
+ v-if="dialog.meta?.type"
4
+ v-model="dialog.isShow"
5
+ :ui="{
6
+ innerWrapper: 'p-6',
7
+ }"
8
+ is-hide-close-btn
9
+ prevent-close
10
+ >
11
+ <UNotification
12
+ :ui="{
13
+ padding: '',
14
+ shadow: '',
15
+ ring: '',
16
+ icon: {
17
+ base: 'flex-shrink-0 w-10 h-10',
18
+ },
19
+ }"
20
+ :icon="getIcon"
21
+ :description="dialog.meta?.description"
22
+ :timeout="0"
23
+ :title="dialog.meta?.title"
24
+ :color="getColor"
25
+ close-button=""
26
+ />
27
+ <div :class="[uiConfig.actionGroup.wrapper]">
28
+ <Button
29
+ v-if="dialog.meta?.isShowCancelBtn"
30
+ :color="uiConfig.actionGroup.cancelColor"
31
+ :variant="uiConfig.actionGroup.cancelVariant"
32
+ type="button"
33
+ @click="dialog.closeDialogCancel"
34
+ >
35
+ {{ dialog.meta?.cancelText || 'ยกเลิก' }}
36
+ </Button>
37
+ <Button
38
+ :color="uiConfig.actionGroup.confirmColor"
39
+ :variant="uiConfig.actionGroup.confirmVariant"
40
+ :class="[
41
+ {
42
+ 'btn-success': dialog.meta?.type === DialogType.SUCCESS,
43
+ 'btn-danger': dialog.meta?.type === DialogType.ERROR,
44
+ 'btn-info': dialog.meta?.type === DialogType.INFO,
45
+ 'btn-warning': dialog.meta?.type === DialogType.WARNING,
46
+ 'mr-3': dialog.meta.isShowCancelBtn,
47
+ },
48
+ ]"
49
+ @click="dialog.closeDialogProceed"
50
+ >
51
+ {{ dialog.meta?.confirmText || 'ตกลง' }}
52
+ </Button>
53
+ </div>
54
+ </Modal>
55
+ </template>
56
+ <script lang="tsx" setup>
57
+ import { DialogType, useDialog } from '#core/composables/useDialog'
58
+ import { computed } from 'vue'
59
+ import { useUiConfig } from '#core/composables/useConfig'
60
+ import { notification } from '#core/ui.config/notification'
61
+
62
+ const dialog = useDialog()
63
+ const uiConfig = useUiConfig<typeof notification>(notification, 'notification')
64
+
65
+ const getColor = computed(() => {
66
+ if (dialog.meta?.type === DialogType.SUCCESS) {
67
+ return 'success'
68
+ }
69
+
70
+ if (dialog.meta?.type === DialogType.ERROR) {
71
+ return 'danger'
72
+ }
73
+
74
+ if (dialog.meta?.type === DialogType.INFO) {
75
+ return 'info'
76
+ }
77
+
78
+ if (dialog.meta?.type === DialogType.WARNING) {
79
+ return 'warning'
80
+ }
81
+
82
+ return ''
83
+ })
84
+
85
+ const getIcon = computed(() => {
86
+ if (dialog.meta?.isHideIcon) {
87
+ return ''
88
+ }
89
+
90
+ if (dialog.meta?.type === DialogType.SUCCESS) {
91
+ return 'i-heroicons-check-circle'
92
+ }
93
+
94
+ if (dialog.meta?.type === DialogType.ERROR) {
95
+ return 'i-heroicons-x-circle'
96
+ }
97
+
98
+ if (dialog.meta?.type === DialogType.INFO) {
99
+ return 'i-heroicons-information-circle'
100
+ }
101
+
102
+ if (dialog.meta?.type === DialogType.WARNING) {
103
+ return 'i-heroicons-exclamation-circle'
104
+ }
105
+
106
+ return ''
107
+ })
108
+ </script>
@@ -1,70 +1,70 @@
1
- <template>
2
- <UDropdown
3
- v-bind="attrs"
4
- :class="$props.class"
5
- :items="items"
6
- :mode="mode"
7
- :open-delay="openDelay"
8
- :close-delay="closeDelay"
9
- :popper="{ placement: placement, arrow: arrow, offsetDistance: offset }"
10
- :ui="ui"
11
- >
12
- <slot />
13
-
14
- <template v-for="(_, slot) of $slots" #[slot]="slotProps">
15
- <slot :name="slot" v-bind="slotProps || {}" />
16
- </template>
17
- </UDropdown>
18
- </template>
19
-
20
- <script lang="ts" setup>
21
- import { type PropType, useUiConfig, useUI, toRef } from '#imports'
22
- import { dropdown } from '#ui/ui.config'
23
- import { DropdownPlacementArray, type DropdownPlacement } from './types'
24
- import type { DropdownItem, Strategy } from '#ui/types'
25
-
26
- const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
27
-
28
- const props = defineProps({
29
- items: {
30
- type: Array as PropType<DropdownItem[][]>,
31
- default: () => [],
32
- },
33
- mode: {
34
- type: String as PropType<'click' | 'hover'>,
35
- default: 'click',
36
- validator: (value: string) => ['click', 'hover'].includes(value),
37
- },
38
- arrow: {
39
- type: Boolean,
40
- default: false,
41
- },
42
- offset: {
43
- type: Number,
44
- default: 10,
45
- },
46
- openDelay: {
47
- type: Number,
48
- default: 0,
49
- },
50
- closeDelay: {
51
- type: Number,
52
- default: 0,
53
- },
54
- placement: {
55
- type: String as PropType<DropdownPlacement>,
56
- default: 'bottom-start',
57
- validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
58
- },
59
- class: {
60
- type: [String, Array, Object] as PropType<any>,
61
- default: () => '',
62
- },
63
- ui: {
64
- type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
65
- default: () => ({}),
66
- },
67
- })
68
-
69
- const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
70
- </script>
1
+ <template>
2
+ <UDropdown
3
+ v-bind="attrs"
4
+ :class="$props.class"
5
+ :items="items"
6
+ :mode="mode"
7
+ :open-delay="openDelay"
8
+ :close-delay="closeDelay"
9
+ :popper="{ placement: placement, arrow: arrow, offsetDistance: offset }"
10
+ :ui="ui"
11
+ >
12
+ <slot />
13
+
14
+ <template v-for="(_, slot) of $slots" #[slot]="slotProps">
15
+ <slot :name="slot" v-bind="slotProps || {}" />
16
+ </template>
17
+ </UDropdown>
18
+ </template>
19
+
20
+ <script lang="ts" setup>
21
+ import { type PropType, useUiConfig, useUI, toRef } from '#imports'
22
+ import { dropdown } from '#ui/ui.config'
23
+ import { DropdownPlacementArray, type DropdownPlacement } from './types'
24
+ import type { DropdownItem, Strategy } from '#ui/types'
25
+
26
+ const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
27
+
28
+ const props = defineProps({
29
+ items: {
30
+ type: Array as PropType<DropdownItem[][]>,
31
+ default: () => [],
32
+ },
33
+ mode: {
34
+ type: String as PropType<'click' | 'hover'>,
35
+ default: 'click',
36
+ validator: (value: string) => ['click', 'hover'].includes(value),
37
+ },
38
+ arrow: {
39
+ type: Boolean,
40
+ default: false,
41
+ },
42
+ offset: {
43
+ type: Number,
44
+ default: 10,
45
+ },
46
+ openDelay: {
47
+ type: Number,
48
+ default: 0,
49
+ },
50
+ closeDelay: {
51
+ type: Number,
52
+ default: 0,
53
+ },
54
+ placement: {
55
+ type: String as PropType<DropdownPlacement>,
56
+ default: 'bottom-start',
57
+ validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
58
+ },
59
+ class: {
60
+ type: [String, Array, Object] as PropType<any>,
61
+ default: () => '',
62
+ },
63
+ ui: {
64
+ type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
65
+ default: () => ({}),
66
+ },
67
+ })
68
+
69
+ const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
70
+ </script>