srcdev-nuxt-components 9.6.8 → 9.6.10

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

@@ -1,60 +0,0 @@
-// 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 "../InputTextCore.vue";
-
-const initialPropsData = {
-  id: "test-input",
-  name: "testName",
-  modelValue: "",
-};
-
-let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
-const wrapperFactory = (propsData = {}) => {
-  const mockPropsData = { ...initialPropsData, ...propsData };
-
-  return mountSuspended(ComponentUnderTest, {
-    attachTo: document.body,
-    props: mockPropsData,
-  });
-};
-
-describe("InputTextCore", () => {
-  it("mounts without error", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("does not set min/max attributes when not provided", async () => {
-    wrapper = await wrapperFactory();
-    const input = wrapper.find("input");
-
-    expect(input.attributes("min")).toBeUndefined();
-    expect(input.attributes("max")).toBeUndefined();
-  });
-
-  it("passes through a string min/max (e.g. for type=date)", async () => {
-    wrapper = await wrapperFactory({
-      type: "date",
-      min: "2026-01-01",
-      max: "2026-12-31",
-    });
-    const input = wrapper.find("input");
-
-    expect(input.attributes("type")).toBe("date");
-    expect(input.attributes("min")).toBe("2026-01-01");
-    expect(input.attributes("max")).toBe("2026-12-31");
-  });
-
-  it("passes through a numeric min/max (e.g. for type=number)", async () => {
-    wrapper = await wrapperFactory({
-      type: "number",
-      min: 0,
-      max: 100,
-    });
-    const input = wrapper.find("input");
-
-    expect(input.attributes("min")).toBe("0");
-    expect(input.attributes("max")).toBe("100");
-  });
-});

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

@@ -1,71 +0,0 @@
-// 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 "../InputTextWithLabel.vue";
-import { defineComponent, nextTick, ref } from "vue";
-
-const initialPropsData = {
-  type: "text" as const,
-  name: "testName",
-  label: "Test label",
-  errorMessage: "",
-  modelValue: "",
-};
-
-let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
-const wrapperFactory = (propsData = {}) => {
-  const mockPropsData = { ...initialPropsData, ...propsData };
-
-  return mountSuspended(ComponentUnderTest, {
-    attachTo: document.body,
-    props: mockPropsData,
-  });
-};
-
-describe("InputTextWithLabel", () => {
-  it("mounts without error", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders the label text", async () => {
-    wrapper = await wrapperFactory({ label: "Email address" });
-    expect(wrapper.text()).toContain("Email address");
-  });
-
-  it("forwards min/max through to the underlying InputTextCore input (e.g. for type=date)", async () => {
-    wrapper = await wrapperFactory({
-      type: "date",
-      min: "2026-01-01",
-      max: "2026-12-31",
-    });
-    const input = wrapper.find("input");
-
-    expect(input.attributes("type")).toBe("date");
-    expect(input.attributes("min")).toBe("2026-01-01");
-    expect(input.attributes("max")).toBe("2026-12-31");
-  });
-
-  it("points aria-describedby at the description once it appears after mount", async () => {
-    const Host = defineComponent({
-      components: { ComponentUnderTest },
-      setup() {
-        return { modelValue: ref(""), showDescription: ref(false) };
-      },
-      template: `
-        <ComponentUnderTest v-model="modelValue" type="text" name="email" label="Email" error-message="">
-          <template v-if="showDescription" #descriptionText>We never share it.</template>
-        </ComponentUnderTest>
-      `,
-    });
-    const host = await mountSuspended(Host);
-    const input = () => host.find("input");
-    expect(input().attributes("aria-describedby")).toBeFalsy();
-    (host.vm as unknown as { showDescription: boolean }).showDescription = true;
-    await nextTick();
-    expect(input().attributes("aria-describedby")).toMatch(/-description$/);
-    (host.vm as unknown as { showDescription: boolean }).showDescription = false;
-    await nextTick();
-    expect(input().attributes("aria-describedby")).toBeFalsy();
-  });
-});

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

