srcdev-nuxt-components 9.6.13 → 9.6.15

package/app/composables/tests/useSlidingIndicator.spec.ts

@@ -0,0 +1,143 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { ref } from "vue";
+import useSlidingIndicator from "../useSlidingIndicator";
+
+const box = (props: Partial<Record<"offsetLeft" | "offsetTop" | "offsetWidth" | "offsetHeight", number>>) => {
+  const element = document.createElement("div");
+  Object.entries(props).forEach(([key, value]) => Object.defineProperty(element, key, { value }));
+  return element;
+};
+
+const container = (width = 500, height = 300) => {
+  const element = document.createElement("div");
+  Object.defineProperty(element, "clientWidth", { value: width });
+  Object.defineProperty(element, "clientHeight", { value: height });
+  return element;
+};
+
+const vars = (element: HTMLElement, name: string) => ({
+  start: element.style.getPropertyValue(`--_${name}-start`),
+  end: element.style.getPropertyValue(`--_${name}-end`),
+  duration: element.style.getPropertyValue(`--_${name}-duration`),
+  startDelay: element.style.getPropertyValue(`--_${name}-start-delay`),
+  endDelay: element.style.getPropertyValue(`--_${name}-end-delay`),
+});
+
+const originalMatchMedia = window.matchMedia;
+
+const stubReducedMotion = (matches: boolean) => {
+  window.matchMedia = vi.fn(() => ({ matches }) as MediaQueryList);
+};
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  window.matchMedia = originalMatchMedia;
+});
+
+describe("useSlidingIndicator", () => {
+  it("snaps the first placement and writes the edges as insets", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    const ms = place("active", box({ offsetLeft: 100, offsetWidth: 50 }), true);
+
+    expect(ms).toBe(0);
+    expect(vars(track, "active")).toEqual({ start: "100px", end: "350px", duration: "0ms", startDelay: "0ms", endDelay: "0ms" });
+  });
+
+  it("moving forward sends the end edge first and delays the start edge", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    const ms = place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true);
+
+    expect(ms).toBe(200);
+    expect(vars(track, "active")).toEqual({ start: "300px", end: "100px", duration: "200ms", startDelay: "200ms", endDelay: "0ms" });
+  });
+
+  it("moving backward sends the start edge first and delays the end edge", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true);
+    place("active", box({ offsetLeft: 100, offsetWidth: 100 }), true);
+
+    expect(vars(track, "active")).toMatchObject({ startDelay: "0ms", endDelay: "200ms" });
+  });
+
+  it("snaps when animate is false", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    expect(place("active", box({ offsetLeft: 300, offsetWidth: 100 }), false)).toBe(0);
+    expect(vars(track, "active")).toMatchObject({ duration: "0ms", startDelay: "0ms" });
+  });
+
+  it("snaps under prefers-reduced-motion", () => {
+    stubReducedMotion(true);
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    expect(place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true)).toBe(0);
+    expect(vars(track, "active").duration).toBe("0ms");
+  });
+
+  it("animates when reduced motion is not requested", () => {
+    stubReducedMotion(false);
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 150 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    expect(place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true)).toBe(150);
+  });
+
+  it("measures along the y axis", () => {
+    const track = container(500, 300);
+    const { place } = useSlidingIndicator(ref(track), { axis: "y", duration: 200 });
+
+    place("active", box({ offsetTop: 40, offsetHeight: 60 }), false);
+
+    expect(vars(track, "active")).toMatchObject({ start: "40px", end: "200px" });
+  });
+
+  it("tracks each named indicator separately", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    place("hover", box({ offsetLeft: 200, offsetWidth: 100 }), true);
+
+    expect(vars(track, "hover").duration).toBe("0ms");
+    expect(vars(track, "active").start).toBe("0px");
+  });
+
+  it("snaps again after reset", () => {
+    const track = container();
+    const { place, reset } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("hover", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    reset("hover");
+
+    expect(place("hover", box({ offsetLeft: 300, offsetWidth: 100 }), true)).toBe(0);
+  });
+
+  it("treats a negative or invalid duration as 0", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: Number.NaN });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    expect(place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true)).toBe(0);
+  });
+
+  it("returns null and writes nothing without a container or target", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    expect(place("active", null, true)).toBeNull();
+    expect(useSlidingIndicator(ref(null), { duration: 200 }).place("active", box({}), true)).toBeNull();
+    expect(track.style.getPropertyValue("--_active-start")).toBe("");
+  });
+});

package/app/composables/useSlidingIndicator.ts

