@element-plus/nightly 0.0.20211230

package/es/components/form/index.mjs

@@ -0,0 +1,13 @@
+import { withInstall, withNoopInstall } from '../../utils/with-install.mjs';
+import './src/form.mjs';
+import './src/form-item.mjs';
+import script from './src/form.vue_vue_type_script_lang.mjs';
+import script$1 from './src/form-item.vue_vue_type_script_lang.mjs';
+
+const ElForm = withInstall(script, {
+  FormItem: script$1
+});
+const ElFormItem = withNoopInstall(script$1);
+
+export { ElForm, ElFormItem, ElForm as default };
+//# sourceMappingURL=index.mjs.map

package/es/components/form/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/form/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\nimport Form from './src/form.vue'\nimport FormItem from './src/form-item.vue'\n\nexport const ElForm = withInstall(Form, {\n  FormItem,\n})\n\nexport default ElForm\n\nexport const ElFormItem = withNoopInstall(FormItem)\n"],"names":["Form","FormItem"],"mappings":";;;;;;AAGY,MAAC,MAAM,GAAG,WAAW,CAACA,MAAI,EAAE;AACxC,YAAEC,QAAQ;AACV,CAAC,EAAE;AAES,MAAC,UAAU,GAAG,eAAe,CAACA,QAAQ;;;;"}

package/es/components/form/src/form-item.mjs

@@ -0,0 +1,7 @@
+import script from './form-item.vue_vue_type_script_lang.mjs';
+export { default } from './form-item.vue_vue_type_script_lang.mjs';
+import { render } from './form-item.vue_vue_type_template_id_24eda48b_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/form/src/form-item.vue";
+//# sourceMappingURL=form-item.mjs.map

package/es/components/form/src/form-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-item.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/components/form/src/form-item.vue.d.ts

@@ -0,0 +1,82 @@
+import type { PropType, CSSProperties } from 'vue';
+import type { ComponentSize } from 'element-plus/es/utils/types';
+import type { ElFormContext } from 'element-plus/es/tokens';
+import type { FormItemRule } from './form.type';
+declare const _default: import("vue").DefineComponent<{
+    label: StringConstructor;
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    prop: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    rules: PropType<FormItemRule | FormItemRule[]>;
+    error: StringConstructor;
+    validateStatus: StringConstructor;
+    for: StringConstructor;
+    inlineMessage: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: string;
+    };
+    showMessage: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
+}, {
+    formItemRef: import("vue").Ref<HTMLDivElement | undefined>;
+    formItemClass: import("vue").ComputedRef<(string | {
+        'el-form-item--feedback': boolean | undefined;
+        'is-error': boolean;
+        'is-validating': boolean;
+        'is-success': boolean;
+        'is-required': boolean | undefined;
+        'is-no-asterisk': boolean | undefined;
+    })[]>;
+    shouldShowError: import("vue").ComputedRef<boolean | undefined>;
+    elForm: ElFormContext;
+    labelStyle: import("vue").ComputedRef<CSSProperties>;
+    contentStyle: import("vue").ComputedRef<CSSProperties>;
+    validateMessage: import("vue").Ref<string>;
+    labelFor: import("vue").ComputedRef<string | undefined>;
+    resetField: () => void;
+    clearValidate: () => void;
+    currentLabel: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    label?: unknown;
+    labelWidth?: unknown;
+    prop?: unknown;
+    required?: unknown;
+    rules?: unknown;
+    error?: unknown;
+    validateStatus?: unknown;
+    for?: unknown;
+    inlineMessage?: unknown;
+    showMessage?: unknown;
+    size?: unknown;
+} & {
+    labelWidth: string | number;
+    inlineMessage: string | boolean;
+    showMessage: boolean;
+} & {
+    required?: boolean | undefined;
+    size?: ComponentSize | undefined;
+    label?: string | undefined;
+    error?: string | undefined;
+    prop?: string | undefined;
+    rules?: FormItemRule | FormItemRule[] | undefined;
+    validateStatus?: string | undefined;
+    for?: string | undefined;
+}>, {
+    required: boolean;
+    labelWidth: string | number;
+    inlineMessage: string | boolean;
+    showMessage: boolean;
+}>;
+export default _default;

package/es/components/form/src/form-item.vue_vue_type_script_lang.mjs

