UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 3.13 kB
{"version":3,"file":"trigger2.mjs","names":[],"sources":["../../../../../../packages/components/tooltip/src/trigger.vue"],"sourcesContent":["<template>\n <el-popper-trigger\n :id=\"id\"\n :virtual-ref=\"virtualRef\"\n :open=\"open\"\n :virtual-triggering=\"virtualTriggering\"\n :class=\"ns.e('trigger')\"\n @blur=\"onBlur\"\n @click=\"onClick\"\n @contextmenu=\"onContextMenu\"\n @focus=\"onFocus\"\n @mouseenter=\"onMouseenter\"\n @mouseleave=\"onMouseleave\"\n @keydown=\"onKeydown\"\n >\n <slot />\n </el-popper-trigger>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, nextTick, ref, toRef, unref } from 'vue'\nimport { ElPopperTrigger } from '@element-plus/components/popper'\nimport {\n composeEventHandlers,\n focusElement,\n getEventCode,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { TOOLTIP_INJECTION_KEY } from './constants'\nimport { whenTrigger } from './utils'\nimport { useTooltipTriggerPropsDefaults } from './trigger'\n\nimport type { UseTooltipTriggerProps } from './trigger'\nimport type { OnlyChildExpose } from '@element-plus/components/slot'\n\ndefineOptions({\n name: 'ElTooltipTrigger',\n})\n\nconst props = withDefaults(\n defineProps<UseTooltipTriggerProps>(),\n useTooltipTriggerPropsDefaults\n)\n\nconst ns = useNamespace('tooltip')\nconst { controlled, id, open, onOpen, onClose, onToggle } = inject(\n TOOLTIP_INJECTION_KEY,\n undefined\n)!\n\nconst triggerRef = ref<OnlyChildExpose | null>(null)\n\nconst stopWhenControlledOrDisabled = () => {\n if (unref(controlled) || props.disabled) {\n return true\n }\n}\nconst trigger = toRef(props, 'trigger')\nconst onMouseenter = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'hover', (e) => {\n onOpen(e)\n\n if (props.focusOnTarget && e.target) {\n nextTick(() => {\n focusElement(e.target as HTMLElement, { preventScroll: true })\n })\n }\n })\n)\nconst onMouseleave = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'hover', onClose)\n)\nconst onClick = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'click', (e) => {\n // distinguish left click\n if ((e as MouseEvent).button === 0) {\n onToggle(e)\n }\n })\n)\n\nconst onFocus = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'focus', onOpen)\n)\n\nconst onBlur = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'focus', onClose)\n)\n\nconst onContextMenu = composeEventHandlers(\n stopWhenControlledOrDisabled,\n whenTrigger(trigger, 'contextmenu', (e: Event) => {\n e.preventDefault()\n onToggle(e)\n })\n)\n\nconst onKeydown = composeEventHandlers(\n stopWhenControlledOrDisabled,\n (e: Event) => {\n const code = getEventCode(e as KeyboardEvent)\n if (props.triggerKeys.includes(code)) {\n e.preventDefault()\n onToggle(e)\n }\n }\n)\n\ndefineExpose({\n /**\n * @description trigger element\n */\n triggerRef,\n})\n</script>\n"],"mappings":""}