element-plus
Version:
A Component Library for Vue 3
1 lines • 9.08 kB
Source Map (JSON)
{"version":3,"file":"dropdown2.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n <div :class=\"[ns.b(), ns.is('disabled', disabled)]\">\n <el-tooltip\n ref=\"popperRef\"\n :role=\"role\"\n :effect=\"effect\"\n :fallback-placements=\"['bottom', 'top']\"\n :popper-options=\"popperOptions\"\n :gpu-acceleration=\"false\"\n :placement=\"placement\"\n :popper-class=\"[ns.e('popper'), popperClass!]\"\n :popper-style=\"popperStyle\"\n :trigger=\"trigger\"\n :trigger-keys=\"triggerKeys\"\n :trigger-target-el=\"contentRef\"\n :show-arrow=\"showArrow\"\n :show-after=\"trigger === 'hover' ? showTimeout : 0\"\n :hide-after=\"trigger === 'hover' ? hideTimeout : 0\"\n :virtual-ref=\"virtualRef ?? triggeringElementRef\"\n :virtual-triggering=\"virtualTriggering || splitButton\"\n :disabled=\"disabled\"\n :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n :teleported=\"teleported\"\n :append-to=\"appendTo\"\n pure\n focus-on-target\n :persistent=\"persistent\"\n @before-show=\"handleBeforeShowTooltip\"\n @show=\"handleShowTooltip\"\n @before-hide=\"handleBeforeHideTooltip\"\n >\n <template #content>\n <el-scrollbar\n ref=\"scrollbar\"\n :wrap-style=\"wrapStyle\"\n tag=\"div\"\n :view-class=\"ns.e('list')\"\n >\n <el-roving-focus-group\n :loop=\"loop\"\n :current-tab-id=\"currentTabId\"\n orientation=\"horizontal\"\n @current-tab-id-change=\"handleCurrentTabIdChange\"\n >\n <slot name=\"dropdown\" />\n </el-roving-focus-group>\n </el-scrollbar>\n </template>\n <template v-if=\"!splitButton\" #default>\n <el-only-child\n :id=\"triggerId\"\n ref=\"triggeringElementRef\"\n role=\"button\"\n :tabindex=\"tabindex\"\n >\n <slot name=\"default\" />\n </el-only-child>\n </template>\n </el-tooltip>\n <template v-if=\"splitButton\">\n <el-button-group>\n <el-button\n ref=\"referenceElementRef\"\n v-bind=\"buttonProps\"\n :size=\"dropdownSize\"\n :type=\"type\"\n :disabled=\"disabled\"\n :tabindex=\"tabindex\"\n @click=\"handlerMainButtonClick\"\n >\n <slot name=\"default\" />\n </el-button>\n <el-button\n :id=\"triggerId\"\n ref=\"triggeringElementRef\"\n v-bind=\"buttonProps\"\n role=\"button\"\n :size=\"dropdownSize\"\n :type=\"type\"\n :class=\"ns.e('caret-button')\"\n :disabled=\"disabled\"\n :tabindex=\"tabindex\"\n :aria-label=\"t('el.dropdown.toggleDropdown')\"\n >\n <el-icon :class=\"ns.e('icon')\"><arrow-down /></el-icon>\n </el-button>\n </el-button-group>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n provide,\n ref,\n toRef,\n unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { ElOnlyChild } from '@element-plus/components/slot'\nimport { useFormSize } from '@element-plus/components/form'\nimport { addUnit, ensureArray } from '@element-plus/utils'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useId, useLocale, useNamespace } from '@element-plus/hooks'\nimport { dropdownProps } from './dropdown'\nimport {\n DROPDOWN_INJECTION_KEY,\n DROPDOWN_INSTANCE_INJECTION_KEY,\n} from './tokens'\n\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n name: 'ElDropdown',\n components: {\n ElButton,\n ElButtonGroup,\n ElScrollbar,\n ElTooltip,\n ElRovingFocusGroup,\n ElOnlyChild,\n ElIcon,\n ArrowDown,\n },\n props: dropdownProps,\n emits: ['visible-change', 'click', 'command'],\n setup(props, { emit }) {\n const _instance = getCurrentInstance()\n const ns = useNamespace('dropdown')\n const { t } = useLocale()\n\n const triggeringElementRef = ref()\n const referenceElementRef = ref()\n const popperRef = ref<TooltipInstance>()\n const contentRef = ref<HTMLElement>()\n const scrollbar = ref(null)\n const currentTabId = ref<string | null>(null)\n const isUsingKeyboard = ref(false)\n\n const wrapStyle = computed<CSSProperties>(() => ({\n maxHeight: addUnit(props.maxHeight),\n }))\n const dropdownTriggerKls = computed(() => [ns.m(dropdownSize.value)])\n const trigger = computed(() => ensureArray(props.trigger))\n\n const defaultTriggerId = useId().value\n const triggerId = computed<string>(() => props.id || defaultTriggerId)\n\n function handleClick() {\n popperRef.value?.onClose(undefined, 0)\n }\n\n function handleClose() {\n popperRef.value?.onClose()\n }\n\n function handleOpen() {\n popperRef.value?.onOpen()\n }\n\n const dropdownSize = useFormSize()\n\n function commandHandler(...args: any[]) {\n emit('command', ...args)\n }\n\n function onItemEnter() {\n // NOOP for now\n }\n\n function onItemLeave() {\n const contentEl = unref(contentRef)\n\n trigger.value.includes('hover') &&\n contentEl?.focus({\n preventScroll: true,\n })\n currentTabId.value = null\n }\n\n function handleCurrentTabIdChange(id: string) {\n currentTabId.value = id\n }\n\n function handleBeforeShowTooltip() {\n emit('visible-change', true)\n }\n\n function handleShowTooltip(event?: Event) {\n isUsingKeyboard.value = event?.type === 'keydown'\n contentRef.value?.focus()\n }\n\n function handleBeforeHideTooltip() {\n emit('visible-change', false)\n }\n\n provide(DROPDOWN_INJECTION_KEY, {\n contentRef,\n role: computed(() => props.role),\n triggerId,\n isUsingKeyboard,\n onItemEnter,\n onItemLeave,\n handleClose,\n })\n\n provide(DROPDOWN_INSTANCE_INJECTION_KEY, {\n instance: _instance,\n dropdownSize,\n handleClick,\n commandHandler,\n trigger: toRef(props, 'trigger'),\n hideOnClick: toRef(props, 'hideOnClick'),\n })\n\n const handlerMainButtonClick = (event: MouseEvent) => {\n emit('click', event)\n }\n\n return {\n t,\n ns,\n scrollbar,\n wrapStyle,\n dropdownTriggerKls,\n dropdownSize,\n triggerId,\n currentTabId,\n handleCurrentTabIdChange,\n handlerMainButtonClick,\n handleClose,\n handleOpen,\n handleBeforeShowTooltip,\n handleShowTooltip,\n handleBeforeHideTooltip,\n popperRef,\n contentRef,\n triggeringElementRef,\n referenceElementRef,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;qBACE,mBAuFM,OAAA,EAvFA,OAAK,eAAA,CAAG,KAAA,GAAG,GAAC,EAAI,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ,CAAA,CAAA,EAAA,GAC9C,YAwDa,uBAAA;EAvDX,KAAI;EACH,MAAM,KAAA;EACN,QAAQ,KAAA;EACR,uBAAqB,CAAA,UAAA,MAAA;EACrB,kBAAgB,KAAA;EAChB,oBAAkB;EAClB,WAAW,KAAA;EACX,gBAAY,CAAG,KAAA,GAAG,EAAC,SAAA,EAAY,KAAA,YAAW;EAC1C,gBAAc,KAAA;EACd,SAAS,KAAA;EACT,gBAAc,KAAA;EACd,qBAAmB,KAAA;EACnB,cAAY,KAAA;EACZ,cAAY,KAAA,YAAO,UAAe,KAAA,cAAW;EAC7C,cAAY,KAAA,YAAO,UAAe,KAAA,cAAW;EAC7C,eAAa,KAAA,cAAc,KAAA;EAC3B,sBAAoB,KAAA,qBAAqB,KAAA;EACzC,UAAU,KAAA;EACV,YAAU,GAAK,KAAA,GAAG,UAAU,MAAK;EACjC,YAAY,KAAA;EACZ,aAAW,KAAA;EACZ,MAAA;EACA,mBAAA;EACC,YAAY,KAAA;EACZ,cAAa,KAAA;EACb,QAAM,KAAA;EACN,cAAa,KAAA;EAAA,EAAA,YAAA;EAEH,SAAO,cAeD,CAdf,YAce,yBAAA;GAbb,KAAI;GACH,cAAY,KAAA;GACb,KAAI;GACH,cAAY,KAAA,GAAG,EAAC,OAAA;GAAA,EAAA;0BASO,CAPxB,YAOwB,kCAAA;IANrB,MAAM,KAAA;IACN,kBAAgB,KAAA;IACjB,aAAY;IACX,sBAAuB,KAAA;IAAA,EAAA;2BAEA,CAAxB,WAAwB,KAAA,QAAA,WAAA,CAAA,CAAA;;;;;;;;;;MAIb,KAAA,cAAA;QAAc;EAAA,IAAA,cAQb,CAPhB,YAOgB,0BAAA;GANb,IAAI,KAAA;GACL,KAAI;GACJ,MAAK;GACJ,UAAU,KAAA;GAAA,EAAA;0BAEY,CAAvB,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KAIb,KAAA,eAAA,WAAA,EACd,YA0BkB,4BAAA,EAAA,KAAA,GAAA,EAAA;EAAA,SAAA,cAfJ,CAVZ,YAUY,sBAVZ,WAUY,EATV,KAAI,uBAAqB,EACjB,KAAA,aAAW;GAClB,MAAM,KAAA;GACN,MAAM,KAAA;GACN,UAAU,KAAA;GACV,UAAU,KAAA;GACV,SAAO,KAAA;GAAA,CAAA,EAAA;0BAEe,CAAvB,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;MAEzB,YAaY,sBAbZ,WAaY;GAZT,IAAI,KAAA;GACL,KAAI;GAAA,EACI,KAAA,aAAW;GACnB,MAAK;GACJ,MAAM,KAAA;GACN,MAAM,KAAA;GACN,OAAO,KAAA,GAAG,EAAC,eAAA;GACX,UAAU,KAAA;GACV,UAAU,KAAA;GACV,cAAY,KAAA,EAAC,6BAAA;GAAA,CAAA,EAAA;0BAEyC,CAAvD,YAAuD,oBAAA,EAA7C,OAAK,eAAE,KAAA,GAAG,EAAC,OAAA,CAAA,EAAA,EAAA;2BAAwB,CAAd,YAAc,sBAAA,CAAA,CAAA"}