srcdev-nuxt-components 9.1.37 → 9.1.38

package/.claude/skills/components/data-grid.md

@@ -0,0 +1,167 @@
+# DataGrid Component
+
+## Overview
+
+`DataGrid` is a responsive auto-fit CSS grid wrapper. It renders whatever named slots the consumer provides, auto-fitting columns to a minimum of `250px` each. Column count and gap are controlled via CSS custom properties, making layout adjustments a single-line style override rather than a prop change.
+
+---
+
+## Slot pattern
+
+Pass any number of named slots — the component renders each one in document order inside the grid.
+
+```vue
+<DataGrid>
+  <template #item-1><StatCard label="Revenue" value="£24,500" /></template>
+  <template #item-2><StatCard label="Clients" value="142" /></template>
+  <template #item-3><StatCard label="Bookings" value="38" /></template>
+</DataGrid>
+```
+
+When filling from a data array, use a dynamic slot name in a `v-for`:
+
+```vue
+<DataGrid>
+  <template v-for="(item, i) in stats" #[`item-${i}`] :key="i">
+    <StatCard :label="item.label" :value="item.value" />
+  </template>
+</DataGrid>
+```
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:style-class-passthrough`.
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | Use a semantic tag for page landmark regions. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root element. |
+
+---
+
+## CSS custom properties
+
+Override these via `style` attribute or a `styleClassPassthrough` class in a consuming `<style>` block.
+
+| Property | Default | Notes |
+|---|---|---|
+| `--data-grid-columns` | `repeat(auto-fit, minmax(250px, 1fr))` | Full `grid-template-columns` value. Override to fix column count or change min width. |
+| `--data-grid-gap` | `1rem` | Grid gap between items. |
+
+### Fixed column count
+
+```vue
+<DataGrid style="--data-grid-columns: repeat(3, 1fr); --data-grid-gap: 2.4rem;">
+  ...
+</DataGrid>
+```
+
+### Narrower minimum item width
+
+```vue
+<DataGrid style="--data-grid-columns: repeat(auto-fit, minmax(180px, 1fr));">
+  ...
+</DataGrid>
+```
+
+---
+
+## Usage examples
+
+### Stat cards (default auto-fit)
+
+```vue
+<DataGrid>
+  <template #revenue>
+    <div class="stat-card">
+      <span class="stat-card-label">Revenue</span>
+      <span class="stat-card-value">£24,500</span>
+    </div>
+  </template>
+  <template #clients>
+    <div class="stat-card">
+      <span class="stat-card-label">Clients</span>
+      <span class="stat-card-value">142</span>
+    </div>
+  </template>
+</DataGrid>
+```
+
+### Semantic section with auto aria-labelledby
+
+```vue
+<DataGrid tag="section">
+  <!-- aria-labelledby is wired automatically via useAriaLabelledById -->
+  <template #item-1><div>Item 1</div></template>
+  <template #item-2><div>Item 2</div></template>
+</DataGrid>
+```
+
+### Data-driven grid
+
+```vue
+<script setup lang="ts">
+const stats = [
+  { id: "revenue", label: "Revenue", value: "£24,500" },
+  { id: "clients", label: "Clients",  value: "142" },
+  { id: "bookings", label: "Bookings", value: "38" },
+];
+</script>
+
+<template>
+  <DataGrid>
+    <template v-for="stat in stats" #[stat.id] :key="stat.id">
+      <div class="stat-card">
+        <span class="stat-card-label">{{ stat.label }}</span>
+        <span class="stat-card-value">{{ stat.value }}</span>
+      </div>
+    </template>
+  </DataGrid>
+</template>
+```
+
+---
+
+## Accessibility
+
+- When `tag` is `section`, `article`, or `main`, `aria-labelledby` is automatically set via `useAriaLabelledById`, pointing to a generated heading ID.
+- When `tag="div"`, no ARIA attributes are added.
+- Ensure a heading element with the matching ID is present inside the grid when using semantic tags.
+
+See [component-aria-landmark.md](../component-aria-landmark.md) for the full landmark pattern.
+
+---
+
+## Local style override scaffold
+
+```vue
+<DataGrid :style-class-passthrough="['my-data-grid']">
+  ...
+</DataGrid>
+
+<style>
+/* ─── DataGrid local overrides ──────────────────────────────────────
+   Use CSS custom properties for layout, not utility classes.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.data-grid {
+  &.my-data-grid {
+    --data-grid-columns: repeat(auto-fit, minmax(200px, 1fr));
+    --data-grid-gap: 2rem;
+  }
+}
+</style>
+```
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+---
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- Slot names can be anything — semantic (`#revenue`) or indexed (`#item-0`). Document order determines render order.
+- `--data-grid-columns` accepts any valid `grid-template-columns` value, including named tracks and `subgrid`.
+- The component does not impose a column count — `auto-fit` with `minmax` means the browser decides. Use `repeat(N, 1fr)` in `--data-grid-columns` to fix the count.

package/.claude/skills/index.md

@@ -74,7 +74,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
     ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
     ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
-    └── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
+    ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
+    └── data-grid.md            — DataGrid: auto-fit responsive grid, $slots iteration, --data-grid-columns/gap tokens, semantic tag + aria
 ```
 
 ## Skill file template

package/app/components/01.atoms/grids/data-grid/DataGrid.vue

@@ -0,0 +1,39 @@
+<template>
+  <component :is="tag" class="data-grid" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
+    <slot v-for="(_, name) in $slots" :key="name" :name="name"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { ariaLabelledby } = useAriaLabelledById(props.tag);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough),
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .data-grid {
+    /* CSS Tockens for @container grid-template-columns */
+    --data-grid-columns: repeat(auto-fit, minmax(250px, 1fr));
+    --data-grid-gap: 1rem;
+
+    display: grid;
+    grid-template-columns: var(--data-grid-columns);
+    gap: var(--data-grid-gap);
+  }
+}
+</style>

