@finema/core 1.4.23 → 1.4.24

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 (44) hide show
  1. package/README.md +63 -63
  2. package/dist/module.d.mts +4 -4
  3. package/dist/module.d.ts +4 -4
  4. package/dist/module.json +1 -1
  5. package/dist/module.mjs +1 -1
  6. package/dist/runtime/components/Alert.vue +49 -49
  7. package/dist/runtime/components/Avatar.vue +27 -27
  8. package/dist/runtime/components/Badge.vue +54 -54
  9. package/dist/runtime/components/Breadcrumb.vue +45 -45
  10. package/dist/runtime/components/Button/Group.vue +37 -37
  11. package/dist/runtime/components/Button/index.vue +77 -77
  12. package/dist/runtime/components/Card.vue +38 -38
  13. package/dist/runtime/components/Core.vue +13 -13
  14. package/dist/runtime/components/Dialog/index.vue +98 -98
  15. package/dist/runtime/components/Dropdown/index.vue +71 -71
  16. package/dist/runtime/components/Form/FieldWrapper.vue +21 -21
  17. package/dist/runtime/components/Form/Fields.vue +129 -129
  18. package/dist/runtime/components/Form/InputCheckbox/index.vue +21 -21
  19. package/dist/runtime/components/Form/InputDateTime/index.vue +51 -51
  20. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  21. package/dist/runtime/components/Form/InputSelect/index.vue +37 -37
  22. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  23. package/dist/runtime/components/Form/InputText/index.vue +27 -27
  24. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  25. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  26. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +36 -36
  27. package/dist/runtime/components/Form/index.vue +6 -6
  28. package/dist/runtime/components/Icon.vue +23 -23
  29. package/dist/runtime/components/Image.vue +36 -36
  30. package/dist/runtime/components/Loader.vue +14 -14
  31. package/dist/runtime/components/Modal/index.vue +146 -146
  32. package/dist/runtime/components/SimplePagination.vue +96 -96
  33. package/dist/runtime/components/Slideover/index.vue +110 -110
  34. package/dist/runtime/components/Table/Base.vue +127 -127
  35. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  36. package/dist/runtime/components/Table/ColumnDateTime.vue +30 -30
  37. package/dist/runtime/components/Table/ColumnImage.vue +13 -13
  38. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  39. package/dist/runtime/components/Table/Simple.vue +57 -57
  40. package/dist/runtime/components/Table/index.vue +52 -52
  41. package/dist/runtime/components/Tabs/index.vue +65 -65
  42. package/dist/runtime/types/utils.d.ts +29 -29
  43. package/dist/runtime/ui.css +32 -32
  44. package/package.json +86 -86
