@finema/core 1.4.152 → 1.4.154

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 (168) hide show
  1. package/README.md +60 -60
  2. package/dist/module.json +1 -5
  3. package/dist/module.mjs +10 -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 +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 +37 -37
  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/date_range_time_field.types.d.ts +1 -1
  21. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +83 -83
  22. package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
  23. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  24. package/dist/runtime/components/Form/InputSelect/index.vue +45 -45
  25. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +54 -54
  26. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  27. package/dist/runtime/components/Form/InputTags/index.vue +145 -145
  28. package/dist/runtime/components/Form/InputText/index.vue +67 -67
  29. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  30. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  31. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
  32. package/dist/runtime/components/Form/InputUploadDropzone/types.d.ts +1 -1
  33. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +342 -342
  34. package/dist/runtime/components/Form/InputUploadDropzoneAuto/types.d.ts +1 -1
  35. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemUpload.vue +241 -241
  36. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +89 -89
  37. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +164 -164
  38. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/types.d.ts +1 -1
  39. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemUpload.vue +161 -161
  40. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemView.vue +64 -64
  41. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +172 -172
  42. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/types.d.ts +1 -1
  43. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
  44. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +151 -151
  45. package/dist/runtime/components/Form/InputUploadFileClassicAuto/types.d.ts +1 -1
  46. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +219 -219
  47. package/dist/runtime/components/Form/InputUploadImageAuto/types.d.ts +1 -1
  48. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +53 -53
  49. package/dist/runtime/components/Form/index.vue +6 -6
  50. package/dist/runtime/components/Icon.vue +23 -23
  51. package/dist/runtime/components/Image.vue +36 -36
  52. package/dist/runtime/components/Loader.vue +27 -27
  53. package/dist/runtime/components/Modal/index.vue +146 -146
  54. package/dist/runtime/components/QRCode.vue +22 -22
  55. package/dist/runtime/components/SimplePagination.vue +96 -96
  56. package/dist/runtime/components/Slideover/index.vue +110 -110
  57. package/dist/runtime/components/Table/Base.vue +139 -139
  58. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  59. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  60. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  61. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  62. package/dist/runtime/components/Table/ColumnText.vue +25 -25
  63. package/dist/runtime/components/Table/Simple.vue +69 -69
  64. package/dist/runtime/components/Table/index.vue +65 -65
  65. package/dist/runtime/components/Tabs/index.vue +64 -64
  66. package/dist/runtime/components/TeleportSafe.vue +40 -40
  67. package/dist/runtime/composables/loaderList.d.ts +2 -2
  68. package/dist/runtime/composables/{loaderList.js → loaderList.mjs} +2 -2
  69. package/dist/runtime/composables/loaderObject.d.ts +1 -1
  70. package/dist/runtime/composables/{loaderObject.js → loaderObject.mjs} +2 -2
  71. package/dist/runtime/composables/loaderPage.d.ts +1 -1
  72. package/dist/runtime/composables/{loaderPage.js → loaderPage.mjs} +3 -3
  73. package/dist/runtime/composables/useConfig.d.ts +1 -1
  74. package/dist/runtime/composables/useForm.d.ts +1 -1
  75. package/dist/runtime/composables/useTable.d.ts +2 -2
  76. package/dist/runtime/composables/{useTable.js → useTable.mjs} +1 -1
  77. package/dist/runtime/composables/{useUpload.js → useUpload.mjs} +1 -1
  78. package/dist/runtime/helpers/{apiListHelper.js → apiListHelper.mjs} +1 -1
  79. package/dist/runtime/helpers/{apiObjectHelper.js → apiObjectHelper.mjs} +1 -1
  80. package/dist/runtime/helpers/apiPageHelper.d.ts +1 -1
  81. package/dist/runtime/helpers/{apiPageHelper.js → apiPageHelper.mjs} +4 -4
  82. package/dist/runtime/ui.config/index.d.ts +16 -16
  83. package/dist/runtime/ui.config/index.mjs +16 -0
  84. package/dist/runtime/ui.config/{uploadDropzoneImage.js → uploadDropzoneImage.mjs} +1 -1
  85. package/dist/runtime/utils/ArrayHelper.d.ts +1 -1
  86. package/dist/runtime/utils/{ArrayHelper.spec.js → ArrayHelper.spec.mjs} +1 -1
  87. package/dist/runtime/utils/{FileHelper.spec.js → FileHelper.spec.mjs} +1 -1
  88. package/dist/runtime/utils/ObjectHelper.d.ts +2 -2
  89. package/dist/runtime/utils/{ObjectHelper.js → ObjectHelper.mjs} +2 -2
  90. package/dist/runtime/utils/{ObjectHelper.spec.js → ObjectHelper.spec.mjs} +1 -1
  91. package/dist/runtime/utils/ParamHelper.d.ts +1 -1
  92. package/dist/runtime/utils/{ParamHelper.spec.js → ParamHelper.spec.mjs} +1 -1
  93. package/dist/runtime/utils/{StringHelper.spec.js → StringHelper.spec.mjs} +1 -1
  94. package/dist/runtime/utils/{TimeHelper.spec.js → TimeHelper.spec.mjs} +1 -1
  95. package/dist/runtime/utils/{TimeHelper.thai.spec.js → TimeHelper.thai.spec.mjs} +1 -1
  96. package/dist/types.d.mts +16 -1
  97. package/dist/types.d.ts +16 -1
  98. package/package.json +92 -93
  99. package/dist/runtime/ui.config/index.js +0 -16
  100. /package/dist/runtime/components/Dropdown/{types.js → types.mjs} +0 -0
  101. /package/dist/runtime/components/FlexDeck/{types.js → types.mjs} +0 -0
  102. /package/dist/runtime/components/Form/InputCheckbox/{types.js → types.mjs} +0 -0
  103. /package/dist/runtime/components/Form/InputDateTime/{date_time_field.types.js → date_time_field.types.mjs} +0 -0
  104. /package/dist/runtime/components/Form/InputDateTimeRange/{date_range_time_field.types.js → date_range_time_field.types.mjs} +0 -0
  105. /package/dist/runtime/components/Form/InputNumber/{types.js → types.mjs} +0 -0
  106. /package/dist/runtime/components/Form/InputRadio/{types.js → types.mjs} +0 -0
  107. /package/dist/runtime/components/Form/InputSelect/{types.js → types.mjs} +0 -0
  108. /package/dist/runtime/components/Form/InputSelectMultiple/{types.js → types.mjs} +0 -0
  109. /package/dist/runtime/components/Form/InputStatic/{types.js → types.mjs} +0 -0
  110. /package/dist/runtime/components/Form/InputTags/{types.js → types.mjs} +0 -0
  111. /package/dist/runtime/components/Form/InputText/{types.js → types.mjs} +0 -0
  112. /package/dist/runtime/components/Form/InputTextarea/{types.js → types.mjs} +0 -0
  113. /package/dist/runtime/components/Form/InputToggle/{types.js → types.mjs} +0 -0
  114. /package/dist/runtime/components/Form/InputUploadDropzone/{types.js → types.mjs} +0 -0
  115. /package/dist/runtime/components/Form/InputUploadDropzoneAuto/{types.js → types.mjs} +0 -0
  116. /package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/{types.js → types.mjs} +0 -0
  117. /package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/{types.js → types.mjs} +0 -0
  118. /package/dist/runtime/components/Form/InputUploadFileClassic/{types.js → types.mjs} +0 -0
  119. /package/dist/runtime/components/Form/InputUploadFileClassicAuto/{types.js → types.mjs} +0 -0
  120. /package/dist/runtime/components/Form/InputUploadImageAuto/{types.js → types.mjs} +0 -0
  121. /package/dist/runtime/components/Form/InputWYSIWYG/{types.js → types.mjs} +0 -0
  122. /package/dist/runtime/components/Form/{types.js → types.mjs} +0 -0
  123. /package/dist/runtime/components/Table/{types.js → types.mjs} +0 -0
  124. /package/dist/runtime/composables/{useApp.js → useApp.mjs} +0 -0
  125. /package/dist/runtime/composables/{useConfig.js → useConfig.mjs} +0 -0
  126. /package/dist/runtime/composables/{useDialog.js → useDialog.mjs} +0 -0
  127. /package/dist/runtime/composables/{useFlexDeck.js → useFlexDeck.mjs} +0 -0
  128. /package/dist/runtime/composables/{useForm.js → useForm.mjs} +0 -0
  129. /package/dist/runtime/composables/{useNotification.js → useNotification.mjs} +0 -0
  130. /package/dist/runtime/composables/{useWatch.js → useWatch.mjs} +0 -0
  131. /package/dist/runtime/{core.config.js → core.config.mjs} +0 -0
  132. /package/dist/runtime/helpers/{componentHelper.js → componentHelper.mjs} +0 -0
  133. /package/dist/runtime/lib/{Requester.js → Requester.mjs} +0 -0
  134. /package/dist/runtime/{plugin.js → plugin.mjs} +0 -0
  135. /package/dist/runtime/{quill.plugin.js → quill.plugin.mjs} +0 -0
  136. /package/dist/runtime/types/{common.js → common.mjs} +0 -0
  137. /package/dist/runtime/types/{config.js → config.mjs} +0 -0
  138. /package/dist/runtime/types/{lib.js → lib.mjs} +0 -0
  139. /package/dist/runtime/ui.config/{alert.js → alert.mjs} +0 -0
  140. /package/dist/runtime/ui.config/{badge.js → badge.mjs} +0 -0
  141. /package/dist/runtime/ui.config/{breadcrumb.js → breadcrumb.mjs} +0 -0
  142. /package/dist/runtime/ui.config/{button.js → button.mjs} +0 -0
  143. /package/dist/runtime/ui.config/{buttonGroup.js → buttonGroup.mjs} +0 -0
  144. /package/dist/runtime/ui.config/{card.js → card.mjs} +0 -0
  145. /package/dist/runtime/ui.config/{checkbox.js → checkbox.mjs} +0 -0
  146. /package/dist/runtime/ui.config/{formGroup.js → formGroup.mjs} +0 -0
  147. /package/dist/runtime/ui.config/{icon.js → icon.mjs} +0 -0
  148. /package/dist/runtime/ui.config/{input.js → input.mjs} +0 -0
  149. /package/dist/runtime/ui.config/{modal.js → modal.mjs} +0 -0
  150. /package/dist/runtime/ui.config/{notification.js → notification.mjs} +0 -0
  151. /package/dist/runtime/ui.config/{pagination.js → pagination.mjs} +0 -0
  152. /package/dist/runtime/ui.config/{select.js → select.mjs} +0 -0
  153. /package/dist/runtime/ui.config/{selectMenu.js → selectMenu.mjs} +0 -0
  154. /package/dist/runtime/ui.config/{slideover.js → slideover.mjs} +0 -0
  155. /package/dist/runtime/ui.config/{table.js → table.mjs} +0 -0
  156. /package/dist/runtime/ui.config/{tabs.js → tabs.mjs} +0 -0
  157. /package/dist/runtime/ui.config/{tags.js → tags.mjs} +0 -0
  158. /package/dist/runtime/ui.config/{textarea.js → textarea.mjs} +0 -0
  159. /package/dist/runtime/ui.config/{toggle.js → toggle.mjs} +0 -0
  160. /package/dist/runtime/ui.config/{uploadFileDropzone.js → uploadFileDropzone.mjs} +0 -0
  161. /package/dist/runtime/ui.config/{uploadFileInputClassicAuto.js → uploadFileInputClassicAuto.mjs} +0 -0
  162. /package/dist/runtime/ui.config/{uploadImage.js → uploadImage.mjs} +0 -0
  163. /package/dist/runtime/utils/{ArrayHelper.js → ArrayHelper.mjs} +0 -0
  164. /package/dist/runtime/utils/{FileHelper.js → FileHelper.mjs} +0 -0
  165. /package/dist/runtime/utils/{ParamHelper.js → ParamHelper.mjs} +0 -0
  166. /package/dist/runtime/utils/{StringHelper.js → StringHelper.mjs} +0 -0
  167. /package/dist/runtime/utils/{TimeHelper.js → TimeHelper.mjs} +0 -0
  168. /package/dist/runtime/utils/{lodash.js → lodash.mjs} +0 -0
