srcdev-nuxt-forms 2.1.28 → 2.1.29

package/components/forms/input-checkbox/{variants/MultipleCheckboxes.vue → MultipleCheckboxes.vue}

@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="multiple-checkboxes-fieldset" :class="[{ error: fieldHasError }]">
+  <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`">
@@ -59,10 +59,14 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from '../c12/prop-validators';
 import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+const { dataTestid, id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'multiple-checkboxes',
+  },
   id: {
     type: String,
     required: true,

package/components/forms/input-checkbox/{variants/SingleCheckbox.vue → SingleCheckbox.vue}

@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="single-checkbox-fieldset" :class="[{ error: fieldHasError }]">
+  <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`">
@@ -21,10 +21,14 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from '../c12/prop-validators';
 import type { IFormMultipleOptions } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, styleClassPassthrough, theme } = defineProps({
+const { dataTestid, id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, styleClassPassthrough, theme } = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'multiple-radio-buttons',
+  },
   id: {
     type: String,
     required: true,

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

package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -6,8 +6,8 @@
 
     <input
       :type
-      :true-value="trueValue"
-      :false-value="falseValue"
+      :true-value
+      :false-value
       :id
       :name
       :required="required && !multipleOptions"
@@ -103,7 +103,7 @@ const isArray = Array.isArray(modelValue.value);
 
 const isChecked = computed(() => {
   if (isArray) {
-    return modelValue.value.indexOf(trueValue) > -1;
+    return modelValue.value.includes(trueValue);
   } else {
     return modelValue.value === trueValue;
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" class="multiple-radiobuttons-fieldset" :class="[{ error: fieldHasError }]">
+  <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`">
@@ -62,7 +62,11 @@
 import propValidators from '../c12/prop-validators';
 import type { IFormMultipleOptions } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+const { dataTestid, id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'multiple-radio-buttons',
+  },
   id: {
     type: String,
     required: true,

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

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.28",
+  "version": "2.1.29",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
+    "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output && rm -rf .playground/node_modules && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",
     "dev": "nuxi dev .playground",
     "build": "nuxt build .playground",
@@ -23,12 +24,11 @@
     "types/"
   ],
   "devDependencies": {
-    "@iconify-json/material-symbols": "1.2.10",
-    "@nuxt/eslint-config": "0.7.2",
-    "@nuxt/icon": "1.10.1",
+    "@nuxt/eslint-config": "0.7.3",
+    "@nuxt/icon": "1.10.2",
     "@nuxt/test-utils": "3.15.1",
     "@vue/test-utils": "2.4.6",
-    "eslint": "9.16.0",
+    "eslint": "9.17.0",
     "happy-dom": "15.11.7",
     "nuxt": "3.14.1592",
     "release-it": "17.10.0",
@@ -37,15 +37,18 @@
     "vue": "3.5.13"
   },
   "dependencies": {
-    "@iconify-json/carbon": "1.2.4",
-    "@iconify-json/gridicons": "1.2.1",
-    "@iconify-json/radix-icons": "1.2.1",
-    "@iconify-json/ri": "1.2.3",
+    "@iconify-json/carbon": "1.2.5",
+    "@iconify-json/gridicons": "1.2.2",
+    "@iconify-json/material-symbols": "1.2.12",
+    "@iconify-json/material-symbols-light": "1.2.12",
+    "@iconify-json/ph": "1.2.2",
+    "@iconify-json/radix-icons": "1.2.2",
+    "@iconify-json/ri": "1.2.5",
     "@nuxtjs/storybook": "8.3.2",
-    "@storybook/addon-essentials": "8.4.6",
-    "@storybook/addon-interactions": "8.4.6",
-    "@storybook/addon-links": "8.4.6",
-    "@storybook/vue3": "8.4.6",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/vue3": "8.4.7",
     "http-proxy-middleware": "3.0.3",
     "modern-normalize": "3.0.1",
     "zod": "3.24.1"