package/app/components/01.atoms/grids/data-grid/stories/DataGrid.stories.ts

@@ -0,0 +1,234 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import DataGridComponent from "../DataGrid.vue";
+
+const meta: Meta<typeof DataGridComponent> = {
+  title: "Atoms/Grids/DataGrid",
+  component: DataGridComponent,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main"],
+      description: "HTML tag to render as",
+      table: { category: "Semantic" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "div",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A responsive auto-fit grid container. Uses CSS custom properties `--data-grid-columns` and `--data-grid-gap` to control layout. Renders named slots provided by the consumer.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const cardStyle =
+  "padding: 2.4rem; background: white; border-radius: 0.8rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 0.8rem;";
+const labelStyle = "font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;";
+const valueStyle = "font-size: 2.4rem; font-weight: 700; color: #111827;";
+
+interface DataGridArgs {
+  tag: "div" | "section" | "article" | "main";
+  styleClassPassthrough: string[];
+}
+
+const Template: StoryFn<DataGridArgs> = (args) => ({
+  components: { DataGridComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 3.2rem; background: #f9fafb;">
+      <DataGridComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+        <template #item-1>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Revenue</span>
+            <span style="${valueStyle}">£24,500</span>
+          </div>
+        </template>
+        <template #item-2>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Clients</span>
+            <span style="${valueStyle}">142</span>
+          </div>
+        </template>
+        <template #item-3>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Bookings</span>
+            <span style="${valueStyle}">38</span>
+          </div>
+        </template>
+        <template #item-4>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Avg. Rating</span>
+            <span style="${valueStyle}">4.9</span>
+          </div>
+        </template>
+      </DataGridComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.parameters = {
+  docs: {
+    description: {
+      story: "Default grid with four stat cards. Columns auto-fit to available space at a minimum of 250px each.",
+    },
+  },
+};
+
+export const TwoItems = Template.bind({});
+TwoItems.storyName = "Two Items";
+TwoItems.decorators = [
+  () => ({
+    components: { DataGridComponent },
+    template: `
+      <div style="padding: 3.2rem; background: #f9fafb;">
+        <DataGridComponent>
+          <template #item-1>
+            <div style="${cardStyle}">
+              <span style="${labelStyle}">Revenue</span>
+              <span style="${valueStyle}">£24,500</span>
+            </div>
+          </template>
+          <template #item-2>
+            <div style="${cardStyle}">
+              <span style="${labelStyle}">Clients</span>
+              <span style="${valueStyle}">142</span>
+            </div>
+          </template>
+        </DataGridComponent>
+      </div>
+    `,
+  }),
+];
+TwoItems.parameters = {
+  docs: { description: { story: "Grid with two items — auto-fit spreads them to fill available columns." } },
+};
+
+export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
+  components: { DataGridComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 3.2rem; background: #f9fafb;">
+      <div style="max-width: 400px;">
+        <DataGridComponent :tag="args.tag">
+          <template #item-1>
+            <div style="${cardStyle}">
+              <span style="${labelStyle}">Revenue</span>
+              <span style="${valueStyle}">£24,500</span>
+            </div>
+          </template>
+          <template #item-2>
+            <div style="${cardStyle}">
+              <span style="${labelStyle}">Clients</span>
+              <span style="${valueStyle}">142</span>
+            </div>
+          </template>
+          <template #item-3>
+            <div style="${cardStyle}">
+              <span style="${labelStyle}">Bookings</span>
+              <span style="${valueStyle}">38</span>
+            </div>
+          </template>
+        </DataGridComponent>
+      </div>
+    </div>
+  `,
+});
+NarrowContainer.parameters = {
+  docs: {
+    description: {
+      story: "In a 400px container the auto-fit columns stack to a single column once items fall below 250px.",
+    },
+  },
+};
+
+export const CustomColumns: StoryFn<DataGridArgs> = (args) => ({
+  components: { DataGridComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 3.2rem; background: #f9fafb;">
+      <DataGridComponent style="--data-grid-columns: repeat(3, 1fr); --data-grid-gap: 2.4rem;" :tag="args.tag">
+        <template #item-1>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Revenue</span>
+            <span style="${valueStyle}">£24,500</span>
+          </div>
+        </template>
+        <template #item-2>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Clients</span>
+            <span style="${valueStyle}">142</span>
+          </div>
+        </template>
+        <template #item-3>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Bookings</span>
+            <span style="${valueStyle}">38</span>
+          </div>
+        </template>
+      </DataGridComponent>
+    </div>
+  `,
+});
+CustomColumns.parameters = {
+  docs: {
+    description: {
+      story:
+        "Override `--data-grid-columns` and `--data-grid-gap` via inline style to force a fixed 3-column layout with wider gaps.",
+    },
+  },
+};
+
+export const SemanticSection: StoryFn<DataGridArgs> = (args) => ({
+  components: { DataGridComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 3.2rem; background: #f9fafb;">
+      <DataGridComponent tag="section">
+        <template #item-1>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Revenue</span>
+            <span style="${valueStyle}">£24,500</span>
+          </div>
+        </template>
+        <template #item-2>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Clients</span>
+            <span style="${valueStyle}">142</span>
+          </div>
+        </template>
+        <template #item-3>
+          <div style="${cardStyle}">
+            <span style="${labelStyle}">Bookings</span>
+            <span style="${valueStyle}">38</span>
+          </div>
+        </template>
+      </DataGridComponent>
+    </div>
+  `,
+});
+SemanticSection.parameters = {
+  docs: {
+    description: {
+      story: "Rendered as a `<section>` — `aria-labelledby` is automatically applied via `useAriaLabelledById`.",
+    },
+  },
+};

package/app/components/01.atoms/grids/data-grid/tests/DataGrid.spec.ts

@@ -0,0 +1,140 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DataGrid from "../DataGrid.vue";
+
+describe("DataGrid", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DataGrid);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default props)", async () => {
+    const wrapper = await mountSuspended(DataGrid);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (all props and slots set)", async () => {
+    const wrapper = await mountSuspended(DataGrid, {
+      props: {
+        tag: "section",
+        styleClassPassthrough: ["custom-class"],
+      },
+      slots: {
+        "item-1": "<div>Item 1</div>",
+        "item-2": "<div>Item 2</div>",
+        "item-3": "<div>Item 3</div>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ────────────────────────────────────────────────────────
+
+  it("renders a <div> as the root element by default", async () => {
+    const wrapper = await mountSuspended(DataGrid);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("always has the data-grid class", async () => {
+    const wrapper = await mountSuspended(DataGrid);
+    expect(wrapper.classes()).toContain("data-grid");
+  });
+
+  // ─── Tag prop ────────────────────────────────────────────────────────────
+
+  it("renders a <section> when tag is section", async () => {
+    const wrapper = await mountSuspended(DataGrid, { props: { tag: "section" } });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  it("renders an <article> when tag is article", async () => {
+    const wrapper = await mountSuspended(DataGrid, { props: { tag: "article" } });
+    expect(wrapper.element.tagName).toBe("ARTICLE");
+  });
+
+  it("renders a <main> when tag is main", async () => {
+    const wrapper = await mountSuspended(DataGrid, { props: { tag: "main" } });
+    expect(wrapper.element.tagName).toBe("MAIN");
+  });
+
+  // ─── Aria ─────────────────────────────────────────────────────────────────
+
+  it("does not set aria-labelledby when tag is div", async () => {
+    const wrapper = await mountSuspended(DataGrid, { props: { tag: "div" } });
+    expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  it("sets aria-labelledby when tag is section", async () => {
+    const wrapper = await mountSuspended(DataGrid, { props: { tag: "section" } });
+    expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
+  });
+
+  it("sets aria-labelledby when tag is article", async () => {
+    const wrapper = await mountSuspended(DataGrid, { props: { tag: "article" } });
+    expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
+  });
+
+  it("sets aria-labelledby when tag is main", async () => {
+    const wrapper = await mountSuspended(DataGrid, { props: { tag: "main" } });
+    expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
+  });
+
+  // ─── Slots ───────────────────────────────────────────────────────────────
+
+  it("renders a named slot", async () => {
+    const wrapper = await mountSuspended(DataGrid, {
+      slots: { "item-1": "<div class='card'>Card 1</div>" },
+    });
+    expect(wrapper.find(".card").exists()).toBe(true);
+    expect(wrapper.find(".card").text()).toBe("Card 1");
+  });
+
+  it("renders multiple named slots", async () => {
+    const wrapper = await mountSuspended(DataGrid, {
+      slots: {
+        "item-1": "<div class='card-1'>Card 1</div>",
+        "item-2": "<div class='card-2'>Card 2</div>",
+        "item-3": "<div class='card-3'>Card 3</div>",
+      },
+    });
+    expect(wrapper.find(".card-1").exists()).toBe(true);
+    expect(wrapper.find(".card-2").exists()).toBe(true);
+    expect(wrapper.find(".card-3").exists()).toBe(true);
+  });
+
+  it("renders no slot content when no slots are provided", async () => {
+    const wrapper = await mountSuspended(DataGrid);
+    expect(wrapper.text()).toBe("");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string to the root", async () => {
+    const wrapper = await mountSuspended(DataGrid, {
+      props: { styleClassPassthrough: "my-grid" },
+    });
+    expect(wrapper.classes()).toContain("my-grid");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DataGrid, {
+      props: { styleClassPassthrough: ["my-grid", "mbe-32"] },
+    });
+    expect(wrapper.classes()).toContain("my-grid");
+    expect(wrapper.classes()).toContain("mbe-32");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DataGrid, {
+      props: { styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/01.atoms/grids/data-grid/tests/__snapshots__/DataGrid.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DataGrid > renders correct HTML structure (all props and slots set) 1`] = `
+"<section class="data-grid custom-class" aria-labelledby="v-0-0">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</section>"
+`;
+
+exports[`DataGrid > renders correct HTML structure (default props) 1`] = `"<div class="data-grid"></div>"`;

package/app/components/02.molecules/qr-code/CaptureQrCode.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import type { DetectedBarcode } from "nuxt-qrcode"
+import type { DetectedBarcode } from "nuxt-qrcode";
 
 interface Props {
   styleClassPassthrough?: string | string[];
@@ -31,72 +31,72 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const qrcodeStreamRef = ref()
-const result = ref<string[]>()
+const qrcodeStreamRef = ref();
+const result = ref<string[]>();
 const state = reactive({
   errorMsg: "",
   error: false,
   cameraOn: true,
-})
+});
 
 onMounted(() => {
-  state.cameraOn = true
-  state.error = false
-  state.errorMsg = ""
-  result.value = []
+  state.cameraOn = true;
+  state.error = false;
+  state.errorMsg = "";
+  result.value = [];
 
   const handleVisibilityChange = () => {
     if (document.hidden) {
-      state.cameraOn = false
-      stopAllMediaStreams()
+      state.cameraOn = false;
+      stopAllMediaStreams();
     }
-  }
+  };
 
-  document.addEventListener("visibilitychange", handleVisibilityChange)
+  document.addEventListener("visibilitychange", handleVisibilityChange);
 
   onBeforeUnmount(() => {
-    document.removeEventListener("visibilitychange", handleVisibilityChange)
-  })
-})
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  });
+});
 
 function onDetect(detectedCodes: DetectedBarcode[]) {
-  result.value = detectedCodes.map((code) => code.rawValue)
+  result.value = detectedCodes.map((code) => code.rawValue);
 }
 
 function onError(err: Error) {
-  state.error = true
-  state.errorMsg = `[${err.name}]: ${err.message}`
+  state.error = true;
+  state.errorMsg = `[${err.name}]: ${err.message}`;
 }
 
 function resetCamera() {
-  state.error = false
-  state.cameraOn = true
+  state.error = false;
+  state.cameraOn = true;
 }
 
 function stopAllMediaStreams() {
   if (qrcodeStreamRef.value) {
     try {
-      const videoElement = qrcodeStreamRef.value.$el?.querySelector("video")
+      const videoElement = qrcodeStreamRef.value.$el?.querySelector("video");
       if (videoElement && videoElement.srcObject) {
-        const stream = videoElement.srcObject as MediaStream
-        stream.getTracks().forEach((track) => track.stop())
-        videoElement.srcObject = null
+        const stream = videoElement.srcObject as MediaStream;
+        stream.getTracks().forEach((track) => track.stop());
+        videoElement.srcObject = null;
       }
     } catch (error) {
-      console.warn("Error stopping camera stream:", error)
+      console.warn("Error stopping camera stream:", error);
     }
   }
 
   try {
     document.querySelectorAll("video").forEach((video) => {
       if (video.srcObject) {
-        const stream = video.srcObject as MediaStream
-        stream.getTracks().forEach((track) => track.stop())
-        video.srcObject = null
+        const stream = video.srcObject as MediaStream;
+        stream.getTracks().forEach((track) => track.stop());
+        video.srcObject = null;
       }
-    })
+    });
   } catch (error) {
-    console.warn("Error in global video cleanup:", error)
+    console.warn("Error in global video cleanup:", error);
   }
 }
 