@@ -0,0 +1,56 @@
+import type { MaybeRefOrGetter } from "vue";
+
+interface SlidingIndicatorOptions {
+  axis?: MaybeRefOrGetter<"x" | "y">;
+  duration: MaybeRefOrGetter<number>;
+}
+
+/**
+ * Positions sliding indicators inside a container by writing `--_{name}-start`, `-end`, `-duration`,
+ * `-start-delay` and `-end-delay` on it: the edges as insets from the container's start and end along
+ * the axis. On a move, the edge in the direction of travel goes first and the trailing edge follows
+ * one duration later, so the indicator stretches across and then catches up. Under
+ * `prefers-reduced-motion`, or with `animate: false` (mount, resize), both edges snap.
+ */
+const useSlidingIndicator = (containerRef: Ref<HTMLElement | null>, options: SlidingIndicatorOptions) => {
+  // Leading edge each indicator was last sent to, to tell the direction of the next move.
+  const lastStart = new Map<string, number>();
+
+  const prefersReducedMotion = () =>
+    typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+
+  /** Returns the transition length in ms, or `null` when there was nothing to place. */
+  const place = (name: string, target: HTMLElement | null | undefined, animate: boolean): number | null => {
+    const container = containerRef.value;
+    if (!container || !target) return null;
+
+    const vertical = toValue(options.axis) === "y";
+    const start = vertical ? target.offsetTop : target.offsetLeft;
+    const size = vertical ? target.offsetHeight : target.offsetWidth;
+    const end = (vertical ? container.clientHeight : container.clientWidth) - start - size;
+
+    const previous = lastStart.get(name);
+    const duration = Math.max(0, Number(toValue(options.duration)) || 0);
+    const ms = animate && previous !== undefined && !prefersReducedMotion() ? duration : 0;
+    const forward = previous !== undefined && start > previous;
+    const backward = previous !== undefined && start < previous;
+    lastStart.set(name, start);
+
+    container.style.setProperty(`--_${name}-duration`, ms + "ms");
+    container.style.setProperty(`--_${name}-start-delay`, forward ? ms + "ms" : "0ms");
+    container.style.setProperty(`--_${name}-end-delay`, backward ? ms + "ms" : "0ms");
+    container.style.setProperty(`--_${name}-start`, start + "px");
+    container.style.setProperty(`--_${name}-end`, end + "px");
+
+    return ms;
+  };
+
+  /** Forgets where an indicator was, so its next placement snaps instead of sliding in from there. */
+  const reset = (name: string) => {
+    lastStart.delete(name);
+  };
+
+  return { place, reset };
+};
+
+export default useSlidingIndicator;

package/app/composables/useTabs.ts

@@ -16,12 +16,10 @@ const useTabs = (
   const currentHoveredTab = ref<HTMLElement>();
 
   type IndicatorKind = "active" | "hovered";
-  // Leading edge (start along the axis) each indicator was last sent to, to tell the direction of a move.
-  const lastStart: Record<IndicatorKind, number | null> = { active: null, hovered: null };
   let coverageFrameId: number | null = null;
   let coverageUntil = 0;
 
-  const transitionMs = () => Math.max(0, Number(toValue(duration)) || 0);
+  const { place: placeEdges } = useSlidingIndicator(tabsNavRef, { axis, duration });
 
   const activeIndex = computed(() => {
     const index = currentActiveTab.value?.dataset.tabIndex;
@@ -144,36 +142,11 @@ const useTabs = (
     activateTab(targetTab);
   };
 
-  /**
-   * Sends an indicator's two edges to its target tab, as insets from the bar's start and end edges
-   * along the axis. On a move, the edge in the direction of travel goes first and the trailing edge
-   * follows one duration later, so the indicator stretches across and then catches up. CSS retargets
-   * each edge from wherever it is, so a quick second move never pulls an edge backwards.
-   * `animate: false` (mount, resize, tab-count change) snaps both edges.
-   */
+  // Edge motion lives in useSlidingIndicator; the CSS reads --_active-* and --_hovered-* off the bar.
   const placeIndicator = (kind: IndicatorKind, animate: boolean) => {
-    const nav = tabsNavRef.value;
     const target = indicatorTarget(kind === "active" ? currentActiveTab.value : currentHoveredTab.value);
-    if (!nav || !target) return;
-
-    const vertical = toValue(axis) === "y";
-    const start = vertical ? target.offsetTop : target.offsetLeft;
-    const size = vertical ? target.offsetHeight : target.offsetWidth;
-    const end = (vertical ? nav.clientHeight : nav.clientWidth) - start - size;
-
-    const previous = lastStart[kind];
-    const ms = animate && previous !== null ? transitionMs() : 0;
-    const forward = previous !== null && start > previous;
-    const backward = previous !== null && start < previous;
-    lastStart[kind] = start;
-
-    nav.style.setProperty(`--_${kind}-duration`, ms + "ms");
-    nav.style.setProperty(`--_${kind}-start-delay`, forward ? ms + "ms" : "0ms");
-    nav.style.setProperty(`--_${kind}-end-delay`, backward ? ms + "ms" : "0ms");
-    nav.style.setProperty(`--_${kind}-start`, start + "px");
-    nav.style.setProperty(`--_${kind}-end`, end + "px");
-
-    if (kind === "active") trackCoverage(ms * 2);
+    const ms = placeEdges(kind, target, animate);
+    if (ms !== null && kind === "active") trackCoverage(ms * 2);
   };
 
   // Marks each visible tab (and the overflow trigger) that the active indicator covers by at least half,

package/app/types/components/index.ts

@@ -27,3 +27,4 @@ export * from "./profile-section.d"
 export * from "./services-card.d"
 export * from "./google-reviews.d"
 export * from "./progress-tracker.d"
+export * from "./sliding-toggle.d"

package/app/types/components/sliding-toggle.d.ts

@@ -0,0 +1,5 @@
+export interface SlidingToggleOption<T extends string | number = string> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.13",
+  "version": "9.6.15",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",