@element-plus/nightly 0.0.20220303 → 0.0.20220306

package/lib/components/form/src/form-item2.js

@@ -0,0 +1,257 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var AsyncValidator = require('async-validator');
+var lodashUnified = require('lodash-unified');
+require('../../../utils/index.js');
+require('../../../tokens/index.js');
+require('../../../hooks/index.js');
+var formItem = require('./form-item.js');
+var formLabelWrap = require('./form-label-wrap.js');
+var form = require('../../../tokens/form.js');
+var error = require('../../../utils/error.js');
+var index = require('../../../hooks/use-common-props/index.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
+var style = require('../../../utils/vue/style.js');
+var core = require('@vueuse/core');
+var shared = require('@vue/shared');
+var objects = require('../../../utils/objects.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var AsyncValidator__default = /*#__PURE__*/_interopDefaultLegacy(AsyncValidator);
+
+const _hoisted_1 = ["for"];
+const __default__ = {
+  name: "ElFormItem"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: formItem.formItemProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const COMPONENT_NAME = "ElFormItem";
+    const slots = vue.useSlots();
+    const formContext = vue.inject(form.formContextKey);
+    if (!formContext)
+      error.throwError(COMPONENT_NAME, "usage: <el-form><el-form-item /></el-form>");
+    const parentFormItemContext = vue.inject(form.formItemContextKey, void 0);
+    const _size = index.useSize(void 0, { formItem: false });
+    const ns = index$1.useNamespace("form-item");
+    const validateState = vue.ref("");
+    const validateMessage = vue.ref("");
+    const formItemRef = vue.ref();
+    let initialValue = void 0;
+    const labelStyle = vue.computed(() => {
+      if (formContext.labelPosition === "top") {
+        return {};
+      }
+      const labelWidth = style.addUnit(props.labelWidth || formContext.labelWidth || "");
+      if (labelWidth)
+        return { width: labelWidth };
+      return {};
+    });
+    const contentStyle = vue.computed(() => {
+      if (formContext.labelPosition === "top" || formContext.inline) {
+        return {};
+      }
+      if (!props.label && !props.labelWidth && isNested) {
+        return {};
+      }
+      const labelWidth = style.addUnit(props.labelWidth || formContext.labelWidth || "");
+      if (!props.label && !slots.label) {
+        return { marginLeft: labelWidth };
+      }
+      return {};
+    });
+    const formItemClasses = vue.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.hideRequiredAsterisk),
+      { [ns.m("feedback")]: formContext.statusIcon }
+    ]);
+    const _inlineMessage = vue.computed(() => core.isBoolean(props.inlineMessage) ? props.inlineMessage : formContext.inlineMessage || false);
+    const validateClasses = vue.computed(() => [
+      ns.e("error"),
+      { [ns.em("error", "inline")]: _inlineMessage.value }
+    ]);
+    const propString = vue.computed(() => {
+      if (!props.prop)
+        return "";
+      return shared.isString(props.prop) ? props.prop : props.prop.join(".");
+    });
+    const labelFor = vue.computed(() => props.for || propString.value);
+    const isNested = !!parentFormItemContext;
+    const fieldValue = vue.computed(() => {
+      const model = formContext.model;
+      if (!model || !props.prop) {
+        return;
+      }
+      return objects.getProp(model, props.prop).value;
+    });
+    const _rules = vue.computed(() => {
+      const rules = props.rules ? lodashUnified.castArray(props.rules) : [];
+      const formRules = formContext.rules;
+      if (formRules && props.prop) {
+        const _rules2 = objects.getProp(formRules, props.prop).value;
+        if (_rules2) {
+          rules.push(...lodashUnified.castArray(_rules2));
+        }
+      }
+      if (props.required !== void 0) {
+        rules.push({ required: !!props.required });
+      }
+      return rules;
+    });
+    const validateEnabled = vue.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 = vue.computed(() => _rules.value.some((rule) => rule.required === true));
+    const shouldShowError = vue.computed(() => validateState.value === "error" && props.showMessage && formContext.showMessage);
+    const currentLabel = vue.computed(() => `${props.label || ""}${formContext.labelSuffix || ""}`);
+    const validate = async (trigger, callback) => {
+      if (callback) {
+        try {
+          validate(trigger);
+          callback(true);
+        } catch (err) {
+          callback(false, err);
+        }
+        validate(trigger).then(() => callback(true)).catch((fields) => callback(false, fields));
+        return;
+      }
+      if (!validateEnabled.value) {
+        return;
+      }
+      const rules = getFilteredRule(trigger);
+      if (rules.length === 0) {
+        return;
+      }
+      validateState.value = "validating";
+      const descriptor = {
+        [propString.value]: rules
+      };
+      const validator = new AsyncValidator__default["default"](descriptor);
+      const model = {
+        [propString.value]: fieldValue.value
+      };
+      return validator.validate(model, { firstFields: true }).then(() => void 0).catch((err) => {
+        const { errors, fields } = err;
+        if (!errors || !fields)
+          console.error(err);
+        validateState.value = "error";
+        validateMessage.value = errors ? errors[0].message || `${props.prop} is required` : "";
+        formContext.emit("validate", props.prop, !errors, validateMessage.value);
+        return Promise.reject(fields);
+      });
+    };
+    const clearValidate = () => {
+      validateState.value = "";
+      validateMessage.value = "";
+    };
+    const resetField = () => {
+      const model = formContext.model;
+      if (!model || !props.prop)
+        return;
+      objects.getProp(model, props.prop).value = initialValue;
+      vue.nextTick(() => clearValidate());
+    };
+    vue.watch(() => props.error, (val) => {
+      validateMessage.value = val || "";
+      validateState.value = val ? "error" : "";
+    }, { immediate: true });
+    vue.watch(() => props.validateStatus, (val) => validateState.value = val || "");
+    const context = vue.reactive({
+      ...vue.toRefs(props),
+      $el: formItemRef,
+      size: _size,
+      validateState,
+      resetField,
+      clearValidate,
+      validate
+    });
+    vue.provide(form.formItemContextKey, context);
+    vue.onMounted(() => {
+      if (props.prop) {
+        formContext.addField(context);
+        initialValue = lodashUnified.clone(fieldValue.value);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      formContext.removeField(context);
+    });
+    expose({
+      size: _size,
+      validateMessage,
+      validate,
+      clearValidate,
+      resetField
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "formItemRef",
+        ref: formItemRef,
+        class: vue.normalizeClass(vue.unref(formItemClasses))
+      }, [
+        vue.createVNode(vue.unref(formLabelWrap["default"]), {
+          "is-auto-width": vue.unref(labelStyle).width === "auto",
+          "update-all": vue.unref(formContext).labelWidth === "auto"
+        }, {
+          default: vue.withCtx(() => [
+            _ctx.label || _ctx.$slots.label ? (vue.openBlock(), vue.createElementBlock("label", {
+              key: 0,
+              for: vue.unref(labelFor),
+              class: vue.normalizeClass(vue.unref(ns).e("label")),
+              style: vue.normalizeStyle(vue.unref(labelStyle))
+            }, [
+              vue.renderSlot(_ctx.$slots, "label", { label: vue.unref(currentLabel) }, () => [
+                vue.createTextVNode(vue.toDisplayString(vue.unref(currentLabel)), 1)
+              ])
+            ], 14, _hoisted_1)) : vue.createCommentVNode("v-if", true)
+          ]),
+          _: 3
+        }, 8, ["is-auto-width", "update-all"]),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(ns).e("content")),
+          style: vue.normalizeStyle(vue.unref(contentStyle))
+        }, [
+          vue.renderSlot(_ctx.$slots, "default"),
+          vue.createVNode(vue.Transition, {
+            name: `${vue.unref(ns).namespace.value}-zoom-in-top`
+          }, {
+            default: vue.withCtx(() => [
+              vue.unref(shouldShowError) ? vue.renderSlot(_ctx.$slots, "error", {
+                key: 0,
+                error: validateMessage.value
+              }, () => [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(vue.unref(validateClasses))
+                }, vue.toDisplayString(validateMessage.value), 3)
+              ]) : vue.createCommentVNode("v-if", true)
+            ]),
+            _: 3
+          }, 8, ["name"])
+        ], 6)
+      ], 2);
+    };
+  }
+});
+
+exports["default"] = _sfc_main;
+//# sourceMappingURL=form-item2.js.map

