@talex-touch/tuffex 0.3.3

package/dist/es/utils/animation/auto-resize.js

@@ -0,0 +1,393 @@
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+
+function useAutoResize(outerRef, innerRef, options = {}) {
+  const opt = {
+    width: options.width ?? true,
+    height: options.height ?? false,
+    applyStyle: options.applyStyle ?? true,
+    applyMode: options.applyMode ?? "sync",
+    styleTarget: options.styleTarget ?? "outer",
+    observeTarget: options.observeTarget ?? "inner",
+    rounding: options.rounding ?? "ceil",
+    immediate: options.immediate ?? true,
+    rafBatch: options.rafBatch ?? true,
+    durationMs: options.durationMs ?? 200,
+    easing: options.easing ?? "ease",
+    clearStyleOnFinish: options.clearStyleOnFinish ?? true,
+    onResize: options.onResize ?? (() => {
+    }),
+    onBeforeApply: options.onBeforeApply ?? (() => {
+    }),
+    onAfterApply: options.onAfterApply ?? (() => {
+    })
+  };
+  const size = ref(null);
+  const enabled = ref(true);
+  const ro = ref(null);
+  let rafId = null;
+  let rafPromise = null;
+  let rafPromiseResolve = null;
+  let microtaskPromise = null;
+  let microtaskPromiseResolve = null;
+  let pendingManual = false;
+  let activeApplyCleanup = null;
+  const round = (v) => {
+    switch (opt.rounding) {
+      case "none":
+        return v;
+      case "round":
+        return Math.round(v);
+      case "floor":
+        return Math.floor(v);
+      case "ceil":
+      default:
+        return Math.ceil(v);
+    }
+  };
+  const getTargets = () => {
+    const outer = outerRef.value;
+    const inner = innerRef.value;
+    const styleEl = opt.styleTarget === "outer" ? outer : inner;
+    return { outer, inner, styleEl };
+  };
+  const canWaapi = (el) => {
+    return typeof el.animate === "function";
+  };
+  const apply = (e, styleEl) => {
+    if (!opt.applyStyle)
+      return;
+    ro.value?.disconnect();
+    activeApplyCleanup?.();
+    activeApplyCleanup = null;
+    if (opt.applyMode === "sync") {
+      if (opt.width)
+        styleEl.style.width = `${e.next.width}px`;
+      if (opt.height)
+        styleEl.style.height = `${e.next.height}px`;
+      if (enabled.value)
+        start();
+      return;
+    }
+    const resolvedApplyMode = opt.applyMode === "auto" ? canWaapi(styleEl) ? "waapi" : "transition" : opt.applyMode;
+    const prev = e.prev;
+    if (!prev)
+      return;
+    const props = [];
+    if (opt.width && prev.width !== e.next.width)
+      props.push("width");
+    if (opt.height && prev.height !== e.next.height)
+      props.push("height");
+    if (props.length === 0)
+      return;
+    const prevWidth = styleEl.style.width;
+    const prevHeight = styleEl.style.height;
+    if (resolvedApplyMode === "waapi") {
+      if (!canWaapi(styleEl))
+        return;
+      if (props.includes("width"))
+        styleEl.style.width = `${prev.width}px`;
+      if (props.includes("height"))
+        styleEl.style.height = `${prev.height}px`;
+      const frames = [
+        {
+          ...props.includes("width") ? { width: `${prev.width}px` } : {},
+          ...props.includes("height") ? { height: `${prev.height}px` } : {}
+        },
+        {
+          ...props.includes("width") ? { width: `${e.next.width}px` } : {},
+          ...props.includes("height") ? { height: `${e.next.height}px` } : {}
+        }
+      ];
+      const anim = styleEl.animate(frames, {
+        duration: opt.durationMs,
+        easing: opt.easing,
+        fill: "forwards"
+      });
+      let finished2 = false;
+      const done2 = () => {
+        if (finished2)
+          return;
+        finished2 = true;
+        if (opt.clearStyleOnFinish) {
+          if (props.includes("width"))
+            styleEl.style.width = "";
+          if (props.includes("height"))
+            styleEl.style.height = "";
+        } else {
+          if (props.includes("width"))
+            styleEl.style.width = prevWidth;
+          if (props.includes("height"))
+            styleEl.style.height = prevHeight;
+        }
+      };
+      const onFinish = () => {
+        done2();
+        if (enabled.value)
+          start();
+      };
+      const onCancel = () => {
+        done2();
+        if (enabled.value)
+          start();
+      };
+      anim.addEventListener("finish", onFinish, { once: true });
+      anim.addEventListener("cancel", onCancel, { once: true });
+      activeApplyCleanup = () => {
+        anim.removeEventListener("finish", onFinish);
+        anim.removeEventListener("cancel", onCancel);
+        anim.cancel();
+        done2();
+        if (enabled.value)
+          start();
+      };
+      return;
+    }
+    const prevTransitionProperty = styleEl.style.transitionProperty;
+    const prevTransitionDuration = styleEl.style.transitionDuration;
+    const prevTransitionTimingFunction = styleEl.style.transitionTimingFunction;
+    styleEl.style.transitionProperty = props.join(",");
+    styleEl.style.transitionDuration = "0ms";
+    styleEl.style.transitionTimingFunction = opt.easing;
+    if (props.includes("width"))
+      styleEl.style.width = `${prev.width}px`;
+    if (props.includes("height"))
+      styleEl.style.height = `${prev.height}px`;
+    styleEl.offsetWidth;
+    styleEl.style.transitionDuration = `${opt.durationMs}ms`;
+    if (props.includes("width"))
+      styleEl.style.width = `${e.next.width}px`;
+    if (props.includes("height"))
+      styleEl.style.height = `${e.next.height}px`;
+    let finished = false;
+    const remaining = new Set(props);
+    let timeoutId = null;
+    const done = () => {
+      if (finished)
+        return;
+      finished = true;
+      styleEl.style.transitionProperty = prevTransitionProperty;
+      styleEl.style.transitionDuration = prevTransitionDuration;
+      styleEl.style.transitionTimingFunction = prevTransitionTimingFunction;
+      if (opt.clearStyleOnFinish) {
+        if (props.includes("width"))
+          styleEl.style.width = "";
+        if (props.includes("height"))
+          styleEl.style.height = "";
+      } else {
+        if (props.includes("width"))
+          styleEl.style.width = prevWidth;
+        if (props.includes("height"))
+          styleEl.style.height = prevHeight;
+      }
+    };
+    const onEnd = (ev) => {
+      if (ev.target !== styleEl)
+        return;
+      if (!props.includes(ev.propertyName))
+        return;
+      remaining.delete(ev.propertyName);
+      if (remaining.size > 0)
+        return;
+      styleEl.removeEventListener("transitionend", onEnd);
+      done();
+      if (enabled.value)
+        start();
+    };
+    styleEl.addEventListener("transitionend", onEnd);
+    if (typeof setTimeout !== "undefined") {
+      timeoutId = setTimeout(() => {
+        styleEl.removeEventListener("transitionend", onEnd);
+        done();
+        if (enabled.value)
+          start();
+      }, opt.durationMs + 34);
+    }
+    activeApplyCleanup = () => {
+      styleEl.removeEventListener("transitionend", onEnd);
+      if (timeoutId != null)
+        clearTimeout(timeoutId);
+      done();
+      if (enabled.value)
+        start();
+    };
+  };
+  const measureAndSync = async (isManual) => {
+    await nextTick();
+    const { inner, styleEl } = getTargets();
+    if (!inner || !styleEl)
+      return;
+    if (!enabled.value)
+      return;
+    const rect = inner.getBoundingClientRect();
+    let extraW = 0;
+    let extraH = 0;
+    if (styleEl !== inner) {
+      const cs = getComputedStyle(styleEl);
+      if (cs.boxSizing === "border-box") {
+        const px = Number.parseFloat(cs.paddingLeft) + Number.parseFloat(cs.paddingRight);
+        const py = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+        const bx = Number.parseFloat(cs.borderLeftWidth) + Number.parseFloat(cs.borderRightWidth);
+        const by = Number.parseFloat(cs.borderTopWidth) + Number.parseFloat(cs.borderBottomWidth);
+        extraW = (Number.isFinite(px) ? px : 0) + (Number.isFinite(bx) ? bx : 0);
+        extraH = (Number.isFinite(py) ? py : 0) + (Number.isFinite(by) ? by : 0);
+      }
+    }
+    const next = {
+      width: round(rect.width + extraW),
+      height: round(rect.height + extraH)
+    };
+    const prev = size.value;
+    const event = { prev, next, isManual };
+    size.value = next;
+    opt.onResize(event);
+    opt.onBeforeApply(event);
+    apply(event, styleEl);
+    opt.onAfterApply(event);
+  };
+  const measure = async (isManual = false) => {
+    await nextTick();
+    const { inner, styleEl } = getTargets();
+    if (!inner || !styleEl)
+      return null;
+    if (!enabled.value)
+      return null;
+    const rect = inner.getBoundingClientRect();
+    let extraW = 0;
+    let extraH = 0;
+    if (styleEl !== inner) {
+      const cs = getComputedStyle(styleEl);
+      if (cs.boxSizing === "border-box") {
+        const px = Number.parseFloat(cs.paddingLeft) + Number.parseFloat(cs.paddingRight);
+        const py = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+        const bx = Number.parseFloat(cs.borderLeftWidth) + Number.parseFloat(cs.borderRightWidth);
+        const by = Number.parseFloat(cs.borderTopWidth) + Number.parseFloat(cs.borderBottomWidth);
+        extraW = (Number.isFinite(px) ? px : 0) + (Number.isFinite(bx) ? bx : 0);
+        extraH = (Number.isFinite(py) ? py : 0) + (Number.isFinite(by) ? by : 0);
+      }
+    }
+    const next = {
+      width: round(rect.width + extraW),
+      height: round(rect.height + extraH)
+    };
+    const prev = size.value;
+    const event = { prev, next, isManual };
+    size.value = next;
+    opt.onResize(event);
+    return next;
+  };
+  const schedule = (isManual) => {
+    const cancelRaf = () => {
+      if (rafId != null)
+        cancelAnimationFrame(rafId);
+      rafId = null;
+      rafPromiseResolve?.();
+      rafPromiseResolve = null;
+      rafPromise = null;
+    };
+    if (isManual)
+      pendingManual = true;
+    if (!enabled.value)
+      return Promise.resolve();
+    if (!opt.rafBatch)
+      return measureAndSync(pendingManual);
+    if (!isManual) {
+      if (rafId != null)
+        cancelRaf();
+      if (microtaskPromise != null)
+        return microtaskPromise;
+      microtaskPromise = new Promise((resolve) => {
+        microtaskPromiseResolve = resolve;
+      });
+      const queue = typeof queueMicrotask === "function" ? queueMicrotask : (cb) => Promise.resolve().then(cb);
+      queue(() => {
+        const manual = pendingManual;
+        pendingManual = false;
+        void measureAndSync(manual).finally(() => {
+          microtaskPromiseResolve?.();
+          microtaskPromiseResolve = null;
+          microtaskPromise = null;
+        });
+      });
+      return microtaskPromise;
+    }
+    if (typeof requestAnimationFrame === "undefined")
+      return measureAndSync(pendingManual);
+    if (rafId != null)
+      return rafPromise ?? Promise.resolve();
+    rafPromise = new Promise((resolve) => {
+      rafPromiseResolve = resolve;
+    });
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      const manual = pendingManual;
+      pendingManual = false;
+      void measureAndSync(manual).finally(() => {
+        rafPromiseResolve?.();
+        rafPromiseResolve = null;
+        rafPromise = null;
+      });
+    });
+    return rafPromise;
+  };
+  const start = () => {
+    if (ro.value)
+      return;
+    const { outer, inner } = getTargets();
+    const targets = [];
+    if (opt.observeTarget === "inner") {
+      if (inner)
+        targets.push(inner);
+    } else if (opt.observeTarget === "outer") {
+      if (outer)
+        targets.push(outer);
+    } else {
+      if (inner)
+        targets.push(inner);
+      if (outer && outer !== inner)
+        targets.push(outer);
+    }
+    if (targets.length === 0)
+      return;
+    if (typeof ResizeObserver === "undefined")
+      return;
+    ro.value = new ResizeObserver(() => schedule(false));
+    for (const t of targets)
+      ro.value.observe(t);
+  };
+  const stop = () => {
+    ro.value?.disconnect();
+    ro.value = null;
+    if (rafId != null)
+      cancelAnimationFrame(rafId);
+    rafId = null;
+    rafPromiseResolve?.();
+    rafPromiseResolve = null;
+    rafPromise = null;
+    microtaskPromiseResolve?.();
+    microtaskPromiseResolve = null;
+    microtaskPromise = null;
+    pendingManual = false;
+    activeApplyCleanup?.();
+    activeApplyCleanup = null;
+  };
+  const setEnabled = (v) => {
+    enabled.value = v;
+    if (!v)
+      stop();
+    else start();
+  };
+  const refresh = async () => {
+    await schedule(true);
+  };
+  onMounted(async () => {
+    if (!enabled.value)
+      return;
+    start();
+    if (opt.immediate)
+      await measureAndSync(false);
+  });
+  onBeforeUnmount(() => stop());
+  return { refresh, measure, start, stop, setEnabled, size };
+}
+
+export { useAutoResize };

