srcdev-nuxt-components 9.6.8 → 9.6.10

package/app/components/05.forms/input-select/InputSelectCore.vue

@@ -1,188 +0,0 @@
-<template>
-  <div
-    class="input-select-wrapper"
-    :data-theme="theme"
-    :data-invalid="fieldHasError ? '' : null"
-    :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
-  >
-    <select
-      :id
-      v-model="modelValue"
-      :aria-invalid="fieldHasError ? 'true' : undefined"
-      :class="['input-select-core', elementClasses]"
-      :name
-      :title
-      :required
-      :aria-describedby="ariaDescribedby"
-      @focusin="isActive = true"
-      @focusout="isActive = false"
-      @change="isDirty = true"
-    >
-      <option v-if="placeholder" value="" disabled :selected="!modelValue" class="input-select-core-option placeholder">
-        {{ placeholder }}
-      </option>
-      <option
-        v-for="item in fieldData.data"
-        :key="item.id"
-        :value="item.value"
-        :selected="String(item.value) === String(modelValue)"
-        class="input-select-core-option"
-      >
-        <Icon
-          v-if="item.icon"
-          :name="item.icon"
-          class="input-select-core-option-decorator-icon"
-          aria-hidden="true"
-          focusable="false"
-        />
-        {{ item.label }}
-      </option>
-    </select>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IFormMultipleOptions, FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
-
-interface Props {
-  id: string;
-  name: string;
-  placeholder?: string;
-  title?: string;
-  required?: boolean;
-  fieldHasError?: boolean;
-  styleClassPassthrough?: string | string[];
-  theme?: FormUiTheme;
-  inputVariant?: InputUiVariant;
-  ariaDescribedby?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: "",
-  title: "Please select an option",
-  required: false,
-  fieldHasError: false,
-  styleClassPassthrough: () => [],
-  theme: "default",
-  inputVariant: "normal",
-  ariaDescribedby: "",
-});
-
-const modelValue = defineModel<string | number | readonly number[]>({ required: true });
-const isDirty = defineModel<boolean>("isDirty");
-const isActive = defineModel<boolean>("isActive");
-const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-@layer components {
-.input-select-wrapper {
-  /* Public --input-select-* tokens, inline-fallback to the shared --theme-* tokens (see
-     theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
-     input/control that also reads --theme-input-surface/--theme-border. --_border is the one
-     genuinely reused value (border, underlined border-bottom, open-picker border); the rest of
-     this component's tokens are used at exactly one point each, so they're inlined directly
-     rather than wrapped in a private var with no composition or state-swap behind it (see
-     pitfall #20 in CLAUDE.md). */
-  --_border: var(--input-select-border, var(--theme-border));
-  /* Split so hover (mouse) and :focus-visible (keyboard/assistive) can diverge — both default to
-     the same --theme-border-focus today, identical appearance to before this token existed, but
-     each now has its own override point. */
-  --_border-focus: var(--input-select-border-focus, var(--theme-border-focus));
-
-  background-color: var(--input-select-surface, var(--theme-input-surface));
-  overflow: hidden;
-
-  z-index: 2;
-  position: relative;
-  transition: all var(--theme-form-transition-duration) ease-in-out;
-
-  &.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;
-  }
-
-  &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
-  }
-
-  &:has(:hover) {
-    outline: var(--form-element-outline-width-focus) solid
-      var(--input-select-border-hover, var(--theme-border-focus));
-    outline-offset: var(--form-element-outline-offset-focus);
-  }
-
-  &:has(select:focus-visible) {
-    outline: var(--form-element-outline-width-focus) solid var(--_border-focus);
-    outline-offset: var(--form-element-outline-offset-focus);
-  }
-
-  .input-select-core {
-    appearance: none;
-    background-color: transparent;
-    display: flex;
-    align-items: center;
-
-    /* Start modern Select CSS */
-    &,
-    &::picker(select) {
-      appearance: base-select;
-    }
-
-    &::picker(select) {
-      transition:
-        display allow-discrete var(--theme-form-transition-duration),
-        opacity var(--theme-form-transition-duration),
-        overlay var(--theme-form-transition-duration) allow-discrete;
-    }
-
-    &:not(:open)::picker(select) {
-      opacity: 0;
-    }
-
-    &:open::picker(select) {
-      opacity: 1;
-      border: var(--form-element-border-width) solid var(--_border);
-      outline: var(--form-element-outline-width) solid var(--_border-focus);
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-
-    border: none;
-    outline: none;
-    border-radius: 0;
-    width: 100%;
-
-    /* END modern Select CSS */
-
-    font-family: var(--font-family);
-    font-size: var(--input-font-size);
-    /* line-height: var(--input-element-line-height); */
-    padding-block: var(--input-padding-block);
-    padding-inline: var(--input-padding-inline);
-    min-height: var(--input-min-height);
-
-    .input-select-core-option {
-      min-height: var(--input-select-option-min-height);
-      gap: 1.5rem;
-      transition: all var(--theme-form-transition-duration) ease-in-out;
-
-      &:hover {
-        background-color: var(--input-select-surface-hover, var(--theme-input-surface-hover));
-      }
-
-      .input-select-core-option-decorator-icon {
-        display: inline-block;
-        width: 1.5rem;
-        height: 1.5rem;
-      }
-    }
-  }
-}
-}
-</style>

