@finema/core 1.4.90 → 1.4.92

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 (60) hide show
  1. package/README.md +63 -63
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +3 -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 +53 -53
  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 +76 -76
  10. package/dist/runtime/components/Card.vue +38 -38
  11. package/dist/runtime/components/Core.vue +13 -13
  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 +90 -90
  15. package/dist/runtime/components/FlexDeck/index.vue +66 -66
  16. package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
  17. package/dist/runtime/components/Form/Fields.vue +168 -160
  18. package/dist/runtime/components/Form/InputCheckbox/index.vue +21 -21
  19. package/dist/runtime/components/Form/InputDateTime/index.vue +60 -60
  20. package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
  21. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  22. package/dist/runtime/components/Form/InputSelect/index.vue +36 -36
  23. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  24. package/dist/runtime/components/Form/InputText/index.vue +67 -67
  25. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  26. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  27. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +205 -158
  28. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +349 -243
  29. package/dist/runtime/components/Form/InputUploadDropzoneAuto/types.d.ts +3 -0
  30. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/Item.vue +282 -0
  31. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +117 -0
  32. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/types.d.ts +22 -0
  33. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/types.mjs +0 -0
  34. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +101 -101
  35. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +174 -174
  36. package/dist/runtime/components/Form/index.vue +6 -6
  37. package/dist/runtime/components/Form/types.d.ts +4 -2
  38. package/dist/runtime/components/Form/types.mjs +1 -0
  39. package/dist/runtime/components/Icon.vue +23 -23
  40. package/dist/runtime/components/Image.vue +36 -36
  41. package/dist/runtime/components/Loader.vue +27 -27
  42. package/dist/runtime/components/Modal/index.vue +146 -146
  43. package/dist/runtime/components/SimplePagination.vue +96 -96
  44. package/dist/runtime/components/Slideover/index.vue +110 -110
  45. package/dist/runtime/components/Table/Base.vue +139 -139
  46. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  47. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  48. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  49. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  50. package/dist/runtime/components/Table/ColumnText.vue +25 -25
  51. package/dist/runtime/components/Table/Simple.vue +69 -69
  52. package/dist/runtime/components/Table/index.vue +65 -65
  53. package/dist/runtime/components/Tabs/index.vue +64 -64
  54. package/dist/runtime/helpers/componentHelper.d.ts +9 -0
  55. package/dist/runtime/helpers/componentHelper.mjs +30 -0
  56. package/dist/runtime/ui.config/uploadFileDropzone.d.ts +36 -13
  57. package/dist/runtime/ui.config/uploadFileDropzone.mjs +42 -19
  58. package/dist/runtime/utils/StringHelper.d.ts +1 -0
  59. package/dist/runtime/utils/StringHelper.mjs +6 -0
  60. package/package.json +88 -88
@@ -1,76 +1,76 @@
1
- <template>
2
- <UButton v-bind="$props">
3
- <template #leading><slot name="leading" :disabled="disabled" :loading="loading" /></template>
4
- <slot />
5
- <template #trailing><slot name="trailing" :disabled="disabled" :loading="loading" /></template>
6
- </UButton>
7
- </template>
8
-
9
- <script lang="ts" setup>
10
- import { type button } from '#ui/ui.config'
11
- import { UButton } from '#components'
12
- import type { ButtonColor, ButtonSize, ButtonVariant } from '#ui/types/button'
13
- import type { PropType } from 'vue'
14
-
15
- defineProps({
16
- ...UButton.props,
17
- label: {
18
- type: String,
19
- },
20
- type: {
21
- type: String as PropType<'button' | 'submit' | 'reset'>,
22
- },
23
- block: {
24
- type: Boolean,
25
- },
26
- loading: {
27
- type: Boolean,
28
- },
29
- disabled: {
30
- type: Boolean,
31
- },
32
- padded: {
33
- type: Boolean,
34
- default: true,
35
- },
36
- size: {
37
- type: String as PropType<ButtonSize>,
38
- },
39
- color: {
40
- type: String as PropType<ButtonColor>,
41
- },
42
- variant: {
43
- type: String as PropType<ButtonVariant>,
44
- },
45
- loadingIcon: {
46
- type: String,
47
- },
48
- icon: {
49
- type: String,
50
- },
51
- leadingIcon: {
52
- type: String,
53
- },
54
- trailingIcon: {
55
- type: String,
56
- },
57
- trailing: {
58
- type: Boolean,
59
- },
60
- leading: {
61
- type: Boolean,
62
- },
63
- square: {
64
- type: Boolean,
65
- },
66
- truncate: {
67
- type: Boolean,
68
- },
69
- class: {
70
- type: [String, Array, Object] as PropType<any>,
71
- },
72
- ui: {
73
- type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
74
- },
75
- })
76
- </script>
1
+ <template>
2
+ <UButton v-bind="$props">
3
+ <template #leading><slot name="leading" :disabled="disabled" :loading="loading" /></template>
4
+ <slot />
5
+ <template #trailing><slot name="trailing" :disabled="disabled" :loading="loading" /></template>
6
+ </UButton>
7
+ </template>
8
+
9
+ <script lang="ts" setup>
10
+ import { type button } from '#ui/ui.config'
11
+ import { UButton } from '#components'
12
+ import type { ButtonColor, ButtonSize, ButtonVariant } from '#ui/types/button'
13
+ import type { PropType } from 'vue'
14
+
15
+ defineProps({
16
+ ...UButton.props,
17
+ label: {
18
+ type: String,
19
+ },
20
+ type: {
21
+ type: String as PropType<'button' | 'submit' | 'reset'>,
22
+ },
23
+ block: {
24
+ type: Boolean,
25
+ },
26
+ loading: {
27
+ type: Boolean,
28
+ },
29
+ disabled: {
30
+ type: Boolean,
31
+ },
32
+ padded: {
33
+ type: Boolean,
34
+ default: true,
35
+ },
36
+ size: {
37
+ type: String as PropType<ButtonSize>,
38
+ },
39
+ color: {
40
+ type: String as PropType<ButtonColor>,
41
+ },
42
+ variant: {
43
+ type: String as PropType<ButtonVariant>,
44
+ },
45
+ loadingIcon: {
46
+ type: String,
47
+ },
48
+ icon: {
49
+ type: String,
50
+ },
51
+ leadingIcon: {
52
+ type: String,
53
+ },
54
+ trailingIcon: {
55
+ type: String,
56
+ },
57
+ trailing: {
58
+ type: Boolean,
59
+ },
60
+ leading: {
61
+ type: Boolean,
62
+ },
63
+ square: {
64
+ type: Boolean,
65
+ },
66
+ truncate: {
67
+ type: Boolean,
68
+ },
69
+ class: {
70
+ type: [String, Array, Object] as PropType<any>,
71
+ },
72
+ ui: {
73
+ type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
74
+ },
75
+ })
76
+ </script>
@@ -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,13 +1,13 @@
1
- <template>
2
- <NuxtLoadingIndicator :color="color" />
3
- <Dialog />
4
- <UNotifications />
5
- </template>
6
- <script lang="ts" setup>
7
- defineProps({
8
- color: {
9
- type: String,
10
- default: '#3675FB',
11
- },
12
- })
13
- </script>
1
+ <template>
2
+ <NuxtLoadingIndicator :color="color" />
3
+ <Dialog />
4
+ <UNotifications />
5
+ </template>
6
+ <script lang="ts" setup>
7
+ defineProps({
8
+ color: {
9
+ type: String,
10
+ default: '#3675FB',
11
+ },
12
+ })
13
+ </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>