@destyler/popover 0.0.3 → 0.0.5

package/dist/shared/{popover.0f6ec87d.cjs → popover.49550c9f.cjs}

@@ -7,62 +7,65 @@ const shared = require('@destyler/shared');
 const composition = require('@destyler/composition');
 const presence = require('@destyler/presence');
 const dismissableLayer = require('@destyler/dismissable-layer');
+const component = require('@destyler/dismissable-layer/component');
 const focusScope = require('@destyler/focus-scope');
 const directives = require('@destyler/directives');
 const teleport = require('@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 = {
+  ...popper.popperArrowProps
 };
-const DestylerPopoverArrow = vue.defineComponent({
+const PopoverArrow = vue.defineComponent({
   name: "DestylerPopoverArrow",
-  props: destylerPopoverArrowProps,
+  props: popoverArrowProps,
   render() {
-    return vue.h(popper.DestylerPopperArrow, vue.mergeProps(this.$props, {}), () => this.$slots.default?.());
+    return vue.h(popper.PopperArrow, vue.mergeProps(this.$props, {}), () => this.$slots.default?.());
   }
 });
 
 const [injectPopoverRootContext, providePopoverRootContext] = shared.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 = vue.defineComponent({
+const popoverRootEmits = {
+  /**
+   * Event handler called when the open state of the popover changes.
+   */
+  "update:open": (_value) => true
+};
+const PopoverRoot = vue.defineComponent({
   name: "DestylerPopoverRoot",
-  props: destylerPopoverRootProps,
-  emits: ["update:open"],
+  props: popoverRootProps,
+  emits: popoverRootEmits,
   setup(props, { emit }) {
     const modalRef = vue.toRef(props.modal);
     const openRef = composition.useVModel(props, "open", emit, {
@@ -95,25 +98,23 @@ const DestylerPopoverRoot = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(popper.DestylerPopperRoot, null, () => this.$slots.default?.());
+    return vue.h(popper.PopperRoot, null, () => this.$slots.default?.());
   }
 });
 
-const destylerPopoverCloseProps = {
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const popoverCloseProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "button"
   }
 };
-const DestylerPopoverClose = vue.defineComponent({
+const PopoverClose = vue.defineComponent({
   name: "DestylerPopoverClose",
-  props: destylerPopoverCloseProps,
+  props: popoverCloseProps,
   setup() {
     const rootContext = injectPopoverRootContext();
     return {
@@ -121,7 +122,7 @@ const DestylerPopoverClose = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, {
+    return vue.h(primitive.Primitive, {
       as: this.$props.as,
       asChild: this.$props.asChild,
       type: this.$props.as === "button" ? "button" : void 0,
@@ -132,97 +133,34 @@ const DestylerPopoverClose = vue.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 = {
+  ...popper.popperContentProps,
+  ...dismissableLayer.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
+    ...focusScope.focusScopeProps.trapped
   }
 };
-const destylerPopoverContentImplEmits = ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss", "openAutoFocus", "closeAutoFocus"];
-const DestylerPopoverContentImpl = vue.defineComponent({
+const popoverContentImplEmits = {
+  ...component.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 = vue.defineComponent({
   name: "DestylerPopoverContentImpl",
-  props: destylerPopoverContentImplProps,
-  emits: destylerPopoverContentImplEmits,
+  props: popoverContentImplProps,
+  emits: popoverContentImplEmits,
   setup(props) {
     const forwarded = composition.useForwardProps(props);
     const rootContext = injectPopoverRootContext();
@@ -233,7 +171,7 @@ const DestylerPopoverContentImpl = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(focusScope.DestylerFocusScope, {
+    return vue.h(focusScope.FocusScope, {
       asChild: true,
       loop: true,
       trapped: this.$props.trapFocus,
@@ -243,7 +181,7 @@ const DestylerPopoverContentImpl = vue.defineComponent({
       onUnmountAutoFocus: (event) => {
         this.$emit("closeAutoFocus", event);
       }
-    }, () => vue.h(dismissableLayer.DestylerDismissableLayer, {
+    }, () => vue.h(dismissableLayer.DismissableLayer, {
       asChild: true,
       disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
       onPointerDownOutside: (event) => {
@@ -261,15 +199,15 @@ const DestylerPopoverContentImpl = vue.defineComponent({
       onDismiss: () => {
         this.rootContext.onOpenChange(false);
       }
-    }, () => vue.withDirectives(vue.h(popper.DestylerPopperContent, vue.mergeProps(this.forwarded, {
+    }, () => vue.withDirectives(vue.h(popper.PopperContent, 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)"
+        "--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 }]
@@ -277,10 +215,10 @@ const DestylerPopoverContentImpl = vue.defineComponent({
   }
 });
 
-const DestylerPopoverContentModal = vue.defineComponent({
+const PopoverContentModal = vue.defineComponent({
   name: "DestylerPopoverContentModal",
-  props: destylerPopoverContentImplProps,
-  emits: destylerPopoverContentImplEmits,
+  props: popoverContentImplProps,
+  emits: popoverContentImplEmits,
   setup(props, { emit }) {
     const rootContext = injectPopoverRootContext();
     const isRightClickOutsideRef = vue.ref(false);
@@ -295,7 +233,7 @@ const DestylerPopoverContentModal = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(DestylerPopoverContentImpl, {
+    return vue.h(PopoverContentImpl, {
       ref: (el) => this.forwardRef(el),
       ...vue.mergeProps(this.forwarded),
       trapFocus: this.rootContext.open.value,
@@ -316,10 +254,10 @@ const DestylerPopoverContentModal = vue.defineComponent({
   }
 });
 
-const DestylerPopoverContentNonModal = vue.defineComponent({
+const PopoverContentNonModal = vue.defineComponent({
   name: "DestylerPopoverContentNonModal",
-  props: destylerPopoverContentImplProps,
-  emits: destylerPopoverContentImplEmits,
+  props: popoverContentImplProps,
+  emits: popoverContentImplEmits,
   setup(props, { emit }) {
     const rootContext = injectPopoverRootContext();
     const hasInteractedOutsideRef = vue.ref(false);
@@ -333,7 +271,7 @@ const DestylerPopoverContentNonModal = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(DestylerPopoverContentImpl, {
+    return vue.h(PopoverContentImpl, {
       ...this.forwarded,
       trapFocus: false,
       disableOutsidePointerEvents: false,
@@ -365,19 +303,27 @@ const DestylerPopoverContentNonModal = vue.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 = vue.defineComponent({
+const popoverContentEmits = {
+  ...popoverContentImplEmits
+};
+const PopoverContent = vue.defineComponent({
   name: "DestylerPopoverContent",
-  props: destylerPopoverContentProps,
-  emits: destylerPopoverContentEmits,
+  props: popoverContentProps,
+  emits: popoverContentEmits,
   setup(props, { emit }) {
     const rootContext = injectPopoverRootContext();
     const forwarded = composition.useForwardPropsEmits(props, emit);
@@ -388,56 +334,40 @@ const DestylerPopoverContent = vue.defineComponent({
   },
   render() {
     const useVShow = this.rootContext.modal.value;
-    return vue.h(presence.DestylerPresence, {
+    return vue.h(presence.Presence, {
       present: this.forceMount || this.rootContext.open.value
-    }, () => useVShow ? vue.h(DestylerPopoverContentModal, {
+    }, () => useVShow ? vue.h(PopoverContentModal, {
       ...this.forwarded
-    }, () => this.$slots.default?.()) : vue.h(DestylerPopoverContentNonModal, {
+    }, () => this.$slots.default?.()) : vue.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 = {
+  ...teleport.teleportPrimitiveProps
 };
-const DestylerPopoverPortal = vue.defineComponent({
+const PopoverPortal = vue.defineComponent({
   name: "DestylerPopoverPortal",
-  props: destylerPopoverPortalProps,
+  props: popoverPortalProps,
   render() {
-    return vue.h(teleport.DestylerTeleport, vue.mergeProps(this.$props), () => this.$slots.default?.());
+    return vue.h(teleport.TeleportPrimitive, vue.mergeProps(this.$props), () => this.$slots.default?.());
   }
 });
 
-const destylerPopoverTriggerProps = {
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const popoverTriggerProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "button"
   }
 };
-const DestylerPopoverTrigger = vue.defineComponent({
+const PopoverTrigger = vue.defineComponent({
   name: "DestylerPopoverTrigger",
-  props: destylerPopoverTriggerProps,
+  props: popoverTriggerProps,
   setup() {
     const rootContext = injectPopoverRootContext();
     const { forwardRef, currentElement: triggerElement } = composition.useForwardExpose();
@@ -450,9 +380,9 @@ const DestylerPopoverTrigger = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(this.rootContext.hasCustomAnchor.value ? primitive.DestylerPrimitive : popper.DestylerPopperAnchor, {
+    return vue.h(this.rootContext.hasCustomAnchor.value ? primitive.Primitive : popper.PopperAnchor, {
       asChild: true
-    }, () => vue.h(primitive.DestylerPrimitive, {
+    }, () => vue.h(primitive.Primitive, {
       "ref": (el) => this.forwardRef(el),
       "type": this.$props.as === "button" ? "button" : void 0,
       "as": this.$props.as,
@@ -468,13 +398,23 @@ const DestylerPopoverTrigger = vue.defineComponent({
   }
 });
 
-exports.DestylerPopoverArrow = DestylerPopoverArrow;
-exports.DestylerPopoverClose = DestylerPopoverClose;
-exports.DestylerPopoverContent = DestylerPopoverContent;
-exports.DestylerPopoverContentImpl = DestylerPopoverContentImpl;
-exports.DestylerPopoverContentModal = DestylerPopoverContentModal;
-exports.DestylerPopoverContentNonModal = DestylerPopoverContentNonModal;
-exports.DestylerPopoverPortal = DestylerPopoverPortal;
-exports.DestylerPopoverRoot = DestylerPopoverRoot;
-exports.DestylerPopoverTrigger = DestylerPopoverTrigger;
+exports.PopoverArrow = PopoverArrow;
+exports.PopoverClose = PopoverClose;
+exports.PopoverContent = PopoverContent;
+exports.PopoverContentImpl = PopoverContentImpl;
+exports.PopoverContentModal = PopoverContentModal;
+exports.PopoverContentNonModal = PopoverContentNonModal;
+exports.PopoverPortal = PopoverPortal;
+exports.PopoverRoot = PopoverRoot;
+exports.PopoverTrigger = PopoverTrigger;
 exports.injectPopoverRootContext = injectPopoverRootContext;
+exports.popoverArrowProps = popoverArrowProps;
+exports.popoverCloseProps = popoverCloseProps;
+exports.popoverContentEmits = popoverContentEmits;
+exports.popoverContentImplEmits = popoverContentImplEmits;
+exports.popoverContentImplProps = popoverContentImplProps;
+exports.popoverContentProps = popoverContentProps;
+exports.popoverPortalProps = popoverPortalProps;
+exports.popoverRootEmits = popoverRootEmits;
+exports.popoverRootProps = popoverRootProps;
+exports.popoverTriggerProps = popoverTriggerProps;

package/package.json

@@ -1,25 +1,22 @@
 {
   "name": "@destyler/popover",
   "type": "module",
-  "version": "0.0.3",
-  "description": "unstyled popover component for vue",
+  "version": "0.0.5",
+  "description": "displays rich content in a portal, triggered by a button.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     },
     "./resolver": {
-      "types": "./dist/resolver.d.ts",
-      "import": "./dist/resolver.mjs",
-      "require": "./dist/resolver.cjs"
+      "types": "./dist/resolver.d.mts",
+      "default": "./dist/resolver.mjs"
     },
     "./component": {
-      "types": "./dist/component.d.ts",
-      "import": "./dist/component.mjs",
-      "require": "./dist/component.cjs"
+      "types": "./dist/component.d.mts",
+      "default": "./dist/component.mjs"
     },
     "./*": "./*"
   },
@@ -31,21 +28,22 @@
     "dist"
   ],
   "peerDependencies": {
-    "vue": ">=3.3.4"
+    "vue": ">=3.4.21"
   },
   "dependencies": {
-    "@destyler/composition": "0.0.3",
-    "@destyler/directives": "0.0.3",
-    "@destyler/dismissable-layer": "0.0.3",
-    "@destyler/focus-scope": "0.0.3",
-    "@destyler/teleport": "0.0.3",
-    "@destyler/popper": "0.0.3",
-    "@destyler/presence": "0.0.3",
-    "@destyler/shared": "0.0.3",
-    "@destyler/primitive": "0.0.3"
+    "@destyler/directives": "0.0.5",
+    "@destyler/focus-scope": "0.0.5",
+    "@destyler/composition": "0.0.5",
+    "@destyler/dismissable-layer": "0.0.5",
+    "@destyler/shared": "0.0.5",
+    "@destyler/primitive": "0.0.5",
+    "@destyler/teleport": "0.0.5",
+    "@destyler/presence": "0.0.5",
+    "@destyler/popper": "0.0.5"
   },
   "scripts": {
     "clear": "rimraf ./dist",
-    "build": "pnpm run clear && unbuild"
+    "build": "pnpm run clear && unbuild",
+    "stub": "unbuild --stub"
   }
 }