@element-plus/nightly 0.0.20220102 → 0.0.20220106

package/es/components/dropdown/src/dropdown.vue_vue_type_script_lang.mjs

@@ -1,13 +1,17 @@
-import { defineComponent, getCurrentInstance, ref, computed, watch, provide, onMounted } from 'vue';
+import { defineComponent, getCurrentInstance, ref, computed, unref, provide, toRef } from 'vue';
 import { ElButton } from '../../button/index.mjs';
-import _Popper from '../../popper/index.mjs';
+import { ElTooltip } from '../../tooltip/index.mjs';
 import { ElScrollbar } from '../../scrollbar/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
-import { addClass, removeClass, on } from '../../../utils/dom.mjs';
+import '../../focus-trap/index.mjs';
+import '../../roving-focus-group/index.mjs';
 import { addUnit } from '../../../utils/util.mjs';
 import { ArrowDown } from '@element-plus/icons-vue';
 import '../../../hooks/index.mjs';
-import { Effect } from '../../popper/src/use-popper/defaults.mjs';
+import { ElCollection, dropdownProps } from './dropdown.mjs';
+import { DROPDOWN_INJECTION_KEY } from './tokens.mjs';
+import script$1 from '../../focus-trap/src/focus-trap.vue_vue_type_script_lang.mjs';
+import script$2 from '../../roving-focus-group/src/roving-focus-group.vue_vue_type_script_lang.mjs';
 import { useSize } from '../../../hooks/use-common-props/index.mjs';
 
 const { ButtonGroup: ElButtonGroup } = ElButton;
