@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/es/tooltip/src/TxTooltip.vue2.js

@@ -1,15 +1,9 @@
-import { defineComponent, ref, computed, useId, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, Fragment, createElementVNode, createBlock, renderSlot, Teleport, createVNode, Transition, withCtx, createCommentVNode, normalizeStyle, normalizeClass, unref, createTextVNode, toDisplayString } from 'vue';
-import { useFloating, offset, flip, shift, size, arrow, autoUpdate } from '@floating-ui/vue';
+import { defineComponent, useSlots, ref, computed, watch, onBeforeUnmount, createBlock, openBlock, unref, mergeProps, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, normalizeClass } from 'vue';
+import '../../base-anchor/index.js';
+import TxBaseAnchor from '../../base-anchor/src/TxBaseAnchor.vue.js';
 
 const _hoisted_1 = ["data-side"];
-const _hoisted_2 = {
-  class: "tx-tooltip__fusion-filters",
-  width: "0",
-  height: "0",
-  "aria-hidden": "true"
-};
-const _hoisted_3 = ["values"];
-const _hoisted_4 = ["data-side"];
+const _hoisted_2 = { class: "tx-tooltip__content" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "TxTooltip" },
   __name: "TxTooltip",
@@ -18,32 +12,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     content: { default: "" },
     disabled: { type: Boolean, default: false },
     trigger: { default: "hover" },
-    placement: { default: "top" },
-    offset: { default: 8 },
     openDelay: { default: 200 },
     closeDelay: { default: 120 },
-    maxWidth: { default: 280 },
-    showArrow: { type: Boolean, default: false },
-    arrowSize: { default: 12 },
+    maxHeight: { default: 320 },
+    referenceFullWidth: { type: Boolean, default: false },
     interactive: { type: Boolean, default: false },
