@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/es/popover/src/TxPopover.vue2.js

@@ -1,47 +1,62 @@
-import { defineComponent, computed, ref, useId, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, Fragment, createElementVNode, createBlock, normalizeClass, renderSlot, Teleport, createVNode, Transition, withCtx, createCommentVNode, normalizeStyle, unref } from 'vue';
-import { useFloating, offset, flip, shift, size, arrow, autoUpdate } from '@floating-ui/vue';
-import TxCard from '../../card/src/TxCard.vue.js';
+import { defineComponent, computed, ref, watch, onBeforeUnmount, createBlock, openBlock, unref, withCtx, createElementVNode, renderSlot, 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-popover__fusion-filters",
-  width: "0",
-  height: "0",
-  "aria-hidden": "true"
-};
-const _hoisted_3 = ["values"];
-const _hoisted_4 = ["data-side"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "TxPopover" },
   __name: "TxPopover",
   props: {
-    modelValue: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: void 0 },
     disabled: { type: Boolean, default: false },
+    eager: { type: Boolean, default: false },
     placement: { default: "bottom-start" },
-    offset: { default: 8 },
+    offset: {},
     width: { default: 0 },
     minWidth: { default: 0 },
     maxWidth: { default: 360 },
+    maxHeight: { default: 420 },
+    unlimitedHeight: { type: Boolean, default: false },
     referenceFullWidth: { type: Boolean, default: false },
-    showArrow: { type: Boolean, default: false },
+    referenceClass: {},
+    showArrow: { type: Boolean, default: true },
     arrowSize: { default: 12 },
-    motion: { default: "split" },
-    fusion: { type: Boolean, default: false },
+    trigger: { default: "click" },
+    openDelay: { default: 120 },
+    closeDelay: { default: 100 },
+    duration: { default: 180 },
+    keepAliveContent: { type: Boolean, default: true },
+    toggleOnReferenceClick: { type: Boolean },
     panelVariant: { default: "solid" },
-    panelBackground: { default: "blur" },
+    panelBackground: { default: "refraction" },
     panelShadow: { default: "soft" },
     panelRadius: { default: 18 },
     panelPadding: { default: 10 },