@@ -0,0 +1,257 @@
+import { defineComponent, inject, ref, getCurrentInstance, computed, watch, nextTick, reactive, toRefs, onMounted, onBeforeUnmount, provide } from 'vue';
+import { NOOP } from '@vue/shared';
+import AsyncValidator from 'async-validator';
+import { addUnit, getPropByPath } from '../../../utils/util.mjs';
+import { isValidComponentSize } from '../../../utils/validators.mjs';
+import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
+import LabelWrap from './label-wrap.mjs';
+import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
+
+var script = defineComponent({
+  name: "ElFormItem",
+  componentName: "ElFormItem",
+  components: {
+    LabelWrap
+  },
+  props: {
+    label: String,
+    labelWidth: {
+      type: [String, Number],
+      default: ""
+    },
+    prop: String,
+    required: {
+      type: Boolean,
+      default: void 0
+    },
+    rules: [Object, Array],
+    error: String,
+    validateStatus: String,
+    for: String,
+    inlineMessage: {
+      type: [String, Boolean],
+      default: ""
+    },
+    showMessage: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      validator: isValidComponentSize
+    }
+  },
+  setup(props, { slots }) {
+    const elForm = inject(elFormKey, {});
+    const validateState = ref("");
+    const validateMessage = ref("");
+    const isValidationEnabled = ref(false);
+    const computedLabelWidth = ref("");
+    const formItemRef = ref();
+    const vm = getCurrentInstance();
+    const isNested = computed(() => {
+      let parent = vm.parent;
+      while (parent && parent.type.name !== "ElForm") {
+        if (parent.type.name === "ElFormItem") {
+          return true;
+        }
+        parent = parent.parent;
+      }
+      return false;
+    });
+    let initialValue = void 0;
+    watch(() => props.error, (val) => {
+      validateMessage.value = val;
+      validateState.value = val ? "error" : "";
+    }, {
+      immediate: true
+    });
+    watch(() => props.validateStatus, (val) => {
+      validateState.value = val;
+    });
+    const labelFor = computed(() => props.for || props.prop);
+    const labelStyle = computed(() => {
+      const ret = {};
+      if (elForm.labelPosition === "top")
+        return ret;
+      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth);
+      if (labelWidth) {
+        ret.width = labelWidth;
+      }
+      return ret;
+    });
+    const contentStyle = computed(() => {
+      const ret = {};
+      if (elForm.labelPosition === "top" || elForm.inline) {
+        return ret;
+      }
+      if (!props.label && !props.labelWidth && isNested.value) {
+        return ret;
+      }
+      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth);
+      if (!props.label && !slots.label) {
+        ret.marginLeft = labelWidth;
+      }
+      return ret;
+    });
+    const fieldValue = computed(() => {
+      const model = elForm.model;
+      if (!model || !props.prop) {
+        return;
+      }
+      let path = props.prop;
+      if (path.indexOf(":") !== -1) {
+        path = path.replace(/:/, ".");
+      }
+      return getPropByPath(model, path, true).v;
+    });
+    const isRequired = computed(() => {
+      const rules = getRules();
+      let required = false;
+      if (rules && rules.length) {
+        rules.every((rule) => {
+          if (rule.required) {
+            required = true;
+            return false;
+          }
+          return true;
+        });
+      }
+      return required;
+    });
+    const sizeClass = useSize(void 0, { formItem: false });
+    const validate = (trigger, callback = NOOP) => {
+      if (!isValidationEnabled.value) {
+        callback();
+        return;
+      }
+      const rules = getFilteredRule(trigger);
+      if ((!rules || rules.length === 0) && props.required === void 0) {
+        callback();
+        return;
+      }
+      validateState.value = "validating";
+      const descriptor = {};
+      if (rules && rules.length > 0) {
+        rules.forEach((rule) => {
+          delete rule.trigger;
+        });
+      }
+      descriptor[props.prop] = rules;
+      const validator = new AsyncValidator(descriptor);
+      const model = {};
+      model[props.prop] = fieldValue.value;
+      validator.validate(model, { firstFields: true }, (errors, fields) => {
+        var _a;
+        validateState.value = !errors ? "success" : "error";
+        validateMessage.value = errors ? errors[0].message || `${props.prop} is required` : "";
+        callback(validateMessage.value, errors ? fields : {});
+        (_a = elForm.emit) == null ? void 0 : _a.call(elForm, "validate", props.prop, !errors, validateMessage.value || null);
+      });
+    };
+    const clearValidate = () => {
+      validateState.value = "";
+      validateMessage.value = "";
+    };
+    const resetField = () => {
+      const model = elForm.model;
+      const value = fieldValue.value;
+      let path = props.prop;
+      if (path.indexOf(":") !== -1) {
+        path = path.replace(/:/, ".");
+      }
+      const prop = getPropByPath(model, path, true);
+      if (Array.isArray(value)) {
+        prop.o[prop.k] = [].concat(initialValue);
+      } else {
+        prop.o[prop.k] = initialValue;
+      }
+      nextTick(() => {
+        clearValidate();
+      });
+    };
+    const getRules = () => {
+      const formRules = elForm.rules;
+      const selfRules = props.rules;
+      const requiredRule = props.required !== void 0 ? { required: !!props.required } : [];
+      const prop = getPropByPath(formRules, props.prop || "", false);
+      const normalizedRule = formRules ? prop.o[props.prop || ""] || prop.v : [];
+      return [].concat(selfRules || normalizedRule || []).concat(requiredRule);
+    };
+    const getFilteredRule = (trigger) => {
+      const rules = getRules();
+      return rules.filter((rule) => {
+        if (!rule.trigger || trigger === "")
+          return true;
+        if (Array.isArray(rule.trigger)) {
+          return rule.trigger.indexOf(trigger) > -1;
+        } else {
+          return rule.trigger === trigger;
+        }
+      }).map((rule) => ({ ...rule }));
+    };
+    const evaluateValidationEnabled = () => {
+      var _a;
+      isValidationEnabled.value = !!((_a = getRules()) == null ? void 0 : _a.length);
+    };
+    const updateComputedLabelWidth = (width) => {
+      computedLabelWidth.value = width ? `${width}px` : "";
+    };
+    const elFormItem = reactive({
+      ...toRefs(props),
+      size: sizeClass,
+      validateState,
+      $el: formItemRef,
+      evaluateValidationEnabled,
+      resetField,
+      clearValidate,
+      validate,
+      updateComputedLabelWidth
+    });
+    onMounted(() => {
+      if (props.prop) {
+        elForm == null ? void 0 : elForm.addField(elFormItem);
+        const value = fieldValue.value;
+        initialValue = Array.isArray(value) ? [...value] : value;
+        evaluateValidationEnabled();
+      }
+    });
+    onBeforeUnmount(() => {
+      elForm == null ? void 0 : elForm.removeField(elFormItem);
+    });
+    provide(elFormItemKey, elFormItem);
+    const formItemClass = computed(() => [
+      {
+        "el-form-item--feedback": elForm.statusIcon,
+        "is-error": validateState.value === "error",
+        "is-validating": validateState.value === "validating",
+        "is-success": validateState.value === "success",
+        "is-required": isRequired.value || props.required,
+        "is-no-asterisk": elForm.hideRequiredAsterisk
+      },
+      sizeClass.value ? `el-form-item--${sizeClass.value}` : ""
+    ]);
+    const shouldShowError = computed(() => {
+      return validateState.value === "error" && props.showMessage && elForm.showMessage;
+    });
+    const currentLabel = computed(() => (props.label || "") + (elForm.labelSuffix || ""));
+    return {
+      formItemRef,
+      formItemClass,
+      shouldShowError,
+      elForm,
+      labelStyle,
+      contentStyle,
+      validateMessage,
+      labelFor,
+      resetField,
+      clearValidate,
+      currentLabel
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=form-item.vue_vue_type_script_lang.mjs.map

package/es/components/form/src/form-item.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/form/src/form-item.vue"],"sourcesContent":["<template>\n  <div ref=\"formItemRef\" class=\"el-form-item\" :class=\"formItemClass\">\n    <LabelWrap\n      :is-auto-width=\"labelStyle.width === 'auto'\"\n      :update-all=\"elForm.labelWidth === 'auto'\"\n    >\n      <label\n        v-if=\"label || $slots.label\"\n        :for=\"labelFor\"\n        class=\"el-form-item__label\"\n        :style=\"labelStyle\"\n      >\n        <slot name=\"label\" :label=\"currentLabel\">\n          {{ currentLabel }}\n        </slot>\n      </label>\n    </LabelWrap>\n    <div class=\"el-form-item__content\" :style=\"contentStyle\">\n      <slot></slot>\n      <transition name=\"el-zoom-in-top\">\n        <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n          <div\n            class=\"el-form-item__error\"\n            :class=\"{\n              'el-form-item__error--inline':\n                typeof inlineMessage === 'boolean'\n                  ? inlineMessage\n                  : elForm.inlineMessage || false,\n            }\"\n          >\n            {{ validateMessage }}\n          </div>\n        </slot>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n  nextTick,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport AsyncValidator from 'async-validator'\nimport { addUnit, getPropByPath } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useSize } from '@element-plus/hooks'\nimport LabelWrap from './label-wrap'\n\nimport type { PropType, CSSProperties } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { ElFormContext, ValidateFieldCallback } from '@element-plus/tokens'\nimport type { FormItemRule } from './form.type'\n\nexport default defineComponent({\n  name: 'ElFormItem',\n  componentName: 'ElFormItem',\n  components: {\n    LabelWrap,\n  },\n  props: {\n    label: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    prop: String,\n    required: {\n      type: Boolean,\n      default: undefined,\n    },\n    rules: [Object, Array] as PropType<FormItemRule | FormItemRule[]>,\n    error: String,\n    validateStatus: String,\n    for: String,\n    inlineMessage: {\n      type: [String, Boolean],\n      default: '',\n    },\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n  },\n  setup(props, { slots }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const validateState = ref('')\n    const validateMessage = ref('')\n    const isValidationEnabled = ref(false)\n\n    const computedLabelWidth = ref('')\n\n    const formItemRef = ref<HTMLDivElement>()\n\n    const vm = getCurrentInstance()\n    const isNested = computed(() => {\n      let parent = vm.parent\n      while (parent && parent.type.name !== 'ElForm') {\n        if (parent.type.name === 'ElFormItem') {\n          return true\n        }\n        parent = parent.parent\n      }\n      return false\n    })\n\n    let initialValue = undefined\n\n    watch(\n      () => props.error,\n      (val) => {\n        validateMessage.value = val\n        validateState.value = val ? 'error' : ''\n      },\n      {\n        immediate: true,\n      }\n    )\n    watch(\n      () => props.validateStatus,\n      (val) => {\n        validateState.value = val\n      }\n    )\n\n    const labelFor = computed(() => props.for || props.prop)\n    const labelStyle = computed(() => {\n      const ret: CSSProperties = {}\n      if (elForm.labelPosition === 'top') return ret\n      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth)\n      if (labelWidth) {\n        ret.width = labelWidth\n      }\n      return ret\n    })\n    const contentStyle = computed(() => {\n      const ret: CSSProperties = {}\n      if (elForm.labelPosition === 'top' || elForm.inline) {\n        return ret\n      }\n      if (!props.label && !props.labelWidth && isNested.value) {\n        return ret\n      }\n      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth)\n      if (!props.label && !slots.label) {\n        ret.marginLeft = labelWidth\n      }\n      return ret\n    })\n    const fieldValue = computed(() => {\n      const model = elForm.model\n      if (!model || !props.prop) {\n        return\n      }\n\n      let path = props.prop\n      if (path.indexOf(':') !== -1) {\n        path = path.replace(/:/, '.')\n      }\n\n      return getPropByPath(model, path, true).v\n    })\n    const isRequired = computed(() => {\n      const rules = getRules()\n      let required = false\n\n      if (rules && rules.length) {\n        rules.every((rule) => {\n          if (rule.required) {\n            required = true\n            return false\n          }\n          return true\n        })\n      }\n      return required\n    })\n    const sizeClass = useSize(undefined, { formItem: false })\n\n    const validate = (\n      trigger: string,\n      callback: ValidateFieldCallback = NOOP\n    ) => {\n      if (!isValidationEnabled.value) {\n        callback()\n        return\n      }\n      const rules = getFilteredRule(trigger)\n      if ((!rules || rules.length === 0) && props.required === undefined) {\n        callback()\n        return\n      }\n      validateState.value = 'validating'\n      const descriptor = {}\n      if (rules && rules.length > 0) {\n        rules.forEach((rule) => {\n          delete rule.trigger\n        })\n      }\n      descriptor[props.prop] = rules\n      const validator = new AsyncValidator(descriptor)\n      const model = {}\n      model[props.prop] = fieldValue.value\n      validator.validate(model, { firstFields: true }, (errors, fields) => {\n        validateState.value = !errors ? 'success' : 'error'\n        validateMessage.value = errors\n          ? errors[0].message || `${props.prop} is required`\n          : ''\n        // fix: #3860 after version 3.5.2, async-validator also return fields if validation fails\n        callback(validateMessage.value, errors ? fields : {})\n        elForm.emit?.(\n          'validate',\n          props.prop,\n          !errors,\n          validateMessage.value || null\n        )\n      })\n    }\n\n    const clearValidate = () => {\n      validateState.value = ''\n      validateMessage.value = ''\n    }\n    const resetField = () => {\n      const model = elForm.model\n      const value = fieldValue.value\n      let path = props.prop\n      if (path.indexOf(':') !== -1) {\n        path = path.replace(/:/, '.')\n      }\n      const prop = getPropByPath(model, path, true)\n      if (Array.isArray(value)) {\n        prop.o[prop.k] = [].concat(initialValue)\n      } else {\n        prop.o[prop.k] = initialValue\n      }\n      nextTick(() => {\n        clearValidate()\n      })\n    }\n\n    const getRules = () => {\n      const formRules = elForm.rules\n      const selfRules = props.rules\n      const requiredRule =\n        props.required !== undefined ? { required: !!props.required } : []\n\n      const prop = getPropByPath(formRules, props.prop || '', false)\n      const normalizedRule = formRules ? prop.o[props.prop || ''] || prop.v : []\n\n      return [].concat(selfRules || normalizedRule || []).concat(requiredRule)\n    }\n    const getFilteredRule = (trigger) => {\n      const rules = getRules()\n\n      return rules\n        .filter((rule) => {\n          if (!rule.trigger || trigger === '') return true\n          if (Array.isArray(rule.trigger)) {\n            return rule.trigger.indexOf(trigger) > -1\n          } else {\n            return rule.trigger === trigger\n          }\n        })\n        .map((rule) => ({ ...rule }))\n    }\n\n    const evaluateValidationEnabled = () => {\n      isValidationEnabled.value = !!getRules()?.length\n    }\n\n    const updateComputedLabelWidth = (width: string | number) => {\n      computedLabelWidth.value = width ? `${width}px` : ''\n    }\n\n    const elFormItem = reactive({\n      ...toRefs(props),\n      size: sizeClass,\n      validateState,\n      $el: formItemRef,\n      evaluateValidationEnabled,\n      resetField,\n      clearValidate,\n      validate,\n      updateComputedLabelWidth,\n    })\n\n    onMounted(() => {\n      if (props.prop) {\n        elForm?.addField(elFormItem)\n\n        const value = fieldValue.value\n        initialValue = Array.isArray(value) ? [...value] : value\n\n        evaluateValidationEnabled()\n      }\n    })\n    onBeforeUnmount(() => {\n      elForm?.removeField(elFormItem)\n    })\n\n    provide(elFormItemKey, elFormItem)\n\n    const formItemClass = computed(() => [\n      {\n        'el-form-item--feedback': elForm.statusIcon,\n        'is-error': validateState.value === 'error',\n        'is-validating': validateState.value === 'validating',\n        'is-success': validateState.value === 'success',\n        'is-required': isRequired.value || props.required,\n        'is-no-asterisk': elForm.hideRequiredAsterisk,\n      },\n      sizeClass.value ? `el-form-item--${sizeClass.value}` : '',\n    ])\n\n    const shouldShowError = computed(() => {\n      return (\n        validateState.value === 'error' &&\n        props.showMessage &&\n        elForm.showMessage\n      )\n    })\n\n    const currentLabel = computed(\n      () => (props.label || '') + (elForm.labelSuffix || '')\n    )\n\n    return {\n      formItemRef,\n      formItemClass,\n      shouldShowError,\n      elForm,\n      labelStyle,\n      contentStyle,\n      validateMessage,\n      labelFor,\n      resetField,\n      clearValidate,\n      currentLabel,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/form/src/form-item.vue_vue_type_template_id_24eda48b_lang.mjs

@@ -0,0 +1,53 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, Transition } from 'vue';
+
+const _hoisted_1 = ["for"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_LabelWrap = resolveComponent("LabelWrap");
+  return openBlock(), createElementBlock("div", {
+    ref: "formItemRef",
+    class: normalizeClass(["el-form-item", _ctx.formItemClass])
+  }, [
+    createVNode(_component_LabelWrap, {
+      "is-auto-width": _ctx.labelStyle.width === "auto",
+      "update-all": _ctx.elForm.labelWidth === "auto"
+    }, {
+      default: withCtx(() => [
+        _ctx.label || _ctx.$slots.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          for: _ctx.labelFor,
+          class: "el-form-item__label",
+          style: normalizeStyle(_ctx.labelStyle)
+        }, [
+          renderSlot(_ctx.$slots, "label", { label: _ctx.currentLabel }, () => [
+            createTextVNode(toDisplayString(_ctx.currentLabel), 1)
+          ])
+        ], 12, _hoisted_1)) : createCommentVNode("v-if", true)
+      ]),
+      _: 3
+    }, 8, ["is-auto-width", "update-all"]),
+    createElementVNode("div", {
+      class: "el-form-item__content",
+      style: normalizeStyle(_ctx.contentStyle)
+    }, [
+      renderSlot(_ctx.$slots, "default"),
+      createVNode(Transition, { name: "el-zoom-in-top" }, {
+        default: withCtx(() => [
+          _ctx.shouldShowError ? renderSlot(_ctx.$slots, "error", {
+            key: 0,
+            error: _ctx.validateMessage
+          }, () => [
+            createElementVNode("div", {
+              class: normalizeClass(["el-form-item__error", {
+                "el-form-item__error--inline": typeof _ctx.inlineMessage === "boolean" ? _ctx.inlineMessage : _ctx.elForm.inlineMessage || false
+              }])
+            }, toDisplayString(_ctx.validateMessage), 3)
+          ]) : createCommentVNode("v-if", true)
+        ]),
+        _: 3
+      })
+    ], 4)
+  ], 2);
+}
+
+export { render };
+//# sourceMappingURL=form-item.vue_vue_type_template_id_24eda48b_lang.mjs.map

