@destyler/hover-card 0.0.1-beta.16

package/dist/component.d.ts

@@ -0,0 +1,286 @@
+import { H as HoverCardRootContext } from './shared/hover-card.2208f99f.js';
+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';
+import * as vue from 'vue';
+import { PropType, Component } from 'vue';
+import * as _destyler_shared from '@destyler/shared';
+import { ExtractPublicPropTypes } from '@destyler/shared';
+import * as _vue_shared from '@vue/shared';
+import { AsTag } from '@destyler/primitive';
+
+declare const destylerHoverCardContentImplProps: {
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly side: {
+        readonly type: PropType<"top" | "right" | "bottom" | "left">;
+        readonly required: false;
+        readonly default: "bottom";
+    };
+    readonly sideOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly align: {
+        readonly type: PropType<"start" | "center" | "end">;
+        readonly required: false;
+        readonly default: "center";
+    };
+    readonly alignOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly avoidCollisions: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    readonly collisionBoundary: {
+        readonly type: PropType<Element | (Element | null)[] | null>;
+        readonly required: false;
+        readonly default: () => never[];
+    };
+    readonly collisionPadding: {
+        readonly type: PropType<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly arrowPadding: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly sticky: {
+        readonly type: PropType<"partial" | "always">;
+        readonly required: false;
+        readonly default: "partial";
+    };
+    readonly hideWhenDetached: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly updatePositionStrategy: {
+        readonly type: PropType<"always" | "optimized">;
+        readonly required: false;
+        readonly default: "optimized";
+    };
+    readonly onPlaced: {
+        readonly type: PropType<() => void>;
+        readonly required: false;
+    };
+    readonly prioritizePosition: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DestylerHoverCardContentImplProps = ExtractPublicPropTypes<typeof destylerHoverCardContentImplProps>;
+declare const DestylerHoverCardContentImpl: vue.DefineComponent<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly side: {
+        readonly type: PropType<"top" | "right" | "bottom" | "left">;
+        readonly required: false;
+        readonly default: "bottom";
+    };
+    readonly sideOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly align: {
+        readonly type: PropType<"start" | "center" | "end">;
+        readonly required: false;
+        readonly default: "center";
+    };
+    readonly alignOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly avoidCollisions: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    readonly collisionBoundary: {
+        readonly type: PropType<Element | (Element | null)[] | null>;
+        readonly required: false;
+        readonly default: () => never[];
+    };
+    readonly collisionPadding: {
+        readonly type: PropType<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly arrowPadding: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly sticky: {
+        readonly type: PropType<"partial" | "always">;
+        readonly required: false;
+        readonly default: "partial";
+    };
+    readonly hideWhenDetached: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly updatePositionStrategy: {
+        readonly type: PropType<"always" | "optimized">;
+        readonly required: false;
+        readonly default: "optimized";
+    };
+    readonly onPlaced: {
+        readonly type: PropType<() => void>;
+        readonly required: false;
+    };
+    readonly prioritizePosition: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    rootContext: HoverCardRootContext;
+    forwarded: _destyler_shared.ComputedRefWithControl<_vue_shared.LooseRequired<{
+        readonly asChild: boolean;
+        readonly as: AsTag | Component;
+        readonly side: "top" | "right" | "bottom" | "left";
+        readonly sideOffset: number;
+        readonly align: "start" | "center" | "end";
+        readonly alignOffset: number;
+        readonly avoidCollisions: boolean;
+        readonly collisionBoundary: Element | (Element | null)[] | null;
+        readonly collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+        readonly arrowPadding: number;
+        readonly sticky: "partial" | "always";
+        readonly hideWhenDetached: boolean;
+        readonly updatePositionStrategy: "always" | "optimized";
+        readonly prioritizePosition: boolean;
+        readonly onPlaced?: (() => void) | undefined;
+        readonly onEscapeKeyDown?: ((...args: any[]) => any) | undefined;
+        readonly onPointerDownOutside?: ((...args: any[]) => any) | undefined;
+        readonly onFocusOutside?: ((...args: any[]) => any) | undefined;
+        readonly onInteractOutside?: ((...args: any[]) => any) | undefined;
+        readonly onDismiss?: ((...args: any[]) => any) | undefined;
+    } & {}>>;
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    containSelection: vue.Ref<boolean>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly as: {
+        readonly type: PropType<AsTag | Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly side: {
+        readonly type: PropType<"top" | "right" | "bottom" | "left">;
+        readonly required: false;
+        readonly default: "bottom";
+    };
+    readonly sideOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly align: {
+        readonly type: PropType<"start" | "center" | "end">;
+        readonly required: false;
+        readonly default: "center";
+    };
+    readonly alignOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly avoidCollisions: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    readonly collisionBoundary: {
+        readonly type: PropType<Element | (Element | null)[] | null>;
+        readonly required: false;
+        readonly default: () => never[];
+    };
+    readonly collisionPadding: {
+        readonly type: PropType<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly arrowPadding: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    readonly sticky: {
+        readonly type: PropType<"partial" | "always">;
+        readonly required: false;
+        readonly default: "partial";
+    };
+    readonly hideWhenDetached: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly updatePositionStrategy: {
+        readonly type: PropType<"always" | "optimized">;
+        readonly required: false;
+        readonly default: "optimized";
+    };
+    readonly onPlaced: {
+        readonly type: PropType<() => void>;
+        readonly required: false;
+    };
+    readonly prioritizePosition: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>> & {
+    onEscapeKeyDown?: ((...args: any[]) => any) | undefined;
+    onPointerDownOutside?: ((...args: any[]) => any) | undefined;
+    onFocusOutside?: ((...args: any[]) => any) | undefined;
+    onInteractOutside?: ((...args: any[]) => any) | undefined;
+    onDismiss?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly asChild: boolean;
+    readonly as: AsTag | Component;
+    readonly side: "top" | "right" | "bottom" | "left";
+    readonly sideOffset: number;
+    readonly align: "start" | "center" | "end";
+    readonly alignOffset: number;
+    readonly avoidCollisions: boolean;
+    readonly collisionBoundary: Element | (Element | null)[] | null;
+    readonly collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+    readonly arrowPadding: number;
+    readonly sticky: "partial" | "always";
+    readonly hideWhenDetached: boolean;
+    readonly updatePositionStrategy: "always" | "optimized";
+    readonly prioritizePosition: boolean;
+}, {}>;
+
+export { DestylerHoverCardContentImpl, type DestylerHoverCardContentImplProps };

package/dist/component.mjs

@@ -0,0 +1,420 @@
+import { defineComponent, h, toRefs, ref, watchEffect, onMounted, onUnmounted, withModifiers, mergeProps, nextTick } from 'vue';
+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 { createContext } from '@destyler/shared';
+import { DestylerTeleport } from '@destyler/teleport';
+import { DestylerPrimitive } from '@destyler/primitive';
+
+const destylerHoverCardArrowProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  width: {
+    type: Number,
+    required: false,
+    default: 10
+  },
+  height: {
+    type: Number,
+    required: false,
+    default: 5
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "svg"
+  }
+};
+const DestylerHoverCardArrow = defineComponent({
+  name: "DestylerHoverCardArrow",
+  props: destylerHoverCardArrowProps,
+  setup() {
+    useForwardExpose();
+  },
+  render() {
+    return h(DestylerPopperArrow, this.$props, {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+function excludeTouch(eventHandler) {
+  return (event) => event.pointerType === "touch" ? void 0 : eventHandler();
+}
+function getTabbableNodes(container) {
+  const nodes = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode())
+    nodes.push(walker.currentNode);
+  return nodes;
+}
+
+const destylerHoverCardRootProps = {
+  open: {
+    type: Boolean,
+    required: void 0
+  },
+  defaultOpen: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  openDelay: {
+    type: Number,
+    required: false,
+    default: 700
+  },
+  closeDelay: {
+    type: Number,
+    required: false,
+    default: 300
+  }
+};
+const [injectHoverCardRootContext, provideHoverCardRootContext] = createContext("DestylerHoverCardRoot");
+const DestylerHoverCardRoot = defineComponent({
+  name: "DestylerHoverCardRoot",
+  props: destylerHoverCardRootProps,
+  emits: ["update:open"],
+  setup(props, { emit }) {
+    const { openDelay, closeDelay } = toRefs(props);
+    useForwardExpose();
+    const open = useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    const openTimerRef = ref(0);
+    const closeTimerRef = ref(0);
+    const hasSelectionRef = ref(false);
+    const isPointerDownOnContentRef = ref(false);
+    function handleOpen() {
+      clearTimeout(closeTimerRef.value);
+      openTimerRef.value = window.setTimeout(() => open.value = true, openDelay.value);
+    }
+    function handleClose() {
+      clearTimeout(openTimerRef.value);
+      if (!hasSelectionRef.value && !isPointerDownOnContentRef.value)
+        closeTimerRef.value = window.setTimeout(() => open.value = false, closeDelay.value);
+    }
+    function handleDismiss() {
+      open.value = false;
+    }
+    provideHoverCardRootContext({
+      open,
+      onOpenChange(value) {
+        open.value = value;
+      },
+      onOpen: handleOpen,
+      onClose: handleClose,
+      onDismiss: handleDismiss,
+      hasSelectionRef,
+      isPointerDownOnContentRef
+    });
+  },
+  render() {
+    return h(DestylerPopperRoot, {}, {
+      default: () => 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 DestylerHoverCardContentImpl = defineComponent({
+  name: "DestylerHoverCardContentImpl",
+  props: destylerHoverCardContentImplProps,
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(props) {
+    const forwarded = useForwardProps(props);
+    const { forwardRef, currentElement: contentElement } = useForwardExpose();
+    const rootContext = injectHoverCardRootContext();
+    const containSelection = ref(false);
+    let originalBodyUserSelect;
+    watchEffect((cleanupFn) => {
+      if (containSelection.value) {
+        const body = document.body;
+        originalBodyUserSelect = body.style.userSelect || body.style.webkitUserSelect;
+        body.style.userSelect = "none";
+        body.style.webkitUserSelect = "none";
+        cleanupFn(() => {
+          body.style.userSelect = originalBodyUserSelect;
+          body.style.webkitUserSelect = originalBodyUserSelect;
+        });
+      }
+    });
+    function handlePointerUp() {
+      containSelection.value = false;
+      rootContext.isPointerDownOnContentRef.value = false;
+      nextTick(() => {
+        const hasSelection = document.getSelection()?.toString() !== "";
+        if (hasSelection)
+          rootContext.hasSelectionRef.value = true;
+      });
+    }
+    onMounted(() => {
+      if (contentElement.value) {
+        document.addEventListener("pointerup", handlePointerUp);
+        const tabbables = getTabbableNodes(contentElement.value);
+        tabbables.forEach((tabbable) => tabbable.setAttribute("tabindex", "_1"));
+      }
+    });
+    onUnmounted(() => {
+      document.removeEventListener("pointerup", handlePointerUp);
+      rootContext.hasSelectionRef.value = false;
+      rootContext.isPointerDownOnContentRef.value = false;
+    });
+    return {
+      rootContext,
+      forwarded,
+      forwardRef,
+      containSelection
+    };
+  },
+  render() {
+    return h(DestylerDismissableLayer, {
+      asChild: true,
+      disableOutsidePointerEvents: false,
+      onEscapeKeyDown: (event) => {
+        this.$emit("escapeKeyDown", event);
+      },
+      onPointerDownOutside: (event) => {
+        this.$emit("pointerDownOutside", event);
+      },
+      onFocusOutside: withModifiers((event) => {
+        this.$emit("focusOutside", event);
+      }, ["prevent"]),
+      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?.()
+        });
+      }
+    });
+  }
+});
+
+const destylerHoverCardContentProps = {
+  ...destylerHoverCardContentImplProps,
+  forceMount: {
+    type: Boolean,
+    required: false
+  }
+};
+const DestylerHoverCardContent = defineComponent({
+  name: "DestylerHoverCardContent",
+  props: destylerHoverCardContentProps,
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(props, { emit }) {
+    const forwarded = useForwardPropsEmits(props, emit);
+    const { forwardRef } = useForwardExpose();
+    const rootContext = injectHoverCardRootContext();
+    return {
+      rootContext,
+      forwarded,
+      forwardRef
+    };
+  },
+  render() {
+    return h(DestylerPresence, {
+      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?.()
+        });
+      }
+    });
+  }
+});
+
+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 DestylerHoverCardPortal = defineComponent({
+  name: "DestylerHoverCardPortal",
+  props: destylerHoverCardPortalProps,
+  render() {
+    return h(DestylerTeleport, this.$props, {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerHoverCardTriggerProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "a"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerHoverCardTrigger = defineComponent({
+  name: "DestylerHoverCardTrigger",
+  props: destylerHoverCardTriggerProps,
+  setup() {
+    const { forwardRef } = useForwardExpose();
+    const rootContext = injectHoverCardRootContext();
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return h(DestylerPopperAnchor, {
+      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?.()
+        });
+      }
+    });
+  }
+});
+
+export { DestylerHoverCardArrow, DestylerHoverCardContent, DestylerHoverCardContentImpl, DestylerHoverCardPortal, DestylerHoverCardRoot, DestylerHoverCardTrigger };