@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,145 +1,145 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <div
4
- :class="[
5
- ui.base,
6
- ui.border,
7
- ui.shadow,
8
- ui.padding,
9
- {
10
- [ui.stages.default]: !wrapperProps.errorMessage,
11
- [ui.stages.error]: wrapperProps.errorMessage,
12
- },
13
- ]"
14
- >
15
- <p
16
- v-if="wrapperProps.placeholder && !innerValue && (!value || value.length === 0)"
17
- :class="[ui.placeholder]"
18
- @click="focusInput"
19
- >
20
- {{ wrapperProps.placeholder }}
21
- </p>
22
- <div :class="[ui.innerWrapper]">
23
- <Badge
24
- v-for="(text, index) in value"
25
- :key="index"
26
- :size="ui.tag.size || (ui.default.tag.size as any)"
27
- :color="ui.tag.color || (ui.default.tag.color as any)"
28
- :variant="ui.tag.variant || (ui.default.tag.variant as any)"
29
- :ui="badgeUi"
30
- >
31
- <div class="flex items-center gap-x-0.5">
32
- {{ tagPrefix + text }}
33
- <Icon
34
- name="i-heroicons:x-circle-20-solid"
35
- class="size-4 cursor-pointer"
36
- @click="onClickDelete(index)"
37
- />
38
- </div>
39
- </Badge>
40
- <input
41
- ref="inputRef"
42
- v-model="innerValue"
43
- :class="[ui.input]"
44
- :disabled="wrapperProps.isDisabled"
45
- :name="name"
46
- :readonly="isReadonly"
47
- :autofocus="!!autoFocus"
48
- @blur="onBlur"
49
- @keyup.delete="onDelete"
50
- @keyup.enter="onEnter"
51
- @keyup.space="onSpace"
52
- />
53
- </div>
54
- </div>
55
- </FieldWrapper>
56
- </template>
57
-
58
- <script lang="ts" setup>
59
- import { ref, toRef, useUI, useUiConfig } from '#imports'
60
- import { type ITagsFieldProps } from '#core/components/Form/InputTags/types'
61
- import { tags } from '#core/ui.config'
62
- import { useFieldHOC } from '#core/composables/useForm'
63
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
64
-
65
- const config = useUiConfig<typeof tags>(tags, 'tags')
66
-
67
- const props = withDefaults(defineProps<ITagsFieldProps>(), {
68
- tagPrefix: '#',
69
- })
70
-
71
- const emits = defineEmits(['change', 'blur'])
72
-
73
- const { value, wrapperProps } = useFieldHOC<string[]>(props)
74
-
75
- const { ui } = useUI('tags', toRef(props, 'ui'), config)
76
-
77
- const inputRef = ref<HTMLInputElement | null>(null)
78
- const innerValue = ref<string>('')
79
- const backspaceCount = ref<number>(0)
80
-
81
- const operateValue = (input: string) => {
82
- const tagSet = splitBySpace(input)
83
-
84
- if (value.value && value.value.length > 0) {
85
- value.value = [...value.value, ...tagSet]
86
- } else {
87
- value.value = tagSet
88
- }
89
-
90
- innerValue.value = ''
91
-
92
- emits('change', value.value)
93
- }
94
-
95
- const onBlur = (e: FocusEvent) => {
96
- const eventValue = e.target as HTMLInputElement
97
-
98
- if (!eventValue.value || eventValue.value === '') return
99
-
100
- operateValue(eventValue.value)
101
-
102
- emits('blur', eventValue.value)
103
- }
104
-
105
- const onDelete = (e: KeyboardEvent) => {
106
- if (e.key === 'Backspace') {
107
- if (innerValue.value === '') {
108
- backspaceCount.value += 1
109
- } else {
110
- backspaceCount.value = 0
111
- }
112
-
113
- if (backspaceCount.value >= 2 && value.value.length > 0) {
114
- value.value = value.value.slice(0, value.value.length - 1)
115
- backspaceCount.value = 0
116
- }
117
- }
118
- }
119
-
120
- const onClickDelete = (index: number) => {
121
- value.value = value.value.filter((_, i) => i !== index)
122
- }
123
-
124
- const onEnter = (e: KeyboardEvent) => {
125
- if (e.key === 'Enter') {
126
- operateValue(innerValue.value)
127
- }
128
- }
129
-
130
- const onSpace = (e: KeyboardEvent) => {
131
- if (e.key === ' ') {
132
- operateValue(innerValue.value)
133
- }
134
- }
135
-
136
- const splitBySpace = (input: string): string[] => {
137
- const spited = input.split(' ')
138
-
139
- return spited.filter((item) => item !== '')
140
- }
141
-
142
- const focusInput = () => {
143
- inputRef.value?.focus()
144
- }
145
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <div
4
+ :class="[
5
+ ui.base,
6
+ ui.border,
7
+ ui.shadow,
8
+ ui.padding,
9
+ {
10
+ [ui.stages.default]: !wrapperProps.errorMessage,
11
+ [ui.stages.error]: wrapperProps.errorMessage,
12
+ },
13
+ ]"
14
+ >
15
+ <p
16
+ v-if="wrapperProps.placeholder && !innerValue && (!value || value.length === 0)"
17
+ :class="[ui.placeholder]"
18
+ @click="focusInput"
19
+ >
20
+ {{ wrapperProps.placeholder }}
21
+ </p>
22
+ <div :class="[ui.innerWrapper]">
23
+ <Badge
24
+ v-for="(text, index) in value"
25
+ :key="index"
26
+ :size="ui.tag.size || (ui.default.tag.size as any)"
27
+ :color="ui.tag.color || (ui.default.tag.color as any)"
28
+ :variant="ui.tag.variant || (ui.default.tag.variant as any)"
29
+ :ui="badgeUi"
30
+ >
31
+ <div class="flex items-center gap-x-0.5">
32
+ {{ tagPrefix + text }}
33
+ <Icon
34
+ name="i-heroicons:x-circle-20-solid"
35
+ class="size-4 cursor-pointer"
36
+ @click="onClickDelete(index)"
37
+ />
38
+ </div>
39
+ </Badge>
40
+ <input
41
+ ref="inputRef"
42
+ v-model="innerValue"
43
+ :class="[ui.input]"
44
+ :disabled="wrapperProps.isDisabled"
45
+ :name="name"
46
+ :readonly="isReadonly"
47
+ :autofocus="!!autoFocus"
48
+ @blur="onBlur"
49
+ @keyup.delete="onDelete"
50
+ @keyup.enter="onEnter"
51
+ @keyup.space="onSpace"
52
+ />
53
+ </div>
54
+ </div>
55
+ </FieldWrapper>
56
+ </template>
57
+
58
+ <script lang="ts" setup>
59
+ import { ref, toRef, useUI, useUiConfig } from '#imports'
60
+ import { type ITagsFieldProps } from '#core/components/Form/InputTags/types'
61
+ import { tags } from '#core/ui.config'
62
+ import { useFieldHOC } from '#core/composables/useForm'
63
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
64
+
65
+ const config = useUiConfig<typeof tags>(tags, 'tags')
66
+
67
+ const props = withDefaults(defineProps<ITagsFieldProps>(), {
68
+ tagPrefix: '#',
69
+ })
70
+
71
+ const emits = defineEmits(['change', 'blur'])
72
+
73
+ const { value, wrapperProps } = useFieldHOC<string[]>(props)
74
+
75
+ const { ui } = useUI('tags', toRef(props, 'ui'), config)
76
+
77
+ const inputRef = ref<HTMLInputElement | null>(null)
78
+ const innerValue = ref<string>('')
79
+ const backspaceCount = ref<number>(0)
80
+
81
+ const operateValue = (input: string) => {
82
+ const tagSet = splitBySpace(input)
83
+
84
+ if (value.value && value.value.length > 0) {
85
+ value.value = [...value.value, ...tagSet]
86
+ } else {
87
+ value.value = tagSet
88
+ }
89
+
90
+ innerValue.value = ''
91
+
92
+ emits('change', value.value)
93
+ }
94
+
95
+ const onBlur = (e: FocusEvent) => {
96
+ const eventValue = e.target as HTMLInputElement
97
+
98
+ if (!eventValue.value || eventValue.value === '') return
99
+
100
+ operateValue(eventValue.value)
101
+
102
+ emits('blur', eventValue.value)
103
+ }
104
+
105
+ const onDelete = (e: KeyboardEvent) => {
106
+ if (e.key === 'Backspace') {
107
+ if (innerValue.value === '') {
108
+ backspaceCount.value += 1
109
+ } else {
110
+ backspaceCount.value = 0
111
+ }
112
+
113
+ if (backspaceCount.value >= 2 && value.value.length > 0) {
114
+ value.value = value.value.slice(0, value.value.length - 1)
115
+ backspaceCount.value = 0
116
+ }
117
+ }
118
+ }
119
+
120
+ const onClickDelete = (index: number) => {
121
+ value.value = value.value.filter((_, i) => i !== index)
122
+ }
123
+
124
+ const onEnter = (e: KeyboardEvent) => {
125
+ if (e.key === 'Enter') {
126
+ operateValue(innerValue.value)
127
+ }
128
+ }
129
+
130
+ const onSpace = (e: KeyboardEvent) => {
131
+ if (e.key === ' ') {
132
+ operateValue(innerValue.value)
133
+ }
134
+ }
135
+
136
+ const splitBySpace = (input: string): string[] => {
137
+ const spited = input.split(' ')
138
+
139
+ return spited.filter((item) => item !== '')
140
+ }
141
+
142
+ const focusInput = () => {
143
+ inputRef.value?.focus()
144
+ }
145
+ </script>
@@ -1,67 +1,67 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <UInput
4
- v-if="type === 'password'"
5
- v-model="value"
6
- v-maska:[maskOptions]
7
- :data-maska="mask"
8
- :data-maska-tokens="maskTokens"
9
- :data-maska-tokens-replace="maskTokensReplace"
10
- :data-maska-reversed="maskReversed"
11
- :data-maska-eager="maskEager"
12
- :disabled="wrapperProps.isDisabled"
13
- :leading-icon="leadingIcon"
14
- :trailing-icon="trailingIcon"
15
- :name="name"
16
- :placeholder="wrapperProps.placeholder"
17
- :type="isShowPassword ? 'text' : 'password'"
18
- :autofocus="!!autoFocus"
19
- :icon="icon"
20
- :readonly="isReadonly"
21
- :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
22
- >
23
- <template #trailing>
24
- <UButton
25
- color="gray"
26
- variant="link"
27
- :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
28
- :padded="false"
29
- @click="isShowPassword = !isShowPassword"
30
- />
31
- </template>
32
- </UInput>
33
- <UInput
34
- v-else
35
- v-model="value"
36
- v-maska:[maskOptions]
37
- :data-maska="mask"
38
- :data-maska-tokens="maskTokens"
39
- :data-maska-tokens-replace="maskTokensReplace"
40
- :data-maska-reversed="maskReversed"
41
- :data-maska-eager="maskEager"
42
- :disabled="wrapperProps.isDisabled"
43
- :leading-icon="leadingIcon"
44
- :trailing-icon="trailingIcon"
45
- :name="name"
46
- :placeholder="wrapperProps.placeholder"
47
- :type="type || 'text'"
48
- :autofocus="!!autoFocus"
49
- :icon="icon"
50
- :readonly="isReadonly"
51
- :ui="ui"
52
- />
53
- </FieldWrapper>
54
- </template>
55
- <script lang="ts" setup>
56
- import { _deepMerge, ref } from '#imports'
57
- import { type ITextFieldProps } from '#core/components/Form/InputText/types'
58
- import { useFieldHOC } from '#core/composables/useForm'
59
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
60
- import { vMaska } from 'maska'
61
-
62
- const props = withDefaults(defineProps<ITextFieldProps>(), {})
63
-
64
- const { value, wrapperProps } = useFieldHOC<string>(props)
65
-
66
- const isShowPassword = ref(false)
67
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <UInput
4
+ v-if="type === 'password'"
5
+ v-model="value"
6
+ v-maska:[maskOptions]
7
+ :data-maska="mask"
8
+ :data-maska-tokens="maskTokens"
9
+ :data-maska-tokens-replace="maskTokensReplace"
10
+ :data-maska-reversed="maskReversed"
11
+ :data-maska-eager="maskEager"
12
+ :disabled="wrapperProps.isDisabled"
13
+ :leading-icon="leadingIcon"
14
+ :trailing-icon="trailingIcon"
15
+ :name="name"
16
+ :placeholder="wrapperProps.placeholder"
17
+ :type="isShowPassword ? 'text' : 'password'"
18
+ :autofocus="!!autoFocus"
19
+ :icon="icon"
20
+ :readonly="isReadonly"
21
+ :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
22
+ >
23
+ <template #trailing>
24
+ <UButton
25
+ color="gray"
26
+ variant="link"
27
+ :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
28
+ :padded="false"
29
+ @click="isShowPassword = !isShowPassword"
30
+ />
31
+ </template>
32
+ </UInput>
33
+ <UInput
34
+ v-else
35
+ v-model="value"
36
+ v-maska:[maskOptions]
37
+ :data-maska="mask"
38
+ :data-maska-tokens="maskTokens"
39
+ :data-maska-tokens-replace="maskTokensReplace"
40
+ :data-maska-reversed="maskReversed"
41
+ :data-maska-eager="maskEager"
42
+ :disabled="wrapperProps.isDisabled"
43
+ :leading-icon="leadingIcon"
44
+ :trailing-icon="trailingIcon"
45
+ :name="name"
46
+ :placeholder="wrapperProps.placeholder"
47
+ :type="type || 'text'"
48
+ :autofocus="!!autoFocus"
49
+ :icon="icon"
50
+ :readonly="isReadonly"
51
+ :ui="ui"
52
+ />
53
+ </FieldWrapper>
54
+ </template>
55
+ <script lang="ts" setup>
56
+ import { _deepMerge, ref } from '#imports'
57
+ import { type ITextFieldProps } from '#core/components/Form/InputText/types'
58
+ import { useFieldHOC } from '#core/composables/useForm'
59
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
60
+ import { vMaska } from 'maska'
61
+
62
+ const props = withDefaults(defineProps<ITextFieldProps>(), {})
63
+
64
+ const { value, wrapperProps } = useFieldHOC<string>(props)
65
+
66
+ const isShowPassword = ref(false)
67
+ </script>
@@ -1,25 +1,25 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <UTextarea
4
- v-model="value"
5
- :disabled="wrapperProps.isDisabled"
6
- :name="name"
7
- :resize="resize"
8
- :placeholder="wrapperProps.placeholder"
9
- :autofocus="!!autoFocus"
10
- :autoresize="autoresize"
11
- :rows="rows"
12
- :readonly="isReadonly"
13
- :ui="ui"
14
- />
15
- </FieldWrapper>
16
- </template>
17
- <script lang="ts" setup>
18
- import { useFieldHOC } from '#core/composables/useForm'
19
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
20
- import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
21
-
22
- const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
23
-
24
- const { value, wrapperProps } = useFieldHOC<string>(props)
25
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <UTextarea
4
+ v-model="value"
5
+ :disabled="wrapperProps.isDisabled"
6
+ :name="name"
7
+ :resize="resize"
8
+ :placeholder="wrapperProps.placeholder"
9
+ :autofocus="!!autoFocus"
10
+ :autoresize="autoresize"
11
+ :rows="rows"
12
+ :readonly="isReadonly"
13
+ :ui="ui"
14
+ />
15
+ </FieldWrapper>
16
+ </template>
17
+ <script lang="ts" setup>
18
+ import { useFieldHOC } from '#core/composables/useForm'
19
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
20
+ import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
21
+
22
+ const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
23
+
24
+ const { value, wrapperProps } = useFieldHOC<string>(props)
25
+ </script>
@@ -1,14 +1,14 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <UToggle v-model="value" :disabled="wrapperProps.isDisabled" :name="name" :ui="ui" />
4
- </FieldWrapper>
5
- </template>
6
-
7
- <script lang="ts" setup>
8
- import { useFieldHOC } from '#core/composables/useForm'
9
- import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
10
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
11
-
12
- const props = withDefaults(defineProps<IToggleFieldProps>(), {})
13
- const { value, wrapperProps } = useFieldHOC<boolean>(props)
14
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <UToggle v-model="value" :disabled="wrapperProps.isDisabled" :name="name" :ui="ui" />
4
+ </FieldWrapper>
5
+ </template>
6
+
7
+ <script lang="ts" setup>
8
+ import { useFieldHOC } from '#core/composables/useForm'
9
+ import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
10
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
11
+
12
+ const props = withDefaults(defineProps<IToggleFieldProps>(), {})
13
+ const { value, wrapperProps } = useFieldHOC<boolean>(props)
14
+ </script>