@talex-touch/tuffex 0.3.3 → 0.3.4

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

@@ -3,49 +3,64 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const vue = require('vue');
-const vue$1 = require('@floating-ui/vue');
-const TxCard = require('../../card/src/TxCard.vue.js');
+require('../../base-anchor/index.js');
+const TxBaseAnchor = require('../../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__ */ vue.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 = vue.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 = vue.ref(false);
     const open = vue.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");
@@ -53,322 +68,137 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           emit("close");
       }
     });
-    const referenceRef = vue.ref(null);
-    const floatingRef = vue.ref(null);
-    const arrowRef = vue.ref(null);
-    const cleanupAutoUpdate = vue.ref(null);
-    const lastOpenedAt = vue.ref(0);
-    const stablePlacement = vue.ref(null);
-    const splitX = vue.ref(0);
-    const splitY = vue.ref(0);
-    const motion = vue.computed(() => props.motion === "fade" ? "fade" : "split");
-    function getPlacementSide(v) {
-      return v.split("-")[0] ?? "bottom";
-    }
-    const popoverVars = vue.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 = vue.useId();
-    const gooFilterId = `tx-popover-goo-${uid}`;
-    const gooMatrixValues = vue.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 = vue.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 } = vue$1.useFloating(referenceRef, floatingRef, {
-      placement: vue.computed(() => props.placement),
-      strategy: "fixed",
-      transform: false,
-      middleware: [
-        vue$1.offset(() => props.offset),
-        vue$1.flip({ padding: 8 }),
-        vue$1.shift({ padding: 8 }),
-        vue$1.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`);
-          }
-        }),
-        vue$1.arrow({
-          element: vue.computed(() => arrowRef.value),
-          padding: 6
-        })
-      ]
-    });
-    const arrowSide = vue.computed(() => getPlacementSide(String(stablePlacement.value || placement.value || props.placement || "bottom")));
-    const arrowStyle = vue.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 = vue.computed(() => {
+      if (props.trigger !== "click")
+        return false;
+      return props.closeOnClickOutside;
+    });
+    const anchorDuration = vue.computed(() => Math.max(0, props.duration));
+    const anchorEase = vue.computed(() => "power2.out");
+    const anchorToggleOnReferenceClick = vue.computed(() => {
+      if (typeof props.toggleOnReferenceClick === "boolean")
+        return props.toggleOnReferenceClick;
+      return props.trigger === "click";
+    });
+    const anchorReferenceClass = vue.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;
+    });
     vue.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 vue.nextTick();
-        await update();
-        stablePlacement.value = placement.value;
-        if (referenceRef.value && floatingRef.value) {
-          cleanupAutoUpdate.value?.();
-          cleanupAutoUpdate.value = vue$1.autoUpdate(referenceRef.value, floatingRef.value, () => update());
-        }
-      },
-      { flush: "post" }
-    );
-    vue.onMounted(async () => {
-      document.addEventListener("pointerdown", handleOutside, true);
-      document.addEventListener("keydown", handleEsc);
-      await vue.nextTick();
-      if (referenceRef.value) {
-        await update();
+        clearTimers();
+        open.value = false;
       }
-    });
+    );
     vue.onBeforeUnmount(() => {
-      document.removeEventListener("pointerdown", handleOutside, true);
-      document.removeEventListener("keydown", handleEsc);
-      cleanupAutoUpdate.value?.();
-      cleanupAutoUpdate.value = null;
+      clearTimers();
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createElementVNode("div", {
-          ref_key: "referenceRef",
-          ref: referenceRef,
-          class: vue.normalizeClass(["tx-popover__reference", { "is-full-width": __props.referenceFullWidth }]),
-          onClickCapture: toggle
-        }, [
-          vue.renderSlot(_ctx.$slots, "reference", {}, void 0, true)
-        ], 34),
-        (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-          vue.createVNode(vue.Transition, {
-            name: "tx-popover",
-            onBeforeEnter
-          }, {
-            default: vue.withCtx(() => [
-              open.value && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 0,
-                ref_key: "floatingRef",
-                ref: floatingRef,
-                class: vue.normalizeClass(["tx-popover", [
-                  `is-bg-${__props.panelBackground}`,
-                  { "is-fusion": !!props.fusion, "is-motion-split": motion.value === "split" }
-                ]]),
-                "data-side": arrowSide.value,
-                style: vue.normalizeStyle([vue.unref(floatingStyles), popoverVars.value])
-              }, [
-                (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2, [
-                  vue.createElementVNode("defs", null, [
-                    vue.createElementVNode("filter", { id: gooFilterId }, [
-                      _cache[0] || (_cache[0] = vue.createElementVNode("feGaussianBlur", {
-                        in: "SourceGraphic",
-                        stdDeviation: "12",
-                        result: "blur"
-                      }, null, -1)),
-                      vue.createElementVNode("feColorMatrix", {
-                        in: "blur",
-                        mode: "matrix",
-                        values: gooMatrixValues.value,
-                        result: "goo"
-                      }, null, 8, _hoisted_3),
-                      _cache[1] || (_cache[1] = vue.createElementVNode("feComposite", {
-                        in: "SourceGraphic",
-                        in2: "goo",
-                        operator: "atop"
-                      }, null, -1))
-                    ])
-                  ])
-                ])),
-                props.showArrow ? (vue.openBlock(), vue.createElementBlock("div", {
-                  key: 0,
-                  ref_key: "arrowRef",
-                  ref: arrowRef,
-                  class: "tx-popover__arrow",
-                  "data-side": arrowSide.value,
-                  style: vue.normalizeStyle(arrowStyle.value),
-                  "aria-hidden": "true"
-                }, null, 12, _hoisted_4)) : vue.createCommentVNode("", true),
-                props.fusion && motion.value === "split" ? (vue.openBlock(), vue.createElementBlock("div", {
-                  key: 1,
-                  class: "tx-popover__fusion",
-                  style: vue.normalizeStyle(fusionVars.value),
-                  "aria-hidden": "true"
-                }, [
-                  vue.createElementVNode("div", {
-                    class: "tx-popover__fusion-goo",
-                    style: vue.normalizeStyle({ filter: `url(#${gooFilterId})` })
-                  }, [..._cache[2] || (_cache[2] = [
-                    vue.createElementVNode("div", { class: "tx-popover__fusion-blob tx-popover__fusion-blob--tip" }, null, -1),
-                    vue.createElementVNode("div", { class: "tx-popover__fusion-blob tx-popover__fusion-blob--ref" }, null, -1)
-                  ])], 4)
-                ], 4)) : vue.createCommentVNode("", true),
-                vue.createVNode(TxCard.default, {
-                  class: "tx-popover__card",
-                  variant: __props.panelVariant,
-                  background: __props.panelBackground,
-                  shadow: __props.panelShadow,
-                  radius: __props.panelRadius,
-                  padding: __props.panelPadding
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-                  ]),
-                  _: 3
-                }, 8, ["variant", "background", "shadow", "radius", "padding"])
-              ], 14, _hoisted_1)) : vue.createCommentVNode("", true)
-            ]),
-            _: 3
-          })
-        ]))
-      ], 64);
+      return vue.openBlock(), vue.createBlock(vue.unref(TxBaseAnchor.default), {
+        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: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["tx-popover__reference", { "is-full-width": props.referenceFullWidth }]),
+            onMouseenter: onReferenceEnter,
+            onMouseleave: onReferenceLeave,
+            onFocusin: onReferenceEnter,
+            onFocusout: onReferenceLeave
+          }, [
+            vue.renderSlot(_ctx.$slots, "reference", {}, void 0, true)
+          ], 34)
+        ]),
+        default: vue.withCtx(({ side }) => [
+          vue.createElementVNode("div", {
+            class: "tx-popover__content",
+            "data-side": side,
+            onMouseenter: onFloatingEnter,
+            onMouseleave: onFloatingLeave
+          }, [
+            vue.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/lib/progress-bar/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const withInstall = require('../utils/withInstall.js');
+const withInstall = require('../packages/tuffex/packages/utils/withInstall.js');
 const TxProgressBar_vue_vue_type_script_setup_true_lang = require('./src/TxProgressBar.vue.js');
 ;/* empty css                        */
 

package/dist/lib/radio/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const withInstall = require('../utils/withInstall.js');
+const withInstall = require('../packages/tuffex/packages/utils/withInstall.js');
 const TxRadio = require('./src/TxRadio.vue.js');
 const TxRadioGroup = require('./src/TxRadioGroup.vue.js');
 

package/dist/lib/radio/src/TxRadioGroup.vue2.js

@@ -3,7 +3,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const vue = require('vue');
-const env = require('../../utils/env.js');
+const env = require('../../packages/tuffex/packages/utils/env.js');
 require('../../glass-surface/index.js');
 const TxGlassSurface_vue_vue_type_script_setup_true_lang = require('../../glass-surface/src/TxGlassSurface.vue.js');
 ;/* empty css                                           */

package/dist/lib/scroll/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const withInstall = require('../utils/withInstall.js');
+const withInstall = require('../packages/tuffex/packages/utils/withInstall.js');
 const TxScroll$1 = require('./src/TxScroll.vue.js');
 
 const TxScroll = withInstall.withInstall(TxScroll$1.default);

package/dist/lib/scroll/src/TxScroll.vue.js

@@ -6,6 +6,6 @@ const TxScroll_vue_vue_type_script_setup_true_lang = require('./TxScroll.vue2.js
 ;/* empty css               */
 const _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
 
-const TxScrollVue = /* @__PURE__ */ _pluginVue_exportHelper.default(TxScroll_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-d20cd808"]]);
+const TxScrollVue = /* @__PURE__ */ _pluginVue_exportHelper.default(TxScroll_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-14da442b"]]);
 
 exports.default = TxScrollVue;