@@ -104,39 +104,39 @@ watch(
   () => state.cameraOn,
   (newValue) => {
     if (!newValue) {
-      nextTick(() => stopAllMediaStreams())
+      nextTick(() => stopAllMediaStreams());
     }
   }
-)
+);
 
 onBeforeUnmount(() => {
-  state.cameraOn = false
-  stopAllMediaStreams()
-})
+  state.cameraOn = false;
+  stopAllMediaStreams();
+});
 
 onDeactivated(() => {
-  state.cameraOn = false
-  stopAllMediaStreams()
-})
+  state.cameraOn = false;
+  stopAllMediaStreams();
+});
 
 onActivated(() => {
-  state.cameraOn = true
-  state.error = false
-  state.errorMsg = ""
-})
+  state.cameraOn = true;
+  state.error = false;
+  state.errorMsg = "";
+});
 
 onBeforeRouteLeave(() => {
-  state.cameraOn = false
-  stopAllMediaStreams()
-})
+  state.cameraOn = false;
+  stopAllMediaStreams();
+});
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">
 @layer components {
-.capture-qr-stream {
-  aspect-ratio: 1 / 1;
-}
+  .capture-qr-stream {
+    aspect-ratio: 1 / 1;
+  }
 }
 </style>

package/app/pages/ui/simple-grid.vue

@@ -6,7 +6,7 @@
           <h1 class="page-heading-3">Simple Grid</h1>
           <p class="page-body-normal">Simple grid displaying dummy posts data</p>
 
-          <DisplayGridCore
+          <GridCore
             v-if="status === 'success'"
             :grid-data="postsData?.posts.slice(0, displayCount) ?? ({} as Posts)"
             :style-class-passthrough="['display-posts']"
@@ -18,7 +18,7 @@
                 <div>{{ item.body }}</div>
               </div>
             </template>
-          </DisplayGridCore>
+          </GridCore>
 
           <p v-else class="page-body-normal">&hellip;Loading</p>
         </LayoutRow>

package/package.json

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

package/app/components/display-grid/DisplayGridCore.vue

@@ -1,22 +0,0 @@
-<template>
-  <div :class="[elementClasses]">
-    <slot v-for="item in gridData" :key="item.id" :name="item.id"></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  gridData: {
-    type: Object,
-    default: () => ({}),
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const gridData = toRef(() => props.gridData);
-</script>