@finema/core 1.4.35 → 1.4.37
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.
- package/README.md +63 -63
- package/dist/module.d.mts +4 -4
- package/dist/module.d.ts +4 -4
- package/dist/module.json +1 -1
- package/dist/module.mjs +2 -2
- package/dist/runtime/components/Alert.vue +49 -49
- package/dist/runtime/components/Avatar.vue +27 -27
- package/dist/runtime/components/Badge.vue +54 -54
- package/dist/runtime/components/Breadcrumb.vue +45 -45
- package/dist/runtime/components/Button/Group.vue +37 -37
- package/dist/runtime/components/Button/index.vue +77 -77
- package/dist/runtime/components/Card.vue +38 -38
- package/dist/runtime/components/Core.vue +13 -13
- package/dist/runtime/components/Dialog/index.vue +108 -108
- package/dist/runtime/components/Dropdown/index.vue +71 -71
- package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
- package/dist/runtime/components/Form/Fields.vue +146 -136
- package/dist/runtime/components/Form/InputCheckbox/index.vue +21 -21
- package/dist/runtime/components/Form/InputDateTime/index.vue +51 -51
- package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
- package/dist/runtime/components/Form/InputSelect/index.vue +37 -37
- package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
- package/dist/runtime/components/Form/InputText/index.vue +29 -27
- package/dist/runtime/components/Form/InputText/types.d.ts +2 -2
- package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
- package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
- package/dist/runtime/components/Form/InputUploadDropzone/index.vue +170 -0
- package/dist/runtime/components/Form/InputUploadDropzone/types.d.ts +11 -0
- package/dist/runtime/components/Form/InputUploadDropzone/types.mjs +0 -0
- package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +36 -36
- package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +160 -152
- package/dist/runtime/components/Form/index.vue +6 -6
- package/dist/runtime/components/Form/types.d.ts +4 -2
- package/dist/runtime/components/Form/types.mjs +1 -0
- package/dist/runtime/components/Icon.vue +23 -23
- package/dist/runtime/components/Image.vue +36 -36
- package/dist/runtime/components/Loader.vue +14 -14
- package/dist/runtime/components/Modal/index.vue +146 -146
- package/dist/runtime/components/SimplePagination.vue +96 -96
- package/dist/runtime/components/Slideover/index.vue +110 -110
- package/dist/runtime/components/Table/Base.vue +132 -132
- package/dist/runtime/components/Table/ColumnDate.vue +16 -16
- package/dist/runtime/components/Table/ColumnDateTime.vue +30 -30
- package/dist/runtime/components/Table/ColumnImage.vue +13 -13
- package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
- package/dist/runtime/components/Table/Simple.vue +57 -57
- package/dist/runtime/components/Table/index.vue +52 -52
- package/dist/runtime/components/Tabs/index.vue +65 -65
- package/dist/runtime/plugin.mjs +4 -2
- package/dist/runtime/types/config.d.ts +1 -1
- package/dist/runtime/types/utils.d.ts +29 -29
- package/dist/runtime/ui.config/index.d.ts +1 -0
- package/dist/runtime/ui.config/index.mjs +1 -0
- package/dist/runtime/ui.config/uploadFileDropzone.d.ts +31 -0
- package/dist/runtime/ui.config/uploadFileDropzone.mjs +31 -0
- package/dist/runtime/ui.css +32 -32
- package/package.json +86 -86
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<form class="form">
|
|
3
|
-
<slot />
|
|
4
|
-
</form>
|
|
5
|
-
</template>
|
|
6
|
-
<script lang="ts" setup></script>
|
|
1
|
+
<template>
|
|
2
|
+
<form class="form">
|
|
3
|
+
<slot />
|
|
4
|
+
</form>
|
|
5
|
+
</template>
|
|
6
|
+
<script lang="ts" setup></script>
|
|
@@ -10,6 +10,7 @@ import { type ITextareaField } from '#core/components/Form/InputTextarea/types';
|
|
|
10
10
|
import { type IDateTimeField } from '#core/components/Form/InputDateTime/date_time_field.types';
|
|
11
11
|
import { type IUploadFileClassicField } from '#core/components/Form/InputUploadFileClassic/types';
|
|
12
12
|
import { type IUploadFileField } from '#core/components/Form/InputUploadFileClassicAuto/types';
|
|
13
|
+
import { type IUploadDropzoneField } from '#core/components/Form/InputUploadDropzone/types';
|
|
13
14
|
export declare const enum INPUT_TYPES {
|
|
14
15
|
TEXT = "TEXT",
|
|
15
16
|
TEXTAREA = "TEXTAREA",
|
|
@@ -23,7 +24,8 @@ export declare const enum INPUT_TYPES {
|
|
|
23
24
|
DATE_TIME = "DATE_TIME",
|
|
24
25
|
DATE = "DATE",
|
|
25
26
|
UPLOAD_FILE_CLASSIC = "UPLOAD_FILE_CLASSIC",
|
|
26
|
-
UPLOAD_FILE_CLASSIC_AUTO = "UPLOAD_FILE_CLASSIC_AUTO"
|
|
27
|
+
UPLOAD_FILE_CLASSIC_AUTO = "UPLOAD_FILE_CLASSIC_AUTO",
|
|
28
|
+
UPLOAD_DROPZONE = "UPLOAD_DROPZONE"
|
|
27
29
|
}
|
|
28
30
|
export interface IFieldProps {
|
|
29
31
|
form?: FormContext;
|
|
@@ -52,4 +54,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
|
|
|
52
54
|
props: P;
|
|
53
55
|
on?: O;
|
|
54
56
|
}
|
|
55
|
-
export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField | IUploadFileField;
|
|
57
|
+
export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField;
|
|
@@ -12,5 +12,6 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
|
|
|
12
12
|
INPUT_TYPES2["DATE"] = "DATE";
|
|
13
13
|
INPUT_TYPES2["UPLOAD_FILE_CLASSIC"] = "UPLOAD_FILE_CLASSIC";
|
|
14
14
|
INPUT_TYPES2["UPLOAD_FILE_CLASSIC_AUTO"] = "UPLOAD_FILE_CLASSIC_AUTO";
|
|
15
|
+
INPUT_TYPES2["UPLOAD_DROPZONE"] = "UPLOAD_DROPZONE";
|
|
15
16
|
return INPUT_TYPES2;
|
|
16
17
|
})(INPUT_TYPES || {});
|
|
@@ -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,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,14 +1,14 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div v-if="isLoading" class="flex min-h-[200px] items-center justify-center">
|
|
3
|
-
<UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
|
|
4
|
-
</div>
|
|
5
|
-
<slot v-else />
|
|
6
|
-
</template>
|
|
7
|
-
<script lang="ts" setup>
|
|
8
|
-
defineProps({
|
|
9
|
-
isLoading: {
|
|
10
|
-
type: Boolean,
|
|
11
|
-
default: true,
|
|
12
|
-
},
|
|
13
|
-
})
|
|
14
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div v-if="isLoading" class="flex min-h-[200px] items-center justify-center">
|
|
3
|
+
<UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
|
|
4
|
+
</div>
|
|
5
|
+
<slot v-else />
|
|
6
|
+
</template>
|
|
7
|
+
<script lang="ts" setup>
|
|
8
|
+
defineProps({
|
|
9
|
+
isLoading: {
|
|
10
|
+
type: Boolean,
|
|
11
|
+
default: true,
|
|
12
|
+
},
|
|
13
|
+
})
|
|
14
|
+
</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="h-6 w-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="h-6 w-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 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-lg font-semibold">{{ title }}</h1>
|
|
19
|
+
<Icon
|
|
20
|
+
v-if="!isHideCloseBtn"
|
|
21
|
+
name="i-heroicons-x-mark"
|
|
22
|
+
class="h-6 w-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="h-6 w-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 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,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 { type ButtonSize } from '#ui/types'
|
|
29
|
-
import { useUI, type PropType, toRef, computed } from '#imports'
|
|
30
|
-
import { type Strategy } from '../types/utils'
|
|
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 { type ButtonSize } from '#ui/types'
|
|
29
|
+
import { useUI, type PropType, toRef, computed } from '#imports'
|
|
30
|
+
import { type Strategy } from '../types/utils'
|
|
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>
|