element-plus 1.2.0-beta.5 → 1.2.0-beta.6

package/lib/components/drawer/src/{index.vue_vue_type_template_id_052d0d8e_lang.js → drawer.vue_vue_type_template_id_e0557736_lang.js}

@@ -90,4 +90,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 exports.render = render;
-//# sourceMappingURL=index.vue_vue_type_template_id_052d0d8e_lang.js.map
+//# sourceMappingURL=drawer.vue_vue_type_template_id_e0557736_lang.js.map

package/lib/components/drawer/src/drawer.vue_vue_type_template_id_e0557736_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.vue_vue_type_template_id_e0557736_lang.js","sources":["../../../../../../packages/components/drawer/src/drawer.vue?vue&type=template&id=e0557736&lang.js"],"sourcesContent":["<template>\n  <teleport to=\"body\" :disabled=\"!appendToBody\">\n    <transition\n      name=\"el-drawer-fade\"\n      @after-enter=\"afterEnter\"\n      @after-leave=\"afterLeave\"\n      @before-leave=\"beforeLeave\"\n    >\n      <el-overlay\n        v-show=\"visible\"\n        :mask=\"modal\"\n        :overlay-class=\"modalClass\"\n        :z-index=\"zIndex\"\n        @click=\"onModalClick\"\n      >\n        <div\n          ref=\"drawerRef\"\n          v-trap-focus\n          aria-modal=\"true\"\n          aria-labelledby=\"el-drawer__title\"\n          :aria-label=\"title\"\n          :class=\"['el-drawer', direction, visible && 'open', customClass]\"\n          :style=\"\n            isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize\n          \"\n          role=\"dialog\"\n          @click.stop\n        >\n          <header\n            v-if=\"withHeader\"\n            id=\"el-drawer__title\"\n            class=\"el-drawer__header\"\n          >\n            <slot name=\"title\">\n              <span role=\"heading\" :title=\"title\">\n                {{ title }}\n              </span>\n            </slot>\n            <button\n              v-if=\"showClose\"\n              :aria-label=\"'close ' + (title || 'drawer')\"\n              class=\"el-drawer__close-btn\"\n              type=\"button\"\n              @click=\"handleClose\"\n            >\n              <el-icon class=\"el-drawer__close\"><close /></el-icon>\n            </button>\n          </header>\n          <template v-if=\"rendered\">\n            <section class=\"el-drawer__body\">\n              <slot></slot>\n            </section>\n          </template>\n        </div>\n      </el-overlay>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport { Close } from '@element-plus/icons-vue'\n\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDialog } from '@element-plus/components/dialog'\nimport ElIcon from '@element-plus/components/icon'\nimport { TrapFocus } from '@element-plus/directives'\nimport { drawerProps, drawerEmits } from './drawer'\n\nexport default defineComponent({\n  name: 'ElDrawer',\n  components: {\n    ElOverlay,\n    ElIcon,\n    Close,\n  },\n  directives: {\n    TrapFocus,\n  },\n  props: drawerProps,\n  emits: drawerEmits,\n\n  setup(props, ctx) {\n    const drawerRef = ref<HTMLElement>()\n\n    const isHorizontal = computed(\n      () => props.direction === 'rtl' || props.direction === 'ltr'\n    )\n    const drawerSize = computed(() =>\n      typeof props.size === 'number' ? `${props.size}px` : props.size\n    )\n\n    return {\n      ...useDialog(props, ctx, drawerRef),\n      drawerRef,\n      isHorizontal,\n      drawerSize,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createVNode","_createElementVNode","_createElementBlock","_renderSlot"],"mappings":";;;;;;;;;EA8BY,IAAG;AAAA,EACH,OAAM;AAAA;;;;;EAkBG,OAAM;AAAA;;;;;;0BAhDzBA;IAAU,IAAG;AAAA,IAAQ,WAAW;;IAC9BC;MACE,MAAK;AAAA,MACJ,cAAa;MACb,cAAa;MACb,eAAc;;2BAEf;2BAAAA;UAEG,MAAM;UACN,iBAAe;UACf,WAAS;UACT,SAAO;;+BAER;+BAAAC;cACE,KAAI;AAAA,cAEJ,cAAW;AAAA,cACX,mBAAgB;AAAA,cACf,cAAY;cACZ,wCAAqB,gBAAW,wBAAmB;cACnD;cAGD,MAAK;AAAA,cACJ,qDAAD;;;cAGQ,oCADRC,iCAAA;gBAKEC,yCAAA;kBACEF;oBAAM,MAAK;AAAA,oBAAW,OAAO;yCACxB;;gBAIC,mCADRC;;kBAEG;kBACD,OAAM;AAAA,kBACN,MAAK;AAAA,kBACJ,gDAAO;;kBAERF,sCAAS,OAAM;yCAAmB;sBAAAA,gBAAS;AAAA;AAAA;;;;cAG/B,kCACdE,kCAAA;gBACEC;;;;;;;;sBAzCE;;;;;;;;;;"}

package/lib/components/drawer/src/drawer2.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var drawer_vue_vue_type_script_lang = require('./drawer.vue_vue_type_script_lang.js');
+var drawer_vue_vue_type_template_id_e0557736_lang = require('./drawer.vue_vue_type_template_id_e0557736_lang.js');
+
+drawer_vue_vue_type_script_lang["default"].render = drawer_vue_vue_type_template_id_e0557736_lang.render;
+drawer_vue_vue_type_script_lang["default"].__file = "packages/components/drawer/src/drawer.vue";
+
+exports["default"] = drawer_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=drawer2.js.map

package/lib/components/drawer/src/drawer2.js.map

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

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

@@ -41,7 +41,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
     visible: import("vue").Ref<boolean>;
     scrollbar: import("vue").Ref<null>;
     wrapStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-    dropdownSize: import("vue").ComputedRef<any>;
+    dropdownSize: import("vue").ComputedRef<"" | import("../../utils/types").ComponentSize>;
     handlerMainButtonClick: (event: any) => void;
     triggerVnode: import("vue").Ref<import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "visible-change" | "command")[], "click" | "visible-change" | "command", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
@@ -104,8 +104,8 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
     } & {
         icon?: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown> | undefined;
     }>, {
-        disabled: boolean;
         icon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
+        disabled: boolean;
         command: import("../../utils/props").BuildPropType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
         divided: boolean;
     }>;
@@ -137,8 +137,8 @@ export declare const ElDropdownItem: import("../../utils/types").SFCWithInstall<
 } & {
     icon?: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown> | undefined;
 }>, {
-    disabled: boolean;
     icon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
+    disabled: boolean;
     command: import("../../utils/props").BuildPropType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
     divided: boolean;
 }>>;

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

@@ -18,8 +18,8 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     icon?: import("element-plus/es/utils/props").BuildPropType<import("element-plus/es/utils/props").PropWrapper<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown> | undefined;
 }>, {
-    disabled: boolean;
     icon: import("element-plus/es/utils/props").BuildPropType<import("element-plus/es/utils/props").PropWrapper<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
+    disabled: boolean;
     command: import("element-plus/es/utils/props").BuildPropType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
     divided: boolean;
 }>;

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

@@ -46,7 +46,7 @@ declare const _default: import("vue").DefineComponent<{
     visible: import("vue").Ref<boolean>;
     scrollbar: import("vue").Ref<null>;
     wrapStyle: import("vue").ComputedRef<CSSProperties>;
-    dropdownSize: import("vue").ComputedRef<any>;
+    dropdownSize: import("vue").ComputedRef<"" | import("../../../utils/types").ComponentSize>;
     handlerMainButtonClick: (event: any) => void;
     triggerVnode: import("vue").Ref<Nullable<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>>>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "visible-change" | "command")[], "click" | "visible-change" | "command", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

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

@@ -9,9 +9,10 @@ var index$1 = require('../../scrollbar/index.js');
 var index$3 = require('../../icon/index.js');
 var dom = require('../../../utils/dom.js');
 var util = require('../../../utils/util.js');
