@destyler/popover 0.0.3 → 0.0.5

package/dist/shared/{popover.87a37156.mjs → popover.005a231a.mjs}

@@ -1,66 +1,69 @@
 import { defineComponent, h, mergeProps, toRef, ref, withDirectives, onMounted } from 'vue';
-import { DestylerPopperArrow, DestylerPopperRoot, DestylerPopperContent, DestylerPopperAnchor } from '@destyler/popper';
-import { DestylerPrimitive } from '@destyler/primitive';
+import { popperArrowProps, PopperArrow, PopperRoot, popperContentProps, PopperContent, PopperAnchor } from '@destyler/popper';
+import { primitiveProps, Primitive } from '@destyler/primitive';
 import { createContext } from '@destyler/shared';
 import { useVModel, useId, useForwardProps, useFocusGuards, useForwardPropsEmits, useForwardExpose, useHideOthers } from '@destyler/composition';
-import { DestylerPresence } from '@destyler/presence';
-import { DestylerDismissableLayer } from '@destyler/dismissable-layer';
-import { DestylerFocusScope } from '@destyler/focus-scope';
+import { Presence } from '@destyler/presence';
+import { dismissableLayerProps, DismissableLayer } from '@destyler/dismissable-layer';
+import { dismissableLayerEmits } from '@destyler/dismissable-layer/component';
+import { focusScopeProps, FocusScope } from '@destyler/focus-scope';
 import { BindOnceDirective } from '@destyler/directives';
-import { DestylerTeleport } from '@destyler/teleport';
+import { teleportPrimitiveProps, TeleportPrimitive } from '@destyler/teleport';
 
-const destylerPopoverArrowProps = {
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  width: {
-    type: Number,
-    required: false,
-    default: 5
-  },
-  height: {
-    type: Number,
-    required: false,
-    default: 10
-  },
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "svg"
-  }
+const popoverArrowProps = {
+  ...popperArrowProps
 };