@@ -1,36 +1,36 @@
1
- <template>
2
- <img :src="getSrc" />
3
- </template>
4
- <script lang="ts" setup>
5
- import { useImage } from '@vueuse/core'
6
- import { computed } from 'vue'
7
-
8
- const props = defineProps({
9
- src: {
10
- type: String,
11
- required: true,
12
- },
13
- loadingSrc: {
14
- type: String,
15
- default: '',
16
- },
17
- errorSrc: {
18
- type: String,
19
- default: '',
20
- },
21
- })
22
-
23
- const { isLoading, error } = useImage({ src: props.src })
24
-
25
- const getSrc = computed(() => {
26
- if (isLoading.value) {
27
- return props.loadingSrc
28
- }
29
-
30
- if (error.value) {
31
- return props.errorSrc
32
- }
33
-
34
- return props.src
35
- })
36
- </script>
1
+ <template>
2
+ <img :src="getSrc" />
3
+ </template>
4
+ <script lang="ts" setup>
5
+ import { useImage } from '@vueuse/core'
6
+ import { computed } from 'vue'
7
+
8
+ const props = defineProps({
9
+ src: {
10
+ type: String,
11
+ required: true,
12
+ },
13
+ loadingSrc: {
14
+ type: String,
15
+ default: '',
16
+ },
17
+ errorSrc: {
18
+ type: String,
19
+ default: '',
20
+ },
21
+ })
22
+
23
+ const { isLoading, error } = useImage({ src: props.src })
24
+
25
+ const getSrc = computed(() => {
26
+ if (isLoading.value) {
27
+ return props.loadingSrc
28
+ }
29
+
30
+ if (error.value) {
31
+ return props.errorSrc
32
+ }
33
+
34
+ return props.src
35
+ })
36
+ </script>
@@ -1,27 +1,27 @@
1
- <template>
2
- <div
3
- v-if="isLoading"
4
- :class="[
5
- 'flex w-full items-center justify-center',
6
- $attrs.class,
7
- {
8
- 'min-h-[200px]': !$attrs.class,
9
- },
10
- ]"
11
- >
12
- <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
13
- </div>
14
- <slot v-else />
15
- </template>
16
- <script lang="ts" setup>
17
- defineOptions({
18
- inheritAttrs: false,
19
- })
20
-
21
- defineProps({
22
- isLoading: {
23
- type: Boolean,
24
- default: true,
25
- },
26
- })
27
- </script>
1
+ <template>
2
+ <div
3
+ v-if="isLoading"
4
+ :class="[
5
+ 'flex w-full items-center justify-center',
6
+ $attrs.class,
7
+ {
8
+ 'min-h-[200px]': !$attrs.class,
9
+ },
10
+ ]"
11
+ >
12
+ <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
13
+ </div>
14
+ <slot v-else />
15
+ </template>
16
+ <script lang="ts" setup>
17
+ defineOptions({
18
+ inheritAttrs: false,
19
+ })
20
+
21
+ defineProps({
22
+ isLoading: {
23
+ type: Boolean,
24
+ default: true,
25
+ },
26
+ })
27
+ </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-lg font-semibold">{{ title }}</h1>
19
- <Icon
20
- v-if="!isHideCloseBtn"
21
- name="i-heroicons-x-mark"
22
- class="size-6 cursor-pointer opacity-50"
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="size-6 cursor-pointer opacity-50"
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 { useUI } from '#ui/composables/useUI'
48
- import { modal } from '#core/ui.config'
49
- import { useUiConfig } from '#core/composables/useConfig'
50
- import type { Strategy } from '#ui/types'
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-lg font-semibold">{{ title }}</h1>
19
+ <Icon
20
+ v-if="!isHideCloseBtn"
21
+ name="i-heroicons-x-mark"
22
+ class="size-6 cursor-pointer opacity-50"
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="size-6 cursor-pointer opacity-50"
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 { useUI } from '#ui/composables/useUI'
48
+ import { modal } from '#core/ui.config'
49
+ import { useUiConfig } from '#core/composables/useConfig'
50
+ import type { Strategy } from '#ui/types'
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,22 +1,22 @@
1
- <template>
2
- <QrcodeVue :value="value" :level="level" :render-as="renderAs" class="size-[350px]" />
3
- </template>
4
- <script lang="ts" setup>
5
- import QrcodeVue, { type RenderAs } from 'qrcode.vue'
6
- import { type PropType } from 'vue'
7
-
8
- defineProps({
9
- value: {
10
- type: String,
11
- required: true,
12
- },
13
- level: {
14
- type: String,
15
- default: 'M',
16
- },
17
- renderAs: {
18
- type: String as PropType<RenderAs>,
19
- default: 'svg',
20
- },
21
- })
22
- </script>
1
+ <template>
2
+ <QrcodeVue :value="value" :level="level" :render-as="renderAs" class="size-[350px]" />
3
+ </template>
4
+ <script lang="ts" setup>
5
+ import QrcodeVue, { type RenderAs } from 'qrcode.vue'
6
+ import { type PropType } from 'vue'
7
+
8
+ defineProps({
9
+ value: {
10
+ type: String,
11
+ required: true,
12
+ },
13
+ level: {
14
+ type: String,
15
+ default: 'M',
16
+ },
17
+ renderAs: {
18
+ type: String as PropType<RenderAs>,
19
+ default: 'svg',
20
+ },
21
+ })
22
+ </script>
@@ -1,96 +1,96 @@
1
- <template>
2
- <div>
3
- <Button
4
- :size="size"
5
- :disabled="!canGoFirstOrPrev || disabled"
6
- :class="[ui.base, ui.rounded]"
7
- v-bind="{ ...((ui.default?.prevButton as object) || {}) }"
8
- :ui="{ rounded: '' }"
9
- aria-label="Prev"
10
- @click="onClickPrev"
11
- />
12
-
13
- <Button
14
- :size="size"
15
- :disabled="!canGoLastOrNext || disabled"
16
- :class="[ui.base, ui.rounded]"
17
- v-bind="{ ...((ui.default?.nextButton as object) || {}) }"
18
- :ui="{ rounded: '' }"
19
- aria-label="Next"
20
- @click="onClickNext"
21
- />
22
- </div>
23
- </template>
24
-
25
- <script lang="ts" setup>
26
- import { useUiConfig } from '../composables/useConfig'
27
- import { pagination } from '#core/ui.config'
28
- import { useUI, type PropType, toRef, computed } from '#imports'
29
- import type { ButtonSize } from '#ui/types/button'
30
- import type { Strategy } from '#ui/types'
31
-
32
- const config = useUiConfig<typeof pagination>(pagination, 'pagination')
33
-
34
- const emits = defineEmits(['update:modelValue'])
35
-
36
- const props = defineProps({
37
- modelValue: {
38
- type: Number,
39
- required: true,
40
- },
41
- pageCount: {
42
- type: Number,
43
- default: 10,
44
- },
45
- total: {
46
- type: Number,
47
- required: true,
48
- },
49
- disabled: {
50
- type: Boolean,
51
- default: false,
52
- },
53
- size: {
54
- type: String as PropType<ButtonSize>,
55
- default: () => pagination.default?.size,
56
- },
57
- class: {
58
- type: [String, Object, Array] as PropType<any>,
59
- default: () => '',
60
- },
61
- ui: {
62
- type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
63
- default: () => ({}),
64
- },
65
- })
66
-
67
- const { ui } = useUI('pagination', toRef(props, 'ui'), config, toRef(props, 'class'))
68
-
69
- const currentPage = computed({
70
- get() {
71
- return props.modelValue
72
- },
73
- set(value: number) {
74
- emits('update:modelValue', value)
75
- },
76
- })
77
-
78
- const pages = computed(() =>
79
- Array.from({ length: Math.ceil(props.total / props.pageCount) }, (_, i) => i + 1)
80
- )
81
-
82
- const canGoFirstOrPrev = computed(() => currentPage.value > 1)
83
- const canGoLastOrNext = computed(() => currentPage.value < pages.value.length)
84
-
85
- const onClickPrev = () => {
86
- if (canGoFirstOrPrev.value) {
87
- currentPage.value--
88
- }
89
- }
90
-
91
- const onClickNext = () => {
92
- if (canGoLastOrNext.value) {
93
- currentPage.value++
94
- }
95
- }
96
- </script>
1
+ <template>
2
+ <div>
3
+ <Button
4
+ :size="size"
5
+ :disabled="!canGoFirstOrPrev || disabled"
6
+ :class="[ui.base, ui.rounded]"
7
+ v-bind="{ ...((ui.default?.prevButton as object) || {}) }"
8
+ :ui="{ rounded: '' }"
9
+ aria-label="Prev"
10
+ @click="onClickPrev"
11
+ />
12
+
13
+ <Button
14
+ :size="size"
15
+ :disabled="!canGoLastOrNext || disabled"
16
+ :class="[ui.base, ui.rounded]"
17
+ v-bind="{ ...((ui.default?.nextButton as object) || {}) }"
18
+ :ui="{ rounded: '' }"
19
+ aria-label="Next"
20
+ @click="onClickNext"
21
+ />
22
+ </div>
23
+ </template>
24
+
25
+ <script lang="ts" setup>
26
+ import { useUiConfig } from '../composables/useConfig'
27
+ import { pagination } from '#core/ui.config'
28
+ import { useUI, type PropType, toRef, computed } from '#imports'
29
+ import type { ButtonSize } from '#ui/types/button'
30
+ import type { Strategy } from '#ui/types'
31
+
32
+ const config = useUiConfig<typeof pagination>(pagination, 'pagination')
33
+
34
+ const emits = defineEmits(['update:modelValue'])
35
+
36
+ const props = defineProps({
37
+ modelValue: {
38
+ type: Number,
39
+ required: true,
40
+ },
41
+ pageCount: {
42
+ type: Number,
43
+ default: 10,
44
+ },
45
+ total: {
46
+ type: Number,
47
+ required: true,
48
+ },
49
+ disabled: {
50
+ type: Boolean,
51
+ default: false,
52
+ },
53
+ size: {
54
+ type: String as PropType<ButtonSize>,
55
+ default: () => pagination.default?.size,
56
+ },
57
+ class: {
58
+ type: [String, Object, Array] as PropType<any>,
59
+ default: () => '',
60
+ },
61
+ ui: {
62
+ type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
63
+ default: () => ({}),
64
+ },
65
+ })
66
+
67
+ const { ui } = useUI('pagination', toRef(props, 'ui'), config, toRef(props, 'class'))
68
+
69
+ const currentPage = computed({
70
+ get() {
71
+ return props.modelValue
72
+ },
73
+ set(value: number) {
74
+ emits('update:modelValue', value)
75
+ },
76
+ })
77
+
78
+ const pages = computed(() =>
79
+ Array.from({ length: Math.ceil(props.total / props.pageCount) }, (_, i) => i + 1)
80
+ )
81
+
82
+ const canGoFirstOrPrev = computed(() => currentPage.value > 1)
83
+ const canGoLastOrNext = computed(() => currentPage.value < pages.value.length)
84
+
85
+ const onClickPrev = () => {
86
+ if (canGoFirstOrPrev.value) {
87
+ currentPage.value--
88
+ }
89
+ }
90
+
91
+ const onClickNext = () => {
92
+ if (canGoLastOrNext.value) {
93
+ currentPage.value++
94
+ }
95
+ }
96
+ </script>