package/lib/components/form/src/form-item2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-item2.js","sources":["../../../../../../packages/components/form/src/form-item.vue"],"sourcesContent":["<template>\n  <div ref=\"formItemRef\" :class=\"formItemClasses\">\n    <form-label-wrap\n      :is-auto-width=\"labelStyle.width === 'auto'\"\n      :update-all=\"formContext.labelWidth === 'auto'\"\n    >\n      <label\n        v-if=\"label || $slots.label\"\n        :for=\"labelFor\"\n        :class=\"ns.e('label')\"\n        :style=\"labelStyle\"\n      >\n        <slot name=\"label\" :label=\"currentLabel\">\n          {{ currentLabel }}\n        </slot>\n      </label>\n    </form-label-wrap>\n\n    <div :class=\"ns.e('content')\" :style=\"contentStyle\">\n      <slot></slot>\n      <transition :name=\"`${ns.namespace.value}-zoom-in-top`\">\n        <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n          <div :class=\"validateClasses\">\n            {{ validateMessage }}\n          </div>\n        </slot>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n  nextTick,\n  useSlots,\n} from 'vue'\nimport AsyncValidator from 'async-validator'\nimport { clone } from 'lodash-unified'\nimport {\n  addUnit,\n  ensureArray,\n  getProp,\n  isString,\n  isBoolean,\n  throwError,\n} from '@element-plus/utils'\nimport { formItemContextKey, formContextKey } from '@element-plus/tokens'\nimport { useSize, useNamespace } from '@element-plus/hooks'\nimport { formItemProps } from './form-item'\nimport FormLabelWrap from './form-label-wrap'\n\nimport type { CSSProperties } from 'vue'\nimport type {\n  RuleItem,\n  ValidateError,\n  ValidateFieldsError,\n} from 'async-validator'\nimport type { FormItemContext } from '@element-plus/tokens'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { FormItemValidateState } from './form-item'\nimport type { FormItemRule } from './types'\n\nconst COMPONENT_NAME = 'ElFormItem'\ndefineOptions({\n  name: 'ElFormItem',\n})\nconst props = defineProps(formItemProps)\nconst slots = useSlots()\n\nconst formContext = inject(formContextKey)\nif (!formContext)\n  throwError(COMPONENT_NAME, 'usage: <el-form><el-form-item /></el-form>')\nconst parentFormItemContext = inject(formItemContextKey, undefined)\n\nconst _size = useSize(undefined, { formItem: false })\nconst ns = useNamespace('form-item')\n\nconst validateState = ref<FormItemValidateState>('')\nconst validateMessage = ref('')\nconst formItemRef = ref<HTMLDivElement>()\nlet initialValue: any = undefined\n\nconst labelStyle = computed<CSSProperties>(() => {\n  if (formContext.labelPosition === 'top') {\n    return {}\n  }\n\n  const labelWidth = addUnit(props.labelWidth || formContext.labelWidth || '')\n  if (labelWidth) return { width: labelWidth }\n  return {}\n})\n\nconst contentStyle = computed<CSSProperties>(() => {\n  if (formContext.labelPosition === 'top' || formContext.inline) {\n    return {}\n  }\n  if (!props.label && !props.labelWidth && isNested) {\n    return {}\n  }\n  const labelWidth = addUnit(props.labelWidth || formContext.labelWidth || '')\n  if (!props.label && !slots.label) {\n    return { marginLeft: labelWidth }\n  }\n  return {}\n})\n\nconst formItemClasses = computed(() => [\n  ns.b(),\n  ns.m(_size.value),\n  ns.is('error', validateState.value === 'error'),\n  ns.is('validating', validateState.value === 'validating'),\n  ns.is('success', validateState.value === 'success'),\n  ns.is('required', isRequired.value || props.required),\n  ns.is('no-asterisk', formContext.hideRequiredAsterisk),\n  { [ns.m('feedback')]: formContext.statusIcon },\n])\n\nconst _inlineMessage = computed(() =>\n  isBoolean(props.inlineMessage)\n    ? props.inlineMessage\n    : formContext.inlineMessage || false\n)\n\nconst validateClasses = computed(() => [\n  ns.e('error'),\n  { [ns.em('error', 'inline')]: _inlineMessage.value },\n])\n\nconst propString = computed(() => {\n  if (!props.prop) return ''\n  return isString(props.prop) ? props.prop : props.prop.join('.')\n})\n\nconst labelFor = computed(() => props.for || propString.value)\n\nconst isNested = !!parentFormItemContext\n\nconst fieldValue = computed(() => {\n  const model = formContext.model\n  if (!model || !props.prop) {\n    return\n  }\n  return getProp(model, props.prop).value\n})\n\nconst _rules = computed(() => {\n  const rules: FormItemRule[] = props.rules ? ensureArray(props.rules) : []\n\n  const formRules = formContext.rules\n  if (formRules && props.prop) {\n    const _rules = getProp<Arrayable<FormItemRule> | undefined>(\n      formRules,\n      props.prop\n    ).value\n    if (_rules) {\n      rules.push(...ensureArray(_rules))\n    }\n  }\n\n  if (props.required !== undefined) {\n    rules.push({ required: !!props.required })\n  }\n\n  return rules\n})\n\nconst validateEnabled = computed(() => _rules.value.length > 0)\n\nconst getFilteredRule = (trigger: string) => {\n  const rules = _rules.value\n  return (\n    rules\n      .filter((rule) => {\n        if (!rule.trigger || !trigger) return true\n        if (Array.isArray(rule.trigger)) {\n          return rule.trigger.includes(trigger)\n        } else {\n          return rule.trigger === trigger\n        }\n      })\n      // exclude trigger\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      .map(({ trigger, ...rule }): RuleItem => rule)\n  )\n}\n\nconst isRequired = computed(() =>\n  _rules.value.some((rule) => rule.required === true)\n)\n\nconst shouldShowError = computed(\n  () =>\n    validateState.value === 'error' &&\n    props.showMessage &&\n    formContext.showMessage\n)\n\nconst currentLabel = computed(\n  () => `${props.label || ''}${formContext.labelSuffix || ''}`\n)\n\nconst validate: FormItemContext['validate'] = async (trigger, callback) => {\n  if (callback) {\n    try {\n      validate(trigger)\n      callback(true)\n    } catch (err) {\n      callback(false, err as ValidateFieldsError)\n    }\n\n    validate(trigger)\n      .then(() => callback(true))\n      .catch((fields: ValidateFieldsError) => callback(false, fields))\n    return\n  }\n\n  if (!validateEnabled.value) {\n    return\n  }\n  const rules = getFilteredRule(trigger)\n  if (rules.length === 0) {\n    return\n  }\n\n  validateState.value = 'validating'\n\n  const descriptor = {\n    [propString.value]: rules,\n  }\n  const validator = new AsyncValidator(descriptor)\n  const model = {\n    [propString.value]: fieldValue.value,\n  }\n\n  interface ValidateFailure {\n    errors: ValidateError[] | null\n    fields: ValidateFieldsError\n  }\n\n  return validator\n    .validate(model, { firstFields: true })\n    .then(() => undefined)\n    .catch((err: ValidateFailure) => {\n      const { errors, fields } = err\n      if (!errors || !fields) console.error(err)\n\n      validateState.value = 'error'\n      validateMessage.value = errors\n        ? errors[0].message || `${props.prop} is required`\n        : ''\n      formContext.emit('validate', props.prop, !errors, validateMessage.value)\n      return Promise.reject(fields)\n    })\n}\n\nconst clearValidate: FormItemContext['clearValidate'] = () => {\n  validateState.value = ''\n  validateMessage.value = ''\n}\n\nconst resetField: FormItemContext['resetField'] = () => {\n  const model = formContext.model\n  if (!model || !props.prop) return\n\n  getProp(model, props.prop).value = initialValue\n  nextTick(() => clearValidate())\n}\n\nwatch(\n  () => props.error,\n  (val) => {\n    validateMessage.value = val || ''\n    validateState.value = val ? 'error' : ''\n  },\n  { immediate: true }\n)\nwatch(\n  () => props.validateStatus,\n  (val) => (validateState.value = val || '')\n)\n\nconst context: FormItemContext = reactive({\n  ...toRefs(props),\n  $el: formItemRef,\n  size: _size,\n  validateState,\n  resetField,\n  clearValidate,\n  validate,\n})\nprovide(formItemContextKey, context)\n\nonMounted(() => {\n  if (props.prop) {\n    formContext.addField(context)\n    initialValue = clone(fieldValue.value)\n  }\n})\nonBeforeUnmount(() => {\n  formContext.removeField(context)\n})\n\ndefineExpose({\n  /** @description form item size */\n  size: _size,\n  /** @description validation message */\n  validateMessage,\n  /** @description validate form item */\n  validate,\n  /** @description clear validation status */\n  clearValidate,\n  /** @description reset field value */\n  resetField,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA;AAKA;AAEA;AACA;;AAEA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;;;;;;;;;AAUA;;;;;;;;;;;;;AAcA;;;;;;;;;;AAWA;AAMA;;;;AAKA;;;;;AAKA;AAEA;AAEA;;;;;;;AAQA;;;;;;;;;;;;;;AAqBA;AAEA;;;;;;;;;;;;AAkBA;AAIA;AAOA;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA;;;;AAKA;;;;;;;AAQA;;;;AAQA;AAKA;;;;;;;;;AASA;AAEA;;;;;;AAMA;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/form/src/form-label-wrap.d.ts