@@ -15,193 +19,96 @@ var script = defineComponent({
   name: "ElDropdown",
   components: {
     ElButton,
+    ElFocusTrap: script$1,
     ElButtonGroup,
     ElScrollbar,
-    ElPopper: _Popper,
+    ElDropdownCollection: ElCollection,
+    ElTooltip,
+    ElRovingFocusGroup: script$2,
     ElIcon,
     ArrowDown
   },
-  props: {
-    trigger: {
-      type: String,
-      default: "hover"
-    },
-    type: String,
-    size: {
-      type: String,
-      default: ""
-    },
-    splitButton: Boolean,
-    hideOnClick: {
-      type: Boolean,
-      default: true
-    },
-    placement: {
-      type: String,
-      default: "bottom"
-    },
-    showTimeout: {
-      type: Number,
-      default: 150
-    },
-    hideTimeout: {
-      type: Number,
-      default: 150
-    },
-    tabindex: {
-      type: [Number, String],
-      default: 0
-    },
-    effect: {
-      type: String,
-      default: Effect.LIGHT
-    },
-    maxHeight: {
-      type: [Number, String],
-      default: ""
-    },
-    popperClass: {
-      type: String,
-      default: ""
-    }
-  },
+  props: dropdownProps,
   emits: ["visible-change", "click", "command"],
   setup(props, { emit }) {
     const _instance = getCurrentInstance();
-    const timeout = ref(null);
+    const triggeringElementRef = ref();
+    const referenceElementRef = ref();
+    const popperRef = ref(null);
+    const contentRef = ref(null);
     const visible = ref(false);
     const scrollbar = ref(null);
+    const currentTabId = ref(null);
+    const isUsingKeyboard = ref(false);
     const wrapStyle = computed(() => ({
       maxHeight: addUnit(props.maxHeight)
     }));
-    watch(() => visible.value, (val) => {
-      if (val)
-        triggerElmFocus();
-      if (!val)
-        triggerElmBlur();
-      emit("visible-change", val);
-    });
-    const focusing = ref(false);
-    watch(() => focusing.value, (val) => {
-      const selfDefine = triggerElm.value;
-      if (selfDefine) {
-        if (val) {
-          addClass(selfDefine, "focusing");
-        } else {
-          removeClass(selfDefine, "focusing");
-        }
-      }
-    });
-    const triggerVnode = ref(null);
-    const triggerElm = computed(() => {
-      var _a, _b, _c;
-      const _ = (_b = (_a = triggerVnode.value) == null ? void 0 : _a.$refs.triggerRef) == null ? void 0 : _b.children[0];
-      return !props.splitButton ? _ : (_c = _ == null ? void 0 : _.children) == null ? void 0 : _c[1];
-    });
+    const dropdownTriggerKls = computed(() => [
+      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ""]
+    ]);
     function handleClick() {
       var _a;
-      if ((_a = triggerElm.value) == null ? void 0 : _a.disabled)
-        return;
-      if (visible.value) {
-        hide();
-      } else {
-        show();
-      }
-    }
-    function show() {
-      var _a;
-      if ((_a = triggerElm.value) == null ? void 0 : _a.disabled)
-        return;
-      timeout.value && clearTimeout(timeout.value);
-      timeout.value = window.setTimeout(() => {
-        visible.value = true;
-      }, ["click", "contextmenu"].includes(props.trigger) ? 0 : props.showTimeout);
+      (_a = popperRef.value) == null ? void 0 : _a.onClose();
     }
-    function hide() {
-      var _a;
-      if ((_a = triggerElm.value) == null ? void 0 : _a.disabled)
-        return;
-      removeTabindex();
-      if (props.tabindex >= 0) {
-        resetTabindex(triggerElm.value);
-      }
-      clearTimeout(timeout.value);
-      timeout.value = window.setTimeout(() => {
-        visible.value = false;
-      }, ["click", "contextmenu"].includes(props.trigger) ? 0 : props.hideTimeout);
-    }
-    function removeTabindex() {
-      var _a;
-      (_a = triggerElm.value) == null ? void 0 : _a.setAttribute("tabindex", "-1");
+    const dropdownSize = useSize();
+    function commandHandler(...args) {
+      emit("command", ...args);
     }
-    function resetTabindex(ele) {
-      removeTabindex();
-      ele == null ? void 0 : ele.setAttribute("tabindex", "0");
+    function onItemEnter() {
     }
-    function triggerElmFocus() {
-      var _a, _b;
-      (_b = (_a = triggerElm.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    function onItemLeave() {
+      const contentEl = unref(contentRef);
+      contentEl == null ? void 0 : contentEl.focus();
+      currentTabId.value = null;
     }
-    function triggerElmBlur() {
-      var _a, _b;
-      (_b = (_a = triggerElm.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
+    function handleCurrentTabIdChange(id) {
+      currentTabId.value = id;
     }
-    const dropdownSize = useSize();
-    function commandHandler(...args) {
-      emit("command", ...args);
+    function handleEntryFocus(e) {
+      if (!isUsingKeyboard.value) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
     }
+    provide(DROPDOWN_INJECTION_KEY, {
+      contentRef,
+      isUsingKeyboard,
+      onItemEnter,
+      onItemLeave
+    });
     provide("elDropdown", {
       instance: _instance,
       dropdownSize,
       visible,
       handleClick,
       commandHandler,
-      show,
-      hide,
-      trigger: computed(() => props.trigger),
-      hideOnClick: computed(() => props.hideOnClick),
-      triggerElm
+      trigger: toRef(props, "trigger"),
+      hideOnClick: toRef(props, "hideOnClick")
     });
-    onMounted(() => {
-      if (!props.splitButton) {
-        on(triggerElm.value, "focus", () => {
-          focusing.value = true;
-        });
-        on(triggerElm.value, "blur", () => {
-          focusing.value = false;
-        });
-        on(triggerElm.value, "click", () => {
-          focusing.value = false;
-        });
-      }
-      if (props.trigger === "hover") {
-        on(triggerElm.value, "mouseenter", show);
-        on(triggerElm.value, "mouseleave", hide);
-      } else if (props.trigger === "click") {
-        on(triggerElm.value, "click", handleClick);
-      } else if (props.trigger === "contextmenu") {
-        on(triggerElm.value, "contextmenu", (e) => {
-          e.preventDefault();
-          handleClick();
-        });
-      }
-      Object.assign(_instance, {
-        handleClick,
-        hide,
-        resetTabindex
+    const onMountOnFocus = (e) => {
+      var _a, _b;
+      e.preventDefault();
+      (_b = (_a = contentRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a, {
+        preventScroll: true
       });
-    });
+    };
     const handlerMainButtonClick = (event) => {
       emit("click", event);
-      hide();
     };
     return {
       visible,
       scrollbar,
       wrapStyle,
+      dropdownTriggerKls,
       dropdownSize,
+      currentTabId,
+      handleCurrentTabIdChange,
       handlerMainButtonClick,
-      triggerVnode
+      handleEntryFocus,
+      onMountOnFocus,
+      popperRef,
+      triggeringElementRef,
+      referenceElementRef
     };
   }
 });

package/es/components/dropdown/src/dropdown.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue_type_script_lang.mjs","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 ${popperClass}`\"\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    popperClass: {\n      type: 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":[],"mappings":"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"}
+{"version":3,"file":"dropdown.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["ElDropdownCollection","ElRovingFocusGroup"],"mappings":";;;;;;;;;;;;;;;;AA6FA,mBAAmB,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC;;AAEhD,EAAE,MAAM,YAAY;;AAEpB,IAAI,QAAQ;;AAEZ,IAAI,aAAa;IACb,WAAW;0BACXA;IACA;wBACAC;IACA,MAAM;IACN,SAAS;;OAEN,EAAE;OACF,EAAE,CAAC;OACH,CAAC;IACJ,MAAM;;IAEN,MAAM;IACN,MAAM,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAG;IACnB,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;;IAE3B,MAAM,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAI;IAC5B,MAAM,YAAY,QAAQ,CAAC,OAAO;MAChC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU;KACpC,CAAC,CAAC,CAAC;IACJ,MAAM,kBAAkB;MACtB,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,aAAa,EAAE;KACvC,CAAC,CAAC;;MAED,IAAI,EAAE,CAAC;MACP,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG;KAClC;IACD,MAAM,YAAY,GAAG,OAAO,EAAE,CAAC;aACtB,eAAe,GAAG,IAAI,EAAE;;;IAGjC,SAAS,WAAW,GAAG;;IAEvB;;MAEE,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC;;KAE3B;aACQ;;;IAGT,SAAS;MACP,IAAI,CAAC;;;OAGJ;;;MAGD,UAAU;MACV,eAAe;;;KAGhB,CAAC,CAAC;WACI,CAAC;;;MAGN,OAAO;MACP,WAAW;oBACG;aACP,EAAE,KAAK,CAAC,KAAK,EAAE;MACtB;;;MAGA,IAAI,EAAE,EAAE,EAAE,CAAC;MACX,CAAC,CAAC;MACF,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG;QACV;OACD,CAAC,CAAC;KACJ;;MAEC,IAAI,CAAC,OAAO,EAAE,MAAM;MACpB;WACK;MACL,OAAO;MACP,SAAS;MACT,SAAS;MACT,kBAAkB;MAClB;;;MAGA,sBAAsB;MACtB,gBAAgB;MAChB,cAAc;eACL;MACT;;;;;;;;"}

package/es/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs

@@ -1,81 +1,121 @@
-import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, renderSlot, createElementVNode, normalizeClass, createBlock } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, createVNode, createSlots, withCtx, renderSlot, createElementVNode, normalizeClass, createBlock, createCommentVNode } from 'vue';
 
 const _hoisted_1 = { class: "el-dropdown" };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _a;
+  const _component_el_dropdown_collection = resolveComponent("el-dropdown-collection");
+  const _component_el_roving_focus_group = resolveComponent("el-roving-focus-group");
+  const _component_el_focus_trap = resolveComponent("el-focus-trap");
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
   const _component_el_button = resolveComponent("el-button");
   const _component_arrow_down = resolveComponent("arrow-down");
   const _component_el_icon = resolveComponent("el-icon");
   const _component_el_button_group = resolveComponent("el-button-group");
-  const _component_el_popper = resolveComponent("el-popper");
   return openBlock(), createElementBlock("div", _hoisted_1, [
-    createVNode(_component_el_popper, {
-      ref: "triggerVnode",
-      visible: _ctx.visible,
-      "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.visible = $event),
-      placement: _ctx.placement,
-      "fallback-placements": ["bottom", "top", "right", "left"],
+    createVNode(_component_el_tooltip, {
+      ref: "popperRef",
       effect: _ctx.effect,
-      pure: "",
+      "fallback-placements": ["bottom", "top", "right", "left"],
+      "gpu-acceleration": false,
+      "hide-after": _ctx.hideTimeout,
       "manual-mode": true,
-      trigger: [_ctx.trigger],
+      placement: _ctx.placement,
       "popper-class": `el-dropdown__popper ${_ctx.popperClass}`,
+      "reference-element": (_a = _ctx.referenceElementRef) == null ? void 0 : _a.$el,
+      trigger: _ctx.trigger,
+      "show-after": _ctx.showTimeout,
+      "stop-popper-mouse-event": false,
+      "virtual-ref": _ctx.triggeringElementRef,
+      "virtual-triggering": _ctx.splitButton,
       "append-to-body": "",
+      pure: "",
       transition: "el-zoom-in-top",
-      "stop-popper-mouse-event": false,
-      "gpu-acceleration": false
-    }, {
-      default: withCtx(() => [
+      onShow: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("visible-change", true)),
+      onHide: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("visible-change", false))
+    }, createSlots({
+      content: withCtx(() => [
         createVNode(_component_el_scrollbar, {
           ref: "scrollbar",
-          tag: "ul",
           "wrap-style": _ctx.wrapStyle,
+          tag: "ul",
           "view-class": "el-dropdown__list"
         }, {
           default: withCtx(() => [
-            renderSlot(_ctx.$slots, "dropdown")
+            createVNode(_component_el_focus_trap, {
+              trapped: "",
+              onMountOnFocus: _ctx.onMountOnFocus
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_roving_focus_group, {
+                  loop: _ctx.loop,
+                  "current-tab-id": _ctx.currentTabId,
+                  orientation: "horizontal",
+                  onCurrentTabIdChange: _ctx.handleCurrentTabIdChange,
+                  onEntryFocus: _ctx.handleEntryFocus
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_dropdown_collection, null, {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "dropdown")
+                      ]),
+                      _: 3
+                    })
+                  ]),
+                  _: 3
+                }, 8, ["loop", "current-tab-id", "onCurrentTabIdChange", "onEntryFocus"])
+              ]),
+              _: 3
+            }, 8, ["onMountOnFocus"])
           ]),
           _: 3
         }, 8, ["wrap-style"])
       ]),
-      trigger: withCtx(() => [
-        createElementVNode("div", {
-          class: normalizeClass([_ctx.dropdownSize ? "el-dropdown--" + _ctx.dropdownSize : ""])
-        }, [
-          !_ctx.splitButton ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createBlock(_component_el_button_group, { key: 1 }, {
-            default: withCtx(() => [
-              createVNode(_component_el_button, {
-                size: _ctx.dropdownSize,
-                type: _ctx.type,
-                onClick: _ctx.handlerMainButtonClick
-              }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "default")
-                ]),
-                _: 3
-              }, 8, ["size", "type", "onClick"]),
-              createVNode(_component_el_button, {
-                size: _ctx.dropdownSize,
-                type: _ctx.type,
-                class: "el-dropdown__caret-button"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_el_icon, { class: "el-dropdown__icon" }, {
-                    default: withCtx(() => [
-                      createVNode(_component_arrow_down)
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["size", "type"])
-            ]),
-            _: 3
-          }))
-        ], 2)
+      _: 2
+    }, [
+      !_ctx.splitButton ? {
+        name: "default",
+        fn: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.dropdownTriggerKls)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)
+        ])
+      } : void 0
+    ]), 1032, ["effect", "hide-after", "placement", "popper-class", "reference-element", "trigger", "show-after", "virtual-ref", "virtual-triggering"]),
+    _ctx.splitButton ? (openBlock(), createBlock(_component_el_button_group, { key: 0 }, {
+      default: withCtx(() => [
+        createVNode(_component_el_button, {
+          ref: "referenceElementRef",
+          size: _ctx.dropdownSize,
+          type: _ctx.type,
+          onClick: _ctx.handlerMainButtonClick
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["size", "type", "onClick"]),
+        createVNode(_component_el_button, {
+          ref: "triggeringElementRef",
+          size: _ctx.dropdownSize,
+          type: _ctx.type,
+          class: "el-dropdown__caret-button"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_icon, { class: "el-dropdown__icon" }, {
+              default: withCtx(() => [
+                createVNode(_component_arrow_down)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["size", "type"])
       ]),
       _: 3
-    }, 8, ["visible", "placement", "effect", "trigger", "popper-class"])
+    })) : createCommentVNode("v-if", true)
   ]);
 }
 

package/es/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs","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 ${popperClass}`\"\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    popperClass: {\n      type: 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":[],"mappings":";;;;;;;;;;;;;;;MAGM;MACQ,qBAAgB;;MACvB;MACA;MACA;MACD;MACC;MACA,UAAU;MACV;MACD,kBAAA;;MAEC;;;aAGiB;;UAEd;;UAEC;uBACU;;;YAEX;;;;;;;;;;;6BAOE;;;0CAEuB;;oBAElB;;;sBAED;;;;;;oBAIC;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;MAGM;MACC;MACA;MACA;MACA;MACA;MACA;MACA,cAAY;MACZ,mBAAiB;MACjB;MACA;MACA,2BAAyB;MACzB;MACA;MACD;MACA,MAAA;MACA;;MAEC;;aAEiB;;UAEd,GAAG,EAAC;UACH,YAAU,EAAE;;UAEb;;;;;cAEwB;;;;kBAEnB;kBACA;kBACD;;kBAEC;;;;;;;;;;;;;;;;;;;;;QASQ;;;;;;;gBAEb;;;;;;qBAIqB;;;;iBAGlB,EAACA;oCACe;;cAElB;;;;;;;;iBAKE,EAACA;;cAEH;;;;;;;;;;;;;;;;"}

package/es/components/dropdown/src/tokens.d.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey, Ref } from 'vue';
+export declare type ElDropdownInjectionContext = {
+    contentRef: Ref<HTMLElement | null>;
+    isUsingKeyboard: Ref<boolean>;
+    onItemLeave: (e: PointerEvent) => void;
+    onItemEnter: (e: PointerEvent) => void;
+};
+export declare const DROPDOWN_INJECTION_KEY: InjectionKey<ElDropdownInjectionContext>;

package/es/components/dropdown/src/tokens.mjs

@@ -0,0 +1,4 @@
+const DROPDOWN_INJECTION_KEY = Symbol("elDropdown");
+
+export { DROPDOWN_INJECTION_KEY };
+//# sourceMappingURL=tokens.mjs.map

package/es/components/dropdown/src/tokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.mjs","sources":["../../../../../../packages/components/dropdown/src/tokens.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue'\n\nexport type ElDropdownInjectionContext = {\n  contentRef: Ref<HTMLElement | null>\n  isUsingKeyboard: Ref<boolean>\n  onItemLeave: (e: PointerEvent) => void\n  onItemEnter: (e: PointerEvent) => void\n}\n\nexport const DROPDOWN_INJECTION_KEY: InjectionKey<ElDropdownInjectionContext> =\n  Symbol('elDropdown')\n"],"names":[],"mappings":"AAAY,MAAC,sBAAsB,GAAG,MAAM,CAAC,YAAY;;;;"}

package/es/components/focus-trap/index.d.ts

@@ -0,0 +1,5 @@
+import ElFocusTrap from './src/focus-trap.vue';
+export { ElFocusTrap };
+export default ElFocusTrap;
+export * from './src/tokens';
+export * from './src/utils';

package/es/components/focus-trap/index.mjs

@@ -0,0 +1,6 @@
+import './src/focus-trap.mjs';
+export { FOCUS_ON_MOUNT, FOCUS_ON_MOUNT_OPTS, FOCUS_ON_UNMOUNT, FOCUS_TRAP_INJECTION_KEY, ON_MOUNT_FOCUS_EVT, ON_UNMOUNT_FOCUS_EVT } from './src/tokens.mjs';
+export { focusFirstDescendant, focusableStack, getEdges, getVisibleElement, isHidden, obtainAllFocusableElements, tryFocus } from './src/utils.mjs';
+import script from './src/focus-trap.vue_vue_type_script_lang.mjs';
+export { default as ElFocusTrap, default } from './src/focus-trap.vue_vue_type_script_lang.mjs';
+//# sourceMappingURL=index.mjs.map

package/es/components/focus-trap/index.mjs.map

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

package/es/components/focus-trap/src/focus-trap.mjs

@@ -0,0 +1,7 @@
+import script from './focus-trap.vue_vue_type_script_lang.mjs';
+export { default } from './focus-trap.vue_vue_type_script_lang.mjs';
+import { render } from './focus-trap.vue_vue_type_template_id_4a8a10c5_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/focus-trap/src/focus-trap.vue";
+//# sourceMappingURL=focus-trap.mjs.map

package/es/components/focus-trap/src/focus-trap.mjs.map

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

package/es/components/focus-trap/src/focus-trap.vue.d.ts

@@ -0,0 +1,21 @@
+declare const _default: import("vue").DefineComponent<{
+    loop: BooleanConstructor;
+    trapped: BooleanConstructor;
+}, {
+    focusTrapRef: import("vue").Ref<HTMLElement | null | undefined>;
+    forwardRef: import("vue").Ref<HTMLElement | null>;
+    onKeydown: (e: KeyboardEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mountOnFocus" | "unmountOnFocus")[], "mountOnFocus" | "unmountOnFocus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    loop?: unknown;
+    trapped?: unknown;
+} & {
+    loop: boolean;
+    trapped: boolean;
+} & {}> & {
+    onMountOnFocus?: ((...args: any[]) => any) | undefined;
+    onUnmountOnFocus?: ((...args: any[]) => any) | undefined;
+}, {
+    loop: boolean;
+    trapped: boolean;
+}>;
+export default _default;