@destyler/hover-card 0.0.1-beta.16

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-PRESENT Elone Hoo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/component.cjs

@@ -0,0 +1,427 @@
+'use strict';
+
+const vue = require('vue');
+const composition = require('@destyler/composition');
+const popper = require('@destyler/popper');
+const presence = require('@destyler/presence');
+const dismissableLayer = require('@destyler/dismissable-layer');
+const shared = require('@destyler/shared');
+const teleport = require('@destyler/teleport');
+const primitive = require('@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 = vue.defineComponent({
+  name: "DestylerHoverCardArrow",
+  props: destylerHoverCardArrowProps,
+  setup() {
+    composition.useForwardExpose();
+  },
+  render() {
+    return vue.h(popper.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] = shared.createContext("DestylerHoverCardRoot");
+const DestylerHoverCardRoot = vue.defineComponent({
+  name: "DestylerHoverCardRoot",
+  props: destylerHoverCardRootProps,
+  emits: ["update:open"],
+  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.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 = vue.defineComponent({
+  name: "DestylerHoverCardContentImpl",
+  props: destylerHoverCardContentImplProps,
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  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.DestylerDismissableLayer, {
+      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();
+      }
+    }, {
+      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?.()
+        });
+      }
+    });
+  }
+});
+
+const destylerHoverCardContentProps = {
+  ...destylerHoverCardContentImplProps,
+  forceMount: {
+    type: Boolean,
+    required: false
+  }
+};
+const DestylerHoverCardContent = vue.defineComponent({
+  name: "DestylerHoverCardContent",
+  props: destylerHoverCardContentProps,
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  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.DestylerPresence, {
+      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?.()
+        });
+      }
+    });
+  }
+});
+
+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 = vue.defineComponent({
+  name: "DestylerHoverCardPortal",
+  props: destylerHoverCardPortalProps,
+  render() {
+    return vue.h(teleport.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 = vue.defineComponent({
+  name: "DestylerHoverCardTrigger",
+  props: destylerHoverCardTriggerProps,
+  setup() {
+    const { forwardRef } = composition.useForwardExpose();
+    const rootContext = injectHoverCardRootContext();
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(popper.DestylerPopperAnchor, {
+      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?.()
+        });
+      }
+    });
+  }
+});
+
+exports.DestylerHoverCardArrow = DestylerHoverCardArrow;
+exports.DestylerHoverCardContent = DestylerHoverCardContent;
+exports.DestylerHoverCardContentImpl = DestylerHoverCardContentImpl;
+exports.DestylerHoverCardPortal = DestylerHoverCardPortal;
+exports.DestylerHoverCardRoot = DestylerHoverCardRoot;
+exports.DestylerHoverCardTrigger = DestylerHoverCardTrigger;