ep-craft 0.1.27 → 0.1.28
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/dist/components/form/EpForm.vue.d.ts +61 -0
- package/dist/components/form/EpForm.vue.js +199 -0
- package/dist/components/form/EpForm2.vue.js +4 -0
- package/dist/components/form/index.d.ts +12 -2
- package/dist/components/form/index.js +9 -3
- package/dist/components/form/instance.d.ts +2 -0
- package/dist/components/form/src/form-item.d.ts +103 -0
- package/dist/components/form/src/form-item.js +91 -0
- package/dist/components/form/src/form-label-wrap.d.ts +11 -0
- package/dist/components/form/src/form-label-wrap.js +74 -0
- package/dist/components/form/src/form.d.ts +127 -0
- package/dist/components/form/src/form.js +112 -0
- package/dist/components/form/src/types.d.ts +48 -19
- package/dist/components/form/src/utils.d.ts +9 -0
- package/dist/components/form/src/utils.js +45 -0
- package/dist/components/form-item/EpFormItem.vue.d.ts +55 -0
- package/dist/components/form-item/EpFormItem.vue.js +257 -0
- package/dist/components/form-item/EpFormItem2.vue.js +4 -0
- package/dist/components/form-item/index.d.ts +5 -2
- package/dist/components/form-item/index.js +5 -3
- package/dist/components/form-item/instance.d.ts +2 -0
- package/dist/components/select/select.vue.d.ts +1 -1
- package/dist/components/select/src/useSelect.d.ts +1 -1
- package/dist/components/select-v2/src/select.vue.d.ts +1 -1
- package/dist/components/select-v2/src/useSelect.d.ts +1 -1
- package/dist/utils/objects.js +11 -3
- package/package.json +2 -1
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import type { ExtractPublicPropTypes } from 'vue';
|
|
2
|
+
import type { ComponentSize } from '@element-plus/constants';
|
|
3
|
+
import type { FormItemProp } from './form-item';
|
|
4
|
+
import type { FormRules } from './types';
|
|
5
|
+
export interface FormMetaProps {
|
|
6
|
+
/**
|
|
7
|
+
* @description Control the size of components in this form.
|
|
8
|
+
*/
|
|
9
|
+
size?: ComponentSize;
|
|
10
|
+
/**
|
|
11
|
+
* @description Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component.
|
|
12
|
+
*/
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated Removed after 3.0.0, Use `FormMetaProps` instead.
|
|
17
|
+
*/
|
|
18
|
+
export declare const formMetaProps: {
|
|
19
|
+
readonly size: {
|
|
20
|
+
readonly type: import("vue").PropType<import("@element-plus/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown>>;
|
|
21
|
+
readonly required: false;
|
|
22
|
+
readonly validator: ((val: unknown) => boolean) | undefined;
|
|
23
|
+
__epPropKey: true;
|
|
24
|
+
};
|
|
25
|
+
readonly disabled: BooleanConstructor;
|
|
26
|
+
};
|
|
27
|
+
export interface FormProps extends FormMetaProps {
|
|
28
|
+
/**
|
|
29
|
+
* @description Data of form component.
|
|
30
|
+
*/
|
|
31
|
+
model?: Record<string, any>;
|
|
32
|
+
/**
|
|
33
|
+
* @description Validation rules of form.
|
|
34
|
+
*/
|
|
35
|
+
rules?: FormRules;
|
|
36
|
+
/**
|
|
37
|
+
* @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.
|
|
38
|
+
*/
|
|
39
|
+
labelPosition?: 'left' | 'right' | 'top';
|
|
40
|
+
/**
|
|
41
|
+
* @description Position of asterisk.
|
|
42
|
+
*/
|
|
43
|
+
requireAsteriskPosition?: 'left' | 'right';
|
|
44
|
+
/**
|
|
45
|
+
* @description Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported.
|
|
46
|
+
*/
|
|
47
|
+
labelWidth?: string | number;
|
|
48
|
+
/**
|
|
49
|
+
* @description Suffix of the label.
|
|
50
|
+
*/
|
|
51
|
+
labelSuffix?: string;
|
|
52
|
+
/**
|
|
53
|
+
* @description Whether the form is inline.
|
|
54
|
+
*/
|
|
55
|
+
inline?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* @description Whether to display the error message inline with the form item.
|
|
58
|
+
*/
|
|
59
|
+
inlineMessage?: boolean;
|
|
60
|
+
/**
|
|
61
|
+
* @description Whether to display an icon indicating the validation result.
|
|
62
|
+
*/
|
|
63
|
+
statusIcon?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* @description Whether to show the error message.
|
|
66
|
+
*/
|
|
67
|
+
showMessage?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* @description Whether to trigger validation when the `rules` prop is changed.
|
|
70
|
+
*/
|
|
71
|
+
validateOnRuleChange?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* @description Whether to hide required fields should have a red asterisk (star) beside their labels.
|
|
74
|
+
*/
|
|
75
|
+
hideRequiredAsterisk?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* @description When validation fails, scroll to the first error form entry.
|
|
78
|
+
*/
|
|
79
|
+
scrollToError?: boolean;
|
|
80
|
+
/**
|
|
81
|
+
* @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
|
|
82
|
+
*/
|
|
83
|
+
scrollIntoViewOptions?: ScrollIntoViewOptions | boolean;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* @deprecated Removed after 3.0.0, Use `FormProps` instead.
|
|
87
|
+
*/
|
|
88
|
+
export declare const formProps: {
|
|
89
|
+
readonly model: ObjectConstructor;
|
|
90
|
+
readonly rules: {
|
|
91
|
+
readonly type: import("vue").PropType<Partial<Record<string, Record<string, any> | import("@element-plus/utils").Arrayable<import("./types").FormItemRule>>>>;
|
|
92
|
+
readonly required: false;
|
|
93
|
+
readonly validator: ((val: unknown) => boolean) | undefined;
|
|
94
|
+
__epPropKey: true;
|
|
95
|
+
};
|
|
96
|
+
readonly labelPosition: import("@element-plus/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top", unknown, "right", boolean>;
|
|
97
|
+
readonly requireAsteriskPosition: import("@element-plus/utils").EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
|
|
98
|
+
readonly labelWidth: import("@element-plus/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
|
|
99
|
+
readonly labelSuffix: import("@element-plus/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
|
100
|
+
readonly inline: BooleanConstructor;
|
|
101
|
+
readonly inlineMessage: BooleanConstructor;
|
|
102
|
+
readonly statusIcon: BooleanConstructor;
|
|
103
|
+
readonly showMessage: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
|
104
|
+
readonly validateOnRuleChange: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
|
105
|
+
readonly hideRequiredAsterisk: BooleanConstructor;
|
|
106
|
+
readonly scrollToError: BooleanConstructor;
|
|
107
|
+
readonly scrollIntoViewOptions: import("@element-plus/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | (((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions)) | null)[], unknown, unknown, true, boolean>;
|
|
108
|
+
readonly size: {
|
|
109
|
+
readonly type: import("vue").PropType<import("@element-plus/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown>>;
|
|
110
|
+
readonly required: false;
|
|
111
|
+
readonly validator: ((val: unknown) => boolean) | undefined;
|
|
112
|
+
__epPropKey: true;
|
|
113
|
+
};
|
|
114
|
+
readonly disabled: BooleanConstructor;
|
|
115
|
+
};
|
|
116
|
+
/**
|
|
117
|
+
* @deprecated Removed after 3.0.0, Use `FormProps` instead.
|
|
118
|
+
*/
|
|
119
|
+
export type FormPropsPublic = ExtractPublicPropTypes<typeof formProps>;
|
|
120
|
+
/**
|
|
121
|
+
* @deprecated Removed after 3.0.0, Use `FormMetaProps` instead.
|
|
122
|
+
*/
|
|
123
|
+
export type FormMetaPropsPublic = ExtractPublicPropTypes<typeof formMetaProps>;
|
|
124
|
+
export declare const formEmits: {
|
|
125
|
+
validate: (prop: FormItemProp, isValid: boolean, message: string) => boolean;
|
|
126
|
+
};
|
|
127
|
+
export type FormEmits = typeof formEmits;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { componentSizes as a } from "../../../constants/size.js";
|
|
2
|
+
import { isBoolean as n } from "../../../utils/types.js";
|
|
3
|
+
import "lodash-unified";
|
|
4
|
+
import "@vueuse/core";
|
|
5
|
+
import { isArray as s, isString as t } from "@vue/shared";
|
|
6
|
+
import "@element-plus/icons-vue";
|
|
7
|
+
import { buildProps as i, definePropType as o } from "../../../utils/vue/props/runtime.js";
|
|
8
|
+
import "vue";
|
|
9
|
+
const p = i({
|
|
10
|
+
/**
|
|
11
|
+
* @description Control the size of components in this form.
|
|
12
|
+
*/
|
|
13
|
+
size: {
|
|
14
|
+
type: String,
|
|
15
|
+
values: a
|
|
16
|
+
},
|
|
17
|
+
/**
|
|
18
|
+
* @description Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component.
|
|
19
|
+
*/
|
|
20
|
+
disabled: Boolean
|
|
21
|
+
});
|
|
22
|
+
i({
|
|
23
|
+
...p,
|
|
24
|
+
/**
|
|
25
|
+
* @description Data of form component.
|
|
26
|
+
*/
|
|
27
|
+
model: Object,
|
|
28
|
+
/**
|
|
29
|
+
* @description Validation rules of form.
|
|
30
|
+
*/
|
|
31
|
+
rules: {
|
|
32
|
+
type: o(Object)
|
|
33
|
+
},
|
|
34
|
+
/**
|
|
35
|
+
* @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.
|
|
36
|
+
*/
|
|
37
|
+
labelPosition: {
|
|
38
|
+
type: String,
|
|
39
|
+
values: ["left", "right", "top"],
|
|
40
|
+
default: "right"
|
|
41
|
+
},
|
|
42
|
+
/**
|
|
43
|
+
* @description Position of asterisk.
|
|
44
|
+
*/
|
|
45
|
+
requireAsteriskPosition: {
|
|
46
|
+
type: String,
|
|
47
|
+
values: ["left", "right"],
|
|
48
|
+
default: "left"
|
|
49
|
+
},
|
|
50
|
+
/**
|
|
51
|
+
* @description Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported.
|
|
52
|
+
*/
|
|
53
|
+
labelWidth: {
|
|
54
|
+
type: [String, Number],
|
|
55
|
+
default: ""
|
|
56
|
+
},
|
|
57
|
+
/**
|
|
58
|
+
* @description Suffix of the label.
|
|
59
|
+
*/
|
|
60
|
+
labelSuffix: {
|
|
61
|
+
type: String,
|
|
62
|
+
default: ""
|
|
63
|
+
},
|
|
64
|
+
/**
|
|
65
|
+
* @description Whether the form is inline.
|
|
66
|
+
*/
|
|
67
|
+
inline: Boolean,
|
|
68
|
+
/**
|
|
69
|
+
* @description Whether to display the error message inline with the form item.
|
|
70
|
+
*/
|
|
71
|
+
inlineMessage: Boolean,
|
|
72
|
+
/**
|
|
73
|
+
* @description Whether to display an icon indicating the validation result.
|
|
74
|
+
*/
|
|
75
|
+
statusIcon: Boolean,
|
|
76
|
+
/**
|
|
77
|
+
* @description Whether to show the error message.
|
|
78
|
+
*/
|
|
79
|
+
showMessage: {
|
|
80
|
+
type: Boolean,
|
|
81
|
+
default: !0
|
|
82
|
+
},
|
|
83
|
+
/**
|
|
84
|
+
* @description Whether to trigger validation when the `rules` prop is changed.
|
|
85
|
+
*/
|
|
86
|
+
validateOnRuleChange: {
|
|
87
|
+
type: Boolean,
|
|
88
|
+
default: !0
|
|
89
|
+
},
|
|
90
|
+
/**
|
|
91
|
+
* @description Whether to hide required fields should have a red asterisk (star) beside their labels.
|
|
92
|
+
*/
|
|
93
|
+
hideRequiredAsterisk: Boolean,
|
|
94
|
+
/**
|
|
95
|
+
* @description When validation fails, scroll to the first error form entry.
|
|
96
|
+
*/
|
|
97
|
+
scrollToError: Boolean,
|
|
98
|
+
/**
|
|
99
|
+
* @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
|
|
100
|
+
*/
|
|
101
|
+
scrollIntoViewOptions: {
|
|
102
|
+
type: o([Object, Boolean]),
|
|
103
|
+
default: !0
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
const c = {
|
|
107
|
+
validate: (e, r, l) => (s(e) || t(e)) && n(r) && t(l)
|
|
108
|
+
};
|
|
109
|
+
export {
|
|
110
|
+
c as formEmits,
|
|
111
|
+
p as formMetaProps
|
|
112
|
+
};
|
|
@@ -1,24 +1,53 @@
|
|
|
1
|
+
import { useFormLabelWidth } from './utils';
|
|
1
2
|
import type { ComponentSize } from '@element-plus/constants';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import type { Arrayable, FieldPath } from '@element-plus/utils';
|
|
4
|
+
import type { RuleItem, ValidateError, ValidateFieldsError } from 'async-validator';
|
|
5
|
+
import type { MaybeRef, SetupContext, UnwrapRef } from 'vue';
|
|
6
|
+
import type { FormItemProp, FormItemProps, FormItemValidateState } from './form-item';
|
|
7
|
+
import type { FormEmits, FormProps } from './form';
|
|
8
|
+
type FormLabelWidthContext = ReturnType<typeof useFormLabelWidth>;
|
|
9
|
+
interface FormItemRule extends RuleItem {
|
|
10
|
+
trigger?: Arrayable<string>;
|
|
6
11
|
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
type FormRuleValue<V> = V extends any[] ? Arrayable<FormItemRule> : V extends Record<string, any> ? Arrayable<FormItemRule> | {
|
|
13
|
+
[K in keyof V]?: FormRuleValue<V[K]>;
|
|
14
|
+
} : Arrayable<FormItemRule>;
|
|
15
|
+
type FormRules<T extends MaybeRef<Record<string, any> | string> = string> = UnwrapRef<T> extends Record<string, any> ? {
|
|
16
|
+
[P in FieldPath<UnwrapRef<T>>]?: P extends keyof UnwrapRef<T> ? FormRuleValue<UnwrapRef<T>[P]> : Arrayable<FormItemRule>;
|
|
17
|
+
} : Partial<Record<string, Arrayable<FormItemRule> | Record<string, any>>>;
|
|
18
|
+
type FormValidationResult = Promise<boolean>;
|
|
19
|
+
type FormValidateCallback = (isValid: boolean, invalidFields?: ValidateFieldsError) => Promise<void> | void;
|
|
20
|
+
interface FormValidateFailure {
|
|
21
|
+
errors: ValidateError[] | null;
|
|
22
|
+
fields: ValidateFieldsError;
|
|
23
|
+
}
|
|
24
|
+
type FormContext = FormProps & UnwrapRef<FormLabelWidthContext> & {
|
|
25
|
+
emit: SetupContext<FormEmits>['emit'];
|
|
26
|
+
getField: (prop: FormItemProp) => FormItemContext | undefined;
|
|
27
|
+
addField: (field: FormItemContext) => void;
|
|
28
|
+
removeField: (field: FormItemContext, oldPropString?: string) => void;
|
|
29
|
+
resetFields: (props?: Arrayable<FormItemProp>) => void;
|
|
30
|
+
setInitialValues: (initModel: Record<string, any>) => void;
|
|
31
|
+
clearValidate: (props?: Arrayable<FormItemProp>) => void;
|
|
32
|
+
validateField: (props?: Arrayable<FormItemProp>, callback?: FormValidateCallback) => FormValidationResult;
|
|
33
|
+
};
|
|
34
|
+
interface FormItemContext extends FormItemProps {
|
|
35
|
+
$el: HTMLDivElement | undefined;
|
|
36
|
+
size: ComponentSize;
|
|
37
|
+
validateMessage: string;
|
|
38
|
+
validateState: FormItemValidateState;
|
|
39
|
+
isGroup: boolean;
|
|
40
|
+
labelId: string;
|
|
41
|
+
inputIds: string[];
|
|
42
|
+
hasLabel: boolean;
|
|
43
|
+
fieldValue: any;
|
|
44
|
+
propString: string;
|
|
18
45
|
addInputId: (id: string) => void;
|
|
19
46
|
removeInputId: (id: string) => void;
|
|
20
|
-
validate
|
|
21
|
-
resetField
|
|
22
|
-
clearValidate
|
|
23
|
-
|
|
47
|
+
validate: (trigger: string, callback?: FormValidateCallback) => FormValidationResult;
|
|
48
|
+
resetField(): void;
|
|
49
|
+
clearValidate(): void;
|
|
50
|
+
setInitialValue: (value: any) => void;
|
|
51
|
+
getInitialValue: () => any;
|
|
24
52
|
}
|
|
53
|
+
export type { FormContext, FormItemContext, FormItemRule, FormLabelWidthContext, FormRules, FormValidateCallback, FormValidateFailure, FormValidationResult, };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Arrayable } from '@element-plus/utils';
|
|
2
|
+
import type { FormItemContext } from './types';
|
|
3
|
+
import type { FormItemProp } from './form-item';
|
|
4
|
+
export declare function useFormLabelWidth(): {
|
|
5
|
+
autoLabelWidth: import("vue").ComputedRef<string>;
|
|
6
|
+
registerLabelWidth: (val: number, oldVal: number) => void;
|
|
7
|
+
deregisterLabelWidth: (val: number) => void;
|
|
8
|
+
};
|
|
9
|
+
export declare const filterFields: (fields: FormItemContext[], props: Arrayable<FormItemProp>) => FormItemContext[];
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ref as c, computed as s } from "vue";
|
|
2
|
+
import { isArray as l } from "@vue/shared";
|
|
3
|
+
import { castArray as m } from "lodash-unified";
|
|
4
|
+
import "@vueuse/core";
|
|
5
|
+
import { debugWarn as d } from "../../../utils/error.js";
|
|
6
|
+
import "@element-plus/icons-vue";
|
|
7
|
+
const f = "ElForm";
|
|
8
|
+
function L() {
|
|
9
|
+
const t = c([]), o = s(() => {
|
|
10
|
+
if (!t.value.length) return "0";
|
|
11
|
+
const e = Math.max(...t.value);
|
|
12
|
+
return e ? `${e}px` : "";
|
|
13
|
+
});
|
|
14
|
+
function n(e) {
|
|
15
|
+
const i = t.value.indexOf(e);
|
|
16
|
+
return i === -1 && o.value === "0" && d(f, `unexpected width ${e}`), i;
|
|
17
|
+
}
|
|
18
|
+
function r(e, i) {
|
|
19
|
+
if (e && i) {
|
|
20
|
+
const a = n(i);
|
|
21
|
+
t.value.splice(a, 1, e);
|
|
22
|
+
} else e && t.value.push(e);
|
|
23
|
+
}
|
|
24
|
+
function u(e) {
|
|
25
|
+
const i = n(e);
|
|
26
|
+
i > -1 && t.value.splice(i, 1);
|
|
27
|
+
}
|
|
28
|
+
return {
|
|
29
|
+
autoLabelWidth: o,
|
|
30
|
+
registerLabelWidth: r,
|
|
31
|
+
deregisterLabelWidth: u
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
const v = (t, o) => {
|
|
35
|
+
const n = m(o).map(
|
|
36
|
+
(r) => l(r) ? r.join(".") : r
|
|
37
|
+
);
|
|
38
|
+
return n.length > 0 ? t.filter(
|
|
39
|
+
(r) => r.propString && n.includes(r.propString)
|
|
40
|
+
) : t;
|
|
41
|
+
};
|
|
42
|
+
export {
|
|
43
|
+
v as filterFields,
|
|
44
|
+
L as useFormLabelWidth
|
|
45
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type { FormItemProps } from '../form/src/form-item';
|
|
2
|
+
declare var __VLS_9: {
|
|
3
|
+
label: string;
|
|
4
|
+
}, __VLS_11: {}, __VLS_17: {
|
|
5
|
+
error: string;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_Slots = {} & {
|
|
8
|
+
label?: (props: typeof __VLS_9) => any;
|
|
9
|
+
} & {
|
|
10
|
+
default?: (props: typeof __VLS_11) => any;
|
|
11
|
+
} & {
|
|
12
|
+
error?: (props: typeof __VLS_17) => any;
|
|
13
|
+
};
|
|
14
|
+
declare const __VLS_component: import("vue").DefineComponent<FormItemProps, {
|
|
15
|
+
/**
|
|
16
|
+
* @description Form item size.
|
|
17
|
+
*/
|
|
18
|
+
size: import("vue").ComputedRef<"" | "small" | "default" | "large">;
|
|
19
|
+
/**
|
|
20
|
+
* @description Validation message.
|
|
21
|
+
*/
|
|
22
|
+
validateMessage: import("vue").Ref<string, string>;
|
|
23
|
+
/**
|
|
24
|
+
* @description Validation state.
|
|
25
|
+
*/
|
|
26
|
+
validateState: import("vue").Ref<"" | "error" | "success" | "validating", "" | "error" | "success" | "validating">;
|
|
27
|
+
/**
|
|
28
|
+
* @description Validate form item.
|
|
29
|
+
*/
|
|
30
|
+
validate: (trigger: string, callback?: import("../form").FormValidateCallback) => import("../form").FormValidationResult;
|
|
31
|
+
/**
|
|
32
|
+
* @description Remove validation status of the field.
|
|
33
|
+
*/
|
|
34
|
+
clearValidate: () => void;
|
|
35
|
+
/**
|
|
36
|
+
* @description Reset current field and remove validation result.
|
|
37
|
+
*/
|
|
38
|
+
resetField: () => void;
|
|
39
|
+
/**
|
|
40
|
+
* @description Set initial value for this field. When `resetField` is called, the field will reset to this value.
|
|
41
|
+
*/
|
|
42
|
+
setInitialValue: (value: any) => void;
|
|
43
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormItemProps> & Readonly<{}>, {
|
|
44
|
+
required: boolean;
|
|
45
|
+
labelPosition: "left" | "right" | "top" | "";
|
|
46
|
+
inlineMessage: boolean;
|
|
47
|
+
showMessage: boolean;
|
|
48
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
49
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
50
|
+
export default _default;
|
|
51
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
52
|
+
new (): {
|
|
53
|
+
$slots: S;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
import { defineComponent as be, useSlots as ye, inject as K, ref as I, computed as a, watch as z, reactive as Ie, toRefs as Fe, provide as Se, onMounted as Ve, onBeforeUnmount as qe, openBlock as U, createElementBlock as we, unref as v, normalizeClass as F, createVNode as H, withCtx as _, createBlock as We, resolveDynamicComponent as Me, normalizeStyle as J, renderSlot as B, createTextVNode as Re, toDisplayString as O, createCommentVNode as Q, createElementVNode as X, TransitionGroup as $e, nextTick as ze } from "vue";
|
|
2
|
+
import _e from "async-validator";
|
|
3
|
+
import { refDebounced as Be } from "@vueuse/core";
|
|
4
|
+
import { isBoolean as Ne } from "../../utils/types.js";
|
|
5
|
+
import { castArray as Y, cloneDeep as Z } from "lodash-unified";
|
|
6
|
+
import { isArray as k, isFunction as Pe } from "@vue/shared";
|
|
7
|
+
import { getProp as N } from "../../utils/objects.js";
|
|
8
|
+
import { addUnit as C } from "../../utils/dom/style.js";
|
|
9
|
+
import "@element-plus/icons-vue";
|
|
10
|
+
import { useNamespace as Ee } from "../../hooks/use-namespace/index.js";
|
|
11
|
+
import { useId as Ae } from "../../hooks/use-id/index.js";
|
|
12
|
+
import "../../hooks/use-size/index.js";
|
|
13
|
+
import "@popperjs/core";
|
|
14
|
+
import "../../hooks/use-z-index/index.js";
|
|
15
|
+
import "../../hooks/use-delayed-toggle/index.js";
|
|
16
|
+
import "../../hooks/use-aria/index.js";
|
|
17
|
+
import "../../hooks/use-model-toggle/index.js";
|
|
18
|
+
import "../../hooks/use-empty-values/index.js";
|
|
19
|
+
import { useFormSize as De } from "../form/src/hooks/use-form-common-props.js";
|
|
20
|
+
import je from "../form/src/form-label-wrap.js";
|
|
21
|
+
import { formContextKey as Le, formItemContextKey as x } from "../form/src/constants.js";
|
|
22
|
+
const Te = ["role", "aria-labelledby"], ut = /* @__PURE__ */ be({
|
|
23
|
+
name: "ElFormItem",
|
|
24
|
+
__name: "EpFormItem",
|
|
25
|
+
props: {
|
|
26
|
+
label: {},
|
|
27
|
+
labelWidth: {},
|
|
28
|
+
labelPosition: { default: "" },
|
|
29
|
+
prop: {},
|
|
30
|
+
required: { type: Boolean, default: void 0 },
|
|
31
|
+
rules: {},
|
|
32
|
+
error: {},
|
|
33
|
+
validateStatus: {},
|
|
34
|
+
for: {},
|
|
35
|
+
inlineMessage: { type: Boolean, default: void 0 },
|
|
36
|
+
showMessage: { type: Boolean, default: !0 },
|
|
37
|
+
size: {}
|
|
38
|
+
},
|
|
39
|
+
setup(P, { expose: ee }) {
|
|
40
|
+
const s = P, E = ye(), e = K(Le, void 0), te = K(x, void 0), S = De(void 0, { formItem: !1 }), o = Ee("form-item"), V = Ae().value, d = I([]), p = I(""), re = Be(p, 100), u = I(""), A = I();
|
|
41
|
+
let q, h = !1;
|
|
42
|
+
const g = a(
|
|
43
|
+
() => s.labelPosition || (e == null ? void 0 : e.labelPosition)
|
|
44
|
+
), D = a(() => g.value === "top" ? {} : { width: C(s.labelWidth ?? (e == null ? void 0 : e.labelWidth)) }), se = a(() => {
|
|
45
|
+
if (g.value === "top" || e != null && e.inline)
|
|
46
|
+
return {};
|
|
47
|
+
if (!s.label && !s.labelWidth && oe)
|
|
48
|
+
return {};
|
|
49
|
+
const t = C(s.labelWidth ?? (e == null ? void 0 : e.labelWidth));
|
|
50
|
+
return !s.label && !E.label ? { marginLeft: t } : {};
|
|
51
|
+
}), ie = a(() => [
|
|
52
|
+
o.b(),
|
|
53
|
+
o.m(S.value),
|
|
54
|
+
o.is("error", p.value === "error"),
|
|
55
|
+
o.is("validating", p.value === "validating"),
|
|
56
|
+
o.is("success", p.value === "success"),
|
|
57
|
+
o.is("required", de.value || s.required),
|
|
58
|
+
o.is("no-asterisk", e == null ? void 0 : e.hideRequiredAsterisk),
|
|
59
|
+
(e == null ? void 0 : e.requireAsteriskPosition) === "right" ? "asterisk-right" : "asterisk-left",
|
|
60
|
+
{
|
|
61
|
+
[o.m("feedback")]: e == null ? void 0 : e.statusIcon,
|
|
62
|
+
[o.m(`label-${g.value}`)]: g.value
|
|
63
|
+
}
|
|
64
|
+
]), le = a(
|
|
65
|
+
() => Ne(s.inlineMessage) ? s.inlineMessage : (e == null ? void 0 : e.inlineMessage) || !1
|
|
66
|
+
), ae = a(() => [
|
|
67
|
+
o.e("error"),
|
|
68
|
+
{ [o.em("error", "inline")]: le.value }
|
|
69
|
+
]), w = a(() => s.prop ? k(s.prop) ? s.prop.join(".") : s.prop : ""), j = a(() => !!(s.label || E.label)), W = a(() => s.for ?? (d.value.length === 1 ? d.value[0] : void 0)), M = a(() => !W.value && j.value), oe = !!te, b = a(() => {
|
|
70
|
+
const t = e == null ? void 0 : e.model;
|
|
71
|
+
if (!(!t || !s.prop))
|
|
72
|
+
return N(t, s.prop).value;
|
|
73
|
+
}), R = a(() => {
|
|
74
|
+
const { required: t } = s, r = [];
|
|
75
|
+
s.rules && r.push(...Y(s.rules));
|
|
76
|
+
const i = e == null ? void 0 : e.rules;
|
|
77
|
+
if (i && s.prop) {
|
|
78
|
+
const l = N(
|
|
79
|
+
i,
|
|
80
|
+
s.prop
|
|
81
|
+
).value;
|
|
82
|
+
l && r.push(...Y(l));
|
|
83
|
+
}
|
|
84
|
+
if (t !== void 0) {
|
|
85
|
+
const l = r.map((n, m) => [n, m]).filter(([n]) => "required" in n);
|
|
86
|
+
if (l.length > 0)
|
|
87
|
+
for (const [n, m] of l)
|
|
88
|
+
n.required !== t && (r[m] = { ...n, required: t });
|
|
89
|
+
else
|
|
90
|
+
r.push({ required: t });
|
|
91
|
+
}
|
|
92
|
+
return r;
|
|
93
|
+
}), ue = a(() => R.value.length > 0), ne = (t) => R.value.filter((i) => !i.trigger || !t ? !0 : k(i.trigger) ? i.trigger.includes(t) : i.trigger === t).map(({ trigger: i, ...l }) => l), de = a(
|
|
94
|
+
() => R.value.some((t) => t.required)
|
|
95
|
+
), pe = a(
|
|
96
|
+
() => re.value === "error" && s.showMessage && ((e == null ? void 0 : e.showMessage) ?? !0)
|
|
97
|
+
), L = a(
|
|
98
|
+
() => `${s.label || ""}${(e == null ? void 0 : e.labelSuffix) || ""}`
|
|
99
|
+
), c = (t) => {
|
|
100
|
+
p.value = t;
|
|
101
|
+
}, ve = (t) => {
|
|
102
|
+
var l;
|
|
103
|
+
const { errors: r, fields: i } = t;
|
|
104
|
+
(!r || !i) && console.error(t), c("error"), u.value = r ? ((l = r == null ? void 0 : r[0]) == null ? void 0 : l.message) ?? `${s.prop} is required` : "", e == null || e.emit("validate", s.prop, !1, u.value);
|
|
105
|
+
}, ce = () => {
|
|
106
|
+
c("success"), e == null || e.emit("validate", s.prop, !0, "");
|
|
107
|
+
}, me = async (t) => {
|
|
108
|
+
const r = w.value;
|
|
109
|
+
return new _e({
|
|
110
|
+
[r]: t
|
|
111
|
+
}).validate({ [r]: b.value }, { firstFields: !0 }).then(() => (ce(), !0)).catch((l) => (ve(l), Promise.reject(l)));
|
|
112
|
+
}, T = async (t, r) => {
|
|
113
|
+
if (h || !s.prop)
|
|
114
|
+
return !1;
|
|
115
|
+
const i = Pe(r);
|
|
116
|
+
if (!ue.value)
|
|
117
|
+
return r == null || r(!1), !1;
|
|
118
|
+
const l = ne(t);
|
|
119
|
+
return l.length === 0 ? (r == null || r(!0), !0) : (c("validating"), me(l).then(() => (r == null || r(!0), !0)).catch((n) => {
|
|
120
|
+
const { fields: m } = n;
|
|
121
|
+
return r == null || r(!1, m), i ? !1 : Promise.reject(m);
|
|
122
|
+
}));
|
|
123
|
+
}, $ = () => {
|
|
124
|
+
c(""), u.value = "", h = !1;
|
|
125
|
+
}, G = async () => {
|
|
126
|
+
const t = e == null ? void 0 : e.model;
|
|
127
|
+
if (!t || !s.prop) return;
|
|
128
|
+
const r = N(t, s.prop);
|
|
129
|
+
h = !0, r.value = Z(q), await ze(), $(), h = !1;
|
|
130
|
+
}, fe = (t) => {
|
|
131
|
+
d.value.includes(t) || d.value.push(t);
|
|
132
|
+
}, he = (t) => {
|
|
133
|
+
d.value = d.value.filter((r) => r !== t);
|
|
134
|
+
}, y = (t) => {
|
|
135
|
+
q = Z(t);
|
|
136
|
+
}, ge = () => q;
|
|
137
|
+
z(
|
|
138
|
+
() => s.error,
|
|
139
|
+
(t) => {
|
|
140
|
+
u.value = t || "", c(t ? "error" : "");
|
|
141
|
+
},
|
|
142
|
+
{ immediate: !0 }
|
|
143
|
+
), z(
|
|
144
|
+
() => s.validateStatus,
|
|
145
|
+
(t) => c(t || "")
|
|
146
|
+
);
|
|
147
|
+
const f = Ie({
|
|
148
|
+
...Fe(s),
|
|
149
|
+
$el: A,
|
|
150
|
+
size: S,
|
|
151
|
+
validateMessage: u,
|
|
152
|
+
validateState: p,
|
|
153
|
+
labelId: V,
|
|
154
|
+
inputIds: d,
|
|
155
|
+
isGroup: M,
|
|
156
|
+
hasLabel: j,
|
|
157
|
+
fieldValue: b,
|
|
158
|
+
addInputId: fe,
|
|
159
|
+
removeInputId: he,
|
|
160
|
+
resetField: G,
|
|
161
|
+
clearValidate: $,
|
|
162
|
+
validate: T,
|
|
163
|
+
propString: w,
|
|
164
|
+
setInitialValue: y,
|
|
165
|
+
getInitialValue: ge
|
|
166
|
+
});
|
|
167
|
+
return Se(x, f), z(w, (t, r) => {
|
|
168
|
+
!e || !r || (e.removeField(f, r), t && (y(b.value), e.addField(f)));
|
|
169
|
+
}), Ve(() => {
|
|
170
|
+
s.prop && (y(b.value), e == null || e.addField(f));
|
|
171
|
+
}), qe(() => {
|
|
172
|
+
e == null || e.removeField(f);
|
|
173
|
+
}), ee({
|
|
174
|
+
/**
|
|
175
|
+
* @description Form item size.
|
|
176
|
+
*/
|
|
177
|
+
size: S,
|
|
178
|
+
/**
|
|
179
|
+
* @description Validation message.
|
|
180
|
+
*/
|
|
181
|
+
validateMessage: u,
|
|
182
|
+
/**
|
|
183
|
+
* @description Validation state.
|
|
184
|
+
*/
|
|
185
|
+
validateState: p,
|
|
186
|
+
/**
|
|
187
|
+
* @description Validate form item.
|
|
188
|
+
*/
|
|
189
|
+
validate: T,
|
|
190
|
+
/**
|
|
191
|
+
* @description Remove validation status of the field.
|
|
192
|
+
*/
|
|
193
|
+
clearValidate: $,
|
|
194
|
+
/**
|
|
195
|
+
* @description Reset current field and remove validation result.
|
|
196
|
+
*/
|
|
197
|
+
resetField: G,
|
|
198
|
+
/**
|
|
199
|
+
* @description Set initial value for this field. When `resetField` is called, the field will reset to this value.
|
|
200
|
+
*/
|
|
201
|
+
setInitialValue: y
|
|
202
|
+
}), (t, r) => {
|
|
203
|
+
var i;
|
|
204
|
+
return U(), we("div", {
|
|
205
|
+
ref_key: "formItemRef",
|
|
206
|
+
ref: A,
|
|
207
|
+
class: F(ie.value),
|
|
208
|
+
role: M.value ? "group" : void 0,
|
|
209
|
+
"aria-labelledby": M.value ? v(V) : void 0
|
|
210
|
+
}, [
|
|
211
|
+
H(v(je), {
|
|
212
|
+
"is-auto-width": D.value.width === "auto",
|
|
213
|
+
"update-all": ((i = v(e)) == null ? void 0 : i.labelWidth) === "auto"
|
|
214
|
+
}, {
|
|
215
|
+
default: _(() => [
|
|
216
|
+
P.label || t.$slots.label ? (U(), We(Me(W.value ? "label" : "div"), {
|
|
217
|
+
key: 0,
|
|
218
|
+
id: v(V),
|
|
219
|
+
for: W.value,
|
|
220
|
+
class: F(v(o).e("label")),
|
|
221
|
+
style: J(D.value)
|
|
222
|
+
}, {
|
|
223
|
+
default: _(() => [
|
|
224
|
+
B(t.$slots, "label", { label: L.value }, () => [
|
|
225
|
+
Re(O(L.value), 1)
|
|
226
|
+
])
|
|
227
|
+
]),
|
|
228
|
+
_: 3
|
|
229
|
+
}, 8, ["id", "for", "class", "style"])) : Q("", !0)
|
|
230
|
+
]),
|
|
231
|
+
_: 3
|
|
232
|
+
}, 8, ["is-auto-width", "update-all"]),
|
|
233
|
+
X("div", {
|
|
234
|
+
class: F(v(o).e("content")),
|
|
235
|
+
style: J(se.value)
|
|
236
|
+
}, [
|
|
237
|
+
B(t.$slots, "default"),
|
|
238
|
+
H($e, {
|
|
239
|
+
name: `${v(o).namespace.value}-zoom-in-top`
|
|
240
|
+
}, {
|
|
241
|
+
default: _(() => [
|
|
242
|
+
pe.value ? B(t.$slots, "error", { error: u.value }, () => [
|
|
243
|
+
X("div", {
|
|
244
|
+
class: F(ae.value)
|
|
245
|
+
}, O(u.value), 3)
|
|
246
|
+
], void 0, 0) : Q("", !0)
|
|
247
|
+
]),
|
|
248
|
+
_: 3
|
|
249
|
+
}, 8, ["name"])
|
|
250
|
+
], 6)
|
|
251
|
+
], 10, Te);
|
|
252
|
+
};
|
|
253
|
+
}
|
|
254
|
+
});
|
|
255
|
+
export {
|
|
256
|
+
ut as default
|
|
257
|
+
};
|