srcdev-nuxt-forms 3.0.0 → 4.1.0

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

@@ -0,0 +1,154 @@
+<template>
+  <div class="input-number-with-label" :data-form-theme="formTheme" :data-size="size" :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]">
+    <label class="input-number-label body-normal-bold" :for="id">{{ label }}</label>
+    <template v-if="hasDescription">
+      <slot name="description"></slot>
+    </template>
+
+    <InputNumberCore v-model="modelValue" :id :name :min :max :step :theme :required :size :weight :fieldHasError :styleClassPassthrough>
+      <template v-if="hasLeftContent" #left>
+        <InputButtonCore
+          type="button"
+          @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
+          :readonly="Number(modelValue) <= min"
+          :is-pending="false"
+          buttonText="Step down"
+          theme="input-action"
+          :size
+        >
+          <template #iconOnly>
+            <slot name="left"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+      <template v-if="hasRightContent" #right>
+        <InputButtonCore
+          type="button"
+          @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
+          :readonly="Number(modelValue) >= max"
+          :is-pending="false"
+          buttonText="Step up"
+          theme="input-action"
+          :size
+        >
+          <template #iconOnly>
+            <slot name="right"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+    </InputNumberCore>
+    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  min: {
+    type: Number,
+    required: true,
+  },
+  max: {
+    type: Number,
+    required: true,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const slots = useSlots();
+const hasDescription = computed(() => slots.description !== undefined);
+const hasLeftContent = computed(() => slots.left !== undefined);
+const hasRightContent = computed(() => slots.right !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const id = useId();
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+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">
+.input-number-with-label {
+  --_border-width: var(--form-element-border-width);
+  --_outline-width: var(--form-element-outline-width);
+  --_label-padding-inline: 1rem;
+
+  .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/components/forms/input-radio/MultipleRadiobuttons.vue

@@ -0,0 +1,201 @@
+<template>
+  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" class="multiple-radiobuttons-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
+    <legend :class="[{ 'has-description': hasDescriptionSlot }]">{{ legend }}</legend>
+
+    <div v-if="hasDescriptionSlot" :id="`${name}-description`">
+      <slot name="description"></slot>
+    </div>
+
+    <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
+      <template v-for="item in fieldData.data" :key="item.id">
+        <InputCheckboxRadioButton
+          v-if="isButton"
+          type="radio"
+          :id="`${name}-${item.value}`"
+          :name="`${name}-${item.name}`"
+          :required
+          :label="item.label"
+          :fieldHasError
+          v-model="modelValue"
+          :true-value="item.value"
+          :size
+          :optionsLayout
+          :theme
+          :direction
+          :ariaDescribedby
+        >
+          <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
+          type="radio"
+          :id="`${name}-${item.value}`"
+          :name="`${name}-${item.name}`"
+          :required
+          :label="item.label"
+          :fieldHasError
+          v-model="modelValue"
+          :true-value="item.value"
+          :size
+          :optionsLayout
+          :theme
+          :ariaDescribedby
+        >
+          <template #checkedIcon>
+            <slot name="checkedIcon"></slot>
+          </template>
+        </InputCheckboxRadioWithLabel>
+      </template>
+    </div>
+    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+import type { IFormMultipleOptions } from '@/types/types.forms';
+
+const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'multiple-radio-buttons',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  legend: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  isButton: {
+    type: Boolean,
+    default: false,
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  multipleOptions: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  optionsLayout: {
+    type: String as PropType<string>,
+    default: 'equal-widths',
+    validator(value: string) {
+      return propValidators.optionsLayout.includes(value);
+    },
+  },
+  equalCols: {
+    type: Boolean,
+    default: true,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  direction: {
+    type: String as PropType<'row' | 'row-reverse'>,
+    default: 'row',
+    validator(value: string) {
+      return ['row', 'row-reverse'].includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const id = useId();
+const errorId = `${name}-error-message`;
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
+  return props.fieldHasError ? errorId : ariaDescribedbyId;
+});
+
+const modelValue = defineModel();
+const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+</script>
+
+<style lang="css">
+.multiple-radiobuttons-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  legend {
+    font-family: var(--font-family);
+    font-size: 1.6rem;
+    font-weight: 500;
+
+    &.has-description {
+      margin-bottom: 0;
+    }
+  }
+
+  .label-description {
+    font-family: var(--font-family);
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
+  }
+}
+
+.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(100px, 1fr));
+  }
+}
+</style>

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

@@ -0,0 +1,89 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import { describe, it, expect } from 'vitest';
+import { VueWrapper } from '@vue/test-utils';
+import { mountSuspended } from '@nuxt/test-utils/runtime';
+import ComponentUnderTest from '../MultipleRadioButtons.vue';
+import tagsData from './data/tags.json';
+
+let 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,
+  size: 'small',
+  optionsLayout: 'inline',
+  styleClassPassthrough: ['testClass'],
+  theme: 'primary',
+};
+
+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);
+    expect(wrapper.find('[data-testid]').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.attributes('aria-checked')).toBe('false');
+    const firstRadioButtonTrueValue = firstRadioButton.attributes('true-value');
+
+    await firstRadioButton.trigger('click');
+    wrapper.vm.modelValue.value = firstRadioButtonTrueValue;
+    expect(firstRadioButton.attributes('aria-checked')).toBe('true');
+    expect(wrapper.vm.modelValue.value).toEqual(firstRadioButtonTrueValue);
+
+    /*
+     * Test the second radio button
+     **/
+    const secondRadioButton = radiobuttonElements[1];
+    expect(secondRadioButton.attributes('aria-checked')).toBe('false');
+    const secondRadioButtonTrueValue = secondRadioButton.attributes('true-value');
+
+    await secondRadioButton.trigger('click');
+    wrapper.vm.modelValue.value = secondRadioButtonTrueValue;
+    expect(firstRadioButton.attributes('aria-checked')).toBe('false');
+    expect(secondRadioButton.attributes('aria-checked')).toBe('true');
+    expect(wrapper.vm.modelValue.value).toEqual(secondRadioButtonTrueValue);
+  });
+});

package/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
+}