@destyler/hover-card 0.0.2 → 0.0.4

package/dist/component.mjs

@@ -1,44 +1,51 @@
 import { defineComponent, h, toRefs, ref, watchEffect, onMounted, onUnmounted, withModifiers, mergeProps, nextTick } from 'vue';
+import { primitiveProps, Primitive } from '@destyler/primitive';
 import { useForwardExpose, useVModel, useForwardProps, useForwardPropsEmits } from '@destyler/composition';
-import { DestylerPopperArrow, DestylerPopperRoot, DestylerPopperContent, DestylerPopperAnchor } from '@destyler/popper';
-import { DestylerPresence } from '@destyler/presence';
-import { DestylerDismissableLayer } from '@destyler/dismissable-layer';
+import { PopperArrow, PopperRoot, popperContentProps, PopperContent, PopperAnchor } from '@destyler/popper';
+import { Presence } from '@destyler/presence';
+import { DismissableLayer } from '@destyler/dismissable-layer';
+import { dismissableLayerEmits } from '@destyler/dismissable-layer/component';
 import { createContext } from '@destyler/shared';
-import { DestylerTeleport } from '@destyler/teleport';
-import { DestylerPrimitive } from '@destyler/primitive';
+import { teleportPrimitiveProps, TeleportPrimitive } from '@destyler/teleport';
 
