1

admin/node_modules/element-plus/lib/components/tour/src/helper.js

@@ -0,0 +1,214 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var dom = require('@floating-ui/dom');
+var shared = require('@vue/shared');
+var core = require('@vueuse/core');
+var objects = require('../../../utils/objects.js');
+
+const useTarget = (target, open, gap, mergedMask, scrollIntoViewOptions) => {
+  const posInfo = vue.ref(null);
+  const getTargetEl = () => {
+    let targetEl;
+    if (shared.isString(target.value)) {
+      targetEl = document.querySelector(target.value);
+    } else if (shared.isFunction(target.value)) {
+      targetEl = target.value();
+    } else {
+      targetEl = target.value;
+    }
+    return targetEl;
+  };
+  const updatePosInfo = () => {
+    const targetEl = getTargetEl();
+    if (!targetEl || !open.value) {
+      posInfo.value = null;
+      return;
+    }
+    if (!isInViewPort(targetEl)) {
+      targetEl.scrollIntoView(scrollIntoViewOptions.value);
+    }
+    const { left, top, width, height } = targetEl.getBoundingClientRect();
+    posInfo.value = {
+      left,
+      top,
+      width,
+      height,
+      radius: 0
+    };
+  };
+  vue.onMounted(() => {
+    vue.watch([open, target], () => {
+      updatePosInfo();
+    }, {
+      immediate: true
+    });
+    window.addEventListener("resize", updatePosInfo);
+  });
+  vue.onBeforeUnmount(() => {
+    window.removeEventListener("resize", updatePosInfo);
+  });
+  const getGapOffset = (index) => {
+    var _a;
+    return (_a = shared.isArray(gap.value.offset) ? gap.value.offset[index] : gap.value.offset) != null ? _a : 6;
+  };
+  const mergedPosInfo = vue.computed(() => {
+    var _a;
+    if (!posInfo.value)
+      return posInfo.value;
+    const gapOffsetX = getGapOffset(0);
+    const gapOffsetY = getGapOffset(1);
+    const gapRadius = ((_a = gap.value) == null ? void 0 : _a.radius) || 2;
+    return {
+      left: posInfo.value.left - gapOffsetX,
+      top: posInfo.value.top - gapOffsetY,
+      width: posInfo.value.width + gapOffsetX * 2,
+      height: posInfo.value.height + gapOffsetY * 2,
+      radius: gapRadius
+    };
+  });
+  const triggerTarget = vue.computed(() => {
+    const targetEl = getTargetEl();
+    if (!mergedMask.value || !targetEl || !window.DOMRect) {
+      return targetEl || void 0;
+    }
+    return {
+      getBoundingClientRect() {
+        var _a, _b, _c, _d;
+        return window.DOMRect.fromRect({
+          width: ((_a = mergedPosInfo.value) == null ? void 0 : _a.width) || 0,
+          height: ((_b = mergedPosInfo.value) == null ? void 0 : _b.height) || 0,
+          x: ((_c = mergedPosInfo.value) == null ? void 0 : _c.left) || 0,
+          y: ((_d = mergedPosInfo.value) == null ? void 0 : _d.top) || 0
+        });
+      }
+    };
+  });
+  return {
+    mergedPosInfo,
+    triggerTarget
+  };
+};
+const tourKey = Symbol("ElTour");
+function isInViewPort(element) {
+  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+  const { top, right, bottom, left } = element.getBoundingClientRect();
+  return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
+}
+const useFloating = (referenceRef, contentRef, arrowRef, placement, strategy, offset, zIndex, showArrow) => {
+  const x = vue.ref();
+  const y = vue.ref();
+  const middlewareData = vue.ref({});
+  const states = {
+    x,
+    y,
+    placement,
+    strategy,
+    middlewareData
+  };
+  const middleware = vue.computed(() => {
+    const _middleware = [
+      dom.offset(vue.unref(offset)),
+      dom.flip(),
+      dom.shift(),
+      overflowMiddleware()
+    ];
+    if (vue.unref(showArrow) && vue.unref(arrowRef)) {
+      _middleware.push(dom.arrow({
+        element: vue.unref(arrowRef)
+      }));
+    }
+    return _middleware;
+  });
+  const update = async () => {
+    if (!core.isClient)
+      return;
+    const referenceEl = vue.unref(referenceRef);
+    const contentEl = vue.unref(contentRef);
+    if (!referenceEl || !contentEl)
+      return;
+    const data = await dom.computePosition(referenceEl, contentEl, {
+      placement: vue.unref(placement),
+      strategy: vue.unref(strategy),
+      middleware: vue.unref(middleware)
+    });
+    objects.keysOf(states).forEach((key) => {
+      states[key].value = data[key];
+    });
+  };
+  const contentStyle = vue.computed(() => {
+    if (!vue.unref(referenceRef)) {
+      return {
+        position: "fixed",
+        top: "50%",
+        left: "50%",
+        transform: "translate3d(-50%, -50%, 0)",
+        maxWidth: "100vw",
+        zIndex: vue.unref(zIndex)
+      };
+    }
+    const { overflow } = vue.unref(middlewareData);
+    return {
+      position: vue.unref(strategy),
+      zIndex: vue.unref(zIndex),
+      top: vue.unref(y) != null ? `${vue.unref(y)}px` : "",
+      left: vue.unref(x) != null ? `${vue.unref(x)}px` : "",
+      maxWidth: (overflow == null ? void 0 : overflow.maxWidth) ? `${overflow == null ? void 0 : overflow.maxWidth}px` : ""
+    };
+  });
+  const arrowStyle = vue.computed(() => {
+    if (!vue.unref(showArrow))
+      return {};
+    const { arrow: arrow2 } = vue.unref(middlewareData);
+    return {
+      left: (arrow2 == null ? void 0 : arrow2.x) != null ? `${arrow2 == null ? void 0 : arrow2.x}px` : "",
+      top: (arrow2 == null ? void 0 : arrow2.y) != null ? `${arrow2 == null ? void 0 : arrow2.y}px` : ""
+    };
+  });
+  let cleanup;
+  vue.onMounted(() => {
+    const referenceEl = vue.unref(referenceRef);
+    const contentEl = vue.unref(contentRef);
+    if (referenceEl && contentEl) {
+      cleanup = dom.autoUpdate(referenceEl, contentEl, update);
+    }
+    vue.watchEffect(() => {
+      update();
+    });
+  });
+  vue.onBeforeUnmount(() => {
+    cleanup && cleanup();
+  });
+  return {
+    update,
+    contentStyle,
+    arrowStyle
+  };
+};
+const overflowMiddleware = () => {
+  return {
+    name: "overflow",
+    async fn(state) {
+      const overflow = await dom.detectOverflow(state);
+      let overWidth = 0;
+      if (overflow.left > 0)
+        overWidth = overflow.left;
+      if (overflow.right > 0)
+        overWidth = overflow.right;
+      const floatingWidth = state.rects.floating.width;
+      return {
+        data: {
+          maxWidth: floatingWidth - overWidth
+        }
+      };
+    }
+  };
+};
+
+exports.tourKey = tourKey;
+exports.useFloating = useFloating;
+exports.useTarget = useTarget;
+//# sourceMappingURL=helper.js.map