srcdev-nuxt-components 9.6.7 → 9.6.9

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");
-  });
-});

package/app/components/05.forms/input-text/InputTextWithLabel.vue

@@ -1,154 +0,0 @@
-<template>
-  <div>
-    <div
-      class="input-text-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-text-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>
-
-      <InputTextCore
-        :id
-        v-model="modelValue"
-        v-model:is-dirty="isDirty"
-        v-model:is-active="isActive"
-        :type
-        :inputmode
-        :maxlength
-        :min
-        :max
-        :name
-        :placeholder
-        :label
-        :error-message
-        :field-has-error
-        :required
-        :style-class-passthrough
-        :theme
-        :aria-describedby="ariaDescribedby()"
-        :input-variant
-      >
-        <template v-if="slots.left" #left>
-          <slot name="left"></slot>
-        </template>
-        <template v-if="slots.right" #right>
-          <slot name="right"></slot>
-        </template>
-      </InputTextCore>
-
-      <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 { InputTypesText, FormUiTheme, InputUiVariant, InputMode } from "~/types/forms/types.forms";
-
-interface Props {
-  maxlength?: number;
-  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
-  min?: string | number;
-  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
-  max?: string | number;
-  type: InputTypesText;
-  inputmode?: InputMode;
-  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,
-  min: undefined,
-  max: undefined,
-  inputmode: "text",
-  placeholder: "",
-  fieldHasError: false,
-  required: 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>({ 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>