package/es/components/form/src/form-item.vue_vue_type_template_id_24eda48b_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-item.vue_vue_type_template_id_24eda48b_lang.mjs","sources":["../../../../../../packages/components/form/src/form-item.vue?vue&type=template&id=24eda48b&lang.js"],"sourcesContent":["<template>\n  <div ref=\"formItemRef\" class=\"el-form-item\" :class=\"formItemClass\">\n    <LabelWrap\n      :is-auto-width=\"labelStyle.width === 'auto'\"\n      :update-all=\"elForm.labelWidth === 'auto'\"\n    >\n      <label\n        v-if=\"label || $slots.label\"\n        :for=\"labelFor\"\n        class=\"el-form-item__label\"\n        :style=\"labelStyle\"\n      >\n        <slot name=\"label\" :label=\"currentLabel\">\n          {{ currentLabel }}\n        </slot>\n      </label>\n    </LabelWrap>\n    <div class=\"el-form-item__content\" :style=\"contentStyle\">\n      <slot></slot>\n      <transition name=\"el-zoom-in-top\">\n        <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n          <div\n            class=\"el-form-item__error\"\n            :class=\"{\n              'el-form-item__error--inline':\n                typeof inlineMessage === 'boolean'\n                  ? inlineMessage\n                  : elForm.inlineMessage || false,\n            }\"\n          >\n            {{ validateMessage }}\n          </div>\n        </slot>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n  nextTick,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport AsyncValidator from 'async-validator'\nimport { addUnit, getPropByPath } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useSize } from '@element-plus/hooks'\nimport LabelWrap from './label-wrap'\n\nimport type { PropType, CSSProperties } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { ElFormContext, ValidateFieldCallback } from '@element-plus/tokens'\nimport type { FormItemRule } from './form.type'\n\nexport default defineComponent({\n  name: 'ElFormItem',\n  componentName: 'ElFormItem',\n  components: {\n    LabelWrap,\n  },\n  props: {\n    label: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    prop: String,\n    required: {\n      type: Boolean,\n      default: undefined,\n    },\n    rules: [Object, Array] as PropType<FormItemRule | FormItemRule[]>,\n    error: String,\n    validateStatus: String,\n    for: String,\n    inlineMessage: {\n      type: [String, Boolean],\n      default: '',\n    },\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n  },\n  setup(props, { slots }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const validateState = ref('')\n    const validateMessage = ref('')\n    const isValidationEnabled = ref(false)\n\n    const computedLabelWidth = ref('')\n\n    const formItemRef = ref<HTMLDivElement>()\n\n    const vm = getCurrentInstance()\n    const isNested = computed(() => {\n      let parent = vm.parent\n      while (parent && parent.type.name !== 'ElForm') {\n        if (parent.type.name === 'ElFormItem') {\n          return true\n        }\n        parent = parent.parent\n      }\n      return false\n    })\n\n    let initialValue = undefined\n\n    watch(\n      () => props.error,\n      (val) => {\n        validateMessage.value = val\n        validateState.value = val ? 'error' : ''\n      },\n      {\n        immediate: true,\n      }\n    )\n    watch(\n      () => props.validateStatus,\n      (val) => {\n        validateState.value = val\n      }\n    )\n\n    const labelFor = computed(() => props.for || props.prop)\n    const labelStyle = computed(() => {\n      const ret: CSSProperties = {}\n      if (elForm.labelPosition === 'top') return ret\n      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth)\n      if (labelWidth) {\n        ret.width = labelWidth\n      }\n      return ret\n    })\n    const contentStyle = computed(() => {\n      const ret: CSSProperties = {}\n      if (elForm.labelPosition === 'top' || elForm.inline) {\n        return ret\n      }\n      if (!props.label && !props.labelWidth && isNested.value) {\n        return ret\n      }\n      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth)\n      if (!props.label && !slots.label) {\n        ret.marginLeft = labelWidth\n      }\n      return ret\n    })\n    const fieldValue = computed(() => {\n      const model = elForm.model\n      if (!model || !props.prop) {\n        return\n      }\n\n      let path = props.prop\n      if (path.indexOf(':') !== -1) {\n        path = path.replace(/:/, '.')\n      }\n\n      return getPropByPath(model, path, true).v\n    })\n    const isRequired = computed(() => {\n      const rules = getRules()\n      let required = false\n\n      if (rules && rules.length) {\n        rules.every((rule) => {\n          if (rule.required) {\n            required = true\n            return false\n          }\n          return true\n        })\n      }\n      return required\n    })\n    const sizeClass = useSize(undefined, { formItem: false })\n\n    const validate = (\n      trigger: string,\n      callback: ValidateFieldCallback = NOOP\n    ) => {\n      if (!isValidationEnabled.value) {\n        callback()\n        return\n      }\n      const rules = getFilteredRule(trigger)\n      if ((!rules || rules.length === 0) && props.required === undefined) {\n        callback()\n        return\n      }\n      validateState.value = 'validating'\n      const descriptor = {}\n      if (rules && rules.length > 0) {\n        rules.forEach((rule) => {\n          delete rule.trigger\n        })\n      }\n      descriptor[props.prop] = rules\n      const validator = new AsyncValidator(descriptor)\n      const model = {}\n      model[props.prop] = fieldValue.value\n      validator.validate(model, { firstFields: true }, (errors, fields) => {\n        validateState.value = !errors ? 'success' : 'error'\n        validateMessage.value = errors\n          ? errors[0].message || `${props.prop} is required`\n          : ''\n        // fix: #3860 after version 3.5.2, async-validator also return fields if validation fails\n        callback(validateMessage.value, errors ? fields : {})\n        elForm.emit?.(\n          'validate',\n          props.prop,\n          !errors,\n          validateMessage.value || null\n        )\n      })\n    }\n\n    const clearValidate = () => {\n      validateState.value = ''\n      validateMessage.value = ''\n    }\n    const resetField = () => {\n      const model = elForm.model\n      const value = fieldValue.value\n      let path = props.prop\n      if (path.indexOf(':') !== -1) {\n        path = path.replace(/:/, '.')\n      }\n      const prop = getPropByPath(model, path, true)\n      if (Array.isArray(value)) {\n        prop.o[prop.k] = [].concat(initialValue)\n      } else {\n        prop.o[prop.k] = initialValue\n      }\n      nextTick(() => {\n        clearValidate()\n      })\n    }\n\n    const getRules = () => {\n      const formRules = elForm.rules\n      const selfRules = props.rules\n      const requiredRule =\n        props.required !== undefined ? { required: !!props.required } : []\n\n      const prop = getPropByPath(formRules, props.prop || '', false)\n      const normalizedRule = formRules ? prop.o[props.prop || ''] || prop.v : []\n\n      return [].concat(selfRules || normalizedRule || []).concat(requiredRule)\n    }\n    const getFilteredRule = (trigger) => {\n      const rules = getRules()\n\n      return rules\n        .filter((rule) => {\n          if (!rule.trigger || trigger === '') return true\n          if (Array.isArray(rule.trigger)) {\n            return rule.trigger.indexOf(trigger) > -1\n          } else {\n            return rule.trigger === trigger\n          }\n        })\n        .map((rule) => ({ ...rule }))\n    }\n\n    const evaluateValidationEnabled = () => {\n      isValidationEnabled.value = !!getRules()?.length\n    }\n\n    const updateComputedLabelWidth = (width: string | number) => {\n      computedLabelWidth.value = width ? `${width}px` : ''\n    }\n\n    const elFormItem = reactive({\n      ...toRefs(props),\n      size: sizeClass,\n      validateState,\n      $el: formItemRef,\n      evaluateValidationEnabled,\n      resetField,\n      clearValidate,\n      validate,\n      updateComputedLabelWidth,\n    })\n\n    onMounted(() => {\n      if (props.prop) {\n        elForm?.addField(elFormItem)\n\n        const value = fieldValue.value\n        initialValue = Array.isArray(value) ? [...value] : value\n\n        evaluateValidationEnabled()\n      }\n    })\n    onBeforeUnmount(() => {\n      elForm?.removeField(elFormItem)\n    })\n\n    provide(elFormItemKey, elFormItem)\n\n    const formItemClass = computed(() => [\n      {\n        'el-form-item--feedback': elForm.statusIcon,\n        'is-error': validateState.value === 'error',\n        'is-validating': validateState.value === 'validating',\n        'is-success': validateState.value === 'success',\n        'is-required': isRequired.value || props.required,\n        'is-no-asterisk': elForm.hideRequiredAsterisk,\n      },\n      sizeClass.value ? `el-form-item--${sizeClass.value}` : '',\n    ])\n\n    const shouldShowError = computed(() => {\n      return (\n        validateState.value === 'error' &&\n        props.showMessage &&\n        elForm.showMessage\n      )\n    })\n\n    const currentLabel = computed(\n      () => (props.label || '') + (elForm.labelSuffix || '')\n    )\n\n    return {\n      formItemRef,\n      formItemClass,\n      shouldShowError,\n      elForm,\n      labelStyle,\n      contentStyle,\n      validateMessage,\n      labelFor,\n      resetField,\n      clearValidate,\n      currentLabel,\n    }\n  },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;IACOA;4BAAwB,gBAAuB;;;MAE/C,gBAAe;kBACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/form/src/form.mjs

