@element-plus/nightly 0.0.20220208 → 0.0.20220209

package/lib/components/dropdown/src/dropdown2.js

@@ -9,7 +9,7 @@ var index$1 = require('../../scrollbar/index.js');
 var index$3 = require('../../icon/index.js');
 require('../../focus-trap/index.js');
 require('../../roving-focus-group/index.js');
-var util = require('../../../utils/util.js');
+require('../../../utils-v2/index.js');
 var iconsVue = require('@element-plus/icons-vue');
 require('../../../hooks/index.js');
 var dropdown = require('./dropdown.js');
@@ -17,6 +17,7 @@ var tokens = require('./tokens.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 var focusTrap = require('../../focus-trap/src/focus-trap.js');
 var rovingFocusGroup = require('../../roving-focus-group/src/roving-focus-group2.js');
+var style = require('../../../utils-v2/vue/style.js');
 var index$4 = require('../../../hooks/use-common-props/index.js');
 
 const { ButtonGroup: ElButtonGroup } = index.ElButton;
@@ -45,7 +46,7 @@ const _sfc_main = vue.defineComponent({
     const currentTabId = vue.ref(null);
     const isUsingKeyboard = vue.ref(false);
     const wrapStyle = vue.computed(() => ({
-      maxHeight: util.addUnit(props.maxHeight)
+      maxHeight: style.addUnit(props.maxHeight)
     }));
     const dropdownTriggerKls = vue.computed(() => [
       [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ""]

package/lib/components/dropdown/src/dropdown2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown2.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top']\"\n      :popper-options=\"popperOptions\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      persistent\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      handleClose()\n    }\n\n    function handleClose() {\n      popperRef.value?.onClose()\n    }\n\n    function handleOpen() {\n      popperRef.value?.onOpen()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      handleClose,\n      handleOpen,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["ElButton","defineComponent","ElFocusTrap","ElScrollbar","ElDropdownCollection","ElTooltip","ElRovingFocusGroup","ElIcon","ArrowDown","dropdownProps","getCurrentInstance","ref","computed","addUnit","useSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmGA,MAAM,EAAE,aAAa,kBAAkBA;AAEvC,MAAK,YAAaC,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVD;AAAA,iBACAE;AAAA,IACA;AAAA,iBACAC;AAAA,0BACAC;AAAA,eACAC;AAAA,wBACAC;AAAA,YACAC;AAAA,eACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAO,CAAC,kBAAkB,SAAS;AAAA,EACnC,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,YAAYC;AAElB,UAAM,uBAAuBC;AAC7B,UAAM,sBAAsBA;AAC5B,UAAM,YAAYA,QAA2C;AAC7D,UAAM,aAAaA,QAAwB;AAC3C,UAAM,YAAYA,QAAI;AACtB,UAAM,eAAeA,QAAmB;AACxC,UAAM,kBAAkBA,QAAI;AAE5B,UAAM,YAAYC,aAAwB;AAAO,MAC/C,WAAWC,aAAQ,MAAM;AAAA;AAE3B,UAAM,qBAAqBD,aAAS,MAAM;AAAA,MACxC,CAAC,aAAa,QAAQ,gBAAgB,aAAa,UAAU;AAAA;AAG/D,2BAAuB;AACrB;AAAA;AAGF,2BAAuB;AACrB;AAAiB;AAGnB;AACE,uBAAiB;AAAA;AAGnB;AAEA;AACE,sBAAgB,GAAGE;AAAA;AAGrB;AAAuB;AAIvB,2BAAuB;AACrB;AAEA;AACA;AAAqB;AAGvB;AACE;AAAqB;AAGvB,8BAA0B;AACxB;AACE;AACA,UAAE;AAAA;AAAA;AAIN;AAAgC;AAC9B;AACA,MACA;AAAA,MACA;AAAA;AAGF;AAAsB,MACpB;AAAU;AACV,MACA;AAAA,MACA;AAAA,MACA;AAAsB,MACtB;AAA0B;AAG5B;AACE;AACA,wBAAkB;AAAQ;AACT;AAAA;AAInB;AACE;AAAc;AAGhB;AAAO,MACL;AAAA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;;;AAnKW;AAjDI;AACd;AACA;AACgB;AACE,MAClB;AAAY,MACZ,mBAAiB;AAAA,MACjB;AAAW,MACX,gBAAY;AAAA,MACZ;AAAmB,MACnB;AAAgB,MAChB;AAAY,MACZ;AAAA,MACA;AAAa,MACb;AAAkB,MACnB;AAAc,MACd,kBAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACC;AAAI,MACJ;AAAW;;AAEM;AAoBD,qBAlBT;AAAW;AACd;AACO;AACR;;4BAcgB;AAAA;AAZM;AAAE;;;AAWE;AATX;AACV;AACW;AACX;AACa;;;AAIW;AADM;AAAA;;;;;;;;;;;;;;;;;;;AAOrC;AAAa;;AACX;;;;;AAIqB;AASX;AAAA;AANe,eACpB;AAAA;AACE;AACC;;;AAEe;;;;AASb;AANgB;AACrB,UACJ;AAAM,qBACD;AAAA;;;AAEqD;AAAV;AAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dropdown2.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top']\"\n      :popper-options=\"popperOptions\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      persistent\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils-v2'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      handleClose()\n    }\n\n    function handleClose() {\n      popperRef.value?.onClose()\n    }\n\n    function handleOpen() {\n      popperRef.value?.onOpen()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      handleClose,\n      handleOpen,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["ElButton","defineComponent","ElFocusTrap","ElScrollbar","ElDropdownCollection","ElTooltip","ElRovingFocusGroup","ElIcon","ArrowDown","dropdownProps","getCurrentInstance","ref","computed","addUnit","useSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmGA,MAAM,EAAE,aAAa,kBAAkBA;AAEvC,MAAK,YAAaC,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVD;AAAA,iBACAE;AAAA,IACA;AAAA,iBACAC;AAAA,0BACAC;AAAA,eACAC;AAAA,wBACAC;AAAA,YACAC;AAAA,eACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAO,CAAC,kBAAkB,SAAS;AAAA,EACnC,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,YAAYC;AAElB,UAAM,uBAAuBC;AAC7B,UAAM,sBAAsBA;AAC5B,UAAM,YAAYA,QAA2C;AAC7D,UAAM,aAAaA,QAAwB;AAC3C,UAAM,YAAYA,QAAI;AACtB,UAAM,eAAeA,QAAmB;AACxC,UAAM,kBAAkBA,QAAI;AAE5B,UAAM,YAAYC,aAAwB;AAAO,MAC/C,WAAWC,cAAQ,MAAM;AAAA;AAE3B,UAAM,qBAAqBD,aAAS,MAAM;AAAA,MACxC,CAAC,aAAa,QAAQ,gBAAgB,aAAa,UAAU;AAAA;AAG/D,2BAAuB;AACrB;AAAA;AAGF,2BAAuB;AACrB;AAAiB;AAGnB;AACE,uBAAiB;AAAA;AAGnB;AAEA;AACE,sBAAgB,GAAGE;AAAA;AAGrB;AAAuB;AAIvB,2BAAuB;AACrB;AAEA;AACA;AAAqB;AAGvB;AACE;AAAqB;AAGvB,8BAA0B;AACxB;AACE;AACA,UAAE;AAAA;AAAA;AAIN;AAAgC;AAC9B;AACA,MACA;AAAA,MACA;AAAA;AAGF;AAAsB,MACpB;AAAU;AACV,MACA;AAAA,MACA;AAAA,MACA;AAAsB,MACtB;AAA0B;AAG5B;AACE;AACA,wBAAkB;AAAQ;AACT;AAAA;AAInB;AACE;AAAc;AAGhB;AAAO,MACL;AAAA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;;;AAnKW;AAjDI;AACd;AACA;AACgB;AACE,MAClB;AAAY,MACZ,mBAAiB;AAAA,MACjB;AAAW,MACX,gBAAY;AAAA,MACZ;AAAmB,MACnB;AAAgB,MAChB;AAAY,MACZ;AAAA,MACA;AAAa,MACb;AAAkB,MACnB;AAAc,MACd,kBAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACC;AAAI,MACJ;AAAW;;AAEM;AAoBD,qBAlBT;AAAW;AACd;AACO;AACR;;4BAcgB;AAAA;AAZM;AAAE;;;AAWE;AATX;AACV;AACW;AACX;AACa;;;AAIW;AADM;AAAA;;;;;;;;;;;;;;;;;;;AAOrC;AAAa;;AACX;;;;;AAIqB;AASX;AAAA;AANe,eACpB;AAAA;AACE;AACC;;;AAEe;;;;AASb;AANgB;AACrB,UACJ;AAAM,qBACD;AAAA;;;AAEqD;AAAV;AAAA;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/dropdown/src/useDropdown.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var util = require('../../../utils/util.js');
+require('../../../utils-v2/index.js');
 var aria = require('../../../utils/aria.js');
 var dom = require('../../../utils/dom.js');
+var rand = require('../../../utils-v2/rand.js');
 
 const useDropdown = () => {
   const elDropdown = vue.inject("elDropdown", {});
@@ -19,7 +20,7 @@ const initDropdownDomEvent = (dropdownChildren, triggerElm, _instance) => {
   const menuItems = vue.ref(null);
   const menuItemsArray = vue.ref(null);
   const dropdownElm = vue.ref(null);
-  const listId = vue.ref(`dropdown-menu-${util.generateId()}`);
+  const listId = vue.ref(`dropdown-menu-${rand.generateId()}`);
   dropdownElm.value = dropdownChildren == null ? void 0 : dropdownChildren.subTree.el;
   function removeTabindex() {
     var _a;

package/lib/components/dropdown/src/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdown.js","sources":["../../../../../../packages/components/dropdown/src/useDropdown.ts"],"sourcesContent":["import { inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils/util'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { on, addClass } from '@element-plus/utils/dom'\n\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { IElDropdownInstance } from './dropdown'\n\nexport const useDropdown = () => {\n  const elDropdown = inject<IElDropdownInstance>('elDropdown', {})\n  const _elDropdownSize = computed(() => elDropdown?.dropdownSize)\n\n  return {\n    elDropdown,\n    _elDropdownSize,\n  }\n}\n\nexport const initDropdownDomEvent = (\n  dropdownChildren,\n  triggerElm,\n  _instance\n) => {\n  const menuItems = ref<Nullable<HTMLButtonElement[]>>(null)\n  const menuItemsArray = ref<Nullable<HTMLElement[]>>(null)\n  const dropdownElm = ref<Nullable<HTMLElement>>(null)\n  const listId = ref(`dropdown-menu-${generateId()}`)\n  dropdownElm.value = dropdownChildren?.subTree.el\n\n  function removeTabindex() {\n    triggerElm.setAttribute('tabindex', '-1')\n    menuItemsArray.value?.forEach((item) => {\n      item.setAttribute('tabindex', '-1')\n    })\n  }\n\n  function resetTabindex(ele) {\n    removeTabindex()\n    ele?.setAttribute('tabindex', '0')\n  }\n\n  function handleTriggerKeyDown(ev: KeyboardEvent) {\n    const code = ev.code\n    if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {\n      removeTabindex()\n      resetTabindex(menuItems.value[0])\n      menuItems.value[0].focus()\n      ev.preventDefault()\n      ev.stopPropagation()\n    } else if (code === EVENT_CODE.enter) {\n      _instance.handleClick()\n    } else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {\n      _instance.hide()\n    }\n  }\n\n  function handleItemKeyDown(ev) {\n    const code = ev.code\n    const target = ev.target\n    const currentIndex = menuItemsArray.value.indexOf(target)\n    const max = menuItemsArray.value.length - 1\n    let nextIndex\n    if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {\n      if (code === EVENT_CODE.up) {\n        nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0\n      } else {\n        nextIndex = currentIndex < max ? currentIndex + 1 : max\n      }\n      removeTabindex()\n      resetTabindex(menuItems.value[nextIndex])\n      menuItems.value[nextIndex].focus()\n      ev.preventDefault()\n      ev.stopPropagation()\n    } else if (code === EVENT_CODE.enter) {\n      triggerElmFocus()\n      target.click()\n      if (_instance.props.hideOnClick) {\n        _instance.hide()\n      }\n    } else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {\n      _instance.hide()\n      triggerElmFocus()\n    }\n  }\n\n  function initAria() {\n    dropdownElm.value.setAttribute('id', listId.value)\n    triggerElm.setAttribute('aria-haspopup', 'list')\n    triggerElm.setAttribute('aria-controls', listId.value)\n    if (!_instance.props.splitButton) {\n      triggerElm.setAttribute('role', 'button')\n      triggerElm.setAttribute('tabindex', _instance.props.tabindex)\n      addClass(triggerElm, 'el-dropdown-selfdefine')\n    }\n  }\n\n  function initEvent() {\n    on(triggerElm, 'keydown', handleTriggerKeyDown)\n    on(dropdownElm.value, 'keydown', handleItemKeyDown, true)\n  }\n\n  function initDomOperation() {\n    menuItems.value = dropdownElm.value.querySelectorAll(\n      \"[tabindex='-1']\"\n    ) as unknown as HTMLButtonElement[]\n    menuItemsArray.value = [].slice.call(menuItems.value)\n\n    initEvent()\n    initAria()\n  }\n\n  function triggerElmFocus() {\n    triggerElm.focus()\n  }\n\n  initDomOperation()\n}\n"],"names":["inject","computed","ref","generateId","EVENT_CODE","addClass","on"],"mappings":"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"}
+{"version":3,"file":"useDropdown.js","sources":["../../../../../../packages/components/dropdown/src/useDropdown.ts"],"sourcesContent":["import { inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils-v2'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { on, addClass } from '@element-plus/utils/dom'\n\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { IElDropdownInstance } from './dropdown'\n\nexport const useDropdown = () => {\n  const elDropdown = inject<IElDropdownInstance>('elDropdown', {})\n  const _elDropdownSize = computed(() => elDropdown?.dropdownSize)\n\n  return {\n    elDropdown,\n    _elDropdownSize,\n  }\n}\n\nexport const initDropdownDomEvent = (\n  dropdownChildren,\n  triggerElm,\n  _instance\n) => {\n  const menuItems = ref<Nullable<HTMLButtonElement[]>>(null)\n  const menuItemsArray = ref<Nullable<HTMLElement[]>>(null)\n  const dropdownElm = ref<Nullable<HTMLElement>>(null)\n  const listId = ref(`dropdown-menu-${generateId()}`)\n  dropdownElm.value = dropdownChildren?.subTree.el\n\n  function removeTabindex() {\n    triggerElm.setAttribute('tabindex', '-1')\n    menuItemsArray.value?.forEach((item) => {\n      item.setAttribute('tabindex', '-1')\n    })\n  }\n\n  function resetTabindex(ele) {\n    removeTabindex()\n    ele?.setAttribute('tabindex', '0')\n  }\n\n  function handleTriggerKeyDown(ev: KeyboardEvent) {\n    const code = ev.code\n    if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {\n      removeTabindex()\n      resetTabindex(menuItems.value[0])\n      menuItems.value[0].focus()\n      ev.preventDefault()\n      ev.stopPropagation()\n    } else if (code === EVENT_CODE.enter) {\n      _instance.handleClick()\n    } else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {\n      _instance.hide()\n    }\n  }\n\n  function handleItemKeyDown(ev) {\n    const code = ev.code\n    const target = ev.target\n    const currentIndex = menuItemsArray.value.indexOf(target)\n    const max = menuItemsArray.value.length - 1\n    let nextIndex\n    if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {\n      if (code === EVENT_CODE.up) {\n        nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0\n      } else {\n        nextIndex = currentIndex < max ? currentIndex + 1 : max\n      }\n      removeTabindex()\n      resetTabindex(menuItems.value[nextIndex])\n      menuItems.value[nextIndex].focus()\n      ev.preventDefault()\n      ev.stopPropagation()\n    } else if (code === EVENT_CODE.enter) {\n      triggerElmFocus()\n      target.click()\n      if (_instance.props.hideOnClick) {\n        _instance.hide()\n      }\n    } else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {\n      _instance.hide()\n      triggerElmFocus()\n    }\n  }\n\n  function initAria() {\n    dropdownElm.value.setAttribute('id', listId.value)\n    triggerElm.setAttribute('aria-haspopup', 'list')\n    triggerElm.setAttribute('aria-controls', listId.value)\n    if (!_instance.props.splitButton) {\n      triggerElm.setAttribute('role', 'button')\n      triggerElm.setAttribute('tabindex', _instance.props.tabindex)\n      addClass(triggerElm, 'el-dropdown-selfdefine')\n    }\n  }\n\n  function initEvent() {\n    on(triggerElm, 'keydown', handleTriggerKeyDown)\n    on(dropdownElm.value, 'keydown', handleItemKeyDown, true)\n  }\n\n  function initDomOperation() {\n    menuItems.value = dropdownElm.value.querySelectorAll(\n      \"[tabindex='-1']\"\n    ) as unknown as HTMLButtonElement[]\n    menuItemsArray.value = [].slice.call(menuItems.value)\n\n    initEvent()\n    initAria()\n  }\n\n  function triggerElmFocus() {\n    triggerElm.focus()\n  }\n\n  initDomOperation()\n}\n"],"names":["inject","computed","ref","generateId","EVENT_CODE","addClass","on"],"mappings":"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"}

package/lib/components/empty/index.d.ts

@@ -1,4 +1,4 @@
-export declare const ElEmpty: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+export declare const ElEmpty: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{
     readonly image: {
         readonly type: StringConstructor;
         readonly default: "";

package/lib/components/empty/index.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var withInstall = require('../../utils/with-install.js');
+require('../../utils-v2/index.js');
 var empty$1 = require('./src/empty2.js');
 var empty = require('./src/empty.js');
+var install = require('../../utils-v2/vue/install.js');
 
-const ElEmpty = withInstall.withInstall(empty$1["default"]);
+const ElEmpty = install.withInstall(empty$1["default"]);
 
 exports.emptyProps = empty.emptyProps;
 exports.ElEmpty = ElEmpty;

package/lib/components/empty/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/empty/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Empty from './src/empty.vue'\n\nexport const ElEmpty = withInstall(Empty)\nexport default ElEmpty\n\nexport * from './src/empty'\n"],"names":["withInstall","Empty"],"mappings":";;;;;;;;AAEY,MAAC,OAAO,GAAGA,uBAAW,CAACC,kBAAK;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/empty/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils-v2'\n\nimport Empty from './src/empty.vue'\n\nexport const ElEmpty = withInstall(Empty)\nexport default ElEmpty\n\nexport * from './src/empty'\n"],"names":["withInstall","Empty"],"mappings":";;;;;;;;;AAEY,MAAC,OAAO,GAAGA,mBAAW,CAACC,kBAAK;;;;;;"}

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

@@ -1,4 +1,4 @@
-export declare const ElForm: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+export declare const ElForm: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{
     model: ObjectConstructor;
     rules: import("vue").PropType<Partial<Record<string, import("./src/form.type").FormItemRule | import("./src/form.type").FormItemRule[]>>>;
     labelPosition: StringConstructor;
@@ -17,7 +17,7 @@ export declare const ElForm: import("../../utils/types").SFCWithInstall<import("
         type: BooleanConstructor;
         default: boolean;
     };
-    size: import("vue").PropType<import("../../utils/types").ComponentSize>;
+    size: import("vue").PropType<"default" | "small" | "large">;
     disabled: BooleanConstructor;
     validateOnRuleChange: {
         type: BooleanConstructor;
@@ -54,7 +54,7 @@ export declare const ElForm: import("../../utils/types").SFCWithInstall<import("
         type: BooleanConstructor;
         default: boolean;
     };
-    size: import("vue").PropType<import("../../utils/types").ComponentSize>;
+    size: import("vue").PropType<"default" | "small" | "large">;
     disabled: BooleanConstructor;
     validateOnRuleChange: {
         type: BooleanConstructor;
@@ -103,8 +103,8 @@ export declare const ElForm: import("../../utils/types").SFCWithInstall<import("
             default: boolean;
         };
         size: {
-            type: import("vue").PropType<import("../../utils/types").ComponentSize>;
-            validator: (val: string) => boolean;
+            type: import("vue").PropType<"default" | "small" | "large">;
+            validator: (val: string) => val is "" | "default" | "small" | "large";
         };
     }, {
         formItemRef: import("vue").Ref<HTMLDivElement | undefined>;
@@ -149,8 +149,8 @@ export declare const ElForm: import("../../utils/types").SFCWithInstall<import("
             default: boolean;
         };
         size: {
-            type: import("vue").PropType<import("../../utils/types").ComponentSize>;
-            validator: (val: string) => boolean;
+            type: import("vue").PropType<"default" | "small" | "large">;
+            validator: (val: string) => val is "" | "default" | "small" | "large";
         };
     }>>, {
         required: boolean;
@@ -160,7 +160,7 @@ export declare const ElForm: import("../../utils/types").SFCWithInstall<import("
     }>;
 };
 export default ElForm;
-export declare const ElFormItem: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+export declare const ElFormItem: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{
     label: StringConstructor;
     labelWidth: {
         type: (StringConstructor | NumberConstructor)[];
@@ -184,8 +184,8 @@ export declare const ElFormItem: import("../../utils/types").SFCWithInstall<impo
         default: boolean;
     };
     size: {
-        type: import("vue").PropType<import("../../utils/types").ComponentSize>;
-        validator: (val: string) => boolean;
+        type: import("vue").PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
 }, {
     formItemRef: import("vue").Ref<HTMLDivElement | undefined>;
@@ -230,8 +230,8 @@ export declare const ElFormItem: import("../../utils/types").SFCWithInstall<impo
         default: boolean;
     };
     size: {
-        type: import("vue").PropType<import("../../utils/types").ComponentSize>;
-        validator: (val: string) => boolean;
+        type: import("vue").PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
 }>>, {
     required: boolean;

package/lib/components/form/index.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var withInstall = require('../../utils/with-install.js');
+require('../../utils-v2/index.js');
 var form = require('./src/form.js');
 var formItem = require('./src/form-item.js');
+var install = require('../../utils-v2/vue/install.js');
 
-const ElForm = withInstall.withInstall(form["default"], {
+const ElForm = install.withInstall(form["default"], {
   FormItem: formItem["default"]
 });
-const ElFormItem = withInstall.withNoopInstall(formItem["default"]);
+const ElFormItem = install.withNoopInstall(formItem["default"]);
 
 exports.ElForm = ElForm;
 exports.ElFormItem = ElFormItem;

package/lib/components/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/form/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\nimport Form from './src/form.vue'\nimport FormItem from './src/form-item.vue'\n\nexport const ElForm = withInstall(Form, {\n  FormItem,\n})\n\nexport default ElForm\n\nexport const ElFormItem = withNoopInstall(FormItem)\n"],"names":["withInstall","Form","FormItem","withNoopInstall"],"mappings":";;;;;;;;AAGY,MAAC,MAAM,GAAGA,uBAAW,CAACC,eAAI,EAAE;AACxC,YAAEC,mBAAQ;AACV,CAAC,EAAE;AAES,MAAC,UAAU,GAAGC,2BAAe,CAACD,mBAAQ;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/form/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils-v2'\nimport Form from './src/form.vue'\nimport FormItem from './src/form-item.vue'\n\nexport const ElForm = withInstall(Form, {\n  FormItem,\n})\n\nexport default ElForm\n\nexport const ElFormItem = withNoopInstall(FormItem)\n"],"names":["withInstall","Form","FormItem","withNoopInstall"],"mappings":";;;;;;;;;AAGY,MAAC,MAAM,GAAGA,mBAAW,CAACC,eAAI,EAAE;AACxC,YAAEC,mBAAQ;AACV,CAAC,EAAE;AAES,MAAC,UAAU,GAAGC,uBAAe,CAACD,mBAAQ;;;;;;"}

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

@@ -5,13 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var shared = require('@vue/shared');
 var AsyncValidator = require('async-validator');
+require('../../../utils-v2/index.js');
 var util = require('../../../utils/util.js');
-var validators = require('../../../utils/validators.js');
 require('../../../tokens/index.js');
 require('../../../hooks/index.js');
 var labelWrap = require('./label-wrap.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var validator = require('../../../utils-v2/vue/validator.js');
 var form = require('../../../tokens/form.js');
+var style = require('../../../utils-v2/vue/style.js');
 var index = require('../../../hooks/use-common-props/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -49,7 +51,7 @@ const _sfc_main = vue.defineComponent({
     },
     size: {
       type: String,
-      validator: validators.isValidComponentSize
+      validator: validator.isValidComponentSize
     }
   },
   setup(props, { slots }) {
@@ -85,7 +87,7 @@ const _sfc_main = vue.defineComponent({
       const ret = {};
       if (elForm.labelPosition === "top")
         return ret;
-      const labelWidth = util.addUnit(props.labelWidth || elForm.labelWidth);
+      const labelWidth = style.addUnit(props.labelWidth || elForm.labelWidth);
       if (labelWidth) {
         ret.width = labelWidth;
       }
@@ -99,7 +101,7 @@ const _sfc_main = vue.defineComponent({
       if (!props.label && !props.labelWidth && isNested.value) {
         return ret;
       }
-      const labelWidth = util.addUnit(props.labelWidth || elForm.labelWidth);
+      const labelWidth = style.addUnit(props.labelWidth || elForm.labelWidth);
       if (!props.label && !slots.label) {
         ret.marginLeft = labelWidth;
       }

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

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

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

@@ -1,5 +1,4 @@
 import type { PropType, CSSProperties } from 'vue';
-import type { ComponentSize } from 'element-plus/es/utils/types';
 import type { ElFormContext } from 'element-plus/es/tokens';
 import type { FormItemRule } from './form.type';
 declare const _default: import("vue").DefineComponent<{
@@ -26,8 +25,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<ComponentSize>;
-        validator: (val: string) => boolean;
+        type: PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
 }, {
     formItemRef: import("vue").Ref<HTMLDivElement | undefined>;
@@ -72,8 +71,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<ComponentSize>;
-        validator: (val: string) => boolean;
+        type: PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
 }>>, {
     required: boolean;

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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 require('../../../tokens/index.js');
-var error = require('../../../utils/error.js');
+require('../../../utils-v2/index.js');
 require('../../../hooks/index.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var error = require('../../../utils-v2/error.js');
 var index = require('../../../hooks/use-common-props/index.js');
 var form = require('../../../tokens/form.js');
 

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <form :class=\"formKls\">\n    <slot></slot>\n  </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport { elFormKey } from '@element-plus/tokens'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { useSize } from '@element-plus/hooks'\nimport type { ValidateFieldsError } from 'async-validator'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { FormRulesMap } from './form.type'\nimport type {\n  ElFormItemContext as FormItemCtx,\n  ValidateFieldCallback,\n} from '@element-plus/tokens'\n\nfunction useFormLabelWidth() {\n  const potentialLabelWidthArr = ref([])\n  const autoLabelWidth = computed(() => {\n    if (!potentialLabelWidthArr.value.length) return '0'\n    const max = Math.max(...potentialLabelWidthArr.value)\n    return max ? `${max}px` : ''\n  })\n\n  function getLabelWidthIndex(width: number) {\n    const index = potentialLabelWidthArr.value.indexOf(width)\n    if (index === -1) {\n      debugWarn('Form', `unexpected width ${width}`)\n    }\n    return index\n  }\n\n  function registerLabelWidth(val: number, oldVal: number) {\n    if (val && oldVal) {\n      const index = getLabelWidthIndex(oldVal)\n      potentialLabelWidthArr.value.splice(index, 1, val)\n    } else if (val) {\n      potentialLabelWidthArr.value.push(val)\n    }\n  }\n\n  function deregisterLabelWidth(val: number) {\n    const index = getLabelWidthIndex(val)\n    index > -1 && potentialLabelWidthArr.value.splice(index, 1)\n  }\n\n  return {\n    autoLabelWidth,\n    registerLabelWidth,\n    deregisterLabelWidth,\n  }\n}\n\nexport interface Callback {\n  (isValid?: boolean, invalidFields?: ValidateFieldsError): void\n}\n\nexport default defineComponent({\n  name: 'ElForm',\n  props: {\n    model: Object,\n    rules: Object as PropType<FormRulesMap>,\n    labelPosition: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    labelSuffix: {\n      type: String,\n      default: '',\n    },\n    inline: Boolean,\n    inlineMessage: Boolean,\n    statusIcon: Boolean,\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: String as PropType<ComponentSize>,\n    disabled: Boolean,\n    validateOnRuleChange: {\n      type: Boolean,\n      default: true,\n    },\n    hideRequiredAsterisk: {\n      type: Boolean,\n      default: false,\n    },\n    scrollToError: Boolean,\n  },\n  emits: ['validate'],\n  setup(props, { emit }) {\n    const fields: FormItemCtx[] = []\n\n    watch(\n      () => props.rules,\n      () => {\n        fields.forEach((field) => {\n          field.evaluateValidationEnabled()\n        })\n\n        if (props.validateOnRuleChange) {\n          validate(() => ({}))\n        }\n      }\n    )\n\n    const formSize = useSize()\n    const prefix = 'el-form'\n    const formKls = computed(() => {\n      const { labelPosition, inline } = props\n      return [\n        prefix,\n        `${prefix}--${formSize.value}`,\n        labelPosition ? `${prefix}--label-${labelPosition}` : '',\n        inline ? `${prefix}--inline` : '',\n      ]\n    })\n\n    const addField = (field: FormItemCtx) => {\n      if (field) {\n        fields.push(field)\n      }\n    }\n\n    const removeField = (field: FormItemCtx) => {\n      if (field.prop) {\n        fields.splice(fields.indexOf(field), 1)\n      }\n    }\n\n    const resetFields = () => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for resetFields to work.')\n        return\n      }\n      fields.forEach((field) => {\n        field.resetField()\n      })\n    }\n\n    const clearValidate = (props: string | string[] = []) => {\n      const fds = props.length\n        ? typeof props === 'string'\n          ? fields.filter((field) => props === field.prop)\n          : fields.filter((field) => props.indexOf(field.prop) > -1)\n        : fields\n      fds.forEach((field) => {\n        field.clearValidate()\n      })\n    }\n\n    const validate = (callback?: Callback) => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for validate to work!')\n        return\n      }\n\n      let promise: Promise<boolean> | undefined\n      // if no callback, return promise\n      if (typeof callback !== 'function') {\n        promise = new Promise((resolve, reject) => {\n          callback = function (valid, invalidFields) {\n            if (valid) {\n              resolve(true)\n            } else {\n              reject(invalidFields)\n            }\n          }\n        })\n      }\n\n      if (fields.length === 0) {\n        callback(true)\n      }\n      let valid = true\n      let count = 0\n      let invalidFields = {}\n      let firstInvalidFields\n      for (const field of fields) {\n        field.validate('', (message, field) => {\n          if (message) {\n            valid = false\n            firstInvalidFields || (firstInvalidFields = field)\n          }\n          invalidFields = { ...invalidFields, ...field }\n          if (++count === fields.length) {\n            callback(valid, invalidFields)\n          }\n        })\n      }\n      if (!valid && props.scrollToError) {\n        scrollToField(Object.keys(firstInvalidFields)[0])\n      }\n      return promise\n    }\n\n    const validateField = (\n      props: string | string[],\n      cb: ValidateFieldCallback\n    ) => {\n      props = [].concat(props)\n      const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)\n      if (!fields.length) {\n        debugWarn('Form', 'please pass correct props!')\n        return\n      }\n\n      fds.forEach((field) => {\n        field.validate('', cb)\n      })\n    }\n\n    const scrollToField = (prop: string) => {\n      fields.forEach((item) => {\n        if (item.prop === prop) {\n          item.$el.scrollIntoView()\n        }\n      })\n    }\n\n    const elForm = reactive({\n      ...toRefs(props),\n      resetFields,\n      clearValidate,\n      validateField,\n      emit,\n      addField,\n      removeField,\n      ...useFormLabelWidth(),\n    })\n\n    provide(elFormKey, elForm)\n\n    return {\n      formKls,\n      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":["ref","computed","defineComponent","useSize","reactive","toRefs","elFormKey","_openBlock"],"mappings":"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"}
+{"version":3,"file":"form.js","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <form :class=\"formKls\">\n    <slot></slot>\n  </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport { elFormKey } from '@element-plus/tokens'\nimport { debugWarn } from '@element-plus/utils-v2'\nimport { useSize } from '@element-plus/hooks'\nimport type { ValidateFieldsError } from 'async-validator'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { FormRulesMap } from './form.type'\nimport type {\n  ElFormItemContext as FormItemCtx,\n  ValidateFieldCallback,\n} from '@element-plus/tokens'\n\nfunction useFormLabelWidth() {\n  const potentialLabelWidthArr = ref([])\n  const autoLabelWidth = computed(() => {\n    if (!potentialLabelWidthArr.value.length) return '0'\n    const max = Math.max(...potentialLabelWidthArr.value)\n    return max ? `${max}px` : ''\n  })\n\n  function getLabelWidthIndex(width: number) {\n    const index = potentialLabelWidthArr.value.indexOf(width)\n    if (index === -1) {\n      debugWarn('Form', `unexpected width ${width}`)\n    }\n    return index\n  }\n\n  function registerLabelWidth(val: number, oldVal: number) {\n    if (val && oldVal) {\n      const index = getLabelWidthIndex(oldVal)\n      potentialLabelWidthArr.value.splice(index, 1, val)\n    } else if (val) {\n      potentialLabelWidthArr.value.push(val)\n    }\n  }\n\n  function deregisterLabelWidth(val: number) {\n    const index = getLabelWidthIndex(val)\n    index > -1 && potentialLabelWidthArr.value.splice(index, 1)\n  }\n\n  return {\n    autoLabelWidth,\n    registerLabelWidth,\n    deregisterLabelWidth,\n  }\n}\n\nexport interface Callback {\n  (isValid?: boolean, invalidFields?: ValidateFieldsError): void\n}\n\nexport default defineComponent({\n  name: 'ElForm',\n  props: {\n    model: Object,\n    rules: Object as PropType<FormRulesMap>,\n    labelPosition: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    labelSuffix: {\n      type: String,\n      default: '',\n    },\n    inline: Boolean,\n    inlineMessage: Boolean,\n    statusIcon: Boolean,\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: String as PropType<ComponentSize>,\n    disabled: Boolean,\n    validateOnRuleChange: {\n      type: Boolean,\n      default: true,\n    },\n    hideRequiredAsterisk: {\n      type: Boolean,\n      default: false,\n    },\n    scrollToError: Boolean,\n  },\n  emits: ['validate'],\n  setup(props, { emit }) {\n    const fields: FormItemCtx[] = []\n\n    watch(\n      () => props.rules,\n      () => {\n        fields.forEach((field) => {\n          field.evaluateValidationEnabled()\n        })\n\n        if (props.validateOnRuleChange) {\n          validate(() => ({}))\n        }\n      }\n    )\n\n    const formSize = useSize()\n    const prefix = 'el-form'\n    const formKls = computed(() => {\n      const { labelPosition, inline } = props\n      return [\n        prefix,\n        `${prefix}--${formSize.value}`,\n        labelPosition ? `${prefix}--label-${labelPosition}` : '',\n        inline ? `${prefix}--inline` : '',\n      ]\n    })\n\n    const addField = (field: FormItemCtx) => {\n      if (field) {\n        fields.push(field)\n      }\n    }\n\n    const removeField = (field: FormItemCtx) => {\n      if (field.prop) {\n        fields.splice(fields.indexOf(field), 1)\n      }\n    }\n\n    const resetFields = () => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for resetFields to work.')\n        return\n      }\n      fields.forEach((field) => {\n        field.resetField()\n      })\n    }\n\n    const clearValidate = (props: string | string[] = []) => {\n      const fds = props.length\n        ? typeof props === 'string'\n          ? fields.filter((field) => props === field.prop)\n          : fields.filter((field) => props.indexOf(field.prop) > -1)\n        : fields\n      fds.forEach((field) => {\n        field.clearValidate()\n      })\n    }\n\n    const validate = (callback?: Callback) => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for validate to work!')\n        return\n      }\n\n      let promise: Promise<boolean> | undefined\n      // if no callback, return promise\n      if (typeof callback !== 'function') {\n        promise = new Promise((resolve, reject) => {\n          callback = function (valid, invalidFields) {\n            if (valid) {\n              resolve(true)\n            } else {\n              reject(invalidFields)\n            }\n          }\n        })\n      }\n\n      if (fields.length === 0) {\n        callback(true)\n      }\n      let valid = true\n      let count = 0\n      let invalidFields = {}\n      let firstInvalidFields\n      for (const field of fields) {\n        field.validate('', (message, field) => {\n          if (message) {\n            valid = false\n            firstInvalidFields || (firstInvalidFields = field)\n          }\n          invalidFields = { ...invalidFields, ...field }\n          if (++count === fields.length) {\n            callback(valid, invalidFields)\n          }\n        })\n      }\n      if (!valid && props.scrollToError) {\n        scrollToField(Object.keys(firstInvalidFields)[0])\n      }\n      return promise\n    }\n\n    const validateField = (\n      props: string | string[],\n      cb: ValidateFieldCallback\n    ) => {\n      props = [].concat(props)\n      const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)\n      if (!fields.length) {\n        debugWarn('Form', 'please pass correct props!')\n        return\n      }\n\n      fds.forEach((field) => {\n        field.validate('', cb)\n      })\n    }\n\n    const scrollToField = (prop: string) => {\n      fields.forEach((item) => {\n        if (item.prop === prop) {\n          item.$el.scrollIntoView()\n        }\n      })\n    }\n\n    const elForm = reactive({\n      ...toRefs(props),\n      resetFields,\n      clearValidate,\n      validateField,\n      emit,\n      addField,\n      removeField,\n      ...useFormLabelWidth(),\n    })\n\n    provide(elFormKey, elForm)\n\n    return {\n      formKls,\n      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":["ref","computed","defineComponent","useSize","reactive","toRefs","elFormKey","_openBlock"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import type { ValidateFieldsError } from 'async-validator';
 import type { PropType } from 'vue';
-import type { ComponentSize } from 'element-plus/es/utils/types';
 import type { ValidateFieldCallback } from 'element-plus/es/tokens';
 export interface Callback {
     (isValid?: boolean, invalidFields?: ValidateFieldsError): void;
@@ -24,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    size: PropType<ComponentSize>;
+    size: PropType<"default" | "small" | "large">;
     disabled: BooleanConstructor;
     validateOnRuleChange: {
         type: BooleanConstructor;
@@ -61,7 +60,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    size: PropType<ComponentSize>;
+    size: PropType<"default" | "small" | "large">;
     disabled: BooleanConstructor;
     validateOnRuleChange: {
         type: BooleanConstructor;

package/lib/components/icon/index.d.ts

@@ -1,6 +1,6 @@
-export declare const ElIcon: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
-    readonly size: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
-    readonly color: import("../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+export declare const ElIcon: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{
+    readonly size: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+    readonly color: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
 }, {
     ns: {
         namespace: import("vue").ComputedRef<string>;
@@ -15,10 +15,10 @@ export declare const ElIcon: import("../../utils/types").SFCWithInstall<import("
     };
     style: import("vue").ComputedRef<import("vue").CSSProperties>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly size: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
-    readonly color: import("../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+    readonly color: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
 }>>, {
-    size: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number>, unknown, unknown>;
+    size: import("element-plus/es/utils-v2").BuildPropType<import("element-plus/es/utils-v2").PropWrapper<string | number>, unknown, unknown>;
     color: string;
 }>> & Record<string, any>;
 export default ElIcon;

package/lib/components/icon/index.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var withInstall = require('../../utils/with-install.js');
+require('../../utils-v2/index.js');
 var icon$1 = require('./src/icon2.js');
 var icon = require('./src/icon.js');
+var install = require('../../utils-v2/vue/install.js');
 
-const ElIcon = withInstall.withInstall(icon$1["default"]);
+const ElIcon = install.withInstall(icon$1["default"]);
 
 exports.iconProps = icon.iconProps;
 exports.ElIcon = ElIcon;

package/lib/components/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/icon/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Icon from './src/icon.vue'\n\nexport const ElIcon = withInstall(Icon)\nexport default ElIcon\n\nexport * from './src/icon'\n"],"names":["withInstall","Icon"],"mappings":";;;;;;;;AAEY,MAAC,MAAM,GAAGA,uBAAW,CAACC,iBAAI;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/icon/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils-v2'\n\nimport Icon from './src/icon.vue'\n\nexport const ElIcon = withInstall(Icon)\nexport default ElIcon\n\nexport * from './src/icon'\n"],"names":["withInstall","Icon"],"mappings":";;;;;;;;;AAEY,MAAC,MAAM,GAAGA,mBAAW,CAACC,iBAAI;;;;;;"}

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

@@ -1,8 +1,8 @@
 import type { ExtractPropTypes } from 'vue';
 import type Icon from './icon.vue';
 export declare const iconProps: {
-    readonly size: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
-    readonly color: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+    readonly color: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
 };
 export declare type IconProps = ExtractPropTypes<typeof iconProps>;
 export declare type IconInstance = InstanceType<typeof Icon>;

package/lib/components/icon/src/icon.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var props = require('../../../utils/props.js');
+require('../../../utils-v2/index.js');
+var prop = require('../../../utils-v2/vue/prop.js');
 
-const iconProps = props.buildProps({
+const iconProps = prop.buildProps({
   size: {
-    type: props.definePropType([Number, String])
+    type: prop.definePropType([Number, String])
   },
   color: {
     type: String

package/lib/components/icon/src/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../../../packages/components/icon/src/icon.ts"],"sourcesContent":["import { definePropType, buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\nimport type Icon from './icon.vue'\n\nexport const iconProps = buildProps({\n  size: {\n    type: definePropType<number | string>([Number, String]),\n  },\n  color: {\n    type: String,\n  },\n} as const)\nexport type IconProps = ExtractPropTypes<typeof iconProps>\nexport type IconInstance = InstanceType<typeof Icon>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AACY,MAAC,SAAS,GAAGA,gBAAU,CAAC;AACpC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"icon.js","sources":["../../../../../../packages/components/icon/src/icon.ts"],"sourcesContent":["import { definePropType, buildProps } from '@element-plus/utils-v2'\nimport type { ExtractPropTypes } from 'vue'\nimport type Icon from './icon.vue'\n\nexport const iconProps = buildProps({\n  size: {\n    type: definePropType<number | string>([Number, String]),\n  },\n  color: {\n    type: String,\n  },\n} as const)\nexport type IconProps = ExtractPropTypes<typeof iconProps>\nexport type IconInstance = InstanceType<typeof Icon>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,SAAS,GAAGA,eAAU,CAAC;AACpC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,mBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC;;;;"}