element-plus
Version:
A Component Library for Vue 3
279 lines (276 loc) • 11 kB
JavaScript
import { defineComponent, useSlots, inject, ref, computed, nextTick, watch, reactive, toRefs, provide, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, Transition } from 'vue';
import AsyncValidator from 'async-validator';
import { castArray, isEqual, clone } from 'lodash-unified';
import { refDebounced, isBoolean } from '@vueuse/core';
import '../../../utils/index.mjs';
import '../../../tokens/index.mjs';
import '../../../hooks/index.mjs';
import { formItemProps } from './form-item.mjs';
import FormLabelWrap from './form-label-wrap.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { formContextKey, formItemContextKey } from '../../../tokens/form.mjs';
import { useSize } from '../../../hooks/use-common-props/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { addUnit } from '../../../utils/dom/style.mjs';
import { isString, isFunction } from '@vue/shared';
import { getProp } from '../../../utils/objects.mjs';
const _hoisted_1 = ["for"];
const __default__ = {
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 = useSize(void 0, { formItem: false });
const ns = useNamespace("form-item");
const validateState = ref("");
const validateStateDebounced = refDebounced(validateState, 100);
const validateMessage = ref("");
const formItemRef = ref();
let initialValue = void 0;
let isResettingField = false;
const labelStyle = computed(() => {
if ((formContext == null ? void 0 : formContext.labelPosition) === "top") {
return {};
}
const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
if (labelWidth)
return { width: labelWidth };
return {};
});
const contentStyle = computed(() => {
if ((formContext == null ? void 0 : formContext.labelPosition) === "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),
{ [ns.m("feedback")]: formContext == null ? void 0 : formContext.statusIcon }
]);
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 isString(props.prop) ? props.prop : props.prop.join(".");
});
const labelFor = computed(() => props.for || propString.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 _rules = computed(() => {
const rules = props.rules ? castArray(props.rules) : [];
const formRules = formContext == null ? void 0 : formContext.rules;
if (formRules && props.prop) {
const _rules2 = getProp(formRules, props.prop).value;
if (_rules2) {
rules.push(...castArray(_rules2));
}
}
if (props.required !== void 0) {
rules.push({ required: !!props.required });
}
return rules;
});
const validateEnabled = computed(() => _rules.value.length > 0);
const getFilteredRule = (trigger) => {
const rules = _rules.value;
return rules.filter((rule) => {
if (!rule.trigger || !trigger)
return true;
if (Array.isArray(rule.trigger)) {
return rule.trigger.includes(trigger);
} else {
return rule.trigger === trigger;
}
}).map(({ trigger: trigger2, ...rule }) => rule);
};
const isRequired = computed(() => _rules.value.some((rule) => rule.required === true));
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) {
isResettingField = false;
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 = "";
};
const resetField = async () => {
const model = formContext == null ? void 0 : formContext.model;
if (!model || !props.prop)
return;
const computedValue = getProp(model, props.prop);
if (!isEqual(computedValue.value, initialValue)) {
isResettingField = true;
}
computedValue.value = initialValue;
await nextTick();
clearValidate();
};
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,
validateState,
resetField,
clearValidate,
validate
});
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))
}, [
createVNode(unref(FormLabelWrap), {
"is-auto-width": unref(labelStyle).width === "auto",
"update-all": ((_a = unref(formContext)) == null ? void 0 : _a.labelWidth) === "auto"
}, {
default: withCtx(() => [
_ctx.label || _ctx.$slots.label ? (openBlock(), createElementBlock("label", {
key: 0,
for: unref(labelFor),
class: normalizeClass(unref(ns).e("label")),
style: normalizeStyle(unref(labelStyle))
}, [
renderSlot(_ctx.$slots, "label", { label: unref(currentLabel) }, () => [
createTextVNode(toDisplayString(unref(currentLabel)), 1)
])
], 14, _hoisted_1)) : 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(Transition, {
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)
], 2);
};
}
});
var FormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/form/src/form-item.vue"]]);
export { FormItem as default };
//# sourceMappingURL=form-item2.mjs.map