@@ -0,0 +1,7 @@
+import script from './form.vue_vue_type_script_lang.mjs';
+export { default } from './form.vue_vue_type_script_lang.mjs';
+import { render } from './form.vue_vue_type_template_id_602d6cf6_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/form/src/form.vue";
+//# sourceMappingURL=form.mjs.map

package/es/components/form/src/form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/components/form/src/form.type.d.ts

@@ -0,0 +1,5 @@
+import type { RuleItem } from 'async-validator';
+export interface FormItemRule extends RuleItem {
+    trigger?: string;
+}
+export declare type FormRulesMap<T extends string = string> = Partial<Record<T, FormItemRule | FormItemRule[]>>;

package/es/components/form/src/form.type.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=form.type.mjs.map

package/es/components/form/src/form.type.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.type.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/es/components/form/src/form.vue.d.ts

@@ -0,0 +1,89 @@
+import type { ValidateFieldsError } from 'async-validator';
+import type { PropType } from 'vue';
+import type { ComponentSize } from 'element-plus/es/utils/types';
+import type { ValidateFieldCallback } from 'element-plus/es/tokens';
+export interface Callback {
+    (isValid?: boolean, invalidFields?: ValidateFieldsError): void;
+}
+declare const _default: import("vue").DefineComponent<{
+    model: ObjectConstructor;
+    rules: PropType<Partial<Record<string, import("./form.type").FormItemRule | import("./form.type").FormItemRule[]>>>;
+    labelPosition: StringConstructor;
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    labelSuffix: {
+        type: StringConstructor;
+        default: string;
+    };
+    inline: BooleanConstructor;
+    inlineMessage: BooleanConstructor;
+    statusIcon: BooleanConstructor;
+    showMessage: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: PropType<ComponentSize>;
+    disabled: BooleanConstructor;
+    validateOnRuleChange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideRequiredAsterisk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollToError: BooleanConstructor;
+}, {
+    validate: (callback?: Callback | undefined) => Promise<boolean> | undefined;
+    resetFields: () => void;
+    clearValidate: (props?: string | string[]) => void;
+    validateField: (props: string | string[], cb: ValidateFieldCallback) => void;
+    scrollToField: (prop: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "validate"[], "validate", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    model?: unknown;
+    rules?: unknown;
+    labelPosition?: unknown;
+    labelWidth?: unknown;
+    labelSuffix?: unknown;
+    inline?: unknown;
+    inlineMessage?: unknown;
+    statusIcon?: unknown;
+    showMessage?: unknown;
+    size?: unknown;
+    disabled?: unknown;
+    validateOnRuleChange?: unknown;
+    hideRequiredAsterisk?: unknown;
+    scrollToError?: unknown;
+} & {
+    disabled: boolean;
+    inline: boolean;
+    labelWidth: string | number;
+    labelSuffix: string;
+    inlineMessage: boolean;
+    statusIcon: boolean;
+    showMessage: boolean;
+    validateOnRuleChange: boolean;
+    hideRequiredAsterisk: boolean;
+    scrollToError: boolean;
+} & {
+    size?: ComponentSize | undefined;
+    model?: Record<string, any> | undefined;
+    labelPosition?: string | undefined;
+    rules?: Partial<Record<string, import("./form.type").FormItemRule | import("./form.type").FormItemRule[]>> | undefined;
+}> & {
+    onValidate?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    inline: boolean;
+    labelWidth: string | number;
+    labelSuffix: string;
+    inlineMessage: boolean;
+    statusIcon: boolean;
+    showMessage: boolean;
+    validateOnRuleChange: boolean;
+    hideRequiredAsterisk: boolean;
+    scrollToError: boolean;
+}>;
+export default _default;