-var icons = require('@element-plus/icons');
-var useDropdown = require('./useDropdown.js');
+var iconsVue = require('@element-plus/icons-vue');
+require('../../../hooks/index.js');
 var defaults = require('../../popper/src/use-popper/defaults.js');
+var index$4 = require('../../../hooks/use-common-props/index.js');
 
 const { ButtonGroup: ElButtonGroup } = index.ElButton;
 var script = vue.defineComponent({
@@ -22,7 +23,7 @@ var script = vue.defineComponent({
     ElScrollbar: index$1.ElScrollbar,
     ElPopper: index$2["default"],
     ElIcon: index$3.ElIcon,
-    ArrowDown: icons.ArrowDown
+    ArrowDown: iconsVue.ArrowDown
   },
   props: {
     trigger: {
@@ -67,7 +68,6 @@ var script = vue.defineComponent({
   emits: ["visible-change", "click", "command"],
   setup(props, { emit }) {
     const _instance = vue.getCurrentInstance();
-    const { ELEMENT } = useDropdown.useDropdown();
     const timeout = vue.ref(null);
     const visible = vue.ref(false);
     const scrollbar = vue.ref(null);
@@ -146,7 +146,7 @@ var script = vue.defineComponent({
       var _a, _b;
       (_b = (_a = triggerElm.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
     }
-    const dropdownSize = vue.computed(() => props.size || ELEMENT.size);
+    const dropdownSize = index$4.useSize();
     function commandHandler(...args) {
       emit("command", ...args);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-popper\n      ref=\"triggerVnode\"\n      v-model:visible=\"visible\"\n      :placement=\"placement\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :effect=\"effect\"\n      pure\n      :manual-mode=\"true\"\n      :trigger=\"[trigger]\"\n      popper-class=\"el-dropdown__popper\"\n      append-to-body\n      transition=\"el-zoom-in-top\"\n      :stop-popper-mouse-event=\"false\"\n      :gpu-acceleration=\"false\"\n    >\n      <template #default>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          tag=\"ul\"\n          :wrap-style=\"wrapStyle\"\n          view-class=\"el-dropdown__list\"\n        >\n          <slot name=\"dropdown\"></slot>\n        </el-scrollbar>\n      </template>\n      <template #trigger>\n        <div :class=\"[dropdownSize ? 'el-dropdown--' + dropdownSize : '']\">\n          <slot v-if=\"!splitButton\" name=\"default\"></slot>\n          <template v-else>\n            <el-button-group>\n              <el-button\n                :size=\"dropdownSize\"\n                :type=\"type\"\n                @click=\"handlerMainButtonClick\"\n              >\n                <slot name=\"default\"></slot>\n              </el-button>\n              <el-button\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    </el-popper>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  getCurrentInstance,\n  ref,\n  computed,\n  watch,\n  onMounted,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { on, addClass, removeClass } from '@element-plus/utils/dom'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons'\nimport { useDropdown } from './useDropdown'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType, ComponentPublicInstance, CSSProperties } from 'vue'\nimport type { TriggerType } from '@element-plus/hooks/use-popper/use-target-events'\nimport type { ButtonType } from '@element-plus/components/button/src/types'\n\ntype Nullable<T> = null | T\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElButtonGroup,\n    ElScrollbar,\n    ElPopper,\n    ElIcon,\n    ArrowDown,\n  },\n  props: {\n    trigger: {\n      type: String as PropType<TriggerType | 'contextmenu'>,\n      default: 'hover',\n    },\n    type: String as PropType<ButtonType>,\n    size: {\n      type: String,\n      default: '',\n    },\n    splitButton: Boolean,\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom',\n    },\n    showTimeout: {\n      type: Number,\n      default: 150,\n    },\n    hideTimeout: {\n      type: Number,\n      default: 150,\n    },\n    tabindex: {\n      type: [Number, String],\n      default: 0,\n    },\n    effect: {\n      type: String as PropType<Effect>,\n      default: Effect.LIGHT,\n    },\n    maxHeight: {\n      type: [Number, String],\n      default: '',\n    },\n  },\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n    const { ELEMENT } = useDropdown()\n\n    const timeout = ref<Nullable<number>>(null)\n\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) triggerElmFocus()\n        if (!val) triggerElmBlur()\n        emit('visible-change', val)\n      }\n    )\n\n    const focusing = ref(false)\n    watch(\n      () => focusing.value,\n      (val) => {\n        const selfDefine = triggerElm.value\n        if (selfDefine) {\n          if (val) {\n            addClass(selfDefine, 'focusing')\n          } else {\n            removeClass(selfDefine, 'focusing')\n          }\n        }\n      }\n    )\n\n    const triggerVnode = ref<Nullable<ComponentPublicInstance>>(null)\n    const triggerElm = computed<Nullable<HTMLButtonElement>>(() => {\n      const _: any = (triggerVnode.value?.$refs.triggerRef as HTMLElement)\n        ?.children[0]\n      return !props.splitButton ? _ : _?.children?.[1]\n    })\n\n    function handleClick() {\n      if (triggerElm.value?.disabled) return\n      if (visible.value) {\n        hide()\n      } else {\n        show()\n      }\n    }\n\n    function show() {\n      if (triggerElm.value?.disabled) return\n      timeout.value && clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = true\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout\n      )\n    }\n\n    function hide() {\n      if (triggerElm.value?.disabled) return\n      removeTabindex()\n      if (props.tabindex >= 0) {\n        resetTabindex(triggerElm.value)\n      }\n      clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = false\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout\n      )\n    }\n\n    function removeTabindex() {\n      triggerElm.value?.setAttribute('tabindex', '-1')\n    }\n\n    function resetTabindex(ele) {\n      removeTabindex()\n      ele?.setAttribute('tabindex', '0')\n    }\n\n    function triggerElmFocus() {\n      triggerElm.value?.focus?.()\n    }\n\n    function triggerElmBlur() {\n      triggerElm.value?.blur?.()\n    }\n\n    const dropdownSize = computed(() => props.size || ELEMENT.size)\n\n    function commandHandler(...args) {\n      emit('command', ...args)\n    }\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      show,\n      hide,\n      trigger: computed(() => props.trigger),\n      hideOnClick: computed(() => props.hideOnClick),\n      triggerElm,\n    })\n\n    onMounted(() => {\n      if (!props.splitButton) {\n        on(triggerElm.value, 'focus', () => {\n          focusing.value = true\n        })\n        on(triggerElm.value, 'blur', () => {\n          focusing.value = false\n        })\n        on(triggerElm.value, 'click', () => {\n          focusing.value = false\n        })\n      }\n      if (props.trigger === 'hover') {\n        on(triggerElm.value, 'mouseenter', show)\n        on(triggerElm.value, 'mouseleave', hide)\n      } else if (props.trigger === 'click') {\n        on(triggerElm.value, 'click', handleClick)\n      } else if (props.trigger === 'contextmenu') {\n        on(triggerElm.value, 'contextmenu', (e) => {\n          e.preventDefault()\n          handleClick()\n        })\n      }\n\n      Object.assign(_instance, {\n        handleClick,\n        hide,\n        resetTabindex,\n      })\n    })\n\n    const handlerMainButtonClick = (event) => {\n      emit('click', event)\n      hide()\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownSize,\n      handlerMainButtonClick,\n      triggerVnode,\n    }\n  },\n})\n</script>\n"],"names":["ElButton","defineComponent","ElScrollbar","ElPopper","ElIcon","ArrowDown","Effect","getCurrentInstance","useDropdown","ref","computed","addUnit"],"mappings":"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"}
+{"version":3,"file":"dropdown.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-popper\n      ref=\"triggerVnode\"\n      v-model:visible=\"visible\"\n      :placement=\"placement\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :effect=\"effect\"\n      pure\n      :manual-mode=\"true\"\n      :trigger=\"[trigger]\"\n      popper-class=\"el-dropdown__popper\"\n      append-to-body\n      transition=\"el-zoom-in-top\"\n      :stop-popper-mouse-event=\"false\"\n      :gpu-acceleration=\"false\"\n    >\n      <template #default>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          tag=\"ul\"\n          :wrap-style=\"wrapStyle\"\n          view-class=\"el-dropdown__list\"\n        >\n          <slot name=\"dropdown\"></slot>\n        </el-scrollbar>\n      </template>\n      <template #trigger>\n        <div :class=\"[dropdownSize ? 'el-dropdown--' + dropdownSize : '']\">\n          <slot v-if=\"!splitButton\" name=\"default\"></slot>\n          <template v-else>\n            <el-button-group>\n              <el-button\n                :size=\"dropdownSize\"\n                :type=\"type\"\n                @click=\"handlerMainButtonClick\"\n              >\n                <slot name=\"default\"></slot>\n              </el-button>\n              <el-button\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    </el-popper>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  getCurrentInstance,\n  ref,\n  computed,\n  watch,\n  onMounted,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { on, addClass, removeClass } from '@element-plus/utils/dom'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType, ComponentPublicInstance, CSSProperties } from 'vue'\nimport type { TriggerType } from '@element-plus/hooks/use-popper/use-target-events'\nimport type { ButtonType } from '@element-plus/components/button/src/types'\n\ntype Nullable<T> = null | T\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElButtonGroup,\n    ElScrollbar,\n    ElPopper,\n    ElIcon,\n    ArrowDown,\n  },\n  props: {\n    trigger: {\n      type: String as PropType<TriggerType | 'contextmenu'>,\n      default: 'hover',\n    },\n    type: String as PropType<ButtonType>,\n    size: {\n      type: String,\n      default: '',\n    },\n    splitButton: Boolean,\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom',\n    },\n    showTimeout: {\n      type: Number,\n      default: 150,\n    },\n    hideTimeout: {\n      type: Number,\n      default: 150,\n    },\n    tabindex: {\n      type: [Number, String],\n      default: 0,\n    },\n    effect: {\n      type: String as PropType<Effect>,\n      default: Effect.LIGHT,\n    },\n    maxHeight: {\n      type: [Number, String],\n      default: '',\n    },\n  },\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const timeout = ref<Nullable<number>>(null)\n\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) triggerElmFocus()\n        if (!val) triggerElmBlur()\n        emit('visible-change', val)\n      }\n    )\n\n    const focusing = ref(false)\n    watch(\n      () => focusing.value,\n      (val) => {\n        const selfDefine = triggerElm.value\n        if (selfDefine) {\n          if (val) {\n            addClass(selfDefine, 'focusing')\n          } else {\n            removeClass(selfDefine, 'focusing')\n          }\n        }\n      }\n    )\n\n    const triggerVnode = ref<Nullable<ComponentPublicInstance>>(null)\n    const triggerElm = computed<Nullable<HTMLButtonElement>>(() => {\n      const _: any = (triggerVnode.value?.$refs.triggerRef as HTMLElement)\n        ?.children[0]\n      return !props.splitButton ? _ : _?.children?.[1]\n    })\n\n    function handleClick() {\n      if (triggerElm.value?.disabled) return\n      if (visible.value) {\n        hide()\n      } else {\n        show()\n      }\n    }\n\n    function show() {\n      if (triggerElm.value?.disabled) return\n      timeout.value && clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = true\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout\n      )\n    }\n\n    function hide() {\n      if (triggerElm.value?.disabled) return\n      removeTabindex()\n      if (props.tabindex >= 0) {\n        resetTabindex(triggerElm.value)\n      }\n      clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = false\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout\n      )\n    }\n\n    function removeTabindex() {\n      triggerElm.value?.setAttribute('tabindex', '-1')\n    }\n\n    function resetTabindex(ele) {\n      removeTabindex()\n      ele?.setAttribute('tabindex', '0')\n    }\n\n    function triggerElmFocus() {\n      triggerElm.value?.focus?.()\n    }\n\n    function triggerElmBlur() {\n      triggerElm.value?.blur?.()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args) {\n      emit('command', ...args)\n    }\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      show,\n      hide,\n      trigger: computed(() => props.trigger),\n      hideOnClick: computed(() => props.hideOnClick),\n      triggerElm,\n    })\n\n    onMounted(() => {\n      if (!props.splitButton) {\n        on(triggerElm.value, 'focus', () => {\n          focusing.value = true\n        })\n        on(triggerElm.value, 'blur', () => {\n          focusing.value = false\n        })\n        on(triggerElm.value, 'click', () => {\n          focusing.value = false\n        })\n      }\n      if (props.trigger === 'hover') {\n        on(triggerElm.value, 'mouseenter', show)\n        on(triggerElm.value, 'mouseleave', hide)\n      } else if (props.trigger === 'click') {\n        on(triggerElm.value, 'click', handleClick)\n      } else if (props.trigger === 'contextmenu') {\n        on(triggerElm.value, 'contextmenu', (e) => {\n          e.preventDefault()\n          handleClick()\n        })\n      }\n\n      Object.assign(_instance, {\n        handleClick,\n        hide,\n        resetTabindex,\n      })\n    })\n\n    const handlerMainButtonClick = (event) => {\n      emit('click', event)\n      hide()\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownSize,\n      handlerMainButtonClick,\n      triggerVnode,\n    }\n  },\n})\n</script>\n"],"names":["ElButton","defineComponent","ElScrollbar","ElPopper","ElIcon","ArrowDown","Effect","getCurrentInstance","ref","computed","addUnit","useSize"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-popper\n      ref=\"triggerVnode\"\n      v-model:visible=\"visible\"\n      :placement=\"placement\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :effect=\"effect\"\n      pure\n      :manual-mode=\"true\"\n      :trigger=\"[trigger]\"\n      popper-class=\"el-dropdown__popper\"\n      append-to-body\n      transition=\"el-zoom-in-top\"\n      :stop-popper-mouse-event=\"false\"\n      :gpu-acceleration=\"false\"\n    >\n      <template #default>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          tag=\"ul\"\n          :wrap-style=\"wrapStyle\"\n          view-class=\"el-dropdown__list\"\n        >\n          <slot name=\"dropdown\"></slot>\n        </el-scrollbar>\n      </template>\n      <template #trigger>\n        <div :class=\"[dropdownSize ? 'el-dropdown--' + dropdownSize : '']\">\n          <slot v-if=\"!splitButton\" name=\"default\"></slot>\n          <template v-else>\n            <el-button-group>\n              <el-button\n                :size=\"dropdownSize\"\n                :type=\"type\"\n                @click=\"handlerMainButtonClick\"\n              >\n                <slot name=\"default\"></slot>\n              </el-button>\n              <el-button\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    </el-popper>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  getCurrentInstance,\n  ref,\n  computed,\n  watch,\n  onMounted,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { on, addClass, removeClass } from '@element-plus/utils/dom'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons'\nimport { useDropdown } from './useDropdown'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType, ComponentPublicInstance, CSSProperties } from 'vue'\nimport type { TriggerType } from '@element-plus/hooks/use-popper/use-target-events'\nimport type { ButtonType } from '@element-plus/components/button/src/types'\n\ntype Nullable<T> = null | T\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElButtonGroup,\n    ElScrollbar,\n    ElPopper,\n    ElIcon,\n    ArrowDown,\n  },\n  props: {\n    trigger: {\n      type: String as PropType<TriggerType | 'contextmenu'>,\n      default: 'hover',\n    },\n    type: String as PropType<ButtonType>,\n    size: {\n      type: String,\n      default: '',\n    },\n    splitButton: Boolean,\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom',\n    },\n    showTimeout: {\n      type: Number,\n      default: 150,\n    },\n    hideTimeout: {\n      type: Number,\n      default: 150,\n    },\n    tabindex: {\n      type: [Number, String],\n      default: 0,\n    },\n    effect: {\n      type: String as PropType<Effect>,\n      default: Effect.LIGHT,\n    },\n    maxHeight: {\n      type: [Number, String],\n      default: '',\n    },\n  },\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n    const { ELEMENT } = useDropdown()\n\n    const timeout = ref<Nullable<number>>(null)\n\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) triggerElmFocus()\n        if (!val) triggerElmBlur()\n        emit('visible-change', val)\n      }\n    )\n\n    const focusing = ref(false)\n    watch(\n      () => focusing.value,\n      (val) => {\n        const selfDefine = triggerElm.value\n        if (selfDefine) {\n          if (val) {\n            addClass(selfDefine, 'focusing')\n          } else {\n            removeClass(selfDefine, 'focusing')\n          }\n        }\n      }\n    )\n\n    const triggerVnode = ref<Nullable<ComponentPublicInstance>>(null)\n    const triggerElm = computed<Nullable<HTMLButtonElement>>(() => {\n      const _: any = (triggerVnode.value?.$refs.triggerRef as HTMLElement)\n        ?.children[0]\n      return !props.splitButton ? _ : _?.children?.[1]\n    })\n\n    function handleClick() {\n      if (triggerElm.value?.disabled) return\n      if (visible.value) {\n        hide()\n      } else {\n        show()\n      }\n    }\n\n    function show() {\n      if (triggerElm.value?.disabled) return\n      timeout.value && clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = true\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout\n      )\n    }\n\n    function hide() {\n      if (triggerElm.value?.disabled) return\n      removeTabindex()\n      if (props.tabindex >= 0) {\n        resetTabindex(triggerElm.value)\n      }\n      clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = false\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout\n      )\n    }\n\n    function removeTabindex() {\n      triggerElm.value?.setAttribute('tabindex', '-1')\n    }\n\n    function resetTabindex(ele) {\n      removeTabindex()\n      ele?.setAttribute('tabindex', '0')\n    }\n\n    function triggerElmFocus() {\n      triggerElm.value?.focus?.()\n    }\n\n    function triggerElmBlur() {\n      triggerElm.value?.blur?.()\n    }\n\n    const dropdownSize = computed(() => props.size || ELEMENT.size)\n\n    function commandHandler(...args) {\n      emit('command', ...args)\n    }\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      show,\n      hide,\n      trigger: computed(() => props.trigger),\n      hideOnClick: computed(() => props.hideOnClick),\n      triggerElm,\n    })\n\n    onMounted(() => {\n      if (!props.splitButton) {\n        on(triggerElm.value, 'focus', () => {\n          focusing.value = true\n        })\n        on(triggerElm.value, 'blur', () => {\n          focusing.value = false\n        })\n        on(triggerElm.value, 'click', () => {\n          focusing.value = false\n        })\n      }\n      if (props.trigger === 'hover') {\n        on(triggerElm.value, 'mouseenter', show)\n        on(triggerElm.value, 'mouseleave', hide)\n      } else if (props.trigger === 'click') {\n        on(triggerElm.value, 'click', handleClick)\n      } else if (props.trigger === 'contextmenu') {\n        on(triggerElm.value, 'contextmenu', (e) => {\n          e.preventDefault()\n          handleClick()\n        })\n      }\n\n      Object.assign(_instance, {\n        handleClick,\n        hide,\n        resetTabindex,\n      })\n    })\n\n    const handlerMainButtonClick = (event) => {\n      emit('click', event)\n      hide()\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownSize,\n      handlerMainButtonClick,\n      triggerVnode,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_renderSlot","_createElementVNode","_createBlock"],"mappings":";;;;;;qBACO,OAAM;;;;;;;;0BAAXA,8BAAA;IACEC;MACE,KAAI;AAAA,MACI,SAAS;gEAAA;MAChB,WAAW;MACX,uBAAqB;MACrB,QAAQ;MACT,MAAA;AAAA,MACC,eAAa;AAAA,MACb,UAAU;MACX,gBAAa;AAAA,MACb,kBAAA;AAAA,MACA,YAAW;AAAA,MACV,2BAAyB;AAAA,MACzB,oBAAkB;AAAA;MAER,qBACT;QAAAA;UACE,KAAI;AAAA,UACJ,KAAI;AAAA,UACH,cAAY;UACb,cAAW;AAAA;+BAEX;YAAAC;;;;;MAGO,qBACT;QAAAC;UAAM,2BAAQ,sCAAiC;;WAChC,mBAAbD,uEAEEE;iCACE;cAAAH;gBACG,MAAM;gBACN,MAAM;gBACN,SAAO;;qCAER;kBAAAC;;;;cAEFD;gBACG,MAAM;gBACN,MAAM;gBACP,OAAM;AAAA;qCAEN;kBAAAA,sCAAS,OAAM;yCAAoB;sBAAAA,gBAAc;AAAA;AAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-popper\n      ref=\"triggerVnode\"\n      v-model:visible=\"visible\"\n      :placement=\"placement\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :effect=\"effect\"\n      pure\n      :manual-mode=\"true\"\n      :trigger=\"[trigger]\"\n      popper-class=\"el-dropdown__popper\"\n      append-to-body\n      transition=\"el-zoom-in-top\"\n      :stop-popper-mouse-event=\"false\"\n      :gpu-acceleration=\"false\"\n    >\n      <template #default>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          tag=\"ul\"\n          :wrap-style=\"wrapStyle\"\n          view-class=\"el-dropdown__list\"\n        >\n          <slot name=\"dropdown\"></slot>\n        </el-scrollbar>\n      </template>\n      <template #trigger>\n        <div :class=\"[dropdownSize ? 'el-dropdown--' + dropdownSize : '']\">\n          <slot v-if=\"!splitButton\" name=\"default\"></slot>\n          <template v-else>\n            <el-button-group>\n              <el-button\n                :size=\"dropdownSize\"\n                :type=\"type\"\n                @click=\"handlerMainButtonClick\"\n              >\n                <slot name=\"default\"></slot>\n              </el-button>\n              <el-button\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    </el-popper>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  getCurrentInstance,\n  ref,\n  computed,\n  watch,\n  onMounted,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { on, addClass, removeClass } from '@element-plus/utils/dom'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType, ComponentPublicInstance, CSSProperties } from 'vue'\nimport type { TriggerType } from '@element-plus/hooks/use-popper/use-target-events'\nimport type { ButtonType } from '@element-plus/components/button/src/types'\n\ntype Nullable<T> = null | T\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElButtonGroup,\n    ElScrollbar,\n    ElPopper,\n    ElIcon,\n    ArrowDown,\n  },\n  props: {\n    trigger: {\n      type: String as PropType<TriggerType | 'contextmenu'>,\n      default: 'hover',\n    },\n    type: String as PropType<ButtonType>,\n    size: {\n      type: String,\n      default: '',\n    },\n    splitButton: Boolean,\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom',\n    },\n    showTimeout: {\n      type: Number,\n      default: 150,\n    },\n    hideTimeout: {\n      type: Number,\n      default: 150,\n    },\n    tabindex: {\n      type: [Number, String],\n      default: 0,\n    },\n    effect: {\n      type: String as PropType<Effect>,\n      default: Effect.LIGHT,\n    },\n    maxHeight: {\n      type: [Number, String],\n      default: '',\n    },\n  },\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const timeout = ref<Nullable<number>>(null)\n\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) triggerElmFocus()\n        if (!val) triggerElmBlur()\n        emit('visible-change', val)\n      }\n    )\n\n    const focusing = ref(false)\n    watch(\n      () => focusing.value,\n      (val) => {\n        const selfDefine = triggerElm.value\n        if (selfDefine) {\n          if (val) {\n            addClass(selfDefine, 'focusing')\n          } else {\n            removeClass(selfDefine, 'focusing')\n          }\n        }\n      }\n    )\n\n    const triggerVnode = ref<Nullable<ComponentPublicInstance>>(null)\n    const triggerElm = computed<Nullable<HTMLButtonElement>>(() => {\n      const _: any = (triggerVnode.value?.$refs.triggerRef as HTMLElement)\n        ?.children[0]\n      return !props.splitButton ? _ : _?.children?.[1]\n    })\n\n    function handleClick() {\n      if (triggerElm.value?.disabled) return\n      if (visible.value) {\n        hide()\n      } else {\n        show()\n      }\n    }\n\n    function show() {\n      if (triggerElm.value?.disabled) return\n      timeout.value && clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = true\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout\n      )\n    }\n\n    function hide() {\n      if (triggerElm.value?.disabled) return\n      removeTabindex()\n      if (props.tabindex >= 0) {\n        resetTabindex(triggerElm.value)\n      }\n      clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = false\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout\n      )\n    }\n\n    function removeTabindex() {\n      triggerElm.value?.setAttribute('tabindex', '-1')\n    }\n\n    function resetTabindex(ele) {\n      removeTabindex()\n      ele?.setAttribute('tabindex', '0')\n    }\n\n    function triggerElmFocus() {\n      triggerElm.value?.focus?.()\n    }\n\n    function triggerElmBlur() {\n      triggerElm.value?.blur?.()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args) {\n      emit('command', ...args)\n    }\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      show,\n      hide,\n      trigger: computed(() => props.trigger),\n      hideOnClick: computed(() => props.hideOnClick),\n      triggerElm,\n    })\n\n    onMounted(() => {\n      if (!props.splitButton) {\n        on(triggerElm.value, 'focus', () => {\n          focusing.value = true\n        })\n        on(triggerElm.value, 'blur', () => {\n          focusing.value = false\n        })\n        on(triggerElm.value, 'click', () => {\n          focusing.value = false\n        })\n      }\n      if (props.trigger === 'hover') {\n        on(triggerElm.value, 'mouseenter', show)\n        on(triggerElm.value, 'mouseleave', hide)\n      } else if (props.trigger === 'click') {\n        on(triggerElm.value, 'click', handleClick)\n      } else if (props.trigger === 'contextmenu') {\n        on(triggerElm.value, 'contextmenu', (e) => {\n          e.preventDefault()\n          handleClick()\n        })\n      }\n\n      Object.assign(_instance, {\n        handleClick,\n        hide,\n        resetTabindex,\n      })\n    })\n\n    const handlerMainButtonClick = (event) => {\n      emit('click', event)\n      hide()\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownSize,\n      handlerMainButtonClick,\n      triggerVnode,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_renderSlot","_createElementVNode","_createBlock"],"mappings":";;;;;;qBACO,OAAM;;;;;;;;0BAAXA,8BAAA;IACEC;MACE,KAAI;AAAA,MACI,SAAS;gEAAA;MAChB,WAAW;MACX,uBAAqB;MACrB,QAAQ;MACT,MAAA;AAAA,MACC,eAAa;AAAA,MACb,UAAU;MACX,gBAAa;AAAA,MACb,kBAAA;AAAA,MACA,YAAW;AAAA,MACV,2BAAyB;AAAA,MACzB,oBAAkB;AAAA;MAER,qBACT;QAAAA;UACE,KAAI;AAAA,UACJ,KAAI;AAAA,UACH,cAAY;UACb,cAAW;AAAA;+BAEX;YAAAC;;;;;MAGO,qBACT;QAAAC;UAAM,2BAAQ,sCAAiC;;WAChC,mBAAbD,uEAEEE;iCACE;cAAAH;gBACG,MAAM;gBACN,MAAM;gBACN,SAAO;;qCAER;kBAAAC;;;;cAEFD;gBACG,MAAM;gBACN,MAAM;gBACP,OAAM;AAAA;qCAEN;kBAAAA,sCAAS,OAAM;yCAAoB;sBAAAA,gBAAc;AAAA;AAAA;;;;;;;;;;;;;;;;;"}

package/lib/components/dropdown/src/useDropdown.d.ts

@@ -1,6 +1,5 @@
 import type { IElDropdownInstance } from './dropdown';
 export declare const useDropdown: () => {
-    ELEMENT: any;
     elDropdown: IElDropdownInstance;
     _elDropdownSize: import("vue").ComputedRef<import("vue").ComputedRef<string> | undefined>;
 };

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

@@ -8,11 +8,9 @@ var aria = require('../../../utils/aria.js');
 var dom = require('../../../utils/dom.js');
 
 const useDropdown = () => {
-  const ELEMENT = util.useGlobalConfig();
   const elDropdown = vue.inject("elDropdown", {});
   const _elDropdownSize = vue.computed(() => elDropdown == null ? void 0 : elDropdown.dropdownSize);
   return {
-    ELEMENT,
     elDropdown,
     _elDropdownSize
   };

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, useGlobalConfig } 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 ELEMENT = useGlobalConfig()\n  const elDropdown = inject<IElDropdownInstance>('elDropdown', {})\n  const _elDropdownSize = computed(() => elDropdown?.dropdownSize)\n\n  return {\n    ELEMENT,\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":["useGlobalConfig","inject","computed","ref","generateId","EVENT_CODE"],"mappings":";;;;;;;;;MAQa,cAAc,MAAM;AAC/B,QAAM,UAAUA;AAChB,QAAM,aAAaC,WAA4B,cAAc;AAC7D,QAAM,kBAAkBC,aAAS,MAAM,yCAAY;AAEnD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;MAIS,uBAAuB,CAClC,kBACA,YACA,cACG;AACH,QAAM,YAAYC,QAAmC;AACrD,QAAM,iBAAiBA,QAA6B;AACpD,QAAM,cAAcA,QAA2B;AAC/C,QAAM,SAASA,QAAI,iBAAiBC;AACpC,cAAY,QAAQ,qDAAkB,QAAQ;AAE9C,4BAA0B;AA/B5B;AAgCI,eAAW,aAAa,YAAY;AACpC,yBAAe,UAAf,mBAAsB,QAAQ,CAAC,SAAS;AACtC,WAAK,aAAa,YAAY;AAAA;AAAA;AAIlC,yBAAuB,KAAK;AAC1B;AACA,+BAAK,aAAa,YAAY;AAAA;AAGhC,gCAA8B,IAAmB;AAC/C,UAAM,OAAO,GAAG;AAChB,QAAI,CAACC,gBAAW,IAAIA,gBAAW,MAAM,SAAS,OAAO;AACnD;AACA,oBAAc,UAAU,MAAM;AAC9B,gBAAU,MAAM,GAAG;AACnB,SAAG;AACH,SAAG;AAAA,eACM,SAASA,gBAAW,OAAO;AACpC,gBAAU;AAAA,eACD,CAACA,gBAAW,KAAKA,gBAAW,KAAK,SAAS,OAAO;AAC1D,gBAAU;AAAA;AAAA;AAId,6BAA2B,IAAI;AAC7B,UAAM,OAAO,GAAG;AAChB,UAAM,SAAS,GAAG;AAClB,UAAM,eAAe,eAAe,MAAM,QAAQ;AAClD,UAAM,MAAM,eAAe,MAAM,SAAS;AAC1C,QAAI;AACJ,QAAI,CAACA,gBAAW,IAAIA,gBAAW,MAAM,SAAS,OAAO;AACnD,UAAI,SAASA,gBAAW,IAAI;AAC1B,oBAAY,iBAAiB,IAAI,eAAe,IAAI;AAAA,aAC/C;AACL,oBAAY,eAAe,MAAM,eAAe,IAAI;AAAA;AAEtD;AACA,oBAAc,UAAU,MAAM;AAC9B,gBAAU,MAAM,WAAW;AAC3B,SAAG;AACH,SAAG;AAAA,eACM,SAASA,gBAAW,OAAO;AACpC;AACA,aAAO;AACP,UAAI,UAAU,MAAM,aAAa;AAC/B,kBAAU;AAAA;AAAA,eAEH,CAACA,gBAAW,KAAKA,gBAAW,KAAK,SAAS,OAAO;AAC1D,gBAAU;AACV;AAAA;AAAA;AAIJ,sBAAoB;AAClB,gBAAY,MAAM,aAAa,MAAM,OAAO;AAC5C,eAAW,aAAa,iBAAiB;AACzC,eAAW,aAAa,iBAAiB,OAAO;AAChD,QAAI,CAAC,UAAU,MAAM,aAAa;AAChC,iBAAW,aAAa,QAAQ;AAChC,iBAAW,aAAa,YAAY,UAAU,MAAM;AACpD,mBAAS,YAAY;AAAA;AAAA;AAIzB,uBAAqB;AACnB,WAAG,YAAY,WAAW;AAC1B,WAAG,YAAY,OAAO,WAAW,mBAAmB;AAAA;AAGtD,8BAA4B;AAC1B,cAAU,QAAQ,YAAY,MAAM,iBAClC;AAEF,mBAAe,QAAQ,GAAG,MAAM,KAAK,UAAU;AAE/C;AACA;AAAA;AAGF,6BAA2B;AACzB,eAAW;AAAA;AAGb;AAAA;;;;;"}
+{"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"],"mappings":";;;;;;;;;MAQa,cAAc,MAAM;AAC/B,QAAM,aAAaA,WAA4B,cAAc;AAC7D,QAAM,kBAAkBC,aAAS,MAAM,yCAAY;AAEnD,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;MAIS,uBAAuB,CAClC,kBACA,YACA,cACG;AACH,QAAM,YAAYC,QAAmC;AACrD,QAAM,iBAAiBA,QAA6B;AACpD,QAAM,cAAcA,QAA2B;AAC/C,QAAM,SAASA,QAAI,iBAAiBC;AACpC,cAAY,QAAQ,qDAAkB,QAAQ;AAE9C,4BAA0B;AA7B5B;AA8BI,eAAW,aAAa,YAAY;AACpC,yBAAe,UAAf,mBAAsB,QAAQ,CAAC,SAAS;AACtC,WAAK,aAAa,YAAY;AAAA;AAAA;AAIlC,yBAAuB,KAAK;AAC1B;AACA,+BAAK,aAAa,YAAY;AAAA;AAGhC,gCAA8B,IAAmB;AAC/C,UAAM,OAAO,GAAG;AAChB,QAAI,CAACC,gBAAW,IAAIA,gBAAW,MAAM,SAAS,OAAO;AACnD;AACA,oBAAc,UAAU,MAAM;AAC9B,gBAAU,MAAM,GAAG;AACnB,SAAG;AACH,SAAG;AAAA,eACM,SAASA,gBAAW,OAAO;AACpC,gBAAU;AAAA,eACD,CAACA,gBAAW,KAAKA,gBAAW,KAAK,SAAS,OAAO;AAC1D,gBAAU;AAAA;AAAA;AAId,6BAA2B,IAAI;AAC7B,UAAM,OAAO,GAAG;AAChB,UAAM,SAAS,GAAG;AAClB,UAAM,eAAe,eAAe,MAAM,QAAQ;AAClD,UAAM,MAAM,eAAe,MAAM,SAAS;AAC1C,QAAI;AACJ,QAAI,CAACA,gBAAW,IAAIA,gBAAW,MAAM,SAAS,OAAO;AACnD,UAAI,SAASA,gBAAW,IAAI;AAC1B,oBAAY,iBAAiB,IAAI,eAAe,IAAI;AAAA,aAC/C;AACL,oBAAY,eAAe,MAAM,eAAe,IAAI;AAAA;AAEtD;AACA,oBAAc,UAAU,MAAM;AAC9B,gBAAU,MAAM,WAAW;AAC3B,SAAG;AACH,SAAG;AAAA,eACM,SAASA,gBAAW,OAAO;AACpC;AACA,aAAO;AACP,UAAI,UAAU,MAAM,aAAa;AAC/B,kBAAU;AAAA;AAAA,eAEH,CAACA,gBAAW,KAAKA,gBAAW,KAAK,SAAS,OAAO;AAC1D,gBAAU;AACV;AAAA;AAAA;AAIJ,sBAAoB;AAClB,gBAAY,MAAM,aAAa,MAAM,OAAO;AAC5C,eAAW,aAAa,iBAAiB;AACzC,eAAW,aAAa,iBAAiB,OAAO;AAChD,QAAI,CAAC,UAAU,MAAM,aAAa;AAChC,iBAAW,aAAa,QAAQ;AAChC,iBAAW,aAAa,YAAY,UAAU,MAAM;AACpD,mBAAS,YAAY;AAAA;AAAA;AAIzB,uBAAqB;AACnB,WAAG,YAAY,WAAW;AAC1B,WAAG,YAAY,OAAO,WAAW,mBAAmB;AAAA;AAGtD,8BAA4B;AAC1B,cAAU,QAAQ,YAAY,MAAM,iBAClC;AAEF,mBAAe,QAAQ,GAAG,MAAM,KAAK,UAAU;AAE/C;AACA;AAAA;AAGF,6BAA2B;AACzB,eAAW;AAAA;AAGb;AAAA;;;;;"}

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

@@ -142,12 +142,12 @@ export declare const ElForm: import("../../utils/types").SFCWithInstall<import("
         inlineMessage: string | boolean;
         showMessage: boolean;
     } & {
-        error?: string | undefined;
         required?: boolean | undefined;
         size?: import("../../utils/types").ComponentSize | undefined;
         label?: string | undefined;
-        rules?: import("./src/form.type").FormItemRule | import("./src/form.type").FormItemRule[] | undefined;
+        error?: string | undefined;
         prop?: string | undefined;
+        rules?: import("./src/form.type").FormItemRule | import("./src/form.type").FormItemRule[] | undefined;
         validateStatus?: string | undefined;
         for?: string | undefined;
     }>, {
@@ -221,12 +221,12 @@ export declare const ElFormItem: import("../../utils/types").SFCWithInstall<impo
     inlineMessage: string | boolean;
     showMessage: boolean;
 } & {
-    error?: string | undefined;
     required?: boolean | undefined;
     size?: import("../../utils/types").ComponentSize | undefined;
     label?: string | undefined;
-    rules?: import("./src/form.type").FormItemRule | import("./src/form.type").FormItemRule[] | undefined;
+    error?: string | undefined;
     prop?: string | undefined;
+    rules?: import("./src/form.type").FormItemRule | import("./src/form.type").FormItemRule[] | undefined;
     validateStatus?: string | undefined;
     for?: string | undefined;
 }>, {

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

@@ -65,12 +65,12 @@ declare const _default: import("vue").DefineComponent<{
     inlineMessage: string | boolean;
     showMessage: boolean;
 } & {
-    error?: string | undefined;
     required?: boolean | undefined;
     size?: ComponentSize | undefined;
     label?: string | undefined;
-    rules?: FormItemRule | FormItemRule[] | undefined;
+    error?: string | undefined;
     prop?: string | undefined;
+    rules?: FormItemRule | FormItemRule[] | undefined;
     validateStatus?: string | undefined;
     for?: string | undefined;
 }>, {

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

@@ -8,8 +8,10 @@ var AsyncValidator = require('async-validator');
 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 form = require('../../../tokens/form.js');
+var index = require('../../../hooks/use-common-props/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -50,7 +52,6 @@ var script = vue.defineComponent({
     }
   },
   setup(props, { slots }) {
-    const $ELEMENT = util.useGlobalConfig();
     const elForm = vue.inject(form.elFormKey, {});
     const validateState = vue.ref("");
     const validateMessage = vue.ref("");
@@ -128,10 +129,7 @@ var script = vue.defineComponent({
       }
       return required;
     });
-    const elFormItemSize = vue.computed(() => props.size || elForm.size);
-    const sizeClass = vue.computed(() => {
-      return elFormItemSize.value || $ELEMENT.size;
-    });
+    const sizeClass = index.useSize(void 0, { formItem: false });
     const validate = (trigger, callback = shared.NOOP) => {
       if (!isValidationEnabled.value) {
         callback();

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

@@ -1 +1 @@
-{"version":3,"file":"form-item.vue_vue_type_script_lang.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 {\n  addUnit,\n  getPropByPath,\n  useGlobalConfig,\n} from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\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 $ELEMENT = useGlobalConfig()\n\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 elFormItemSize = computed(() => props.size || elForm.size)\n    const sizeClass = computed<ComponentSize>(() => {\n      return elFormItemSize.value || $ELEMENT.size\n    })\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","useGlobalConfig","inject","elFormKey","ref","getCurrentInstance","computed","addUnit","getPropByPath","NOOP","AsyncValidator","reactive","toRefs","elFormItemKey"],"mappings":"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"}
+{"version":3,"file":"form-item.vue_vue_type_script_lang.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","reactive","toRefs","elFormItemKey"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"form-item.vue_vue_type_template_id_24eda48b_lang.js","sources":["../../../../../../packages/components/form/src/form-item.vue?vue&type=template&id=24eda48b&lang.js"],"sourcesContent":["<template>\n  <div ref=\"formItemRef\" class=\"el-form-item\" :class=\"formItemClass\">\n    <LabelWrap\n      :is-auto-width=\"labelStyle.width === 'auto'\"\n      :update-all=\"elForm.labelWidth === 'auto'\"\n    >\n      <label\n        v-if=\"label || $slots.label\"\n        :for=\"labelFor\"\n        class=\"el-form-item__label\"\n        :style=\"labelStyle\"\n      >\n        <slot name=\"label\" :label=\"currentLabel\">\n          {{ currentLabel }}\n        </slot>\n      </label>\n    </LabelWrap>\n    <div class=\"el-form-item__content\" :style=\"contentStyle\">\n      <slot></slot>\n      <transition name=\"el-zoom-in-top\">\n        <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n          <div\n            class=\"el-form-item__error\"\n            :class=\"{\n              'el-form-item__error--inline':\n                typeof inlineMessage === 'boolean'\n                  ? inlineMessage\n                  : elForm.inlineMessage || false,\n            }\"\n          >\n            {{ validateMessage }}\n          </div>\n        </slot>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n  nextTick,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport AsyncValidator from 'async-validator'\nimport {\n  addUnit,\n  getPropByPath,\n  useGlobalConfig,\n} from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\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 $ELEMENT = useGlobalConfig()\n\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 elFormItemSize = computed(() => props.size || elForm.size)\n    const sizeClass = computed<ComponentSize>(() => {\n      return elFormItemSize.value || $ELEMENT.size\n    })\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":["_createElementBlock","_createVNode","_renderSlot","_createElementVNode"],"mappings":";;;;;;;;;0BACEA;IAAK,KAAI;AAAA,IAAc,2BAAM,gBAAuB;;IAClDC;MACG,iBAAe,gBAAW;MAC1B,cAAY,YAAO;;2BAEpB;QACQ,cAAS,YAAO,0BADxBD;;UAEG,KAAK;UACN,OAAM;AAAA,UACL,0BAAO;;UAERE,uCAAoB,OAAO,qBAA3B;oDACK;;;;;;IAITC;MAAK,OAAM;AAAA,MAAyB,0BAAO;;MACzCD;MACAD,kCAAY,MAAK;6BACf;UAAY,uBAAZC;;YAA2C,OAAO;aAAlD;YACEC;cACE,2BAAM;;;mCAQH;;;;;;;;;;;"}
+{"version":3,"file":"form-item.vue_vue_type_template_id_24eda48b_lang.js","sources":["../../../../../../packages/components/form/src/form-item.vue?vue&type=template&id=24eda48b&lang.js"],"sourcesContent":["<template>\n  <div ref=\"formItemRef\" class=\"el-form-item\" :class=\"formItemClass\">\n    <LabelWrap\n      :is-auto-width=\"labelStyle.width === 'auto'\"\n      :update-all=\"elForm.labelWidth === 'auto'\"\n    >\n      <label\n        v-if=\"label || $slots.label\"\n        :for=\"labelFor\"\n        class=\"el-form-item__label\"\n        :style=\"labelStyle\"\n      >\n        <slot name=\"label\" :label=\"currentLabel\">\n          {{ currentLabel }}\n        </slot>\n      </label>\n    </LabelWrap>\n    <div class=\"el-form-item__content\" :style=\"contentStyle\">\n      <slot></slot>\n      <transition name=\"el-zoom-in-top\">\n        <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n          <div\n            class=\"el-form-item__error\"\n            :class=\"{\n              'el-form-item__error--inline':\n                typeof inlineMessage === 'boolean'\n                  ? inlineMessage\n                  : elForm.inlineMessage || false,\n            }\"\n          >\n            {{ validateMessage }}\n          </div>\n        </slot>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n  nextTick,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport AsyncValidator from 'async-validator'\nimport { addUnit, getPropByPath } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useSize } from '@element-plus/hooks'\nimport LabelWrap from './label-wrap'\n\nimport type { PropType, CSSProperties } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { ElFormContext, ValidateFieldCallback } from '@element-plus/tokens'\nimport type { FormItemRule } from './form.type'\n\nexport default defineComponent({\n  name: 'ElFormItem',\n  componentName: 'ElFormItem',\n  components: {\n    LabelWrap,\n  },\n  props: {\n    label: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    prop: String,\n    required: {\n      type: Boolean,\n      default: undefined,\n    },\n    rules: [Object, Array] as PropType<FormItemRule | FormItemRule[]>,\n    error: String,\n    validateStatus: String,\n    for: String,\n    inlineMessage: {\n      type: [String, Boolean],\n      default: '',\n    },\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n  },\n  setup(props, { slots }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const validateState = ref('')\n    const validateMessage = ref('')\n    const isValidationEnabled = ref(false)\n\n    const computedLabelWidth = ref('')\n\n    const formItemRef = ref<HTMLDivElement>()\n\n    const vm = getCurrentInstance()\n    const isNested = computed(() => {\n      let parent = vm.parent\n      while (parent && parent.type.name !== 'ElForm') {\n        if (parent.type.name === 'ElFormItem') {\n          return true\n        }\n        parent = parent.parent\n      }\n      return false\n    })\n\n    let initialValue = undefined\n\n    watch(\n      () => props.error,\n      (val) => {\n        validateMessage.value = val\n        validateState.value = val ? 'error' : ''\n      },\n      {\n        immediate: true,\n      }\n    )\n    watch(\n      () => props.validateStatus,\n      (val) => {\n        validateState.value = val\n      }\n    )\n\n    const labelFor = computed(() => props.for || props.prop)\n    const labelStyle = computed(() => {\n      const ret: CSSProperties = {}\n      if (elForm.labelPosition === 'top') return ret\n      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth)\n      if (labelWidth) {\n        ret.width = labelWidth\n      }\n      return ret\n    })\n    const contentStyle = computed(() => {\n      const ret: CSSProperties = {}\n      if (elForm.labelPosition === 'top' || elForm.inline) {\n        return ret\n      }\n      if (!props.label && !props.labelWidth && isNested.value) {\n        return ret\n      }\n      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth)\n      if (!props.label && !slots.label) {\n        ret.marginLeft = labelWidth\n      }\n      return ret\n    })\n    const fieldValue = computed(() => {\n      const model = elForm.model\n      if (!model || !props.prop) {\n        return\n      }\n\n      let path = props.prop\n      if (path.indexOf(':') !== -1) {\n        path = path.replace(/:/, '.')\n      }\n\n      return getPropByPath(model, path, true).v\n    })\n    const isRequired = computed(() => {\n      const rules = getRules()\n      let required = false\n\n      if (rules && rules.length) {\n        rules.every((rule) => {\n          if (rule.required) {\n            required = true\n            return false\n          }\n          return true\n        })\n      }\n      return required\n    })\n    const sizeClass = useSize(undefined, { formItem: false })\n\n    const validate = (\n      trigger: string,\n      callback: ValidateFieldCallback = NOOP\n    ) => {\n      if (!isValidationEnabled.value) {\n        callback()\n        return\n      }\n      const rules = getFilteredRule(trigger)\n      if ((!rules || rules.length === 0) && props.required === undefined) {\n        callback()\n        return\n      }\n      validateState.value = 'validating'\n      const descriptor = {}\n      if (rules && rules.length > 0) {\n        rules.forEach((rule) => {\n          delete rule.trigger\n        })\n      }\n      descriptor[props.prop] = rules\n      const validator = new AsyncValidator(descriptor)\n      const model = {}\n      model[props.prop] = fieldValue.value\n      validator.validate(model, { firstFields: true }, (errors, fields) => {\n        validateState.value = !errors ? 'success' : 'error'\n        validateMessage.value = errors\n          ? errors[0].message || `${props.prop} is required`\n          : ''\n        // fix: #3860 after version 3.5.2, async-validator also return fields if validation fails\n        callback(validateMessage.value, errors ? fields : {})\n        elForm.emit?.(\n          'validate',\n          props.prop,\n          !errors,\n          validateMessage.value || null\n        )\n      })\n    }\n\n    const clearValidate = () => {\n      validateState.value = ''\n      validateMessage.value = ''\n    }\n    const resetField = () => {\n      const model = elForm.model\n      const value = fieldValue.value\n      let path = props.prop\n      if (path.indexOf(':') !== -1) {\n        path = path.replace(/:/, '.')\n      }\n      const prop = getPropByPath(model, path, true)\n      if (Array.isArray(value)) {\n        prop.o[prop.k] = [].concat(initialValue)\n      } else {\n        prop.o[prop.k] = initialValue\n      }\n      nextTick(() => {\n        clearValidate()\n      })\n    }\n\n    const getRules = () => {\n      const formRules = elForm.rules\n      const selfRules = props.rules\n      const requiredRule =\n        props.required !== undefined ? { required: !!props.required } : []\n\n      const prop = getPropByPath(formRules, props.prop || '', false)\n      const normalizedRule = formRules ? prop.o[props.prop || ''] || prop.v : []\n\n      return [].concat(selfRules || normalizedRule || []).concat(requiredRule)\n    }\n    const getFilteredRule = (trigger) => {\n      const rules = getRules()\n\n      return rules\n        .filter((rule) => {\n          if (!rule.trigger || trigger === '') return true\n          if (Array.isArray(rule.trigger)) {\n            return rule.trigger.indexOf(trigger) > -1\n          } else {\n            return rule.trigger === trigger\n          }\n        })\n        .map((rule) => ({ ...rule }))\n    }\n\n    const evaluateValidationEnabled = () => {\n      isValidationEnabled.value = !!getRules()?.length\n    }\n\n    const updateComputedLabelWidth = (width: string | number) => {\n      computedLabelWidth.value = width ? `${width}px` : ''\n    }\n\n    const elFormItem = reactive({\n      ...toRefs(props),\n      size: sizeClass,\n      validateState,\n      $el: formItemRef,\n      evaluateValidationEnabled,\n      resetField,\n      clearValidate,\n      validate,\n      updateComputedLabelWidth,\n    })\n\n    onMounted(() => {\n      if (props.prop) {\n        elForm?.addField(elFormItem)\n\n        const value = fieldValue.value\n        initialValue = Array.isArray(value) ? [...value] : value\n\n        evaluateValidationEnabled()\n      }\n    })\n    onBeforeUnmount(() => {\n      elForm?.removeField(elFormItem)\n    })\n\n    provide(elFormItemKey, elFormItem)\n\n    const formItemClass = computed(() => [\n      {\n        'el-form-item--feedback': elForm.statusIcon,\n        'is-error': validateState.value === 'error',\n        'is-validating': validateState.value === 'validating',\n        'is-success': validateState.value === 'success',\n        'is-required': isRequired.value || props.required,\n        'is-no-asterisk': elForm.hideRequiredAsterisk,\n      },\n      sizeClass.value ? `el-form-item--${sizeClass.value}` : '',\n    ])\n\n    const shouldShowError = computed(() => {\n      return (\n        validateState.value === 'error' &&\n        props.showMessage &&\n        elForm.showMessage\n      )\n    })\n\n    const currentLabel = computed(\n      () => (props.label || '') + (elForm.labelSuffix || '')\n    )\n\n    return {\n      formItemRef,\n      formItemClass,\n      shouldShowError,\n      elForm,\n      labelStyle,\n      contentStyle,\n      validateMessage,\n      labelFor,\n      resetField,\n      clearValidate,\n      currentLabel,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_renderSlot","_createElementVNode"],"mappings":";;;;;;;;;0BACEA;IAAK,KAAI;AAAA,IAAc,2BAAM,gBAAuB;;IAClDC;MACG,iBAAe,gBAAW;MAC1B,cAAY,YAAO;;2BAEpB;QACQ,cAAS,YAAO,0BADxBD;;UAEG,KAAK;UACN,OAAM;AAAA,UACL,0BAAO;;UAERE,uCAAoB,OAAO,qBAA3B;oDACK;;;;;;IAITC;MAAK,OAAM;AAAA,MAAyB,0BAAO;;MACzCD;MACAD,kCAAY,MAAK;6BACf;UAAY,uBAAZC;;YAA2C,OAAO;aAAlD;YACEC;cACE,2BAAM;;;mCAQH;;;;;;;;;;;"}

package/lib/components/image-viewer/src/image-viewer.vue_vue_type_script_lang.js

@@ -8,18 +8,18 @@ var index = require('../../icon/index.js');
 require('../../../hooks/index.js');
 var aria = require('../../../utils/aria.js');
 var util = require('../../../utils/util.js');
-var icons = require('@element-plus/icons');
+var iconsVue = require('@element-plus/icons-vue');
 var imageViewer = require('./image-viewer.js');
 var index$1 = require('../../../hooks/use-locale/index.js');
 
 const Mode = {
   CONTAIN: {
     name: "contain",
-    icon: vue.markRaw(icons.FullScreen)
+    icon: vue.markRaw(iconsVue.FullScreen)
   },
   ORIGINAL: {
     name: "original",
-    icon: vue.markRaw(icons.ScaleToOriginal)
+    icon: vue.markRaw(iconsVue.ScaleToOriginal)
   }
 };
 const mousewheelEventName = util.isFirefox() ? "DOMMouseScroll" : "mousewheel";
@@ -27,13 +27,13 @@ var script = vue.defineComponent({
   name: "ElImageViewer",
   components: {
     ElIcon: index.ElIcon,
-    Close: icons.Close,
-    ArrowLeft: icons.ArrowLeft,
-    ArrowRight: icons.ArrowRight,
-    ZoomOut: icons.ZoomOut,
-    ZoomIn: icons.ZoomIn,
-    RefreshLeft: icons.RefreshLeft,
-    RefreshRight: icons.RefreshRight
+    Close: iconsVue.Close,
+    ArrowLeft: iconsVue.ArrowLeft,
+    ArrowRight: iconsVue.ArrowRight,
+    ZoomOut: iconsVue.ZoomOut,
+    ZoomIn: iconsVue.ZoomIn,
+    RefreshLeft: iconsVue.RefreshLeft,
+    RefreshRight: iconsVue.RefreshRight
   },
   props: imageViewer.imageViewerProps,
   emits: imageViewer.imageViewerEmits,