feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+18
View File
@@ -0,0 +1,18 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { _default } from "./src/dropdown.vue.js";
import { _default as _default$1 } from "./src/dropdown-item.vue.js";
import { _default as _default$2 } from "./src/dropdown-menu.vue.js";
import { FIRST_KEYS, FIRST_LAST_KEYS, IElDropdownInstance, LAST_KEYS, dropdownItemProps, dropdownMenuProps, dropdownProps } from "./src/dropdown.js";
import { DropdownInstance } from "./src/instance.js";
import { DROPDOWN_INJECTION_KEY, DROPDOWN_INSTANCE_INJECTION_KEY, ElDropdownInjectionContext } from "./src/tokens.js";
//#region ../../packages/components/dropdown/index.d.ts
declare const ElDropdown: SFCWithInstall<typeof _default> & {
DropdownItem: typeof _default$1;
DropdownMenu: typeof _default$2;
};
declare const ElDropdownItem: SFCWithInstall<typeof _default$1>;
declare const ElDropdownMenu: SFCWithInstall<typeof _default$2>;
//#endregion
export { DROPDOWN_INJECTION_KEY, DROPDOWN_INSTANCE_INJECTION_KEY, DropdownInstance, ElDropdown, ElDropdown as default, ElDropdownInjectionContext, ElDropdownItem, ElDropdownMenu, FIRST_KEYS, FIRST_LAST_KEYS, IElDropdownInstance, LAST_KEYS, dropdownItemProps, dropdownMenuProps, dropdownProps };
+18
View File
@@ -0,0 +1,18 @@
import { withInstall, withNoopInstall } from "../../utils/vue/install.mjs";
import { FIRST_KEYS, FIRST_LAST_KEYS, LAST_KEYS, dropdownItemProps, dropdownMenuProps, dropdownProps } from "./src/dropdown.mjs";
import { DROPDOWN_INJECTION_KEY, DROPDOWN_INSTANCE_INJECTION_KEY } from "./src/tokens.mjs";
import dropdown_default from "./src/dropdown2.mjs";
import dropdown_item_default from "./src/dropdown-item.mjs";
import dropdown_menu_default from "./src/dropdown-menu.mjs";
//#region ../../packages/components/dropdown/index.ts
const ElDropdown = withInstall(dropdown_default, {
DropdownItem: dropdown_item_default,
DropdownMenu: dropdown_menu_default
});
const ElDropdownItem = withNoopInstall(dropdown_item_default);
const ElDropdownMenu = withNoopInstall(dropdown_menu_default);
//#endregion
export { DROPDOWN_INJECTION_KEY, DROPDOWN_INSTANCE_INJECTION_KEY, ElDropdown, ElDropdown as default, ElDropdownItem, ElDropdownMenu, FIRST_KEYS, FIRST_LAST_KEYS, LAST_KEYS, dropdownItemProps, dropdownMenuProps, dropdownProps };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Dropdown","DropdownItem","DropdownMenu"],"sources":["../../../../../packages/components/dropdown/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Dropdown from './src/dropdown.vue'\nimport DropdownItem from './src/dropdown-item.vue'\nimport DropdownMenu from './src/dropdown-menu.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElDropdown: SFCWithInstall<typeof Dropdown> & {\n DropdownItem: typeof DropdownItem\n DropdownMenu: typeof DropdownMenu\n} = withInstall(Dropdown, {\n DropdownItem,\n DropdownMenu,\n})\nexport default ElDropdown\nexport const ElDropdownItem: SFCWithInstall<typeof DropdownItem> =\n withNoopInstall(DropdownItem)\nexport const ElDropdownMenu: SFCWithInstall<typeof DropdownMenu> =\n withNoopInstall(DropdownMenu)\nexport * from './src/dropdown'\nexport * from './src/instance'\nexport * from './src/tokens'\n"],"mappings":";;;;;;;;AAOA,MAAa,aAGT,YAAYA,kBAAU;CACxB;CACA;CACD,CAAC;AAEF,MAAa,iBACX,gBAAgBC,sBAAa;AAC/B,MAAa,iBACX,gBAAgBC,sBAAa"}
@@ -0,0 +1,40 @@
import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
import dropdown_item_impl_vue_vue_type_script_lang_default from "./dropdown-item-impl.vue_vue_type_script_lang.mjs";
import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, mergeProps, normalizeClass, openBlock, renderSlot, resolveComponent, resolveDynamicComponent, withCtx, withModifiers } from "vue";
//#region ../../packages/components/dropdown/src/dropdown-item-impl.vue
const _hoisted_1 = [
"aria-disabled",
"tabindex",
"role"
];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_icon = resolveComponent("el-icon");
return openBlock(), createElementBlock(Fragment, null, [_ctx.divided ? (openBlock(), createElementBlock("li", {
key: 0,
role: "separator",
class: normalizeClass(_ctx.ns.bem("menu", "item", "divided"))
}, null, 2)) : createCommentVNode("v-if", true), createElementVNode("li", mergeProps({ ref: _ctx.itemRef }, {
..._ctx.dataset,
..._ctx.$attrs
}, {
"aria-disabled": _ctx.disabled,
class: [_ctx.ns.be("menu", "item"), _ctx.ns.is("disabled", _ctx.disabled)],
tabindex: _ctx.tabIndex,
role: _ctx.role,
onClick: _cache[0] || (_cache[0] = (e) => _ctx.$emit("clickimpl", e)),
onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
onKeydown: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args), ["self"])),
onMousedown: _cache[3] || (_cache[3] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)),
onPointermove: _cache[4] || (_cache[4] = (e) => _ctx.$emit("pointermove", e)),
onPointerleave: _cache[5] || (_cache[5] = (e) => _ctx.$emit("pointerleave", e))
}), [_ctx.icon || _ctx.$slots.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
default: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))])]),
_: 3
})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)], 64);
}
var dropdown_item_impl_default = /* @__PURE__ */ _plugin_vue_export_helper_default(dropdown_item_impl_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
//#endregion
export { dropdown_item_impl_default as default };
//# sourceMappingURL=dropdown-item-impl.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"dropdown-item-impl.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/dropdown-item-impl.vue"],"sourcesContent":["<template>\n <li\n v-if=\"divided\"\n role=\"separator\"\n :class=\"ns.bem('menu', 'item', 'divided')\"\n />\n <li\n :ref=\"itemRef\"\n v-bind=\"{ ...dataset, ...$attrs }\"\n :aria-disabled=\"disabled\"\n :class=\"[ns.be('menu', 'item'), ns.is('disabled', disabled)]\"\n :tabindex=\"tabIndex\"\n :role=\"role\"\n @click=\"(e) => $emit('clickimpl', e)\"\n @focus=\"handleFocus\"\n @keydown.self=\"handleKeydown\"\n @mousedown=\"handleMousedown\"\n @pointermove=\"(e) => $emit('pointermove', e)\"\n @pointerleave=\"(e) => $emit('pointerleave', e)\"\n >\n <el-icon v-if=\"icon || $slots.icon\">\n <slot name=\"icon\">\n <component :is=\"icon\" />\n </slot>\n </el-icon>\n <slot />\n </li>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport {\n composeEventHandlers,\n composeRefs,\n getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { dropdownItemProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n name: 'DropdownItemImpl',\n components: {\n ElIcon,\n },\n props: dropdownItemProps,\n emits: ['pointermove', 'pointerleave', 'click', 'clickimpl'],\n setup(_, { emit }) {\n const ns = useNamespace('dropdown')\n\n const { role: menuRole } = inject(DROPDOWN_INJECTION_KEY, undefined)!\n\n const { collectionItemRef: rovingFocusCollectionItemRef } = inject(\n ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n undefined\n )!\n\n const {\n rovingFocusGroupItemRef,\n tabIndex,\n handleFocus,\n handleKeydown: handleItemKeydown,\n handleMousedown,\n } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, undefined)!\n\n const itemRef = composeRefs(\n rovingFocusCollectionItemRef,\n rovingFocusGroupItemRef\n )\n\n const role = computed<string>(() => {\n if (menuRole.value === 'menu') {\n return 'menuitem'\n } else if (menuRole.value === 'navigation') {\n return 'link'\n }\n return 'button'\n })\n\n const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {\n const code = getEventCode(e)\n\n if (\n [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(\n code\n )\n ) {\n e.preventDefault()\n e.stopImmediatePropagation()\n emit('clickimpl', e)\n return true\n }\n }, handleItemKeydown)\n\n return {\n ns,\n itemRef,\n dataset: {\n [COLLECTION_ITEM_SIGN]: '',\n },\n role,\n tabIndex,\n handleFocus,\n handleKeydown,\n handleMousedown,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;yDAEU,KAAA,WAAA,WAAA,EADR,mBAIE,MAAA;EAAA,KAAA;EAFA,MAAK;EACJ,OAAK,eAAE,KAAA,GAAG,IAAG,QAAA,QAAA,UAAA,CAAA;EAAA,gDAEhB,mBAoBK,MApBL,WAoBK,EAnBF,KAAK,KAAA,SAAO,EAAA;EAAA,GACA,KAAA;EAAO,GAAK,KAAA;EAAM,EAAA;EAC9B,iBAAe,KAAA;EACf,OAAK,CAAG,KAAA,GAAG,GAAE,QAAA,OAAA,EAAkB,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ,CAAA;EACzD,UAAU,KAAA;EACV,MAAM,KAAA;EACN,SAAK,OAAA,OAAA,OAAA,MAAG,MAAM,KAAA,MAAK,aAAc,EAAC;EAClC,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,eAAA,KAAA,YAAA,GAAA,KAAA;EACP,WAAO,OAAA,OAAA,OAAA,KAAA,eAAA,GAAA,SAAO,KAAA,iBAAA,KAAA,cAAA,GAAA,KAAA,EAAa,CAAA,OAAA,CAAA;EAC3B,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,mBAAA,KAAA,gBAAA,GAAA,KAAA;EACX,eAAW,OAAA,OAAA,OAAA,MAAG,MAAM,KAAA,MAAK,eAAgB,EAAC;EAC1C,gBAAY,OAAA,OAAA,OAAA,MAAG,MAAM,KAAA,MAAK,gBAAiB,EAAC;EAAA,CAAA,EAAA,CAE9B,KAAA,QAAQ,KAAA,OAAO,QAAA,WAAA,EAA9B,YAIU,oBAAA,EAAA,KAAA,GAAA,EAAA;EAAA,SAAA,cADD,CAFP,WAEO,KAAA,QAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EADL,YAAwB,wBAAR,KAAA,KAAI,CAAA,EAAA,CAAA;;yCAGxB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA"}
@@ -0,0 +1,63 @@
import { EVENT_CODE } from "../../../constants/aria.mjs";
import { composeEventHandlers, getEventCode } from "../../../utils/dom/event.mjs";
import { composeRefs } from "../../../utils/vue/refs.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElIcon } from "../../icon/index.mjs";
import { COLLECTION_ITEM_SIGN } from "../../collection/src/collection.mjs";
import { ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY as COLLECTION_ITEM_INJECTION_KEY } from "../../roving-focus-group/src/roving-focus-group.mjs";
import { ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY } from "../../roving-focus-group/src/tokens.mjs";
import { dropdownItemProps } from "./dropdown.mjs";
import { DROPDOWN_INJECTION_KEY } from "./tokens.mjs";
import { computed, defineComponent, inject } from "vue";
//#region ../../packages/components/dropdown/src/dropdown-item-impl.vue?vue&type=script&lang.ts
var dropdown_item_impl_vue_vue_type_script_lang_default = defineComponent({
name: "DropdownItemImpl",
components: { ElIcon },
props: dropdownItemProps,
emits: [
"pointermove",
"pointerleave",
"click",
"clickimpl"
],
setup(_, { emit }) {
const ns = useNamespace("dropdown");
const { role: menuRole } = inject(DROPDOWN_INJECTION_KEY, void 0);
const { collectionItemRef: rovingFocusCollectionItemRef } = inject(COLLECTION_ITEM_INJECTION_KEY, void 0);
const { rovingFocusGroupItemRef, tabIndex, handleFocus, handleKeydown: handleItemKeydown, handleMousedown } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, void 0);
const itemRef = composeRefs(rovingFocusCollectionItemRef, rovingFocusGroupItemRef);
const role = computed(() => {
if (menuRole.value === "menu") return "menuitem";
else if (menuRole.value === "navigation") return "link";
return "button";
});
const handleKeydown = composeEventHandlers((e) => {
const code = getEventCode(e);
if ([
EVENT_CODE.enter,
EVENT_CODE.numpadEnter,
EVENT_CODE.space
].includes(code)) {
e.preventDefault();
e.stopImmediatePropagation();
emit("clickimpl", e);
return true;
}
}, handleItemKeydown);
return {
ns,
itemRef,
dataset: { [COLLECTION_ITEM_SIGN]: "" },
role,
tabIndex,
handleFocus,
handleKeydown,
handleMousedown
};
}
});
//#endregion
export { dropdown_item_impl_vue_vue_type_script_lang_default as default };
//# sourceMappingURL=dropdown-item-impl.vue_vue_type_script_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"dropdown-item-impl.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/dropdown-item-impl.vue"],"sourcesContent":["<template>\n <li\n v-if=\"divided\"\n role=\"separator\"\n :class=\"ns.bem('menu', 'item', 'divided')\"\n />\n <li\n :ref=\"itemRef\"\n v-bind=\"{ ...dataset, ...$attrs }\"\n :aria-disabled=\"disabled\"\n :class=\"[ns.be('menu', 'item'), ns.is('disabled', disabled)]\"\n :tabindex=\"tabIndex\"\n :role=\"role\"\n @click=\"(e) => $emit('clickimpl', e)\"\n @focus=\"handleFocus\"\n @keydown.self=\"handleKeydown\"\n @mousedown=\"handleMousedown\"\n @pointermove=\"(e) => $emit('pointermove', e)\"\n @pointerleave=\"(e) => $emit('pointerleave', e)\"\n >\n <el-icon v-if=\"icon || $slots.icon\">\n <slot name=\"icon\">\n <component :is=\"icon\" />\n </slot>\n </el-icon>\n <slot />\n </li>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport {\n composeEventHandlers,\n composeRefs,\n getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { dropdownItemProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n name: 'DropdownItemImpl',\n components: {\n ElIcon,\n },\n props: dropdownItemProps,\n emits: ['pointermove', 'pointerleave', 'click', 'clickimpl'],\n setup(_, { emit }) {\n const ns = useNamespace('dropdown')\n\n const { role: menuRole } = inject(DROPDOWN_INJECTION_KEY, undefined)!\n\n const { collectionItemRef: rovingFocusCollectionItemRef } = inject(\n ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n undefined\n )!\n\n const {\n rovingFocusGroupItemRef,\n tabIndex,\n handleFocus,\n handleKeydown: handleItemKeydown,\n handleMousedown,\n } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, undefined)!\n\n const itemRef = composeRefs(\n rovingFocusCollectionItemRef,\n rovingFocusGroupItemRef\n )\n\n const role = computed<string>(() => {\n if (menuRole.value === 'menu') {\n return 'menuitem'\n } else if (menuRole.value === 'navigation') {\n return 'link'\n }\n return 'button'\n })\n\n const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {\n const code = getEventCode(e)\n\n if (\n [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(\n code\n )\n ) {\n e.preventDefault()\n e.stopImmediatePropagation()\n emit('clickimpl', e)\n return true\n }\n }, handleItemKeydown)\n\n return {\n ns,\n itemRef,\n dataset: {\n [COLLECTION_ITEM_SIGN]: '',\n },\n role,\n tabIndex,\n handleFocus,\n handleKeydown,\n handleMousedown,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;AA+CA,0DAAe,gBAAgB;CAC7B,MAAM;CACN,YAAY,EACV,QACD;CACD,OAAO;CACP,OAAO;EAAC;EAAe;EAAgB;EAAS;EAAY;CAC5D,MAAM,GAAG,EAAE,QAAQ;EACjB,MAAM,KAAK,aAAa,WAAU;EAElC,MAAM,EAAE,MAAM,aAAa,OAAO,wBAAwB,OAAU;EAEpE,MAAM,EAAE,mBAAmB,iCAAiC,OAC1D,+BACA,OACD;EAED,MAAM,EACJ,yBACA,UACA,aACA,eAAe,mBACf,oBACE,OAAO,uCAAuC,OAAU;EAE5D,MAAM,UAAU,YACd,8BACA,wBACF;EAEA,MAAM,OAAO,eAAuB;AAClC,OAAI,SAAS,UAAU,OACrB,QAAO;YACE,SAAS,UAAU,aAC5B,QAAO;AAET,UAAO;IACR;EAED,MAAM,gBAAgB,sBAAsB,MAAqB;GAC/D,MAAM,OAAO,aAAa,EAAC;AAE3B,OACE;IAAC,WAAW;IAAO,WAAW;IAAa,WAAW;IAAM,CAAC,SAC3D,KACF,EACA;AACA,MAAE,gBAAe;AACjB,MAAE,0BAAyB;AAC3B,SAAK,aAAa,EAAC;AACnB,WAAO;;KAER,kBAAiB;AAEpB,SAAO;GACL;GACA;GACA,SAAS,GACN,uBAAuB,IACzB;GACD;GACA;GACA;GACA;GACA;GACF;;CAEH,CAAA"}
@@ -0,0 +1,33 @@
import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
import dropdown_item_vue_vue_type_script_lang_default from "./dropdown-item.vue_vue_type_script_lang.mjs";
import { createBlock, createSlots, createVNode, mergeProps, openBlock, renderSlot, resolveComponent, withCtx } from "vue";
//#region ../../packages/components/dropdown/src/dropdown-item.vue
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_dropdown_item_impl = resolveComponent("el-dropdown-item-impl");
const _component_el_roving_focus_item = resolveComponent("el-roving-focus-item");
return openBlock(), createBlock(_component_el_roving_focus_item, { focusable: !_ctx.disabled }, {
default: withCtx(() => [createVNode(_component_el_dropdown_item_impl, mergeProps(_ctx.propsAndAttrs, {
onPointerleave: _ctx.handlePointerLeave,
onPointermove: _ctx.handlePointerMove,
onClickimpl: _ctx.handleClick
}), createSlots({
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 2
}, [_ctx.$slots.icon ? {
name: "icon",
fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
key: "0"
} : void 0]), 1040, [
"onPointerleave",
"onPointermove",
"onClickimpl"
])]),
_: 3
}, 8, ["focusable"]);
}
var dropdown_item_default = /* @__PURE__ */ _plugin_vue_export_helper_default(dropdown_item_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
//#endregion
export { dropdown_item_default as default };
//# sourceMappingURL=dropdown-item.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"dropdown-item.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue"],"sourcesContent":["<template>\n <el-roving-focus-item :focusable=\"!disabled\">\n <el-dropdown-item-impl\n v-bind=\"propsAndAttrs\"\n @pointerleave=\"handlePointerLeave\"\n @pointermove=\"handlePointerMove\"\n @clickimpl=\"handleClick\"\n >\n <template v-if=\"$slots.icon\" #icon>\n <slot name=\"icon\" />\n </template>\n\n <slot />\n </el-dropdown-item-impl>\n </el-roving-focus-item>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject } from 'vue'\nimport { ElRovingFocusItem } from '@element-plus/components/roving-focus-group'\nimport { composeEventHandlers, whenMouse } from '@element-plus/utils'\nimport ElDropdownItemImpl from './dropdown-item-impl.vue'\nimport { useDropdown } from './useDropdown'\nimport { dropdownItemProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n name: 'ElDropdownItem',\n components: {\n ElRovingFocusItem,\n ElDropdownItemImpl,\n },\n inheritAttrs: false,\n props: dropdownItemProps,\n emits: ['pointermove', 'pointerleave', 'click'],\n setup(props, { emit, attrs }) {\n const { elDropdown } = useDropdown()\n const _instance = getCurrentInstance()\n const { onItemEnter, onItemLeave } = inject(\n DROPDOWN_INJECTION_KEY,\n undefined\n )!\n\n const handlePointerMove = composeEventHandlers(\n (e: PointerEvent) => {\n emit('pointermove', e)\n return e.defaultPrevented\n },\n whenMouse((e) => {\n if (props.disabled) {\n onItemLeave(e)\n return\n }\n\n const target = e.currentTarget as HTMLElement\n /**\n * This handles the following scenario:\n * when the item contains a form element such as input element\n * when the mouse is moving over the element itself which is contained by\n * the item, the default focusing logic should be prevented so that\n * it won't cause weird action.\n */\n if (\n target === document.activeElement ||\n target.contains(document.activeElement)\n ) {\n return\n }\n\n onItemEnter(e)\n if (!e.defaultPrevented) {\n target?.focus({\n preventScroll: true,\n })\n }\n })\n )\n\n const handlePointerLeave = composeEventHandlers((e: PointerEvent) => {\n emit('pointerleave', e)\n return e.defaultPrevented\n }, whenMouse(onItemLeave))\n\n const handleClick = composeEventHandlers(\n (e: PointerEvent) => {\n if (props.disabled) {\n return\n }\n emit('click', e)\n return e.type !== 'keydown' && e.defaultPrevented\n },\n (e) => {\n if (props.disabled) {\n e.stopImmediatePropagation()\n return\n }\n if (elDropdown?.hideOnClick?.value) {\n elDropdown.handleClick?.()\n }\n elDropdown.commandHandler?.(props.command, _instance, e)\n }\n )\n\n // direct usage of v-bind={ ...$props, ...$attrs } causes type errors\n const propsAndAttrs = computed(() => ({ ...props, ...attrs }))\n\n return {\n handleClick,\n handlePointerMove,\n handlePointerLeave,\n propsAndAttrs,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;qBACE,YAauB,iCAAA,EAbA,WAAS,CAAG,KAAA,UAAA,EAAA;yBAYT,CAXxB,YAWwB,kCAXxB,WAWwB,KAVd,eAAa;GACpB,gBAAc,KAAA;GACd,eAAa,KAAA;GACb,aAAW,KAAA;GAAA,CAAA,EAAA,YAAA;0BAMJ,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;MAJQ,KAAA,OAAO,OAAA;SAAO;GAAA,IAAA,cACR,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA"}
@@ -0,0 +1,179 @@
import { SFCWithInstall } from "../../../utils/vue/typescript.js";
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { IconProps } from "../../icon/src/icon.js";
import "../../../index.js";
import * as vue from "vue";
//#region ../../packages/components/dropdown/src/dropdown-item.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
readonly command: EpPropFinalized<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown, () => {}, boolean>;
readonly disabled: BooleanConstructor;
readonly divided: BooleanConstructor;
readonly textValue: StringConstructor;
readonly icon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>, {
handleClick: (event: PointerEvent) => void;
handlePointerMove: (event: PointerEvent) => void;
handlePointerLeave: (event: PointerEvent) => void;
propsAndAttrs: vue.ComputedRef<{
disabled: boolean;
command: EpPropMergeType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
divided: boolean;
icon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown> | undefined;
textValue: string | undefined;
onClick: ((...args: any[]) => any) | undefined;
onPointermove: ((...args: any[]) => any) | undefined;
onPointerleave: ((...args: any[]) => any) | undefined;
}>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "pointerleave" | "pointermove")[], "click" | "pointerleave" | "pointermove", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly command: EpPropFinalized<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown, () => {}, boolean>;
readonly disabled: BooleanConstructor;
readonly divided: BooleanConstructor;
readonly textValue: StringConstructor;
readonly icon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
onPointermove?: ((...args: any[]) => any) | undefined;
onPointerleave?: ((...args: any[]) => any) | undefined;
}>, {
readonly disabled: boolean;
readonly command: EpPropMergeType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
readonly divided: boolean;
}, {}, {
ElRovingFocusItem: vue.DefineComponent<vue.ExtractPropTypes<{
focusable: {
type: BooleanConstructor;
default: boolean;
};
active: BooleanConstructor;
}>, {
id: vue.Ref<string, string>;
handleKeydown: (event: Event) => void;
handleFocus: (event: Event) => void;
handleMousedown: (event: Event) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("focus" | "keydown" | "mousedown")[], "focus" | "keydown" | "mousedown", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
focusable: {
type: BooleanConstructor;
default: boolean;
};
active: BooleanConstructor;
}>> & Readonly<{
onFocus?: ((...args: any[]) => any) | undefined;
onKeydown?: ((...args: any[]) => any) | undefined;
onMousedown?: ((...args: any[]) => any) | undefined;
}>, {
active: boolean;
focusable: boolean;
}, {}, {
ElRovingFocusCollectionItem: {
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
name: string;
setup(_: unknown, {
attrs
}: vue.SetupContext): void;
};
}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
ElDropdownItemImpl: vue.DefineComponent<vue.ExtractPropTypes<{
readonly command: EpPropFinalized<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown, () => {}, boolean>;
readonly disabled: BooleanConstructor;
readonly divided: BooleanConstructor;
readonly textValue: StringConstructor;
readonly icon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>, {
ns: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
itemRef: (el: Element | vue.ComponentPublicInstance | null) => void;
dataset: {
"data-el-collection-item": string;
};
role: vue.ComputedRef<string>;
tabIndex: vue.Ref<number, number>;
handleFocus: (e: Event) => void;
handleKeydown: (event: KeyboardEvent) => void;
handleMousedown: (e: Event) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "pointerleave" | "pointermove" | "clickimpl")[], "click" | "pointerleave" | "pointermove" | "clickimpl", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly command: EpPropFinalized<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown, () => {}, boolean>;
readonly disabled: BooleanConstructor;
readonly divided: BooleanConstructor;
readonly textValue: StringConstructor;
readonly icon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
onPointermove?: ((...args: any[]) => any) | undefined;
onPointerleave?: ((...args: any[]) => any) | undefined;
onClickimpl?: ((...args: any[]) => any) | undefined;
}>, {
readonly disabled: boolean;
readonly command: EpPropMergeType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
readonly divided: boolean;
}, {}, {
ElIcon: SFCWithInstall<{
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
})>;
}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default };
@@ -0,0 +1,76 @@
import { composeEventHandlers, whenMouse } from "../../../utils/dom/event.mjs";
import roving_focus_item_default from "../../roving-focus-group/src/roving-focus-item.mjs";
import { dropdownItemProps } from "./dropdown.mjs";
import { DROPDOWN_INJECTION_KEY } from "./tokens.mjs";
import dropdown_item_impl_default from "./dropdown-item-impl.mjs";
import { useDropdown } from "./useDropdown.mjs";
import { computed, defineComponent, getCurrentInstance, inject } from "vue";
//#region ../../packages/components/dropdown/src/dropdown-item.vue?vue&type=script&lang.ts
var dropdown_item_vue_vue_type_script_lang_default = defineComponent({
name: "ElDropdownItem",
components: {
ElRovingFocusItem: roving_focus_item_default,
ElDropdownItemImpl: dropdown_item_impl_default
},
inheritAttrs: false,
props: dropdownItemProps,
emits: [
"pointermove",
"pointerleave",
"click"
],
setup(props, { emit, attrs }) {
const { elDropdown } = useDropdown();
const _instance = getCurrentInstance();
const { onItemEnter, onItemLeave } = inject(DROPDOWN_INJECTION_KEY, void 0);
const handlePointerMove = composeEventHandlers((e) => {
emit("pointermove", e);
return e.defaultPrevented;
}, whenMouse((e) => {
if (props.disabled) {
onItemLeave(e);
return;
}
const target = e.currentTarget;
/**
* This handles the following scenario:
* when the item contains a form element such as input element
* when the mouse is moving over the element itself which is contained by
* the item, the default focusing logic should be prevented so that
* it won't cause weird action.
*/
if (target === document.activeElement || target.contains(document.activeElement)) return;
onItemEnter(e);
if (!e.defaultPrevented) target?.focus({ preventScroll: true });
}));
const handlePointerLeave = composeEventHandlers((e) => {
emit("pointerleave", e);
return e.defaultPrevented;
}, whenMouse(onItemLeave));
return {
handleClick: composeEventHandlers((e) => {
if (props.disabled) return;
emit("click", e);
return e.type !== "keydown" && e.defaultPrevented;
}, (e) => {
if (props.disabled) {
e.stopImmediatePropagation();
return;
}
if (elDropdown?.hideOnClick?.value) elDropdown.handleClick?.();
elDropdown.commandHandler?.(props.command, _instance, e);
}),
handlePointerMove,
handlePointerLeave,
propsAndAttrs: computed(() => ({
...props,
...attrs
}))
};
}
});
//#endregion
export { dropdown_item_vue_vue_type_script_lang_default as default };
//# sourceMappingURL=dropdown-item.vue_vue_type_script_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"dropdown-item.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue"],"sourcesContent":["<template>\n <el-roving-focus-item :focusable=\"!disabled\">\n <el-dropdown-item-impl\n v-bind=\"propsAndAttrs\"\n @pointerleave=\"handlePointerLeave\"\n @pointermove=\"handlePointerMove\"\n @clickimpl=\"handleClick\"\n >\n <template v-if=\"$slots.icon\" #icon>\n <slot name=\"icon\" />\n </template>\n\n <slot />\n </el-dropdown-item-impl>\n </el-roving-focus-item>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject } from 'vue'\nimport { ElRovingFocusItem } from '@element-plus/components/roving-focus-group'\nimport { composeEventHandlers, whenMouse } from '@element-plus/utils'\nimport ElDropdownItemImpl from './dropdown-item-impl.vue'\nimport { useDropdown } from './useDropdown'\nimport { dropdownItemProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n name: 'ElDropdownItem',\n components: {\n ElRovingFocusItem,\n ElDropdownItemImpl,\n },\n inheritAttrs: false,\n props: dropdownItemProps,\n emits: ['pointermove', 'pointerleave', 'click'],\n setup(props, { emit, attrs }) {\n const { elDropdown } = useDropdown()\n const _instance = getCurrentInstance()\n const { onItemEnter, onItemLeave } = inject(\n DROPDOWN_INJECTION_KEY,\n undefined\n )!\n\n const handlePointerMove = composeEventHandlers(\n (e: PointerEvent) => {\n emit('pointermove', e)\n return e.defaultPrevented\n },\n whenMouse((e) => {\n if (props.disabled) {\n onItemLeave(e)\n return\n }\n\n const target = e.currentTarget as HTMLElement\n /**\n * This handles the following scenario:\n * when the item contains a form element such as input element\n * when the mouse is moving over the element itself which is contained by\n * the item, the default focusing logic should be prevented so that\n * it won't cause weird action.\n */\n if (\n target === document.activeElement ||\n target.contains(document.activeElement)\n ) {\n return\n }\n\n onItemEnter(e)\n if (!e.defaultPrevented) {\n target?.focus({\n preventScroll: true,\n })\n }\n })\n )\n\n const handlePointerLeave = composeEventHandlers((e: PointerEvent) => {\n emit('pointerleave', e)\n return e.defaultPrevented\n }, whenMouse(onItemLeave))\n\n const handleClick = composeEventHandlers(\n (e: PointerEvent) => {\n if (props.disabled) {\n return\n }\n emit('click', e)\n return e.type !== 'keydown' && e.defaultPrevented\n },\n (e) => {\n if (props.disabled) {\n e.stopImmediatePropagation()\n return\n }\n if (elDropdown?.hideOnClick?.value) {\n elDropdown.handleClick?.()\n }\n elDropdown.commandHandler?.(props.command, _instance, e)\n }\n )\n\n // direct usage of v-bind={ ...$props, ...$attrs } causes type errors\n const propsAndAttrs = computed(() => ({ ...props, ...attrs }))\n\n return {\n handleClick,\n handlePointerMove,\n handlePointerLeave,\n propsAndAttrs,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;AA0BA,qDAAe,gBAAgB;CAC7B,MAAM;CACN,YAAY;EACV;EACA;EACD;CACD,cAAc;CACd,OAAO;CACP,OAAO;EAAC;EAAe;EAAgB;EAAQ;CAC/C,MAAM,OAAO,EAAE,MAAM,SAAS;EAC5B,MAAM,EAAE,eAAe,aAAY;EACnC,MAAM,YAAY,oBAAmB;EACrC,MAAM,EAAE,aAAa,gBAAgB,OACnC,wBACA,OACD;EAED,MAAM,oBAAoB,sBACvB,MAAoB;AACnB,QAAK,eAAe,EAAC;AACrB,UAAO,EAAE;KAEX,WAAW,MAAM;AACf,OAAI,MAAM,UAAU;AAClB,gBAAY,EAAC;AACb;;GAGF,MAAM,SAAS,EAAE;;;;;;;;AAQjB,OACE,WAAW,SAAS,iBACpB,OAAO,SAAS,SAAS,cAAa,CAEtC;AAGF,eAAY,EAAC;AACb,OAAI,CAAC,EAAE,iBACL,SAAQ,MAAM,EACZ,eAAe,MAChB,CAAA;IAEJ,CACH;EAEA,MAAM,qBAAqB,sBAAsB,MAAoB;AACnE,QAAK,gBAAgB,EAAC;AACtB,UAAO,EAAE;KACR,UAAU,YAAY,CAAA;AAyBzB,SAAO;GACL,aAxBkB,sBACjB,MAAoB;AACnB,QAAI,MAAM,SACR;AAEF,SAAK,SAAS,EAAC;AACf,WAAO,EAAE,SAAS,aAAa,EAAE;OAElC,MAAM;AACL,QAAI,MAAM,UAAU;AAClB,OAAE,0BAAyB;AAC3B;;AAEF,QAAI,YAAY,aAAa,MAC3B,YAAW,eAAc;AAE3B,eAAW,iBAAiB,MAAM,SAAS,WAAW,EAAC;KAE3D;GAOE;GACA;GACA,eANoB,gBAAgB;IAAE,GAAG;IAAO,GAAG;IAAO,EAAC;GAO7D;;CAEH,CAAA"}
@@ -0,0 +1,25 @@
import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
import dropdown_menu_vue_vue_type_script_lang_default from "./dropdown-menu.vue_vue_type_script_lang.mjs";
import { createElementBlock, normalizeClass, normalizeStyle, openBlock, renderSlot, withModifiers } from "vue";
//#region ../../packages/components/dropdown/src/dropdown-menu.vue
const _hoisted_1 = ["role", "aria-labelledby"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("ul", {
ref: _ctx.dropdownListWrapperRef,
class: normalizeClass(_ctx.dropdownKls),
style: normalizeStyle(_ctx.rovingFocusGroupRootStyle),
tabindex: -1,
role: _ctx.role,
"aria-labelledby": _ctx.triggerId,
onFocusin: _cache[0] || (_cache[0] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
onFocusout: _cache[1] || (_cache[1] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
onKeydown: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args), ["self"])),
onMousedown: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.onMousedown && _ctx.onMousedown(...args), ["self"]))
}, [renderSlot(_ctx.$slots, "default")], 46, _hoisted_1);
}
var dropdown_menu_default = /* @__PURE__ */ _plugin_vue_export_helper_default(dropdown_menu_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
//#endregion
export { dropdown_menu_default as default };
//# sourceMappingURL=dropdown-menu.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"dropdown-menu.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/dropdown-menu.vue"],"sourcesContent":["<template>\n <ul\n :ref=\"dropdownListWrapperRef\"\n :class=\"dropdownKls\"\n :style=\"rovingFocusGroupRootStyle\"\n :tabindex=\"-1\"\n :role=\"role\"\n :aria-labelledby=\"triggerId\"\n @focusin=\"handleFocus\"\n @focusout=\"onBlur\"\n @keydown.self=\"handleKeydown\"\n @mousedown.self=\"onMousedown\"\n >\n <slot />\n </ul>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n composeEventHandlers,\n composeRefs,\n getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport {\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { useNamespace } from '@element-plus/hooks'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\nimport { dropdownMenuProps } from './dropdown'\nimport { useDropdown } from './useDropdown'\n\nexport default defineComponent({\n name: 'ElDropdownMenu',\n props: dropdownMenuProps,\n setup(props) {\n const ns = useNamespace('dropdown')\n const { _elDropdownSize } = useDropdown()\n const size = _elDropdownSize.value\n\n const { contentRef, role, triggerId, isUsingKeyboard, handleClose } =\n inject(DROPDOWN_INJECTION_KEY, undefined)!\n\n const {\n rovingFocusGroupRef,\n rovingFocusGroupRootStyle,\n onBlur,\n onFocus,\n onKeydown,\n onMousedown,\n } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, undefined)!\n\n const { collectionRef: rovingFocusGroupCollectionRef } = inject(\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n undefined\n )!\n\n const dropdownKls = computed(() => {\n return [ns.b('menu'), ns.bm('menu', size?.value)]\n })\n\n const dropdownListWrapperRef = composeRefs(\n contentRef,\n rovingFocusGroupRef,\n rovingFocusGroupCollectionRef\n )\n\n const handleKeydown = composeEventHandlers(\n (e: KeyboardEvent) => {\n props.onKeydown?.(e)\n },\n (e) => {\n const { currentTarget, target } = e\n const code = getEventCode(e)\n\n const isKeydownContained = (currentTarget as Node).contains(\n target as Node\n )\n\n if (isKeydownContained) {\n // TODO: implement typeahead search\n }\n\n if (EVENT_CODE.tab === code) {\n return handleClose()\n }\n\n onKeydown(e)\n }\n )\n\n function handleFocus(e: FocusEvent) {\n isUsingKeyboard.value && onFocus(e)\n }\n\n return {\n size,\n rovingFocusGroupRootStyle,\n dropdownKls,\n role,\n triggerId,\n dropdownListWrapperRef,\n handleKeydown,\n onBlur,\n handleFocus,\n onMousedown,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;qBACE,mBAaK,MAAA;EAZF,KAAK,KAAA;EACL,OAAK,eAAE,KAAA,YAAW;EAClB,OAAK,eAAE,KAAA,0BAAyB;EAChC,UAAU;EACV,MAAM,KAAA;EACN,mBAAiB,KAAA;EACjB,WAAO,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,eAAA,KAAA,YAAA,GAAA,KAAA;EACT,YAAQ,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,UAAA,KAAA,OAAA,GAAA,KAAA;EACV,WAAO,OAAA,OAAA,OAAA,KAAA,eAAA,GAAA,SAAO,KAAA,iBAAA,KAAA,cAAA,GAAA,KAAA,EAAa,CAAA,OAAA,CAAA;EAC3B,aAAS,OAAA,OAAA,OAAA,KAAA,eAAA,GAAA,SAAO,KAAA,eAAA,KAAA,YAAA,GAAA,KAAA,EAAW,CAAA,OAAA,CAAA;EAAA,EAAA,CAE5B,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA"}
@@ -0,0 +1,32 @@
import * as vue from "vue";
//#region ../../packages/components/dropdown/src/dropdown-menu.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
onKeydown: {
readonly type: vue.PropType<(e: KeyboardEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>, {
size: vue.ComputedRef<string> | undefined;
rovingFocusGroupRootStyle: vue.Ref<vue.StyleValue, vue.StyleValue>;
dropdownKls: vue.ComputedRef<string[]>;
role: vue.ComputedRef<"listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree" | undefined>;
triggerId: vue.ComputedRef<string>;
dropdownListWrapperRef: (el: Element | vue.ComponentPublicInstance | null) => void;
handleKeydown: (event: KeyboardEvent) => void;
onBlur: (e: Event) => void;
handleFocus: (e: FocusEvent) => void;
onMousedown: (e: Event) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
onKeydown: {
readonly type: vue.PropType<(e: KeyboardEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default };
@@ -0,0 +1,56 @@
import { EVENT_CODE } from "../../../constants/aria.mjs";
import { composeEventHandlers, getEventCode } from "../../../utils/dom/event.mjs";
import { composeRefs } from "../../../utils/vue/refs.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ROVING_FOCUS_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY } from "../../roving-focus-group/src/roving-focus-group.mjs";
import { ROVING_FOCUS_GROUP_INJECTION_KEY } from "../../roving-focus-group/src/tokens.mjs";
import { dropdownMenuProps } from "./dropdown.mjs";
import { DROPDOWN_INJECTION_KEY } from "./tokens.mjs";
import { useDropdown } from "./useDropdown.mjs";
import { computed, defineComponent, inject } from "vue";
//#region ../../packages/components/dropdown/src/dropdown-menu.vue?vue&type=script&lang.ts
var dropdown_menu_vue_vue_type_script_lang_default = defineComponent({
name: "ElDropdownMenu",
props: dropdownMenuProps,
setup(props) {
const ns = useNamespace("dropdown");
const { _elDropdownSize } = useDropdown();
const size = _elDropdownSize.value;
const { contentRef, role, triggerId, isUsingKeyboard, handleClose } = inject(DROPDOWN_INJECTION_KEY, void 0);
const { rovingFocusGroupRef, rovingFocusGroupRootStyle, onBlur, onFocus, onKeydown, onMousedown } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
const { collectionRef: rovingFocusGroupCollectionRef } = inject(COLLECTION_INJECTION_KEY, void 0);
const dropdownKls = computed(() => {
return [ns.b("menu"), ns.bm("menu", size?.value)];
});
const dropdownListWrapperRef = composeRefs(contentRef, rovingFocusGroupRef, rovingFocusGroupCollectionRef);
const handleKeydown = composeEventHandlers((e) => {
props.onKeydown?.(e);
}, (e) => {
const { currentTarget, target } = e;
const code = getEventCode(e);
if (currentTarget.contains(target)) {}
if (EVENT_CODE.tab === code) return handleClose();
onKeydown(e);
});
function handleFocus(e) {
isUsingKeyboard.value && onFocus(e);
}
return {
size,
rovingFocusGroupRootStyle,
dropdownKls,
role,
triggerId,
dropdownListWrapperRef,
handleKeydown,
onBlur,
handleFocus,
onMousedown
};
}
});
//#endregion
export { dropdown_menu_vue_vue_type_script_lang_default as default };
//# sourceMappingURL=dropdown-menu.vue_vue_type_script_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"dropdown-menu.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/dropdown-menu.vue"],"sourcesContent":["<template>\n <ul\n :ref=\"dropdownListWrapperRef\"\n :class=\"dropdownKls\"\n :style=\"rovingFocusGroupRootStyle\"\n :tabindex=\"-1\"\n :role=\"role\"\n :aria-labelledby=\"triggerId\"\n @focusin=\"handleFocus\"\n @focusout=\"onBlur\"\n @keydown.self=\"handleKeydown\"\n @mousedown.self=\"onMousedown\"\n >\n <slot />\n </ul>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n composeEventHandlers,\n composeRefs,\n getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport {\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { useNamespace } from '@element-plus/hooks'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\nimport { dropdownMenuProps } from './dropdown'\nimport { useDropdown } from './useDropdown'\n\nexport default defineComponent({\n name: 'ElDropdownMenu',\n props: dropdownMenuProps,\n setup(props) {\n const ns = useNamespace('dropdown')\n const { _elDropdownSize } = useDropdown()\n const size = _elDropdownSize.value\n\n const { contentRef, role, triggerId, isUsingKeyboard, handleClose } =\n inject(DROPDOWN_INJECTION_KEY, undefined)!\n\n const {\n rovingFocusGroupRef,\n rovingFocusGroupRootStyle,\n onBlur,\n onFocus,\n onKeydown,\n onMousedown,\n } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, undefined)!\n\n const { collectionRef: rovingFocusGroupCollectionRef } = inject(\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n undefined\n )!\n\n const dropdownKls = computed(() => {\n return [ns.b('menu'), ns.bm('menu', size?.value)]\n })\n\n const dropdownListWrapperRef = composeRefs(\n contentRef,\n rovingFocusGroupRef,\n rovingFocusGroupCollectionRef\n )\n\n const handleKeydown = composeEventHandlers(\n (e: KeyboardEvent) => {\n props.onKeydown?.(e)\n },\n (e) => {\n const { currentTarget, target } = e\n const code = getEventCode(e)\n\n const isKeydownContained = (currentTarget as Node).contains(\n target as Node\n )\n\n if (isKeydownContained) {\n // TODO: implement typeahead search\n }\n\n if (EVENT_CODE.tab === code) {\n return handleClose()\n }\n\n onKeydown(e)\n }\n )\n\n function handleFocus(e: FocusEvent) {\n isUsingKeyboard.value && onFocus(e)\n }\n\n return {\n size,\n rovingFocusGroupRootStyle,\n dropdownKls,\n role,\n triggerId,\n dropdownListWrapperRef,\n handleKeydown,\n onBlur,\n handleFocus,\n onMousedown,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;AAkCA,qDAAe,gBAAgB;CAC7B,MAAM;CACN,OAAO;CACP,MAAM,OAAO;EACX,MAAM,KAAK,aAAa,WAAU;EAClC,MAAM,EAAE,oBAAoB,aAAY;EACxC,MAAM,OAAO,gBAAgB;EAE7B,MAAM,EAAE,YAAY,MAAM,WAAW,iBAAiB,gBACpD,OAAO,wBAAwB,OAAU;EAE3C,MAAM,EACJ,qBACA,2BACA,QACA,SACA,WACA,gBACE,OAAO,kCAAkC,OAAU;EAEvD,MAAM,EAAE,eAAe,kCAAkC,OACvD,0BACA,OACD;EAED,MAAM,cAAc,eAAe;AACjC,UAAO,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,QAAQ,MAAM,MAAM,CAAA;IACjD;EAED,MAAM,yBAAyB,YAC7B,YACA,qBACA,8BACF;EAEA,MAAM,gBAAgB,sBACnB,MAAqB;AACpB,SAAM,YAAY,EAAC;MAEpB,MAAM;GACL,MAAM,EAAE,eAAe,WAAW;GAClC,MAAM,OAAO,aAAa,EAAC;AAM3B,OAJ4B,cAAuB,SACjD,OACF,EAEwB;AAIxB,OAAI,WAAW,QAAQ,KACrB,QAAO,aAAY;AAGrB,aAAU,EAAC;IAEf;EAEA,SAAS,YAAY,GAAe;AAClC,mBAAgB,SAAS,QAAQ,EAAC;;AAGpC,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACF;;CAEH,CAAA"}
@@ -0,0 +1,215 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { Arrayable, Nullable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { PopperEffect } from "../../popper/src/popper.js";
import { Measurable } from "../../popper/src/constants.js";
import { ButtonProps } from "../../button/src/button.js";
import "../../button/index.js";
import { Placement as Placement$1 } from "../../popper/index.js";
import * as vue from "vue";
import { ComponentInternalInstance, ComputedRef } from "vue";
import { Options } from "@popperjs/core";
//#region ../../packages/components/dropdown/src/dropdown.d.ts
interface IElDropdownInstance {
instance?: ComponentInternalInstance;
dropdownSize?: ComputedRef<string>;
handleClick?: () => void;
commandHandler?: (...arg: any[]) => void;
show?: () => void;
hide?: () => void;
trigger?: ComputedRef<string>;
hideOnClick?: ComputedRef<boolean>;
triggerElm?: ComputedRef<Nullable<HTMLButtonElement>>;
}
declare const dropdownProps: {
readonly trigger: {
readonly type: vue.PropType<Arrayable<"click" | "contextmenu" | "hover">>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
readonly __epPropKey: true;
readonly default: "hover";
};
readonly triggerKeys: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => string[], boolean>;
readonly virtualTriggering: BooleanConstructor;
readonly virtualRef: {
readonly type: vue.PropType<Measurable>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly effect: {
readonly default: "light";
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
readonly __epPropKey: true;
};
readonly type: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (((new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger")) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement$1) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement$1)) | null)[], unknown, unknown, "bottom", boolean>;
readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly id: StringConstructor;
readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly splitButton: BooleanConstructor;
readonly hideOnClick: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly loop: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown, 0, boolean>;
readonly maxHeight: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown, "", boolean>;
readonly popperClass: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabled: BooleanConstructor;
readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "menu", boolean>;
readonly buttonProps: {
readonly type: vue.PropType<Partial<ButtonProps>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
};
declare const dropdownItemProps: {
readonly command: EpPropFinalized<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown, () => {}, boolean>;
readonly disabled: BooleanConstructor;
readonly divided: BooleanConstructor;
readonly textValue: StringConstructor;
readonly icon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
declare const dropdownMenuProps: {
onKeydown: {
readonly type: vue.PropType<(e: KeyboardEvent) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
declare const FIRST_KEYS: string[];
declare const LAST_KEYS: string[];
declare const FIRST_LAST_KEYS: string[];
//#endregion
export { FIRST_KEYS, FIRST_LAST_KEYS, IElDropdownInstance, LAST_KEYS, dropdownItemProps, dropdownMenuProps, dropdownProps };
@@ -0,0 +1,117 @@
import { EVENT_CODE } from "../../../constants/aria.mjs";
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { iconPropType } from "../../../utils/vue/icon.mjs";
import { roleTypes } from "../../popper/src/popper.mjs";
import { useTooltipContentProps } from "../../tooltip/src/content.mjs";
import { useTooltipTriggerProps } from "../../tooltip/src/trigger.mjs";
//#region ../../packages/components/dropdown/src/dropdown.ts
const dropdownProps = buildProps({
trigger: {
...useTooltipTriggerProps.trigger,
type: definePropType([String, Array])
},
triggerKeys: {
type: definePropType(Array),
default: () => [
EVENT_CODE.enter,
EVENT_CODE.numpadEnter,
EVENT_CODE.space,
EVENT_CODE.down
]
},
virtualTriggering: useTooltipTriggerProps.virtualTriggering,
virtualRef: useTooltipTriggerProps.virtualRef,
effect: {
...useTooltipContentProps.effect,
default: "light"
},
type: { type: definePropType(String) },
placement: {
type: definePropType(String),
default: "bottom"
},
popperOptions: {
type: definePropType(Object),
default: () => ({})
},
id: String,
size: {
type: String,
default: ""
},
splitButton: Boolean,
hideOnClick: {
type: Boolean,
default: true
},
loop: {
type: Boolean,
default: true
},
showArrow: {
type: Boolean,
default: true
},
showTimeout: {
type: Number,
default: 150
},
hideTimeout: {
type: Number,
default: 150
},
tabindex: {
type: definePropType([Number, String]),
default: 0
},
maxHeight: {
type: definePropType([Number, String]),
default: ""
},
popperClass: useTooltipContentProps.popperClass,
popperStyle: useTooltipContentProps.popperStyle,
disabled: Boolean,
role: {
type: String,
values: roleTypes,
default: "menu"
},
buttonProps: { type: definePropType(Object) },
teleported: useTooltipContentProps.teleported,
appendTo: useTooltipContentProps.appendTo,
persistent: {
type: Boolean,
default: true
}
});
const dropdownItemProps = buildProps({
command: {
type: [
Object,
String,
Number
],
default: () => ({})
},
disabled: Boolean,
divided: Boolean,
textValue: String,
icon: { type: iconPropType }
});
const dropdownMenuProps = buildProps({ onKeydown: { type: definePropType(Function) } });
const FIRST_KEYS = [
EVENT_CODE.down,
EVENT_CODE.pageDown,
EVENT_CODE.home
];
const LAST_KEYS = [
EVENT_CODE.up,
EVENT_CODE.pageUp,
EVENT_CODE.end
];
const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
//#endregion
export { FIRST_KEYS, FIRST_LAST_KEYS, LAST_KEYS, dropdownItemProps, dropdownMenuProps, dropdownProps };
//# sourceMappingURL=dropdown.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,930 @@
import { IconPropType } from "../../../utils/vue/icon.js";
import { SFCWithInstall } from "../../../utils/vue/typescript.js";
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { ComponentSize } from "../../../constants/size.js";
import { Arrayable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { PopperEffect, PopperInstance, roleTypes } from "../../popper/src/popper.js";
import { Measurable } from "../../popper/src/constants.js";
import { ButtonNativeType, ButtonProps, ButtonType } from "../../button/src/button.js";
import { ButtonGroupProps } from "../../button/src/button-group.js";
import { _default as _default$1 } from "../../button/src/button-group.vue.js";
import "../../button/index.js";
import { Translator } from "../../../hooks/use-locale/index.js";
import "../../../hooks/index.js";
import { TooltipTriggerType } from "../../tooltip/src/trigger.js";
import { TooltipContentInstance } from "../../tooltip/src/content.js";
import { TooltipInstance, UseTooltipProps } from "../../tooltip/src/tooltip.js";
import "../../tooltip/index.js";
import { ScrollbarDirection, ScrollbarProps } from "../../scrollbar/src/scrollbar.js";
import "../../scrollbar/index.js";
import { IconProps } from "../../icon/src/icon.js";
import "../../icon/index.js";
import "../../../index.js";
import { Options, Placement } from "../../popper/index.js";
import * as vue from "vue";
import { CSSProperties } from "vue";
//#region ../../packages/components/dropdown/src/dropdown.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
readonly trigger: {
readonly type: vue.PropType<Arrayable<"click" | "contextmenu" | "hover">>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
readonly __epPropKey: true;
readonly default: "hover";
};
readonly triggerKeys: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => string[], boolean>;
readonly virtualTriggering: BooleanConstructor;
readonly virtualRef: {
readonly type: vue.PropType<Measurable>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly effect: {
readonly default: "light";
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
readonly __epPropKey: true;
};
readonly type: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (((new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger")) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], unknown, unknown, "bottom", boolean>;
readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly id: StringConstructor;
readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly splitButton: BooleanConstructor;
readonly hideOnClick: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly loop: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown, 0, boolean>;
readonly maxHeight: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown, "", boolean>;
readonly popperClass: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabled: BooleanConstructor;
readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "menu", boolean>;
readonly buttonProps: {
readonly type: vue.PropType<Partial<ButtonProps>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
}>, {
t: Translator;
ns: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
scrollbar: vue.Ref<null, null>;
wrapStyle: vue.ComputedRef<CSSProperties>;
dropdownTriggerKls: vue.ComputedRef<string[]>;
dropdownSize: vue.ComputedRef<"" | "default" | "small" | "large">;
triggerId: vue.ComputedRef<string>;
currentTabId: vue.Ref<string | null, string | null>;
handleCurrentTabIdChange: (id: string) => void;
handlerMainButtonClick: (event: MouseEvent) => void;
handleClose: () => void;
handleOpen: () => void;
handleBeforeShowTooltip: () => void;
handleShowTooltip: (event?: Event) => void;
handleBeforeHideTooltip: () => void;
popperRef: vue.Ref<TooltipInstance | undefined, TooltipInstance | undefined>;
contentRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
triggeringElementRef: vue.Ref<any, any>;
referenceElementRef: vue.Ref<any, any>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "visible-change" | "command")[], "click" | "visible-change" | "command", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
readonly trigger: {
readonly type: vue.PropType<Arrayable<"click" | "contextmenu" | "hover">>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
readonly __epPropKey: true;
readonly default: "hover";
};
readonly triggerKeys: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => string[], boolean>;
readonly virtualTriggering: BooleanConstructor;
readonly virtualRef: {
readonly type: vue.PropType<Measurable>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly effect: {
readonly default: "light";
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
readonly __epPropKey: true;
};
readonly type: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (((new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger")) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], unknown, unknown, "bottom", boolean>;
readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
readonly id: StringConstructor;
readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly splitButton: BooleanConstructor;
readonly hideOnClick: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly loop: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown, 0, boolean>;
readonly maxHeight: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown, "", boolean>;
readonly popperClass: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | (string | {
[x: string]: boolean;
} | any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabled: BooleanConstructor;
readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "menu", boolean>;
readonly buttonProps: {
readonly type: vue.PropType<Partial<ButtonProps>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
}>> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
"onVisible-change"?: ((...args: any[]) => any) | undefined;
onCommand?: ((...args: any[]) => any) | undefined;
}>, {
readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
readonly size: string;
readonly disabled: boolean;
readonly tabindex: EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>;
readonly virtualTriggering: boolean;
readonly loop: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly placement: EpPropMergeType<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], unknown, unknown>;
readonly popperOptions: Partial<Options>;
readonly showArrow: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly role: EpPropMergeType<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown>;
readonly persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly trigger: Arrayable<"click" | "contextmenu" | "hover">;
readonly triggerKeys: string[];
readonly maxHeight: EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>;
readonly hideOnClick: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly showTimeout: number;
readonly hideTimeout: number;
readonly splitButton: boolean;
}, {}, {
ElButton: {
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ButtonProps> & Readonly<{
onClick?: ((evt: MouseEvent) => any) | undefined;
}>, {
ref: vue.Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
size: vue.ComputedRef<"" | "default" | "small" | "large">;
type: vue.ComputedRef<"default" | "" | "info" | "primary" | "success" | "warning" | "text" | "danger">;
disabled: vue.ComputedRef<boolean>;
shouldAddSpace: vue.ComputedRef<boolean>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
click: (evt: MouseEvent) => void;
}, vue.PublicProps, {
type: ButtonType;
text: boolean;
disabled: boolean;
round: boolean;
dashed: boolean;
nativeType: ButtonNativeType;
loadingIcon: IconPropType;
plain: boolean;
autoInsertSpace: boolean;
tag: string | vue.Component;
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<ButtonProps> & Readonly<{
onClick?: ((evt: MouseEvent) => any) | undefined;
}>, {
ref: vue.Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
size: vue.ComputedRef<"" | "default" | "small" | "large">;
type: vue.ComputedRef<"default" | "" | "info" | "primary" | "success" | "warning" | "text" | "danger">;
disabled: vue.ComputedRef<boolean>;
shouldAddSpace: vue.ComputedRef<boolean>;
}, {}, {}, {}, {
type: ButtonType;
text: boolean;
disabled: boolean;
round: boolean;
dashed: boolean;
nativeType: ButtonNativeType;
loadingIcon: IconPropType;
plain: boolean;
autoInsertSpace: boolean;
tag: string | vue.Component;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<ButtonProps> & Readonly<{
onClick?: ((evt: MouseEvent) => any) | undefined;
}>, {
ref: vue.Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
size: vue.ComputedRef<"" | "default" | "small" | "large">;
type: vue.ComputedRef<"default" | "" | "info" | "primary" | "success" | "warning" | "text" | "danger">;
disabled: vue.ComputedRef<boolean>;
shouldAddSpace: vue.ComputedRef<boolean>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
click: (evt: MouseEvent) => void;
}, string, {
type: ButtonType;
text: boolean;
disabled: boolean;
round: boolean;
dashed: boolean;
nativeType: ButtonNativeType;
loadingIcon: IconPropType;
plain: boolean;
autoInsertSpace: boolean;
tag: string | vue.Component;
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
loading?: (props: {}) => any;
} & {
icon?: (props: {}) => any;
} & {
default?: (props: {}) => any;
};
}) & vue.ObjectPlugin & {
setPropsDefaults: (defaults: Partial<Omit<{
readonly size?: ComponentSize | undefined;
readonly disabled?: boolean | undefined;
readonly type?: ButtonType | undefined;
readonly icon?: IconPropType | undefined;
readonly nativeType?: ButtonNativeType | undefined;
readonly loading?: boolean | undefined;
readonly loadingIcon?: IconPropType | undefined;
readonly plain?: boolean | undefined;
readonly text?: boolean | undefined;
readonly link?: boolean | undefined;
readonly bg?: boolean | undefined;
readonly autofocus?: boolean | undefined;
readonly round?: boolean | undefined;
readonly circle?: boolean | undefined;
readonly dashed?: boolean | undefined;
readonly color?: string | undefined;
readonly dark?: boolean | undefined;
readonly autoInsertSpace?: boolean | undefined;
readonly tag?: (string | vue.Component) | undefined;
readonly onClick?: ((evt: MouseEvent) => any) | undefined;
} & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "onClick" | keyof vue.VNodeProps | keyof vue.AllowedComponentProps>>) => void;
} & {
ButtonGroup: typeof _default$1;
};
ElButtonGroup: {
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ButtonGroupProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {
type: "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger";
direction: "horizontal" | "vertical";
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<ButtonGroupProps> & Readonly<{}>, {}, {}, {}, {}, {
type: "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger";
direction: "horizontal" | "vertical";
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<ButtonGroupProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {
type: "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger";
direction: "horizontal" | "vertical";
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
});
ElScrollbar: SFCWithInstall<{
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
wrapRef: vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
update: () => void;
scrollTo: {
(xCord: number, yCord?: number): void;
(options: ScrollToOptions): void;
};
setScrollTop: (value: number) => void;
setScrollLeft: (value: number) => void;
handleScroll: () => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
scroll: (args_0: {
scrollTop: number;
scrollLeft: number;
}) => void;
"end-reached": (direction: ScrollbarDirection) => void;
}, vue.PublicProps, {
tabindex: number | string;
height: number | string;
maxHeight: number | string;
tag: keyof HTMLElementTagNameMap | (string & {});
distance: number;
wrapStyle: string | false | CSSProperties | vue.StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | CSSProperties | vue.StyleValue[] | null;
minSize: number;
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
wrapRef: vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
update: () => void;
scrollTo: {
(xCord: number, yCord?: number): void;
(options: ScrollToOptions): void;
};
setScrollTop: (value: number) => void;
setScrollLeft: (value: number) => void;
handleScroll: () => void;
}, {}, {}, {}, {
tabindex: number | string;
height: number | string;
maxHeight: number | string;
tag: keyof HTMLElementTagNameMap | (string & {});
distance: number;
wrapStyle: string | false | CSSProperties | vue.StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | CSSProperties | vue.StyleValue[] | null;
minSize: number;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
wrapRef: vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
update: () => void;
scrollTo: {
(xCord: number, yCord?: number): void;
(options: ScrollToOptions): void;
};
setScrollTop: (value: number) => void;
setScrollLeft: (value: number) => void;
handleScroll: () => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
scroll: (args_0: {
scrollTop: number;
scrollLeft: number;
}) => void;
"end-reached": (direction: ScrollbarDirection) => void;
}, string, {
tabindex: number | string;
height: number | string;
maxHeight: number | string;
tag: keyof HTMLElementTagNameMap | (string & {});
distance: number;
wrapStyle: string | false | CSSProperties | vue.StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | CSSProperties | vue.StyleValue[] | null;
minSize: number;
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
})>;
ElTooltip: SFCWithInstall<{
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
updatePopper: () => void;
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
hide: (event?: Event) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
close: (...args: any[]) => void;
hide: (...args: any[]) => void;
show: (...args: any[]) => void;
open: (...args: any[]) => void;
"update:visible": (...args: any[]) => void;
"before-show": (...args: any[]) => void;
"before-hide": (...args: any[]) => void;
}, vue.PublicProps, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | CSSProperties | vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | CSSProperties | vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
updatePopper: () => void;
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
hide: (event?: Event) => void;
}, {}, {}, {}, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | CSSProperties | vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | CSSProperties | vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
updatePopper: () => void;
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
hide: (event?: Event) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
close: (...args: any[]) => void;
hide: (...args: any[]) => void;
show: (...args: any[]) => void;
open: (...args: any[]) => void;
"update:visible": (...args: any[]) => void;
"before-show": (...args: any[]) => void;
"before-hide": (...args: any[]) => void;
}, string, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | CSSProperties | vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | CSSProperties | vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
} & {
content?: (props: {}) => any;
};
})>;
ElRovingFocusGroup: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
ElFocusGroupCollection: {
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
name: string;
setup(): void;
};
ElRovingFocusGroupImpl: vue.DefineComponent<vue.ExtractPropTypes<{
style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentTabId: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string) | (() => string | null) | (((new (...args: any[]) => string) | (() => string | null)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultCurrentTabId: StringConstructor;
loop: BooleanConstructor;
dir: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
orientation: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onBlur: FunctionConstructor;
onFocus: FunctionConstructor;
onMousedown: FunctionConstructor;
}>, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("currentTabIdChange" | "entryFocus")[], "currentTabIdChange" | "entryFocus", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentTabId: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string) | (() => string | null) | (((new (...args: any[]) => string) | (() => string | null)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultCurrentTabId: StringConstructor;
loop: BooleanConstructor;
dir: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
orientation: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onBlur: FunctionConstructor;
onFocus: FunctionConstructor;
onMousedown: FunctionConstructor;
}>> & Readonly<{
onCurrentTabIdChange?: ((...args: any[]) => any) | undefined;
onEntryFocus?: ((...args: any[]) => any) | undefined;
}>, {
loop: boolean;
dir: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
ElOnlyChild: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
ElIcon: SFCWithInstall<{
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
})>;
ArrowDown: vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default };
@@ -0,0 +1,132 @@
import { addUnit } from "../../../utils/dom/style.mjs";
import { ensureArray } from "../../../utils/arrays.mjs";
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { useId } from "../../../hooks/use-id/index.mjs";
import { ElIcon } from "../../icon/index.mjs";
import { OnlyChild } from "../../slot/src/only-child.mjs";
import { useFormSize } from "../../form/src/hooks/use-form-common-props.mjs";
import { ElTooltip } from "../../tooltip/index.mjs";
import { ElScrollbar } from "../../scrollbar/index.mjs";
import { ElButton } from "../../button/index.mjs";
import roving_focus_group_default from "../../roving-focus-group/index.mjs";
import { dropdownProps } from "./dropdown.mjs";
import { DROPDOWN_INJECTION_KEY, DROPDOWN_INSTANCE_INJECTION_KEY } from "./tokens.mjs";
import { ArrowDown } from "@element-plus/icons-vue";
import { computed, defineComponent, getCurrentInstance, provide, ref, toRef, unref } from "vue";
//#region ../../packages/components/dropdown/src/dropdown.vue?vue&type=script&lang.ts
const { ButtonGroup: ElButtonGroup } = ElButton;
var dropdown_vue_vue_type_script_lang_default = defineComponent({
name: "ElDropdown",
components: {
ElButton,
ElButtonGroup,
ElScrollbar,
ElTooltip,
ElRovingFocusGroup: roving_focus_group_default,
ElOnlyChild: OnlyChild,
ElIcon,
ArrowDown
},
props: dropdownProps,
emits: [
"visible-change",
"click",
"command"
],
setup(props, { emit }) {
const _instance = getCurrentInstance();
const ns = useNamespace("dropdown");
const { t } = useLocale();
const triggeringElementRef = ref();
const referenceElementRef = ref();
const popperRef = ref();
const contentRef = ref();
const scrollbar = ref(null);
const currentTabId = ref(null);
const isUsingKeyboard = ref(false);
const wrapStyle = computed(() => ({ maxHeight: addUnit(props.maxHeight) }));
const dropdownTriggerKls = computed(() => [ns.m(dropdownSize.value)]);
const trigger = computed(() => ensureArray(props.trigger));
const defaultTriggerId = useId().value;
const triggerId = computed(() => props.id || defaultTriggerId);
function handleClick() {
popperRef.value?.onClose(void 0, 0);
}
function handleClose() {
popperRef.value?.onClose();
}
function handleOpen() {
popperRef.value?.onOpen();
}
const dropdownSize = useFormSize();
function commandHandler(...args) {
emit("command", ...args);
}
function onItemEnter() {}
function onItemLeave() {
const contentEl = unref(contentRef);
trigger.value.includes("hover") && contentEl?.focus({ preventScroll: true });
currentTabId.value = null;
}
function handleCurrentTabIdChange(id) {
currentTabId.value = id;
}
function handleBeforeShowTooltip() {
emit("visible-change", true);
}
function handleShowTooltip(event) {
isUsingKeyboard.value = event?.type === "keydown";
contentRef.value?.focus();
}
function handleBeforeHideTooltip() {
emit("visible-change", false);
}
provide(DROPDOWN_INJECTION_KEY, {
contentRef,
role: computed(() => props.role),
triggerId,
isUsingKeyboard,
onItemEnter,
onItemLeave,
handleClose
});
provide(DROPDOWN_INSTANCE_INJECTION_KEY, {
instance: _instance,
dropdownSize,
handleClick,
commandHandler,
trigger: toRef(props, "trigger"),
hideOnClick: toRef(props, "hideOnClick")
});
const handlerMainButtonClick = (event) => {
emit("click", event);
};
return {
t,
ns,
scrollbar,
wrapStyle,
dropdownTriggerKls,
dropdownSize,
triggerId,
currentTabId,
handleCurrentTabIdChange,
handlerMainButtonClick,
handleClose,
handleOpen,
handleBeforeShowTooltip,
handleShowTooltip,
handleBeforeHideTooltip,
popperRef,
contentRef,
triggeringElementRef,
referenceElementRef
};
}
});
//#endregion
export { dropdown_vue_vue_type_script_lang_default as default };
//# sourceMappingURL=dropdown.vue_vue_type_script_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,150 @@
import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
import dropdown_vue_vue_type_script_lang_default from "./dropdown.vue_vue_type_script_lang.mjs";
import { createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, mergeProps, normalizeClass, openBlock, renderSlot, resolveComponent, withCtx } from "vue";
//#region ../../packages/components/dropdown/src/dropdown.vue
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_roving_focus_group = resolveComponent("el-roving-focus-group");
const _component_el_scrollbar = resolveComponent("el-scrollbar");
const _component_el_only_child = resolveComponent("el-only-child");
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");
return openBlock(), createElementBlock("div", { class: normalizeClass([_ctx.ns.b(), _ctx.ns.is("disabled", _ctx.disabled)]) }, [createVNode(_component_el_tooltip, {
ref: "popperRef",
role: _ctx.role,
effect: _ctx.effect,
"fallback-placements": ["bottom", "top"],
"popper-options": _ctx.popperOptions,
"gpu-acceleration": false,
placement: _ctx.placement,
"popper-class": [_ctx.ns.e("popper"), _ctx.popperClass],
"popper-style": _ctx.popperStyle,
trigger: _ctx.trigger,
"trigger-keys": _ctx.triggerKeys,
"trigger-target-el": _ctx.contentRef,
"show-arrow": _ctx.showArrow,
"show-after": _ctx.trigger === "hover" ? _ctx.showTimeout : 0,
"hide-after": _ctx.trigger === "hover" ? _ctx.hideTimeout : 0,
"virtual-ref": _ctx.virtualRef ?? _ctx.triggeringElementRef,
"virtual-triggering": _ctx.virtualTriggering || _ctx.splitButton,
disabled: _ctx.disabled,
transition: `${_ctx.ns.namespace.value}-zoom-in-top`,
teleported: _ctx.teleported,
"append-to": _ctx.appendTo,
pure: "",
"focus-on-target": "",
persistent: _ctx.persistent,
onBeforeShow: _ctx.handleBeforeShowTooltip,
onShow: _ctx.handleShowTooltip,
onBeforeHide: _ctx.handleBeforeHideTooltip
}, createSlots({
content: withCtx(() => [createVNode(_component_el_scrollbar, {
ref: "scrollbar",
"wrap-style": _ctx.wrapStyle,
tag: "div",
"view-class": _ctx.ns.e("list")
}, {
default: withCtx(() => [createVNode(_component_el_roving_focus_group, {
loop: _ctx.loop,
"current-tab-id": _ctx.currentTabId,
orientation: "horizontal",
onCurrentTabIdChange: _ctx.handleCurrentTabIdChange
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "dropdown")]),
_: 3
}, 8, [
"loop",
"current-tab-id",
"onCurrentTabIdChange"
])]),
_: 3
}, 8, ["wrap-style", "view-class"])]),
_: 2
}, [!_ctx.splitButton ? {
name: "default",
fn: withCtx(() => [createVNode(_component_el_only_child, {
id: _ctx.triggerId,
ref: "triggeringElementRef",
role: "button",
tabindex: _ctx.tabindex
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 8, ["id", "tabindex"])]),
key: "0"
} : void 0]), 1032, [
"role",
"effect",
"popper-options",
"placement",
"popper-class",
"popper-style",
"trigger",
"trigger-keys",
"trigger-target-el",
"show-arrow",
"show-after",
"hide-after",
"virtual-ref",
"virtual-triggering",
"disabled",
"transition",
"teleported",
"append-to",
"persistent",
"onBeforeShow",
"onShow",
"onBeforeHide"
]), _ctx.splitButton ? (openBlock(), createBlock(_component_el_button_group, { key: 0 }, {
default: withCtx(() => [createVNode(_component_el_button, mergeProps({ ref: "referenceElementRef" }, _ctx.buttonProps, {
size: _ctx.dropdownSize,
type: _ctx.type,
disabled: _ctx.disabled,
tabindex: _ctx.tabindex,
onClick: _ctx.handlerMainButtonClick
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16, [
"size",
"type",
"disabled",
"tabindex",
"onClick"
]), createVNode(_component_el_button, mergeProps({
id: _ctx.triggerId,
ref: "triggeringElementRef"
}, _ctx.buttonProps, {
role: "button",
size: _ctx.dropdownSize,
type: _ctx.type,
class: _ctx.ns.e("caret-button"),
disabled: _ctx.disabled,
tabindex: _ctx.tabindex,
"aria-label": _ctx.t("el.dropdown.toggleDropdown")
}), {
default: withCtx(() => [createVNode(_component_el_icon, { class: normalizeClass(_ctx.ns.e("icon")) }, {
default: withCtx(() => [createVNode(_component_arrow_down)]),
_: 1
}, 8, ["class"])]),
_: 1
}, 16, [
"id",
"size",
"type",
"class",
"disabled",
"tabindex",
"aria-label"
])]),
_: 3
})) : createCommentVNode("v-if", true)], 2);
}
var dropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(dropdown_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
//#endregion
export { dropdown_default as default };
//# sourceMappingURL=dropdown2.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,6 @@
import { _default } from "./dropdown.vue.js";
//#region ../../packages/components/dropdown/src/instance.d.ts
type DropdownInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { DropdownInstance };
@@ -0,0 +1,18 @@
import { PopperProps } from "../../popper/src/popper.js";
import "../../popper/index.js";
import { ComputedRef, InjectionKey, Ref } from "vue";
//#region ../../packages/components/dropdown/src/tokens.d.ts
type ElDropdownInjectionContext = {
contentRef: Ref<HTMLElement | undefined>;
role: ComputedRef<PopperProps['role']>;
triggerId: ComputedRef<string>;
isUsingKeyboard: Ref<boolean>;
onItemLeave: (e: PointerEvent) => void;
onItemEnter: (e: PointerEvent) => void;
handleClose: () => void;
};
declare const DROPDOWN_INJECTION_KEY: InjectionKey<ElDropdownInjectionContext>;
declare const DROPDOWN_INSTANCE_INJECTION_KEY = "elDropdown";
//#endregion
export { DROPDOWN_INJECTION_KEY, DROPDOWN_INSTANCE_INJECTION_KEY, ElDropdownInjectionContext };
@@ -0,0 +1,7 @@
//#region ../../packages/components/dropdown/src/tokens.ts
const DROPDOWN_INJECTION_KEY = Symbol("elDropdown");
const DROPDOWN_INSTANCE_INJECTION_KEY = "elDropdown";
//#endregion
export { DROPDOWN_INJECTION_KEY, DROPDOWN_INSTANCE_INJECTION_KEY };
//# sourceMappingURL=tokens.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"tokens.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/tokens.ts"],"sourcesContent":["import type { PopperProps } from '@element-plus/components/popper'\nimport type { ComputedRef, InjectionKey, Ref } from 'vue'\n\nexport type ElDropdownInjectionContext = {\n contentRef: Ref<HTMLElement | undefined>\n role: ComputedRef<PopperProps['role']>\n triggerId: ComputedRef<string>\n isUsingKeyboard: Ref<boolean>\n onItemLeave: (e: PointerEvent) => void\n onItemEnter: (e: PointerEvent) => void\n handleClose: () => void\n}\n\nexport const DROPDOWN_INJECTION_KEY: InjectionKey<ElDropdownInjectionContext> =\n Symbol('elDropdown')\n\nexport const DROPDOWN_INSTANCE_INJECTION_KEY = 'elDropdown'\n"],"mappings":";AAaA,MAAa,yBACX,OAAO,aAAa;AAEtB,MAAa,kCAAkC"}
@@ -0,0 +1,15 @@
import { DROPDOWN_INSTANCE_INJECTION_KEY } from "./tokens.mjs";
import { computed, inject } from "vue";
//#region ../../packages/components/dropdown/src/useDropdown.ts
const useDropdown = () => {
const elDropdown = inject(DROPDOWN_INSTANCE_INJECTION_KEY, {});
return {
elDropdown,
_elDropdownSize: computed(() => elDropdown?.dropdownSize)
};
};
//#endregion
export { useDropdown };
//# sourceMappingURL=useDropdown.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"useDropdown.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/useDropdown.ts"],"sourcesContent":["import { computed, inject } from 'vue'\nimport { DROPDOWN_INSTANCE_INJECTION_KEY } from './tokens'\n\nimport type { IElDropdownInstance } from './dropdown'\n\nexport const useDropdown = () => {\n const elDropdown = inject<IElDropdownInstance>(\n DROPDOWN_INSTANCE_INJECTION_KEY,\n {}\n )\n const _elDropdownSize = computed(() => elDropdown?.dropdownSize)\n\n return {\n elDropdown,\n _elDropdownSize,\n }\n}\n"],"mappings":";;;;AAKA,MAAa,oBAAoB;CAC/B,MAAM,aAAa,OACjB,iCACA,EAAE,CACH;AAGD,QAAO;EACL;EACA,iBAJsB,eAAe,YAAY,aAAa;EAK/D"}
@@ -0,0 +1,6 @@
import "../../base/style/css.mjs";
import "../../scrollbar/style/css.mjs";
import "../../popper/style/css.mjs";
import "../../button/style/css.mjs";
import "../../button-group/style/css.mjs";
import "element-plus/theme-chalk/el-dropdown.css";
@@ -0,0 +1,6 @@
import "../../base/style/index.mjs";
import "../../scrollbar/style/index.mjs";
import "../../popper/style/index.mjs";
import "../../button/style/index.mjs";
import "../../button-group/style/index.mjs";
import "element-plus/theme-chalk/src/dropdown.scss";