@@ -1,159 +0,0 @@
-<template>
-  <div
-    class="input-textarea-wrapper"
-    :data-theme="theme"
-    :data-invalid="fieldHasError ? '' : null"
-    :class="[
-      inputVariant,
-      { dirty: isDirty },
-      { active: isActive },
-      { error: fieldHasError },
-      { 'has-left-slot': slots.left },
-      { 'has-right-slot': slots.right },
-    ]"
-  >
-    <span v-if="slots.left" class="slot left-slot">
-      <slot name="left"></slot>
-    </span>
-
-    <textarea
-      :id
-      ref="inputField"
-      v-model="modelValue"
-      :maxlength
-      :placeholder
-      :name
-      :required
-      :class="['input-textarea-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
-      :aria-invalid="fieldHasError"
-      :aria-describedby
-      @focusin="updateFocus(true)"
-      @focusout="updateFocus(false)"
-    ></textarea>
-
-    <span v-if="slots.right" class="slot right-slot">
-      <slot name="right"></slot>
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
-
-interface Props {
-  maxlength?: number;
-  id: string;
-  name: string;
-  placeholder?: string;
-  ariaDescribedby?: string;
-  fieldHasError?: boolean;
-  required?: boolean;
-  styleClassPassthrough?: string | string[];
-  theme?: FormUiTheme;
-  inputVariant?: InputUiVariant;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  maxlength: 255,
-  placeholder: "",
-  ariaDescribedby: "",
-  fieldHasError: false,
-  required: false,
-  styleClassPassthrough: () => [],
-  theme: "default",
-  inputVariant: "normal",
-});
-
-const slots = useSlots();
-
-const modelValue = defineModel<string | number | readonly string[] | null | undefined>({
-  required: true,
-});
-const isDirty = defineModel<boolean>("isDirty");
-const isActive = defineModel<boolean>("isActive");
-
-const updateFocus = (isFocused: boolean) => {
-  isActive.value = isFocused;
-};
-
-const inputField = ref<HTMLInputElement | null>(null);
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-@layer components {
-.input-textarea-wrapper {
-  /* 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(--_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(--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(--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(--_border);
-  }
-
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  .slot {
-    display: flex;
-    place-items: center;
-    background-clip: padding-box;
-  }
-
-  .input-textarea-core {
-    all: unset;
-    touch-action: manipulation;
-    flex-grow: 1;
-    field-sizing: content;
-
-    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);
-    padding-block: var(--form-textarea-padding-block);
-    padding-inline: var(--form-textarea-padding-inline);
-
-    min-height: 6lh;
-
-    &::placeholder {
-      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;
-    }
-  }
-}
-}
-</style>

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

@@ -1,136 +0,0 @@
-<template>
-  <div>
-    <div
-      class="input-textarea-with-label"
-      :data-theme="theme"
-      :data-invalid="fieldHasError ? '' : null"
-      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
-    >
-      <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>
-
-      <InputTextareaCore
-        :id
-        v-model="modelValue"
-        v-model:is-dirty="isDirty"
-        v-model:is-active="isActive"
-        :maxlength
-        :name
-        :placeholder
-        :field-has-error
-        :required
-        :style-class-passthrough
-        :theme
-        :input-variant
-        :aria-describedby="ariaDescribedby()"
-      >
-        <template v-if="slots.left" #left>
-          <slot name="left"></slot>
-        </template>
-        <template v-if="slots.right" #right>
-          <slot name="right"></slot>
-        </template>
-      </InputTextareaCore>
-      <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="false" :input-variant />
-    </div>
-
-    <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;
-  styleClassPassthrough?: string | string[];
-  theme?: FormUiTheme;
-  inputVariant?: InputUiVariant;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  maxlength: 255,
-  placeholder: "",
-  fieldHasError: false,
-  required: false,
-  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 } = useStyleClassPassthrough(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>

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

@@ -1,247 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed } from "vue";
-import StorybookComponent from "../InputTextareaCore.vue";
-import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
-
-interface InputTextareaCoreStoryArgs {
-  modelValue: string;
-  maxlength: number;
-  id: string;
-  name: string;
-  placeholder: string;
-  ariaDescribedby: string;
-  fieldHasError: boolean;
-  required: boolean;
-  theme: FormUiTheme;
-  inputVariant: InputUiVariant;
-  styleClassPassthrough: string[];
-  leftSlotContent: string;
-  rightSlotContent: string;
-  useLeftSlot: boolean;
-  useRightSlot: boolean;
-}
-
-export default {
-  title: "Components/Forms/Input Textarea/InputTextareaCore",
-  component: StorybookComponent,
-  argTypes: {
-    // Model
-    modelValue: {
-      control: "text",
-      description: "The textarea value",
-      table: {
-        category: "Model",
-      },
-    },
-
-    // Basic Configuration
-    maxlength: {
-      control: { type: "number", min: 1, max: 10000 },
-      description: "Maximum length of textarea",
-      table: {
-        category: "Basic",
-      },
-    },
-    id: {
-      control: "text",
-      description: "Element ID",
-      table: {
-        category: "Basic",
-      },
-    },
-    name: {
-      control: "text",
-      description: "Textarea name attribute",
-      table: {
-        category: "Basic",
-      },
-    },
-    placeholder: {
-      control: "text",
-      description: "Placeholder text",
-      table: {
-        category: "Basic",
-      },
-    },
-    ariaDescribedby: {
-      control: "text",
-      description: "ARIA describedby attribute",
-      table: {
-        category: "Accessibility",
-      },
-    },
-
-    // Validation
-    fieldHasError: {
-      control: "boolean",
-      description: "Whether field has validation error",
-      table: {
-        category: "Validation",
-      },
-    },
-    required: {
-      control: "boolean",
-      description: "Whether field is required",
-      table: {
-        category: "Validation",
-      },
-    },
-
-    // Styling
-    theme: {
-      control: { type: "select" },
-      options: ["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"],
-      description: "Theme for styling",
-      table: {
-        category: "Styling",
-      },
-    },
-    inputVariant: {
-      control: { type: "select" },
-      options: ["normal", "outlined", "underlined"],
-      description: "Textarea variant style",
-      table: {
-        category: "Styling",
-      },
-    },
-    styleClassPassthrough: {
-      control: "object",
-      description: "Additional CSS classes",
-      table: {
-        category: "Styling",
-      },
-    },
-
-    // Slots
-    useLeftSlot: {
-      control: "boolean",
-      description: "Use left slot",
-      table: {
-        category: "Slots",
-      },
-    },
-    useRightSlot: {
-      control: "boolean",
-      description: "Use right slot",
-      table: {
-        category: "Slots",
-      },
-    },
-    leftSlotContent: {
-      control: "text",
-      description: "Content for left slot",
-      table: {
-        category: "Slots",
-      },
-    },
-    rightSlotContent: {
-      control: "text",
-      description: "Content for right slot",
-      table: {
-        category: "Slots",
-      },
-    },
-  },
-  args: {
-    modelValue: "",
-    maxlength: 1000,
-    id: "example-textarea",
-    name: "example-textarea",
-    placeholder: "Enter your message...",
-    ariaDescribedby: "",
-    fieldHasError: false,
-    required: false,
-    theme: "default",
-    inputVariant: "normal",
-    styleClassPassthrough: [],
-    useLeftSlot: false,
-    useRightSlot: false,
-    leftSlotContent: "📝",
-    rightSlotContent: "✨",
-  },
-} as Meta<typeof StorybookComponent>;
-
-// `args` is Storybook's own reactive object — bind to it directly (`args.x`) rather than
-// destructuring it into local variables/refs, which would snapshot the values once at setup()
-// and stop reflecting later Controls-panel changes. `componentArgs` strips the non-prop
-// slot-toggle args so they don't leak onto the component as unknown attributes.
-const Template: StoryFn<InputTextareaCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const componentArgs = computed(() => {
-      const { useLeftSlot, useRightSlot, leftSlotContent, rightSlotContent, ...rest } = args;
-      return rest;
-    });
-
-    return { args, componentArgs };
-  },
-  template: `
-    <StorybookComponent
-      v-model="args.modelValue"
-      v-bind="componentArgs"
-    >
-      <template v-if="args.useLeftSlot" #left>{{ args.leftSlotContent }}</template>
-      <template v-if="args.useRightSlot" #right>{{ args.rightSlotContent }}</template>
-    </StorybookComponent>
-    <div class="mt-4 text-sm text-gray-600">
-      Character count: {{ args.modelValue.length }}
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const WithPlaceholder = Template.bind({});
-WithPlaceholder.args = {
-  placeholder: "Type your thoughts here...",
-};
-
-export const LongText = Template.bind({});
-LongText.args = {
-  modelValue:
-    "This is a longer piece of text that demonstrates how the textarea handles multiple lines and wrapping. You can continue typing and see how it behaves with more content.",
-  placeholder: "Enter a long message...",
-};
-
-export const Required = Template.bind({});
-Required.args = {
-  required: true,
-  placeholder: "This field is required",
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  fieldHasError: true,
-  theme: "error",
-  modelValue: "Invalid content",
-  placeholder: "Enter valid content",
-};
-
-export const WithSlots = Template.bind({});
-WithSlots.args = {
-  useLeftSlot: true,
-  useRightSlot: true,
-  leftSlotContent: "📝",
-  rightSlotContent: "✨",
-  placeholder: "Textarea with decorative slots",
-};
-
-export const Outlined = Template.bind({});
-Outlined.args = {
-  inputVariant: "outlined",
-  placeholder: "Outlined textarea",
-};
-
-export const Underlined = Template.bind({});
-Underlined.args = {
-  inputVariant: "underlined",
-  placeholder: "Underlined textarea",
-};
-
-export const CharacterLimit = Template.bind({});
-CharacterLimit.args = {
-  maxlength: 140,
-  placeholder: "Tweet-length message (140 chars max)",
-  modelValue: "This is a sample message to show character counting.",
-};