srcdev-nuxt-components 9.4.9 → 9.4.11

package/app/components/05.forms/input-select/variants/tests/InputSelectWithLabel.spec.ts

@@ -0,0 +1,87 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputSelectWithLabel.vue";
+
+const initialFieldData = {
+  data: [
+    { id: "1", name: "red", value: "red", label: "Red" },
+    { id: "2", name: "blue", value: "blue", label: "Blue" },
+  ],
+  total: 2,
+  skip: 0,
+  limit: 10,
+};
+
+const initialPropsData = {
+  name: "colour",
+  label: "Colour",
+  errorMessage: "",
+  modelValue: "red",
+  fieldData: initialFieldData,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("InputSelectWithLabel", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the label text", async () => {
+    wrapper = await wrapperFactory({ label: "Favourite colour" });
+    expect(wrapper.text()).toContain("Favourite colour");
+  });
+
+  it("renders a native select with an option per fieldData item", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("select").exists()).toBe(true);
+    expect(wrapper.findAll("option").map((o) => o.text())).toEqual(["Red", "Blue"]);
+  });
+
+  it("sets data-invalid and the error class when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-select-with-label").attributes("data-invalid")).toBe("");
+    expect(wrapper.find(".input-select-with-label").classes()).toContain("error");
+  });
+
+  it("renders the error message when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "Please choose a colour" });
+    expect(wrapper.text()).toContain("Please choose a colour");
+  });
+
+  it("renders the descriptionText slot", async () => {
+    wrapper = await wrapperFactory({}, { descriptionText: () => "Pick your favourite" });
+    expect(wrapper.text()).toContain("Pick your favourite");
+  });
+
+  it("applies inputVariant as a class on the wrapper", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.find(".input-select-with-label").classes()).toContain("underlined");
+  });
+
+  it("applies styleClassPassthrough", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: "custom-select" });
+    expect(wrapper.find("select").classes()).toContain("custom-select");
+  });
+
+  it("forwards required to the native select", async () => {
+    wrapper = await wrapperFactory({ required: true });
+    expect(wrapper.find("select").attributes("required")).toBeDefined();
+  });
+
+  it("applies the error theme to InputSelectCore when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, theme: "default" });
+    expect(wrapper.find(".input-select-wrapper").attributes("data-theme")).toBe("error");
+  });
+});

package/app/components/05.forms/input-text/tests/InputTextAsNumberWithLabel.spec.ts

@@ -58,4 +58,18 @@ describe("InputTextAsNumberWithLabel", () => {
 
     expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([6]);
   });
+
+  it("forwards the input-text-as-number marker class down to InputTextCore's own input", async () => {
+    // Regression test: the marker classes toggled via updateElementClasses() must reach the
+    // inner <input> (not just the outer wrapper), or the scoped .input-text-core.input-text-as-number
+    // CSS (compact fit-content width, centered text) silently never matches.
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input").classes()).toContain("input-text-as-number");
+  });
+
+  it("still forwards a consumer-supplied styleClassPassthrough down to the input", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-number-class"] });
+    expect(wrapper.find("input").classes()).toContain("custom-number-class");
+    expect(wrapper.find("input").classes()).toContain("input-text-as-number");
+  });
 });

package/app/components/05.forms/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -45,7 +45,7 @@
       :error-message
       :field-has-error
       :required
-      :style-class-passthrough
+      :style-class-passthrough="elementClasses"
       :theme
       inputmode="numeric"
       :aria-describedby

package/app/components/05.forms/input-textarea/CONSUMER-STYLING.md