-const destylerHoverCardArrowProps = {
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
+const hoverCardArrowProps = {
+  ...primitiveProps,
+  /**
+   * @default svg
+   */
+  as: {
+    ...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 = defineComponent({
+const HoverCardArrow = defineComponent({
   name: "DestylerHoverCardArrow",
-  props: destylerHoverCardArrowProps,
+  props: hoverCardArrowProps,
   setup() {
     useForwardExpose();
   },
   render() {
-    return h(DestylerPopperArrow, this.$props, {
-      default: () => this.$slots.default?.()
-    });
+    return h(PopperArrow, this.$props, () => this.$slots.default?.());
   }
 });
 
@@ -57,32 +64,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] = createContext("DestylerHoverCardRoot");
-const DestylerHoverCardRoot = defineComponent({
+const HoverCardRoot = defineComponent({
   name: "DestylerHoverCardRoot",
-  props: destylerHoverCardRootProps,
-  emits: ["update:open"],
+  props: hoverCardRootProps,
+  emits: hoverCardRootEmits,
   setup(props, { emit }) {
     const { openDelay, closeDelay } = toRefs(props);
     useForwardExpose();
@@ -119,92 +157,20 @@ const DestylerHoverCardRoot = defineComponent({
     });
   },
   render() {
-    return h(DestylerPopperRoot, {}, {
-      default: () => this.$slots.default?.()
-    });
+    return h(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 = {
+  ...popperContentProps
+};
+const hoverCardContentImplEmits = {
+  ...dismissableLayerEmits
 };
-const DestylerHoverCardContentImpl = defineComponent({
+const HoverCardContentImpl = defineComponent({
   name: "DestylerHoverCardContentImpl",
-  props: destylerHoverCardContentImplProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: hoverCardContentImplProps,
+  emits: hoverCardContentImplEmits,
   setup(props) {
     const forwarded = useForwardProps(props);
     const { forwardRef, currentElement: contentElement } = useForwardExpose();
@@ -236,7 +202,7 @@ const DestylerHoverCardContentImpl = 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"));
       }
     });
     onUnmounted(() => {
@@ -252,7 +218,7 @@ const DestylerHoverCardContentImpl = defineComponent({
     };
   },
   render() {
-    return h(DestylerDismissableLayer, {
+    return h(DismissableLayer, {
       asChild: true,
       disableOutsidePointerEvents: false,
       onEscapeKeyDown: (event) => {
@@ -267,45 +233,46 @@ const DestylerHoverCardContentImpl = defineComponent({
       onDismiss: () => {
         this.rootContext.onDismiss();
       }
-    }, {
-      default: () => {
-        return h(DestylerPopperContent, 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?.()
-        });
+    }, () => h(PopperContent, 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 = defineComponent({
+const hoverCardContentEmits = {
+  ...hoverCardContentImplEmits
+};
+const HoverCardContent = defineComponent({
   name: "DestylerHoverCardContent",
-  props: destylerHoverCardContentProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: hoverCardContentProps,
+  emits: hoverCardContentEmits,
   setup(props, { emit }) {
     const forwarded = useForwardPropsEmits(props, emit);
     const { forwardRef } = useForwardExpose();
@@ -317,68 +284,44 @@ const DestylerHoverCardContent = defineComponent({
     };
   },
   render() {
-    return h(DestylerPresence, {
+    return h(Presence, {
       present: this.forceMount || this.rootContext.open.value
-    }, {
-      default: () => {
-        return h(DestylerHoverCardContentImpl, 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?.()
-        });
+    }, () => h(HoverCardContentImpl, 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 = {
+  ...teleportPrimitiveProps
 };
-const DestylerHoverCardPortal = defineComponent({
+const HoverCardPortal = defineComponent({
   name: "DestylerHoverCardPortal",
-  props: destylerHoverCardPortalProps,
+  props: hoverCardPortalProps,
   render() {
-    return h(DestylerTeleport, this.$props, {
-      default: () => this.$slots.default?.()
-    });
+    return h(TeleportPrimitive, this.$props, () => this.$slots.default?.());
   }
 });
 
-const destylerHoverCardTriggerProps = {
+const hoverCardTriggerProps = {
+  ...primitiveProps,
+  /**
+   * @default a
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitiveProps.as,
     default: "a"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 };
-const DestylerHoverCardTrigger = defineComponent({
+const HoverCardTrigger = defineComponent({
   name: "DestylerHoverCardTrigger",
-  props: destylerHoverCardTriggerProps,
+  props: hoverCardTriggerProps,
   setup() {
     const { forwardRef } = useForwardExpose();
     const rootContext = injectHoverCardRootContext();
@@ -388,33 +331,27 @@ const DestylerHoverCardTrigger = defineComponent({
     };
   },
   render() {
-    return h(DestylerPopperAnchor, {
+    return h(PopperAnchor, {
       asChild: true
-    }, {
-      default: () => {
-        return h(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?.()
-        });
+    }, () => h(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?.()));
   }
 });
 
-export { DestylerHoverCardArrow, DestylerHoverCardContent, DestylerHoverCardContentImpl, DestylerHoverCardPortal, DestylerHoverCardRoot, DestylerHoverCardTrigger };
+export { HoverCardArrow, HoverCardContent, HoverCardContentImpl, HoverCardPortal, HoverCardRoot, HoverCardTrigger, hoverCardArrowProps, hoverCardContentEmits, hoverCardContentImplEmits, hoverCardContentImplProps, hoverCardContentProps, hoverCardPortalProps, hoverCardRootEmits, hoverCardRootProps, hoverCardTriggerProps };

package/dist/index.cjs

@@ -2,18 +2,24 @@
 
 const index = require('./component.cjs');
 require('vue');
+require('@destyler/primitive');
 require('@destyler/composition');
 require('@destyler/popper');
 require('@destyler/presence');
 require('@destyler/dismissable-layer');
+require('@destyler/dismissable-layer/component');
 require('@destyler/shared');
 require('@destyler/teleport');
-require('@destyler/primitive');
 
 
 
-exports.DestylerHoverCardArrow = index.DestylerHoverCardArrow;
-exports.DestylerHoverCardContent = index.DestylerHoverCardContent;
-exports.DestylerHoverCardPortal = index.DestylerHoverCardPortal;
-exports.DestylerHoverCardRoot = index.DestylerHoverCardRoot;
-exports.DestylerHoverCardTrigger = index.DestylerHoverCardTrigger;
+exports.HoverCardArrow = index.HoverCardArrow;
+exports.HoverCardContent = index.HoverCardContent;
+exports.HoverCardPortal = index.HoverCardPortal;
+exports.HoverCardRoot = index.HoverCardRoot;
+exports.HoverCardTrigger = index.HoverCardTrigger;
+exports.hoverCardArrowProps = index.hoverCardArrowProps;
+exports.hoverCardContentProps = index.hoverCardContentProps;
+exports.hoverCardPortalProps = index.hoverCardPortalProps;
+exports.hoverCardRootProps = index.hoverCardRootProps;
+exports.hoverCardTriggerProps = index.hoverCardTriggerProps;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { D as DestylerHoverCardArrow, a as DestylerHoverCardArrowProps, b as DestylerHoverCardContent, c as DestylerHoverCardContentProps, d as DestylerHoverCardPortal, e as DestylerHoverCardPortalProps, f as DestylerHoverCardRoot, g as DestylerHoverCardRootProps, h as DestylerHoverCardTrigger, i as DestylerHoverCardTriggerProps } from './shared/hover-card.2208f99f.cjs';
+export { a as HoverCardArrow, b as HoverCardArrowProps, c as HoverCardContent, f as HoverCardContentProps, g as HoverCardPortal, j as HoverCardPortalProps, k as HoverCardRoot, n as HoverCardRootProps, o as HoverCardTrigger, q as HoverCardTriggerProps, h as hoverCardArrowProps, d as hoverCardContentProps, i as hoverCardPortalProps, l as hoverCardRootProps, p as hoverCardTriggerProps } from './shared/hover-card.c926f135.cjs';
 import 'vue';
 import '@destyler/primitive';
 import '@destyler/shared';

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { D as DestylerHoverCardArrow, a as DestylerHoverCardArrowProps, b as DestylerHoverCardContent, c as DestylerHoverCardContentProps, d as DestylerHoverCardPortal, e as DestylerHoverCardPortalProps, f as DestylerHoverCardRoot, g as DestylerHoverCardRootProps, h as DestylerHoverCardTrigger, i as DestylerHoverCardTriggerProps } from './shared/hover-card.2208f99f.mjs';
+export { a as HoverCardArrow, b as HoverCardArrowProps, c as HoverCardContent, f as HoverCardContentProps, g as HoverCardPortal, j as HoverCardPortalProps, k as HoverCardRoot, n as HoverCardRootProps, o as HoverCardTrigger, q as HoverCardTriggerProps, h as hoverCardArrowProps, d as hoverCardContentProps, i as hoverCardPortalProps, l as hoverCardRootProps, p as hoverCardTriggerProps } from './shared/hover-card.c926f135.mjs';
 import 'vue';
 import '@destyler/primitive';
 import '@destyler/shared';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { D as DestylerHoverCardArrow, a as DestylerHoverCardArrowProps, b as DestylerHoverCardContent, c as DestylerHoverCardContentProps, d as DestylerHoverCardPortal, e as DestylerHoverCardPortalProps, f as DestylerHoverCardRoot, g as DestylerHoverCardRootProps, h as DestylerHoverCardTrigger, i as DestylerHoverCardTriggerProps } from './shared/hover-card.2208f99f.js';
+export { a as HoverCardArrow, b as HoverCardArrowProps, c as HoverCardContent, f as HoverCardContentProps, g as HoverCardPortal, j as HoverCardPortalProps, k as HoverCardRoot, n as HoverCardRootProps, o as HoverCardTrigger, q as HoverCardTriggerProps, h as hoverCardArrowProps, d as hoverCardContentProps, i as hoverCardPortalProps, l as hoverCardRootProps, p as hoverCardTriggerProps } from './shared/hover-card.c926f135.js';
 import 'vue';
 import '@destyler/primitive';
 import '@destyler/shared';

package/dist/index.mjs

@@ -1,9 +1,10 @@
-export { DestylerHoverCardArrow, DestylerHoverCardContent, DestylerHoverCardPortal, DestylerHoverCardRoot, DestylerHoverCardTrigger } from './component.mjs';
+export { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, hoverCardArrowProps, hoverCardContentProps, hoverCardPortalProps, hoverCardRootProps, hoverCardTriggerProps } from './component.mjs';
 import 'vue';
+import '@destyler/primitive';
 import '@destyler/composition';
 import '@destyler/popper';
 import '@destyler/presence';
 import '@destyler/dismissable-layer';
+import '@destyler/dismissable-layer/component';
 import '@destyler/shared';
 import '@destyler/teleport';
-import '@destyler/primitive';

package/dist/resolver.cjs

@@ -3,18 +3,22 @@
 const name = "@destyler/hover-card";
 
 const packageName = name;
-const destylerComponentName = [
-  "DestylerTemplate"
+const hoverCardComponentName = [
+  "HoverCardArrow",
+  "HoverCardContent",
+  "HoverCardPortal",
+  "HoverCardRoot",
+  "HoverCardTrigger"
 ];
-function DestylerTemplateResolver() {
+function HoverCardResolver() {
   return {
     type: "component",
     resolve: (name2) => {
-      if (destylerComponentName.includes(name2))
+      if (hoverCardComponentName.includes(name2))
         return { name: name2, from: packageName };
     }
   };
 }
 
-exports.DestylerTemplateResolver = DestylerTemplateResolver;
-exports.destylerComponentName = destylerComponentName;
+exports.HoverCardResolver = HoverCardResolver;
+exports.hoverCardComponentName = hoverCardComponentName;

package/dist/resolver.d.cts

@@ -1,6 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
 
-declare const destylerComponentName: string[];
-declare function DestylerTemplateResolver(): ComponentResolver;
+declare const hoverCardComponentName: string[];
+declare function HoverCardResolver(): ComponentResolver;
 
-export { DestylerTemplateResolver, destylerComponentName };
+export { HoverCardResolver, hoverCardComponentName };

package/dist/resolver.d.mts

@@ -1,6 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
 
-declare const destylerComponentName: string[];
-declare function DestylerTemplateResolver(): ComponentResolver;
+declare const hoverCardComponentName: string[];
+declare function HoverCardResolver(): ComponentResolver;
 
-export { DestylerTemplateResolver, destylerComponentName };
+export { HoverCardResolver, hoverCardComponentName };

package/dist/resolver.d.ts

@@ -1,6 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
 
-declare const destylerComponentName: string[];
-declare function DestylerTemplateResolver(): ComponentResolver;
+declare const hoverCardComponentName: string[];
+declare function HoverCardResolver(): ComponentResolver;
 
-export { DestylerTemplateResolver, destylerComponentName };
+export { HoverCardResolver, hoverCardComponentName };

package/dist/resolver.mjs

@@ -1,17 +1,21 @@
 const name = "@destyler/hover-card";
 
 const packageName = name;
-const destylerComponentName = [
-  "DestylerTemplate"
+const hoverCardComponentName = [
+  "HoverCardArrow",
+  "HoverCardContent",
+  "HoverCardPortal",
+  "HoverCardRoot",
+  "HoverCardTrigger"
 ];
-function DestylerTemplateResolver() {
+function HoverCardResolver() {
   return {
     type: "component",
     resolve: (name2) => {
-      if (destylerComponentName.includes(name2))
+      if (hoverCardComponentName.includes(name2))
         return { name: name2, from: packageName };
     }
   };
 }
 
-export { DestylerTemplateResolver, destylerComponentName };
+export { HoverCardResolver, hoverCardComponentName };