-const DestylerPopoverArrow = defineComponent({
+const PopoverArrow = defineComponent({
   name: "DestylerPopoverArrow",
-  props: destylerPopoverArrowProps,
+  props: popoverArrowProps,
   render() {
-    return h(DestylerPopperArrow, mergeProps(this.$props, {}), () => this.$slots.default?.());
+    return h(PopperArrow, mergeProps(this.$props, {}), () => this.$slots.default?.());
   }
 });
 
 const [injectPopoverRootContext, providePopoverRootContext] = createContext("DestylerPopoverRoot");
-const destylerPopoverRootProps = {
+const popoverRootProps = {
+  /**
+   * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
+   *
+   * @default false
+   */
   defaultOpen: {
     type: Boolean,
     required: false,
     default: false
   },
+  /**
+   * The controlled open state of the popover.
+   *
+   * @default undefined
+   */
   open: {
     type: Boolean,
     required: false,
     default: void 0
   },
+  /**
+   * The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
+   *
+   * @default false
+   */
   modal: {
     type: Boolean,
     required: false,
     default: false
   }
 };
-const DestylerPopoverRoot = defineComponent({
+const popoverRootEmits = {
+  /**
+   * Event handler called when the open state of the popover changes.
+   */
+  "update:open": (_value) => true
+};
+const PopoverRoot = defineComponent({
   name: "DestylerPopoverRoot",
-  props: destylerPopoverRootProps,
-  emits: ["update:open"],
+  props: popoverRootProps,
+  emits: popoverRootEmits,
   setup(props, { emit }) {
     const modalRef = toRef(props.modal);
     const openRef = useVModel(props, "open", emit, {
@@ -93,25 +96,23 @@ const DestylerPopoverRoot = defineComponent({
     };
   },
   render() {
-    return h(DestylerPopperRoot, null, () => this.$slots.default?.());
+    return h(PopperRoot, null, () => this.$slots.default?.());
   }
 });
 
-const destylerPopoverCloseProps = {
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const popoverCloseProps = {
+  ...primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitiveProps.as,
     default: "button"
   }
 };
-const DestylerPopoverClose = defineComponent({
+const PopoverClose = defineComponent({
   name: "DestylerPopoverClose",
-  props: destylerPopoverCloseProps,
+  props: popoverCloseProps,
   setup() {
     const rootContext = injectPopoverRootContext();
     return {
@@ -119,7 +120,7 @@ const DestylerPopoverClose = defineComponent({
     };
   },
   render() {
-    return h(DestylerPrimitive, {
+    return h(Primitive, {
       as: this.$props.as,
       asChild: this.$props.asChild,
       type: this.$props.as === "button" ? "button" : void 0,
@@ -130,97 +131,34 @@ const DestylerPopoverClose = defineComponent({
   }
 });
 
-const destylerPopoverContentImplProps = {
-  side: {
-    type: String,
-    required: false,
-    default: "bottom"
-  },
-  sideOffset: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  align: {
-    type: String,
-    required: false,
-    default: "center"
-  },
-  alignOffset: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  avoidCollisions: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  collisionBoundary: {
-    type: [Object, Array, null],
-    required: false,
-    default: () => []
-  },
-  collisionPadding: {
-    type: [Number, Object],
-    required: false,
-    default: 0
-  },
-  arrowPadding: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  sticky: {
-    type: String,
-    required: false,
-    default: "partial"
-  },
-  hideWhenDetached: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  updatePositionStrategy: {
-    type: String,
-    required: false,
-    default: "optimized"
-  },
-  onPlaced: {
-    type: Function,
-    required: false
-  },
-  prioritizePosition: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  disableOutsidePointerEvents: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const popoverContentImplProps = {
+  ...popperContentProps,
+  ...dismissableLayerProps,
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with Vue animation libraries.
+   */
   trapFocus: {
-    type: Boolean,
-    required: false,
-    default: false
+    ...focusScopeProps.trapped
   }
 };
-const destylerPopoverContentImplEmits = ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss", "openAutoFocus", "closeAutoFocus"];
-const DestylerPopoverContentImpl = defineComponent({
+const popoverContentImplEmits = {
+  ...dismissableLayerEmits,
+  /**
+   * Event handler called when auto-focusing on open.
+   * Can be prevented.
+   */
+  openAutoFocus: (_event) => true,
+  /**
+   * Event handler called when auto-focusing on close.
+   * Can be prevented.
+   */
+  closeAutoFocus: (_event) => true
+};
+const PopoverContentImpl = defineComponent({
   name: "DestylerPopoverContentImpl",
-  props: destylerPopoverContentImplProps,
-  emits: destylerPopoverContentImplEmits,
+  props: popoverContentImplProps,
+  emits: popoverContentImplEmits,
   setup(props) {
     const forwarded = useForwardProps(props);
     const rootContext = injectPopoverRootContext();
@@ -231,7 +169,7 @@ const DestylerPopoverContentImpl = defineComponent({
     };
   },
   render() {
-    return h(DestylerFocusScope, {
+    return h(FocusScope, {
       asChild: true,
       loop: true,
       trapped: this.$props.trapFocus,
@@ -241,7 +179,7 @@ const DestylerPopoverContentImpl = defineComponent({
       onUnmountAutoFocus: (event) => {
         this.$emit("closeAutoFocus", event);
       }
-    }, () => h(DestylerDismissableLayer, {
+    }, () => h(DismissableLayer, {
       asChild: true,
       disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
       onPointerDownOutside: (event) => {
@@ -259,15 +197,15 @@ const DestylerPopoverContentImpl = defineComponent({
       onDismiss: () => {
         this.rootContext.onOpenChange(false);
       }
-    }, () => withDirectives(h(DestylerPopperContent, mergeProps(this.forwarded, {
+    }, () => withDirectives(h(PopperContent, 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)"
+        "--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?.()), [
       [BindOnceDirective, { id: this.rootContext.contentId }]
@@ -275,10 +213,10 @@ const DestylerPopoverContentImpl = defineComponent({
   }
 });
 
-const DestylerPopoverContentModal = defineComponent({
+const PopoverContentModal = defineComponent({
   name: "DestylerPopoverContentModal",
-  props: destylerPopoverContentImplProps,
-  emits: destylerPopoverContentImplEmits,
+  props: popoverContentImplProps,
+  emits: popoverContentImplEmits,
   setup(props, { emit }) {
     const rootContext = injectPopoverRootContext();
     const isRightClickOutsideRef = ref(false);
@@ -293,7 +231,7 @@ const DestylerPopoverContentModal = defineComponent({
     };
   },
   render() {
-    return h(DestylerPopoverContentImpl, {
+    return h(PopoverContentImpl, {
       ref: (el) => this.forwardRef(el),
       ...mergeProps(this.forwarded),
       trapFocus: this.rootContext.open.value,
@@ -314,10 +252,10 @@ const DestylerPopoverContentModal = defineComponent({
   }
 });
 
-const DestylerPopoverContentNonModal = defineComponent({
+const PopoverContentNonModal = defineComponent({
   name: "DestylerPopoverContentNonModal",
-  props: destylerPopoverContentImplProps,
-  emits: destylerPopoverContentImplEmits,
+  props: popoverContentImplProps,
+  emits: popoverContentImplEmits,
   setup(props, { emit }) {
     const rootContext = injectPopoverRootContext();
     const hasInteractedOutsideRef = ref(false);
@@ -331,7 +269,7 @@ const DestylerPopoverContentNonModal = defineComponent({
     };
   },
   render() {
-    return h(DestylerPopoverContentImpl, {
+    return h(PopoverContentImpl, {
       ...this.forwarded,
       trapFocus: false,
       disableOutsidePointerEvents: false,
@@ -363,19 +301,27 @@ const DestylerPopoverContentNonModal = defineComponent({
   }
 });
 
-const destylerPopoverContentProps = {
-  ...destylerPopoverContentImplProps,
+const popoverContentProps = {
+  ...popoverContentImplProps,
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with Vue animation libraries.
+   *
+   * @default false
+   */
   forceMount: {
     type: Boolean,
     required: false,
     default: false
   }
 };
-const destylerPopoverContentEmits = [...destylerPopoverContentImplEmits];
-const DestylerPopoverContent = defineComponent({
+const popoverContentEmits = {
+  ...popoverContentImplEmits
+};
+const PopoverContent = defineComponent({
   name: "DestylerPopoverContent",
-  props: destylerPopoverContentProps,
-  emits: destylerPopoverContentEmits,
+  props: popoverContentProps,
+  emits: popoverContentEmits,
   setup(props, { emit }) {
     const rootContext = injectPopoverRootContext();
     const forwarded = useForwardPropsEmits(props, emit);
@@ -386,56 +332,40 @@ const DestylerPopoverContent = defineComponent({
   },
   render() {
     const useVShow = this.rootContext.modal.value;
-    return h(DestylerPresence, {
+    return h(Presence, {
       present: this.forceMount || this.rootContext.open.value
-    }, () => useVShow ? h(DestylerPopoverContentModal, {
+    }, () => useVShow ? h(PopoverContentModal, {
       ...this.forwarded
-    }, () => this.$slots.default?.()) : h(DestylerPopoverContentNonModal, {
+    }, () => this.$slots.default?.()) : h(PopoverContentNonModal, {
       ...this.forwarded
     }, () => this.$slots.default?.()));
   }
 });
 
-const destylerPopoverPortalProps = {
-  to: {
-    type: [String, Object],
-    required: false,
-    default: "body"
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  forceMount: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const popoverPortalProps = {
+  ...teleportPrimitiveProps
 };
-const DestylerPopoverPortal = defineComponent({
+const PopoverPortal = defineComponent({
   name: "DestylerPopoverPortal",
-  props: destylerPopoverPortalProps,
+  props: popoverPortalProps,
   render() {
-    return h(DestylerTeleport, mergeProps(this.$props), () => this.$slots.default?.());
+    return h(TeleportPrimitive, mergeProps(this.$props), () => this.$slots.default?.());
   }
 });
 
-const destylerPopoverTriggerProps = {
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const popoverTriggerProps = {
+  ...primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitiveProps.as,
     default: "button"
   }
 };
-const DestylerPopoverTrigger = defineComponent({
+const PopoverTrigger = defineComponent({
   name: "DestylerPopoverTrigger",
-  props: destylerPopoverTriggerProps,
+  props: popoverTriggerProps,
   setup() {
     const rootContext = injectPopoverRootContext();
     const { forwardRef, currentElement: triggerElement } = useForwardExpose();
@@ -448,9 +378,9 @@ const DestylerPopoverTrigger = defineComponent({
     };
   },
   render() {
-    return h(this.rootContext.hasCustomAnchor.value ? DestylerPrimitive : DestylerPopperAnchor, {
+    return h(this.rootContext.hasCustomAnchor.value ? Primitive : PopperAnchor, {
       asChild: true
-    }, () => h(DestylerPrimitive, {
+    }, () => h(Primitive, {
       "ref": (el) => this.forwardRef(el),
       "type": this.$props.as === "button" ? "button" : void 0,
       "as": this.$props.as,
@@ -466,4 +396,4 @@ const DestylerPopoverTrigger = defineComponent({
   }
 });
 
-export { DestylerPopoverArrow as D, DestylerPopoverClose as a, DestylerPopoverContent as b, DestylerPopoverContentImpl as c, DestylerPopoverContentModal as d, DestylerPopoverContentNonModal as e, DestylerPopoverPortal as f, DestylerPopoverRoot as g, DestylerPopoverTrigger as h, injectPopoverRootContext as i };
+export { PopoverArrow as P, PopoverClose as a, popoverCloseProps as b, PopoverContent as c, popoverContentProps as d, popoverContentEmits as e, PopoverContentImpl as f, popoverContentImplProps as g, popoverContentImplEmits as h, injectPopoverRootContext as i, PopoverContentModal as j, PopoverContentNonModal as k, PopoverPortal as l, popoverPortalProps as m, PopoverRoot as n, popoverRootProps as o, popoverArrowProps as p, popoverRootEmits as q, PopoverTrigger as r, popoverTriggerProps as s };