@movk/nuxt 1.1.2 → 1.2.0
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 +5 -29
- package/dist/module.d.mts +3 -1
- package/dist/module.json +3 -3
- package/dist/module.mjs +120 -34
- package/dist/runtime/auto-form/controls.d.ts +221 -0
- package/dist/runtime/auto-form/controls.js +70 -0
- package/dist/runtime/{utils → auto-form}/field-utils.d.ts +4 -20
- package/dist/runtime/{utils → auto-form}/field-utils.js +1 -2
- package/dist/runtime/auto-form/metadata.d.ts +22 -0
- package/dist/runtime/auto-form/metadata.js +53 -0
- package/dist/runtime/auto-form/provider.d.ts +27 -0
- package/dist/runtime/{internal/useAutoFormProvider.js → auto-form/provider.js} +1 -1
- package/dist/runtime/{utils → auto-form}/reactive-utils.d.ts +4 -22
- package/dist/runtime/{utils → auto-form}/schema-introspector.d.ts +3 -9
- package/dist/runtime/{utils → auto-form}/schema-introspector.js +11 -9
- package/dist/runtime/components/AutoForm.d.vue.ts +4 -5
- package/dist/runtime/components/AutoForm.vue +12 -35
- package/dist/runtime/components/AutoForm.vue.d.ts +4 -5
- package/dist/runtime/components/ColorChooser.d.vue.ts +10 -6
- package/dist/runtime/components/ColorChooser.vue +4 -7
- package/dist/runtime/components/ColorChooser.vue.d.ts +10 -6
- package/dist/runtime/components/DatePicker.d.vue.ts +16 -10
- package/dist/runtime/components/DatePicker.vue.d.ts +16 -10
- package/dist/runtime/components/SearchForm.d.vue.ts +171 -0
- package/dist/runtime/components/SearchForm.vue +216 -0
- package/dist/runtime/components/SearchForm.vue.d.ts +171 -0
- package/dist/runtime/components/SlideVerify.d.vue.ts +5 -32
- package/dist/runtime/components/SlideVerify.vue +4 -4
- package/dist/runtime/components/SlideVerify.vue.d.ts +5 -32
- package/dist/runtime/components/StarRating.d.vue.ts +8 -16
- package/dist/runtime/components/StarRating.vue +50 -65
- package/dist/runtime/components/StarRating.vue.d.ts +8 -16
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererArray.d.vue.ts +10 -2
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererArray.vue +16 -23
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererArray.vue.d.ts +10 -2
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererChildren.d.vue.ts +26 -0
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererChildren.vue +50 -0
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererChildren.vue.d.ts +26 -0
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererField.d.vue.ts +8 -2
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererField.vue +2 -2
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererField.vue.d.ts +8 -2
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererLayout.d.vue.ts +8 -2
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererLayout.vue +29 -64
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererLayout.vue.d.ts +8 -2
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererNested.d.vue.ts +8 -2
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererNested.vue +15 -69
- package/dist/runtime/components/auto-form-renderer/AutoFormRendererNested.vue.d.ts +8 -2
- package/dist/runtime/components/input/AsPhoneNumberInput.d.vue.ts +36 -0
- package/dist/runtime/components/input/AsPhoneNumberInput.vue +35 -0
- package/dist/runtime/components/input/AsPhoneNumberInput.vue.d.ts +36 -0
- package/dist/runtime/components/input/WithCharacterLimit.d.vue.ts +17 -9
- package/dist/runtime/components/input/WithCharacterLimit.vue +5 -5
- package/dist/runtime/components/input/WithCharacterLimit.vue.d.ts +17 -9
- package/dist/runtime/components/input/WithClear.d.vue.ts +13 -9
- package/dist/runtime/components/input/WithClear.vue +2 -2
- package/dist/runtime/components/input/WithClear.vue.d.ts +13 -9
- package/dist/runtime/components/input/WithCopy.d.vue.ts +16 -10
- package/dist/runtime/components/input/WithCopy.vue +3 -3
- package/dist/runtime/components/input/WithCopy.vue.d.ts +16 -10
- package/dist/runtime/components/input/WithFloatingLabel.d.vue.ts +36 -0
- package/dist/runtime/components/input/WithFloatingLabel.vue +67 -0
- package/dist/runtime/components/input/WithFloatingLabel.vue.d.ts +36 -0
- package/dist/runtime/components/input/WithPasswordToggle.d.vue.ts +11 -9
- package/dist/runtime/components/input/WithPasswordToggle.vue +3 -3
- package/dist/runtime/components/input/WithPasswordToggle.vue.d.ts +11 -9
- package/dist/runtime/components/theme-picker/ThemePicker.d.vue.ts +1 -1
- package/dist/runtime/components/theme-picker/ThemePicker.vue +19 -25
- package/dist/runtime/components/theme-picker/ThemePicker.vue.d.ts +1 -1
- package/dist/runtime/components/theme-picker/ThemePickerButton.d.vue.ts +1 -7
- package/dist/runtime/components/theme-picker/ThemePickerButton.vue.d.ts +1 -7
- package/dist/runtime/composables/index.d.ts +1 -1
- package/dist/runtime/composables/index.js +1 -1
- package/dist/runtime/composables/useApiFetch.d.ts +17 -14
- package/dist/runtime/composables/useApiFetch.js +3 -28
- package/dist/runtime/composables/useAutoForm.d.ts +14 -98
- package/dist/runtime/composables/useAutoForm.js +37 -157
- package/dist/runtime/composables/useClientApiFetch.d.ts +5 -6
- package/dist/runtime/composables/useDownloadWithProgress.js +5 -6
- package/dist/runtime/composables/useLazyApiFetch.d.ts +18 -0
- package/dist/runtime/composables/useLazyApiFetch.js +4 -0
- package/dist/runtime/composables/useTheme.d.ts +17 -14
- package/dist/runtime/composables/useTheme.js +68 -72
- package/dist/runtime/composables/useUploadWithProgress.d.ts +2 -2
- package/dist/runtime/composables/useUploadWithProgress.js +7 -7
- package/dist/runtime/constants/api-defaults.d.ts +9 -0
- package/dist/runtime/constants/api-defaults.js +32 -0
- package/dist/runtime/constants/auto-form.d.ts +0 -2
- package/dist/runtime/constants/auto-form.js +0 -25
- package/dist/runtime/constants/grid-cols.d.ts +7 -0
- package/dist/runtime/constants/grid-cols.js +44 -0
- package/dist/runtime/plugins/api.factory.js +78 -121
- package/dist/runtime/plugins/theme.js +44 -64
- package/dist/runtime/style.css +1 -1
- package/dist/runtime/types/api.d.ts +277 -146
- package/dist/runtime/types/auto-form.d.ts +122 -411
- package/dist/runtime/types/index.d.ts +2 -2
- package/dist/runtime/types/index.js +2 -2
- package/dist/runtime/types/module.d.ts +70 -13
- package/dist/runtime/types/theme.d.ts +2 -0
- package/dist/runtime/types/zod.d.ts +11 -10
- package/dist/runtime/utils/api-utils.d.ts +27 -48
- package/dist/runtime/utils/api-utils.js +18 -47
- package/dist/runtime/utils/meta.d.ts +7 -0
- package/dist/runtime/utils/meta.js +16 -0
- package/package.json +36 -35
- package/dist/runtime/composables/useApiAuth.d.ts +0 -47
- package/dist/runtime/composables/useApiAuth.js +0 -66
- package/dist/runtime/internal/useAutoFormProvider.d.ts +0 -50
- package/dist/runtime/schemas/api.d.ts +0 -590
- package/dist/runtime/schemas/api.js +0 -228
- package/dist/runtime/server/api/_movk/session.post.d.ts +0 -10
- package/dist/runtime/server/api/_movk/session.post.js +0 -18
- package/dist/runtime/types/auth.d.ts +0 -34
- package/dist/runtime/types/auto-form-renderer.d.ts +0 -22
- package/dist/runtime/types/components.d.ts +0 -43
- package/dist/runtime/types/components.js +0 -0
- package/dist/runtime/utils/auto-form.d.ts +0 -3
- package/dist/runtime/utils/auto-form.js +0 -18
- /package/dist/runtime/{utils → auto-form}/reactive-utils.js +0 -0
- /package/dist/runtime/types/{auto-form-renderer.js → theme.js} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ClassNameValue } from '
|
|
1
|
+
import type { ClassNameValue } from '../types/index.js';
|
|
2
2
|
export interface SlideVerifyProps {
|
|
3
3
|
/**
|
|
4
4
|
* 滑块宽度
|
|
@@ -7,7 +7,7 @@ export interface SlideVerifyProps {
|
|
|
7
7
|
sliderWidth?: number;
|
|
8
8
|
/**
|
|
9
9
|
* 滑块高度
|
|
10
|
-
* @defaultValue
|
|
10
|
+
* @defaultValue 32
|
|
11
11
|
*/
|
|
12
12
|
height?: number;
|
|
13
13
|
/**
|
|
@@ -62,41 +62,14 @@ export interface SlideVerifyEmits {
|
|
|
62
62
|
dragStart: [];
|
|
63
63
|
dragEnd: [success: boolean];
|
|
64
64
|
}
|
|
65
|
-
type __VLS_Props = SlideVerifyProps;
|
|
66
|
-
declare function reset(): void;
|
|
67
|
-
type __VLS_ModelProps = {
|
|
68
|
-
modelValue?: boolean;
|
|
69
|
-
};
|
|
70
|
-
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
71
65
|
declare var __VLS_22: {
|
|
72
|
-
verified:
|
|
73
|
-
progress:
|
|
66
|
+
verified: any;
|
|
67
|
+
progress: any;
|
|
74
68
|
};
|
|
75
69
|
type __VLS_Slots = {} & {
|
|
76
70
|
slider?: (props: typeof __VLS_22) => any;
|
|
77
71
|
};
|
|
78
|
-
declare const __VLS_base:
|
|
79
|
-
reset: typeof reset;
|
|
80
|
-
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
81
|
-
"update:modelValue": (value: boolean) => any;
|
|
82
|
-
success: () => any;
|
|
83
|
-
dragStart: () => any;
|
|
84
|
-
dragEnd: (success: boolean) => any;
|
|
85
|
-
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
86
|
-
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
87
|
-
onSuccess?: (() => any) | undefined;
|
|
88
|
-
onDragStart?: (() => any) | undefined;
|
|
89
|
-
onDragEnd?: ((success: boolean) => any) | undefined;
|
|
90
|
-
}>, {
|
|
91
|
-
disabled: boolean;
|
|
92
|
-
icon: string;
|
|
93
|
-
text: string;
|
|
94
|
-
height: number;
|
|
95
|
-
sliderWidth: number;
|
|
96
|
-
successText: string;
|
|
97
|
-
successIcon: string;
|
|
98
|
-
threshold: number;
|
|
99
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
72
|
+
declare const __VLS_base: any;
|
|
100
73
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
101
74
|
declare const _default: typeof __VLS_export;
|
|
102
75
|
export default _default;
|
|
@@ -6,7 +6,7 @@ import { computed, ref, useTemplateRef } from "vue";
|
|
|
6
6
|
defineOptions({ inheritAttrs: false });
|
|
7
7
|
const props = defineProps({
|
|
8
8
|
sliderWidth: { type: Number, required: false, default: 50 },
|
|
9
|
-
height: { type: Number, required: false, default:
|
|
9
|
+
height: { type: Number, required: false, default: 32 },
|
|
10
10
|
disabled: { type: Boolean, required: false, default: false },
|
|
11
11
|
text: { type: String, required: false, default: "\u8BF7\u5411\u53F3\u6ED1\u52A8\u9A8C\u8BC1" },
|
|
12
12
|
successText: { type: String, required: false, default: "\u9A8C\u8BC1\u6210\u529F" },
|
|
@@ -25,12 +25,12 @@ const { width: trackWidth } = useElementSize(trackRef);
|
|
|
25
25
|
const isDragging = ref(false);
|
|
26
26
|
const dragX = ref(0);
|
|
27
27
|
const maxDragDistance = computed(
|
|
28
|
-
() => trackWidth.value ? Math.max(0, trackWidth.value - props.sliderWidth - 8) :
|
|
28
|
+
() => trackWidth.value ? Math.max(0, trackWidth.value - props.sliderWidth - 8) : 0
|
|
29
29
|
);
|
|
30
30
|
const progress = computed(
|
|
31
31
|
() => isVerified.value ? 1 : maxDragDistance.value ? Math.min(dragX.value / maxDragDistance.value, 1) : 0
|
|
32
32
|
);
|
|
33
|
-
const canInteract = computed(() => !props.disabled && !isVerified.value);
|
|
33
|
+
const canInteract = computed(() => !props.disabled && !isVerified.value && trackWidth.value > 0);
|
|
34
34
|
const springTransition = { type: "spring", stiffness: 400, damping: 30 };
|
|
35
35
|
function handleDragStart() {
|
|
36
36
|
if (!canInteract.value) return;
|
|
@@ -82,7 +82,7 @@ defineExpose({ reset });
|
|
|
82
82
|
as="div"
|
|
83
83
|
class="absolute inset-y-0 left-0 bg-primary/20"
|
|
84
84
|
:animate="{ width: `${progress * 100}%`, opacity: 0.6 }"
|
|
85
|
-
:transition="springTransition"
|
|
85
|
+
:transition="isDragging ? { duration: 0 } : springTransition"
|
|
86
86
|
/>
|
|
87
87
|
|
|
88
88
|
<div
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ClassNameValue } from '
|
|
1
|
+
import type { ClassNameValue } from '../types/index.js';
|
|
2
2
|
export interface SlideVerifyProps {
|
|
3
3
|
/**
|
|
4
4
|
* 滑块宽度
|
|
@@ -7,7 +7,7 @@ export interface SlideVerifyProps {
|
|
|
7
7
|
sliderWidth?: number;
|
|
8
8
|
/**
|
|
9
9
|
* 滑块高度
|
|
10
|
-
* @defaultValue
|
|
10
|
+
* @defaultValue 32
|
|
11
11
|
*/
|
|
12
12
|
height?: number;
|
|
13
13
|
/**
|
|
@@ -62,41 +62,14 @@ export interface SlideVerifyEmits {
|
|
|
62
62
|
dragStart: [];
|
|
63
63
|
dragEnd: [success: boolean];
|
|
64
64
|
}
|
|
65
|
-
type __VLS_Props = SlideVerifyProps;
|
|
66
|
-
declare function reset(): void;
|
|
67
|
-
type __VLS_ModelProps = {
|
|
68
|
-
modelValue?: boolean;
|
|
69
|
-
};
|
|
70
|
-
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
71
65
|
declare var __VLS_22: {
|
|
72
|
-
verified:
|
|
73
|
-
progress:
|
|
66
|
+
verified: any;
|
|
67
|
+
progress: any;
|
|
74
68
|
};
|
|
75
69
|
type __VLS_Slots = {} & {
|
|
76
70
|
slider?: (props: typeof __VLS_22) => any;
|
|
77
71
|
};
|
|
78
|
-
declare const __VLS_base:
|
|
79
|
-
reset: typeof reset;
|
|
80
|
-
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
81
|
-
"update:modelValue": (value: boolean) => any;
|
|
82
|
-
success: () => any;
|
|
83
|
-
dragStart: () => any;
|
|
84
|
-
dragEnd: (success: boolean) => any;
|
|
85
|
-
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
86
|
-
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
87
|
-
onSuccess?: (() => any) | undefined;
|
|
88
|
-
onDragStart?: (() => any) | undefined;
|
|
89
|
-
onDragEnd?: ((success: boolean) => any) | undefined;
|
|
90
|
-
}>, {
|
|
91
|
-
disabled: boolean;
|
|
92
|
-
icon: string;
|
|
93
|
-
text: string;
|
|
94
|
-
height: number;
|
|
95
|
-
sliderWidth: number;
|
|
96
|
-
successText: string;
|
|
97
|
-
successIcon: string;
|
|
98
|
-
threshold: number;
|
|
99
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
72
|
+
declare const __VLS_base: any;
|
|
100
73
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
101
74
|
declare const _default: typeof __VLS_export;
|
|
102
75
|
export default _default;
|
|
@@ -73,15 +73,15 @@ export interface StarRatingEmits {
|
|
|
73
73
|
'hover': [value: number | null];
|
|
74
74
|
}
|
|
75
75
|
declare var __VLS_1: {
|
|
76
|
-
value:
|
|
77
|
-
max:
|
|
76
|
+
value: any;
|
|
77
|
+
max: any;
|
|
78
78
|
}, __VLS_13: {
|
|
79
|
-
value:
|
|
80
|
-
max:
|
|
81
|
-
label:
|
|
79
|
+
value: any;
|
|
80
|
+
max: any;
|
|
81
|
+
label: any;
|
|
82
82
|
}, __VLS_20: {
|
|
83
|
-
value:
|
|
84
|
-
max:
|
|
83
|
+
value: any;
|
|
84
|
+
max: any;
|
|
85
85
|
};
|
|
86
86
|
type __VLS_Slots = {} & {
|
|
87
87
|
prefix?: (props: typeof __VLS_1) => any;
|
|
@@ -90,15 +90,7 @@ type __VLS_Slots = {} & {
|
|
|
90
90
|
} & {
|
|
91
91
|
suffix?: (props: typeof __VLS_20) => any;
|
|
92
92
|
};
|
|
93
|
-
declare const __VLS_base:
|
|
94
|
-
change: (value: number) => any;
|
|
95
|
-
hover: (value: number | null) => any;
|
|
96
|
-
"update:modelValue": (value: number) => any;
|
|
97
|
-
}, string, import("vue").PublicProps, Readonly<StarRatingProps> & Readonly<{
|
|
98
|
-
onChange?: ((value: number) => any) | undefined;
|
|
99
|
-
onHover?: ((value: number | null) => any) | undefined;
|
|
100
|
-
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
|
101
|
-
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
93
|
+
declare const __VLS_base: any;
|
|
102
94
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
103
95
|
declare const _default: typeof __VLS_export;
|
|
104
96
|
export default _default;
|
|
@@ -1,42 +1,28 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { UButton, UBadge } from "#components";
|
|
3
3
|
import { computed, ref } from "vue";
|
|
4
|
-
const {
|
|
5
|
-
modelValue
|
|
6
|
-
max
|
|
7
|
-
disabled
|
|
8
|
-
readonly
|
|
9
|
-
showBadge
|
|
10
|
-
buttonProps,
|
|
11
|
-
emptyIcon = "i-lucide-star",
|
|
12
|
-
filledIcon = "i-lucide-star",
|
|
13
|
-
halfIcon = "i-lucide-star-half",
|
|
14
|
-
color = "warning",
|
|
15
|
-
size = "sm",
|
|
16
|
-
allowHalf = false,
|
|
17
|
-
clearable = false
|
|
18
|
-
} = defineProps({
|
|
19
|
-
modelValue: { type: Number, required: false },
|
|
20
|
-
max: { type: Number, required: false },
|
|
21
|
-
disabled: { type: Boolean, required: false },
|
|
22
|
-
readonly: { type: Boolean, required: false },
|
|
23
|
-
showBadge: { type: Boolean, required: false },
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
modelValue: { type: Number, required: false, default: 0 },
|
|
6
|
+
max: { type: Number, required: false, default: 5 },
|
|
7
|
+
disabled: { type: Boolean, required: false, default: false },
|
|
8
|
+
readonly: { type: Boolean, required: false, default: false },
|
|
9
|
+
showBadge: { type: Boolean, required: false, default: true },
|
|
24
10
|
buttonProps: { type: Object, required: false },
|
|
25
|
-
emptyIcon: { type: String, required: false },
|
|
26
|
-
filledIcon: { type: String, required: false },
|
|
27
|
-
halfIcon: { type: String, required: false },
|
|
28
|
-
color: { type: null, required: false },
|
|
29
|
-
size: { type: null, required: false },
|
|
30
|
-
allowHalf: { type: Boolean, required: false },
|
|
31
|
-
clearable: { type: Boolean, required: false }
|
|
11
|
+
emptyIcon: { type: String, required: false, default: "i-lucide-star" },
|
|
12
|
+
filledIcon: { type: String, required: false, default: "i-lucide-star" },
|
|
13
|
+
halfIcon: { type: String, required: false, default: "i-lucide-star-half" },
|
|
14
|
+
color: { type: null, required: false, default: "warning" },
|
|
15
|
+
size: { type: null, required: false, default: "sm" },
|
|
16
|
+
allowHalf: { type: Boolean, required: false, default: false },
|
|
17
|
+
clearable: { type: Boolean, required: false, default: false }
|
|
32
18
|
});
|
|
33
19
|
const emit = defineEmits(["update:modelValue", "change", "hover"]);
|
|
34
20
|
defineOptions({ inheritAttrs: false });
|
|
35
21
|
const hoveredStar = ref(null);
|
|
36
22
|
const focusedIndex = ref(0);
|
|
37
|
-
const isInteractive = computed(() => !disabled && !readonly);
|
|
23
|
+
const isInteractive = computed(() => !props.disabled && !props.readonly);
|
|
38
24
|
function calculateHalfStarValue(index, event) {
|
|
39
|
-
if (!allowHalf) return index + 1;
|
|
25
|
+
if (!props.allowHalf) return index + 1;
|
|
40
26
|
const target = event.currentTarget;
|
|
41
27
|
const rect = target.getBoundingClientRect();
|
|
42
28
|
const posX = event.clientX - rect.left;
|
|
@@ -44,7 +30,7 @@ function calculateHalfStarValue(index, event) {
|
|
|
44
30
|
return posX < halfWidth ? index + 0.5 : index + 1;
|
|
45
31
|
}
|
|
46
32
|
function updateValue(newValue) {
|
|
47
|
-
if (clearable && newValue === modelValue) {
|
|
33
|
+
if (props.clearable && newValue === props.modelValue) {
|
|
48
34
|
emit("update:modelValue", 0);
|
|
49
35
|
emit("change", 0);
|
|
50
36
|
return;
|
|
@@ -64,7 +50,7 @@ function handleMouseEnter(index, event) {
|
|
|
64
50
|
emit("hover", hoverValue);
|
|
65
51
|
}
|
|
66
52
|
function handleMouseMove(index, event) {
|
|
67
|
-
if (!isInteractive.value || !allowHalf) return;
|
|
53
|
+
if (!isInteractive.value || !props.allowHalf) return;
|
|
68
54
|
const hoverValue = calculateHalfStarValue(index, event);
|
|
69
55
|
const currentHover = hoveredStar.value !== null ? hoveredStar.value + 1 : null;
|
|
70
56
|
if (currentHover !== hoverValue) {
|
|
@@ -79,22 +65,22 @@ function handleMouseLeave() {
|
|
|
79
65
|
}
|
|
80
66
|
function handleKeyDown(event) {
|
|
81
67
|
if (!isInteractive.value) return;
|
|
82
|
-
const step = allowHalf ? 0.5 : 1;
|
|
68
|
+
const step = props.allowHalf ? 0.5 : 1;
|
|
83
69
|
switch (event.key) {
|
|
84
70
|
case "ArrowRight":
|
|
85
71
|
case "ArrowUp":
|
|
86
72
|
event.preventDefault();
|
|
87
|
-
if (modelValue < max) {
|
|
88
|
-
updateValue(Math.min(modelValue + step, max));
|
|
89
|
-
focusedIndex.value = Math.min(Math.floor(modelValue + step), max - 1);
|
|
73
|
+
if (props.modelValue < props.max) {
|
|
74
|
+
updateValue(Math.min(props.modelValue + step, props.max));
|
|
75
|
+
focusedIndex.value = Math.min(Math.floor(props.modelValue + step), props.max - 1);
|
|
90
76
|
}
|
|
91
77
|
break;
|
|
92
78
|
case "ArrowLeft":
|
|
93
79
|
case "ArrowDown":
|
|
94
80
|
event.preventDefault();
|
|
95
|
-
if (modelValue > 0) {
|
|
96
|
-
updateValue(Math.max(modelValue - step, 0));
|
|
97
|
-
focusedIndex.value = Math.max(Math.floor(modelValue - step) - 1, 0);
|
|
81
|
+
if (props.modelValue > 0) {
|
|
82
|
+
updateValue(Math.max(props.modelValue - step, 0));
|
|
83
|
+
focusedIndex.value = Math.max(Math.floor(props.modelValue - step) - 1, 0);
|
|
98
84
|
}
|
|
99
85
|
break;
|
|
100
86
|
case "Home":
|
|
@@ -104,12 +90,12 @@ function handleKeyDown(event) {
|
|
|
104
90
|
break;
|
|
105
91
|
case "End":
|
|
106
92
|
event.preventDefault();
|
|
107
|
-
updateValue(max);
|
|
108
|
-
focusedIndex.value = max - 1;
|
|
93
|
+
updateValue(props.max);
|
|
94
|
+
focusedIndex.value = props.max - 1;
|
|
109
95
|
break;
|
|
110
96
|
case "Backspace":
|
|
111
97
|
case "Delete":
|
|
112
|
-
if (clearable) {
|
|
98
|
+
if (props.clearable) {
|
|
113
99
|
event.preventDefault();
|
|
114
100
|
updateValue(0);
|
|
115
101
|
focusedIndex.value = 0;
|
|
@@ -118,7 +104,7 @@ function handleKeyDown(event) {
|
|
|
118
104
|
default:
|
|
119
105
|
if (event.key >= "0" && event.key <= "9") {
|
|
120
106
|
const numValue = Number.parseInt(event.key);
|
|
121
|
-
if (numValue <= max) {
|
|
107
|
+
if (numValue <= props.max) {
|
|
122
108
|
event.preventDefault();
|
|
123
109
|
updateValue(numValue);
|
|
124
110
|
focusedIndex.value = Math.max(numValue - 1, 0);
|
|
@@ -127,60 +113,59 @@ function handleKeyDown(event) {
|
|
|
127
113
|
}
|
|
128
114
|
}
|
|
129
115
|
function getStarState(index) {
|
|
130
|
-
const displayValue = hoveredStar.value !== null ? hoveredStar.value + 1 : modelValue;
|
|
116
|
+
const displayValue = hoveredStar.value !== null ? hoveredStar.value + 1 : props.modelValue;
|
|
131
117
|
if (index < Math.floor(displayValue)) {
|
|
132
118
|
return "full";
|
|
133
119
|
}
|
|
134
|
-
if (allowHalf && index === Math.floor(displayValue) && displayValue % 1 !== 0) {
|
|
120
|
+
if (props.allowHalf && index === Math.floor(displayValue) && displayValue % 1 !== 0) {
|
|
135
121
|
return "half";
|
|
136
122
|
}
|
|
137
123
|
return "empty";
|
|
138
124
|
}
|
|
139
125
|
function getStarIcon(index) {
|
|
140
126
|
const state = getStarState(index);
|
|
141
|
-
if (state === "full") return filledIcon;
|
|
142
|
-
if (state === "half") return halfIcon;
|
|
143
|
-
return emptyIcon;
|
|
127
|
+
if (state === "full") return props.filledIcon;
|
|
128
|
+
if (state === "half") return props.halfIcon;
|
|
129
|
+
return props.emptyIcon;
|
|
144
130
|
}
|
|
145
131
|
function getStarColor(index) {
|
|
146
132
|
const state = getStarState(index);
|
|
147
|
-
return state !== "empty" ? color : "neutral";
|
|
133
|
+
return state !== "empty" ? props.color : "neutral";
|
|
148
134
|
}
|
|
149
|
-
const badgeLabel = computed(() => `${modelValue}/${max}`);
|
|
135
|
+
const badgeLabel = computed(() => `${props.modelValue}/${props.max}`);
|
|
150
136
|
</script>
|
|
151
137
|
|
|
152
138
|
<template>
|
|
153
139
|
<div
|
|
154
140
|
class="inline-flex items-center gap-1"
|
|
155
141
|
role="slider"
|
|
156
|
-
:aria-label="`\u8BC4\u5206 ${modelValue} / ${max}`"
|
|
157
|
-
:aria-valuenow="modelValue"
|
|
142
|
+
:aria-label="`\u8BC4\u5206 ${props.modelValue} / ${props.max}`"
|
|
143
|
+
:aria-valuenow="props.modelValue"
|
|
158
144
|
:aria-valuemin="0"
|
|
159
|
-
:aria-valuemax="max"
|
|
160
|
-
:aria-disabled="disabled"
|
|
161
|
-
:aria-readonly="readonly"
|
|
145
|
+
:aria-valuemax="props.max"
|
|
146
|
+
:aria-disabled="props.disabled"
|
|
147
|
+
:aria-readonly="props.readonly"
|
|
162
148
|
:tabindex="isInteractive ? 0 : -1"
|
|
163
149
|
@keydown="handleKeyDown"
|
|
164
150
|
>
|
|
165
|
-
<slot name="prefix" :value="modelValue" :max="max" />
|
|
166
|
-
|
|
151
|
+
<slot name="prefix" :value="props.modelValue" :max="props.max" />
|
|
167
152
|
<div class="flex items-center gap-0.5">
|
|
168
153
|
<UButton
|
|
169
|
-
v-for="index in max"
|
|
154
|
+
v-for="index in props.max"
|
|
170
155
|
:key="index"
|
|
171
156
|
:icon="getStarIcon(index - 1)"
|
|
172
157
|
:color="getStarColor(index - 1)"
|
|
173
158
|
variant="ghost"
|
|
174
|
-
:size="size"
|
|
175
|
-
:disabled="disabled"
|
|
159
|
+
:size="props.size"
|
|
160
|
+
:disabled="props.disabled"
|
|
176
161
|
:aria-label="`${index} \u661F`"
|
|
177
162
|
:tabindex="-1"
|
|
178
163
|
v-bind="buttonProps"
|
|
179
164
|
class="transition-all duration-150"
|
|
180
165
|
:class="{
|
|
181
166
|
'cursor-pointer hover:scale-110': isInteractive,
|
|
182
|
-
'cursor-not-allowed opacity-50': disabled,
|
|
183
|
-
'cursor-default': readonly && !disabled
|
|
167
|
+
'cursor-not-allowed opacity-50': props.disabled,
|
|
168
|
+
'cursor-default': props.readonly && !props.disabled
|
|
184
169
|
}"
|
|
185
170
|
@click="handleClick(index - 1, $event)"
|
|
186
171
|
@mouseenter="handleMouseEnter(index - 1, $event)"
|
|
@@ -191,12 +176,12 @@ const badgeLabel = computed(() => `${modelValue}/${max}`);
|
|
|
191
176
|
|
|
192
177
|
<slot
|
|
193
178
|
name="badge"
|
|
194
|
-
:value="modelValue"
|
|
195
|
-
:max="max"
|
|
179
|
+
:value="props.modelValue"
|
|
180
|
+
:max="props.max"
|
|
196
181
|
:label="badgeLabel"
|
|
197
182
|
>
|
|
198
183
|
<UBadge
|
|
199
|
-
v-if="showBadge && modelValue > 0"
|
|
184
|
+
v-if="showBadge && props.modelValue > 0"
|
|
200
185
|
:label="badgeLabel"
|
|
201
186
|
color="primary"
|
|
202
187
|
variant="subtle"
|
|
@@ -204,6 +189,6 @@ const badgeLabel = computed(() => `${modelValue}/${max}`);
|
|
|
204
189
|
/>
|
|
205
190
|
</slot>
|
|
206
191
|
|
|
207
|
-
<slot name="suffix" :value="modelValue" :max="max" />
|
|
192
|
+
<slot name="suffix" :value="props.modelValue" :max="props.max" />
|
|
208
193
|
</div>
|
|
209
194
|
</template>
|
|
@@ -73,15 +73,15 @@ export interface StarRatingEmits {
|
|
|
73
73
|
'hover': [value: number | null];
|
|
74
74
|
}
|
|
75
75
|
declare var __VLS_1: {
|
|
76
|
-
value:
|
|
77
|
-
max:
|
|
76
|
+
value: any;
|
|
77
|
+
max: any;
|
|
78
78
|
}, __VLS_13: {
|
|
79
|
-
value:
|
|
80
|
-
max:
|
|
81
|
-
label:
|
|
79
|
+
value: any;
|
|
80
|
+
max: any;
|
|
81
|
+
label: any;
|
|
82
82
|
}, __VLS_20: {
|
|
83
|
-
value:
|
|
84
|
-
max:
|
|
83
|
+
value: any;
|
|
84
|
+
max: any;
|
|
85
85
|
};
|
|
86
86
|
type __VLS_Slots = {} & {
|
|
87
87
|
prefix?: (props: typeof __VLS_1) => any;
|
|
@@ -90,15 +90,7 @@ type __VLS_Slots = {} & {
|
|
|
90
90
|
} & {
|
|
91
91
|
suffix?: (props: typeof __VLS_20) => any;
|
|
92
92
|
};
|
|
93
|
-
declare const __VLS_base:
|
|
94
|
-
change: (value: number) => any;
|
|
95
|
-
hover: (value: number | null) => any;
|
|
96
|
-
"update:modelValue": (value: number) => any;
|
|
97
|
-
}, string, import("vue").PublicProps, Readonly<StarRatingProps> & Readonly<{
|
|
98
|
-
onChange?: ((value: number) => any) | undefined;
|
|
99
|
-
onHover?: ((value: number | null) => any) | undefined;
|
|
100
|
-
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
|
101
|
-
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
93
|
+
declare const __VLS_base: any;
|
|
102
94
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
103
95
|
declare const _default: typeof __VLS_export;
|
|
104
96
|
export default _default;
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
-
import type { z } from 'zod
|
|
2
|
-
import type {
|
|
1
|
+
import type { z } from 'zod';
|
|
2
|
+
import type { ButtonProps } from '@nuxt/ui';
|
|
3
|
+
import type { AutoFormField } from '../../types/auto-form.js';
|
|
4
|
+
import type { AnyObject } from '@movk/core';
|
|
5
|
+
import type { AutoFormProps } from '../AutoForm.vue.js';
|
|
6
|
+
export interface AutoFormRendererArrayProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
|
|
7
|
+
field: AutoFormField;
|
|
8
|
+
extraProps?: AnyObject;
|
|
9
|
+
addButtonProps?: Partial<ButtonProps>;
|
|
10
|
+
}
|
|
3
11
|
declare const __VLS_export: <S extends z.ZodObject>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
4
12
|
props: import("vue").PublicProps & __VLS_PrettifyLocal<AutoFormRendererArrayProps<S>> & (typeof globalThis extends {
|
|
5
13
|
__VLS_PROPS_FALLBACK: infer P;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { UButton, UCollapsible } from "#components";
|
|
3
|
-
import { computed, ref
|
|
4
|
-
import { useAutoFormInjector } from "../../
|
|
3
|
+
import { computed, ref } from "vue";
|
|
4
|
+
import { useAutoFormInjector } from "../../auto-form/provider";
|
|
5
5
|
import { joinPath } from "@movk/core";
|
|
6
|
-
import { collectFieldDefaults, createHintSlotFactory
|
|
6
|
+
import { collectFieldDefaults, createHintSlotFactory } from "../../auto-form/field-utils";
|
|
7
|
+
import { VNodeRender } from "../../auto-form/reactive-utils";
|
|
7
8
|
import AutoFormRendererField from "./AutoFormRendererField.vue";
|
|
8
9
|
import AutoFormRendererNested from "./AutoFormRendererNested.vue";
|
|
9
10
|
const {
|
|
@@ -22,21 +23,17 @@ const context = createFieldContext(field);
|
|
|
22
23
|
const slotResolver = computed(() => createSlotResolver(field, extraProps));
|
|
23
24
|
const slotProps = computed(() => createSlotProps(field, extraProps));
|
|
24
25
|
const elementTemplate = computed(() => field.arrayElement);
|
|
25
|
-
const isObjectElement = computed(() =>
|
|
26
|
-
if (!elementTemplate.value)
|
|
27
|
-
return false;
|
|
28
|
-
return elementTemplate.value.meta.type === "object";
|
|
29
|
-
});
|
|
26
|
+
const isObjectElement = computed(() => elementTemplate.value?.meta.type === "object");
|
|
30
27
|
const arrayValue = computed(() => {
|
|
31
28
|
const value = context.value;
|
|
32
29
|
return Array.isArray(value) ? value : [];
|
|
33
30
|
});
|
|
34
31
|
const itemIds = ref([]);
|
|
35
|
-
|
|
32
|
+
const idCounter = ref(0);
|
|
36
33
|
function ensureItemIds() {
|
|
37
34
|
const arr = arrayValue.value;
|
|
38
35
|
while (itemIds.value.length < arr.length) {
|
|
39
|
-
itemIds.value.push(`${field.path}-${idCounter++}`);
|
|
36
|
+
itemIds.value.push(`${field.path}-${idCounter.value++}`);
|
|
40
37
|
}
|
|
41
38
|
}
|
|
42
39
|
function getItemId(_item, index) {
|
|
@@ -68,7 +65,7 @@ function updateFieldPaths(template, oldBasePath, newBasePath, hintSlotFactory) {
|
|
|
68
65
|
return updatedField;
|
|
69
66
|
}
|
|
70
67
|
const arrayItemFields = computed(() => {
|
|
71
|
-
const template =
|
|
68
|
+
const template = elementTemplate.value;
|
|
72
69
|
const arr = arrayValue.value;
|
|
73
70
|
if (!template || !arr.length)
|
|
74
71
|
return [];
|
|
@@ -79,12 +76,11 @@ const arrayItemFields = computed(() => {
|
|
|
79
76
|
});
|
|
80
77
|
});
|
|
81
78
|
function createDefaultValue() {
|
|
82
|
-
const template =
|
|
79
|
+
const template = elementTemplate.value;
|
|
83
80
|
return template ? collectFieldDefaults(template) : void 0;
|
|
84
81
|
}
|
|
85
82
|
function addItem() {
|
|
86
|
-
|
|
87
|
-
if (!template)
|
|
83
|
+
if (!elementTemplate.value)
|
|
88
84
|
return;
|
|
89
85
|
const newArray = [...arrayValue.value, createDefaultValue()];
|
|
90
86
|
context.setValue(newArray);
|
|
@@ -100,9 +96,8 @@ function removeItem(count) {
|
|
|
100
96
|
const { collapsibleConfig, shouldShowCollapsible, isHidden, enhancedField } = createCollapsibleEnhancer(field, extraProps);
|
|
101
97
|
const DEFAULT_ADD_BUTTON_PROPS = {
|
|
102
98
|
icon: "i-lucide-plus",
|
|
103
|
-
color: "
|
|
104
|
-
variant: "
|
|
105
|
-
block: true,
|
|
99
|
+
color: "info",
|
|
100
|
+
variant: "soft",
|
|
106
101
|
size: "sm"
|
|
107
102
|
};
|
|
108
103
|
const addButtonProps = computed(() => ({
|
|
@@ -121,11 +116,10 @@ const addButtonProps = computed(() => ({
|
|
|
121
116
|
<VNodeRender v-if="slotResolver.hasSlot('before')" :node="slotResolver.renderSlot('before', slotProps)" />
|
|
122
117
|
<VNodeRender v-if="slotResolver.hasSlot('content')" :node="slotResolver.renderSlot('content', slotProps)" />
|
|
123
118
|
<template v-else>
|
|
124
|
-
<template v-for="(
|
|
119
|
+
<template v-for="(itemField, count) in arrayItemFields" :key="getItemId(arrayValue[count], count)">
|
|
125
120
|
<component
|
|
126
121
|
:is="isObjectElement ? AutoFormRendererNested : AutoFormRendererField"
|
|
127
|
-
|
|
128
|
-
:field="arrayItemFields[count]"
|
|
122
|
+
:field="itemField"
|
|
129
123
|
:schema="schema"
|
|
130
124
|
:extra-props="{ ...extraProps, count }"
|
|
131
125
|
/>
|
|
@@ -139,11 +133,10 @@ const addButtonProps = computed(() => ({
|
|
|
139
133
|
</UCollapsible>
|
|
140
134
|
|
|
141
135
|
<template v-else-if="elementTemplate">
|
|
142
|
-
<template v-for="(
|
|
136
|
+
<template v-for="(itemField, count) in arrayItemFields" :key="getItemId(arrayValue[count], count)">
|
|
143
137
|
<component
|
|
144
138
|
:is="isObjectElement ? AutoFormRendererNested : AutoFormRendererField"
|
|
145
|
-
|
|
146
|
-
:field="arrayItemFields[count]"
|
|
139
|
+
:field="itemField"
|
|
147
140
|
:schema="schema"
|
|
148
141
|
:extra-props="{ ...extraProps, count }"
|
|
149
142
|
/>
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
-
import type { z } from 'zod
|
|
2
|
-
import type {
|
|
1
|
+
import type { z } from 'zod';
|
|
2
|
+
import type { ButtonProps } from '@nuxt/ui';
|
|
3
|
+
import type { AutoFormField } from '../../types/auto-form.js';
|
|
4
|
+
import type { AnyObject } from '@movk/core';
|
|
5
|
+
import type { AutoFormProps } from '../AutoForm.vue.js';
|
|
6
|
+
export interface AutoFormRendererArrayProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
|
|
7
|
+
field: AutoFormField;
|
|
8
|
+
extraProps?: AnyObject;
|
|
9
|
+
addButtonProps?: Partial<ButtonProps>;
|
|
10
|
+
}
|
|
3
11
|
declare const __VLS_export: <S extends z.ZodObject>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
4
12
|
props: import("vue").PublicProps & __VLS_PrettifyLocal<AutoFormRendererArrayProps<S>> & (typeof globalThis extends {
|
|
5
13
|
__VLS_PROPS_FALLBACK: infer P;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { z } from 'zod';
|
|
2
|
+
import type { AutoFormField } from '../../types/auto-form.js';
|
|
3
|
+
import type { AnyObject } from '@movk/core';
|
|
4
|
+
import type { AutoFormProps } from '../AutoForm.vue.js';
|
|
5
|
+
export interface AutoFormRendererChildrenProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
|
|
6
|
+
fields: AutoFormField[];
|
|
7
|
+
extraProps?: AnyObject;
|
|
8
|
+
}
|
|
9
|
+
declare const __VLS_export: <S extends z.ZodObject>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
10
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<AutoFormRendererChildrenProps<S>> & (typeof globalThis extends {
|
|
11
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
12
|
+
} ? P : {});
|
|
13
|
+
expose: (exposed: {}) => void;
|
|
14
|
+
attrs: any;
|
|
15
|
+
slots: {};
|
|
16
|
+
emit: {};
|
|
17
|
+
}>) => import("vue").VNode & {
|
|
18
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
19
|
+
};
|
|
20
|
+
declare const _default: typeof __VLS_export;
|
|
21
|
+
export default _default;
|
|
22
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
23
|
+
[K in keyof T]: T[K];
|
|
24
|
+
} : {
|
|
25
|
+
[K in keyof T as K]: T[K];
|
|
26
|
+
}) & {};
|