package/dist/es/utils/animation/flip.js

@@ -0,0 +1,177 @@
+import { ref, onBeforeUnmount, nextTick } from 'vue';
+
+function useFlip(targetRef, opts = {}) {
+  const running = ref(false);
+  const opt = {
+    duration: opts.duration ?? 200,
+    easing: opts.easing ?? "cubic-bezier(0.2, 0, 0, 1)",
+    mode: opts.mode ?? "transform",
+    includeScale: opts.includeScale ?? true,
+    size: opts.size ?? { width: true, height: true },
+    onBefore: opts.onBefore ?? (() => {
+    }),
+    onAfter: opts.onAfter ?? (() => {
+    })
+  };
+  let activeCleanup = null;
+  let lastMode = opt.mode;
+  const kill = () => {
+    const el = targetRef.value;
+    const shouldFreeze = running.value && el && lastMode === "size";
+    const freezeRect = shouldFreeze && el ? el.getBoundingClientRect() : null;
+    activeCleanup?.();
+    activeCleanup = null;
+    if (shouldFreeze && el && freezeRect) {
+      el.style.transitionProperty = "";
+      el.style.transitionDuration = "0ms";
+      el.style.transitionTimingFunction = "";
+      el.style.width = `${freezeRect.width}px`;
+      el.style.height = `${freezeRect.height}px`;
+      el.offsetWidth;
+    }
+    running.value = false;
+  };
+  onBeforeUnmount(kill);
+  const waitRaf = async () => {
+    if (typeof requestAnimationFrame === "undefined")
+      return;
+    await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  };
+  const forceReflow = (el) => {
+    el.offsetWidth;
+  };
+  async function flip(action) {
+    const el = targetRef.value;
+    if (!el) {
+      await action();
+      return;
+    }
+    kill();
+    running.value = true;
+    lastMode = opt.mode;
+    const first = el.getBoundingClientRect();
+    opt.onBefore();
+    await action();
+    await nextTick();
+    await waitRaf();
+    const last = el.getBoundingClientRect();
+    const dx = first.left - last.left;
+    const dy = first.top - last.top;
+    const nextWidth = last.width || 1;
+    const nextHeight = last.height || 1;
+    const dw = first.width / nextWidth;
+    const dh = first.height / nextHeight;
+    if (opt.mode === "transform") {
+      const prevTransitionProperty2 = el.style.transitionProperty;
+      const prevTransitionDuration2 = el.style.transitionDuration;
+      const prevTransitionTimingFunction2 = el.style.transitionTimingFunction;
+      const prevTransform = el.style.transform;
+      const prevTransformOrigin = el.style.transformOrigin;
+      el.style.transitionProperty = "transform";
+      el.style.transitionDuration = "0ms";
+      el.style.transitionTimingFunction = opt.easing;
+      el.style.transformOrigin = "top left";
+      const scalePart = opt.includeScale ? ` scale(${dw}, ${dh})` : "";
+      el.style.transform = `translate(${dx}px, ${dy}px)${scalePart}`;
+      forceReflow(el);
+      el.style.transitionDuration = `${opt.duration}ms`;
+      el.style.transform = `translate(0px, 0px)${opt.includeScale ? " scale(1, 1)" : ""}`;
+      const onEnd2 = (e) => {
+        if (e.propertyName !== "transform")
+          return;
+        el.removeEventListener("transitionend", onEnd2);
+        el.style.transitionProperty = prevTransitionProperty2;
+        el.style.transitionDuration = prevTransitionDuration2;
+        el.style.transitionTimingFunction = prevTransitionTimingFunction2;
+        el.style.transform = prevTransform;
+        el.style.transformOrigin = prevTransformOrigin;
+        opt.onAfter();
+        running.value = false;
+      };
+      el.addEventListener("transitionend", onEnd2);
+      activeCleanup = () => {
+        el.removeEventListener("transitionend", onEnd2);
+        el.style.transitionProperty = prevTransitionProperty2;
+        el.style.transitionDuration = prevTransitionDuration2;
+        el.style.transitionTimingFunction = prevTransitionTimingFunction2;
+        el.style.transform = prevTransform;
+        el.style.transformOrigin = prevTransformOrigin;
+      };
+      return;
+    }
+    const shouldWidth = opt.size?.width ?? true;
+    const shouldHeight = opt.size?.height ?? true;
+    const prevTransitionProperty = el.style.transitionProperty;
+    const prevTransitionDuration = el.style.transitionDuration;
+    const prevTransitionTimingFunction = el.style.transitionTimingFunction;
+    const prevWidth = el.style.width;
+    const prevHeight = el.style.height;
+    const props = [];
+    if (shouldWidth && first.width !== last.width)
+      props.push("width");
+    if (shouldHeight && first.height !== last.height)
+      props.push("height");
+    if (props.length === 0) {
+      opt.onAfter();
+      running.value = false;
+      return;
+    }
+    el.style.transitionProperty = props.join(",");
+    el.style.transitionDuration = "0ms";
+    el.style.transitionTimingFunction = opt.easing;
+    if (props.includes("width"))
+      el.style.width = `${first.width}px`;
+    if (props.includes("height"))
+      el.style.height = `${first.height}px`;
+    forceReflow(el);
+    el.style.transitionDuration = `${opt.duration}ms`;
+    if (props.includes("width"))
+      el.style.width = `${last.width}px`;
+    if (props.includes("height"))
+      el.style.height = `${last.height}px`;
+    let finished = false;
+    const remaining = new Set(props);
+    let timeoutId = null;
+    const done = () => {
+      if (finished)
+        return;
+      finished = true;
+      el.style.transitionProperty = prevTransitionProperty;
+      el.style.transitionDuration = prevTransitionDuration;
+      el.style.transitionTimingFunction = prevTransitionTimingFunction;
+      if (props.includes("width"))
+        el.style.width = prevWidth;
+      if (props.includes("height"))
+        el.style.height = prevHeight;
+      opt.onAfter();
+      running.value = false;
+    };
+    const onEnd = (e) => {
+      if (e.target !== el)
+        return;
+      if (!props.includes(e.propertyName))
+        return;
+      remaining.delete(e.propertyName);
+      if (remaining.size > 0)
+        return;
+      el.removeEventListener("transitionend", onEnd);
+      done();
+    };
+    el.addEventListener("transitionend", onEnd);
+    if (typeof setTimeout !== "undefined") {
+      timeoutId = setTimeout(() => {
+        el.removeEventListener("transitionend", onEnd);
+        done();
+      }, opt.duration + 34);
+    }
+    activeCleanup = () => {
+      el.removeEventListener("transitionend", onEnd);
+      if (timeoutId != null)
+        clearTimeout(timeoutId);
+      done();
+    };
+  }
+  return { flip, kill, running };
+}
+
+export { useFlip };

