srcdev-nuxt-components 9.2.1 → 9.2.2

package/.claude/skills/components/input-copy-core.md

@@ -1,66 +0,0 @@
-# InputCopyCore
-
-Readonly input that displays a value with a one-click copy-to-clipboard button. Intended for license keys, API tokens, share URLs, etc.
-
-**File**: `app/components/forms/input-copy/InputCopyCore.vue`
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | required | `id` attribute on the `<input>` |
-| `value` | `string` | required | Text to display and copy |
-| `copy-label` | `string` | `"Copy"` | Button label before copying |
-| `copied-label` | `string` | `"Copied!"` | Button label after a successful copy |
-| `feedback-duration` | `number` | `2000` | ms to show the copied state before resetting |
-| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
-
-## Emits
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `copy` | `value: string` | Fires on successful clipboard write |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `icon` | Optional icon shown to the left of the button label (passes through to InputButtonCore `#left`) |
-
-## Behaviour
-
-- Calls `navigator.clipboard.writeText(value)` on button click
-- On success: adds `.copied` class to root, shows `copiedLabel`, emits `copy`
-- After `feedbackDuration` ms: removes `.copied` class, reverts button label
-- Clipboard failure is caught silently — no `.copied` state is set
-
-## CSS classes
-
-| Class | Where | Description |
-|-------|-------|-------------|
-| `.input-copy-core` | root | always present |
-| `.copied` | root | present during feedback window |
-| `.input-copy-field` | `<input>` | the readonly text field |
-| `.input-copy-button` | button | extra class added to InputButtonCore root |
-
-## Usage
-
-```vue
-<InputCopyCore
-  id="license-key-input"
-  value="sk_live_abc123def456"
-  copy-label="Copy key"
-  copied-label="Copied!"
-  :feedback-duration="2000"
-/>
-```
-
-With icon slot (e.g. using a Radix icon):
-
-```vue
-<InputCopyCore id="api-key" value="sk_live_abc123def456">
-  <template #icon>
-    <Icon name="radix-icons:clipboard" class="icon" />
-  </template>
-</InputCopyCore>
-```

package/app/components/05.forms/input-copy/InputCopyCore.vue

@@ -1,132 +0,0 @@
-<template>
-  <div
-    class="input-copy-core"
-    data-testid="input-copy-core"
-    :class="[elementClasses, { copied: isCopied }]"
-  >
-    <input
-      :id
-      :value
-      type="text"
-      readonly
-      aria-readonly="true"
-      class="input-copy-field"
-    />
-    <InputButtonCore
-      type="button"
-      variant="inline"
-      class="input-copy-button"
-      :button-text="isCopied ? copiedLabel : copyLabel"
-      :aria-label="isCopied ? copiedLabel : copyLabel"
-      @click="handleCopy"
-    >
-      <template v-if="slots.icon" #left>
-        <slot name="icon"></slot>
-      </template>
-    </InputButtonCore>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  id: string;
-  value: string;
-  copyLabel?: string;
-  copiedLabel?: string;
-  feedbackDuration?: number;
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  copyLabel: "Copy",
-  copiedLabel: "Copied!",
-  feedbackDuration: 2000,
-  styleClassPassthrough: () => [],
-});
-
-const emit = defineEmits<{
-  copy: [value: string];
-}>();
-
-const slots = useSlots();
-const isCopied = ref(false);
-
-const handleCopy = async () => {
-  try {
-    await navigator.clipboard.writeText(props.value);
-    isCopied.value = true;
-    emit("copy", props.value);
-    await useSleep(props.feedbackDuration);
-    isCopied.value = false;
-  } catch {
-    // Clipboard API unavailable — fail silently
-  }
-};
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-@layer components {
-  .input-copy-core {
-    display: flex;
-    align-items: stretch;
-    overflow: hidden;
-    border: var(--form-element-border-width) solid var(--theme-border);
-    border-radius: var(--form-input-border-radius);
-    background-color: var(--theme-input-surface);
-    transition: all var(--theme-form-transition-duration) ease-in-out;
-
-    .input-copy-field {
-      all: unset;
-      flex-grow: 1;
-      padding-block: var(--input-padding-block);
-      padding-inline: var(--input-padding-inline);
-      font-family: var(--font-family);
-      font-size: var(--input-font-size);
-      color: var(--theme-input-text-color-normal);
-      cursor: default;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      min-width: 0;
-    }
-
-    .input-copy-button.input-button-core {
-      border-radius: 0;
-      border-inline-start: var(--form-element-border-width) solid var(--theme-border);
-      padding-inline: var(--input-padding-inline);
-      min-width: var(--input-min-height);
-      background-color: transparent;
-      color: var(--theme-text);
-
-      &:hover {
-        background-color: var(--theme-surface);
-        color: var(--theme-on-surface);
-      }
-
-      &:focus-visible {
-        outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
-        outline-offset: -4px;
-      }
-    }
-
-    &.copied {
-      --_copy-success-surface: light-dark(var(--green-01), var(--green-09));
-      --_copy-success-text: light-dark(var(--green-08), var(--green-01));
-
-      .input-copy-button.input-button-core {
-        background-color: var(--_copy-success-surface);
-        color: var(--_copy-success-text);
-      }
-    }
-  }
-}
-</style>

