srcdev-nuxt-components 9.0.18 → 9.1.0

package/app/components/forms/input-copy/tests/InputCopyCore.spec.ts

@@ -0,0 +1,212 @@
+import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import InputCopyCore from "../InputCopyCore.vue";
+
+const DEFAULT_PROPS = {
+  id: "copy-input",
+  value: "sk_live_abc123def456",
+};
+
+const createWrapper = async (props: Record<string, unknown> = {}) => {
+  return mountSuspended(InputCopyCore, {
+    props: { ...DEFAULT_PROPS, ...props },
+  });
+};
+
+describe("InputCopyCore", () => {
+  let wrapper: Awaited<ReturnType<typeof createWrapper>>;
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.restoreAllMocks();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  describe("Snapshots", () => {
+    it("default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("custom labels", async () => {
+      wrapper = await createWrapper({ copyLabel: "Copy key", copiedLabel: "Key copied!" });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("with styleClassPassthrough", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: ["my-copy-input"] });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  // ─── Rendering ───────────────────────────────────────────────────────────
+
+  describe("Rendering", () => {
+    it("mounts without error", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.vm).toBeTruthy();
+    });
+
+    it("root element has input-copy-core class", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.classes()).toContain("input-copy-core");
+    });
+
+    it("root element has data-testid attribute", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.attributes("data-testid")).toBe("input-copy-core");
+    });
+
+    it("renders a readonly input", async () => {
+      wrapper = await createWrapper();
+      const input = wrapper.find(".input-copy-field");
+      expect(input.exists()).toBe(true);
+      expect(input.attributes("readonly")).toBeDefined();
+    });
+
+    it("input has aria-readonly set to true", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".input-copy-field").attributes("aria-readonly")).toBe("true");
+    });
+
+    it("input displays the value", async () => {
+      wrapper = await createWrapper({ value: "my-license-key" });
+      expect(wrapper.find(".input-copy-field").attributes("value")).toBe("my-license-key");
+    });
+
+    it("input has the correct id", async () => {
+      wrapper = await createWrapper({ id: "my-input" });
+      expect(wrapper.find(".input-copy-field").attributes("id")).toBe("my-input");
+    });
+
+    it("renders the copy button", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".input-copy-button").exists()).toBe(true);
+    });
+
+    it("copy button shows copyLabel by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".input-copy-button").text()).toBe("Copy");
+    });
+
+    it("copy button shows custom copyLabel", async () => {
+      wrapper = await createWrapper({ copyLabel: "Copy key" });
+      expect(wrapper.find(".input-copy-button").text()).toBe("Copy key");
+    });
+  });
+
+  // ─── Props ───────────────────────────────────────────────────────────────
+
+  describe("Props", () => {
+    it("styleClassPassthrough string is applied to root", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "my-class" });
+      expect(wrapper.classes()).toContain("my-class");
+    });
+
+    it("styleClassPassthrough array is applied to root", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: ["class-a", "class-b"] });
+      expect(wrapper.classes()).toContain("class-a");
+      expect(wrapper.classes()).toContain("class-b");
+    });
+
+    it("updates classes when styleClassPassthrough prop changes", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: ["original"] });
+      expect(wrapper.classes()).toContain("original");
+      await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+      expect(wrapper.classes()).not.toContain("original");
+      expect(wrapper.classes()).toContain("updated");
+    });
+  });
+
+  // ─── Copy behaviour ──────────────────────────────────────────────────────
+
+  describe("Copy behaviour", () => {
+    beforeEach(() => {
+      vi.stubGlobal("navigator", {
+        clipboard: {
+          writeText: vi.fn().mockResolvedValue(undefined),
+        },
+      });
+    });
+
+    it("calls navigator.clipboard.writeText with the value on click", async () => {
+      wrapper = await createWrapper({ value: "test-key-123" });
+      await wrapper.find(".input-copy-button").trigger("click");
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith("test-key-123");
+    });
+
+    it("adds copied class to root after clicking", async () => {
+      wrapper = await createWrapper();
+      await wrapper.find(".input-copy-button").trigger("click");
+      await nextTick();
+      expect(wrapper.classes()).toContain("copied");
+    });
+
+    it("button shows copiedLabel after clicking", async () => {
+      wrapper = await createWrapper({ copiedLabel: "Done!" });
+      await wrapper.find(".input-copy-button").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".input-copy-button").text()).toBe("Done!");
+    });
+
+    it("button aria-label updates to copiedLabel after clicking", async () => {
+      wrapper = await createWrapper({ copiedLabel: "Copied!" });
+      await wrapper.find(".input-copy-button").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".input-copy-button").attributes("aria-label")).toBe("Copied!");
+    });
+
+    it("emits copy event with value on successful copy", async () => {
+      wrapper = await createWrapper({ value: "emit-test-key" });
+      await wrapper.find(".input-copy-button").trigger("click");
+      expect(wrapper.emitted("copy")).toBeTruthy();
+      expect(wrapper.emitted("copy")?.[0]).toEqual(["emit-test-key"]);
+    });
+
+    it("removes copied class after feedbackDuration elapses", async () => {
+      wrapper = await createWrapper({ feedbackDuration: 1000 });
+      await wrapper.find(".input-copy-button").trigger("click");
+      await nextTick();
+      expect(wrapper.classes()).toContain("copied");
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(wrapper.classes()).not.toContain("copied");
+    });
+
+    it("does not throw when clipboard is unavailable", async () => {
+      vi.stubGlobal("navigator", {
+        clipboard: {
+          writeText: vi.fn().mockRejectedValue(new Error("Not allowed")),
+        },
+      });
+      wrapper = await createWrapper();
+      await expect(wrapper.find(".input-copy-button").trigger("click")).resolves.not.toThrow();
+    });
+
+    it("does not add copied class when clipboard fails", async () => {
+      vi.stubGlobal("navigator", {
+        clipboard: {
+          writeText: vi.fn().mockRejectedValue(new Error("Not allowed")),
+        },
+      });
+      wrapper = await createWrapper();
+      await wrapper.find(".input-copy-button").trigger("click");
+      await nextTick();
+      expect(wrapper.classes()).not.toContain("copied");
+    });
+  });
+
+  // ─── Accessibility ───────────────────────────────────────────────────────
+
+  describe("Accessibility", () => {
+    it("copy button has aria-label matching copyLabel by default", async () => {
+      wrapper = await createWrapper({ copyLabel: "Copy" });
+      expect(wrapper.find(".input-copy-button").attributes("aria-label")).toBe("Copy");
+    });
+
+    it("copy button type is button", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".input-copy-button").attributes("type")).toBe("button");
+    });
+  });
+});

