element-plus
Version:
A Component Library for Vue 3
362 lines (359 loc) • 13.2 kB
JavaScript
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-item2.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 _hoisted_1 = ["role", "aria-labelledby"];
const _sfc_main = defineComponent({
...{
name: "ElFormItem"
},
__name: "form-item",
props: formItemProps,
setup(__props, { expose: __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(() => {
var _a;
if (labelPosition.value === "top") {
return {};
}
const labelWidth = addUnit((_a = props.labelWidth) != null ? _a : formContext == null ? void 0 : formContext.labelWidth);
return { width: labelWidth };
});
const contentStyle = computed(() => {
var _a;
if (labelPosition.value === "top" || (formContext == null ? void 0 : formContext.inline)) {
return {};
}
if (!props.label && !props.labelWidth && isNested) {
return {};
}
const labelWidth = addUnit((_a = props.labelWidth) != null ? _a : 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(formItemClasses.value),
role: isGroup.value ? "group" : void 0,
"aria-labelledby": isGroup.value ? unref(labelId) : void 0
}, [
createVNode(unref(FormLabelWrap), {
"is-auto-width": labelStyle.value.width === "auto",
"update-all": ((_a = unref(formContext)) == null ? void 0 : _a.labelWidth) === "auto"
}, {
default: withCtx(() => [
!!(_ctx.label || _ctx.$slots.label) ? (openBlock(), createBlock(resolveDynamicComponent(labelFor.value ? "label" : "div"), {
key: 0,
id: unref(labelId),
for: labelFor.value,
class: normalizeClass(unref(ns).e("label")),
style: normalizeStyle(labelStyle.value)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "label", { label: currentLabel.value }, () => [
createTextVNode(
toDisplayString(currentLabel.value),
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(contentStyle.value)
},
[
renderSlot(_ctx.$slots, "default"),
createVNode(TransitionGroup, {
name: `${unref(ns).namespace.value}-zoom-in-top`
}, {
default: withCtx(() => [
shouldShowError.value ? renderSlot(_ctx.$slots, "error", {
key: 0,
error: validateMessage.value
}, () => [
createElementVNode(
"div",
{
class: normalizeClass(validateClasses.value)
},
toDisplayString(validateMessage.value),
3
)
]) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["name"])
],
6
)
], 10, _hoisted_1);
};
}
});
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-item.mjs.map