@destyler/hover-card 0.0.5 → 0.0.7-beta.1

package/dist/component.mjs

@@ -1,357 +0,0 @@
-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 { 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 { teleportPrimitiveProps, TeleportPrimitive } from '@destyler/teleport';
-
-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
-  }
-};
-const HoverCardArrow = defineComponent({
-  name: "DestylerHoverCardArrow",
-  props: hoverCardArrowProps,
-  setup() {
-    useForwardExpose();
-  },
-  render() {
-    return h(PopperArrow, this.$props, () => 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 hoverCardRootProps = {
-  /**
-   * The controlled open state of the hover card.
-   * Can be binded as `v-model:open`.
-   *
-   * @default undefined
-   */
-  open: {
-    type: Boolean,
-    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 HoverCardRoot = defineComponent({
-  name: "DestylerHoverCardRoot",
-  props: hoverCardRootProps,
-  emits: hoverCardRootEmits,
-  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(PopperRoot, {}, () => this.$slots.default?.());
-  }
-});
-
-const hoverCardContentImplProps = {
-  ...popperContentProps
-};
-const hoverCardContentImplEmits = {
-  ...dismissableLayerEmits
-};
-const HoverCardContentImpl = defineComponent({
-  name: "DestylerHoverCardContentImpl",
-  props: hoverCardContentImplProps,
-  emits: hoverCardContentImplEmits,
-  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(DismissableLayer, {
-      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();
-      }
-    }, () => 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 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 hoverCardContentEmits = {
-  ...hoverCardContentImplEmits
-};
-const HoverCardContent = defineComponent({
-  name: "DestylerHoverCardContent",
-  props: hoverCardContentProps,
-  emits: hoverCardContentEmits,
-  setup(props, { emit }) {
-    const forwarded = useForwardPropsEmits(props, emit);
-    const { forwardRef } = useForwardExpose();
-    const rootContext = injectHoverCardRootContext();
-    return {
-      rootContext,
-      forwarded,
-      forwardRef
-    };
-  },
-  render() {
-    return h(Presence, {
-      present: this.forceMount || this.rootContext.open.value
-    }, () => 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 hoverCardPortalProps = {
-  ...teleportPrimitiveProps
-};
-const HoverCardPortal = defineComponent({
-  name: "DestylerHoverCardPortal",
-  props: hoverCardPortalProps,
-  render() {
-    return h(TeleportPrimitive, this.$props, () => this.$slots.default?.());
-  }
-});
-
-const hoverCardTriggerProps = {
-  ...primitiveProps,
-  /**
-   * @default a
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "a"
-  }
-};
-const HoverCardTrigger = defineComponent({
-  name: "DestylerHoverCardTrigger",
-  props: hoverCardTriggerProps,
-  setup() {
-    const { forwardRef } = useForwardExpose();
-    const rootContext = injectHoverCardRootContext();
-    return {
-      rootContext,
-      forwardRef
-    };
-  },
-  render() {
-    return h(PopperAnchor, {
-      asChild: true
-    }, () => 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 { HoverCardArrow, HoverCardContent, HoverCardContentImpl, HoverCardPortal, HoverCardRoot, HoverCardTrigger, hoverCardArrowProps, hoverCardContentEmits, hoverCardContentImplEmits, hoverCardContentImplProps, hoverCardContentProps, hoverCardPortalProps, hoverCardRootEmits, hoverCardRootProps, hoverCardTriggerProps };

package/dist/resolver.cjs

@@ -1,24 +0,0 @@
-'use strict';
-
-const name = "@destyler/hover-card";
-
-const packageName = name;
-const hoverCardComponentName = [
-  "HoverCardArrow",
-  "HoverCardContent",
-  "HoverCardPortal",
-  "HoverCardRoot",
-  "HoverCardTrigger"
-];
-function HoverCardResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (hoverCardComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-exports.HoverCardResolver = HoverCardResolver;
-exports.hoverCardComponentName = hoverCardComponentName;

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

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