@destyler/hover-card 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,7 @@
+# @destyler/hover-card
+
+[![NPM version](https://img.shields.io/npm/v/@destyler/hover-card?color=a1b858&label=)](https://www.npmjs.com/package/@destyler/hover-card)
+
+> for sighted users to preview content available behind a link.
+
+[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)

package/dist/component.cjs

@@ -1,46 +1,53 @@
 'use strict';
 
 const vue = require('vue');
+const primitive = require('@destyler/primitive');
 const composition = require('@destyler/composition');
 const popper = require('@destyler/popper');
 const presence = require('@destyler/presence');
 const dismissableLayer = require('@destyler/dismissable-layer');
+const component = require('@destyler/dismissable-layer/component');
 const shared = require('@destyler/shared');
 const teleport = require('@destyler/teleport');
-const primitive = require('@destyler/primitive');
 
-const destylerHoverCardArrowProps = {
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
+const hoverCardArrowProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default svg
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "svg"
   },
+  /**
+   * The width of the arrow in pixels.
+   *
+   * @default 10
+   */
   width: {
     type: Number,
     required: false,
     default: 10
   },
+  /**
+   * The height of the arrow in pixels.
+   *
+   * @default 5
+   */
   height: {
     type: Number,
     required: false,
     default: 5
-  },
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "svg"
   }
 };