package/dist/es/utils/dialog-manager.js

@@ -0,0 +1,74 @@
+class DialogManager {
+  constructor() {
+    this.stack = [];
+  }
+  register(config) {
+    const existingIndex = this.stack.findIndex((d) => d.id === config.id);
+    if (existingIndex !== -1) {
+      this.unregister(config.id);
+    }
+    const currentVisible = this.getVisibleDialog();
+    if (currentVisible) {
+      this.hideDialog(currentVisible);
+    }
+    this.stack.push(config);
+    this.showDialog(config);
+  }
+  unregister(id) {
+    const index = this.stack.findIndex((d) => d.id === id);
+    if (index === -1)
+      return;
+    const [dialog] = this.stack.splice(index, 1);
+    if (!dialog)
+      return;
+    const wasVisible = index === this.stack.length;
+    dialog.onDestroy?.();
+    if (wasVisible && this.stack.length > 0) {
+      const nextVisible = this.getVisibleDialog();
+      if (nextVisible) {
+        this.showDialog(nextVisible);
+      }
+    }
+  }
+  getVisibleDialog() {
+    return this.stack.at(-1) ?? null;
+  }
+  getAllDialogs() {
+    return [...this.stack];
+  }
+  getStackSize() {
+    return this.stack.length;
+  }
+  clearAll() {
+    const dialogs = this.stack;
+    this.stack = [];
+    for (const dialog of dialogs) {
+      dialog.onDestroy?.();
+      dialog.cleanup?.();
+    }
+  }
+  showDialog(dialog) {
+    if (dialog.setVisible) {
+      dialog.setVisible(true);
+    } else if (dialog.container) {
+      dialog.container.style.display = "";
+    }
+    dialog.onShow?.();
+  }
+  hideDialog(dialog) {
+    if (dialog.setVisible) {
+      dialog.setVisible(false);
+    } else if (dialog.container) {
+      dialog.container.style.display = "none";
+    }
+    dialog.onHide?.();
+  }
+}
+let singleton = null;
+function getDialogManager() {
+  if (!singleton)
+    singleton = new DialogManager();
+  return singleton;
+}
+
+export { DialogManager, getDialogManager };

