srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/components/forms/input-number/variants/InputNumberDefault.vue

@@ -0,0 +1,150 @@
+<template>
+  <div
+    class="input-number-with-label"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]"
+  >
+    <InputLabel
+      :id
+      :for="id"
+      :theme
+      :name
+      input-variant="normal"
+      :field-has-error
+      :style-class-passthrough="['input-number-label', 'body-normal-bold']"
+    >
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
+
+    <InputDescription
+      :id
+      :description-id
+      :name
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
+
+    <InputNumberCore
+      :id
+      v-model="modelValue"
+      :name
+      :min
+      :max
+      :step
+      :theme
+      :required
+      :weight
+      :field-has-error
+      :style-class-passthrough
+      :aria-describedby
+    >
+      <template v-if="slots.left" #left>
+        <InputButtonCore
+          type="button"
+          :readonly="Number(modelValue) <= min"
+          :is-pending="false"
+          button-text="Step down"
+          :theme="theme"
+          variant="inline"
+          @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
+        >
+          <template #iconOnly>
+            <slot name="left"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+      <template v-if="slots.right" #right>
+        <InputButtonCore
+          type="button"
+          :readonly="Number(modelValue) >= max"
+          :is-pending="false"
+          button-text="Step up"
+          :theme="theme"
+          variant="inline"
+          @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
+        >
+          <template #iconOnly>
+            <slot name="right"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+    </InputNumberCore>
+    <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormWeight } from "~/types/forms/types.forms";
+
+interface Props {
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  step?: number;
+  placeholder?: string;
+  errorMessage: object | string;
+  fieldHasError?: boolean;
+  required?: boolean;
+  theme?: "default" | "success" | "error" | "warning";
+  weight?: FormWeight;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  placeholder: "",
+  fieldHasError: false,
+  required: false,
+  theme: "default",
+  weight: "normal",
+  styleClassPassthrough: () => [],
+});
+
+const slots = useSlots();
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+const modelValue = defineModel<number | readonly number[]>();
+
+const updateValue = (step: number, withinRangeLimit: boolean) => {
+  if (withinRangeLimit) {
+    modelValue.value = (Number(modelValue.value) + step) as number;
+  }
+};
+
+updateElementClasses(["has-left-button", "has-right-button"]);
+</script>
+
+<style lang="css">
+@layer components {
+.input-number-with-label {
+  .input-number-label {
+    display: block;
+    margin-block: 0.8rem;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .label-description {
+    font-family: var(--font-family);
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
+  }
+}
+}
+</style>

package/app/components/forms/input-radio/MultipleRadiobuttons.vue

@@ -0,0 +1,180 @@
+<template>
+  <FormFieldset
+    :id
+    :name
+    :legend
+    :field-has-error
+    :required
+    :data-testid
+    :style-class-passthrough="['multiple-radiobuttons-fieldset', elementClasses]"
+  >
+    <template #content>
+      <InputDescription
+        :id
+        :description-id
+        :name
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-text-description']"
+      >
+        <template #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
+
+      <div ref="itemsContainer" class="multiple-radiobuttons-items" :class="[optionsLayout]">
+        <template v-for="item in fieldData.data" :key="item.id">
+          <InputCheckboxRadioButton
+            v-if="isButton"
+            :id="`${name}-${item.value}`"
+            v-model="modelValue"
+            type="radio"
+            :name="`${name}-${item.name}`"
+            :required
+            :label="item.label"
+            :field-has-error
+            :true-value="item.value"
+            :options-layout
+            :theme
+            :input-variant
+            :direction
+            :aria-describedby
+            :is-pill="isPill"
+          >
+            <template #checkedIcon>
+              <slot name="checkedIcon"></slot>
+            </template>
+            <template #itemIcon>
+              <slot name="itemIcon">
+                <Icon name="material-symbols:add-2" class="icon" />
+              </slot>
+            </template>
+          </InputCheckboxRadioButton>
+          <InputCheckboxRadioWithLabel
+            v-else
+            :id="`${name}-${item.value}`"
+            v-model="modelValue"
+            type="radio"
+            :name="`${name}-${item.name}`"
+            :required
+            :label="item.label"
+            :field-has-error
+            :true-value="item.value"
+            :options-layout
+            :theme
+            :input-variant
+            :aria-describedby
+          >
+            <template #checkedIcon>
+              <slot name="checkedIcon"></slot>
+            </template>
+          </InputCheckboxRadioWithLabel>
+        </template>
+      </div>
+      <InputError :id="errorId" :error-message="errorMessage" :show-error="fieldHasError" :is-detached="true" :input-variant />
+    </template>
+  </FormFieldset>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, OptionsLayout, IFormMultipleOptions, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  dataTestid?: string;
+  name: string;
+  legend: string;
+  label: string;
+  placeholder?: string;
+  isButton?: boolean;
+  isPill?: boolean;
+  errorMessage: object | string;
+  required?: boolean;
+  fieldHasError?: boolean;
+  multipleOptions?: boolean;
+  optionsLayout?: OptionsLayout;
+  equalCols?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+  direction?: "row" | "row-reverse";
+  displayAsLozenge?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dataTestid: "multiple-radio-buttons",
+  placeholder: "",
+  isButton: false,
+  isPill: false,
+  required: false,
+  fieldHasError: false,
+  multipleOptions: false,
+  optionsLayout: "equal-widths",
+  equalCols: true,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+  direction: "row",
+  displayAsLozenge: false,
+});
+
+const slots = useSlots();
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
+const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
+
+const { maxChildWidth, itemsContainer, updateMaxChildWidth } = useMaxChildWidth(
+  ".input-checkbox-radio-label, .input-checkbox-radio-with-label-label",
+  "100px"
+);
+
+onMounted(() => {
+  updateMaxChildWidth();
+});
+
+watch(
+  () => fieldData.value.data,
+  () => {
+    nextTick(updateMaxChildWidth);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+.multiple-radiobuttons-items {
+  display: flex;
+  gap: 1.2rem;
+  margin-top: 1.2rem;
+
+  &.inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &.block {
+    flex-direction: column;
+  }
+
+  &.equal-widths {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(
+        calc(var(--input-checked-icon-gap) + (2 * var(--input-checkbox-label-padding-inline)) + v-bind(maxChildWidth)),
+        1fr
+      )
+    );
+  }
+}
+}
+</style>

