hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 6.08 kB
Source Map (JSON)
{"version":3,"file":"tooltip2.mjs","sources":["../../../../../../packages/components/tooltip/src/tooltip.vue"],"sourcesContent":["<template>\n <hl-popper ref=\"popperRef\" :role=\"role\">\n <hl-tooltip-trigger\n :style=\"$attrs.style\"\n :class=\"$attrs.class\"\n :disabled=\"disabled\"\n :trigger=\"trigger\"\n :trigger-keys=\"triggerKeys\"\n :virtual-ref=\"virtualRef\"\n :virtual-triggering=\"virtualTriggering\"\n >\n <slot v-if=\"$slots.default\"></slot>\n </hl-tooltip-trigger>\n <hl-tooltip-content\n ref=\"contentRef\"\n :aria-label=\"ariaLabel\"\n :boundaries-padding=\"boundariesPadding\"\n :content=\"content\"\n :disabled=\"disabled\"\n :effect=\"effect\"\n :enterable=\"enterable\"\n :fallback-placements=\"fallbackPlacements\"\n :hide-after=\"hideAfter\"\n :gpu-acceleration=\"gpuAcceleration\"\n :offset=\"offset\"\n :persistent=\"persistent\"\n :popper-class=\"popperClass\"\n :popper-style=\"popperStyle\"\n :placement=\"placement\"\n :popper-options=\"popperOptions\"\n :outside-ignore=\"outsideIgnore\"\n :pure=\"pure\"\n :raw-content=\"rawContent\"\n :reference-el=\"referenceEl\"\n :trigger-target-el=\"triggerTargetEl\"\n :show-after=\"showAfter\"\n :strategy=\"strategy\"\n :teleported=\"teleported\"\n :transition=\"transition\"\n :virtual-triggering=\"virtualTriggering\"\n :z-index=\"zIndex\"\n :append-to=\"appendTo\"\n >\n <slot name=\"content\">\n <span v-if=\"rawContent\" v-html=\"content\"></span>\n <span v-else>{{ content }}</span>\n </slot>\n <hl-popper-arrow v-if=\"showArrow\" :arrow-offset=\"arrowOffset\" />\n </hl-tooltip-content>\n </hl-popper>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n onDeactivated,\n provide,\n readonly,\n ref,\n toRef,\n unref,\n watch,\n} from 'vue'\nimport { HlPopper, HlPopperArrow } from '@hongluan-ui/components/popper'\nimport { isBoolean } from '@hongluan-ui/utils'\nimport {\n useDelayedToggle,\n useId,\n usePopperContainer,\n} from '@hongluan-ui/hooks'\nimport { TOOLTIP_INJECTION_KEY } from '@hongluan-ui/tokens'\nimport { tooltipEmits, useTooltipModelToggle, useTooltipProps } from './tooltip'\nimport HlTooltipTrigger from './trigger.vue'\nimport HlTooltipContent from './content.vue'\nimport type { PopperInstance } from '@hongluan-ui/components/popper'\n\ndefineOptions({\n name: 'Tooltip',\n})\n\nconst props = defineProps(useTooltipProps)\nconst emit = defineEmits(tooltipEmits)\n\nusePopperContainer()\n\nconst id = useId()\nconst popperRef = ref<PopperInstance>()\n// TODO any is temporary, replace with `TooltipContentInstance` later\nconst contentRef = ref<any>()\n\nconst updatePopper = () => {\n const popperComponent = unref(popperRef)\n if (popperComponent) {\n popperComponent.popperInstanceRef?.update()\n }\n}\nconst open = ref(false)\nconst toggleReason = ref<Event>()\n\nconst { show, hide, hasUpdateHandler } = useTooltipModelToggle({\n indicator: open,\n toggleReason,\n})\n\nconst { onOpen, onClose } = useDelayedToggle({\n showAfter: toRef(props, 'showAfter'),\n hideAfter: toRef(props, 'hideAfter'),\n autoClose: toRef(props, 'autoClose'),\n open: show,\n close: hide,\n})\n\nconst controlled = computed(\n () => isBoolean(props.visible) && !hasUpdateHandler.value,\n)\n\nprovide(TOOLTIP_INJECTION_KEY, {\n controlled,\n id,\n open: readonly(open),\n trigger: toRef(props, 'trigger'),\n onOpen: (event?: Event) => {\n onOpen(event)\n },\n onClose: (event?: Event) => {\n onClose(event)\n },\n onToggle: (event?: Event) => {\n if (unref(open)) {\n onClose(event)\n } else {\n onOpen(event)\n }\n },\n onShow: () => {\n emit('show', toggleReason.value)\n },\n onHide: () => {\n emit('hide', toggleReason.value)\n },\n onBeforeShow: () => {\n emit('before-show', toggleReason.value)\n },\n onBeforeHide: () => {\n emit('before-hide', toggleReason.value)\n },\n updatePopper,\n})\n\nwatch(\n () => props.disabled,\n disabled => {\n if (disabled && open.value) {\n open.value = false\n }\n },\n)\n\nconst isFocusInsideContent = (event?: FocusEvent) => {\n const popperContent: HTMLElement | undefined =\n contentRef.value?.contentRef?.popperContentRef\n const activeElement = (event?.relatedTarget as Node) || document.activeElement\n\n return popperContent && popperContent.contains(activeElement)\n}\n\nonDeactivated(() => open.value && hide())\n\ndefineExpose({\n /**\n * @description el-popper component instance\n */\n popperRef,\n /**\n * @description el-tooltip-content component instance\n */\n contentRef,\n /**\n * @description validate current focus event is trigger inside el-tooltip-content\n */\n isFocusInsideContent,\n /**\n * @description update el-popper component instance\n */\n updatePopper,\n /**\n * @description expose onOpen function to mange el-tooltip open state\n */\n onOpen,\n /**\n * @description expose onOpen function to mange el-tooltip open state\n */\n onClose,\n /**\n * @description expose hide function\n */\n hide,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;oCA4Ec;AAAA,EACZ,MAAM;AACR;;;;;;;AAKA;AAEA,UAAM,KAAK;AACX,UAAM,YAAY;AAElB,UAAM,aAAa;AAEnB,UAAM,eAAe,MAAM;AACzB,YAAM;AACN,2BAAqB;AACnB;AAA0C;AAC5C;AAEF;AACA,UAAM;AAEN,UAAM;AAAyD;AAClD,MACX;AAAA;AAGF;AAA6C;AACR,MACnC,WAAW,MAAM,OAAO,WAAW;AAAA,MACnC,WAAW,MAAM,OAAO,WAAW;AAAA,MACnC;AAAM,MACN;AAAO;AAGT;AAIA;AAA+B;AAC7B,MACA;AAAA,MACA;AAAmB,MACnB,eAAe;AAAgB,MAC/B,SAAS;AACP,eAAO,KAAK;AAAA;AACd;AAEE,gBAAQ,KAAK;AAAA;AACf;AAEE,sBAAc;AACZ,kBAAQ,KAAK;AAAA;AAEb;AAAY;AACd;AACF;AAEE;AAA+B;AACjC;AAEE;AAA+B;AACjC;AAEE;AAAsC;AACxC;AAEE;AAAsC;AACxC;AACA;AAGF;AAGI,UAAI,YAAY;AACd;AAAa;AACf;AAIJ;AACE,uCACa;AACb,YAAM;AAEN;AAA4D;AAG9D,2CAAuC,CAAC;AAExC;AAAa;AAIX;AAIA,MAIA;AAAA,MAIA;AAAA,MAIA;AAAA,MAIA;AAAA,MAIA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}