-    closeOnClickOutside: { type: Boolean, default: true },
-    motion: { default: "split" },
-    fusion: { type: Boolean, default: false },
-    panelVariant: { default: "solid" },
-    panelBackground: { default: "blur" },
-    panelShadow: { default: "soft" },
-    panelRadius: { default: 10 },
-    panelPadding: { default: 8 }
+    keepAliveContent: { type: Boolean, default: false },
+    closeOnClickOutside: { type: Boolean, default: void 0 },
+    toggleOnReferenceClick: { type: Boolean, default: void 0 },
+    anchor: { default: () => ({}) }
   },
   emits: ["update:modelValue", "open", "close"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const slots = useSlots();
     const internalOpen = ref(false);
     const open = computed({
       get: () => typeof props.modelValue === "boolean" ? props.modelValue : internalOpen.value,
       set: (v) => {
-        if (props.disabled)
+        if (props.disabled && v)
+          return;
+        const current = typeof props.modelValue === "boolean" ? props.modelValue : internalOpen.value;
+        if (current === v)
           return;
         internalOpen.value = v;
         emit("update:modelValue", v);
@@ -53,92 +44,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           emit("close");
       }
     });
-    const referenceRef = ref(null);
-    const floatingRef = ref(null);
-    const arrowRef = ref(null);
-    const cleanupAutoUpdate = ref(null);
-    const lastOpenedAt = ref(0);
-    const stablePlacement = ref(null);
-    const { floatingStyles, middlewareData, placement, update } = useFloating(referenceRef, floatingRef, {
-      placement: computed(() => props.placement),
-      strategy: "fixed",
-      transform: false,
-      middleware: [
-        offset(() => props.offset),
-        flip({ padding: 8 }),
-        shift({ padding: 8 }),
-        size({
-          padding: 8,
-          apply({ elements }) {
-            Object.assign(elements.floating.style, {
-              maxWidth: `${props.maxWidth}px`
-            });
-          }
-        }),
-        arrow({
-          element: computed(() => arrowRef.value),
-          padding: 6
-        })
-      ]
-    });
-    const splitX = ref(0);
-    const splitY = ref(0);
-    const motion = computed(() => props.motion === "fade" ? "fade" : "split");
-    const tooltipClass = computed(() => {
-      return [
-        "tx-tooltip",
-        `is-variant-${props.panelVariant}`,
-        `is-bg-${props.panelBackground}`,
-        `is-shadow-${props.panelShadow}`,
-        { "is-fusion": !!props.fusion, "is-motion-split": motion.value === "split" }
-      ];
-    });
-    const tooltipVars = computed(() => {
-      const side = String(stablePlacement.value || placement.value || props.placement || "top").split("-")[0];
-      const arrowData = middlewareData.value?.arrow;
-      const arrowSize = props.arrowSize || 12;
-      let fusionX = "50%";
-      let fusionY = "50%";
-      if (props.showArrow && arrowData) {
-        if (side === "top" || side === "bottom") {
-          if (arrowData.x != null)
-            fusionX = `${arrowData.x + arrowSize * 0.5}px`;
-        } else {
-          if (arrowData.y != null)
-            fusionY = `${arrowData.y + arrowSize * 0.5}px`;
-        }
-      }
-      return {
-        "--tx-tooltip-radius": `${props.panelRadius}px`,
-        "--tx-tooltip-padding": `${props.panelPadding}px`,
-        "--tx-tooltip-arrow-size": `${props.arrowSize}px`,
-        "--tx-tooltip-split-x": `${splitX.value}px`,
-        "--tx-tooltip-split-y": `${splitY.value}px`,
-        "--tx-tooltip-fusion-x": fusionX,
-        "--tx-tooltip-fusion-y": fusionY
-      };
-    });
-    const uid = useId();
-    const gooFilterId = `tx-tooltip-goo-${uid}`;
-    const gooMatrixValues = computed(() => {
-      const alpha = 26;
-      const alphaOffset = -12;
-      return `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${alpha} ${alphaOffset}`;
-    });
-    const fusionVars = computed(() => {
-      const out = Math.max(12, (props.offset ?? 8) + (props.arrowSize ?? 12) * 0.8);
-      const size2 = Math.max(26, (props.arrowSize ?? 12) * 3.2);
-      return {
-        "--tx-tooltip-goo-out": `${out}px`,
-        "--tx-tooltip-goo-size": `${size2}px`
-      };
-    });
     let openTimer = null;
     let closeTimer = null;
     function clearTimers() {
-      if (openTimer)
+      if (openTimer != null)
         window.clearTimeout(openTimer);
-      if (closeTimer)
+      if (closeTimer != null)
         window.clearTimeout(closeTimer);
       openTimer = null;
       closeTimer = null;
@@ -147,18 +58,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.disabled)
         return;
       clearTimers();
-      openTimer = window.setTimeout(async () => {
-        lastOpenedAt.value = performance.now();
+      openTimer = window.setTimeout(() => {
         open.value = true;
-        await nextTick();
-        await update();
-      }, props.openDelay);
+      }, Math.max(0, props.openDelay));
     }
     function scheduleClose() {
       clearTimers();
       closeTimer = window.setTimeout(() => {
         open.value = false;
-      }, props.closeDelay);
+      }, Math.max(0, props.closeDelay));
     }
     function onEnter() {
       if (props.trigger !== "hover")
@@ -170,20 +78,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       scheduleClose();
     }
-    function onFloatingEnter() {
-      if (!props.interactive)
-        return;
-      if (props.trigger !== "hover")
-        return;
-      clearTimers();
-    }
-    function onFloatingLeave() {
-      if (!props.interactive)
-        return;
-      if (props.trigger !== "hover")
-        return;
-      scheduleClose();
-    }
     function onFocusIn() {
       if (props.trigger !== "focus")
         return;
@@ -194,243 +88,101 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       scheduleClose();
     }
