@finema/core 1.4.9 → 1.4.11

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 (42) hide show
  1. package/README.md +60 -60
  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 -11
  14. package/dist/runtime/components/Dialog/index.vue +63 -63
  15. package/dist/runtime/components/Dropdown/index.vue +81 -81
  16. package/dist/runtime/components/Form/FieldWrapper.vue +20 -20
  17. package/dist/runtime/components/Form/Fields.vue +86 -86
  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/index.vue +6 -6
  27. package/dist/runtime/components/Icon.vue +23 -23
  28. package/dist/runtime/components/Loader.vue +6 -6
  29. package/dist/runtime/components/Modal/index.vue +146 -146
  30. package/dist/runtime/components/Slideover/index.vue +110 -110
  31. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  32. package/dist/runtime/components/Table/ColumnDateTime.vue +30 -30
  33. package/dist/runtime/components/Table/ColumnImage.vue +13 -13
  34. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  35. package/dist/runtime/components/Table/Simple.vue +53 -53
  36. package/dist/runtime/components/Table/index.vue +47 -47
  37. package/dist/runtime/components/Tabs/index.vue +65 -65
  38. package/dist/runtime/composables/app.d.ts +38 -0
  39. package/dist/runtime/composables/app.mjs +32 -0
  40. package/dist/runtime/types/utils.d.ts +29 -29
  41. package/dist/runtime/ui.css +46 -46
  42. package/package.json +1 -1