+    panelCard: {},
     closeOnClickOutside: { type: Boolean, default: true },
     closeOnEsc: { type: Boolean, default: true }
   },
   emits: ["update:modelValue", "open", "close"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const resolvedOffset = computed(() => {
+      if (typeof props.offset === "number")
+        return props.offset;
+      if (props.showArrow)
+        return Math.max(8, Math.round((props.arrowSize ?? 12) * 0.5) + 2);
+      return 2;
+    });
     const emit = __emit;
+    const internalOpen = ref(false);
     const open = computed({
-      get: () => !!props.modelValue,
+      get: () => typeof props.modelValue === "boolean" ? props.modelValue : internalOpen.value,
       set: (v) => {
+        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);
         if (v)
           emit("open");
@@ -49,322 +64,137 @@ 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 splitX = ref(0);
-    const splitY = ref(0);
-    const motion = computed(() => props.motion === "fade" ? "fade" : "split");
-    function getPlacementSide(v) {
-      return v.split("-")[0] ?? "bottom";
-    }
-    const popoverVars = computed(() => {
-      const side = getPlacementSide(String(stablePlacement.value || placement.value || props.placement || "bottom"));
-      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-popover-arrow-size": `${props.arrowSize}px`,
-        "--tx-popover-radius": `${props.panelRadius}px`,
-        "--tx-popover-split-x": `${splitX.value}px`,
-        "--tx-popover-split-y": `${splitY.value}px`,
-        "--tx-popover-fusion-x": fusionX,
-        "--tx-popover-fusion-y": fusionY
-      };
-    });
-    const uid = useId();
-    const gooFilterId = `tx-popover-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-popover-goo-out": `${out}px`,
-        "--tx-popover-goo-size": `${size2}px`
-      };
-    });
-    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({ rects, availableHeight, elements }) {
-            const baseW = rects.reference.width;
-            const minW = Math.max(0, props.minWidth ?? 0);
-            const w = props.width > 0 ? props.width : Math.max(baseW, minW);
-            const maxH = Math.min(availableHeight, 420);
-            Object.assign(elements.floating.style, {
-              width: `${w}px`,
-              maxWidth: `${props.maxWidth}px`
-            });
-            elements.floating.style.setProperty("--tx-popover-max-height", `${maxH}px`);
-          }
-        }),
-        arrow({
-          element: computed(() => arrowRef.value),
-          padding: 6
-        })
-      ]
-    });
-    const arrowSide = computed(() => getPlacementSide(String(stablePlacement.value || placement.value || props.placement || "bottom")));
-    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 = arrowSide.value;
-      const base = {
-        display: "block",
-        position: "absolute"
-      };
-      if (x != null)
-        base.left = `${x}px`;
-      if (y != null)
-        base.top = `${y}px`;
-      const staticSideMap = {
-        top: "bottom",
-        right: "left",
-        bottom: "top",
-        left: "right"
-      };
-      const staticSide = side in staticSideMap ? staticSideMap[side] : "top";
-      const half = Math.round((props.arrowSize || 12) / 2);
-      base[staticSide] = `calc(-${half}px + 1px)`;
-      return base;
-    });
-    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;
+    let openTimer = null;
+    let closeTimer = null;
+    function clearTimers() {
+      if (openTimer != null)
+        window.clearTimeout(openTimer);
+      if (closeTimer != null)
+        window.clearTimeout(closeTimer);
+      openTimer = null;
+      closeTimer = null;
     }
-    function toggle() {
+    function scheduleOpen() {
       if (props.disabled)
         return;
-      if (!open.value)
-        lastOpenedAt.value = performance.now();
-      open.value = !open.value;
+      clearTimers();
+      openTimer = window.setTimeout(() => {
+        open.value = true;
+      }, Math.max(0, props.openDelay));
     }
-    function close() {
-      open.value = false;
+    function scheduleClose() {
+      clearTimers();
+      closeTimer = window.setTimeout(() => {
+        open.value = false;
+      }, Math.max(0, props.closeDelay));
     }
-    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 (!open.value)
-        return;
-      if (performance.now() - lastOpenedAt.value < 60)
+    function onReferenceEnter() {
+      if (props.trigger !== "hover")
         return;
-      const inRef = isEventInside(e, referenceRef.value);
-      const inFloat = isEventInside(e, floatingRef.value);
-      if (!inRef && !inFloat)
-        close();
+      scheduleOpen();
     }
-    function handleEsc(e) {
-      if (!props.closeOnEsc)
+    function onReferenceLeave() {
+      if (props.trigger !== "hover")
         return;
-      if (e.key !== "Escape")
+      scheduleClose();
+    }
+    function onFloatingEnter() {
+      if (props.trigger !== "hover")
         return;
-      if (!open.value)
+      clearTimers();
+    }
+    function onFloatingLeave() {
+      if (props.trigger !== "hover")
         return;
-      close();
+      scheduleClose();
     }
+    const anchorCloseOnClickOutside = computed(() => {
+      if (props.trigger !== "click")
+        return false;
+      return props.closeOnClickOutside;
+    });
+    const anchorDuration = computed(() => Math.max(0, props.duration));
+    const anchorEase = computed(() => "power2.out");
+    const anchorToggleOnReferenceClick = computed(() => {
+      if (typeof props.toggleOnReferenceClick === "boolean")
+        return props.toggleOnReferenceClick;
+      return props.trigger === "click";
+    });
+    const anchorReferenceClass = computed(() => {
+      const classes = [];
+      if (props.referenceClass) {
+        classes.push(props.referenceClass);
+      }
+      if (props.referenceFullWidth) {
+        classes.push({ "is-full-width": true });
+      }
+      return classes.length ? classes : void 0;
+    });
     watch(
-      open,
-      async (v) => {
-        if (!v) {
-          stablePlacement.value = null;
-          cleanupAutoUpdate.value?.();
-          cleanupAutoUpdate.value = null;
+      () => props.disabled,
+      (disabled) => {
+        if (!disabled)
           return;
-        }
-        lastOpenedAt.value = performance.now();
-        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", handleEsc);
-      await nextTick();
-      if (referenceRef.value) {
-        await update();
+        clearTimers();
+        open.value = false;
       }
-    });
+    );
     onBeforeUnmount(() => {
-      document.removeEventListener("pointerdown", handleOutside, true);
-      document.removeEventListener("keydown", handleEsc);
-      cleanupAutoUpdate.value?.();
-      cleanupAutoUpdate.value = null;
+      clearTimers();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", {
-          ref_key: "referenceRef",
-          ref: referenceRef,
-          class: normalizeClass(["tx-popover__reference", { "is-full-width": __props.referenceFullWidth }]),
-          onClickCapture: toggle
-        }, [
-          renderSlot(_ctx.$slots, "reference", {}, void 0, true)
-        ], 34),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createVNode(Transition, {
-            name: "tx-popover",
-            onBeforeEnter
-          }, {
-            default: withCtx(() => [
-              open.value && !__props.disabled ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "floatingRef",
-                ref: floatingRef,
-                class: normalizeClass(["tx-popover", [
-                  `is-bg-${__props.panelBackground}`,
-                  { "is-fusion": !!props.fusion, "is-motion-split": motion.value === "split" }
-                ]]),
-                "data-side": arrowSide.value,
-                style: normalizeStyle([unref(floatingStyles), popoverVars.value])
-              }, [
-                (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-popover__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-popover__fusion",
-                  style: normalizeStyle(fusionVars.value),
-                  "aria-hidden": "true"
-                }, [
-                  createElementVNode("div", {
-                    class: "tx-popover__fusion-goo",
-                    style: normalizeStyle({ filter: `url(#${gooFilterId})` })
-                  }, [..._cache[2] || (_cache[2] = [
-                    createElementVNode("div", { class: "tx-popover__fusion-blob tx-popover__fusion-blob--tip" }, null, -1),
-                    createElementVNode("div", { class: "tx-popover__fusion-blob tx-popover__fusion-blob--ref" }, null, -1)
-                  ])], 4)
-                ], 4)) : createCommentVNode("", true),
-                createVNode(TxCard, {
-                  class: "tx-popover__card",
-                  variant: __props.panelVariant,
-                  background: __props.panelBackground,
-                  shadow: __props.panelShadow,
-                  radius: __props.panelRadius,
-                  padding: __props.panelPadding
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "default", {}, void 0, true)
-                  ]),
-                  _: 3
-                }, 8, ["variant", "background", "shadow", "radius", "padding"])
-              ], 14, _hoisted_1)) : createCommentVNode("", true)
-            ]),
-            _: 3
-          })
-        ]))
-      ], 64);
+      return openBlock(), createBlock(unref(TxBaseAnchor), {
+        modelValue: open.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+        disabled: props.disabled,
+        eager: props.eager,
+        placement: props.placement,
+        offset: resolvedOffset.value,
+        width: props.width,
+        "min-width": props.minWidth,
+        "max-width": props.maxWidth,
+        "max-height": props.maxHeight,
+        "unlimited-height": props.unlimitedHeight,
+        "match-reference-width": props.width <= 0,
+        duration: anchorDuration.value,
+        ease: anchorEase.value,
+        "panel-variant": props.panelVariant,
+        "panel-background": props.panelBackground,
+        "panel-shadow": props.panelShadow,
+        "panel-radius": props.panelRadius,
+        "panel-padding": props.panelPadding,
+        "panel-card": props.panelCard,
+        "show-arrow": props.showArrow,
+        "arrow-size": props.arrowSize,
+        "keep-alive-content": props.keepAliveContent,
+        "close-on-click-outside": anchorCloseOnClickOutside.value,
+        "close-on-esc": props.closeOnEsc,
+        "toggle-on-reference-click": anchorToggleOnReferenceClick.value,
+        "reference-class": anchorReferenceClass.value
+      }, {
+        reference: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(["tx-popover__reference", { "is-full-width": props.referenceFullWidth }]),
+            onMouseenter: onReferenceEnter,
+            onMouseleave: onReferenceLeave,
+            onFocusin: onReferenceEnter,
+            onFocusout: onReferenceLeave
+          }, [
+            renderSlot(_ctx.$slots, "reference", {}, void 0, true)
+          ], 34)
+        ]),
+        default: withCtx(({ side }) => [
+          createElementVNode("div", {
+            class: "tx-popover__content",
+            "data-side": side,
+            onMouseenter: onFloatingEnter,
+            onMouseleave: onFloatingLeave
+          }, [
+            renderSlot(_ctx.$slots, "default", { side }, void 0, true)
+          ], 40, _hoisted_1)
+        ]),
+        _: 3
+      }, 8, ["modelValue", "disabled", "eager", "placement", "offset", "width", "min-width", "max-width", "max-height", "unlimited-height", "match-reference-width", "duration", "ease", "panel-variant", "panel-background", "panel-shadow", "panel-radius", "panel-padding", "panel-card", "show-arrow", "arrow-size", "keep-alive-content", "close-on-click-outside", "close-on-esc", "toggle-on-reference-click", "reference-class"]);
     };
   }
 });

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