@@ -0,0 +1,55 @@
+# InputTextareaCore — Consumer Styling Guide
+
+## Public token API
+
+Every colour token below is `var(--input-textarea-*, {default})` — set the `--input-textarea-*`
+name to override just this component; leave it unset and it inherits the shared `--theme-input-*`/
+`--theme-*` token every other themed component also falls back to. See
+`theming-component-token-pattern.md` for why this two-tier shape exists.
+
+This shape mirrors `InputTextCore`'s token set (see its own CONSUMER-STYLING.md).
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-textarea-surface` | `var(--theme-input-surface)` | Wrapper background |
+| `--input-textarea-border` | `var(--theme-border)` | Border colour (`normal`/`underlined` variant border) |
+| `--input-textarea-border-hover` | `var(--theme-border-focus)` | Wrapper outline colour on mouse hover (`normal` variant only) |
+| `--input-textarea-border-focus` | `var(--theme-border-focus)` | Wrapper outline colour on `:focus-visible` (`normal` variant only) |
+| `--input-textarea-text-color` | `var(--theme-input-text-color-normal)` | Textarea text colour |
+| `--input-textarea-placeholder-color` | `var(--theme-input-placeholder)` | Placeholder text colour |
+
+Geometry (`--form-textarea-padding-block`, `--form-textarea-padding-inline`, `--input-font-size`,
+`--input-textarea-line-height`, `--input-padding-inline`, etc.) is shared across every `05.forms`
+component and untouched by this — see `theming-form-geometry-tokens.md`.
+
+---
+
+## Input variant
+
+`:input-variant="'normal' | 'outlined' | 'underlined'"` (default `"normal"`) — same prop as
+`InputTextCore`. Only `normal` (bordered box, with hover/focus outline) and `underlined`
+(bottom-border only) have CSS today; `outlined` has no styling in `InputTextCore` either (no
+`&.outlined` rule exists there), so passing it renders with no border/outline at all — a
+pre-existing gap in the type, not specific to `InputTextareaCore`.
+
+---
+
+## Global theming — app-level CSS file
+
+```css
+:where(html) {
+  --input-textarea-surface: var(--rose-09);
+  --input-textarea-border: var(--rose-05);
+}
+```
+
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-input-*`/`--theme-*` tokens.
+
+---
+
+## Per-instance overrides
+
+```vue
+<InputTextareaCore id="message" name="message" style="--input-textarea-border: var(--gold-04);" />
+```

package/app/components/05.forms/input-textarea/InputTextareaCore.vue

@@ -66,11 +66,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const FormUiTheme = computed(() => {
-  return props.fieldHasError ? "error" : props.theme;
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>({
+  required: true,
 });
-
-const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
 const isDirty = defineModel<boolean>("isDirty");
 const isActive = defineModel<boolean>("isActive");
 
@@ -86,31 +84,41 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 <style lang="css">
 @layer components {
 .input-textarea-wrapper {
-  background-color: var(--theme-input-surface);
-  padding-inline: var(--element-decorator-padding-inline);
+  /* Public --input-textarea-* tokens, inline-fallback to the shared --theme-* tokens (see
+     theming-component-token-pattern.md) — mirrors InputTextCore's token shape. --_border is
+     genuinely reused (both the .normal border and the .underlined border-bottom read it); the
+     hover/focus border colours are each used only once, so they're inlined directly rather than
+     wrapped in a private var (see the Public token pattern rule in CLAUDE.md's Styling
+     Methodology). */
+  --_border: var(--input-textarea-border, var(--theme-border));
+
+  background-color: var(--input-textarea-surface, var(--theme-input-surface));
+  padding-inline: var(--input-padding-inline);
   transition: all var(--theme-form-transition-duration) ease-in-out;
 
   z-index: 2;
   position: relative;
 
   &.normal {
-    border: var(--form-element-border-width) solid var(--theme-border);
+    border: var(--form-element-border-width) solid var(--_border);
     border-radius: var(--form-input-border-radius);
     outline: var(--form-element-outline-width) solid transparent;
 
     &:has(textarea:focus-visible) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+      outline: var(--form-element-outline-width-focus) solid
+        var(--input-textarea-border-focus, var(--theme-border-focus));
       outline-offset: var(--form-element-outline-offset-focus);
     }
 
     &:has(textarea:is(:hover)) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+      outline: var(--form-element-outline-width-focus) solid
+        var(--input-textarea-border-hover, var(--theme-border-focus));
       outline-offset: var(--form-element-outline-offset-focus);
     }
   }
 
   &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-border);
+    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
   }
 
   display: flex;
