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

package/dist/component.cjs

@@ -1,373 +0,0 @@
-'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 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
-  }
-};
-const HoverCardArrow = vue.defineComponent({
-  name: "DestylerHoverCardArrow",
-  props: hoverCardArrowProps,
-  setup() {
-    composition.useForwardExpose();
-  },
-  render() {
-    return vue.h(popper.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] = shared.createContext("DestylerHoverCardRoot");
-const HoverCardRoot = vue.defineComponent({
-  name: "DestylerHoverCardRoot",
-  props: hoverCardRootProps,
-  emits: hoverCardRootEmits,
-  setup(props, { emit }) {
-    const { openDelay, closeDelay } = vue.toRefs(props);
-    composition.useForwardExpose();
-    const open = composition.useVModel(props, "open", emit, {
-      defaultValue: props.defaultOpen,
-      passive: props.open === void 0
-    });
-    const openTimerRef = vue.ref(0);
-    const closeTimerRef = vue.ref(0);
-    const hasSelectionRef = vue.ref(false);
-    const isPointerDownOnContentRef = vue.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 vue.h(popper.PopperRoot, {}, () => this.$slots.default?.());
-  }
-});
-
-const hoverCardContentImplProps = {
-  ...popper.popperContentProps
-};
-const hoverCardContentImplEmits = {
-  ...component.dismissableLayerEmits
-};
-const HoverCardContentImpl = vue.defineComponent({
-  name: "DestylerHoverCardContentImpl",
-  props: hoverCardContentImplProps,
-  emits: hoverCardContentImplEmits,
-  setup(props) {
-    const forwarded = composition.useForwardProps(props);
-    const { forwardRef, currentElement: contentElement } = composition.useForwardExpose();
-    const rootContext = injectHoverCardRootContext();
-    const containSelection = vue.ref(false);
-    let originalBodyUserSelect;
-    vue.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;
-      vue.nextTick(() => {
-        const hasSelection = document.getSelection()?.toString() !== "";
-        if (hasSelection)
-          rootContext.hasSelectionRef.value = true;
-      });
-    }
-    vue.onMounted(() => {
-      if (contentElement.value) {
-        document.addEventListener("pointerup", handlePointerUp);
-        const tabbables = getTabbableNodes(contentElement.value);
-        tabbables.forEach((tabbable) => tabbable.setAttribute("tabindex", "-1"));
-      }
-    });
-    vue.onUnmounted(() => {
-      document.removeEventListener("pointerup", handlePointerUp);
-      rootContext.hasSelectionRef.value = false;
-      rootContext.isPointerDownOnContentRef.value = false;
-    });
-    return {
-      rootContext,
-      forwarded,
-      forwardRef,
-      containSelection
-    };
-  },
-  render() {
-    return vue.h(dismissableLayer.DismissableLayer, {
-      asChild: true,
-      disableOutsidePointerEvents: false,
-      onEscapeKeyDown: (event) => {
-        this.$emit("escapeKeyDown", event);
-      },
-      onPointerDownOutside: (event) => {
-        this.$emit("pointerDownOutside", event);
-      },
-      onFocusOutside: vue.withModifiers((event) => {
-        this.$emit("focusOutside", event);
-      }, ["prevent"]),
-      onDismiss: () => {
-        this.rootContext.onDismiss();
-      }
-    }, () => 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 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 = vue.defineComponent({
-  name: "DestylerHoverCardContent",
-  props: hoverCardContentProps,
-  emits: hoverCardContentEmits,
-  setup(props, { emit }) {
-    const forwarded = composition.useForwardPropsEmits(props, emit);
-    const { forwardRef } = composition.useForwardExpose();
-    const rootContext = injectHoverCardRootContext();
-    return {
-      rootContext,
-      forwarded,
-      forwardRef
-    };
-  },
-  render() {
-    return vue.h(presence.Presence, {
-      present: this.forceMount || this.rootContext.open.value
-    }, () => 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 hoverCardPortalProps = {
-  ...teleport.teleportPrimitiveProps
-};
-const HoverCardPortal = vue.defineComponent({
-  name: "DestylerHoverCardPortal",
-  props: hoverCardPortalProps,
-  render() {
-    return vue.h(teleport.TeleportPrimitive, this.$props, () => this.$slots.default?.());
-  }
-});
-
-const hoverCardTriggerProps = {
-  ...primitive.primitiveProps,
-  /**
-   * @default a
-   */
-  as: {
-    ...primitive.primitiveProps.as,
-    default: "a"
-  }
-};
-const HoverCardTrigger = vue.defineComponent({
-  name: "DestylerHoverCardTrigger",
-  props: hoverCardTriggerProps,
-  setup() {
-    const { forwardRef } = composition.useForwardExpose();
-    const rootContext = injectHoverCardRootContext();
-    return {
-      rootContext,
-      forwardRef
-    };
-  },
-  render() {
-    return vue.h(popper.PopperAnchor, {
-      asChild: true
-    }, () => 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.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;