-const DestylerHoverCardArrow = vue.defineComponent({
+const HoverCardArrow = vue.defineComponent({
   name: "DestylerHoverCardArrow",
-  props: destylerHoverCardArrowProps,
+  props: hoverCardArrowProps,
   setup() {
     composition.useForwardExpose();
   },
   render() {
-    return vue.h(popper.DestylerPopperArrow, this.$props, {
-      default: () => this.$slots.default?.()
-    });
+    return vue.h(popper.PopperArrow, this.$props, () => this.$slots.default?.());
   }
 });
 
@@ -59,32 +66,63 @@ function getTabbableNodes(container) {
   return nodes;
 }
 
-const destylerHoverCardRootProps = {
+const hoverCardRootProps = {
+  /**
+   * The controlled open state of the hover card.
+   * Can be binded as `v-model:open`.
+   *
+   * @default undefined
+   */
   open: {
     type: Boolean,
-    required: void 0
+    required: false,
+    default: void 0
   },
+  /**
+   * The open state of the hover card 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 duration from when the mouse enters the
+   * trigger until the hover card opens.
+   *
+   * @default 700
+   */
   openDelay: {
     type: Number,
     required: false,
     default: 700
   },
+  /**
+   * The duration from when the mouse leaves the trigger
+   * or content until the hover card closes.
+   *
+   * @default 300
+   */
   closeDelay: {
     type: Number,
     required: false,
     default: 300
   }
 };
+const hoverCardRootEmits = {
+  /**
+   * Event handler called when the open state of the hover card changes.
+   */
+  "update:open": (_value) => true
+};
 const [injectHoverCardRootContext, provideHoverCardRootContext] = shared.createContext("DestylerHoverCardRoot");
-const DestylerHoverCardRoot = vue.defineComponent({
+const HoverCardRoot = vue.defineComponent({
   name: "DestylerHoverCardRoot",
-  props: destylerHoverCardRootProps,
-  emits: ["update:open"],
+  props: hoverCardRootProps,
+  emits: hoverCardRootEmits,
   setup(props, { emit }) {
     const { openDelay, closeDelay } = vue.toRefs(props);
     composition.useForwardExpose();
@@ -121,92 +159,20 @@ const DestylerHoverCardRoot = vue.defineComponent({
     });
   },
   render() {
-    return vue.h(popper.DestylerPopperRoot, {}, {
-      default: () => this.$slots.default?.()
-    });
+    return vue.h(popper.PopperRoot, {}, () => this.$slots.default?.());
   }
 });
 
-const destylerHoverCardContentImplProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  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
-  }
+const hoverCardContentImplProps = {
+  ...popper.popperContentProps
+};
+const hoverCardContentImplEmits = {
+  ...component.dismissableLayerEmits
 };
-const DestylerHoverCardContentImpl = vue.defineComponent({
+const HoverCardContentImpl = vue.defineComponent({
   name: "DestylerHoverCardContentImpl",
-  props: destylerHoverCardContentImplProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: hoverCardContentImplProps,
+  emits: hoverCardContentImplEmits,
   setup(props) {
     const forwarded = composition.useForwardProps(props);
     const { forwardRef, currentElement: contentElement } = composition.useForwardExpose();
@@ -238,7 +204,7 @@ const DestylerHoverCardContentImpl = vue.defineComponent({
       if (contentElement.value) {
         document.addEventListener("pointerup", handlePointerUp);
         const tabbables = getTabbableNodes(contentElement.value);
-        tabbables.forEach((tabbable) => tabbable.setAttribute("tabindex", "_1"));
+        tabbables.forEach((tabbable) => tabbable.setAttribute("tabindex", "-1"));
       }
     });
     vue.onUnmounted(() => {
@@ -254,7 +220,7 @@ const DestylerHoverCardContentImpl = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(dismissableLayer.DestylerDismissableLayer, {
+    return vue.h(dismissableLayer.DismissableLayer, {
       asChild: true,
       disableOutsidePointerEvents: false,
       onEscapeKeyDown: (event) => {
@@ -269,45 +235,46 @@ const DestylerHoverCardContentImpl = vue.defineComponent({
       onDismiss: () => {
         this.rootContext.onDismiss();
       }
-    }, {
-      default: () => {
-        return vue.h(popper.DestylerPopperContent, vue.mergeProps(this.forwarded, this.$attrs, {
-          ref: (el) => this.forwardRef(el),
-          data_state: this.rootContext.open.value ? "open" : "closed",
-          style: {
-            "userSelect": this.containSelection ? "text" : void 0,
-            "WebkitUserSelect": this.containSelection ? "text" : void 0,
-            "--destyler_hover_card_content_transform_origin": "var(--destyler_popper_transform_origin)",
-            "--destyler_hover_card_content_available_width": "var(--destyler_popper_available_width)",
-            "--destyler_hover_card_content_available_height": "var(--destyler_popper_available_height)",
-            "--destyler_hover_card_trigger_width": "var(--destyler_popper_anchor_width)",
-            "--destyler_hover_card_trigger_height": "var(--destyler_popper_anchor_height)"
-          },
-          onPointerdown: (event) => {
-            if (event.currentTarget.contains(event.target))
-              this.containSelection = true;
-            this.rootContext.hasSelectionRef.value = false;
-            this.rootContext.isPointerDownOnContentRef.value = true;
-          }
-        }), {
-          default: () => this.$slots.default?.()
-        });
+    }, () => vue.h(popper.PopperContent, vue.mergeProps(this.forwarded, this.$attrs, {
+      "ref": (el) => this.forwardRef(el),
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "style": {
+        "userSelect": this.containSelection ? "text" : void 0,
+        "WebkitUserSelect": this.containSelection ? "text" : void 0,
+        "--destyler-hover-card-content-transform-origin": "var(--destyler-popper-transform-origin)",
+        "--destyler-hover-card-content-available-width": "var(--destyler-popper-available-width)",
+        "--destyler-hover-card-content-available-height": "var(--destyler-popper-available-height)",
+        "--destyler-hover-card-trigger-width": "var(--destyler-popper-anchor-width)",
+        "--destyler-hover-card-trigger-height": "var(--destyler-popper-anchor-height)"
+      },
+      "onPointerdown": (event) => {
+        if (event.currentTarget.contains(event.target))
+          this.containSelection = true;
+        this.rootContext.hasSelectionRef.value = false;
+        this.rootContext.isPointerDownOnContentRef.value = true;
       }
-    });
+    }), () => this.$slots.default?.()));
   }
 });
 
-const destylerHoverCardContentProps = {
-  ...destylerHoverCardContentImplProps,
+const hoverCardContentProps = {
+  ...hoverCardContentImplProps,
+  /**
+   * Used to force mounting when more control is needed.
+   * Useful when controlling animation with Vue animation libraries.
+   */
   forceMount: {
     type: Boolean,
     required: false
   }
 };
-const DestylerHoverCardContent = vue.defineComponent({
+const hoverCardContentEmits = {
+  ...hoverCardContentImplEmits
+};
+const HoverCardContent = vue.defineComponent({
   name: "DestylerHoverCardContent",
-  props: destylerHoverCardContentProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: hoverCardContentProps,
+  emits: hoverCardContentEmits,
   setup(props, { emit }) {
     const forwarded = composition.useForwardPropsEmits(props, emit);
     const { forwardRef } = composition.useForwardExpose();
@@ -319,68 +286,44 @@ const DestylerHoverCardContent = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(presence.DestylerPresence, {
+    return vue.h(presence.Presence, {
       present: this.forceMount || this.rootContext.open.value
-    }, {
-      default: () => {
-        return vue.h(DestylerHoverCardContentImpl, vue.mergeProps(this.forwarded, {
-          ref: (el) => this.forwardRef(el),
-          onPointerenter: (event) => {
-            excludeTouch(this.rootContext.onOpen)(event);
-          },
-          onPointerleave: (event) => {
-            excludeTouch(this.rootContext.onClose)(event);
-          }
-        }), {
-          default: () => this.$slots.default?.()
-        });
+    }, () => vue.h(HoverCardContentImpl, vue.mergeProps(this.forwarded, {
+      ref: (el) => this.forwardRef(el),
+      onPointerenter: (event) => {
+        excludeTouch(this.rootContext.onOpen)(event);
+      },
+      onPointerleave: (event) => {
+        excludeTouch(this.rootContext.onClose)(event);
       }
-    });
+    }), () => this.$slots.default?.()));
   }
 });
 
-const destylerHoverCardPortalProps = {
-  to: {
-    type: [String, Object],
-    required: false,
-    default: "body"
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  forceMount: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const hoverCardPortalProps = {
+  ...teleport.teleportPrimitiveProps
 };
-const DestylerHoverCardPortal = vue.defineComponent({
+const HoverCardPortal = vue.defineComponent({
   name: "DestylerHoverCardPortal",
-  props: destylerHoverCardPortalProps,
+  props: hoverCardPortalProps,
   render() {
-    return vue.h(teleport.DestylerTeleport, this.$props, {
-      default: () => this.$slots.default?.()
-    });
+    return vue.h(teleport.TeleportPrimitive, this.$props, () => this.$slots.default?.());
   }
 });
 
-const destylerHoverCardTriggerProps = {
+const hoverCardTriggerProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default a
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "a"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 };
-const DestylerHoverCardTrigger = vue.defineComponent({
+const HoverCardTrigger = vue.defineComponent({
   name: "DestylerHoverCardTrigger",
-  props: destylerHoverCardTriggerProps,
+  props: hoverCardTriggerProps,
   setup() {
     const { forwardRef } = composition.useForwardExpose();
     const rootContext = injectHoverCardRootContext();
@@ -390,38 +333,41 @@ const DestylerHoverCardTrigger = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(popper.DestylerPopperAnchor, {
+    return vue.h(popper.PopperAnchor, {
       asChild: true
-    }, {
-      default: () => {
-        return vue.h(primitive.DestylerPrimitive, {
-          "ref": (el) => this.forwardRef(el),
-          "as": this.$props.as,
-          "asChild": this.$props.asChild,
-          "data-state": this.rootContext.open.value ? "open" : "closed",
-          "onPointerenter": (event) => {
-            excludeTouch(this.rootContext.onOpen)(event);
-          },
-          "onPointerleave": (event) => {
-            excludeTouch(this.rootContext.onClose)(event);
-          },
-          "onFocus": () => {
-            this.rootContext.onOpen();
-          },
-          "onBlur": () => {
-            this.rootContext.onClose();
-          }
-        }, {
-          default: () => this.$slots.default?.()
-        });
+    }, () => vue.h(primitive.Primitive, {
+      "ref": (el) => this.forwardRef(el),
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "onPointerenter": (event) => {
+        excludeTouch(this.rootContext.onOpen)(event);
+      },
+      "onPointerleave": (event) => {
+        excludeTouch(this.rootContext.onClose)(event);
+      },
+      "onFocus": () => {
+        this.rootContext.onOpen();
+      },
+      "onBlur": () => {
+        this.rootContext.onClose();
       }
-    });
+    }, () => this.$slots.default?.()));
   }
 });
 
-exports.DestylerHoverCardArrow = DestylerHoverCardArrow;
-exports.DestylerHoverCardContent = DestylerHoverCardContent;
-exports.DestylerHoverCardContentImpl = DestylerHoverCardContentImpl;
-exports.DestylerHoverCardPortal = DestylerHoverCardPortal;
-exports.DestylerHoverCardRoot = DestylerHoverCardRoot;
-exports.DestylerHoverCardTrigger = DestylerHoverCardTrigger;
+exports.HoverCardArrow = HoverCardArrow;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardContentImpl = HoverCardContentImpl;
+exports.HoverCardPortal = HoverCardPortal;
+exports.HoverCardRoot = HoverCardRoot;
+exports.HoverCardTrigger = HoverCardTrigger;
+exports.hoverCardArrowProps = hoverCardArrowProps;
+exports.hoverCardContentEmits = hoverCardContentEmits;
+exports.hoverCardContentImplEmits = hoverCardContentImplEmits;
+exports.hoverCardContentImplProps = hoverCardContentImplProps;
+exports.hoverCardContentProps = hoverCardContentProps;
+exports.hoverCardPortalProps = hoverCardPortalProps;
+exports.hoverCardRootEmits = hoverCardRootEmits;
+exports.hoverCardRootProps = hoverCardRootProps;
+exports.hoverCardTriggerProps = hoverCardTriggerProps;