package/app/components/forms/input-copy/tests/__snapshots__/InputCopyCore.spec.ts.snap

@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputCopyCore > Snapshots > custom labels 1`] = `
+"<div class="input-copy-core" data-testid="input-copy-core"><input id="copy-input" type="text" readonly="" aria-readonly="true" class="input-copy-field" value="sk_live_abc123def456"><button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core inline input-copy-button" aria-label="Copy key">
+    <!--v-if-->
+    <!--v-if--><span class="button-text">Copy key</span>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;
+
+exports[`InputCopyCore > Snapshots > default 1`] = `
+"<div class="input-copy-core" data-testid="input-copy-core"><input id="copy-input" type="text" readonly="" aria-readonly="true" class="input-copy-field" value="sk_live_abc123def456"><button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core inline input-copy-button" aria-label="Copy">
+    <!--v-if-->
+    <!--v-if--><span class="button-text">Copy</span>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;
+
+exports[`InputCopyCore > Snapshots > with styleClassPassthrough 1`] = `
+"<div class="input-copy-core my-copy-input" data-testid="input-copy-core"><input id="copy-input" type="text" readonly="" aria-readonly="true" class="input-copy-field" value="sk_live_abc123def456"><button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core inline input-copy-button" aria-label="Copy">
+    <!--v-if-->
+    <!--v-if--><span class="button-text">Copy</span>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;

package/app/pages/index.vue

@@ -31,11 +31,6 @@
           <NuxtLink class="page-body-normal" to="/ui/contact-section">Contact Section</NuxtLink>
         </LayoutRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Treatment Consultant</h1>
-          <NuxtLink class="page-body-normal" to="/ui/services/treatment-consultant">Treatment Consultant</NuxtLink>
-        </LayoutRow>
-
         <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">PopOver component 1</h2>
           <ClientOnly>

package/modules/icon-sets.ts

