srcdev-nuxt-components 9.6.8 → 9.6.9

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

@@ -0,0 +1,159 @@
+<template>
+  <div
+    class="input-textarea-field"
+    :class="elementClasses"
+    :data-theme="theme"
+    :data-input-variant="inputVariant"
+    :data-invalid="fieldHasError ? '' : null"
+    :data-dirty="isDirty ? '' : null"
+    :data-active="isActive ? '' : null"
+  >
+    <InputLabel
+      :id
+      :required
+      :input-variant
+      :field-has-error
+      :style-class-passthrough="['input-textarea-label']"
+    >
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
+
+    <InputDescription
+      v-if="inputVariant !== 'outlined'"
+      :description-id
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
+
+    <InputTextarea
+      :id
+      v-model="modelValue"
+      v-model:is-dirty="isDirty"
+      v-model:is-active="isActive"
+      :maxlength
+      :name
+      :placeholder
+      :field-has-error
+      :required
+      :readonly
+      :autocomplete
+      :theme
+      :input-variant
+      :aria-describedby="ariaDescribedby() ?? undefined"
+    >
+      <template v-if="slots.left" #left>
+        <slot name="left"></slot>
+      </template>
+      <template v-if="slots.right" #right>
+        <slot name="right"></slot>
+      </template>
+    </InputTextarea>
+
+    <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="false" :input-variant />
+
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
+      :description-id
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  maxlength?: number;
+  name: string;
+  placeholder?: string;
+  label: string;
+  errorMessage: object | string;
+  fieldHasError?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  autocomplete?: string;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxlength: 255,
+  placeholder: "",
+  fieldHasError: false,
+  required: false,
+  readonly: false,
+  autocomplete: undefined,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>({
+  required: true,
+});
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const testDirty = () => {
+  const watchValue = modelValue.value ?? "";
+
+  if (!isDirty.value && typeof watchValue === "string" && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .input-textarea-field {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+}
+</style>

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

@@ -0,0 +1,198 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputTextarea from "../InputTextarea.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  modelValue: string;
+  id: string;
+  name: string;
+  placeholder: string;
+  maxlength: number;
+  required: boolean;
+  readonly: boolean;
+  fieldHasError: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  leftSlotContent: string;
+  rightSlotContent: string;
+  maxHeightToken: string;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Textarea/InputTextarea",
+  component: InputTextarea,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    maxlength: { control: "number", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    readonly: { control: "boolean", table: { category: "States" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    styleClassPassthrough: { control: "object", table: { category: "Styling" } },
+    leftSlotContent: { control: "text", description: "Story-only: fills the left slot", table: { category: "Slots" } },
+    rightSlotContent: { control: "text", description: "Story-only: fills the right slot", table: { category: "Slots" } },
+    maxHeightToken: {
+      control: { type: "select" },
+      options: ["none", "12lh", "20rem"],
+      description: "Story-only CSS token, not a prop: sets `--input-textarea-max-height` on a wrapper",
+      table: { category: "CSS tokens (story-only)" },
+    },
+  },
+  args: {
+    modelValue: "",
+    id: "message",
+    name: "message",
+    placeholder: "Write your message",
+    maxlength: 255,
+    required: false,
+    readonly: false,
+    fieldHasError: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    leftSlotContent: "",
+    rightSlotContent: "",
+    maxHeightToken: "none",
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Bare native `<textarea>` for the `05.forms` textarea family: no label, description or error (use `InputTextareaField` for those, or pair it with your own `<label for>`). It grows with its content where `field-sizing: content` is supported, from `--input-textarea-min-height` (6 lines) up to `--input-textarea-max-height` (no cap by default), then scrolls. `left`/`right` slots hold decorations. State is exposed as `data-*` attributes on `.input-textarea-wrapper`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputTextarea },
+  setup() {
+    const componentArgs = computed(() => {
+      const {
+        modelValue: _modelValue,
+        leftSlotContent: _left,
+        rightSlotContent: _right,
+        maxHeightToken: _maxHeight,
+        ...rest
+      } = args;
+      return rest;
+    });
+    return { args, componentArgs };
+  },
+  template: `
+    <div :style="{ '--input-textarea-max-height': args.maxHeightToken }">
+      <InputTextarea v-model="args.modelValue" v-bind="componentArgs">
+        <template v-if="args.leftSlotContent" #left>{{ args.leftSlotContent }}</template>
+        <template v-if="args.rightSlotContent" #right>{{ args.rightSlotContent }}</template>
+      </InputTextarea>
+    </div>
+    <p style="margin-block-start: 1.6rem; font-family: monospace; white-space: pre-wrap;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const MultiLine: Story = {
+  args: { modelValue: "First line\nSecond line\n\n    Indented after a blank line" },
+  render,
+  parameters: { docs: { description: { story: "Line breaks and indentation show as typed." } } },
+};
+
+export const CappedHeight: Story = {
+  args: {
+    maxHeightToken: "12lh",
+    maxlength: 5000,
+    modelValue: Array.from({ length: 30 }, (_, index) => `Line ${index + 1}`).join("\n"),
+  },
+  render,
+  parameters: { docs: { description: { story: "`--input-textarea-max-height: 12lh` stops it growing past 12 lines; the rest scrolls." } } },
+};
+
+export const WithSlots: Story = { args: { leftSlotContent: "📝", rightSlotContent: "✨" }, render };
+
+export const SlotsOnFirstLine: Story = {
+  args: { leftSlotContent: "📝", rightSlotContent: "✨", modelValue: "First line\nSecond line\nThird line" },
+  render: (args: StoryArgs) => ({
+    ...render(args),
+    template: `
+      <div style="--input-textarea-slot-align: start; --input-textarea-slot-padding-block: var(--form-textarea-padding-block);">
+        ${render(args).template}
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`--input-textarea-slot-align: start` with `--input-textarea-slot-padding-block: var(--form-textarea-padding-block)` lines the slots up with the first line of text instead of centring them on the field. Story-only CSS tokens, set on a wrapper.",
+      },
+    },
+  },
+};
+
+export const WithError: Story = { args: { fieldHasError: true, theme: "error" }, render };
+
+export const Readonly: Story = { args: { readonly: true, modelValue: "This message can't be edited." }, render };
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    maxlength: 5000,
+    modelValue:
+      "Donaudampfschifffahrtsgesellschaftskapitänswitwenrentenversicherungsbeitragsrückerstattungsantrag https://example.com/a/very/long/unbroken/url/that/never/wraps/anywhere/at/all\n<script>alert(1)</script> <b>not bold</b>\n🎉🎉🎉\nمرحبا بكم في النموذج\n" +
+      "Lorem ipsum dolor sit amet. ".repeat(40),
+    placeholder: "Bitte beschreiben Sie Ihr Anliegen so ausführlich wie möglich",
+    leftSlotContent: "📝📝📝",
+    rightSlotContent: "عربى",
+    fieldHasError: true,
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "A long unbroken German word and URL, HTML-like text, emoji, right-to-left text and a long paragraph, with text in both slots. Check at every canvas width: the textarea stays inside the dashed outline and wraps the unbroken strings instead of scrolling sideways, line breaks are kept, markup shows as text, and the slots keep their size.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,161 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputTextareaField from "../InputTextareaField.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  modelValue: string;
+  name: string;
+  label: string;
+  placeholder: string;
+  maxlength: number;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  readonly: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  descriptionText: string;
+  descriptionHtml: string;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Textarea/InputTextareaField",
+  component: InputTextareaField,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", table: { category: "Basic" } },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    maxlength: { control: "number", table: { category: "Basic" } },
+    errorMessage: { control: "text", table: { category: "Validation" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    readonly: { control: "boolean", table: { category: "States" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    styleClassPassthrough: { control: "object", table: { category: "Styling" } },
+    descriptionText: { control: "text", description: "Story-only: fills the descriptionText slot", table: { category: "Slots" } },
+    descriptionHtml: { control: "text", description: "Story-only: fills the descriptionHtml slot", table: { category: "Slots" } },
+  },
+  args: {
+    modelValue: "",
+    name: "message",
+    label: "Your message",
+    placeholder: "",
+    maxlength: 1000,
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    readonly: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    descriptionText: "",
+    descriptionHtml: "",
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Labelled textarea field: `InputLabel`, an optional description (`descriptionText`/`descriptionHtml` slots, moved after the control for the `outlined` variant), `InputTextarea` and an error strip, linked through `aria-describedby`. `left`/`right` slots pass through to `InputTextarea`. `style-class-passthrough` lands on the `.input-textarea-field` root only.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputTextareaField },
+  setup() {
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, descriptionText: _text, descriptionHtml: _html, ...rest } = args;
+      return rest;
+    });
+    return { args, componentArgs };
+  },
+  template: `
+    <InputTextareaField v-model="args.modelValue" v-bind="componentArgs">
+      <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+      <template v-if="args.descriptionHtml" #descriptionHtml><span v-html="args.descriptionHtml"></span></template>
+    </InputTextareaField>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithDescription: Story = { args: { descriptionText: "Tell us how we can help." }, render };
+
+export const WithHtmlDescription: Story = {
+  args: { descriptionHtml: "Keep it under <strong>1000 characters</strong>. <em>No personal details, please.</em>" },
+  render,
+};
+
+export const WithError: Story = {
+  args: { fieldHasError: true, errorMessage: "Please enter a message", required: true },
+  render,
+};
+
+export const Required: Story = { args: { required: true }, render };
+
+export const Outlined: Story = {
+  args: { inputVariant: "outlined", descriptionText: "Tell us how we can help." },
+  render,
+  parameters: { docs: { description: { story: "The `outlined` variant renders the description after the control and error." } } },
+};
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    maxlength: 5000,
+    modelValue: "Kundenzufriedenheitsrückmeldungsformularausfüllanleitung https://example.com/a/very/long/unbroken/url\n<b>not bold</b> 🎉\n" + "Alex Morgan from Northtown wrote a long message. ".repeat(20),
+    label: "💬 Ausführlichebeschreibungihresanliegensfürunserkundenserviceteam https://example.com/a/very/long/unbroken/url <b>not bold</b> رسالتك",
+    descriptionText: "يرجى وصف طلبك بالتفصيل Bitte beschreiben Sie Ihr Anliegen so ausführlich wie möglich, damit wir Ihnen schnell helfen können.",
+    errorMessage: "IhrenachrichtüberschreitetleiderdiezulässigeZeichenanzahlbittekürzenSiesie",
+    fieldHasError: true,
+    required: true,
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Long unbroken German, URL, emoji, HTML-like and right-to-left copy in the label, description, value and error, with a long multi-line value. Check at every canvas width: everything wraps inside the dashed outline, line breaks in the value are kept, and markup renders as text.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,149 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import { nextTick } from "vue";
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputTextarea.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,
+  });
+};
+
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
+
+describe("InputTextarea", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders a native textarea with the .input-textarea class", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("textarea.input-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");
+
+    await wrapper.find("textarea").setValue("line one\nline two");
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["line one\nline two"]);
+  });
+
+  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");
+
+    await wrapper.setProps({ maxlength: 100 });
+    expect(wrapper.find("textarea").attributes("maxlength")).toBe("100");
+  });
+
+  it("forwards readonly and autocomplete", async () => {
+    wrapper = await wrapperFactory({ readonly: true, autocomplete: "street-address" });
+    expect(wrapper.find("textarea").attributes("readonly")).toBeDefined();
+    expect(wrapper.find("textarea").attributes("autocomplete")).toBe("street-address");
+  });
+
+  it("forwards aria-describedby, omitting it when empty", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("textarea").attributes("aria-describedby")).toBeUndefined();
+
+    await wrapper.setProps({ ariaDescribedby: "some-description-id" });
+    expect(wrapper.find("textarea").attributes("aria-describedby")).toBe("some-description-id");
+  });
+
+  it("sets data-theme and data-input-variant on the wrapper", async () => {
+    wrapper = await wrapperFactory({ theme: "error", inputVariant: "underlined" });
+    const root = wrapper.find(".input-textarea-wrapper");
+
+    expect(root.attributes("data-theme")).toBe("error");
+    expect(root.attributes("data-input-variant")).toBe("underlined");
+  });
+
+  it("defaults data-input-variant to normal", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-textarea-wrapper").attributes("data-input-variant")).toBe("normal");
+  });
+
+  it("sets data-invalid and aria-invalid only when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-textarea-wrapper").attributes("data-invalid")).toBeUndefined();
+    expect(wrapper.find("textarea").attributes("aria-invalid")).toBeUndefined();
+
+    await wrapper.setProps({ fieldHasError: true });
+    expect(wrapper.find(".input-textarea-wrapper").attributes("data-invalid")).toBe("");
+    expect(wrapper.find("textarea").attributes("aria-invalid")).toBe("true");
+  });
+
+  it("does not render the slot holders when the slots are not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-textarea-slot-left").exists()).toBe(false);
+    expect(wrapper.find(".input-textarea-slot-right").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>',
+      }
+    );
+    const root = wrapper.find(".input-textarea-wrapper");
+
+    expect(wrapper.find(".input-textarea-slot-left [data-testid='left-slot']").exists()).toBe(true);
+    expect(wrapper.find(".input-textarea-slot-right [data-testid='right-slot']").exists()).toBe(true);
+    expect(root.attributes("data-has-left-slot")).toBe("");
+    expect(root.attributes("data-has-right-slot")).toBe("");
+  });
+
+  it("applies styleClassPassthrough to the textarea and reacts to changes", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-textarea-class"] });
+    expect(wrapper.find("textarea").classes()).toContain("custom-textarea-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["other-class"] });
+    await nextTick();
+    expect(wrapper.find("textarea").classes()).toContain("other-class");
+    expect(wrapper.find("textarea").classes()).not.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 on focus and blur, reflected as data-active", async () => {
+    wrapper = await wrapperFactory({ isActive: false });
+    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]);
+
+    await wrapper.setProps({ isActive: true, isDirty: true });
+    expect(wrapper.find(".input-textarea-wrapper").attributes("data-active")).toBe("");
+    expect(wrapper.find(".input-textarea-wrapper").attributes("data-dirty")).toBe("");
+  });
+});