@@ -0,0 +1,11 @@
+declare const _default: 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;
+}>;
+export default _default;

package/lib/components/form/src/form-label-wrap.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var core = require('@vueuse/core');
+require('../../../utils/index.js');
+require('../../../tokens/index.js');
+require('../../../hooks/index.js');
+var form = require('../../../tokens/form.js');
+var error = require('../../../utils/error.js');
+var index = require('../../../hooks/use-namespace/index.js');
+
+const COMPONENT_NAME = "ElLabelWrap";
+var FormLabelWrap = vue.defineComponent({
+  name: COMPONENT_NAME,
+  props: {
+    isAutoWidth: Boolean,
+    updateAll: Boolean
+  },
+  setup(props, {
+    slots
+  }) {
+    const formContext = vue.inject(form.formContextKey);
+    const formItemContext = vue.inject(form.formItemContextKey);
+    if (!formContext || !formItemContext)
+      error.throwError(COMPONENT_NAME, "usage: <el-form><el-form-item><label-wrap /></el-form-item></el-form>");
+    const ns = index.useNamespace("form");
+    const el = vue.ref();
+    const computedWidth = vue.ref(0);
+    const getLabelWidth = () => {
+      var _a;
+      if ((_a = el.value) == null ? void 0 : _a.firstElementChild) {
+        const width = window.getComputedStyle(el.value.firstElementChild).width;
+        return Math.ceil(parseFloat(width));
+      } else {
+        return 0;
+      }
+    };
+    const updateLabelWidth = (action = "update") => {
+      vue.nextTick(() => {
+        if (slots.default && props.isAutoWidth) {
+          if (action === "update") {
+            computedWidth.value = getLabelWidth();
+          } else if (action === "remove") {
+            formContext.deregisterLabelWidth(computedWidth.value);
+          }
+        }
+      });
+    };
+    const updateLabelWidthFn = () => updateLabelWidth("update");
+    vue.onMounted(() => {
+      updateLabelWidthFn();
+    });
+    vue.onBeforeUnmount(() => {
+      updateLabelWidth("remove");
+    });
+    vue.onUpdated(() => updateLabelWidthFn());
+    vue.watch(computedWidth, (val, oldVal) => {
+      if (props.updateAll) {
+        formContext.registerLabelWidth(val, oldVal);
+      }
+    });
+    core.useResizeObserver(vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = el.value) == null ? void 0 : _a.firstElementChild) != null ? _b : null;
+    }), updateLabelWidthFn);
+    return () => {
+      var _a, _b;
+      if (!slots)
+        return null;
+      const {
+        isAutoWidth
+      } = props;
+      if (isAutoWidth) {
+        const autoLabelWidth = formContext.autoLabelWidth;
+        const style = {};
+        if (autoLabelWidth && autoLabelWidth !== "auto") {
+          const marginWidth = Math.max(0, parseInt(autoLabelWidth, 10) - computedWidth.value);
+          const marginPosition = formContext.labelPosition === "left" ? "marginRight" : "marginLeft";
+          if (marginWidth) {
+            style[marginPosition] = `${marginWidth}px`;
+          }
+        }
+        return vue.createVNode("div", {
+          "ref": el,
+          "class": [ns.be("item", "label-wrap")],
+          "style": style
+        }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      } else {
+        return vue.createVNode(vue.Fragment, {
+          "ref": el
+        }, [(_b = slots.default) == null ? void 0 : _b.call(slots)]);
+      }
+    };
+  }
+});
+
+exports["default"] = FormLabelWrap;
+//# sourceMappingURL=form-label-wrap.js.map