package/app/components/forms/input-radio/tests/MultipleRadioButtons.spec.ts

@@ -0,0 +1,90 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { ref } from "vue";
+import type { FormUiTheme, OptionsLayout } from "~/types/forms/types.forms";
+import ComponentUnderTest from "../MultipleRadiobuttons.vue";
+import tagsData from "./data/tags.json";
+
+const initialPropsData = {
+  dataTestid: "multiple-radio-buttons",
+  id: "tags",
+  name: "tags",
+  legend: "Choose tags (as checkboxes)",
+  required: true,
+  label: "Check between 3 and 8 tags",
+  placeholder: "eg. Type something here",
+  isButton: true,
+  errorMessage: "Please select between 3 and 8 tags",
+  fieldHasError: false,
+  fieldData: tagsData,
+  optionsLayout: "inline" as OptionsLayout,
+  styleClassPassthrough: ["testClass"],
+  theme: "default" as FormUiTheme,
+};
+
+const initialSlots = {
+  checkedIcon: () => ``,
+  itemIcon: () => `<Icon name="material-symbols:add-2" class="icon" />`,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slotsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+  const mockSlotsData = { ...initialSlots, ...slotsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots: mockSlotsData,
+  });
+};
+
+describe("MultipleRadioButtons Component", () => {
+  it("Mounts", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("renders properly", async () => {
+    wrapper = await wrapperFactory();
+    const dataTestIdElem = wrapper.attributes("data-testid");
+    expect(dataTestIdElem).toBe(initialPropsData.dataTestid);
+    // The styleClassPassthrough is applied to the FormFieldset component, not the root
+    expect(wrapper.find(".form-fieldset").classes()).toContain("testClass");
+  });
+
+  it("updates radio modelValue when items clicked", async () => {
+    const modelValue = ref<string>("");
+    const propsData = {
+      modelValue,
+    };
+    wrapper = await wrapperFactory(propsData);
+
+    /*
+     * Test the first radio button
+     **/
+    const radiobuttonElements = wrapper.findAll('input[type="radio"]');
+    const firstRadioButton = radiobuttonElements[0];
+    expect(firstRadioButton).toBeDefined();
+    expect(firstRadioButton!.attributes("aria-checked")).toBe("false");
+    const firstRadioButtonTrueValue = firstRadioButton!.attributes("true-value");
+
+    await firstRadioButton!.trigger("click");
+    expect(firstRadioButton!.attributes("aria-checked")).toBe("true");
+    expect(wrapper.vm.modelValue).toEqual(firstRadioButtonTrueValue);
+
+    /*
+     * Test the second radio button
+     **/
+    const secondRadioButton = radiobuttonElements[1];
+    expect(secondRadioButton).toBeDefined();
+    expect(secondRadioButton!.attributes("aria-checked")).toBe("false");
+    const secondRadioButtonTrueValue = secondRadioButton!.attributes("true-value");
+
+    await secondRadioButton!.trigger("click");
+    expect(firstRadioButton!.attributes("aria-checked")).toBe("false");
+    expect(secondRadioButton!.attributes("aria-checked")).toBe("true");
+    expect(wrapper.vm.modelValue).toEqual(secondRadioButtonTrueValue);
+  });
+});

package/app/components/forms/input-radio/tests/data/tags.json

@@ -0,0 +1,67 @@
+{
+  "data": [
+    {
+      "id": "pizza",
+      "name": "tags",
+      "value": "pizza",
+      "label": "Pizza"
+    },
+    {
+      "id": "italian",
+      "name": "tags",
+      "value": "italian",
+      "label": "Italian"
+    },
+    {
+      "id": "vegetarian",
+      "name": "tags",
+      "value": "vegetarian",
+      "label": "Vegetarian"
+    },
+    {
+      "id": "stir-fry",
+      "name": "tags",
+      "value": "stir-fry",
+      "label": "Stir-fry"
+    },
+    {
+      "id": "asian",
+      "name": "tags",
+      "value": "asian",
+      "label": "Asian"
+    },
+    {
+      "id": "cookies",
+      "name": "tags",
+      "value": "cookies",
+      "label": "Cookies"
+    },
+    {
+      "id": "dessert",
+      "name": "tags",
+      "value": "dessert",
+      "label": "Dessert"
+    },
+    {
+      "id": "baking",
+      "name": "tags",
+      "value": "baking",
+      "label": "Baking"
+    },
+    {
+      "id": "pasta",
+      "name": "tags",
+      "value": "pasta",
+      "label": "Pasta"
+    },
+    {
+      "id": "chicken",
+      "name": "tags",
+      "value": "chicken",
+      "label": "Chicken"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}