@finema/core 1.4.161 → 1.4.162

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 +60 -60
  2. package/dist/module.json +1 -1
  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 +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/package.json +95 -95
@@ -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,45 +1,45 @@
1
- <template>
2
- <NuxtLoadingIndicator :color="color" />
3
- <Dialog />
4
- <UNotifications>
5
- <template #title="{ title }">
6
- <span v-html="title" />
7
- </template>
8
-
9
- <template #description="{ description }">
10
- <span v-html="description" />
11
- </template>
12
- </UNotifications>
13
- <div v-if="isDevEnv" class="fixed bottom-4 right-4 z-50">
14
- <div class="flex flex-col items-end justify-end">
15
- <div
16
- v-show="isShowDevTools"
17
- class="max-w-screen mb-4 h-[750px] max-h-screen w-[600px] overflow-auto rounded-lg border bg-white opacity-80 shadow-2xl"
18
- >
19
- <p class="p-3 text-lg font-semibold">Debug Tools</p>
20
- <hr />
21
- <div id="dev-logs" class="flex flex-col space-y-3 p-3" />
22
- </div>
23
- <Button
24
- :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
25
- color="info"
26
- square
27
- :ui="{ rounded: 'rounded-full' }"
28
- @click="isShowDevTools = !isShowDevTools"
29
- />
30
- </div>
31
- </div>
32
- </template>
33
- <script lang="ts" setup>
34
- import { ref } from 'vue'
35
-
36
- defineProps({
37
- color: {
38
- type: String,
39
- default: '#3675FB',
40
- },
41
- })
42
-
43
- const isShowDevTools = ref(false)
44
- const isDevEnv = process.env.NODE_ENV === 'development'
45
- </script>
1
+ <template>
2
+ <NuxtLoadingIndicator :color="color" />
3
+ <Dialog />
4
+ <UNotifications>
5
+ <template #title="{ title }">
6
+ <span v-html="title" />
7
+ </template>
8
+
9
+ <template #description="{ description }">
10
+ <span v-html="description" />
11
+ </template>
12
+ </UNotifications>
13
+ <div v-if="isDevEnv" class="fixed bottom-4 right-4 z-50">
14
+ <div class="flex flex-col items-end justify-end">
15
+ <div
16
+ v-show="isShowDevTools"
17
+ class="max-w-screen mb-4 h-[750px] max-h-screen w-[600px] overflow-auto rounded-lg border bg-white opacity-80 shadow-2xl"
18
+ >
19
+ <p class="p-3 text-lg font-semibold">Debug Tools</p>
20
+ <hr />
21
+ <div id="dev-logs" class="flex flex-col space-y-3 p-3" />
22
+ </div>
23
+ <Button
24
+ :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
25
+ color="info"
26
+ square
27
+ :ui="{ rounded: 'rounded-full' }"
28
+ @click="isShowDevTools = !isShowDevTools"
29
+ />
30
+ </div>
31
+ </div>
32
+ </template>
33
+ <script lang="ts" setup>
34
+ import { ref } from 'vue'
35
+
36
+ defineProps({
37
+ color: {
38
+ type: String,
39
+ default: '#3675FB',
40
+ },
41
+ })
42
+
43
+ const isShowDevTools = ref(false)
44
+ const isDevEnv = process.env.NODE_ENV === 'development'
45
+ </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>