srcdev-nuxt-forms 2.1.25 → 2.1.27

package/components/forms/form-errors/InputError.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="input-error-message" :class="[elementClasses, { show: showError }, { detached: isDetached }, { hide: !showError }]" :data-Testid>
+  <div class="input-error-message" :id :class="[elementClasses, { show: showError }, { detached: isDetached }, { hide: !showError }]" :data-Testid>
     <div class="inner" :class="[{ show: showError }]">
       <div class="inner-content">
         <div class="inner-icon">
           <Icon name="radix-icons:circle-backslash" class="icon" />
         </div>
-        <div class="message" :id>
+        <div class="message">
           <ul v-if="isArray" class="message-list">
             <li v-for="(message, index) in errorMessage" :key="index" class="message-list-item">{{ message }}</li>
           </ul>

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

@@ -1,9 +1,11 @@
 <template>
   <fieldset class="multiple-checkboxes-fieldset" :class="[{ error: fieldHasError }]">
     <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
-    <template v-if="hasDescription">
+
+    <div v-if="hasDescriptionSlot" :id="`${id}-description`">
       <slot name="description"></slot>
-    </template>
+    </div>
+
     <div class="multiple-checkboxes-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
         <InputCheckboxRadioButton
@@ -20,6 +22,7 @@
           :optionsLayout
           :theme
           :direction
+          :ariaDescribedby
         >
           <template #checkedIcon>
             <slot name="checkedIcon"></slot>
@@ -43,6 +46,7 @@
           :size
           :optionsLayout
           :theme
+          :ariaDescribedby
         >
           <template #checkedIcon>
             <slot name="checkedIcon"></slot>
@@ -50,7 +54,7 @@
         </InputCheckboxRadioWithLabel>
       </template>
     </div>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="name" :isDetached="true" />
+    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
   </fieldset>
 </template>
 
@@ -138,11 +142,18 @@ const { id, name, legend, label, required, fieldHasError, placeholder, isButton,
 });
 
 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 errorId = `${name}-error-message`;
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : null;
+  return fieldHasError ? errorId : ariaDescribedbyId;
+});
 </script>
 
 <style lang="css">

package/components/forms/input-checkbox/variants/SingleCheckbox.vue

@@ -1,11 +1,13 @@
 <template>
   <fieldset class="single-checkbox-fieldset" :class="[{ error: fieldHasError }]">
     <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
-    <template v-if="hasDescription">
+
+    <div v-if="hasDescriptionSlot" :id="`${name}-description`">
       <slot name="description"></slot>
-    </template>
+    </div>
+
     <div class="single-checkbox-items" :class="[optionsLayout]">
-      <InputCheckboxRadioWithLabel type="checkbox" :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme>
+      <InputCheckboxRadioWithLabel type="checkbox" :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme :ariaDescribedby>
         <template #checkedIcon>
           <slot name="checkedIcon"></slot>
         </template>
@@ -14,7 +16,7 @@
         </template>
       </InputCheckboxRadioWithLabel>
     </div>
-    <InputError :errorMessage :showError="fieldHasError" :id="name" :isDetached="true" :styleClassPassthrough="inputErrorStyles" />
+    <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" :styleClassPassthrough="inputErrorStyles" />
   </fieldset>
 </template>
 
@@ -96,6 +98,7 @@ const { id, name, legend, label, required, fieldHasError, errorMessage, size, op
 });
 
 const slots = useSlots();
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
 const hasDescription = computed(() => slots.description !== undefined);
 const hasLabelContent = computed(() => slots.labelContent !== undefined);
 
@@ -106,6 +109,12 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 
 const inputErrorStyles = ref<string[]>(styleClassPassthrough);
 