@@ -1,23 +1,23 @@
1
- <template>
2
- <UIcon :name="name" :dynamic="dynamicValue" />
3
- </template>
4
-
5
- <script lang="ts" setup>
6
- import { computed, useUiConfig } from '#imports'
7
- import { icon } from '#core/ui.config'
8
-
9
- const props = defineProps({
10
- name: {
11
- type: String,
12
- required: true,
13
- },
14
- dynamic: {
15
- type: Boolean,
16
- default: false,
17
- },
18
- })
19
-
20
- const config = useUiConfig<typeof icon>(icon, 'icon')
21
-
22
- const dynamicValue = computed(() => props.dynamic || config.dynamic)
23
- </script>
1
+ <template>
2
+ <UIcon :name="name" :dynamic="dynamicValue" />
3
+ </template>
4
+
5
+ <script lang="ts" setup>
6
+ import { computed, useUiConfig } from '#imports'
7
+ import { icon } from '#core/ui.config'
8
+
9
+ const props = defineProps({
10
+ name: {
11
+ type: String,
12
+ required: true,
13
+ },
14
+ dynamic: {
15
+ type: Boolean,
16
+ default: false,
17
+ },
18
+ })
19
+
20
+ const config = useUiConfig<typeof icon>(icon, 'icon')
21
+
22
+ const dynamicValue = computed(() => props.dynamic || config.dynamic)
23
+ </script>
@@ -1,6 +1,6 @@
1
- <template>
2
- <div>
3
- <UIcon name="i-heroicons-arrow-path w-12 h-12 animate-spin" />
4
- </div>
5
- </template>
6
- <script lang="ts" setup></script>
1
+ <template>
2
+ <div>
3
+ <UIcon name="i-heroicons-arrow-path w-12 h-12 animate-spin" />
4
+ </div>
5
+ </template>
6
+ <script lang="ts" setup></script>
@@ -1,146 +1,146 @@
1
- <template>
2
- <UModal
3
- v-bind="attrs"
4
- :model-value="modelValue"
5
- :class="$props.class"
6
- :overlay="overlay"
7
- :transition="transition"
8
- :prevent-close="preventClose"
9
- :fullscreen="fullscreen"
10
- :initial-focus="modalWrapper"
11
- :ui="ui"
12
- @update:model-value="$emit('update:modelValue', $event)"
13
- >
14
- <div
15
- v-if="title"
16
- :class="[ui.header, { 'flex items-center justify-between': !isHideCloseBtn }]"
17
- >
18
- <h1 class="text-xl font-medium">{{ title }}</h1>
19
- <Icon
20
- v-if="!isHideCloseBtn"
21
- name="i-heroicons-x-mark"
22
- class="h-6 w-6 cursor-pointer"
23
- @click="close"
24
- />
25
- </div>
26
-
27
- <div
28
- v-if="(!title && !isHideCloseBtn && preventClose) || fullscreen"
29
- class="absolute right-0 m-4"
30
- >
31
- <Icon
32
- v-if="!isHideCloseBtn"
33
- name="i-heroicons-x-mark"
34
- class="h-6 w-6 cursor-pointer"
35
- @click="close"
36
- />
37
- </div>
38
-
39
- <div ref="modalWrapper" :class="['overflow-y-auto', ui.innerWrapper]">
40
- <slot />
41
- </div>
42
- </UModal>
43
- </template>
44
-
45
- <script lang="ts" setup>
46
- import { type PropType, defineShortcuts, ref, toRef, watch } from '#imports'
47
- import type { Strategy } from '#core/types/utils'
48
- import { useUI } from '#ui/composables/useUI'
49
- import { modal } from '#core/ui.config'
50
- import { useUiConfig } from '#core/composables/useConfig'
51
-
52
- const config = useUiConfig<typeof modal>(modal, 'modal')
53
-
54
- const props = defineProps({
55
- modelValue: {
56
- type: Boolean,
57
- default: false,
58
- },
59
- overlay: {
60
- type: Boolean,
61
- default: true,
62
- },
63
- transition: {
64
- type: Boolean,
65
- default: true,
66
- },
67
- preventClose: {
68
- type: Boolean,
69
- default: false,
70
- },
71
- fullscreen: {
72
- type: Boolean,
73
- default: false,
74
- },
75
- scrollable: {
76
- type: Boolean,
77
- default: false,
78
- },
79
- title: {
80
- type: String,
81
- default: '',
82
- },
83
- isHideCloseBtn: {
84
- type: Boolean,
85
- default: false,
86
- },
87
- size: {
88
- type: String as PropType<keyof typeof modal.size>,
89
- default: () => modal.default.size,
90
- },
91
- position: {
92
- type: String as PropType<keyof typeof modal.position>,
93
- default: () => modal.default.position,
94
- },
95
- fixHeightSize: {
96
- type: String as PropType<keyof typeof modal.fixHeightSize>,
97
- default: () => modal.default.fixHeightSize,
98
- },
99
- class: {
100
- type: [String, Array, Object] as PropType<any>,
101
- default: undefined,
102
- },
103
- ui: {
104
- type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
105
- default: undefined,
106
- },
107
- })
108
-
109
- const emits = defineEmits(['update:modelValue'])
110
-
111
- defineShortcuts({
112
- escape: {
113
- usingInput: true,
114
- handler: () => {
115
- if (props.preventClose) return
116
- emits('update:modelValue', false)
117
- },
118
- },
119
- })
120
-
121
- const modalWrapper = ref<HTMLElement | null>(null)
122
-
123
- const close = () => {
124
- emits('update:modelValue', false)
125
- }
126
-
127
- const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
128
-
129
- watch(
130
- () => props.modelValue,
131
- () => {
132
- if (props.modelValue) {
133
- const size = config.size[props.size]
134
- const fixHeightSize = config.fixHeightSize[props.fixHeightSize]
135
- const position = config.position[props.position]
136
-
137
- ui.value.width = size
138
- ui.value.container = position
139
-
140
- if (props.scrollable) {
141
- ui.value.height = fixHeightSize
142
- }
143
- }
144
- }
145
- )
146
- </script>
1
+ <template>
2
+ <UModal
3
+ v-bind="attrs"
4
+ :model-value="modelValue"
5
+ :class="$props.class"
6
+ :overlay="overlay"
7
+ :transition="transition"
8
+ :prevent-close="preventClose"
9
+ :fullscreen="fullscreen"
10
+ :initial-focus="modalWrapper"
11
+ :ui="ui"
12
+ @update:model-value="$emit('update:modelValue', $event)"
13
+ >
14
+ <div
15
+ v-if="title"
16
+ :class="[ui.header, { 'flex items-center justify-between': !isHideCloseBtn }]"
17
+ >
18
+ <h1 class="text-xl font-medium">{{ title }}</h1>
19
+ <Icon
20
+ v-if="!isHideCloseBtn"
21
+ name="i-heroicons-x-mark"
22
+ class="h-6 w-6 cursor-pointer"
23
+ @click="close"
24
+ />
25
+ </div>
26
+
27
+ <div
28
+ v-if="(!title && !isHideCloseBtn && preventClose) || fullscreen"
29
+ class="absolute right-0 m-4"
30
+ >
31
+ <Icon
32
+ v-if="!isHideCloseBtn"
33
+ name="i-heroicons-x-mark"
34
+ class="h-6 w-6 cursor-pointer"
35
+ @click="close"
36
+ />
37
+ </div>
38
+
39
+ <div ref="modalWrapper" :class="['overflow-y-auto', ui.innerWrapper]">
40
+ <slot />
41
+ </div>
42
+ </UModal>
43
+ </template>
44
+
45
+ <script lang="ts" setup>
46
+ import { type PropType, defineShortcuts, ref, toRef, watch } from '#imports'
47
+ import type { Strategy } from '#core/types/utils'
48
+ import { useUI } from '#ui/composables/useUI'
49
+ import { modal } from '#core/ui.config'
50
+ import { useUiConfig } from '#core/composables/useConfig'
51
+
52
+ const config = useUiConfig<typeof modal>(modal, 'modal')
53
+
54
+ const props = defineProps({
55
+ modelValue: {
56
+ type: Boolean,
57
+ default: false,
58
+ },
59
+ overlay: {
60
+ type: Boolean,
61
+ default: true,
62
+ },
63
+ transition: {
64
+ type: Boolean,
65
+ default: true,
66
+ },
67
+ preventClose: {
68
+ type: Boolean,
69
+ default: false,
70
+ },
71
+ fullscreen: {
72
+ type: Boolean,
73
+ default: false,
74
+ },
75
+ scrollable: {
76
+ type: Boolean,
77
+ default: false,
78
+ },
79
+ title: {
80
+ type: String,
81
+ default: '',
82
+ },
83
+ isHideCloseBtn: {
84
+ type: Boolean,
85
+ default: false,
86
+ },
87
+ size: {
88
+ type: String as PropType<keyof typeof modal.size>,
89
+ default: () => modal.default.size,
90
+ },
91
+ position: {
92
+ type: String as PropType<keyof typeof modal.position>,
93
+ default: () => modal.default.position,
94
+ },
95
+ fixHeightSize: {
96
+ type: String as PropType<keyof typeof modal.fixHeightSize>,
97
+ default: () => modal.default.fixHeightSize,
98
+ },
99
+ class: {
100
+ type: [String, Array, Object] as PropType<any>,
101
+ default: undefined,
102
+ },
103
+ ui: {
104
+ type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
105
+ default: undefined,
106
+ },
107
+ })
108
+
109
+ const emits = defineEmits(['update:modelValue'])
110
+
111
+ defineShortcuts({
112
+ escape: {
113
+ usingInput: true,
114
+ handler: () => {
115
+ if (props.preventClose) return
116
+ emits('update:modelValue', false)
117
+ },
118
+ },
119
+ })
120
+
121
+ const modalWrapper = ref<HTMLElement | null>(null)
122
+
123
+ const close = () => {
124
+ emits('update:modelValue', false)
125
+ }
126
+
127
+ const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
128
+
129
+ watch(
130
+ () => props.modelValue,
131
+ () => {
132
+ if (props.modelValue) {
133
+ const size = config.size[props.size]
134
+ const fixHeightSize = config.fixHeightSize[props.fixHeightSize]
135
+ const position = config.position[props.position]
136
+
137
+ ui.value.width = size
138
+ ui.value.container = position
139
+
140
+ if (props.scrollable) {
141
+ ui.value.height = fixHeightSize
142
+ }
143
+ }
144
+ }
145
+ )
146
+ </script>
@@ -1,110 +1,110 @@
1
- <template>
2
- <USlideover
3
- v-bind="attrs"
4
- :model-value="modelValue"
5
- :class="$props.class"
6
- :prevent-close="preventClose"
7
- :overlay="overlay"
8
- :transition="transition"
9
- :side="side"
10
- :initial-focus="emptyFocusRef"
11
- :ui="ui"
12
- @update:model-value="$emit('update:modelValue', $event)"
13
- >
14
- <div v-if="!isHideCloseBtn && preventClose" class="absolute right-0 m-4">
15
- <Icon
16
- v-if="!isHideCloseBtn"
17
- name="i-heroicons-x-mark"
18
- class="h-6 w-6 cursor-pointer"
19
- @click="close"
20
- />
21
- </div>
22
-
23
- <div :class="['overflow-y-auto', ui.bodyWrapper]">
24
- <slot />
25
- </div>
26
- </USlideover>
27
-
28
- <div ref="emptyFocusRef" />
29
- </template>
30
-
31
- <script lang="ts" setup>
32
- import { ref, type PropType, toRef, defineShortcuts, watch } from '#imports'
33
- import type { Strategy } from '#core/types/utils'
34
- import { useUI } from '#ui/composables/useUI'
35
- import { slideover } from '#core/ui.config'
36
- import { useUiConfig } from '#core/composables/useConfig'
37
-
38
- const config = useUiConfig<typeof slideover>(slideover, 'slideover')
39
-
40
- const props = defineProps({
41
- modelValue: {
42
- type: Boolean as PropType<boolean>,
43
- default: false,
44
- },
45
- side: {
46
- type: String as PropType<'left' | 'right'>,
47
- default: 'right',
48
- validator: (value: string) => ['left', 'right'].includes(value),
49
- },
50
- overlay: {
51
- type: Boolean,
52
- default: true,
53
- },
54
- preventClose: {
55
- type: Boolean,
56
- default: false,
57
- },
58
- isHideCloseBtn: {
59
- type: Boolean,
60
- default: false,
61
- },
62
- transition: {
63
- type: Boolean,
64
- default: true,
65
- },
66
- size: {
67
- type: String as PropType<keyof typeof slideover.size>,
68
- default: () => slideover.default.size,
69
- },
70
- class: {
71
- type: [String, Array, Object] as PropType<any>,
72
- default: undefined,
73
- },
74
- ui: {
75
- type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
76
- default: undefined,
77
- },
78
- })
79
-
80
- const emits = defineEmits(['update:modelValue'])
81
-
82
- const emptyFocusRef = ref<HTMLElement | null>(null)
83
-
84
- defineShortcuts({
85
- escape: {
86
- usingInput: true,
87
- handler: () => {
88
- if (props.preventClose) return
89
- emits('update:modelValue', false)
90
- },
91
- },
92
- })
93
-
94
- const close = () => {
95
- emits('update:modelValue', false)
96
- }
97
-
98
- const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
99
-
100
- watch(
101
- () => props.modelValue,
102
- () => {
103
- if (props.modelValue) {
104
- const size = config.size[props.size]
105
-
106
- ui.value.width = size
107
- }
108
- }
109
- )
110
- </script>
1
+ <template>
2
+ <USlideover
3
+ v-bind="attrs"
4
+ :model-value="modelValue"
5
+ :class="$props.class"
6
+ :prevent-close="preventClose"
7
+ :overlay="overlay"
8
+ :transition="transition"
9
+ :side="side"
10
+ :initial-focus="emptyFocusRef"
11
+ :ui="ui"
12
+ @update:model-value="$emit('update:modelValue', $event)"
13
+ >
14
+ <div v-if="!isHideCloseBtn && preventClose" class="absolute right-0 m-4">
15
+ <Icon
16
+ v-if="!isHideCloseBtn"
17
+ name="i-heroicons-x-mark"
18
+ class="h-6 w-6 cursor-pointer"
19
+ @click="close"
20
+ />
21
+ </div>
22
+
23
+ <div :class="['overflow-y-auto', ui.bodyWrapper]">
24
+ <slot />
25
+ </div>
26
+ </USlideover>
27
+
28
+ <div ref="emptyFocusRef" />
29
+ </template>
30
+
31
+ <script lang="ts" setup>
32
+ import { ref, type PropType, toRef, defineShortcuts, watch } from '#imports'
33
+ import type { Strategy } from '#core/types/utils'
34
+ import { useUI } from '#ui/composables/useUI'
35
+ import { slideover } from '#core/ui.config'
36
+ import { useUiConfig } from '#core/composables/useConfig'
37
+
38
+ const config = useUiConfig<typeof slideover>(slideover, 'slideover')
39
+
40
+ const props = defineProps({
41
+ modelValue: {
42
+ type: Boolean as PropType<boolean>,
43
+ default: false,
44
+ },
45
+ side: {
46
+ type: String as PropType<'left' | 'right'>,
47
+ default: 'right',
48
+ validator: (value: string) => ['left', 'right'].includes(value),
49
+ },
50
+ overlay: {
51
+ type: Boolean,
52
+ default: true,
53
+ },
54
+ preventClose: {
55
+ type: Boolean,
56
+ default: false,
57
+ },
58
+ isHideCloseBtn: {
59
+ type: Boolean,
60
+ default: false,
61
+ },
62
+ transition: {
63
+ type: Boolean,
64
+ default: true,
65
+ },
66
+ size: {
67
+ type: String as PropType<keyof typeof slideover.size>,
68
+ default: () => slideover.default.size,
69
+ },
70
+ class: {
71
+ type: [String, Array, Object] as PropType<any>,
72
+ default: undefined,
73
+ },
74
+ ui: {
75
+ type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
76
+ default: undefined,
77
+ },
78
+ })
79
+
80
+ const emits = defineEmits(['update:modelValue'])
81
+
82
+ const emptyFocusRef = ref<HTMLElement | null>(null)
83
+
84
+ defineShortcuts({
85
+ escape: {
86
+ usingInput: true,
87
+ handler: () => {
88
+ if (props.preventClose) return
89
+ emits('update:modelValue', false)
90
+ },
91
+ },
92
+ })
93
+
94
+ const close = () => {
95
+ emits('update:modelValue', false)
96
+ }
97
+
98
+ const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
99
+
100
+ watch(
101
+ () => props.modelValue,
102
+ () => {
103
+ if (props.modelValue) {
104
+ const size = config.size[props.size]
105
+
106
+ ui.value.width = size
107
+ }
108
+ }
109
+ )
110
+ </script>
@@ -1,16 +1,16 @@
1
- <template>
2
- {{ getValue }}
3
- </template>
4
- <script lang="ts" setup>
5
- import { computed } from 'vue'
6
- import { type IColumn } from '#core/components/Table/types'
7
- import { TimeHelper } from '#core/utils/TimeHelper'
8
-
9
- const props = defineProps<{
10
- value: any
11
- row: any
12
- column: IColumn
13
- }>()
14
-
15
- const getValue = computed<string>(() => TimeHelper.getDateFormTime(props.value))
16
- </script>
1
+ <template>
2
+ {{ getValue }}
3
+ </template>
4
+ <script lang="ts" setup>
5
+ import { computed } from 'vue'
6
+ import { type IColumn } from '#core/components/Table/types'
7
+ import { TimeHelper } from '#core/utils/TimeHelper'
8
+
9
+ const props = defineProps<{
10
+ value: any
11
+ row: any
12
+ column: IColumn
13
+ }>()
14
+
15
+ const getValue = computed<string>(() => TimeHelper.getDateFormTime(props.value))
16
+ </script>
@@ -1,30 +1,30 @@
1
- <template>
2
- <p :title="`${getValue.date} ${getValue.time}`" class="flex flex-col whitespace-nowrap px-4">
3
- <span>
4
- {{ getValue.date }}
5
- </span>
6
- <span class="text-gray text-xs">
7
- {{ getValue.time }}
8
- </span>
9
- </p>
10
- </template>
11
- <script lang="ts" setup>
12
- import { computed } from 'vue'
13
- import { type IColumn } from '#core/components/Table/types'
14
- import { TimeHelper } from '#core/utils/TimeHelper'
15
-
16
- const props = defineProps<{
17
- value: any
18
- row: any
19
- column: IColumn
20
- }>()
21
-
22
- const getValue = computed<{ date: string; time: string }>(() => {
23
- return props.value
24
- ? {
25
- date: TimeHelper.getDateFormTime(props.value),
26
- time: TimeHelper.getTimeFormTime(props.value),
27
- }
28
- : { date: '-', time: '-' }
29
- })
30
- </script>
1
+ <template>
2
+ <p :title="`${getValue.date} ${getValue.time}`" class="flex flex-col whitespace-nowrap px-4">
3
+ <span>
4
+ {{ getValue.date }}
5
+ </span>
6
+ <span class="text-gray text-xs">
7
+ {{ getValue.time }}
8
+ </span>
9
+ </p>
10
+ </template>
11
+ <script lang="ts" setup>
12
+ import { computed } from 'vue'
13
+ import { type IColumn } from '#core/components/Table/types'
14
+ import { TimeHelper } from '#core/utils/TimeHelper'
15
+
16
+ const props = defineProps<{
17
+ value: any
18
+ row: any
19
+ column: IColumn
20
+ }>()
21
+
22
+ const getValue = computed<{ date: string; time: string }>(() => {
23
+ return props.value
24
+ ? {
25
+ date: TimeHelper.getDateFormTime(props.value),
26
+ time: TimeHelper.getTimeFormTime(props.value),
27
+ }
28
+ : { date: '-', time: '-' }
29
+ })
30
+ </script>