@@ -0,0 +1,53 @@
+import { defineNuxtModule, logger } from "@nuxt/kit";
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
+
+/**
+ * Icon sets used by srcdev-nuxt-components components.
+ * These must be installed in the consumer app to avoid runtime CDN fetches (FOUC).
+ */
+const ICON_SETS = [
+  "@iconify-json/akar-icons",
+  "@iconify-json/bi",
+  "@iconify-json/bitcoin-icons",
+  "@iconify-json/gravity-ui",
+  "@iconify-json/ic",
+  "@iconify-json/lucide",
+  "@iconify-json/material-symbols",
+  "@iconify-json/mdi",
+  "@iconify-json/radix-icons",
+] as const;
+
+export default defineNuxtModule({
+  meta: {
+    name: "srcdev-icon-sets",
+  },
+  setup(_, nuxt) {
+    // Skip when running as the layer's own standalone dev/build
+    if (process.env.SRCDEV_STANDALONE) return;
+
+    // Resolve packages from the consumer's project root, not the layer's own node_modules
+    const consumerRequire = createRequire(pathToFileURL(nuxt.options.rootDir + "/").href);
+
+    const missing = ICON_SETS.filter((pkg) => {
+      try {
+        consumerRequire.resolve(pkg);
+        return false;
+      } catch {
+        return true;
+      }
+    });
+
+    if (missing.length > 0) {
+      logger.info(
+        `[srcdev-nuxt-components] Some icon set packages used by layer components are not installed in this project.\n` +
+          `If you use those components and see icons flashing in on page load, install the relevant packages.\n\n` +
+          `Not installed: ${missing.join(", ")}\n\n` +
+          `Install all at once:\n\n` +
+          `  npm install ${missing.join(" ")}\n\n` +
+          `Your own app's icon sets are unaffected — this only covers sets used by layer components.\n` +
+          `See .claude/skills/srcdev-nuxt-components/skills/icon-sets.md for the component→package mapping.`
+      );
+    }
+  },
+});

package/nuxt.config.ts

@@ -26,6 +26,7 @@ export default defineNuxtConfig({
   modules: [
     // Required by consumers — always included
     resolve("./modules/colour-scheme"),
+    resolve("./modules/icon-sets"),
     "@nuxt/icon",
     ...(process.env.STORYBOOK ? [] : ["@nuxt/fonts"]),
     "@nuxt/image",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.0.18",
+  "version": "9.1.0",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -39,14 +39,57 @@
     "nuxt.config.ts",
     "types.d.ts"
   ],
+  "peerDependencies": {
+    "@iconify-json/akar-icons": "*",
+    "@iconify-json/bi": "*",
+    "@iconify-json/bitcoin-icons": "*",
+    "@iconify-json/gravity-ui": "*",
+    "@iconify-json/ic": "*",
+    "@iconify-json/lucide": "*",
+    "@iconify-json/material-symbols": "*",
+    "@iconify-json/mdi": "*",
+    "@iconify-json/radix-icons": "*"
+  },
+  "peerDependenciesMeta": {
+    "@iconify-json/akar-icons": {
+      "optional": true
+    },
+    "@iconify-json/bi": {
+      "optional": true
+    },
+    "@iconify-json/bitcoin-icons": {
+      "optional": true
+    },
+    "@iconify-json/gravity-ui": {
+      "optional": true
+    },
+    "@iconify-json/ic": {
+      "optional": true
+    },
+    "@iconify-json/lucide": {
+      "optional": true
+    },
+    "@iconify-json/material-symbols": {
+      "optional": true
+    },
+    "@iconify-json/mdi": {
+      "optional": true
+    },
+    "@iconify-json/radix-icons": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.2",
     "@iconify-json/akar-icons": "1.2.7",
     "@iconify-json/bi": "1.2.7",
     "@iconify-json/bitcoin-icons": "1.2.4",
     "@iconify-json/gravity-ui": "1.2.11",
+    "@iconify-json/ic": "*",
+    "@iconify-json/lucide": "*",
     "@iconify-json/material-symbols": "1.2.53",
     "@iconify-json/mdi": "1.2.3",
+    "@iconify-json/radix-icons": "*",
     "@nuxt/eslint": "1.13.0",
     "@nuxt/test-utils": "3.23.0",
     "@nuxtjs/storybook": "9.1.0-29374011.dab79ae",