@varlet/ui 2.16.7 → 2.16.8-alpha.1695118057982

package/es/menu/usePopover.mjs

@@ -1,24 +1,57 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-import flip from '@popperjs/core/lib/modifiers/flip';
-import offset from '@popperjs/core/lib/modifiers/offset';
-import computeStyles from '@popperjs/core/lib/modifiers/computeStyles';
-import { useClickOutside } from '@varlet/use';
-import { doubleRaf, getStyle } from '@varlet/shared';
-import { toPxNum } from '../utils/elements.mjs';
-import { call, useVModel } from '../utils/components.mjs';
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { createPopper } from '@popperjs/core/lib/popper-lite';
-import { useZIndex } from '../context/zIndex.mjs';
-export function usePopover(options) {
-  var host = ref(null);
-  var popover = ref(null);
-  var hostSize = ref({
-    width: 0,
-    height: 0
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
   });
-  var show = useVModel(options, 'show', {
+};
+import flip from "@popperjs/core/lib/modifiers/flip";
+import offset from "@popperjs/core/lib/modifiers/offset";
+import computeStyles from "@popperjs/core/lib/modifiers/computeStyles";
+import { useClickOutside } from "@varlet/use";
+import { doubleRaf, getStyle } from "@varlet/shared";
+import { toPxNum } from "../utils/elements.mjs";
+import { call, useVModel } from "../utils/components.mjs";
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { createPopper } from "@popperjs/core/lib/popper-lite";
+import { useZIndex } from "../context/zIndex.mjs";
+function usePopover(options) {
+  const host = ref(null);
+  const popover = ref(null);
+  const hostSize = ref({ width: 0, height: 0 });
+  const show = useVModel(options, "show", {
     passive: true,
     defaultValue: false,
     emit(event, value) {
@@ -30,279 +63,250 @@ export function usePopover(options) {
       }
     }
   });
-  var {
-    zIndex
-  } = useZIndex(() => show.value, 1);
-  var popoverInstance = null;
-  var enterPopover = false;
-  var enterHost = false;
-  var computeHostSize = () => {
-    var {
-      width,
-      height
-    } = getStyle(host.value);
+  const { zIndex } = useZIndex(() => show.value, 1);
+  let popoverInstance = null;
+  let enterPopover = false;
+  let enterHost = false;
+  const computeHostSize = () => {
+    const { width, height } = getStyle(host.value);
     hostSize.value = {
       width: toPxNum(width),
       height: toPxNum(height)
     };
   };
-  var getTransformOrigin = () => {
+  const getTransformOrigin = () => {
     switch (options.placement) {
-      case 'top':
-      case 'cover-bottom':
-        return 'bottom';
-      case 'top-start':
-      case 'right-end':
-      case 'cover-bottom-start':
-        return 'bottom left';
-      case 'top-end':
-      case 'left-end':
-      case 'cover-bottom-end':
-        return 'bottom right';
-      case 'bottom':
-      case 'cover-top':
-        return 'top';
-      case 'bottom-start':
-      case 'right-start':
-      case 'cover-top-start':
-        return 'top left';
-      case 'bottom-end':
-      case 'left-start':
-      case 'cover-top-end':
-        return 'top right';
-      case 'left':
-      case 'cover-right':
-        return 'right';
-      case 'right':
-      case 'cover-left':
-        return 'left';
+      case "top":
+      case "cover-bottom":
+        return "bottom";
+      case "top-start":
+      case "right-end":
+      case "cover-bottom-start":
+        return "bottom left";
+      case "top-end":
+      case "left-end":
+      case "cover-bottom-end":
+        return "bottom right";
+      case "bottom":
+      case "cover-top":
+        return "top";
+      case "bottom-start":
+      case "right-start":
+      case "cover-top-start":
+        return "top left";
+      case "bottom-end":
+      case "left-start":
+      case "cover-top-end":
+        return "top right";
+      case "left":
+      case "cover-right":
+        return "right";
+      case "right":
+      case "cover-left":
+        return "left";
     }
   };
-  var handleHostMouseenter = () => {
-    if (options.trigger !== 'hover') {
+  const handleHostMouseenter = () => {
+    if (options.trigger !== "hover") {
       return;
     }
     enterHost = true;
     open();
   };
-  var handleHostMouseleave = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(function* () {
-      if (options.trigger !== 'hover') {
-        return;
-      }
-      enterHost = false;
-      yield doubleRaf();
-      if (enterPopover) {
-        return;
-      }
-      close();
-    });
-    return function handleHostMouseleave() {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  var handlePopoverMouseenter = () => {
-    if (options.trigger !== 'hover') {
+  const handleHostMouseleave = () => __async(this, null, function* () {
+    if (options.trigger !== "hover") {
+      return;
+    }
+    enterHost = false;
+    yield doubleRaf();
+    if (enterPopover) {
+      return;
+    }
+    close();
+  });
+  const handlePopoverMouseenter = () => {
+    if (options.trigger !== "hover") {
       return;
     }
     enterPopover = true;
   };
-  var handlePopoverMouseleave = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* () {
-      if (options.trigger !== 'hover') {
-        return;
-      }
-      enterPopover = false;
-      yield doubleRaf();
-      if (enterHost) {
-        return;
-      }
-      close();
-    });
-    return function handlePopoverMouseleave() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var handleHostClick = () => {
+  const handlePopoverMouseleave = () => __async(this, null, function* () {
+    if (options.trigger !== "hover") {
+      return;
+    }
+    enterPopover = false;
+    yield doubleRaf();
+    if (enterHost) {
+      return;
+    }
+    close();
+  });
+  const handleHostClick = () => {
     if (options.closeOnClickReference && show.value) {
       close();
     } else {
       open();
     }
   };
-  var handlePopoverClose = () => {
+  const handlePopoverClose = () => {
     close();
   };
-  var handleClickOutside = e => {
-    if (options.trigger !== 'click') {
+  const handleClickOutside = (e) => {
+    if (options.trigger !== "click") {
       return;
     }
     handlePopoverClose();
     call(options.onClickOutside, e);
   };
-  var handleClosed = () => {
+  const handleClosed = () => {
     resize();
     call(options.onClosed);
   };
-  var getPosition = () => {
-    var {
-      offsetX,
-      offsetY,
-      placement
-    } = options;
+  const getPosition = () => {
+    const { offsetX, offsetY, placement } = options;
     computeHostSize();
-    var offset = {
+    const offset2 = {
       x: toPxNum(offsetX),
       y: toPxNum(offsetY)
     };
     switch (placement) {
-      case 'cover-top':
+      case "cover-top":
         return {
-          placement: 'bottom',
-          skidding: offset.x,
-          distance: offset.y - hostSize.value.height
+          placement: "bottom",
+          skidding: offset2.x,
+          distance: offset2.y - hostSize.value.height
         };
-      case 'cover-top-start':
+      case "cover-top-start":
         return {
-          placement: 'bottom-start',
-          skidding: offset.x,
-          distance: offset.y - hostSize.value.height
+          placement: "bottom-start",
+          skidding: offset2.x,
+          distance: offset2.y - hostSize.value.height
         };
-      case 'cover-top-end':
+      case "cover-top-end":
         return {
-          placement: 'bottom-end',
-          skidding: offset.x,
-          distance: offset.y - hostSize.value.height
+          placement: "bottom-end",
+          skidding: offset2.x,
+          distance: offset2.y - hostSize.value.height
         };
-      case 'cover-bottom':
+      case "cover-bottom":
         return {
-          placement: 'top',
-          skidding: offset.x,
-          distance: -offset.y - hostSize.value.height
+          placement: "top",
+          skidding: offset2.x,
+          distance: -offset2.y - hostSize.value.height
         };
-      case 'cover-bottom-start':
+      case "cover-bottom-start":
         return {
-          placement: 'top-start',
-          skidding: offset.x,
-          distance: -offset.y - hostSize.value.height
+          placement: "top-start",
+          skidding: offset2.x,
+          distance: -offset2.y - hostSize.value.height
         };
-      case 'cover-bottom-end':
+      case "cover-bottom-end":
         return {
-          placement: 'top-end',
-          skidding: offset.x,
-          distance: -offset.y - hostSize.value.height
+          placement: "top-end",
+          skidding: offset2.x,
+          distance: -offset2.y - hostSize.value.height
         };
-      case 'cover-left':
+      case "cover-left":
         return {
-          placement: 'right',
-          skidding: offset.y,
-          distance: offset.x - hostSize.value.width
+          placement: "right",
+          skidding: offset2.y,
+          distance: offset2.x - hostSize.value.width
         };
-      case 'cover-right':
+      case "cover-right":
         return {
-          placement: 'left',
-          skidding: offset.y,
-          distance: -offset.x - hostSize.value.width
+          placement: "left",
+          skidding: offset2.y,
+          distance: -offset2.x - hostSize.value.width
         };
-      case 'left':
-      case 'left-start':
-      case 'left-end':
+      case "left":
+      case "left-start":
+      case "left-end":
         return {
           placement,
-          skidding: offset.y,
-          distance: -offset.x
+          skidding: offset2.y,
+          distance: -offset2.x
         };
-      case 'top':
-      case 'top-start':
-      case 'top-end':
+      case "top":
+      case "top-start":
+      case "top-end":
         return {
           placement,
-          skidding: offset.x,
-          distance: -offset.y
+          skidding: offset2.x,
+          distance: -offset2.y
         };
-      case 'bottom':
-      case 'bottom-start':
-      case 'bottom-end':
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
         return {
           placement,
-          skidding: offset.x,
-          distance: offset.y
+          skidding: offset2.x,
+          distance: offset2.y
         };
-      case 'right':
-      case 'right-start':
-      case 'right-end':
+      case "right":
+      case "right-start":
+      case "right-end":
         return {
           placement,
-          skidding: offset.y,
-          distance: offset.x
+          skidding: offset2.y,
+          distance: offset2.x
         };
     }
   };
-  var getPopperOptions = () => {
-    var {
-      placement,
-      skidding,
-      distance
-    } = getPosition();
-    var modifiers = [_extends({}, flip, {
-      enabled: show.value
-    }), _extends({}, offset, {
-      options: {
-        offset: [skidding, distance]
-      }
-    }), _extends({}, computeStyles, {
-      options: {
-        adaptive: false,
-        gpuAcceleration: false
-      },
-      enabled: show.value
-    }), {
-      name: 'applyTransformOrigin',
-      enabled: show.value,
-      phase: 'beforeWrite',
-      fn(_ref3) {
-        var {
-          state
-        } = _ref3;
-        state.styles.popper.transformOrigin = getTransformOrigin();
+  const getPopperOptions = () => {
+    const { placement, skidding, distance } = getPosition();
+    const modifiers = [
+      __spreadProps(__spreadValues({}, flip), {
+        enabled: show.value
+      }),
+      __spreadProps(__spreadValues({}, offset), {
+        options: {
+          offset: [skidding, distance]
+        }
+      }),
+      __spreadProps(__spreadValues({}, computeStyles), {
+        options: {
+          adaptive: false,
+          gpuAcceleration: false
+        },
+        enabled: show.value
+      }),
+      {
+        name: "applyTransformOrigin",
+        enabled: show.value,
+        phase: "beforeWrite",
+        fn({ state }) {
+          state.styles.popper.transformOrigin = getTransformOrigin();
+        }
       }
-    }];
+    ];
     return {
       placement,
       modifiers,
       strategy: options.strategy
     };
   };
-  var getReference = () => options.reference ? host.value.querySelector(options.reference) : host.value;
-
-  // expose
-  var resize = () => {
+  const getReference = () => options.reference ? host.value.querySelector(options.reference) : host.value;
+  const resize = () => {
     popoverInstance.setOptions(getPopperOptions());
   };
-
-  // expose
-  var open = () => {
-    var {
-      disabled
-    } = options;
+  const open = () => {
+    const { disabled } = options;
     if (disabled) {
       return;
     }
     show.value = true;
-    call(options['onUpdate:show'], true);
+    call(options["onUpdate:show"], true);
   };
-
-  // expose
-  var close = () => {
+  const close = () => {
     show.value = false;
-    call(options['onUpdate:show'], false);
+    call(options["onUpdate:show"], false);
   };
-  useClickOutside(getReference, 'click', handleClickOutside);
+  useClickOutside(getReference, "click", handleClickOutside);
   watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
   watch(() => options.disabled, close);
   onMounted(() => {
-    var _getReference;
-    popoverInstance = createPopper((_getReference = getReference()) != null ? _getReference : host.value, popover.value, getPopperOptions());
+    var _a;
+    popoverInstance = createPopper((_a = getReference()) != null ? _a : host.value, popover.value, getPopperOptions());
   });
   onUnmounted(() => {
     popoverInstance.destroy();
@@ -324,4 +328,7 @@ export function usePopover(options) {
     open,
     close
   };
-}
+}
+export {
+  usePopover
+};