srcdev-nuxt-components 9.2.4 → 9.2.6

package/app/components/layout-grids/LayoutGridA.vue

@@ -23,83 +23,83 @@ const props = defineProps({
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
+});
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough)
+    resetElementClasses(props.styleClassPassthrough);
   }
-)
+);
 </script>
 
 <style lang="css">
 @layer components {
-.layout-grid-a-wrapper {
-  container-type: inline-size;
+  .layout-grid-a-wrapper {
+    container-type: inline-size;
 
-  .layout-grid-a {
-    display: grid;
-    gap: 20px;
+    .layout-grid-a {
+      display: grid;
+      gap: 20px;
 
-    & > div {
-      padding: 20px;
-      outline: 1px solid light-dark(black, white);
-      border-radius: 5px;
-    }
-
-    @container (min-width: 768px) {
-      grid-template-columns: repeat(2, auto);
-      grid-template-rows: repeat(3, auto);
-
-      .slot1 {
-        grid-column: 1 / span 2;
-        grid-row: 1;
-      }
-
-      .slot2 {
-        grid-column: 1 / span 2;
-        grid-row: 2;
-      }
-
-      .slot3 {
-        grid-column: 1;
-        grid-row: 3;
-      }
-
-      .slot4 {
-        grid-column: 2;
-        grid-row: 3;
-      }
-    }
-
-    @container (min-width: 1060px) {
-      grid-template-columns: repeat(3, auto);
-      grid-template-rows: repeat(2, auto);
-
-      .slot1 {
-        grid-column: 1;
-        grid-row: 1 / span 2;
-      }
-
-      .slot2 {
-        grid-column: 2 / span 2;
-        grid-row: 1;
+      & > div {
+        padding: 20px;
+        outline: 1px solid light-dark(black, white);
+        border-radius: 5px;
       }
 
-      .slot3 {
-        grid-column: 2;
-        grid-row: 2;
+      @container (min-width: 768px) {
+        grid-template-columns: repeat(2, auto);
+        grid-template-rows: repeat(3, auto);
+
+        .slot1 {
+          grid-column: 1 / span 2;
+          grid-row: 1;
+        }
+
+        .slot2 {
+          grid-column: 1 / span 2;
+          grid-row: 2;
+        }
+
+        .slot3 {
+          grid-column: 1;
+          grid-row: 3;
+        }
+
+        .slot4 {
+          grid-column: 2;
+          grid-row: 3;
+        }
       }
 
-      .slot4 {
-        grid-column: 3;
-        grid-row: 2;
+      @container (min-width: 1060px) {
+        grid-template-columns: repeat(3, auto);
+        grid-template-rows: repeat(2, auto);
+
+        .slot1 {
+          grid-column: 1;
+          grid-row: 1 / span 2;
+        }
+
+        .slot2 {
+          grid-column: 2 / span 2;
+          grid-row: 1;
+        }
+
+        .slot3 {
+          grid-column: 2;
+          grid-row: 2;
+        }
+
+        .slot4 {
+          grid-column: 3;
+          grid-row: 2;
+        }
       }
     }
   }
 }
-}
 </style>

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

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { nextTick, ref } from "vue";
+import { useContainerBreakpoints } from "../useContainerBreakpoints";
+
+let resizeCallback: ResizeObserverCallback | null = null;
+
+beforeEach(() => {
+  resizeCallback = null;
+  vi.stubGlobal(
+    "ResizeObserver",
+    vi.fn((callback: ResizeObserverCallback) => {
+      resizeCallback = callback;
+      return {
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+      };
+    })
+  );
+});
+
+function triggerResize(el: HTMLElement, width: number) {
+  Object.defineProperty(el, "offsetWidth", { value: width, configurable: true });
+  resizeCallback?.(
+    [{ contentRect: { width, height: 0 } } as unknown as ResizeObserverEntry],
+    {} as ResizeObserver
+  );
+}
+
+describe("useContainerBreakpoints", () => {
+  it("defaults active to base when narrower than the smallest breakpoint", () => {
+    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const { active } = useContainerBreakpoints(undefined, el);
+    expect(active.value).toBe("base");
+  });
+
+  it("updates active as the observed element's width crosses breakpoints", async () => {
+    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const { active } = useContainerBreakpoints(undefined, el);
+
+    triggerResize(el.value as HTMLElement, 700);
+    await nextTick();
+    expect(active.value).toBe("sm");
+
+    triggerResize(el.value as HTMLElement, 1300);
+    await nextTick();
+    expect(active.value).toBe("xl");
+  });
+
+  it("greaterOrEqual/smaller reflect the current width against a named breakpoint", async () => {
+    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const { greaterOrEqual, smaller } = useContainerBreakpoints(undefined, el);
+    const isLg = greaterOrEqual("lg");
+    const isSmallerThanMd = smaller("md");
+
+    expect(isLg.value).toBe(false);
+    expect(isSmallerThanMd.value).toBe(true);
+
+    triggerResize(el.value as HTMLElement, 1100);
+    await nextTick();
+    expect(isLg.value).toBe(true);
+    expect(isSmallerThanMd.value).toBe(false);
+  });
+
+  it("between returns true only within the [min, max) range", async () => {
+    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const { between } = useContainerBreakpoints(undefined, el);
+    const isTablet = between("sm", "lg");
+
+    triggerResize(el.value as HTMLElement, 800);
+    await nextTick();
+    expect(isTablet.value).toBe(true);
+
+    triggerResize(el.value as HTMLElement, 1024);
+    await nextTick();
+    expect(isTablet.value).toBe(false);
+  });
+
+  it("supports a custom breakpoints map", async () => {
+    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const { active } = useContainerBreakpoints({ narrow: 400, wide: 900 }, el);
+
+    triggerResize(el.value as HTMLElement, 500);
+    await nextTick();
+    expect(active.value).toBe("narrow");
+
+    triggerResize(el.value as HTMLElement, 950);
+    await nextTick();
+    expect(active.value).toBe("wide");
+  });
+});

package/app/composables/useContainerBreakpoints.ts

@@ -0,0 +1,71 @@
+import type { Ref } from "vue";
+import { useElementSize } from "@vueuse/core";
+
+export const containerBreakpointsDefault = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+  "4k": 2560,
+} as const;
+
+export type ContainerBreakpointName = keyof typeof containerBreakpointsDefault;
+
+/**
+ * useContainerBreakpoints composable
+ * Container-query equivalent of VueUse's useBreakpoints — tracks an element's
+ * own width via ResizeObserver instead of the viewport, for layouts where
+ * page decoration (nav, sidebars) means viewport width != available width.
+ * @param breakpoints - map of breakpoint name to min-width in px (default: containerBreakpointsDefault)
+ * @param target - optional existing element ref to observe; creates its own if omitted
+ * @returns { el, width, active, greater, greaterOrEqual, smaller, smallerOrEqual, between }
+ */
+export function useContainerBreakpoints<K extends string = ContainerBreakpointName>(
+  breakpoints: Record<K, number> = containerBreakpointsDefault as unknown as Record<K, number>,
+  target?: Ref<HTMLElement | null>
+) {
+  const el = target ?? ref<HTMLElement | null>(null);
+  const { width } = useElementSize(el);
+
+  const sortedEntries = (Object.entries(breakpoints) as [K, number][]).sort((a, b) => a[1] - b[1]);
+
+  function greaterOrEqual(name: K) {
+    return computed(() => width.value >= breakpoints[name]);
+  }
+
+  function greater(name: K) {
+    return computed(() => width.value > breakpoints[name]);
+  }
+
+  function smaller(name: K) {
+    return computed(() => width.value < breakpoints[name]);
+  }
+
+  function smallerOrEqual(name: K) {
+    return computed(() => width.value <= breakpoints[name]);
+  }
+
+  function between(min: K, max: K) {
+    return computed(() => width.value >= breakpoints[min] && width.value < breakpoints[max]);
+  }
+
+  const active = computed<K | "base">(() => {
+    let current: K | "base" = "base";
+    for (const [name, minWidth] of sortedEntries) {
+      if (width.value >= minWidth) current = name;
+    }
+    return current;
+  });
+
+  return {
+    el,
+    width,
+    active,
+    greater,
+    greaterOrEqual,
+    smaller,
+    smallerOrEqual,
+    between,
+  };
+}

package/app/layouts/default.vue

@@ -110,6 +110,7 @@ const responsiveNavLinks = {
         { name: "Layout Grid A", path: "/ui/layout-grid-a" },
         { name: "Layout Grid B", path: "/ui/layout-grid-b" },
         { name: "Simple Grid", path: "/ui/simple-grid" },
+        { name: "Layout Content Docs", path: "/ui/layout-content-docs" },
         { name: "Masonry Grid Simple", path: "/ui/masonry-grid" },
         { name: "Masonry Grid Sorted", path: "/ui/masonry-grid-sorted" },
         { name: "Masonry Grid Ordered", path: "/ui/masonry-grid-ordered" },