@element-plus/nightly 0.0.20220303 → 0.0.20220306

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-item2.mjs","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/es/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/es/components/form/src/form-label-wrap.mjs

@@ -0,0 +1,96 @@
+import { defineComponent, inject, ref, nextTick, onMounted, onBeforeUnmount, onUpdated, watch, computed, createVNode, Fragment } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import '../../../utils/index.mjs';
+import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
+import { formContextKey, formItemContextKey } from '../../../tokens/form.mjs';
+import { throwError } from '../../../utils/error.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+
+const COMPONENT_NAME = "ElLabelWrap";
+var FormLabelWrap = defineComponent({
+  name: COMPONENT_NAME,
+  props: {
+    isAutoWidth: Boolean,
+    updateAll: Boolean
+  },
+  setup(props, {
+    slots
+  }) {
+    const formContext = inject(formContextKey);
+    const formItemContext = inject(formItemContextKey);
+    if (!formContext || !formItemContext)
+      throwError(COMPONENT_NAME, "usage: <el-form><el-form-item><label-wrap /></el-form-item></el-form>");
+    const ns = useNamespace("form");
+    const el = ref();
+    const computedWidth = 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") => {
+      nextTick(() => {
+        if (slots.default && props.isAutoWidth) {
+          if (action === "update") {
+            computedWidth.value = getLabelWidth();
+          } else if (action === "remove") {
+            formContext.deregisterLabelWidth(computedWidth.value);
+          }
+        }
+      });
+    };
+    const updateLabelWidthFn = () => updateLabelWidth("update");
+    onMounted(() => {
+      updateLabelWidthFn();
+    });
+    onBeforeUnmount(() => {
+      updateLabelWidth("remove");
+    });
+    onUpdated(() => updateLabelWidthFn());
+    watch(computedWidth, (val, oldVal) => {
+      if (props.updateAll) {
+        formContext.registerLabelWidth(val, oldVal);
+      }
+    });
+    useResizeObserver(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 createVNode("div", {
+          "ref": el,
+          "class": [ns.be("item", "label-wrap")],
+          "style": style
+        }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      } else {
+        return createVNode(Fragment, {
+          "ref": el
+        }, [(_b = slots.default) == null ? void 0 : _b.call(slots)]);
+      }
+    };
+  }
+});
+
+export { FormLabelWrap as default };
+//# sourceMappingURL=form-label-wrap.mjs.map

package/es/components/form/src/form-label-wrap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-label-wrap.mjs","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,eAAe,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,YAAY,CAAC,MAAD,CAAvB;AAEA,UAAMC,EAAE,GAAGC,GAAG,EAAd;AACA,UAAMC,aAAa,GAAGD,GAAG,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,gBAAgB;AACdC,MAAAA;AACD,KAFQ,CAAT;AAGAC,IAAAA,gBAAgB;AACdC,uBAAiB,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/es/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>;

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