package/app/components/05.forms/input-select/InputSelectWithLabel.vue

@@ -1,118 +0,0 @@
-<template>
-  <div>
-    <div
-      class="input-select-with-label"
-      :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
-      :data-testid
-      :data-theme="theme"
-      :data-invalid="fieldHasError ? '' : null"
-    >
-      <InputLabel
-        :id
-        :required
-        :input-variant
-        :field-has-error
-        :style-class-passthrough="['input-select-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>
-
-      <InputSelectCore
-        :id
-        v-model="modelValue"
-        v-model:field-data="fieldData"
-        v-model:is-dirty="isDirty"
-        v-model:is-active="isActive"
-        :name
-        :placeholder
-        :field-has-error
-        :required
-        :style-class-passthrough
-        :theme="FormUiTheme"
-        :aria-describedby="ariaDescribedby()"
-        :input-variant
-      />
-
-      <InputError
-        :id="errorId"
-        :error-message="errorMessage"
-        :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, IFormMultipleOptions } from "~/types/forms/types.forms";
-
-interface Props {
-  dataTestid?: string;
-  name: string;
-  label: string;
-  placeholder?: string;
-  errorMessage: object | string;
-  required?: boolean;
-  fieldHasError?: boolean;
-  styleClassPassthrough?: string | string[];
-  theme?: FormUiTheme;
-  inputVariant?: InputUiVariant;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  dataTestid: "input-select-with-label",
-  placeholder: "",
-  required: false,
-  fieldHasError: false,
-  styleClassPassthrough: () => [],
-  theme: "default",
-  inputVariant: "normal",
-});
-
-const slots = useSlots();
-
-const FormUiTheme = computed(() => {
-  return props.fieldHasError ? "error" : props.theme;
-});
-
-const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
-  props.name,
-  toRef(props, "fieldHasError"),
-  slots
-);
-
-const modelValue = defineModel<string | number | readonly number[]>({ required: true });
-const isDirty = defineModel<boolean>("isDirty");
-const isActive = defineModel<boolean>("isActive");
-const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
-</script>

package/app/components/05.forms/input-select/stories/InputSelectCore.stories.ts

