@destyler/popover 0.0.1-beta.2 → 0.0.1-beta.20

package/dist/index.mjs

@@ -1,1168 +1,11 @@
-import { defineComponent, provide, getCurrentInstance, inject, ref, onBeforeUnmount, withDirectives, toRef, computed, h, Teleport, onMounted, watch, Fragment, watchEffect, vShow, mergeProps, cloneVNode } from 'vue';
-import { off, getSlot, on, beforeNextFrameOnce, getFirstVNode, createId, resolveTo, getPreciseEventTarget, isJsdom, isSlotEmpty, resolveWrappedSlot, getFirstSlotVNode, keep, call } from '@destyler/shared';
-import { zindexable, clickoutside, mousemoveoutside } from '@destyler/directives';
-import { useFalseUntilTruthy, useMemo, useIsMounted, useMergedState } from '@destyler/composition';
-
-function getParentNode(node) {
-  if (node.nodeType === 9)
-    return null;
-  return node.parentNode;
-}
-function getScrollParent(node) {
-  if (node === null)
-    return null;
-  const parentNode = getParentNode(node);
-  if (parentNode === null)
-    return null;
-  if (parentNode.nodeType === 9)
-    return document;
-  if (parentNode.nodeType === 1) {
-    const { overflow, overflowX, overflowY } = getComputedStyle(
-      parentNode
-    );
-    if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX))
-      return parentNode;
-  }
-  return getScrollParent(parentNode);
-}
-
-const DestylerBinder = defineComponent({
-  name: "DestylerBinder",
-  props: {
-    syncTargetWithParent: {
-      type: Boolean
-    },
-    syncTarget: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props, { slots }) {
-    provide("DestylerBinder", getCurrentInstance()?.proxy);
-    const DestylerBinder = inject("DestylerBinder", null);
-    const targetRef = ref(null);
-    const followerResizeListeners = /* @__PURE__ */ new Set();
-    const followerScrollListeners = /* @__PURE__ */ new Set();
-    const onScrollRaf = () => {
-      followerScrollListeners.forEach((listener) => listener());
-    };
-    const onScroll = () => {
-      beforeNextFrameOnce(onScrollRaf);
-    };
-    const onResize = () => {
-      followerResizeListeners.forEach((listener) => listener());
-    };
-    const setTargetRef = (el) => {
-      targetRef.value = el;
-      if (DestylerBinder && props.syncTargetWithParent)
-        DestylerBinder.setTargetRef(el);
-    };
-    let scrollableNodes = [];
-    const ensureScrollListener = () => {
-      let cursor = targetRef.value;
-      while (true) {
-        cursor = getScrollParent(cursor);
-        if (cursor === null)
-          break;
-        scrollableNodes.push(cursor);
-      }
-      for (const el of scrollableNodes)
-        on("scroll", el, onScroll, true);
-    };
-    const removeScrollListeners = () => {
-      for (const el of scrollableNodes)
-        off("scroll", el, onScroll, true);
-      scrollableNodes = [];
-    };
-    const addScrollListener = (listener) => {
-      if (followerScrollListeners.size === 0)
-        ensureScrollListener();
-      if (!followerScrollListeners.has(listener))
-        followerScrollListeners.add(listener);
-    };
-    const removeScrollListener = (listener) => {
-      if (followerScrollListeners.has(listener))
-        followerScrollListeners.delete(listener);
-      if (followerScrollListeners.size === 0)
-        removeScrollListeners();
-    };
-    const addResizeListener = (listener) => {
-      if (followerResizeListeners.size === 0)
-        on("resize", window, onResize);
-      if (!followerResizeListeners.has(listener))
-        followerResizeListeners.add(listener);
-    };
-    const removeResizeListener = (listener) => {
-      if (followerResizeListeners.has(listener))
-        followerResizeListeners.delete(listener);
-      if (followerResizeListeners.size === 0)
-        off("resize", window, onResize);
-    };
-    onBeforeUnmount(() => {
-      off("resize", window, onResize);
-      removeScrollListeners();
-    });
-    return {
-      targetRef,
-      setTargetRef,
-      addScrollListener,
-      removeScrollListener,
-      addResizeListener,
-      removeResizeListener
-    };
-  },
-  render() {
-    return getSlot("binder", this.$slots);
-  }
-});
-
-const DestylerTarget = defineComponent({
-  name: "DestylerTarget",
-  setup() {
-    const { setTargetRef, syncTarget } = inject("DestylerBinder");
-    const setTargetDirective = {
-      mounted(el) {
-        setTargetRef(el);
-      },
-      updated(el) {
-        setTargetRef(el);
-      }
-    };
-    return {
-      syncTarget,
-      setTargetDirective
-    };
-  },
-  render() {
-    const { syncTarget, setTargetDirective } = this;
-    if (syncTarget) {
-      return withDirectives(getFirstVNode("follower", this.$slots), [
-        [setTargetDirective]
-      ]);
-    }
-    return getFirstVNode("follower", this.$slots);
-  }
-});
-
-const DestylerLazyTeleport = defineComponent({
-  name: "DestylerLazyTeleport",
-  props: {
-    to: {
-      type: [String, Object],
-      default: "body"
-    },
-    disabled: {
-      type: Boolean
-    },
-    show: {
-      type: Boolean,
-      required: true
-    }
-  },
-  setup(props) {
-    return {
-      showTeleport: useFalseUntilTruthy(toRef(props, "show")),
-      mergedTo: computed(() => {
-        const { to } = props;
-        return to ?? "body";
-      })
-    };
-  },
-  render() {
-    return this.showTeleport ? this.disabled ? getSlot("lazy-teleport", this.$slots) : h(
-      Teleport,
-      {
-        disabled: this.disabled,
-        to: this.mergedTo
-      },
-      getSlot("lazy-teleport", this.$slots)
-    ) : null;
-  }
-});
-
-const DestylerFollower = defineComponent({
-  name: "DestylerFollower",
-  inheritAttrs: true,
-  props: {
-    show: {
-      type: Boolean,
-      default: false
-    },
-    enabled: {
-      type: Boolean,
-      default: void 0
-    },
-    to: {
-      type: [String, Object],
-      default: "body"
-    },
-    flip: {
-      type: Boolean,
-      default: true
-    },
-    internalShift: {
-      type: Boolean
-    },
-    x: {
-      type: Number
-    },
-    y: {
-      type: Number
-    },
-    width: {
-      type: String
-    },
-    minWidth: {
-      type: String
-    },
-    containerClass: {
-      type: String
-    },
-    teleportDisabled: {
-      type: Boolean
-    },
-    zindexable: {
-      type: Boolean,
-      default: true
-    },
-    zIndex: {
-      type: Number
-    },
-    overlap: {
-      type: Boolean
-    }
-  },
-  setup(props) {
-    const DestylerBinder = inject("DestylerBinder");
-    const mergedEnabled = useMemo(() => {
-      return props.enabled !== void 0 ? props.enabled : props.show;
-    });
-    const follower = ref(null);
-    const offsetContainer = ref(null);
-    const isMounted = useIsMounted();
-    const mergedTo = useMemo(
-      () => {
-        const { to } = props;
-        if (to !== void 0)
-          return to;
-        if (isMounted.value) {
-          return void 0;
-        }
-        return void 0;
-      }
-    );
-    function getElementBounding() {
-      if (DestylerBinder.targetRef === null) {
-        return {
-          x: 0,
-          y: 0,
-          width: 0,
-          height: 0
-        };
-      } else {
-        const rect = DestylerBinder.targetRef.getBoundingClientRect();
-        return {
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height
-        };
-      }
-    }
-    return {
-      mergedEnabled,
-      follower,
-      offsetContainer,
-      mergedTo,
-      getElementBounding
-    };
-  },
-  render() {
-    return h(DestylerLazyTeleport, {
-      to: this.mergedTo,
-      disabled: this.$props.teleportDisabled,
-      show: this.$props.show
-    }, {
-      default: () => {
-        const vNode = h("div", {
-          ref: "offsetContainer",
-          destyler: "offset-container"
-        }, [
-          h("div", {
-            ref: "follower",
-            destyler: "follower",
-            style: `
-            --destyler-follower-x:${this.getElementBounding().x}px;
-            --destyler-follower-y:${this.getElementBounding().y}px;
-            --destyler-follower-width:${this.getElementBounding().width}px;
-            --destyler-follower-height:${this.getElementBounding().height}px;
-            `
-          }, this.$slots.default?.())
-        ]);
-        if (this.$props.zindexable) {
-          return withDirectives(vNode, [
-            [
-              zindexable,
-              {
-                enabled: this.mergedEnabled,
-                zIndex: this.$props.zIndex
-              }
-            ]
-          ]);
-        }
-        return vNode;
-      }
-    });
-  }
-});
-
-function isHTMLElement(node) {
-  return node instanceof HTMLElement;
-}
-function focusFirstDescendant(node) {
-  for (let i = 0; i < node.childNodes.length; i++) {
-    const child = node.childNodes[i];
-    if (isHTMLElement(child)) {
-      if (attemptFocus(child) || focusFirstDescendant(child))
-        return true;
-    }
-  }
-  return false;
-}
-function focusLastDescendant(element) {
-  for (let i = element.childNodes.length - 1; i >= 0; i--) {
-    const child = element.childNodes[i];
-    if (isHTMLElement(child)) {
-      if (attemptFocus(child) || focusLastDescendant(child))
-        return true;
-    }
-  }
-  return false;
-}
-function attemptFocus(element) {
-  if (!isFocusable(element))
-    return false;
-  try {
-    element.focus({ preventScroll: true });
-  } catch (e) {
-  }
-  return document.activeElement === element;
-}
-function isFocusable(element) {
-  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null)
-    return true;
-  if (element.getAttribute("disabled"))
-    return false;
-  switch (element.nodeName) {
-    case "A":
-      return !!element.href && element.rel !== "ignore";
-    case "INPUT":
-      return element.type !== "hidden" && element.type !== "file";
-    case "BUTTON":
-    case "SELECT":
-    case "TEXTAREA":
-      return true;
-    default:
-      return false;
-  }
-}
-
-let stack = [];
-const DestylerFocusTrap = defineComponent({
-  name: "DestylerFocusTrap",
-  props: {
-    disabled: {
-      type: Boolean
-    },
-    active: {
-      type: Boolean
-    },
-    autoFocus: {
-      type: Boolean,
-      default: true
-    },
-    onEsc: {
-      type: Function
-    },
-    initialFocusTo: {
-      type: String
-    },
-    finalFocusTo: {
-      type: String
-    },
-    returnFocusOnDeactivated: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props) {
-    const id = createId();
-    const focusableStartRef = ref(null);
-    const focusableEndRef = ref(null);
-    let activated = false;
-    let ignoreInternalFocusChange = false;
-    const lastFocusedElement = typeof document === "undefined" ? null : document.activeElement;
-    function isCurrentActive() {
-      const currentActiveId = stack[stack.length - 1];
-      return currentActiveId === id;
-    }
-    function handleDocumentKeydown(e) {
-      if (e.code === "Escape") {
-        if (isCurrentActive())
-          props.onEsc?.(e);
-      }
-    }
-    onMounted(() => {
-      watch(
-        () => props.active,
-        (value) => {
-          if (value) {
-            activate();
-            on("keydown", document, handleDocumentKeydown);
-          } else {
-            off("keydown", document, handleDocumentKeydown);
-            if (activated)
-              deactivate();
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-    });
-    onBeforeUnmount(() => {
-      off("keydown", document, handleDocumentKeydown);
-      if (activated)
-        deactivate();
-    });
-    function handleDocumentFocus(e) {
-      if (ignoreInternalFocusChange)
-        return;
-      if (isCurrentActive()) {
-        const mainEl = getMainEl();
-        if (mainEl === null)
-          return;
-        if (mainEl.contains(getPreciseEventTarget(e)))
-          return;
-        resetFocusTo("first");
-      }
-    }
-    function getMainEl() {
-      const focusableStartEl = focusableStartRef.value;
-      if (focusableStartEl === null)
-        return null;
-      let mainEl = focusableStartEl;
-      while (true) {
-        mainEl = mainEl.nextSibling;
-        if (mainEl === null)
-          break;
-        if (mainEl instanceof Element && mainEl.tagName === "DIV")
-          break;
-      }
-      return mainEl;
-    }
-    function activate() {
-      if (props.disabled)
-        return;
-      stack.push(id);
-      if (props.autoFocus) {
-        const { initialFocusTo } = props;
-        if (initialFocusTo === void 0)
-          resetFocusTo("first");
-        else
-          resolveTo(initialFocusTo)?.focus({ preventScroll: true });
-      }
-      activated = true;
-      document.addEventListener("focus", handleDocumentFocus, true);
-    }
-    function deactivate() {
-      if (props.disabled)
-        return;
-      document.removeEventListener("focus", handleDocumentFocus, true);
-      stack = stack.filter((idInStack) => idInStack !== id);
-      if (isCurrentActive())
-        return;
-      const { finalFocusTo } = props;
-      if (finalFocusTo !== void 0) {
-        resolveTo(finalFocusTo)?.focus({ preventScroll: true });
-      } else if (props.returnFocusOnDeactivated) {
-        if (lastFocusedElement instanceof HTMLElement) {
-          ignoreInternalFocusChange = true;
-          lastFocusedElement.focus({ preventScroll: true });
-          ignoreInternalFocusChange = false;
-        }
-      }
-    }
-    function resetFocusTo(target) {
-      if (!isCurrentActive())
-        return;
-      if (props.active) {
-        const focusableStartEl = focusableStartRef.value;
-        const focusableEndEl = focusableEndRef.value;
-        if (focusableStartEl !== null && focusableEndEl !== null) {
-          const mainEl = getMainEl();
-          if (mainEl == null || mainEl === focusableEndEl) {
-            ignoreInternalFocusChange = true;
-            focusableStartEl.focus({ preventScroll: true });
-            ignoreInternalFocusChange = false;
-            return;
-          }
-          ignoreInternalFocusChange = true;
-          const focused = target === "first" ? focusFirstDescendant(mainEl) : focusLastDescendant(mainEl);
-          ignoreInternalFocusChange = false;
-          if (!focused) {
-            ignoreInternalFocusChange = true;
-            focusableStartEl.focus({ preventScroll: true });
-            ignoreInternalFocusChange = false;
-          }
-        }
-      }
-    }
-    function handleStartFocus(e) {
-      if (ignoreInternalFocusChange)
-        return;
-      const mainEl = getMainEl();
-      if (mainEl === null)
-        return;
-      if (e.relatedTarget !== null && mainEl.contains(e.relatedTarget)) {
-        resetFocusTo("last");
-      } else {
-        resetFocusTo("first");
-      }
-    }
-    function handleEndFocus(e) {
-      if (ignoreInternalFocusChange)
-        return;
-      if (e.relatedTarget !== null && e.relatedTarget === focusableStartRef.value) {
-        resetFocusTo("last");
-      } else {
-        resetFocusTo("first");
-      }
-    }
-    return {
-      focusableStartRef,
-      focusableEndRef,
-      focusableStyle: "position: absolute; height: 0; width: 0;",
-      handleStartFocus,
-      handleEndFocus
-    };
-  },
-  render() {
-    const { default: defaultSlot } = this.$slots;
-    if (defaultSlot === void 0)
-      return null;
-    if (this.disabled)
-      return defaultSlot();
-    const { active, focusableStyle } = this;
-    return h(Fragment, null, [
-      h("div", {
-        "destyler": "focusable-start",
-        "aria-hidden": "true",
-        "tabindex": active ? "0" : "-1",
-        "ref": "focusableStartRef",
-        "style": focusableStyle,
-        "onFocus": this.handleStartFocus
-      }),
-      h("div", {
-        destyler: "focusable-content"
-      }, defaultSlot()),
-      h("div", {
-        "destyler": "focusable-end",
-        "aria-hidden": "true",
-        "style": focusableStyle,
-        "ref": "focusableEndRef",
-        "tabindex": active ? "0" : "-1",
-        "onFocus": this.handleEndFocus
-      })
-    ]);
-  }
-});
-
-const popoverBodyProps = {
-  show: {
-    type: Boolean
-  },
-  trigger: {
-    type: String
-  },
-  delay: {
-    type: Number
-  },
-  duration: {
-    type: Number
-  },
-  displayDirective: {
-    type: String
-  },
-  x: {
-    type: Number
-  },
-  y: {
-    type: Number
-  },
-  flip: {
-    type: Boolean
-  },
-  internalTrapFocus: {
-    type: Boolean
-  },
-  overlap: {
-    type: Boolean
-  },
-  keepAliveOnHover: {
-    type: Boolean
-  },
-  scrollable: {
-    type: Boolean
-  },
-  internalDeactivateImmediately: {
-    type: Boolean
-  },
-  onClickoutside: {
-    type: Function
-  }
-};
-const DestylerPopoverBody = defineComponent({
-  name: "DestylerPopoverBody",
-  props: popoverBodyProps,
-  setup(props, { slots, attrs }) {
-    const follower = ref(null);
-    const DestylerPopover = inject("DestylerPopover");
-    const body = ref(null);
-    const followerEnabled = ref(props.show);
-    const displayed = ref(false);
-    watchEffect(() => {
-      const { show } = props;
-      if (show && !isJsdom() && !props.internalDeactivateImmediately)
-        displayed.value = true;
-      else
-        displayed.value = false;
-    });
-    onBeforeUnmount(() => {
-      DestylerPopover.setBodyInstance(null);
-    });
-    watch(toRef(props, "show"), (value) => {
-      if (value)
-        followerEnabled.value = true;
-      else
-        followerEnabled.value = false;
-    });
-    function syncPosition() {
-      follower.value?.syncPosition();
-    }
-    DestylerPopover.setBodyInstance({
-      syncPosition
-    });
-    function handleMouseEnter(e) {
-      if (props.trigger === "hover" && props.keepAliveOnHover && props.show)
-        DestylerPopover.handleMouseEnter(e);
-    }
-    function handleMouseLeave(e) {
-      if (props.trigger === "hover" && props.keepAliveOnHover)
-        DestylerPopover.handleMouseLeave(e);
-    }
-    function handleMouseMoveOutside(e) {
-      if (props.trigger === "hover" && !getTriggerElement().contains(getPreciseEventTarget(e)))
-        DestylerPopover.handleMouseMoveOutside(e);
-    }
-    function getTriggerElement() {
-      return DestylerPopover.getTriggerElement();
-    }
-    function handleClickOutside(e) {
-      if (props.trigger === "click" && !getTriggerElement().contains(
-        getPreciseEventTarget(e)
-      ) || props.onClickoutside)
-        DestylerPopover.handleClickOutside(e);
-    }
-    const directives = computed(() => {
-      const { trigger, onClickoutside } = props;
-      const directives2 = [];
-      const {
-        positionManually: { value: positionManually }
-      } = DestylerPopover;
-      if (!positionManually) {
-        if (trigger === "click" && !onClickoutside) {
-          directives2.push([
-            clickoutside,
-            handleClickOutside,
-            void 0,
-            { capture: true }
-          ]);
-        }
-        if (trigger === "hover")
-          directives2.push([mousemoveoutside, handleMouseMoveOutside]);
-      }
-      if (onClickoutside) {
-        directives2.push([
-          clickoutside,
-          handleClickOutside,
-          void 0,
-          { capture: true }
-        ]);
-      }
-      if (props.displayDirective === "show" || displayed.value)
-        directives2.push([vShow, props.show]);
-      return directives2;
-    });
-    function renderContentNode() {
-      const shouldRenderDom = props.displayDirective === "show" || props.show || displayed.value;
-      if (!shouldRenderDom)
-        return null;
-      let contentNode;
-      const renderBody = DestylerPopover.internalRenderBody.value;
-      if (!renderBody) {
-        const { internalTrapFocus } = props;
-        const hasHeaderOrFooter = !isSlotEmpty(slots.header) || !isSlotEmpty(slots.footer);
-        const renderContentInnerNode = () => {
-          const body2 = hasHeaderOrFooter ? [
-            resolveWrappedSlot(slots.header, (children) => {
-              return children ? h("div", null, children) : null;
-            }),
-            resolveWrappedSlot(slots.default, (children) => {
-              return children ? h("div", null, children) : null;
-            }),
-            resolveWrappedSlot(slots.footer, (children) => {
-              return children ? h("div", null, children) : null;
-            })
-          ] : h("div", {
-            destyler: "popover-body-content"
-          }, slots);
-          return [body2];
-        };
-        contentNode = h(
-          "div",
-          mergeProps({
-            ref: body,
-            destyler: "popover-body-toggle",
-            onMouseenter: handleMouseEnter,
-            onMouseleave: handleMouseLeave
-          }, attrs),
-          internalTrapFocus ? h(DestylerFocusTrap, {
-            active: props.show,
-            autoFocus: true
-          }, renderContentInnerNode) : renderContentInnerNode()
-        );
-      } else {
-        contentNode = renderBody(body, handleMouseEnter, handleMouseLeave);
-      }
-      return withDirectives(contentNode, directives.value);
-    }
-    return {
-      displayed,
-      isMounted: DestylerPopover.isMounted,
-      zIndex: DestylerPopover.zIndex,
-      follower,
-      followerEnabled,
-      renderContentNode
-    };
-  },
-  render() {
-    return h(DestylerFollower, {
-      ref: "follower",
-      zIndex: this.zIndex,
-      show: this.$props.show,
-      enabled: this.followerEnabled,
-      to: "body",
-      x: this.$props.x,
-      y: this.$props.y,
-      flip: this.$props.flip,
-      overlap: this.$props.overlap
-    }, () => this.renderContentNode());
-  }
-});
-
-const bodyPropKeys = Object.keys(popoverBodyProps);
-const triggerEventMap = {
-  focus: ["onFocus", "onBlur"],
-  click: ["onClick"],
-  hover: ["onMouseenter", "onMouseleave"],
-  manual: [],
-  nested: ["onFocus", "onBlur", "onMouseenter", "onMouseleave", "onClick"]
-};
-function appendEvents(vNode, trigger, events) {
-  triggerEventMap[trigger].forEach((eventName) => {
-    if (!vNode.props)
-      vNode.props = {};
-    else
-      vNode.props = Object.assign({}, vNode.props);
-    const originalHandler = vNode.props[eventName];
-    const handler = events[eventName];
-    if (!originalHandler) {
-      vNode.props[eventName] = handler;
-    } else {
-      vNode.props[eventName] = (...args) => {
-        originalHandler(...args);
-        handler(...args);
-      };
-    }
-  });
-}
-const destylerPopoverProps = {
-  "show": {
-    type: Boolean,
-    default: void 0
-  },
-  "defaultShow": {
-    type: Boolean
-  },
-  "trigger": {
-    type: String,
-    default: "hover"
-  },
-  "delay": {
-    type: Number,
-    default: 100
-  },
-  "duration": {
-    type: Number,
-    default: 100
-  },
-  "x": {
-    type: Number
-  },
-  "y": {
-    type: Number
-  },
-  "disabled": {
-    type: Boolean
-  },
-  "getDisabled": {
-    type: Function
-  },
-  "displayDirective": {
-    type: String,
-    default: "if"
-  },
-  "zIndex": {
-    type: Number
-  },
-  "internalSyncTargetWithParent": {
-    type: Boolean
-  },
-  "internalInheritedEventHandlers": {
-    type: Array,
-    default: () => []
-  },
-  "internalTrapFocus": {
-    type: Boolean
-  },
-  "onClickoutside": {
-    type: Function
-  },
-  "onUpdate:show": {
-    type: [Function, Array]
-  },
-  "onUpdateShow": {
-    type: [Function, Array]
-  },
-  "onShow": {
-    type: [Function, Array]
-  },
-  "onHide": {
-    type: [Function, Array]
-  },
-  "internalRenderBody": {
-    type: Function
-  }
-};
-const DestylerPopover = defineComponent({
-  name: "DestylerPopover",
-  inheritAttrs: false,
-  props: destylerPopoverProps,
-  __popover__: true,
-  setup(props, { slots, attrs }) {
-    const isMounted = useIsMounted();
-    const binderInst = ref(null);
-    const controlledShow = computed(() => props.show);
-    const uncontrolledShow = ref(props.defaultShow);
-    const mergedShowWithoutDisabled = useMergedState(
-      controlledShow,
-      uncontrolledShow
-    );
-    const mergedShowConsideringDisabledProp = useMemo(() => {
-      if (props.disabled)
-        return false;
-      return mergedShowWithoutDisabled.value;
-    });
-    const getMergedDisabled = () => {
-      if (props.disabled)
-        return true;
-      const { getDisabled } = props;
-      if (getDisabled?.())
-        return true;
-      return false;
-    };
-    const getMergedShow = () => {
-      if (getMergedDisabled())
-        return false;
-      return mergedShowWithoutDisabled.value;
-    };
-    const showTimerId = ref(null);
-    const hideTimerId = ref(null);
-    const positionManually = useMemo(() => {
-      return props.x !== void 0 && props.y !== void 0;
-    });
-    function doUpdateShow(value) {
-      const {
-        "onUpdate:show": _onUpdateShow,
-        onUpdateShow,
-        onShow,
-        onHide
-      } = props;
-      uncontrolledShow.value = value;
-      if (_onUpdateShow)
-        call(_onUpdateShow, value);
-      if (onUpdateShow)
-        call(onUpdateShow, value);
-      if (value && onShow)
-        call(onShow, true);
-      if (value && onHide)
-        call(onHide, false);
-    }
-    function clearShowTimer() {
-      if (showTimerId.value) {
-        window.clearTimeout(showTimerId.value);
-        showTimerId.value = null;
-      }
-    }
-    function clearHideTimer() {
-      if (hideTimerId.value) {
-        window.clearTimeout(hideTimerId.value);
-        hideTimerId.value = null;
-      }
-    }
-    function handleFocus() {
-      const mergedDisabled = getMergedDisabled();
-      if (props.trigger === "focus" && !mergedDisabled) {
-        if (getMergedShow())
-          return;
-        doUpdateShow(true);
-      }
-    }
-    function handleBlur() {
-      const mergedDisabled = getMergedDisabled();
-      if (props.trigger === "focus" && !mergedDisabled) {
-        if (!getMergedShow())
-          return;
-        doUpdateShow(false);
-      }
-    }
-    function handleMouseEnter() {
-      const mergedDisabled = getMergedDisabled();
-      if (props.trigger === "hover" && !mergedDisabled) {
-        clearHideTimer();
-        if (showTimerId.value !== null)
-          return;
-        if (getMergedShow())
-          return;
-        const delayCallback = () => {
-          doUpdateShow(true);
-          showTimerId.value = null;
-        };
-        const { delay } = props;
-        if (delay === 0)
-          delayCallback();
-        else
-          showTimerId.value = window.setTimeout(delayCallback, delay);
-      }
-    }
-    function handleMouseLeave() {
-      const mergedDisabled = getMergedDisabled();
-      if (props.trigger === "hover" && !mergedDisabled) {
-        clearShowTimer();
-        if (hideTimerId.value !== null)
-          return;
-        if (!getMergedShow())
-          return;
-        const delayedCallback = () => {
-          doUpdateShow(false);
-          hideTimerId.value = null;
-        };
-        const { duration } = props;
-        if (duration === 0)
-          delayedCallback();
-        else
-          hideTimerId.value = window.setTimeout(delayedCallback, duration);
-      }
-    }
-    function handleMouseMoveOutside() {
-      handleMouseLeave();
-    }
-    function handleClickOutside(e) {
-      if (!getMergedShow())
-        return;
-      if (props.trigger === "click") {
-        clearShowTimer();
-        clearHideTimer();
-        doUpdateShow(false);
-      }
-      props.onClickoutside?.(e);
-    }
-    function handleClick() {
-      if (props.trigger === "click" && !getMergedDisabled()) {
-        clearShowTimer();
-        clearHideTimer();
-        const nextShow = !getMergedShow();
-        doUpdateShow(nextShow);
-      }
-    }
-    function getTriggerElement() {
-      return binderInst.value?.targetRef;
-    }
-    function setBodyInstance(value) {
-    }
-    provide("DestylerPopover", {
-      getTriggerElement,
-      handleMouseEnter,
-      handleMouseLeave,
-      handleClickOutside,
-      handleMouseMoveOutside,
-      setBodyInstance,
-      positionManually,
-      isMounted,
-      zIndex: toRef(props, "zIndex"),
-      internalRenderBody: toRef(props, "internalRenderBody")
-    });
-    watchEffect(() => {
-      if (mergedShowWithoutDisabled.value && getMergedDisabled())
-        doUpdateShow(false);
-    });
-    function setShow(value) {
-      uncontrolledShow.value = value;
-    }
-    return {
-      binderInst,
-      positionManually,
-      mergedShowConsideringDisabledProp,
-      // if to show popover body
-      uncontrolledShow,
-      setShow,
-      getMergedShow,
-      handleClick,
-      handleMouseEnter,
-      handleMouseLeave,
-      handleFocus,
-      handleBlur
-    };
-  },
-  render() {
-    let triggerVNode;
-    let popoverInside = false;
-    if (!this.positionManually) {
-      if (this.$slots.activator)
-        triggerVNode = getFirstSlotVNode(this.$slots, "activator");
-      else
-        triggerVNode = getFirstSlotVNode(this.$slots, "trigger");
-      if (triggerVNode) {
-        triggerVNode = cloneVNode(triggerVNode);
-        triggerVNode = triggerVNode.type === Text ? h("span", [triggerVNode]) : triggerVNode;
-        const handlers = {
-          onClick: this.handleClick,
-          onMouseenter: this.handleMouseEnter,
-          onMouseleave: this.handleMouseLeave,
-          onFocus: this.handleFocus,
-          onBlur: this.handleBlur
-        };
-        if (triggerVNode.type?.__popover__) {
-          popoverInside = true;
-          if (!triggerVNode.props) {
-            triggerVNode.props = {
-              internalSyncTargetWithParent: true,
-              internalInheritedEventHandlers: []
-            };
-          }
-          triggerVNode.props.internalSyncTargetWithParent = true;
-          if (!triggerVNode.props.internalInheritedEventHandlers) {
-            triggerVNode.props.internalInheritedEventHandlers = [handlers];
-          } else {
-            triggerVNode.props.internalInheritedEventHandlers = [
-              handlers,
-              ...triggerVNode.props.internalInheritedEventHandlers
-            ];
-          }
-        } else {
-          const { internalInheritedEventHandlers } = this.$props;
-          const ascendantAndCurrentHandlers = [
-            handlers,
-            ...internalInheritedEventHandlers
-          ];
-          const mergedHandlers = {
-            onBlur: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onBlur(e);
-              });
-            },
-            onFocus: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onFocus(e);
-              });
-            },
-            onClick: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onClick(e);
-              });
-            },
-            onMouseenter: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onMouseenter(e);
-              });
-            },
-            onMouseleave: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onMouseleave(e);
-              });
-            }
-          };
-          appendEvents(
-            triggerVNode,
-            internalInheritedEventHandlers ? "nested" : this.positionManually ? "manual" : this.$props.trigger,
-            mergedHandlers
-          );
-        }
-      }
-    }
-    return h(
-      DestylerBinder,
-      {
-        ref: "binderInst",
-        syncTarget: !popoverInside,
-        syncTargetWithParent: this.$props.internalSyncTargetWithParent
-      },
-      () => {
-        return [
-          this.$props.internalTrapFocus && this.getMergedShow() ? withDirectives(h("div"), [[zindexable, { enabled: this.getMergedShow(), zIndex: this.$props.zIndex }]]) : null,
-          this.positionManually ? null : h(DestylerTarget, null, {
-            default: () => triggerVNode
-          }),
-          h(
-            DestylerPopoverBody,
-            keep(this.$props, bodyPropKeys, {
-              ...this.$attrs,
-              show: this.getMergedShow()
-            }),
-            {
-              default: () => this.$slots.default?.(),
-              header: () => this.$slots.header?.(),
-              footer: () => this.$slots.footer?.()
-            }
-          )
-        ];
-      }
-    );
-  }
-});
-
-const name = "@destyler/popover";
-
-const packageName = name;
-function DestylerPopoverResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (name2 === "DestylerPopover")
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-export { DestylerPopover, DestylerPopoverBody, DestylerPopoverResolver, destylerPopoverProps, popoverBodyProps };
+export { D as DestylerPopoverArrow, a as DestylerPopoverClose, b as DestylerPopoverContent, f as DestylerPopoverPortal, g as DestylerPopoverRoot, h as DestylerPopoverTrigger } from './shared/popover.a25f925c.mjs';
+import 'vue';
+import '@destyler/popper';
+import '@destyler/primitive';
+import '@destyler/shared';
+import '@destyler/composition';
+import '@destyler/presence';
+import '@destyler/dismissable-layer';
+import '@destyler/focus-scope';
+import '@destyler/directives';
+import '@destyler/teleport';