@destyler/popover 0.0.1-beta.9 → 0.0.2

package/dist/component.mjs

@@ -0,0 +1,48 @@
+import { defineComponent, onBeforeMount, onUnmounted, h, mergeProps } from 'vue';
+import { DestylerPopperAnchor } from '@destyler/popper';
+import { i as injectPopoverRootContext } from './shared/popover.a25f925c.mjs';
+export { D as DestylerPopoverArrow, a as DestylerPopoverClose, b as DestylerPopoverContent, c as DestylerPopoverContentImpl, d as DestylerPopoverContentModal, e as DestylerPopoverContentNonModal, f as DestylerPopoverPortal, g as DestylerPopoverRoot, h as DestylerPopoverTrigger } from './shared/popover.a25f925c.mjs';
+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';
+
+const destylerPopoverAnchorProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  element: {
+    type: Object
+  }
+};
+const DestylerPopoverAnchor = defineComponent({
+  name: "DestylerPopoverAnchor",
+  props: destylerPopoverAnchorProps,
+  setup() {
+    const rootContext = injectPopoverRootContext();
+    onBeforeMount(() => {
+      rootContext.hasCustomAnchor.value = true;
+    });
+    onUnmounted(() => {
+      rootContext.hasCustomAnchor.value = false;
+    });
+  },
+  render() {
+    return h(DestylerPopperAnchor, mergeProps(this.$props, {}), {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+export { DestylerPopoverAnchor };

package/dist/index.cjs

@@ -1,410 +1,22 @@
 'use strict';
 
-const vue = require('vue');
-const popper = require('@destyler/popper');
-const shared = require('@destyler/shared');
-const composition = require('@destyler/composition');
-const primitive = require('@destyler/primitive');
-const presence = require('@destyler/presence');
-const dismissableLayer = require('@destyler/dismissable-layer');
-const focusScope = require('@destyler/focus-scope');
-const directives = require('@destyler/directives');
-const teleport = require('@destyler/teleport');
-
-const [injectPopoverRootContext, providePopoverRootContext] = shared.createContext("DestylerPopoverRoot");
-const destylerPopoverRootProps = {
-  defaultOpen: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  open: {
-    type: Boolean,
-    required: false,
-    default: void 0
-  },
-  modal: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerPopoverRoot = vue.defineComponent({
-  name: "DestylerPopoverRoot",
-  props: destylerPopoverRootProps,
-  emits: ["update:open"],
-  setup(props, { emit }) {
-    const modalRef = vue.toRef(props.modal);
-    const openRef = composition.useVModel(props, "open", emit, {
-      defaultValue: props.defaultOpen,
-      passive: props.open === void 0
-    });
-    const triggerElement = vue.ref();
-    const hasCustomAnchor = vue.ref(false);
-    function handleUpdateOpen(value) {
-      openRef.value = value;
-    }
-    providePopoverRootContext({
-      contentId: composition.useId(),
-      modal: modalRef,
-      open: openRef,
-      onOpenChange: (value) => {
-        handleUpdateOpen(value);
-      },
-      onOpenToggle: () => {
-        handleUpdateOpen(!openRef.value);
-      },
-      triggerElement,
-      hasCustomAnchor
-    });
-    return {
-      openRef,
-      modalRef,
-      triggerElement,
-      hasCustomAnchor
-    };
-  },
-  render() {
-    return vue.h(popper.DestylerPopperRoot, this.$slots.default?.());
-  }
-});
-
-const destylerPopoverAnchorProps = {
-  ...popper.destylerPopperArrowProps
-};
-const DestylerPopoverAnchor = vue.defineComponent({
-  name: "DestylerPopoverAnchor",
-  props: destylerPopoverAnchorProps,
-  setup() {
-    const rootContext = injectPopoverRootContext();
-    vue.onBeforeMount(() => {
-      rootContext.hasCustomAnchor.value = true;
-    });
-    vue.onUnmounted(() => {
-      rootContext.hasCustomAnchor.value = false;
-    });
-  },
-  render() {
-    return vue.h(popper.DestylerPopperAnchor, vue.mergeProps(this.$props, {}), this.$slots.default?.());
-  }
-});
-
-const destylerPopoverArrowProps = {
-  ...popper.destylerPopperArrowProps
-};
-const DestylerPopoverArrow = vue.defineComponent({
-  name: "DestylerPopoverArrow",
-  props: destylerPopoverArrowProps,
-  render() {
-    return vue.h(popper.DestylerPopperArrow, vue.mergeProps(this.$props, {}), this.$slots.default?.());
-  }
-});
-
-const destylerPopoverCloseProps = {
-  ...primitive.destylerPrimitiveProp,
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  }
-};
-const DestylerPopoverClose = vue.defineComponent({
-  name: "DestylerPopoverClose",
-  props: destylerPopoverCloseProps,
-  setup() {
-    const rootContext = injectPopoverRootContext();
-    return {
-      rootContext
-    };
-  },
-  render() {
-    return vue.h(primitive.DestylerPrimitive, {
-      as: this.$props.as,
-      asChild: this.$props.asChild,
-      type: this.$props.as === "button" ? "button" : void 0,
-      onClick: () => {
-        this.rootContext.onOpenChange(false);
-      }
-    }, this.$slots.default?.());
-  }
-});
-
-const destylerPopoverContentImplProps = {
-  ...popper.destylerPopperContentProps,
-  ...dismissableLayer.destylerDismissableLayerProps,
-  trapFocus: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const destylerPopoverContentImplEmits = ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss", "openAutoFocus", "closeAutoFocus"];
-const DestylerPopoverContentImpl = vue.defineComponent({
-  name: "DestylerPopoverContentImpl",
-  props: destylerPopoverContentImplProps,
-  emits: destylerPopoverContentImplEmits,
-  setup(props) {
-    const forwarded = composition.useForwardProps(props);
-    const rootContext = injectPopoverRootContext();
-    composition.useFocusGuards();
-    return {
-      rootContext,
-      forwarded
-    };
-  },
-  render() {
-    return vue.h(focusScope.DestylerFocusScope, {
-      asChild: this.$props.asChild,
-      loop: true,
-      trapped: this.$props.trapFocus,
-      onMountAutoFocus: (event) => {
-        this.$emit("openAutoFocus", event);
-      },
-      onUnmountAutoFocus: (event) => {
-        this.$emit("closeAutoFocus", event);
-      }
-    }, vue.h(dismissableLayer.DestylerDismissableLayer, {
-      asChild: this.$props.asChild,
-      disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
-      onPointerDownOutside: (event) => {
-        this.$emit("pointerDownOutside", event);
-      },
-      onInteractOutside: (event) => {
-        this.$emit("interactOutside", event);
-      },
-      onEscapeKeyDown: (event) => {
-        this.$emit("escapeKeyDown", event);
-      },
-      onFocusOutside: (event) => {
-        this.$emit("focusOutside", event);
-      },
-      onDismiss: () => {
-        this.rootContext.onOpenChange(false);
-      }
-    }, vue.withDirectives(vue.h(popper.DestylerPopperContent, vue.mergeProps(this.forwarded, {
-      "data-state": this.rootContext.open.value ? "open" : "closed",
-      "role": "dialog",
-      "style": {
-        "--destyler_popover_content_transform_origin": "var(--destyler_popper_transform_origin)",
-        "--destyler_popover_content_available_width": "var(--destyler_popper_available_width)",
-        "--destyler_popover_content_available_height": "var(--destyler_popper_available_height)",
-        "--destyler_popover_trigger_width": "var(--destyler_popper_anchor_width)",
-        "--destyler_popover_trigger_height": "var(--destyler_popper_anchor_height)"
-      }
-    }), this.$slots.default?.()), [
-      [directives.BindOnceDirective, { id: this.rootContext.contentId }]
-    ])));
-  }
-});
-
-const DestylerPopoverContentModal = vue.defineComponent({
-  name: "DestylerPopoverContentModal",
-  props: destylerPopoverContentImplProps,
-  emits: destylerPopoverContentImplEmits,
-  setup(props, { emit }) {
-    const rootContext = injectPopoverRootContext();
-    const isRightClickOutsideRef = vue.ref(false);
-    const forwarded = composition.useForwardPropsEmits(props, emit);
-    const { customElement, currentElement } = composition.useCustomElement();
-    composition.useHideOthers(currentElement);
-    return {
-      rootContext,
-      forwarded,
-      isRightClickOutsideRef,
-      customElement
-    };
-  },
-  render() {
-    return vue.h(DestylerPopoverContentImpl, {
-      "ref": "customElement",
-      ...vue.mergeProps(this.forwarded),
-      "trapFocus": this.rootContext.open.value,
-      "disable-outside-pointer-events": "",
-      "onCloseAutoFocusPrevent": (event) => {
-        this.$emit("closeAutoFocus", event);
-        if (!this.isRightClickOutsideRef)
-          this.rootContext.triggerElement.value?.focus();
-      },
-      "onPointerDownOutside": (event) => {
-        this.$emit("pointerDownOutside", event);
-        const originalEvent = event.detail.originalEvent;
-        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-        this.isRightClickOutsideRef = isRightClick;
-      }
-    }, this.$slots.default?.());
-  }
-});
-
-const DestylerPopoverContentNonModal = vue.defineComponent({
-  name: "DestylerPopoverContentNonModal",
-  props: destylerPopoverContentImplProps,
-  emits: destylerPopoverContentImplEmits,
-  setup(props, { emit }) {
-    const rootContext = injectPopoverRootContext();
-    const hasInteractedOutsideRef = vue.ref(false);
-    const hasPointerDownOutsideRef = vue.ref(false);
-    const forwarded = composition.useForwardPropsEmits(props, emit);
-    return {
-      forwarded,
-      rootContext,
-      hasInteractedOutsideRef,
-      hasPointerDownOutsideRef
-    };
-  },
-  render() {
-    return vue.h(DestylerPopoverContentImpl, {
-      ...vue.mergeProps(this.forwarded),
-      trapFocus: false,
-      disableOutsidePointerEvents: false,
-      onCloseAutoFocus: (event) => {
-        this.$emit("closeAutoFocus", event);
-        if (!event.defaultPrevented) {
-          if (!this.hasInteractedOutsideRef)
-            this.rootContext.triggerElement.value?.focus();
-          event.preventDefault();
-        }
-        this.hasInteractedOutsideRef = false;
-        this.hasPointerDownOutsideRef = false;
-      },
-      onInteractOutside: async (event) => {
-        this.$emit("interactOutside", event);
-        if (!event.defaultPrevented) {
-          this.hasInteractedOutsideRef = true;
-          if (event.detail.originalEvent.type === "pointerdown")
-            this.hasPointerDownOutsideRef = true;
-        }
-        const target = event.target;
-        const targetIsTrigger = this.rootContext.triggerElement.value?.contains(target);
-        if (targetIsTrigger)
-          event.preventDefault();
-        if (event.detail.originalEvent.type === "focusin" && this.hasPointerDownOutsideRef)
-          event.preventDefault();
-      }
-    }, this.$slots.default?.());
-  }
-});
-
-const destylerPopoverContentProps = {
-  ...destylerPopoverContentImplProps,
-  forceMount: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const destylerPopoverContentEmits = [...destylerPopoverContentImplEmits];
-const DestylerPopoverContent = vue.defineComponent({
-  name: "DestylerPopoverContent",
-  props: destylerPopoverContentProps,
-  emits: destylerPopoverContentEmits,
-  setup(props, { emit }) {
-    const rootContext = injectPopoverRootContext();
-    const forwarded = composition.useForwardPropsEmits(props, emit);
-    return {
-      rootContext,
-      forwarded
-    };
-  },
-  render() {
-    const useVShow = this.rootContext.modal.value;
-    return vue.h(presence.DestylerPresence, {
-      present: this.forceMount || this.rootContext.open.value
-    }, useVShow ? vue.h(DestylerPopoverContentModal, {
-      ...this.forwarded,
-      ...vue.mergeProps(this.$attrs)
-    }, this.$slots.default?.()) : vue.h(DestylerPopoverContentNonModal, {
-      ...this.forwarded,
-      ...vue.mergeProps(this.$attrs)
-    }, this.$slots.default?.()));
-  }
-});
-
-const destylerPopoverPortalProps = {
-  ...teleport.destylerTeleportProps
-};
-const DestylerPopoverPortal = vue.defineComponent({
-  name: "DestylerPopoverPortal",
-  props: destylerPopoverPortalProps,
-  render() {
-    return vue.h(teleport.DestylerTeleport, vue.mergeProps(this.$props), this.$slots.default?.());
-  }
-});
-
-const destylerPopoverTriggerProps = {
-  ...primitive.destylerPrimitiveProp,
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  }
-};
-const DestylerPopoverTrigger = vue.defineComponent({
-  name: "DestylerPopoverTrigger",
-  props: destylerPopoverTriggerProps,
-  setup() {
-    const rootContext = injectPopoverRootContext();
-    const { customElement, currentElement: triggerElement } = composition.useCustomElement();
-    vue.onMounted(() => {
-      rootContext.triggerElement.value = triggerElement.value;
-    });
-    return {
-      rootContext,
-      customElement
-    };
-  },
-  render() {
-    return vue.h(this.rootContext.hasCustomAnchor.value ? primitive.DestylerPrimitive : popper.DestylerPopperAnchor, {
-      asChild: true
-    }, vue.h(primitive.DestylerPrimitive, {
-      "ref": "customElement",
-      "type": this.$props.as === "button" ? "button" : void 0,
-      "as": this.$props.as,
-      "aria-haspopup": "dialog",
-      "asChild": this.$props.asChild,
-      "aria-expanded": this.rootContext.open.value,
-      "aria-controls": this.rootContext.contentId,
-      "data-state": this.rootContext.open.value ? "open" : "closed",
-      "onClick": () => {
-        this.rootContext.onOpenToggle();
-      }
-    }, this.$slots.default?.()));
-  }
-});
-
-const name = "@destyler/popover";
-
-const packageName = name;
-function DestylerPopoverResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (name2 === "DestylerPopover")
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-exports.DestylerPopoverAnchor = DestylerPopoverAnchor;
-exports.DestylerPopoverArrow = DestylerPopoverArrow;
-exports.DestylerPopoverClose = DestylerPopoverClose;
-exports.DestylerPopoverContent = DestylerPopoverContent;
-exports.DestylerPopoverContentImpl = DestylerPopoverContentImpl;
-exports.DestylerPopoverContentModal = DestylerPopoverContentModal;
-exports.DestylerPopoverContentNonModal = DestylerPopoverContentNonModal;
-exports.DestylerPopoverPortal = DestylerPopoverPortal;
-exports.DestylerPopoverResolver = DestylerPopoverResolver;
-exports.DestylerPopoverRoot = DestylerPopoverRoot;
-exports.DestylerPopoverTrigger = DestylerPopoverTrigger;
-exports.destylerPopoverAnchorProps = destylerPopoverAnchorProps;
-exports.destylerPopoverArrowProps = destylerPopoverArrowProps;
-exports.destylerPopoverCloseProps = destylerPopoverCloseProps;
-exports.destylerPopoverContentEmits = destylerPopoverContentEmits;
-exports.destylerPopoverContentImplEmits = destylerPopoverContentImplEmits;
-exports.destylerPopoverContentImplProps = destylerPopoverContentImplProps;
-exports.destylerPopoverContentProps = destylerPopoverContentProps;
-exports.destylerPopoverPortalProps = destylerPopoverPortalProps;
-exports.destylerPopoverRootProps = destylerPopoverRootProps;
-exports.destylerPopoverTriggerProps = destylerPopoverTriggerProps;
-exports.injectPopoverRootContext = injectPopoverRootContext;
-exports.providePopoverRootContext = providePopoverRootContext;
+const index = require('./shared/popover.f0fbccbe.cjs');
+require('vue');
+require('@destyler/popper');
+require('@destyler/primitive');
+require('@destyler/shared');
+require('@destyler/composition');
+require('@destyler/presence');
+require('@destyler/dismissable-layer');
+require('@destyler/focus-scope');
+require('@destyler/directives');
+require('@destyler/teleport');
+
+
+
+exports.DestylerPopoverArrow = index.DestylerPopoverArrow;
+exports.DestylerPopoverClose = index.DestylerPopoverClose;
+exports.DestylerPopoverContent = index.DestylerPopoverContent;
+exports.DestylerPopoverPortal = index.DestylerPopoverPortal;
+exports.DestylerPopoverRoot = index.DestylerPopoverRoot;
+exports.DestylerPopoverTrigger = index.DestylerPopoverTrigger;