element-plus 2.0.4 → 2.1.0

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

@@ -1,309 +1,49 @@
-import { defineComponent, inject, ref, getCurrentInstance, computed, watch, nextTick, reactive, toRefs, onMounted, onBeforeUnmount, provide, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, Transition } from 'vue';
-import { NOOP } from '@vue/shared';
-import AsyncValidator from 'async-validator';
+import '../../../constants/index.mjs';
 import '../../../utils/index.mjs';
-import '../../../tokens/index.mjs';
-import '../../../hooks/index.mjs';
-import LabelWrap from './label-wrap.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { isValidComponentSize } from '../../../utils/vue/validator.mjs';
-import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
-import { addUnit } from '../../../utils/vue/style.mjs';
-import { getPropByPath } from '../../../utils/objects.mjs';
-import { useSize } from '../../../hooks/use-common-props/index.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props.mjs';
+import { componentSizes } from '../../../constants/size.mjs';
 
-const _sfc_main = defineComponent({
-  name: "ElFormItem",
-  componentName: "ElFormItem",
-  components: {
-    LabelWrap
+const formItemValidateStates = [
+  "",
+  "error",
+  "validating",
+  "success"
+];
+const formItemProps = buildProps({
+  label: String,
+  labelWidth: {
+    type: [String, Number],
+    default: ""
   },
-  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
-    }
+  prop: {
+    type: definePropType([String, Array])
   },
-  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
-    };
+  required: {
+    type: Boolean,
+    default: void 0
+  },
+  rules: {
+    type: definePropType([Object, Array])
+  },
+  error: String,
+  validateStatus: {
+    type: String,
+    values: formItemValidateStates
+  },
+  for: String,
+  inlineMessage: {
+    type: [String, Boolean],
+    default: ""
+  },
+  showMessage: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: String,
+    values: componentSizes
   }
 });
-const _hoisted_1 = ["for"];
-function _sfc_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);
-}
-var FormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { FormItem as default };
+export { formItemProps, formItemValidateStates };
 //# sourceMappingURL=form-item.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"form-item.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 {\n  addUnit,\n  isValidComponentSize,\n  getPropByPath,\n} from '@element-plus/utils'\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/constants'\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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"}
+{"version":3,"file":"form-item.mjs","sources":["../../../../../../packages/components/form/src/form-item.ts"],"sourcesContent":["import { componentSizes } from '@element-plus/constants'\nimport { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type FormItem from './form-item.vue'\nimport type { FormItemRule } from './types'\n\nexport const formItemValidateStates = [\n  '',\n  'error',\n  'validating',\n  'success',\n] as const\nexport type FormItemValidateState = typeof formItemValidateStates[number]\n\nexport type FormItemProp = Arrayable<string>\n\nexport const formItemProps = buildProps({\n  label: String,\n  labelWidth: {\n    type: [String, Number],\n    default: '',\n  },\n  prop: {\n    type: definePropType<FormItemProp>([String, Array]),\n  },\n  required: {\n    type: Boolean,\n    default: undefined,\n  },\n  rules: {\n    type: definePropType<Arrayable<FormItemRule>>([Object, Array]),\n  },\n  error: String,\n  validateStatus: {\n    type: String,\n    values: formItemValidateStates,\n  },\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,\n    values: componentSizes,\n  },\n} as const)\nexport type FormItemProps = ExtractPropTypes<typeof formItemProps>\n\nexport type FormItemInstance = InstanceType<typeof FormItem>\n"],"names":[],"mappings":";;;;;AAEY,MAAC,sBAAsB,GAAG;AACtC,EAAE,EAAE;AACJ,EAAE,OAAO;AACT,EAAE,YAAY;AACd,EAAE,SAAS;AACX,EAAE;AACU,MAAC,aAAa,GAAG,UAAU,CAAC;AACxC,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,sBAAsB;AAClC,GAAG;AACH,EAAE,GAAG,EAAE,MAAM;AACb,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;AAC3B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,cAAc;AAC1B,GAAG;AACH,CAAC;;;;"}

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

@@ -1,83 +1,114 @@
-import type { PropType, CSSProperties } from 'vue';
-import type { ElFormContext } from 'element-plus/es/tokens';
-import type { FormItemRule } from './form.type';
+import type { CSSProperties } from 'vue';
+import type { RuleItem } from 'async-validator';
+import type { FormItemContext } from 'element-plus/es/tokens';
+import type { Arrayable } from 'element-plus/es/utils';
+import type { FormItemRule } from './types';
 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<"default" | "small" | "large">;