package/app/components/05.forms/input-copy/stories/InputCopyCore.stories.ts

@@ -1,89 +0,0 @@
-import InputCopyCore from "../InputCopyCore.vue";
-import type { Meta, StoryObj } from "@nuxtjs/storybook";
-
-const meta: Meta<typeof InputCopyCore> = {
-  title: "Components/Forms/Input Copy/InputCopyCore",
-  component: InputCopyCore,
-  argTypes: {
-    id: {
-      control: "text",
-      description: "The id attribute for the input element",
-      table: { category: "Content" },
-    },
-    value: {
-      control: "text",
-      description: "The text value to display and copy",
-      table: { category: "Content" },
-    },
-    copyLabel: {
-      control: "text",
-      description: "Button label before copying",
-      table: { category: "Behaviour" },
-    },
-    copiedLabel: {
-      control: "text",
-      description: "Button label shown after a successful copy",
-      table: { category: "Behaviour" },
-    },
-    feedbackDuration: {
-      control: { type: "number", min: 500, max: 5000, step: 500 },
-      description: "How long (ms) to show the copied state before resetting",
-      table: { category: "Behaviour" },
-    },
-    styleClassPassthrough: {
-      control: "object",
-      description: "Additional CSS classes applied to the root element",
-      table: { category: "Styling" },
-    },
-  },
-  args: {
-    id: "copy-input",
-    value: "sk_live_abc123def456",
-    copyLabel: "Copy",
-    copiedLabel: "Copied!",
-    feedbackDuration: 2000,
-    styleClassPassthrough: [],
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof InputCopyCore>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { InputCopyCore },
-    setup() {
-      return { args };
-    },
-    template: `<div style="max-width: 420px; padding: 40px;"><InputCopyCore v-bind="args" /></div>`,
-  }),
-};
-
-export const LongValue: Story = {
-  name: "Long value",
-  args: {
-    value: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdXN0b21lcklkIjoiY3VzdF8wMDEiLCJkb21haW5zIjpbImV4YW1wbGUuY29tIl0sInBsYW4iOiJzaW5nbGUtc2l0ZSIsImlhdCI6MTcwMDAwMDAwMCwiZXhwIjoxNzMxNjI3MjAwfQ",
-  },
-  render: (args) => ({
-    components: { InputCopyCore },
-    setup() {
-      return { args };
-    },
-    template: `<div style="max-width: 420px; padding: 40px;"><InputCopyCore v-bind="args" /></div>`,
-  }),
-};
-
-export const CustomLabels: Story = {
-  name: "Custom labels",
-  args: {
-    copyLabel: "Copy key",
-    copiedLabel: "Key copied!",
-  },
-  render: (args) => ({
-    components: { InputCopyCore },
-    setup() {
-      return { args };
-    },
-    template: `<div style="max-width: 420px; padding: 40px;"><InputCopyCore v-bind="args" /></div>`,
-  }),
-};

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

@@ -1,212 +0,0 @@
-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/05.forms/input-copy/tests/__snapshots__/InputCopyCore.spec.ts.snap

@@ -1,28 +0,0 @@
-// 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>"
-`;