package/dist/es/utils/env.js

@@ -0,0 +1,11 @@
+function hasWindow() {
+  return typeof window !== "undefined";
+}
+function hasDocument() {
+  return typeof document !== "undefined";
+}
+function hasNavigator() {
+  return typeof navigator !== "undefined";
+}
+
+export { hasDocument, hasNavigator, hasWindow };

package/dist/es/utils/index.d.ts

@@ -0,0 +1 @@
+export * from '../../../utils';

package/dist/es/utils/toast.js

@@ -0,0 +1,43 @@
+import { reactive } from 'vue';
+
+const DEFAULT_DURATION = 2600;
+const toastStore = reactive({
+  items: []
+});
+function generateId() {
+  return `tx-toast-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+function toast(options) {
+  const id = options.id ?? generateId();
+  const duration = options.duration ?? DEFAULT_DURATION;
+  const existingIndex = toastStore.items.findIndex((t) => t.id === id);
+  if (existingIndex !== -1) {
+    toastStore.items.splice(existingIndex, 1);
+  }
+  const item = {
+    id,
+    title: options.title,
+    description: options.description,
+    variant: options.variant ?? "default",
+    duration,
+    createdAt: Date.now()
+  };
+  toastStore.items.push(item);
+  if (duration > 0) {
+    window.setTimeout(() => {
+      dismissToast(id);
+    }, duration);
+  }
+  return id;
+}
+function dismissToast(id) {
+  const index = toastStore.items.findIndex((t) => t.id === id);
+  if (index !== -1) {
+    toastStore.items.splice(index, 1);
+  }
+}
+function clearToasts() {
+  toastStore.items.splice(0, toastStore.items.length);
+}
+
+export { clearToasts, dismissToast, toast, toastStore };