-    function onClickToggle() {
-      if (props.trigger !== "click")
-        return;
-      clearTimers();
-      if (!open.value)
-        lastOpenedAt.value = performance.now();
-      open.value = !open.value;
-    }
-    function isEventInside(e, el) {
-      if (!el)
-        return false;
-      const anyE = e;
-      const path = typeof anyE.composedPath === "function" ? anyE.composedPath() : void 0;
-      if (path && path.length)
-        return path.includes(el);
-      const t = e.target ?? null;
-      return !!t && el.contains(t);
-    }
-    function handleOutside(e) {
-      if (!props.closeOnClickOutside)
-        return;
-      if (props.trigger !== "click")
-        return;
-      if (!open.value)
+    function onFloatingEnter() {
+      if (!props.interactive)
         return;
-      if (performance.now() - lastOpenedAt.value < 60)
+      if (props.trigger !== "hover")
         return;
-      const inRef = isEventInside(e, referenceRef.value);
-      const inFloat = isEventInside(e, floatingRef.value);
-      if (!inRef && !inFloat)
-        open.value = false;
+      clearTimers();
     }
-    function onEsc(e) {
-      if (e.key !== "Escape")
+    function onFloatingLeave() {
+      if (!props.interactive)
         return;
-      if (!open.value)
+      if (props.trigger !== "hover")
         return;
-      open.value = false;
+      scheduleClose();
     }
+    const resolvedAnchorProps = computed(() => {
+      const anchor = props.anchor ?? {};
+      const closeOnClickOutside = typeof props.closeOnClickOutside === "boolean" ? props.closeOnClickOutside : typeof anchor.closeOnClickOutside === "boolean" ? anchor.closeOnClickOutside : props.trigger === "click";
+      const toggleOnReferenceClick = typeof props.toggleOnReferenceClick === "boolean" ? props.toggleOnReferenceClick : typeof anchor.toggleOnReferenceClick === "boolean" ? anchor.toggleOnReferenceClick : props.trigger === "click";
+      return {
+        placement: "top",
+        offset: 8,
+        width: 0,
+        minWidth: 0,
+        maxWidth: 280,
+        matchReferenceWidth: false,
+        duration: 432,
+        ease: "back.out(2)",
+        useCard: true,
+        panelVariant: "solid",
+        panelBackground: "refraction",
+        panelShadow: "soft",
+        panelRadius: 10,
+        panelPadding: 8,
+        showArrow: true,
+        arrowSize: 10,
+        keepAliveContent: props.keepAliveContent,
+        closeOnEsc: true,
+        ...anchor,
+        closeOnClickOutside,
+        toggleOnReferenceClick
+      };
+    });
+    const tooltipVars = computed(() => {
+      const maxHeight = props.maxHeight <= 0 ? "none" : slots.content && props.maxHeight === 320 ? "none" : `${props.maxHeight}px`;
+      return {
+        "--tx-tooltip-max-height": maxHeight
+      };
+    });
     watch(
-      open,
-      async (v) => {
-        if (!v) {
-          stablePlacement.value = null;
-          cleanupAutoUpdate.value?.();
-          cleanupAutoUpdate.value = null;
+      () => props.disabled,
+      (disabled) => {
+        if (!disabled)
           return;
-        }
-        await nextTick();
-        await update();
-        stablePlacement.value = placement.value;
-        if (referenceRef.value && floatingRef.value) {
-          cleanupAutoUpdate.value?.();
-          cleanupAutoUpdate.value = autoUpdate(referenceRef.value, floatingRef.value, () => update());
-        }
-      },
-      { flush: "post" }
-    );
-    onMounted(async () => {
-      document.addEventListener("pointerdown", handleOutside, true);
-      document.addEventListener("keydown", onEsc);
-      await nextTick();
-      if (referenceRef.value) {
-        await update();
+        clearTimers();
+        open.value = false;
       }
-    });
+    );
     onBeforeUnmount(() => {
-      document.removeEventListener("pointerdown", handleOutside, true);
-      document.removeEventListener("keydown", onEsc);
       clearTimers();
-      cleanupAutoUpdate.value?.();
-      cleanupAutoUpdate.value = null;
     });
-    const arrowStyle = computed(() => {
-      if (!props.showArrow || !arrowRef.value)
-        return { display: "none" };
-      const data = middlewareData.value?.arrow;
-      if (!data || data.x == null && data.y == null) {
-        return { display: "none" };
-      }
-      const x = data.x;
-      const y = data.y;
-      const side = String(placement.value || props.placement || "top").split("-")[0];
-      const base = {
-        display: "block",
-        position: "absolute"
-      };
-      if (x != null)
-        base.left = `${x}px`;
-      if (y != null)
-        base.top = `${y}px`;
-      let staticSide = "bottom";
-      switch (side) {
-        case "top":
-          staticSide = "bottom";
-          break;
-        case "right":
-          staticSide = "left";
-          break;
-        case "bottom":
-          staticSide = "top";
-          break;
-        case "left":
-          staticSide = "right";
-          break;
-      }
-      const half = Math.round((props.arrowSize || 12) / 2);
-      base[staticSide] = `calc(-${half}px + 1px)`;
-      return base;
-    });
-    const arrowSide = computed(() => String(stablePlacement.value || placement.value || props.placement || "top").split("-")[0]);
-    function onBeforeEnter(el) {
-      if (motion.value !== "split") {
-        splitX.value = 0;
-        splitY.value = 0;
-        return;
-      }
-      const node = el;
-      const refEl = referenceRef.value;
-      if (!refEl)
-        return;
-      const refRect = refEl.getBoundingClientRect();
-      const side = arrowSide.value;
-      const refCx = refRect.left + refRect.width * 0.5;
-      const refCy = refRect.top + refRect.height * 0.5;
-      let tipX = refCx;
-      let tipY = refCy;
-      const arrowEl = props.showArrow ? arrowRef.value : null;
-      if (arrowEl) {
-        const arrowRect = arrowEl.getBoundingClientRect();
-        tipX = arrowRect.left + arrowRect.width * 0.5;
-        tipY = arrowRect.top + arrowRect.height * 0.5;
-        if (side === "top")
-          tipY = arrowRect.bottom;
-        if (side === "bottom")
-          tipY = arrowRect.top;
-        if (side === "left")
-          tipX = arrowRect.right;
-        if (side === "right")
-          tipX = arrowRect.left;
-      } else {
-        const floatRect = node.getBoundingClientRect();
-        tipX = floatRect.left + floatRect.width * 0.5;
-        tipY = floatRect.top + floatRect.height * 0.5;
-      }
-      const dx = refCx - tipX;
-      const dy = refCy - tipY;
-      const limit = 18;
-      const clamp = (v) => Math.min(limit, Math.max(-limit, v));
-      splitX.value = side === "left" || side === "right" ? clamp(dx) : 0;
-      splitY.value = side === "top" || side === "bottom" ? clamp(dy) : 0;
-    }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("span", {
-          ref_key: "referenceRef",
-          ref: referenceRef,
-          class: "tx-tooltip__reference",
-          onMouseenter: onEnter,
-          onMouseleave: onLeave,
-          onFocusin: onFocusIn,
-          onFocusout: onFocusOut,
-          onClickCapture: onClickToggle
-        }, [
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ], 544),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createVNode(Transition, {
-            name: "tx-tooltip",
-            onBeforeEnter
-          }, {
-            default: withCtx(() => [
-              open.value && !__props.disabled ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "floatingRef",
-                ref: floatingRef,
-                class: normalizeClass(tooltipClass.value),
-                "data-side": arrowSide.value,
-                role: "tooltip",
-                style: normalizeStyle([unref(floatingStyles), tooltipVars.value]),
-                onMouseenter: onFloatingEnter,
-                onMouseleave: onFloatingLeave
-              }, [
-                (openBlock(), createElementBlock("svg", _hoisted_2, [
-                  createElementVNode("defs", null, [
-                    createElementVNode("filter", { id: gooFilterId }, [
-                      _cache[0] || (_cache[0] = createElementVNode("feGaussianBlur", {
-                        in: "SourceGraphic",
-                        stdDeviation: "12",
-                        result: "blur"
-                      }, null, -1)),
-                      createElementVNode("feColorMatrix", {
-                        in: "blur",
-                        mode: "matrix",
-                        values: gooMatrixValues.value,
-                        result: "goo"
-                      }, null, 8, _hoisted_3),
-                      _cache[1] || (_cache[1] = createElementVNode("feComposite", {
-                        in: "SourceGraphic",
-                        in2: "goo",
-                        operator: "atop"
-                      }, null, -1))
-                    ])
-                  ])
-                ])),
-                props.showArrow ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  ref_key: "arrowRef",
-                  ref: arrowRef,
-                  class: "tx-tooltip__arrow",
-                  "data-side": arrowSide.value,
-                  style: normalizeStyle(arrowStyle.value),
-                  "aria-hidden": "true"
-                }, null, 12, _hoisted_4)) : createCommentVNode("", true),
-                props.fusion && motion.value === "split" ? (openBlock(), createElementBlock("div", {
-                  key: 1,
-                  class: "tx-tooltip__fusion",
-                  style: normalizeStyle(fusionVars.value),
-                  "aria-hidden": "true"
-                }, [
-                  createElementVNode("div", {
-                    class: "tx-tooltip__fusion-goo",
-                    style: normalizeStyle({ filter: `url(#${gooFilterId})` })
-                  }, [..._cache[2] || (_cache[2] = [
-                    createElementVNode("div", { class: "tx-tooltip__fusion-blob tx-tooltip__fusion-blob--tip" }, null, -1),
-                    createElementVNode("div", { class: "tx-tooltip__fusion-blob tx-tooltip__fusion-blob--ref" }, null, -1)
-                  ])], 4)
-                ], 4)) : createCommentVNode("", true),
-                renderSlot(_ctx.$slots, "content", {}, () => [
-                  createTextVNode(toDisplayString(__props.content), 1)
-                ], true)
-              ], 46, _hoisted_1)) : createCommentVNode("", true)
-            ]),
-            _: 3
-          })
-        ]))
-      ], 64);
+      return openBlock(), createBlock(unref(TxBaseAnchor), mergeProps({
+        modelValue: open.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+        disabled: props.disabled
+      }, resolvedAnchorProps.value), {
+        reference: withCtx(() => [
+          createElementVNode("span", {
+            class: normalizeClass(["tx-tooltip__reference", { "is-full-width": props.referenceFullWidth }]),
+            onMouseenter: onEnter,
+            onMouseleave: onLeave,
+            onFocusin: onFocusIn,
+            onFocusout: onFocusOut
+          }, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ], 34)
+        ]),
+        default: withCtx(({ side }) => [
+          createElementVNode("div", {
+            class: "tx-tooltip",
+            "data-side": side,
+            role: "tooltip",
+            style: normalizeStyle(tooltipVars.value),
+            onMouseenter: onFloatingEnter,
+            onMouseleave: onFloatingLeave
+          }, [
+            createElementVNode("div", _hoisted_2, [
+              renderSlot(_ctx.$slots, "content", { side }, () => [
+                createTextVNode(toDisplayString(props.content), 1)
+              ], true)
+            ])
+          ], 44, _hoisted_1)
+        ]),
+        _: 3
+      }, 16, ["modelValue", "disabled"]);
     };
   }
 });

