hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 5.77 kB
Source Map (JSON)
{"version":3,"file":"content.mjs","sources":["../../../../../../packages/components/tooltip/src/content.vue"],"sourcesContent":["<template>\n <hl-teleport :disabled=\"!teleported\" :to=\"appendTo\">\n <transition\n :name=\"transition\"\n @after-leave=\"onTransitionLeave\"\n @before-enter=\"onBeforeEnter\"\n @after-enter=\"onAfterShow\"\n @before-leave=\"onBeforeLeave\"\n >\n <hl-popper-content\n v-if=\"shouldRender\"\n v-show=\"shouldShow\"\n :id=\"id\"\n ref=\"contentRef\"\n v-bind=\"$attrs\"\n :aria-label=\"ariaLabel\"\n :aria-hidden=\"ariaHidden\"\n :boundaries-padding=\"boundariesPadding\"\n :fallback-placements=\"fallbackPlacements\"\n :gpu-acceleration=\"gpuAcceleration\"\n :offset=\"offset\"\n :placement=\"placement\"\n :popper-options=\"popperOptions\"\n :strategy=\"strategy\"\n :effect=\"effect\"\n :enterable=\"enterable\"\n :pure=\"pure\"\n :popper-class=\"popperClass\"\n :popper-style=\"[popperStyle, contentStyle]\"\n :reference-el=\"referenceEl\"\n :trigger-target-el=\"triggerTargetEl\"\n :visible=\"shouldShow\"\n :z-index=\"zIndex\"\n @mouseenter=\"onContentEnter\"\n @mouseleave=\"onContentLeave\"\n @blur=\"onBlur\"\n @close=\"onClose\"\n >\n <slot></slot>\n </hl-popper-content>\n </transition>\n </hl-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, unref, watch } from 'vue'\nimport { onClickOutside } from '@vueuse/core'\nimport { composeEventHandlers } from '@hongluan-ui/utils'\nimport { usePopperContainerId } from '@hongluan-ui/hooks'\nimport HlTeleport from '@hongluan-ui/components/teleport'\nimport { HlPopperContent } from '@hongluan-ui/components/popper'\nimport { TOOLTIP_INJECTION_KEY } from '@hongluan-ui/tokens'\nimport { useTooltipContentProps } from './content'\n\ndefineOptions({\n name: 'TooltipContent',\n inheritAttrs: false,\n})\n\nconst props = defineProps(useTooltipContentProps)\n\nconst { selector } = usePopperContainerId()\n// TODO any is temporary, replace with `InstanceType<typeof PopperContent> | null` later\nconst contentRef = ref<any>(null)\nlet stopHandle: ReturnType<typeof onClickOutside>\nconst {\n controlled,\n id,\n open,\n trigger,\n onClose,\n onOpen,\n onShow,\n onHide,\n onBeforeShow,\n onBeforeHide,\n} = inject(TOOLTIP_INJECTION_KEY, undefined)!\nconst persistentRef = computed(() => {\n // For testing, we would always want the content to be rendered\n // to the DOM, so we need to return true here.\n if (process.env.NODE_ENV === 'test') {\n return true\n }\n return props.persistent\n})\n\nonBeforeUnmount(() => {\n stopHandle?.()\n})\n\nconst shouldRender = computed(() => {\n return unref(persistentRef) ? true : unref(open)\n})\n\nconst shouldShow = computed(() => {\n return props.disabled ? false : unref(open)\n})\n\nconst appendTo = computed(() => {\n return props.appendTo || selector.value\n})\n\nconst contentStyle = computed(() => (props.style ?? {}) as any)\n\nconst ariaHidden = computed(() => !unref(open))\n\nconst onTransitionLeave = () => {\n onHide()\n}\n\nconst stopWhenControlled = () => {\n if (unref(controlled)) return true\n}\n\nconst onContentEnter = composeEventHandlers(stopWhenControlled, () => {\n if (props.enterable && unref(trigger) === 'hover') {\n onOpen()\n }\n})\n\nconst onContentLeave = composeEventHandlers(stopWhenControlled, () => {\n if (unref(trigger) === 'hover') {\n onClose()\n }\n})\n\nconst onBeforeEnter = () => {\n contentRef.value?.updatePopper?.()\n onBeforeShow?.()\n}\n\nconst onBeforeLeave = () => {\n onBeforeHide?.()\n}\n\nconst onAfterShow = () => {\n onShow()\n stopHandle = onClickOutside(\n computed(() => {\n return contentRef.value?.popperContentRef\n }),\n () => {\n if (unref(controlled)) return\n const $trigger = unref(trigger)\n if ($trigger !== 'hover') {\n onClose()\n }\n },\n {\n ignore: props.outsideIgnore,\n },\n )\n}\n\nconst onBlur = () => {\n if (!props.virtualTriggering) {\n onClose()\n }\n}\n\nwatch(\n () => unref(open),\n val => {\n if (!val) {\n stopHandle?.()\n }\n },\n {\n flush: 'post',\n },\n)\n\nwatch(\n () => props.content,\n () => {\n contentRef.value?.updatePopper?.()\n },\n)\n\ndefineExpose({\n /**\n * @description popper-content component instance\n */\n contentRef,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;oCAsDc;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAChB;;;;;;AAIA,UAAM,EAAE,aAAa;AAErB,UAAM,aAAa,IAAS,IAAI;AAChC,QAAI;AACJ,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,OAAO,uBAAuB,MAAS;AAC3C,UAAM,gBAAgB,SAAS,MAAM;AAGnC,UAAI,QAAQ,IAAI,aAAa,QAAQ;AACnC,eAAO;AAAA;AAET,aAAO,MAAM;AAAA,KACd;AAED,oBAAgB,MAAM;AACpB;AAAa,KACd;AAED,UAAM,eAAe,SAAS,MAAM;AAClC,aAAO,MAAM,aAAa,IAAI,OAAO,MAAM,IAAI;AAAA,KAChD;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,MAAM,WAAW,QAAQ,MAAM,IAAI;AAAA,KAC3C;AAED,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,MAAM,YAAY,SAAS;AAAA,KACnC;AAED,UAAM,eAAe,SAAS,MAAO;AAErC,UAAM;AAEN,8BAA0B;AACxB;AAAO,IACT;AAEA,UAAM;AACJ;AAAuB;AAAO,IAChC;AAEA,UAAM,iBAAiB;AACrB;AACE;AAAO;AACT;AAGF;AACE;AACE;AAAQ;AACV;AAGF;AACE;AACA;AAAe,IACjB;AAEA,UAAM;AACJ;AAAe;AAGjB;AACE;AACA,kCACE;AACE;AAAyB,UAE3B;AACE,YAAI;AAAmB;AACvB,cAAM;AACN;AACE;AAAQ,QACV;AAAA;AAEF,QACE,cAAc;AAAA;AAElB;AAGF;AACE;AACE,gBAAQ;AAAA;AACV;AAGF,UACE,MAAM;AAEJ,UAAI,CAAC,KAAK;AACR;AAAa;AACf;AAEF;AACS;AAIX,sBACc;AAEV;AAAiC,KAErC;AAEA,WAAa;AAAA,MAIX;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}