@@ -1,77 +1,77 @@
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 PropType } from '#imports'
11
- import { type ButtonSize, type ButtonColor, type ButtonVariant } from '#ui/types/button'
12
- import { type Strategy } from '#core/types/utils'
13
- import { type button } from '#ui/ui.config'
14
- import { UButton } from '#components'
15
-
16
- defineProps({
17
- ...UButton.props,
18
- label: {
19
- type: String,
20
- },
21
- type: {
22
- type: String as PropType<'button' | 'submit' | 'reset'>,
23
- },
24
- block: {
25
- type: Boolean,
26
- },
27
- loading: {
28
- type: Boolean,
29
- },
30
- disabled: {
31
- type: Boolean,
32
- },
33
- padded: {
34
- type: Boolean,
35
- default: true,
36
- },
37
- size: {
38
- type: String as PropType<ButtonSize>,
39
- },
40
- color: {
41
- type: String as PropType<ButtonColor>,
42
- },
43
- variant: {
44
- type: String as PropType<ButtonVariant>,
45
- },
46
- loadingIcon: {
47
- type: String,
48
- },
49
- icon: {
50
- type: String,
51
- },
52
- leadingIcon: {
53
- type: String,
54
- },
55
- trailingIcon: {
56
- type: String,
57
- },
58
- trailing: {
59
- type: Boolean,
60
- },
61
- leading: {
62
- type: Boolean,
63
- },
64
- square: {
65
- type: Boolean,
66
- },
67
- truncate: {
68
- type: Boolean,
69
- },
70
- class: {
71
- type: [String, Array, Object] as PropType<any>,
72
- },
73
- ui: {
74
- type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
75
- },
76
- })
77
- </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 PropType } from '#imports'
11
+ import { type ButtonSize, type ButtonColor, type ButtonVariant } from '#ui/types/button'
12
+ import { type Strategy } from '#core/types/utils'
13
+ import { type button } from '#ui/ui.config'
14
+ import { UButton } from '#components'
15
+
16
+ defineProps({
17
+ ...UButton.props,
18
+ label: {
19
+ type: String,
20
+ },
21
+ type: {
22
+ type: String as PropType<'button' | 'submit' | 'reset'>,
23
+ },
24
+ block: {
25
+ type: Boolean,
26
+ },
27
+ loading: {
28
+ type: Boolean,
29
+ },
30
+ disabled: {
31
+ type: Boolean,
32
+ },
33
+ padded: {
34
+ type: Boolean,
35
+ default: true,
36
+ },
37
+ size: {
38
+ type: String as PropType<ButtonSize>,
39
+ },
40
+ color: {
41
+ type: String as PropType<ButtonColor>,
42
+ },
43
+ variant: {
44
+ type: String as PropType<ButtonVariant>,
45
+ },
46
+ loadingIcon: {
47
+ type: String,
48
+ },
49
+ icon: {
50
+ type: String,
51
+ },
52
+ leadingIcon: {
53
+ type: String,
54
+ },
55
+ trailingIcon: {
56
+ type: String,
57
+ },
58
+ trailing: {
59
+ type: Boolean,
60
+ },
61
+ leading: {
62
+ type: Boolean,
63
+ },
64
+ square: {
65
+ type: Boolean,
66
+ },
67
+ truncate: {
68
+ type: Boolean,
69
+ },
70
+ class: {
71
+ type: [String, Array, Object] as PropType<any>,
72
+ },
73
+ ui: {
74
+ type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
75
+ },
76
+ })
77
+ </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 type { Strategy } from '#core/types/utils'
18
- import { card } from '#core/ui.config'
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 type { Strategy } from '#core/types/utils'
18
+ import { card } from '#core/ui.config'
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,98 +1,98 @@
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="['mt-5 flex justify-end']">
28
- <Button
29
- v-if="dialog.meta?.isShowCancelBtn"
30
- class="text-gray mr-4"
31
- type="button"
32
- @click="dialog.closeDialogCancel"
33
- >
34
- {{ dialog.meta?.cancelText || 'ยกเลิก' }}
35
- </Button>
36
- <Button
37
- :class="[
38
- {
39
- 'btn-success': dialog.meta?.type === DialogType.SUCCESS,
40
- 'btn-danger': dialog.meta?.type === DialogType.ERROR,
41
- 'btn-info': dialog.meta?.type === DialogType.INFO,
42
- 'btn-warning': dialog.meta?.type === DialogType.WARNING,
43
- 'mr-3': dialog.meta.isShowCancelBtn,
44
- },
45
- ]"
46
- @click="dialog.closeDialogProceed"
47
- >
48
- {{ dialog.meta?.confirmText || 'ตกลง' }}
49
- </Button>
50
- </div>
51
- </Modal>
52
- </template>
53
- <script lang="tsx" setup>
54
- import { DialogType, useDialog } from '#core/composables/useDialog'
55
- import { computed } from 'vue'
56
-
57
- const dialog = useDialog()
58
-
59
- const getColor = computed(() => {
60
- if (dialog.meta?.type === DialogType.SUCCESS) {
61
- return 'success'
62
- }
63
-
64
- if (dialog.meta?.type === DialogType.ERROR) {
65
- return 'danger'
66
- }
67
-
68
- if (dialog.meta?.type === DialogType.INFO) {
69
- return 'info'
70
- }
71
-
72
- if (dialog.meta?.type === DialogType.WARNING) {
73
- return 'warning'
74
- }
75
-
76
- return ''
77
- })
78
-
79
- const getIcon = computed(() => {
80
- if (dialog.meta?.type === DialogType.SUCCESS) {
81
- return 'i-heroicons-check-circle'
82
- }
83
-
84
- if (dialog.meta?.type === DialogType.ERROR) {
85
- return 'i-heroicons-x-circle'
86
- }
87
-
88
- if (dialog.meta?.type === DialogType.INFO) {
89
- return 'i-heroicons-information-circle'
90
- }
91
-
92
- if (dialog.meta?.type === DialogType.WARNING) {
93
- return 'i-heroicon-sexclamation-circle'
94
- }
95
-
96
- return ''
97
- })
98
- </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="['mt-5 flex justify-end']">
28
+ <Button
29
+ v-if="dialog.meta?.isShowCancelBtn"
30
+ class="text-gray mr-4"
31
+ type="button"
32
+ @click="dialog.closeDialogCancel"
33
+ >
34
+ {{ dialog.meta?.cancelText || 'ยกเลิก' }}
35
+ </Button>
36
+ <Button
37
+ :class="[
38
+ {
39
+ 'btn-success': dialog.meta?.type === DialogType.SUCCESS,
40
+ 'btn-danger': dialog.meta?.type === DialogType.ERROR,
41
+ 'btn-info': dialog.meta?.type === DialogType.INFO,
42
+ 'btn-warning': dialog.meta?.type === DialogType.WARNING,
43
+ 'mr-3': dialog.meta.isShowCancelBtn,
44
+ },
45
+ ]"
46
+ @click="dialog.closeDialogProceed"
47
+ >
48
+ {{ dialog.meta?.confirmText || 'ตกลง' }}
49
+ </Button>
50
+ </div>
51
+ </Modal>
52
+ </template>
53
+ <script lang="tsx" setup>
54
+ import { DialogType, useDialog } from '#core/composables/useDialog'
55
+ import { computed } from 'vue'
56
+
57
+ const dialog = useDialog()
58
+
59
+ const getColor = computed(() => {
60
+ if (dialog.meta?.type === DialogType.SUCCESS) {
61
+ return 'success'
62
+ }
63
+
64
+ if (dialog.meta?.type === DialogType.ERROR) {
65
+ return 'danger'
66
+ }
67
+
68
+ if (dialog.meta?.type === DialogType.INFO) {
69
+ return 'info'
70
+ }
71
+
72
+ if (dialog.meta?.type === DialogType.WARNING) {
73
+ return 'warning'
74
+ }
75
+
76
+ return ''
77
+ })
78
+
79
+ const getIcon = computed(() => {
80
+ if (dialog.meta?.type === DialogType.SUCCESS) {
81
+ return 'i-heroicons-check-circle'
82
+ }
83
+
84
+ if (dialog.meta?.type === DialogType.ERROR) {
85
+ return 'i-heroicons-x-circle'
86
+ }
87
+
88
+ if (dialog.meta?.type === DialogType.INFO) {
89
+ return 'i-heroicons-information-circle'
90
+ }
91
+
92
+ if (dialog.meta?.type === DialogType.WARNING) {
93
+ return 'i-heroicons-sexclamation-circle'
94
+ }
95
+
96
+ return ''
97
+ })
98
+ </script>
@@ -1,71 +1,71 @@
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 { type DropdownItem } from '#ui/types'
23
- import type { Strategy } from '#core/types/utils'
24
- import { dropdown } from '#ui/ui.config'
25
- import { DropdownPlacementArray, type DropdownPlacement } from './types'
26
-
27
- const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
28
-
29
- const props = defineProps({
30
- items: {
31
- type: Array as PropType<DropdownItem[][]>,
32
- default: () => [],
33
- },
34
- mode: {
35
- type: String as PropType<'click' | 'hover'>,
36
- default: 'click',
37
- validator: (value: string) => ['click', 'hover'].includes(value),
38
- },
39
- arrow: {
40
- type: Boolean,
41
- default: false,
42
- },
43
- offset: {
44
- type: Number,
45
- default: 10,
46
- },
47
- openDelay: {
48
- type: Number,
49
- default: 0,
50
- },
51
- closeDelay: {
52
- type: Number,
53
- default: 0,
54
- },
55
- placement: {
56
- type: String as PropType<DropdownPlacement>,
57
- default: 'bottom-start',
58
- validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
59
- },
60
- class: {
61
- type: [String, Array, Object] as PropType<any>,
62
- default: () => '',
63
- },
64
- ui: {
65
- type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
66
- default: () => ({}),
67
- },
68
- })
69
-
70
- const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
71
- </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 { type DropdownItem } from '#ui/types'
23
+ import type { Strategy } from '#core/types/utils'
24
+ import { dropdown } from '#ui/ui.config'
25
+ import { DropdownPlacementArray, type DropdownPlacement } from './types'
26
+
27
+ const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
28
+
29
+ const props = defineProps({
30
+ items: {
31
+ type: Array as PropType<DropdownItem[][]>,
32
+ default: () => [],
33
+ },
34
+ mode: {
35
+ type: String as PropType<'click' | 'hover'>,
36
+ default: 'click',
37
+ validator: (value: string) => ['click', 'hover'].includes(value),
38
+ },
39
+ arrow: {
40
+ type: Boolean,
41
+ default: false,
42
+ },
43
+ offset: {
44
+ type: Number,
45
+ default: 10,
46
+ },
47
+ openDelay: {
48
+ type: Number,
49
+ default: 0,
50
+ },
51
+ closeDelay: {
52
+ type: Number,
53
+ default: 0,
54
+ },
55
+ placement: {
56
+ type: String as PropType<DropdownPlacement>,
57
+ default: 'bottom-start',
58
+ validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
59
+ },
60
+ class: {
61
+ type: [String, Array, Object] as PropType<any>,
62
+ default: () => '',
63
+ },
64
+ ui: {
65
+ type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
66
+ default: () => ({}),
67
+ },
68
+ })
69
+
70
+ const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
71
+ </script>
@@ -1,21 +1,21 @@
1
- <template>
2
- <UFormGroup
3
- :label="label"
4
- :name="name"
5
- :description="description"
6
- :hint="hint"
7
- :size="size"
8
- :data-testid="name"
9
- :help="help"
10
- :error="errorMessage"
11
- :required="!!isRequired"
12
- :ui="containerUi"
13
- >
14
- <slot />
15
- </UFormGroup>
16
- </template>
17
- <script lang="ts" setup>
18
- import { type IFieldProps } from '#core/components/Form/types'
19
-
20
- defineProps<IFieldProps>()
21
- </script>
1
+ <template>
2
+ <UFormGroup
3
+ :label="label"
4
+ :name="name"
5
+ :description="description"
6
+ :hint="hint"
7
+ :size="size"
8
+ :data-testid="name"
9
+ :help="help"
10
+ :error="errorMessage"
11
+ :required="!!isRequired"
12
+ :ui="containerUi"
13
+ >
14
+ <slot />
15
+ </UFormGroup>
16
+ </template>
17
+ <script lang="ts" setup>
18
+ import { type IFieldProps } from '#core/components/Form/types'
19
+
20
+ defineProps<IFieldProps>()
21
+ </script>