@@ -129,7 +137,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     flex-grow: 1;
     field-sizing: content;
 
-    color: var(--theme-input-text-color-normal);
+    color: var(--input-textarea-text-color, var(--theme-input-text-color-normal));
     font-family: var(--font-family);
     font-size: var(--input-font-size);
     line-height: var(--input-textarea-line-height);
@@ -139,11 +147,11 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     min-height: 6lh;
 
     &::placeholder {
-      color: var(--theme-input-placeholder);
-      font-size: var(--input-placeholder-font-size);
-      font-style: var(--input-placeholder-font-style);
-      line-height: var(--input-placeholder-line-height);
-      font-weight: var(--input-placeholder-font-weight);
+      color: var(--input-textarea-placeholder-color, var(--theme-input-placeholder));
+      font-size: var(--theme-input-placeholder-font-size);
+      font-style: italic;
+      line-height: 1;
+      font-weight: normal;
     }
   }
 }

package/app/components/05.forms/input-textarea/stories/InputTextareaWithLabel.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed } from "vue";
+import { computed, reactive } from "vue";
 import StorybookComponent from "../variants/InputTextareaWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 

package/app/components/05.forms/input-textarea/tests/InputTextareaCore.spec.ts

@@ -0,0 +1,119 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputTextareaCore.vue";
+
+const initialPropsData = {
+  id: "test-textarea",
+  name: "testName",
+  modelValue: "",
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("InputTextareaCore", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders a native textarea", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("textarea").exists()).toBe(true);
+  });
+
+  it("binds v-model to the textarea value", async () => {
+    wrapper = await wrapperFactory({ modelValue: "hello world" });
+    expect(wrapper.find("textarea").element.value).toBe("hello world");
+  });
+
+  it("forwards placeholder", async () => {
+    wrapper = await wrapperFactory({ placeholder: "Enter your message" });
+    expect(wrapper.find("textarea").attributes("placeholder")).toBe("Enter your message");
+  });
+
+  it("forwards maxlength, defaulting to 255", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("textarea").attributes("maxlength")).toBe("255");
+
+    wrapper = await wrapperFactory({ maxlength: 100 });
+    expect(wrapper.find("textarea").attributes("maxlength")).toBe("100");
+  });
+
+  it("forwards aria-describedby", async () => {
+    wrapper = await wrapperFactory({ ariaDescribedby: "some-description-id" });
+    expect(wrapper.find("textarea").attributes("aria-describedby")).toBe("some-description-id");
+  });
+
+  it("sets data-theme from the theme prop", async () => {
+    wrapper = await wrapperFactory({ theme: "error" });
+    expect(wrapper.find(".input-textarea-wrapper").attributes("data-theme")).toBe("error");
+  });
+
+  it("sets data-invalid and aria-invalid when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-textarea-wrapper").attributes("data-invalid")).toBe("");
+    expect(wrapper.find("textarea").attributes("aria-invalid")).toBe("true");
+  });
+
+  it("defaults inputVariant to normal", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-textarea-wrapper").classes()).toContain("normal");
+  });
+
+  it("applies inputVariant as a class on the wrapper", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.find(".input-textarea-wrapper").classes()).toContain("underlined");
+  });
+
+  it("does not render the left/right slot wrappers when the slots are not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".slot.left-slot").exists()).toBe(false);
+    expect(wrapper.find(".slot.right-slot").exists()).toBe(false);
+  });
+
+  it("renders the left/right slots when provided", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      {
+        left: '<span data-testid="left-slot">📝</span>',
+        right: '<span data-testid="right-slot">✨</span>',
+      }
+    );
+
+    expect(wrapper.find(".slot.left-slot [data-testid='left-slot']").exists()).toBe(true);
+    expect(wrapper.find(".slot.right-slot [data-testid='right-slot']").exists()).toBe(true);
+    expect(wrapper.find(".input-textarea-wrapper").classes()).toContain("has-left-slot");
+    expect(wrapper.find(".input-textarea-wrapper").classes()).toContain("has-right-slot");
+  });
+
+  it("applies styleClassPassthrough to the textarea", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-textarea-class"] });
+    expect(wrapper.find("textarea").classes()).toContain("custom-textarea-class");
+  });
+
+  it("sets required attribute when required is true", async () => {
+    wrapper = await wrapperFactory({ required: true });
+    expect(wrapper.find("textarea").attributes("required")).toBeDefined();
+  });
+
+  it("sets isActive true on focus and false on blur", async () => {
+    wrapper = await wrapperFactory();
+    const textarea = wrapper.find("textarea");
+
+    await textarea.trigger("focusin");
+    expect(wrapper.emitted("update:isActive")?.at(-1)).toEqual([true]);
+
+    await textarea.trigger("focusout");
+    expect(wrapper.emitted("update:isActive")?.at(-1)).toEqual([false]);
+  });
+});

