| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327 |
- import { defineComponent, useSlots, inject, ref, computed, watch, reactive, toRefs, provide, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createBlock, resolveDynamicComponent, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, TransitionGroup, nextTick } from 'vue';
- import AsyncValidator from 'async-validator';
- import { castArray, clone } from 'lodash-unified';
- import { refDebounced } from '@vueuse/core';
- import { formItemProps } from './form-item.mjs';
- import FormLabelWrap from './form-label-wrap.mjs';
- import { formContextKey, formItemContextKey } from './constants.mjs';
- import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
- import { useId } from '../../../hooks/use-id/index.mjs';
- import { getProp } from '../../../utils/objects.mjs';
- import { useFormSize } from './hooks/use-form-common-props.mjs';
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
- import { addUnit } from '../../../utils/dom/style.mjs';
- import { isBoolean } from '../../../utils/types.mjs';
- import { isArray, isFunction } from '@vue/shared';
- const __default__ = defineComponent({
- name: "ElFormItem"
- });
- const _sfc_main = /* @__PURE__ */ defineComponent({
- ...__default__,
- props: formItemProps,
- setup(__props, { expose }) {
- const props = __props;
- const slots = useSlots();
- const formContext = inject(formContextKey, void 0);
- const parentFormItemContext = inject(formItemContextKey, void 0);
- const _size = useFormSize(void 0, { formItem: false });
- const ns = useNamespace("form-item");
- const labelId = useId().value;
- const inputIds = ref([]);
- const validateState = ref("");
- const validateStateDebounced = refDebounced(validateState, 100);
- const validateMessage = ref("");
- const formItemRef = ref();
- let initialValue = void 0;
- let isResettingField = false;
- const labelPosition = computed(() => props.labelPosition || (formContext == null ? void 0 : formContext.labelPosition));
- const labelStyle = computed(() => {
- if (labelPosition.value === "top") {
- return {};
- }
- const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
- if (labelWidth)
- return { width: labelWidth };
- return {};
- });
- const contentStyle = computed(() => {
- if (labelPosition.value === "top" || (formContext == null ? void 0 : formContext.inline)) {
- return {};
- }
- if (!props.label && !props.labelWidth && isNested) {
- return {};
- }
- const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
- if (!props.label && !slots.label) {
- return { marginLeft: labelWidth };
- }
- return {};
- });
- const formItemClasses = computed(() => [
- ns.b(),
- ns.m(_size.value),
- ns.is("error", validateState.value === "error"),
- ns.is("validating", validateState.value === "validating"),
- ns.is("success", validateState.value === "success"),
- ns.is("required", isRequired.value || props.required),
- ns.is("no-asterisk", formContext == null ? void 0 : formContext.hideRequiredAsterisk),
- (formContext == null ? void 0 : formContext.requireAsteriskPosition) === "right" ? "asterisk-right" : "asterisk-left",
- {
- [ns.m("feedback")]: formContext == null ? void 0 : formContext.statusIcon,
- [ns.m(`label-${labelPosition.value}`)]: labelPosition.value
- }
- ]);
- const _inlineMessage = computed(() => isBoolean(props.inlineMessage) ? props.inlineMessage : (formContext == null ? void 0 : formContext.inlineMessage) || false);
- const validateClasses = computed(() => [
- ns.e("error"),
- { [ns.em("error", "inline")]: _inlineMessage.value }
- ]);
- const propString = computed(() => {
- if (!props.prop)
- return "";
- return isArray(props.prop) ? props.prop.join(".") : props.prop;
- });
- const hasLabel = computed(() => {
- return !!(props.label || slots.label);
- });
- const labelFor = computed(() => {
- var _a;
- return (_a = props.for) != null ? _a : inputIds.value.length === 1 ? inputIds.value[0] : void 0;
- });
- const isGroup = computed(() => {
- return !labelFor.value && hasLabel.value;
- });
- const isNested = !!parentFormItemContext;
- const fieldValue = computed(() => {
- const model = formContext == null ? void 0 : formContext.model;
- if (!model || !props.prop) {
- return;
- }
- return getProp(model, props.prop).value;
- });
- const normalizedRules = computed(() => {
- const { required } = props;
- const rules = [];
- if (props.rules) {
- rules.push(...castArray(props.rules));
- }
- const formRules = formContext == null ? void 0 : formContext.rules;
- if (formRules && props.prop) {
- const _rules = getProp(formRules, props.prop).value;
- if (_rules) {
- rules.push(...castArray(_rules));
- }
- }
- if (required !== void 0) {
- const requiredRules = rules.map((rule, i) => [rule, i]).filter(([rule]) => "required" in rule);
- if (requiredRules.length > 0) {
- for (const [rule, i] of requiredRules) {
- if (rule.required === required)
- continue;
- rules[i] = { ...rule, required };
- }
- } else {
- rules.push({ required });
- }
- }
- return rules;
- });
- const validateEnabled = computed(() => normalizedRules.value.length > 0);
- const getFilteredRule = (trigger) => {
- const rules = normalizedRules.value;
- return rules.filter((rule) => {
- if (!rule.trigger || !trigger)
- return true;
- if (isArray(rule.trigger)) {
- return rule.trigger.includes(trigger);
- } else {
- return rule.trigger === trigger;
- }
- }).map(({ trigger: trigger2, ...rule }) => rule);
- };
- const isRequired = computed(() => normalizedRules.value.some((rule) => rule.required));
- const shouldShowError = computed(() => {
- var _a;
- return validateStateDebounced.value === "error" && props.showMessage && ((_a = formContext == null ? void 0 : formContext.showMessage) != null ? _a : true);
- });
- const currentLabel = computed(() => `${props.label || ""}${(formContext == null ? void 0 : formContext.labelSuffix) || ""}`);
- const setValidationState = (state) => {
- validateState.value = state;
- };
- const onValidationFailed = (error) => {
- var _a, _b;
- const { errors, fields } = error;
- if (!errors || !fields) {
- console.error(error);
- }
- setValidationState("error");
- validateMessage.value = errors ? (_b = (_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) != null ? _b : `${props.prop} is required` : "";
- formContext == null ? void 0 : formContext.emit("validate", props.prop, false, validateMessage.value);
- };
- const onValidationSucceeded = () => {
- setValidationState("success");
- formContext == null ? void 0 : formContext.emit("validate", props.prop, true, "");
- };
- const doValidate = async (rules) => {
- const modelName = propString.value;
- const validator = new AsyncValidator({
- [modelName]: rules
- });
- return validator.validate({ [modelName]: fieldValue.value }, { firstFields: true }).then(() => {
- onValidationSucceeded();
- return true;
- }).catch((err) => {
- onValidationFailed(err);
- return Promise.reject(err);
- });
- };
- const validate = async (trigger, callback) => {
- if (isResettingField || !props.prop) {
- return false;
- }
- const hasCallback = isFunction(callback);
- if (!validateEnabled.value) {
- callback == null ? void 0 : callback(false);
- return false;
- }
- const rules = getFilteredRule(trigger);
- if (rules.length === 0) {
- callback == null ? void 0 : callback(true);
- return true;
- }
- setValidationState("validating");
- return doValidate(rules).then(() => {
- callback == null ? void 0 : callback(true);
- return true;
- }).catch((err) => {
- const { fields } = err;
- callback == null ? void 0 : callback(false, fields);
- return hasCallback ? false : Promise.reject(fields);
- });
- };
- const clearValidate = () => {
- setValidationState("");
- validateMessage.value = "";
- isResettingField = false;
- };
- const resetField = async () => {
- const model = formContext == null ? void 0 : formContext.model;
- if (!model || !props.prop)
- return;
- const computedValue = getProp(model, props.prop);
- isResettingField = true;
- computedValue.value = clone(initialValue);
- await nextTick();
- clearValidate();
- isResettingField = false;
- };
- const addInputId = (id) => {
- if (!inputIds.value.includes(id)) {
- inputIds.value.push(id);
- }
- };
- const removeInputId = (id) => {
- inputIds.value = inputIds.value.filter((listId) => listId !== id);
- };
- watch(() => props.error, (val) => {
- validateMessage.value = val || "";
- setValidationState(val ? "error" : "");
- }, { immediate: true });
- watch(() => props.validateStatus, (val) => setValidationState(val || ""));
- const context = reactive({
- ...toRefs(props),
- $el: formItemRef,
- size: _size,
- validateMessage,
- validateState,
- labelId,
- inputIds,
- isGroup,
- hasLabel,
- fieldValue,
- addInputId,
- removeInputId,
- resetField,
- clearValidate,
- validate,
- propString
- });
- provide(formItemContextKey, context);
- onMounted(() => {
- if (props.prop) {
- formContext == null ? void 0 : formContext.addField(context);
- initialValue = clone(fieldValue.value);
- }
- });
- onBeforeUnmount(() => {
- formContext == null ? void 0 : formContext.removeField(context);
- });
- expose({
- size: _size,
- validateMessage,
- validateState,
- validate,
- clearValidate,
- resetField
- });
- return (_ctx, _cache) => {
- var _a;
- return openBlock(), createElementBlock("div", {
- ref_key: "formItemRef",
- ref: formItemRef,
- class: normalizeClass(unref(formItemClasses)),
- role: unref(isGroup) ? "group" : void 0,
- "aria-labelledby": unref(isGroup) ? unref(labelId) : void 0
- }, [
- createVNode(unref(FormLabelWrap), {
- "is-auto-width": unref(labelStyle).width === "auto",
- "update-all": ((_a = unref(formContext)) == null ? void 0 : _a.labelWidth) === "auto"
- }, {
- default: withCtx(() => [
- unref(hasLabel) ? (openBlock(), createBlock(resolveDynamicComponent(unref(labelFor) ? "label" : "div"), {
- key: 0,
- id: unref(labelId),
- for: unref(labelFor),
- class: normalizeClass(unref(ns).e("label")),
- style: normalizeStyle(unref(labelStyle))
- }, {
- default: withCtx(() => [
- renderSlot(_ctx.$slots, "label", { label: unref(currentLabel) }, () => [
- createTextVNode(toDisplayString(unref(currentLabel)), 1)
- ])
- ]),
- _: 3
- }, 8, ["id", "for", "class", "style"])) : createCommentVNode("v-if", true)
- ]),
- _: 3
- }, 8, ["is-auto-width", "update-all"]),
- createElementVNode("div", {
- class: normalizeClass(unref(ns).e("content")),
- style: normalizeStyle(unref(contentStyle))
- }, [
- renderSlot(_ctx.$slots, "default"),
- createVNode(TransitionGroup, {
- name: `${unref(ns).namespace.value}-zoom-in-top`
- }, {
- default: withCtx(() => [
- unref(shouldShowError) ? renderSlot(_ctx.$slots, "error", {
- key: 0,
- error: validateMessage.value
- }, () => [
- createElementVNode("div", {
- class: normalizeClass(unref(validateClasses))
- }, toDisplayString(validateMessage.value), 3)
- ]) : createCommentVNode("v-if", true)
- ]),
- _: 3
- }, 8, ["name"])
- ], 6)
- ], 10, ["role", "aria-labelledby"]);
- };
- }
- });
- var FormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "form-item.vue"]]);
- export { FormItem as default };
- //# sourceMappingURL=form-item2.mjs.map
|