package/dist/es/tooltip/src/types.d.ts

@@ -1,23 +1,18 @@
-export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+import { BaseAnchorProps } from '../../base-anchor/src/types';
+
+export type TooltipAnchorProps = Omit<BaseAnchorProps, 'modelValue' | 'disabled'>;
 export interface TooltipProps {
     modelValue?: boolean;
     content?: string;
     disabled?: boolean;
     trigger?: 'hover' | 'click' | 'focus';
-    placement?: TooltipPlacement;
-    offset?: number;
     openDelay?: number;
     closeDelay?: number;
-    maxWidth?: number;
-    showArrow?: boolean;
-    arrowSize?: number;
+    maxHeight?: number;
+    referenceFullWidth?: boolean;
     interactive?: boolean;
+    keepAliveContent?: boolean;
     closeOnClickOutside?: boolean;
-    motion?: 'fade' | 'split';
-    fusion?: boolean;
-    panelVariant?: 'solid' | 'dashed' | 'plain';
-    panelBackground?: 'blur' | 'glass' | 'mask';
-    panelShadow?: 'none' | 'soft' | 'medium';
-    panelRadius?: number;
-    panelPadding?: number;
+    toggleOnReferenceClick?: boolean;
+    anchor?: Partial<TooltipAnchorProps>;
 }