@@ -1,22 +1,33 @@
+import { BaseAnchorClassValue, BaseAnchorPanelCardProps } from '../../base-anchor/src/types';
+
 export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export interface PopoverProps {
     modelValue?: boolean;
     disabled?: boolean;
+    eager?: boolean;
     placement?: PopoverPlacement;
     offset?: number;
     width?: number;
     minWidth?: number;
     maxWidth?: number;
+    maxHeight?: number;
+    unlimitedHeight?: boolean;
     referenceFullWidth?: boolean;
+    referenceClass?: BaseAnchorClassValue;
     showArrow?: boolean;
     arrowSize?: number;
-    motion?: 'fade' | 'split';
-    fusion?: boolean;
+    trigger?: 'click' | 'hover';
+    openDelay?: number;
+    closeDelay?: number;
+    duration?: number;
+    keepAliveContent?: boolean;
+    toggleOnReferenceClick?: boolean;
     panelVariant?: 'solid' | 'dashed' | 'plain';
-    panelBackground?: 'blur' | 'glass' | 'mask';
+    panelBackground?: 'pure' | 'mask' | 'blur' | 'glass' | 'refraction';
     panelShadow?: 'none' | 'soft' | 'medium';
     panelRadius?: number;
     panelPadding?: number;
+    panelCard?: BaseAnchorPanelCardProps;
     closeOnClickOutside?: boolean;
     closeOnEsc?: boolean;
 }