@@ -1,214 +1,49 @@
-import { ref, computed, defineComponent, watch, reactive, toRefs, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
-import '../../../tokens/index.mjs';
+import '../../../constants/index.mjs';
 import '../../../utils/index.mjs';
-import '../../../hooks/index.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { debugWarn } from '../../../utils/error.mjs';
-import { useSize } from '../../../hooks/use-common-props/index.mjs';
-import { elFormKey } from '../../../tokens/form.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props.mjs';
+import { componentSizes } from '../../../constants/size.mjs';
+import { isArray, isString } from '@vue/shared';
+import { isBoolean } from '@vueuse/core';
 
-function useFormLabelWidth() {
-  const potentialLabelWidthArr = ref([]);
-  const autoLabelWidth = computed(() => {
-    if (!potentialLabelWidthArr.value.length)
-      return "0";
-    const max = Math.max(...potentialLabelWidthArr.value);
-    return max ? `${max}px` : "";
-  });
-  function getLabelWidthIndex(width) {
-    const index = potentialLabelWidthArr.value.indexOf(width);
-    if (index === -1) {
-      debugWarn("Form", `unexpected width ${width}`);
-    }
-    return index;
-  }
-  function registerLabelWidth(val, oldVal) {
-    if (val && oldVal) {
-      const index = getLabelWidthIndex(oldVal);
-      potentialLabelWidthArr.value.splice(index, 1, val);
-    } else if (val) {
-      potentialLabelWidthArr.value.push(val);
-    }
-  }
-  function deregisterLabelWidth(val) {
-    const index = getLabelWidthIndex(val);
-    index > -1 && potentialLabelWidthArr.value.splice(index, 1);
-  }
-  return {
-    autoLabelWidth,
-    registerLabelWidth,
-    deregisterLabelWidth
-  };
-}
-const _sfc_main = defineComponent({
-  name: "ElForm",
-  props: {
-    model: Object,
-    rules: Object,
-    labelPosition: String,
-    labelWidth: {
-      type: [String, Number],
-      default: ""
-    },
-    labelSuffix: {
-      type: String,
-      default: ""
-    },
-    inline: Boolean,
-    inlineMessage: Boolean,
-    statusIcon: Boolean,
-    showMessage: {
-      type: Boolean,
-      default: true
-    },
-    size: String,
-    disabled: Boolean,
-    validateOnRuleChange: {
-      type: Boolean,
-      default: true
-    },
-    hideRequiredAsterisk: {
-      type: Boolean,
-      default: false
-    },
-    scrollToError: Boolean
+const formProps = buildProps({
+  model: Object,
+  rules: {
+    type: definePropType(Object)
   },
-  emits: ["validate"],
-  setup(props, { emit }) {
-    const fields = [];
-    watch(() => props.rules, () => {
-      fields.forEach((field) => {
-        field.evaluateValidationEnabled();
-      });
-      if (props.validateOnRuleChange) {
-        validate(() => ({}));
-      }
-    });
-    const formSize = useSize();
-    const prefix = "el-form";
-    const formKls = computed(() => {
-      const { labelPosition, inline } = props;
-      return [
-        prefix,
-        `${prefix}--${formSize.value}`,
-        labelPosition ? `${prefix}--label-${labelPosition}` : "",
-        inline ? `${prefix}--inline` : ""
-      ];
-    });
-    const addField = (field) => {
-      if (field) {
-        fields.push(field);
-      }
-    };
-    const removeField = (field) => {
-      if (field.prop) {
-        fields.splice(fields.indexOf(field), 1);
-      }
-    };
-    const resetFields = () => {
-      if (!props.model) {
-        debugWarn("Form", "model is required for resetFields to work.");
-        return;
-      }
-      fields.forEach((field) => {
-        field.resetField();
-      });
-    };
-    const clearValidate = (props2 = []) => {
-      const fds = props2.length ? typeof props2 === "string" ? fields.filter((field) => props2 === field.prop) : fields.filter((field) => props2.indexOf(field.prop) > -1) : fields;
-      fds.forEach((field) => {
-        field.clearValidate();
-      });
-    };
-    const validate = (callback) => {
-      if (!props.model) {
-        debugWarn("Form", "model is required for validate to work!");
-        return;
-      }
-      let promise;
-      if (typeof callback !== "function") {
-        promise = new Promise((resolve, reject) => {
-          callback = function(valid2, invalidFields2) {
-            if (valid2) {
-              resolve(true);
-            } else {
-              reject(invalidFields2);
-            }
-          };
-        });
-      }
-      if (fields.length === 0) {
-        callback(true);
-      }
-      let valid = true;
-      let count = 0;
-      let invalidFields = {};
-      let firstInvalidFields;
-      for (const field of fields) {
-        field.validate("", (message, field2) => {
-          if (message) {
-            valid = false;
-            firstInvalidFields || (firstInvalidFields = field2);
-          }
-          invalidFields = { ...invalidFields, ...field2 };
-          if (++count === fields.length) {
-            callback(valid, invalidFields);
-          }
-        });
-      }
-      if (!valid && props.scrollToError) {
-        scrollToField(Object.keys(firstInvalidFields)[0]);
-      }
-      return promise;
-    };
-    const validateField = (props2, cb) => {
-      props2 = [].concat(props2);
-      const fds = fields.filter((field) => props2.indexOf(field.prop) !== -1);
-      if (!fields.length) {
-        debugWarn("Form", "please pass correct props!");
-        return;
-      }
-      fds.forEach((field) => {
-        field.validate("", cb);
-      });
-    };
-    const scrollToField = (prop) => {
-      fields.forEach((item) => {
-        var _a, _b;
-        if (item.prop === prop) {
-          (_b = (_a = item.$el).scrollIntoView) == null ? void 0 : _b.call(_a);
-        }
-      });
-    };
-    const elForm = reactive({
-      ...toRefs(props),
-      resetFields,
-      clearValidate,
-      validateField,
-      emit,
-      addField,
-      removeField,
-      ...useFormLabelWidth()
-    });
-    provide(elFormKey, elForm);
-    return {
-      formKls,
-      validate,
-      resetFields,
-      clearValidate,
-      validateField,
-      scrollToField
-    };
-  }
+  labelPosition: String,
+  labelWidth: {
+    type: [String, Number],
+    default: ""
+  },
+  labelSuffix: {
+    type: String,
+    default: ""
+  },
+  inline: Boolean,
+  inlineMessage: Boolean,
+  statusIcon: Boolean,
+  showMessage: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: String,
+    values: componentSizes
+  },
+  disabled: Boolean,
+  validateOnRuleChange: {
+    type: Boolean,
+    default: true
+  },
+  hideRequiredAsterisk: {
+    type: Boolean,
+    default: false
+  },
+  scrollToError: Boolean
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("form", {
-    class: normalizeClass(_ctx.formKls)
-  }, [
-    renderSlot(_ctx.$slots, "default")
-  ], 2);
-}
-var Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const formEmits = {
+  validate: (prop, isValid, message) => (isArray(prop) || isString(prop)) && isBoolean(isValid) && isString(message)
+};
 
-export { Form as default };
+export { formEmits, formProps };
 //# sourceMappingURL=form.mjs.map