+const errorId = `${name}-error-message`;
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : null;
+  return fieldHasError ? errorId : ariaDescribedbyId;
+});
+
 watchEffect(() => {
   if (!hasDescription.value && fieldHasError) {
     inputErrorStyles.value.push('mbs-12');

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

@@ -1,6 +1,6 @@
 <template>
   <div class="input-checkbox-radio-button-button" :data-form-theme="formTheme" :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]">
-    <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme>
+    <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby>
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>
       </template>
@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme, direction } = defineProps({
+const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme, direction, ariaDescribedby } = defineProps({
   type: {
     type: String as PropType<'checkbox' | 'radio'>,
     required: true,
@@ -85,6 +85,10 @@ const { type, id, name, label, required, fieldHasError, trueValue, falseValue, s
       return ['row', 'row-reverse'].includes(value);
     },
   },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
 });
 
 const slots = useSlots();

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

@@ -17,13 +17,14 @@
       v-model="modelValue"
       ref="inputField"
       :aria-checked="isChecked"
+      :aria-describedby
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-const { isButton, type, id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError } = defineProps({
+const { isButton, type, id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError, ariaDescribedby } = defineProps({
   isButton: {
     type: Boolean,
     default: false,
@@ -78,6 +79,10 @@ const { isButton, type, id, name, required, trueValue, falseValue, multipleOptio
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
 });
 
 const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);

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

@@ -1,6 +1,6 @@
 <template>
   <div class="input-checkbox-radio-with-label" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
-    <InputCheckboxRadioCore :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme>
+    <InputCheckboxRadioCore :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby>
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>
       </template>
@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme } = defineProps({
+const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme, ariaDescribedby } = defineProps({
   type: {
     type: String as PropType<'checkbox' | 'radio'>,
     required: true,
@@ -73,6 +73,10 @@ const { type, id, name, label, required, fieldHasError, trueValue, falseValue, s
       return propValidators.theme.includes(value);
     },
   },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
 });
 
 const slots = useSlots();

package/components/forms/input-radio/{variants/MultipleRadiobuttons.vue → MultipleRadiobuttons.vue}

@@ -1,9 +1,11 @@
 <template>
   <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" class="multiple-radiobuttons-fieldset" :class="[{ error: fieldHasError }]">
-    <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
-    <template v-if="hasDescription">
+    <legend :class="[{ 'has-description': hasDescriptionSlot }]">{{ legend }}</legend>
+
+    <div v-if="hasDescriptionSlot" :id="`${name}-description`">
       <slot name="description"></slot>
-    </template>
+    </div>
+
     <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
         <InputCheckboxRadioButton
@@ -20,6 +22,7 @@
           :optionsLayout
           :theme
           :direction
+          :ariaDescribedby
         >
           <template #checkedIcon>
             <slot name="checkedIcon"></slot>
@@ -43,6 +46,7 @@
           :size
           :optionsLayout
           :theme
+          :ariaDescribedby
         >
           <template #checkedIcon>
             <slot name="checkedIcon"></slot>
@@ -50,12 +54,12 @@
         </InputCheckboxRadioWithLabel>
       </template>
     </div>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="name" :isDetached="true" />
+    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
   </fieldset>
 </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, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
@@ -138,9 +142,15 @@ const { id, name, legend, label, required, fieldHasError, placeholder, isButton,
 });
 
 const slots = useSlots();
-const hasDescription = computed(() => slots.description !== undefined);
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
 const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
 
+const errorId = `${name}-error-message`;
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
+  return fieldHasError ? errorId : ariaDescribedbyId;
+});
+
 const modelValue = defineModel();
 const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 </script>

package/components/forms/input-radio/stories/MultipleRadioButtons.mdx

@@ -0,0 +1,8 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as MultipleRadiobuttonsStories from './MultipleRadiobuttons.stories'
+
+<Meta of={MultipleRadiobuttonsStories} />
+
+<Canvas of={MultipleRadiobuttonsStories.Primary} />
+
+<Controls of={MultipleRadiobuttonsStories.Primary} />

package/components/forms/input-radio/stories/MultipleRadiobuttons.stories.ts

@@ -0,0 +1,71 @@
+import type { Meta, StoryFn } from '@nuxtjs/storybook';
+import MultipleRadiobuttons from '../MultipleRadiobuttons.vue';
+import propValidators from '../../c12/prop-validators';
+import modelData from './data/tags.json';
+
+export default {
+  title: 'Components/Forms/MultipleRadiobuttons',
+  component: MultipleRadiobuttons,
+  argTypes: {
+    size: {
+      options: propValidators.size,
+      control: { type: 'select' },
+    },
+    weight: {
+      options: propValidators.weight,
+      control: { type: 'select' },
+    },
+    theme: {
+      options: propValidators.theme,
+      control: { type: 'select' },
+      default: 'primary',
+    },
+    optionsLayout: {
+      options: ['inline', 'equal-widths'],
+      control: { type: 'select' },
+    },
+    direction: {
+      options: ['row', 'row-reverse'],
+      control: { type: 'select' },
+    },
+  },
+} as Meta<typeof MultipleRadiobuttons>;
+
+const Template: StoryFn<typeof MultipleRadiobuttons> = (args) => ({
+  components: { MultipleRadiobuttons },
+  setup() {
+    return { args };
+  },
+  template: `
+    <Suspense>
+      <template #default>
+        <MultipleRadiobuttons v-bind="args">
+          <template v-if="${'description' in args}" v-slot:description>${args.description}</template>
+        </MultipleRadiobuttons>
+      </template>
+      <template #fallback>
+        <div>Loading...</div>
+      </template>
+    </Suspense>
+  `,
+  // template: '<MultipleRadiobuttons v-bind="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  id: 'tagsRadio',
+  name: 'tagsRadio',
+  legend: 'Choose tags (as radiobuttons)',
+  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,
+  modelValue: [],
+  fieldData: modelData,
+  size: 'x-small',
+  optionsLayout: 'inline',
+  theme: 'primary',
+  direction: 'row',
+};

package/components/forms/input-radio/stories/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-text/InputTextCore.vue

@@ -19,7 +19,7 @@
       v-model="modelValue"
       ref="inputField"
       :aria-invalid="fieldHasError"
-      :ariaDescribedby
+      :aria-describedby
       :pattern="inputPattern"
       :inputmode
       @focusin="updateFocus(true)"

package/components/forms/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -130,8 +130,8 @@ const formTheme = computed(() => {
 
 const errorId = `${id}-error-message`;
 const ariaDescribedby = computed(() => {
-  const ariaDescribedby = hasDescriptionSlot ? `${id}-description` : null;
-  return fieldHasError ? errorId : ariaDescribedby;
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
+  return fieldHasError ? errorId : ariaDescribedbyId;
 });
 
 const modelValue = defineModel();

package/components/forms/input-text/variants/InputTextWithLabel.vue

@@ -31,7 +31,7 @@
         <slot name="right"></slot>
       </template>
     </InputTextCore>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="`${id}-error-message`" :isDetached="false" />
+    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="false" />
   </div>
 </template>
 
@@ -105,8 +105,8 @@ const formTheme = computed(() => {
 
 const errorId = `${id}-error-message`;
 const ariaDescribedby = computed(() => {
-  const ariaDescribedby = hasDescriptionSlot ? `${id}-description` : null;
-  return fieldHasError ? errorId : ariaDescribedby;
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
+  return fieldHasError ? errorId : ariaDescribedbyId;
 });
 
 const modelValue = defineModel();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.25",
+  "version": "2.1.27",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@iconify-json/material-symbols": "1.2.10",
     "@nuxt/eslint-config": "0.7.2",
-    "@nuxt/icon": "1.9.1",
+    "@nuxt/icon": "^1.10.1",
     "@nuxt/test-utils": "3.15.1",
     "@vue/test-utils": "2.4.6",
     "eslint": "9.16.0",
@@ -34,7 +34,8 @@
     "release-it": "17.10.0",
     "typescript": "5.7.2",
     "vitest": "2.1.8",
-    "vue": "3.5.13"
+    "vue": "3.5.13",
+    "zod": "^3.24.1"
   },
   "dependencies": {
     "@iconify-json/carbon": "1.2.4",
@@ -47,8 +48,7 @@
     "@storybook/addon-links": "8.4.6",
     "@storybook/vue3": "8.4.6",
     "http-proxy-middleware": "3.0.3",
-    "modern-normalize": "3.0.1",
-    "zod": "3.23.8"
+    "modern-normalize": "3.0.1"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",