@finema/core 1.4.159 → 1.4.161

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 (62) hide show
  1. package/README.md +60 -60
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +59 -17
  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 +45 -45
  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/index.vue +83 -83
  21. package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
  22. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  23. package/dist/runtime/components/Form/InputSelect/index.vue +45 -45
  24. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +54 -54
  25. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  26. package/dist/runtime/components/Form/InputTags/index.vue +145 -145
  27. package/dist/runtime/components/Form/InputText/index.vue +67 -67
  28. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  29. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  30. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
  31. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +342 -342
  32. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemUpload.vue +241 -241
  33. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +89 -89
  34. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +164 -164
  35. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemUpload.vue +161 -161
  36. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemView.vue +64 -64
  37. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +172 -172
  38. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
  39. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +151 -151
  40. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +219 -219
  41. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +53 -53
  42. package/dist/runtime/components/Form/index.vue +6 -6
  43. package/dist/runtime/components/Icon.vue +23 -23
  44. package/dist/runtime/components/Image.vue +36 -36
  45. package/dist/runtime/components/Loader.vue +27 -27
  46. package/dist/runtime/components/Modal/index.vue +146 -146
  47. package/dist/runtime/components/QRCode.vue +22 -22
  48. package/dist/runtime/components/SimplePagination.vue +96 -96
  49. package/dist/runtime/components/Slideover/index.vue +110 -110
  50. package/dist/runtime/components/Table/Base.vue +139 -139
  51. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  52. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  53. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  54. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  55. package/dist/runtime/components/Table/ColumnText.vue +25 -25
  56. package/dist/runtime/components/Table/Simple.vue +69 -69
  57. package/dist/runtime/components/Table/index.vue +65 -65
  58. package/dist/runtime/components/Tabs/index.vue +64 -64
  59. package/dist/runtime/components/TeleportSafe.vue +40 -40
  60. package/dist/runtime/composables/useNotification.mjs +13 -4
  61. package/dist/runtime/ui.config/notification.mjs +4 -0
  62. package/package.json +95 -95
@@ -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>