@@ -1,69 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
-import StorybookComponent from "../InputSelectCore.vue";
-import type { IFormMultipleOptions, InputUiVariant } from "~/types/forms/types.forms.d";
-
-interface InputSelectCoreStoryArgs {
-  id: string;
-  name: string;
-  placeholder: string;
-  required: boolean;
-  fieldHasError: boolean;
-  inputVariant: InputUiVariant;
-}
-
-export default {
-  title: "Components/Forms/Input Select/InputSelectCore",
-  component: StorybookComponent,
-  argTypes: {
-    id: { control: "text", table: { category: "Basic" } },
-    name: { control: "text", table: { category: "Basic" } },
-    placeholder: { control: "text", table: { category: "Basic" } },
-    required: { control: "boolean", table: { category: "Basic" } },
-    fieldHasError: { control: "boolean", table: { category: "States" } },
-    inputVariant: {
-      control: { type: "select" },
-      options: ["normal", "outlined", "underlined"],
-      table: { category: "Styling" },
-    },
-  },
-  args: {
-    id: "select-default",
-    name: "selectDefault",
-    placeholder: "Choose a service",
-    required: false,
-    fieldHasError: false,
-    inputVariant: "normal",
-  },
-} as Meta<InputSelectCoreStoryArgs>;
-
-const Template: StoryFn<InputSelectCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref<string | number>("");
-    const fieldData = ref<IFormMultipleOptions>({
-      data: [
-        { id: "1", name: "balayage", value: "balayage", label: "Balayage" },
-        { id: "2", name: "highlights", value: "highlights", label: "Highlights" },
-        { id: "3", name: "full-colour", value: "full-colour", label: "Full Colour" },
-      ],
-      total: 3,
-      skip: 0,
-      limit: 10,
-    });
-    return { args, modelValue, fieldData };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue" v-model:field-data="fieldData" />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true };
-
-export const Underlined = Template.bind({});
-Underlined.args = { inputVariant: "underlined" };

package/app/components/05.forms/input-select/stories/InputSelectWithLabel.stories.ts

@@ -1,115 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref, computed } from "vue";
-import StorybookComponent from "../InputSelectWithLabel.vue";
-import type { FormUiTheme, InputUiVariant, IFormMultipleOptions } from "~/types/forms/types.forms.d";
-
-interface InputSelectWithLabelStoryArgs {
-  modelValue: string | number;
-  name: string;
-  label: string;
-  placeholder: string;
-  errorMessage: string;
-  fieldHasError: boolean;
-  required: boolean;
-  theme: FormUiTheme;
-  inputVariant: InputUiVariant;
-  styleClassPassthrough: string[];
-  useDescriptionSlot: boolean;
-  descriptionContent: string;
-}
-
-export default {
-  title: "Components/Forms/Input Select/InputSelectWithLabel",
-  component: StorybookComponent,
-  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" } },
-    errorMessage: { control: "text", table: { category: "Validation" } },
-    fieldHasError: { control: "boolean", table: { category: "Validation" } },
-    required: { 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" } },
-    useDescriptionSlot: { control: "boolean", table: { category: "Slots" } },
-    descriptionContent: { control: "text", table: { category: "Slots" } },
-  },
-  args: {
-    modelValue: "",
-    name: "colour",
-    label: "Favourite colour",
-    placeholder: "Choose a colour",
-    errorMessage: "",
-    fieldHasError: false,
-    required: false,
-    theme: "default",
-    inputVariant: "normal",
-    styleClassPassthrough: [],
-    useDescriptionSlot: false,
-    descriptionContent: "Pick the colour you like best",
-  },
-} as Meta<InputSelectWithLabelStoryArgs>;
-
-// `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<InputSelectWithLabelStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const fieldData = ref<IFormMultipleOptions>({
-      data: [
-        { id: "1", name: "red", value: "red", label: "Red" },
-        { id: "2", name: "blue", value: "blue", label: "Blue" },
-        { id: "3", name: "green", value: "green", label: "Green" },
-      ],
-      total: 3,
-      skip: 0,
-      limit: 10,
-    });
-
-    const componentArgs = computed(() => {
-      const { useDescriptionSlot, descriptionContent, ...rest } = args;
-      return rest;
-    });
-
-    return { args, componentArgs, fieldData };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-model="args.modelValue" v-model:field-data="fieldData" v-bind="componentArgs">
-        <template v-if="args.useDescriptionSlot" #descriptionText>{{ args.descriptionContent }}</template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const WithError = Template.bind({});
-WithError.args = {
-  fieldHasError: true,
-  errorMessage: "Please choose a colour",
-  theme: "error",
-};
-
-export const Required = Template.bind({});
-Required.args = { required: true };
-
-export const WithDescription = Template.bind({});
-WithDescription.args = { useDescriptionSlot: true };
-
-export const Underlined = Template.bind({});
-Underlined.args = { inputVariant: "underlined" };
-
-export const Outlined = Template.bind({});
-Outlined.args = { inputVariant: "outlined", useDescriptionSlot: true };

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

@@ -1,87 +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 "../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");
-  });
-});