UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 4.79 kB
{"version":3,"file":"content.mjs","sources":["../../../../../../packages/components/popper/src/content.vue"],"sourcesContent":["<template>\n <div\n ref=\"popperContentRef\"\n :style=\"contentStyle\"\n :class=\"contentClass\"\n role=\"tooltip\"\n @mouseenter=\"(e) => $emit('mouseenter', e)\"\n @mouseleave=\"(e) => $emit('mouseleave', e)\"\n >\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n ref,\n inject,\n provide,\n unref,\n onMounted,\n watch,\n} from 'vue'\nimport { createPopper } from '@popperjs/core'\nimport { useZIndex, useNamespace } from '@element-plus/hooks'\nimport { POPPER_INJECTION_KEY, POPPER_CONTENT_INJECTION_KEY } from './tokens'\nimport { usePopperContentProps } from './popper'\nimport { buildPopperOptions, unwrapMeasurableEl } from './utils'\n\nexport default defineComponent({\n name: 'ElPopperContent',\n props: usePopperContentProps,\n emits: ['mouseenter', 'mouseleave'],\n setup(props) {\n const { triggerRef, popperInstanceRef, contentRef } = inject(\n POPPER_INJECTION_KEY,\n undefined\n )!\n const { nextZIndex } = useZIndex()\n const ns = useNamespace('popper')\n const popperContentRef = ref<HTMLElement | null>(null)\n const arrowRef = ref<HTMLElement | null>(null)\n const arrowOffset = ref<number>()\n provide(POPPER_CONTENT_INJECTION_KEY, {\n arrowRef,\n arrowOffset,\n })\n const contentZIndex = ref(props.zIndex || nextZIndex())\n\n const contentStyle = computed(\n () => [{ zIndex: unref(contentZIndex) }, props.popperStyle] as any\n )\n\n const contentClass = computed(() => [\n ns.b(),\n ns.is('pure', props.pure),\n ns.is(props.effect),\n props.popperClass,\n ])\n\n const createPopperInstance = ({\n referenceEl,\n popperContentEl,\n arrowEl,\n }) => {\n const options = buildPopperOptions(props, {\n arrowEl,\n arrowOffset: unref(arrowOffset),\n })\n\n return createPopper(referenceEl, popperContentEl, options)\n }\n\n const updatePopper = () => {\n unref(popperInstanceRef)?.update()\n contentZIndex.value = props.zIndex || nextZIndex()\n }\n\n onMounted(() => {\n let updateHandle: ReturnType<typeof watch>\n watch(\n () => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef),\n (val) => {\n updateHandle?.()\n if (val) {\n popperInstanceRef.value?.destroy()\n const popperContentEl = unref(popperContentRef)!\n contentRef.value = popperContentEl\n const arrowEl = unref(arrowRef)\n\n const newInstance = createPopperInstance({\n referenceEl: val,\n popperContentEl: unref(popperContentRef)!,\n arrowEl,\n })\n popperInstanceRef.value = newInstance\n\n updateHandle = watch(\n () => val!.getBoundingClientRect(),\n () => {\n updatePopper()\n },\n {\n immediate: true,\n }\n )\n } else {\n popperInstanceRef.value = null\n }\n },\n {\n immediate: true,\n }\n )\n\n watch(\n () =>\n buildPopperOptions(props, {\n arrowEl: unref(arrowRef),\n arrowOffset: unref(arrowOffset),\n }),\n (option) => popperInstanceRef.value?.setOptions(option)\n )\n })\n\n return {\n ns,\n popperContentRef,\n popperInstanceRef,\n contentStyle,\n contentClass,\n updatePopper,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AA8BA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC,cAAc;AAAA,EACtB,MAAM,OAAO;AACX,UAAM,EAAE,YAAY,mBAAmB,eAAe,OACpD,sBACA;AAEF,UAAM,EAAE,eAAe;AACvB,UAAM,KAAK,aAAa;AACxB,UAAM,mBAAmB,IAAwB;AACjD,UAAM,WAAW,IAAwB;AACzC,UAAM,cAAc;AACpB,YAAQ,8BAA8B;AAAA,MACpC;AAAA,MACA;AAAA;AAEF,UAAM,gBAAgB,IAAI,MAAM,UAAU;AAE1C,UAAM,eAAe,SACnB,MAAM,CAAC,EAAE,QAAQ,MAAM,kBAAkB,MAAM;AAGjD,UAAM,eAAe,SAAS,MAAM;AAAA,MAClC,GAAG;AAAA,MACH,GAAG,GAAG,QAAQ,MAAM;AAAA,MACpB,GAAG,GAAG,MAAM;AAAA,MACZ,MAAM;AAAA;AAGR,UAAM,uBAAuB,CAAC;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,UACI;AACJ,YAAM,UAAU,mBAAmB,OAAO;AAAA,QACxC;AAAA,QACA,aAAa,MAAM;AAAA;AAGrB,aAAO,aAAa,aAAa,iBAAiB;AAAA;AAGpD,UAAM,eAAe,MAAM;AACzB,YAAM;AACN;AAAsC;AAGxC;AACE;AACA;AAGI;AACA,YAAI;AACF,4BAAkB;AAClB;AACA;AACA,gBAAM;AAEN;AAAyC;AAC1B;AACU,YACvB;AAAA;AAEF;AAEA;AAGI;AAAA;AAEF,YACE;AAAW;AAAA;AAIf;AAA0B;AAAA;AAG9B;AACa;AAIf;AAE8B,QACxB;AAAe;AACI,sBAEX;AAAoC;AAIpD,WAAO;AAAA;AACL;AACA;AACA,MACA;AAAA;AACA,MACA;AAAA;AAAA;AAAA;;;;AAlIoB;AAChB;AAEQ;AACb;AACuC;;AAExC;;;;;;;;;;;;"}