element-plus
Version:
A Component Library for Vue 3
1 lines • 14.5 kB
Source Map (JSON)
{"version":3,"file":"helper.mjs","sources":["../../../../../../packages/components/tour/src/helper.ts"],"sourcesContent":["import {\n computed,\n onBeforeUnmount,\n onMounted,\n ref,\n unref,\n watch,\n watchEffect,\n} from 'vue'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n detectOverflow,\n flip,\n offset as offsetMiddleware,\n shift,\n} from '@floating-ui/dom'\nimport {\n isArray,\n isClient,\n isFunction,\n isString,\n keysOf,\n} from '@element-plus/utils'\n\nimport type {\n CSSProperties,\n Component,\n InjectionKey,\n Ref,\n SetupContext,\n} from 'vue'\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\nimport type { PosInfo, TourGap, TourMask } from './types'\nimport type {\n ComputePositionReturn,\n Middleware,\n Placement,\n Strategy,\n VirtualElement,\n} from '@floating-ui/dom'\nimport type { TourStepProps } from './step'\n\nexport const useTarget = (\n target: Ref<\n string | HTMLElement | (() => HTMLElement | null) | null | undefined\n >,\n open: Ref<boolean>,\n gap: Ref<TourGap>,\n mergedMask: Ref<TourMask>,\n scrollIntoViewOptions: Ref<boolean | ScrollIntoViewOptions>\n) => {\n const posInfo: Ref<PosInfo | null> = ref(null)\n\n const getTargetEl = () => {\n let targetEl: HTMLElement | null | undefined\n if (isString(target.value)) {\n targetEl = document.querySelector<HTMLElement>(target.value)\n } else if (isFunction(target.value)) {\n targetEl = target.value()\n } else {\n targetEl = target.value\n }\n return targetEl\n }\n\n const updatePosInfo = () => {\n const targetEl = getTargetEl()\n if (!targetEl || !open.value) {\n posInfo.value = null\n return\n }\n if (!isInViewPort(targetEl)) {\n targetEl.scrollIntoView(scrollIntoViewOptions.value)\n }\n const { left, top, width, height } = targetEl.getBoundingClientRect()\n posInfo.value = {\n left,\n top,\n width,\n height,\n radius: 0,\n }\n }\n\n onMounted(() => {\n watch(\n [open, target],\n () => {\n updatePosInfo()\n },\n {\n immediate: true,\n }\n )\n window.addEventListener('resize', updatePosInfo)\n })\n\n onBeforeUnmount(() => {\n window.removeEventListener('resize', updatePosInfo)\n })\n\n const getGapOffset = (index: number) =>\n (isArray(gap.value.offset) ? gap.value.offset[index] : gap.value.offset) ??\n 6\n\n const mergedPosInfo = computed(() => {\n if (!posInfo.value) return posInfo.value\n\n const gapOffsetX = getGapOffset(0)\n const gapOffsetY = getGapOffset(1)\n const gapRadius = gap.value?.radius || 2\n\n return {\n left: posInfo.value.left - gapOffsetX,\n top: posInfo.value.top - gapOffsetY,\n width: posInfo.value.width + gapOffsetX * 2,\n height: posInfo.value.height + gapOffsetY * 2,\n radius: gapRadius,\n }\n })\n\n const triggerTarget = computed(() => {\n const targetEl = getTargetEl()\n if (!mergedMask.value || !targetEl || !window.DOMRect) {\n return targetEl || undefined\n }\n\n return {\n getBoundingClientRect() {\n return window.DOMRect.fromRect({\n width: mergedPosInfo.value?.width || 0,\n height: mergedPosInfo.value?.height || 0,\n x: mergedPosInfo.value?.left || 0,\n y: mergedPosInfo.value?.top || 0,\n })\n },\n }\n })\n\n return {\n mergedPosInfo,\n triggerTarget,\n }\n}\n\nexport interface TourContext {\n currentStep: Ref<TourStepProps | undefined>\n current: Ref<number>\n total: Ref<number>\n showClose: Ref<boolean>\n closeIcon: Ref<string | Component | undefined>\n mergedType: Ref<'default' | 'primary' | undefined>\n ns: UseNamespaceReturn\n slots: SetupContext['slots']\n updateModelValue(modelValue: boolean): void\n onClose(): void\n onFinish(): void\n onChange(): void\n}\n\nexport const tourKey: InjectionKey<TourContext> = Symbol('ElTour')\n\nfunction isInViewPort(element: HTMLElement) {\n const viewWidth = window.innerWidth || document.documentElement.clientWidth\n const viewHeight = window.innerHeight || document.documentElement.clientHeight\n const { top, right, bottom, left } = element.getBoundingClientRect()\n\n return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight\n}\n\nexport const useFloating = (\n referenceRef: Ref<HTMLElement | VirtualElement | null>,\n contentRef: Ref<HTMLElement | null>,\n arrowRef: Ref<HTMLElement | null>,\n placement: Ref<Placement | undefined>,\n strategy: Ref<Strategy>,\n offset: Ref<number>,\n zIndex: Ref<number>,\n showArrow: Ref<boolean>\n) => {\n const x = ref<number>()\n const y = ref<number>()\n const middlewareData = ref<ComputePositionReturn['middlewareData']>({})\n\n const states = {\n x,\n y,\n placement,\n strategy,\n middlewareData,\n } as const\n\n const middleware = computed(() => {\n const _middleware: Middleware[] = [\n offsetMiddleware(unref(offset)),\n flip(),\n shift(),\n overflowMiddleware(),\n ]\n\n if (unref(showArrow) && unref(arrowRef)) {\n _middleware.push(\n arrow({\n element: unref(arrowRef)!,\n })\n )\n }\n return _middleware\n })\n\n const update = async () => {\n if (!isClient) return\n\n const referenceEl = unref(referenceRef)\n const contentEl = unref(contentRef)\n if (!referenceEl || !contentEl) return\n\n const data = await computePosition(referenceEl, contentEl, {\n placement: unref(placement),\n strategy: unref(strategy),\n middleware: unref(middleware),\n })\n\n keysOf(states).forEach((key) => {\n states[key].value = data[key]\n })\n }\n\n const contentStyle = computed<CSSProperties>(() => {\n if (!unref(referenceRef)) {\n return {\n position: 'fixed',\n top: '50%',\n left: '50%',\n transform: 'translate3d(-50%, -50%, 0)',\n maxWidth: '100vw',\n zIndex: unref(zIndex),\n }\n }\n\n const { overflow } = unref(middlewareData)\n\n return {\n position: unref(strategy),\n zIndex: unref(zIndex),\n top: unref(y) != null ? `${unref(y)}px` : '',\n left: unref(x) != null ? `${unref(x)}px` : '',\n maxWidth: overflow?.maxWidth ? `${overflow?.maxWidth}px` : '',\n }\n })\n\n const arrowStyle = computed<CSSProperties>(() => {\n if (!unref(showArrow)) return {}\n\n const { arrow } = unref(middlewareData)\n return {\n left: arrow?.x != null ? `${arrow?.x}px` : '',\n top: arrow?.y != null ? `${arrow?.y}px` : '',\n }\n })\n\n let cleanup: any\n onMounted(() => {\n const referenceEl = unref(referenceRef)\n const contentEl = unref(contentRef)\n if (referenceEl && contentEl) {\n cleanup = autoUpdate(referenceEl, contentEl, update)\n }\n\n watchEffect(() => {\n update()\n })\n })\n\n onBeforeUnmount(() => {\n cleanup && cleanup()\n })\n\n return {\n update,\n contentStyle,\n arrowStyle,\n }\n}\n\nconst overflowMiddleware = (): Middleware => {\n return {\n name: 'overflow',\n async fn(state) {\n const overflow = await detectOverflow(state)\n let overWidth = 0\n if (overflow.left > 0) overWidth = overflow.left\n if (overflow.right > 0) overWidth = overflow.right\n const floatingWidth = state.rects.floating.width\n return {\n data: {\n maxWidth: floatingWidth - overWidth,\n },\n }\n },\n }\n}\n"],"names":["offset","offsetMiddleware","arrow"],"mappings":"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"}