package/app/components/05.forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -42,7 +42,6 @@
         :maxlength
         :name
         :placeholder
-        :label
         :field-has-error
         :required
         :style-class-passthrough
@@ -106,24 +105,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const FormUiTheme = computed(() => {
-  return props.fieldHasError ? "error" : props.theme;
-});
-
-// const id = `${props.name}-${useId()}`;
-// const errorId = `${id}-error-message`;
-// const ariaDescribedby = computed(() => {
-//   const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined;
-//   return props.fieldHasError ? errorId : ariaDescribedbyId;
-// });
-
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
   toRef(props, "fieldHasError"),
   slots
 );
 
-const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>({
+  required: true,
+});
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);
 

package/app/components/05.forms/input-textarea/variants/tests/InputTextareaWithLabel.spec.ts

@@ -0,0 +1,93 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputTextareaWithLabel.vue";
+
+const initialPropsData = {
+  name: "message",
+  label: "Message",
+  errorMessage: "",
+  modelValue: "",
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("InputTextareaWithLabel", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the label text", async () => {
+    wrapper = await wrapperFactory({ label: "Feedback" });
+    expect(wrapper.text()).toContain("Feedback");
+  });
+
+  it("renders a native textarea", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("textarea").exists()).toBe(true);
+  });
+
+  it("does not leak a label attribute onto InputTextareaCore's wrapper", async () => {
+    // Regression test: InputTextareaCore has no `label` prop (matches InputTextCore), so passing
+    // it down would fall through as a meaningless raw `label` HTML attribute on the wrapper div.
+    wrapper = await wrapperFactory({ label: "Feedback" });
+    expect(wrapper.find(".input-textarea-wrapper").attributes("label")).toBeUndefined();
+  });
+
+  it("sets data-invalid and the error class when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-textarea-with-label").attributes("data-invalid")).toBe("");
+  });
+
+  it("renders the error message when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "This field is required" });
+    expect(wrapper.text()).toContain("This field is required");
+  });
+
+  it("renders the descriptionText slot", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      { descriptionText: () => "Please provide more detail" }
+    );
+    expect(wrapper.text()).toContain("Please provide more detail");
+  });
+
+  it("renders the left/right slots when provided", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      {
+        left: '<span data-testid="left-slot">📝</span>',
+        right: '<span data-testid="right-slot">✨</span>',
+      }
+    );
+
+    expect(wrapper.find('[data-testid="left-slot"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="right-slot"]').exists()).toBe(true);
+  });
+
+  it("sets isDirty true once the value becomes non-empty", async () => {
+    wrapper = await wrapperFactory({ modelValue: "hello" });
+    const vm = wrapper.vm as unknown as { isDirty: boolean };
+    expect(vm.isDirty).toBe(true);
+  });
+
+  it("applies inputVariant as a class on the wrapper", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.find(".input-textarea-with-label").classes()).toContain("underlined");
+  });
+
+  it("applies styleClassPassthrough", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: "custom-textarea" });
+    expect(wrapper.find(".input-textarea-with-label").classes()).toContain("custom-textarea");
+  });
+});