package/lib/components/form/src/form-label-wrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-label-wrap.js","sources":["../../../../../../packages/components/form/src/form-label-wrap.tsx"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  Fragment,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  watch,\n} from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { throwError } from '@element-plus/utils'\nimport { formItemContextKey, formContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElLabelWrap'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: {\n    isAutoWidth: Boolean,\n    updateAll: Boolean,\n  },\n\n  setup(props, { slots }) {\n    const formContext = inject(formContextKey)\n    const formItemContext = inject(formItemContextKey)\n    if (!formContext || !formItemContext)\n      throwError(\n        COMPONENT_NAME,\n        'usage: <el-form><el-form-item><label-wrap /></el-form-item></el-form>'\n      )\n\n    const ns = useNamespace('form')\n\n    const el = ref<HTMLElement>()\n    const computedWidth = ref(0)\n\n    const getLabelWidth = () => {\n      if (el.value?.firstElementChild) {\n        const width = window.getComputedStyle(el.value.firstElementChild).width\n        return Math.ceil(parseFloat(width))\n      } else {\n        return 0\n      }\n    }\n\n    const updateLabelWidth = (action: 'update' | 'remove' = 'update') => {\n      nextTick(() => {\n        if (slots.default && props.isAutoWidth) {\n          if (action === 'update') {\n            computedWidth.value = getLabelWidth()\n          } else if (action === 'remove') {\n            formContext.deregisterLabelWidth(computedWidth.value)\n          }\n        }\n      })\n    }\n    const updateLabelWidthFn = () => updateLabelWidth('update')\n\n    onMounted(() => {\n      updateLabelWidthFn()\n    })\n    onBeforeUnmount(() => {\n      updateLabelWidth('remove')\n    })\n    onUpdated(() => updateLabelWidthFn())\n\n    watch(computedWidth, (val, oldVal) => {\n      if (props.updateAll) {\n        formContext.registerLabelWidth(val, oldVal)\n      }\n    })\n\n    useResizeObserver(\n      computed(\n        () => (el.value?.firstElementChild ?? null) as HTMLElement | null\n      ),\n      updateLabelWidthFn\n    )\n\n    return () => {\n      if (!slots) return null\n\n      const { isAutoWidth } = props\n      if (isAutoWidth) {\n        const autoLabelWidth = formContext.autoLabelWidth\n        const style: CSSProperties = {}\n        if (autoLabelWidth && autoLabelWidth !== 'auto') {\n          const marginWidth = Math.max(\n            0,\n            parseInt(autoLabelWidth, 10) - computedWidth.value\n          )\n          const marginPosition =\n            formContext.labelPosition === 'left' ? 'marginRight' : 'marginLeft'\n          if (marginWidth) {\n            style[marginPosition] = `${marginWidth}px`\n          }\n        }\n        return (\n          <div ref={el} class={[ns.be('item', 'label-wrap')]} style={style}>\n            {slots.default?.()}\n          </div>\n        )\n      } else {\n        return <Fragment ref={el}>{slots.default?.()}</Fragment>\n      }\n    }\n  },\n})\n"],"names":["COMPONENT_NAME","defineComponent","name","props","isAutoWidth","Boolean","updateAll","setup","slots","formContext","ns","useNamespace","el","ref","computedWidth","getLabelWidth","value","width","window","getComputedStyle","firstElementChild","Math","ceil","parseFloat","nextTick","onMounted","updateLabelWidthFn","onBeforeUnmount","updateLabelWidth","onUpdated","watch","useResizeObserver","style","autoLabelWidth","marginWidth","max","parseInt","marginPosition","labelPosition","be"],"mappings":";;;;;;;;;;;;;AAmBA,MAAMA,cAAc,GAAG,aAAvB;AACA,oBAAeC,mBAAe,CAAC;AAC7BC,EAAAA,IAAI,EAAEF,cADuB;AAE7BG,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAEC,OADR;AAELC,IAAAA,SAAS,EAAED;AAFN,GAFsB;;AAO7BE;AAAeC;AAAF;AACX,UAAMC;AACN,yBAAqB;AACrB;AAMA,UAAMC,EAAE,GAAGC,kBAAY,CAAC,MAAD,CAAvB;AAEA,UAAMC,EAAE,GAAGC,OAAG,EAAd;AACA,UAAMC,aAAa,GAAGD,OAAG,CAAC,CAAD,CAAzB;;AAEA,UAAME;AACJ,UAAIH,GAAGI,KAAH;AACF,cAAMC,KAAK,GAAGC,MAAM,CAACC,gBAAP,CAAwBP,EAAE,CAACI,KAAH,CAASI,iBAAjC,EAAoDH,KAAlE;AACA,eAAOI,IAAI,CAACC,IAAL,CAAUC,UAAU,CAACN,KAAD,CAApB,CAAP;AACD,OAHD,MAGO;AACL,eAAO,CAAP;AACD;AACF,KAPD;;AASA;AACEO;AACE,yBAAI,UAAuBpB;AACzB,yBAAe;AACbU;AACD;AACCL;AACD;AACF;AACF;AACF;;AACD;;AAEAgB,IAAAA,oBAAgB;AACdC,MAAAA;AACD,KAFQ,CAAT;AAGAC,IAAAA,oBAAgB;AACdC,2BAAiB,QAAD;AACjB,MAFD;AAGAC,oBAAgBH,kBAAkB;AAElCI;AACE;AACErB;AACD;AACF,MAJD;AAMAsB;AAOA,WAAO,MAAM;AACX,UAAI,MAAJ;AAEA;AAAQ3B,QAAAA;AAAF;;AACN,UAAIA;AACF;AACA,cAAM4B;;AACN,YAAIC,cAAc,IAAIA,cAAc,KAAK,MAAzC,EAAiD;AAC/C,gBAAMC,WAAW,GAAGb,IAAI,CAACc,GAAL,CAClB,CADkB,EAElBC,QAAQ,CAACH,cAAD,EAAiB,EAAjB,CAAR,GAA+BnB,aAAa,CAACE,KAF3B,CAApB;AAIA,gBAAMqB,cAAc,GAClB5B,WAAW,CAAC6B,aAAZ,KAA8B,MAA9B,GAAuC,aAAvC,GAAuD,YADzD;;AAEA;AACEN;AACD;AACF;;AACD;AAAA,iBACYpB,EADZ;AAAA,uBAC2B2B,yBAD3B;AAAA;AAAA;AAKD;AACC;AAAA;AAAA;AACD;AACF;;;;"}

package/lib/components/form/src/form.d.ts

@@ -0,0 +1,25 @@
+import type { ExtractPropTypes } from 'vue';
+import type { FormItemProps } from './form-item';
+import type Form from './form.vue';
+export declare const formProps: {
+    readonly model: ObjectConstructor;
+    readonly rules: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("./types").FormItemRule>>>>, unknown, unknown, unknown, unknown>;
+    readonly labelPosition: StringConstructor;
+    readonly labelWidth: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly labelSuffix: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly inline: BooleanConstructor;
+    readonly inlineMessage: BooleanConstructor;
+    readonly statusIcon: BooleanConstructor;
+    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>;
+    readonly disabled: BooleanConstructor;
+    readonly validateOnRuleChange: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly hideRequiredAsterisk: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly scrollToError: BooleanConstructor;
+};
+export declare type FormProps = ExtractPropTypes<typeof formProps>;
+export declare const formEmits: {
+    validate: (prop: FormItemProps['prop'], isValid: boolean, message: string) => boolean;
+};
+export declare type FormEmits = typeof formEmits;
+export declare type FormInstance = InstanceType<typeof Form>;