-        validator: (val: string) => val is "" | "default" | "small" | "large";
-    };
+    readonly label: StringConstructor;
+    readonly labelWidth: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly prop: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("./form-item").FormItemProp>, unknown, unknown, unknown, unknown>;
+    readonly required: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, undefined, unknown, unknown, unknown>;
+    readonly rules: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<Arrayable<FormItemRule>>, unknown, unknown, unknown, unknown>;
+    readonly error: StringConstructor;
+    readonly validateStatus: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, "" | "success" | "error" | "validating", unknown>;
+    readonly for: StringConstructor;
+    readonly inlineMessage: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, BooleanConstructor], "", unknown, unknown, unknown>;
+    readonly showMessage: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, "default" | "small" | "large", unknown>;
 }, {
+    COMPONENT_NAME: string;
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly label: StringConstructor;
+        readonly labelWidth: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+        readonly prop: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("./form-item").FormItemProp>, unknown, unknown, unknown, unknown>;
+        readonly required: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, undefined, unknown, unknown, unknown>;
+        readonly rules: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<Arrayable<FormItemRule>>, unknown, unknown, unknown, unknown>;
+        readonly error: StringConstructor;
+        readonly validateStatus: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, "" | "success" | "error" | "validating", unknown>;
+        readonly for: StringConstructor;
+        readonly inlineMessage: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, BooleanConstructor], "", unknown, unknown, unknown>;
+        readonly showMessage: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+        readonly size: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, "default" | "small" | "large", unknown>;
+    }>> & {
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
+    slots: Readonly<{
+        [name: string]: import("vue").Slot | undefined;
+    }>;
+    formContext: import("element-plus/es/tokens").FormContext;
+    parentFormItemContext: FormItemContext | undefined;
+    _size: import("vue").ComputedRef<"default" | "small" | "large">;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+    };
+    validateState: import("vue").Ref<"" | "success" | "error" | "validating">;
+    validateMessage: import("vue").Ref<string>;
     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;
+    initialValue: any;
     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;
+    formItemClasses: import("vue").ComputedRef<(string | {
+        [x: string]: boolean;
+    })[]>;
+    _inlineMessage: import("vue").ComputedRef<boolean>;
+    validateClasses: import("vue").ComputedRef<(string | {
+        [x: string]: boolean;
+    })[]>;
+    propString: import("vue").ComputedRef<string>;
+    labelFor: import("vue").ComputedRef<string>;
+    isNested: boolean;
+    fieldValue: import("vue").ComputedRef<any>;
+    _rules: import("vue").ComputedRef<FormItemRule[]>;
+    validateEnabled: import("vue").ComputedRef<boolean>;
+    getFilteredRule: (trigger: string) => RuleItem[];
+    isRequired: import("vue").ComputedRef<boolean>;
+    shouldShowError: import("vue").ComputedRef<import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>>;
     currentLabel: import("vue").ComputedRef<string>;
+    validate: (trigger: string, callback?: import("./types").FormValidateCallback | undefined) => Promise<void>;
+    clearValidate: () => void;
+    resetField: () => void;
+    context: FormItemContext;
+    FormLabelWrap: import("vue").DefineComponent<{
+        isAutoWidth: BooleanConstructor;
+        updateAll: BooleanConstructor;
+    }, () => JSX.Element | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        isAutoWidth: BooleanConstructor;
+        updateAll: BooleanConstructor;
+    }>>, {
+        isAutoWidth: boolean;
+        updateAll: boolean;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    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<"default" | "small" | "large">;
-        validator: (val: string) => val is "" | "default" | "small" | "large";
-    };
+    readonly label: StringConstructor;
+    readonly labelWidth: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly prop: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("./form-item").FormItemProp>, unknown, unknown, unknown, unknown>;
+    readonly required: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, undefined, unknown, unknown, unknown>;
+    readonly rules: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<Arrayable<FormItemRule>>, unknown, unknown, unknown, unknown>;
+    readonly error: StringConstructor;
+    readonly validateStatus: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, "" | "success" | "error" | "validating", unknown>;
+    readonly for: StringConstructor;
+    readonly inlineMessage: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, BooleanConstructor], "", unknown, unknown, unknown>;
+    readonly showMessage: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, "default" | "small" | "large", unknown>;
 }>>, {
-    required: boolean;
-    labelWidth: string | number;
-    inlineMessage: string | boolean;
-    showMessage: boolean;
+    required: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    size: import("element-plus/es/utils").BuildPropType<StringConstructor, "default" | "small" | "large", unknown>;
+    rules: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<Arrayable<FormItemRule>>, unknown, unknown>;
+    labelWidth: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    showMessage: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    inlineMessage: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, BooleanConstructor], unknown, unknown>;
+    prop: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<import("./form-item").FormItemProp>, unknown, unknown>;
+    validateStatus: import("element-plus/es/utils").BuildPropType<StringConstructor, "" | "success" | "error" | "validating", unknown>;
 }>;
 export default _default;