srcdev-nuxt-forms 3.0.0 → 4.0.0

package/components/forms/input-checkbox/MultipleCheckboxes.vue

@@ -0,0 +1,203 @@
+<template>
+  <fieldset class="multiple-checkboxes-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
+    <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
+
+    <div v-if="hasDescriptionSlot" :id="`${id}-description`">
+      <slot name="description"></slot>
+    </div>
+
+    <div class="multiple-checkboxes-items" :class="[optionsLayout]">
+      <template v-for="item in fieldData.data" :key="item.id">
+        <InputCheckboxRadioButton
+          v-if="isButton"
+          type="checkbox"
+          :id="`${name}-${item.value}`"
+          :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="checkbox"
+          :id="`${name}-${item.value}`"
+          :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 { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
+
+const { dataTestid, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'multiple-checkboxes',
+  },
+  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 hasDescription = computed(() => slots.description !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const modelValue = defineModel();
+const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+
+const id = useId();
+const errorId = `${name}-error-message`;
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
+  return fieldHasError ? errorId : ariaDescribedbyId;
+});
+</script>
+
+<style lang="css">
+.multiple-checkboxes-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-checkboxes-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  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-checkbox/SingleCheckbox.vue

@@ -0,0 +1,169 @@
+<template>
+  <fieldset class="single-checkbox-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
+    <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
+
+    <div v-if="hasDescriptionSlot" :id="`${name}-description`">
+      <slot name="description"></slot>
+    </div>
+
+    <div class="single-checkbox-items" :class="[optionsLayout]">
+      <InputCheckboxRadioWithLabel type="checkbox" :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme :ariaDescribedby>
+        <template #checkedIcon>
+          <slot name="checkedIcon"></slot>
+        </template>
+        <template v-if="hasLabelContent" #labelContent>
+          <slot name="labelContent"></slot>
+        </template>
+      </InputCheckboxRadioWithLabel>
+    </div>
+    <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" :styleClassPassthrough="inputErrorStyles" />
+  </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: false,
+    default: '',
+  },
+  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);
+    },
+  },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  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);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
+const hasDescription = computed(() => slots.description !== undefined);
+const hasLabelContent = computed(() => slots.labelContent !== undefined);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const modelValue = defineModel();
+const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+
+const inputErrorStyles = ref<string[]>(props.styleClassPassthrough);
+
+const errorId = `${name}-error-message`;
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
+  return props.fieldHasError ? errorId : ariaDescribedbyId;
+});
+
+watchEffect(() => {
+  if (!hasDescription.value && props.fieldHasError) {
+    inputErrorStyles.value.push('mbs-12');
+  } else {
+    inputErrorStyles.value = inputErrorStyles.value.filter((style) => style !== 'mbs-12');
+  }
+});
+</script>
+
+<style lang="css">
+.single-checkbox-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;
+  }
+}
+
+.single-checkbox-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-checkbox/tests/MultipleCheckboxes.spec.ts

@@ -0,0 +1,98 @@
+// 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 '../MultipleCheckboxes.vue';
+import tagsData from './data/tags.json';
+
+let initialPropsData = {
+  dataTestid: 'multiple-checkboxes',
+  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('MultipleCheckboxes 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 checkbox modelValue when items clicked', async () => {
+    const modelValue = ref<string[]>([]);
+    const propsData = {
+      modelValue,
+    };
+    wrapper = await wrapperFactory(propsData);
+    const checkboxElements = wrapper.findAll('input[type="checkbox"]');
+
+    /*
+     * Test the first checkbox checked
+     **/
+    const firstCheckbox = checkboxElements[0];
+    expect(firstCheckbox.attributes('aria-checked')).toBe('false');
+    const firstCheckboxTrueValue = firstCheckbox.attributes('true-value');
+
+    await firstCheckbox.trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue');
+    const firstEmittedEvents = wrapper.emitted('update:modelValue');
+    if (firstEmittedEvents && firstEmittedEvents[0]) {
+      expect(firstEmittedEvents[0]).includes(firstCheckboxTrueValue);
+    }
+
+    expect(firstCheckbox.attributes('aria-checked')).toBe('true');
+
+    /*
+     * Test the second checkbox chekced
+     **/
+    const secondCheckbox = checkboxElements[1];
+    expect(secondCheckbox.attributes('aria-checked')).toBe('false');
+    const secondCheckboxTrueValue = secondCheckbox.attributes('true-value');
+
+    await secondCheckbox.trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue');
+    const secondEmittedEvents = wrapper.emitted('update:modelValue');
+    if (secondEmittedEvents && secondEmittedEvents[0]) {
+      expect(secondEmittedEvents[1]).includes(secondCheckboxTrueValue);
+    }
+
+    expect(secondCheckbox.attributes('aria-checked')).toBe('true');
+  });
+});

package/components/forms/input-checkbox/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
+}