srcdev-nuxt-forms 4.2.0 → 5.0.0

package/components/forms/form-fieldset/FormFieldset.vue

@@ -0,0 +1,94 @@
+<template>
+  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" :id :name class="form-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid="dataTestid">
+    <legend v-if="legend" class="form-fieldset-legend" :class="[{ 'has-description': hasDescription }]">
+      <slot name="legend">{{ legend }}</slot>
+    </legend>
+
+    <div v-if="hasDescriptionSlot" class="form-fieldset-description" :id="`${id}-description`">
+      <slot name="description"></slot>
+    </div>
+
+    <div class="form-fieldset-content">
+      <slot name="content"></slot>
+    </div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+// import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  legend: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  dataTestid: {
+    type: String,
+    default: '',
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const slots = useSlots();
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
+const hasDescription = computed(() => slots.description !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+.form-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  &.single-checkbox-fieldset {
+  }
+
+  &.multiple-checkboxes-fieldset {
+  }
+
+  &.multiple-radiobuttons-fieldset {
+  }
+
+  .form-fieldset-legend {
+    color: var(--form-fieldset-legend-text-color);
+    margin-block: var(--form-fieldset-legend-text-margin-block);
+    font-size: var(--form-fieldset-legend-text-size);
+    font-weight: var(--form-fieldset-legend-text-weight);
+    line-height: var(--form-fieldset-legend-text-line-height);
+
+    &.has-description {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-fieldset-description {
+    font-size: var(--form-fieldset-description-font-size);
+    margin-top: var(--form-fieldset-description-margin-top);
+  }
+
+  .form-fieldset-content {
+    margin-block-start: var(--form-fieldset-content-margin-block-start);
+    margin-block-end: var(--form-fieldset-content-padding-block-start);
+  }
+}
+</style>

package/components/forms/input-button/InputButtonCore.vue

@@ -35,7 +35,7 @@ import propValidators from '../c12/prop-validators';
 const props = defineProps({
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },

package/components/forms/input-button/variants/InputButtonConfirm.vue

@@ -12,7 +12,7 @@ import propValidators from '../../c12/prop-validators';
 defineProps({
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },

package/components/forms/input-button/variants/InputButtonSubmit.vue

@@ -8,7 +8,7 @@ import propValidators from '../../c12/prop-validators';
 defineProps({
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },

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

@@ -1,61 +1,63 @@
 <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`">
+  <FormFieldset :id :name :legend :fieldHasError :required :data-testid :styleClassPassthrough="['multiple-checkboxes-fieldset']">
+    <template #description>
       <slot name="description"></slot>
-    </div>
+    </template>
 
-    <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 #content>
+      <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
+            :displayAsDisc
+          >
+            <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
+            :displayAsDisc
+          >
+            <template #checkedIcon>
+              <slot name="checkedIcon"></slot>
+            </template>
+          </InputCheckboxRadioWithLabel>
+        </template>
+      </div>
+      <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
+    </template>
+  </FormFieldset>
 </template>
 
 <script setup lang="ts">
@@ -139,6 +141,10 @@ const { dataTestid, name, legend, label, required, fieldHasError, placeholder, i
       return ['row', 'row-reverse'].includes(value);
     },
   },
+  displayAsDisc: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const slots = useSlots();
@@ -149,7 +155,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleC
 const modelValue = defineModel();
 const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 
-const id = useId();
+const id = `${name}-input-${useId()}`;
 const errorId = `${name}-error-message`;
 const ariaDescribedby = computed(() => {
   const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
@@ -158,28 +164,6 @@ const ariaDescribedby = computed(() => {
 </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));

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

@@ -1,23 +1,23 @@
 <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`">
+  <FormFieldset :id :name :legend :fieldHasError :required :data-testid :styleClassPassthrough="['single-checkbox-fieldset']">
+    <template #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>
+
+    <template #content>
+      <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" />
+    </template>
+  </FormFieldset>
 </template>
 
 <script setup lang="ts">
@@ -109,6 +109,7 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 
 const inputErrorStyles = ref<string[]>(props.styleClassPassthrough);
 
+const id = `${props.name}-input-${useId()}`;
 const errorId = `${name}-error-message`;
 const ariaDescribedby = computed(() => {
   const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
@@ -125,28 +126,6 @@ watchEffect(() => {
 </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;

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

@@ -1,14 +1,14 @@
 <template>
-  <div class="input-checkbox-radio-button-button" :data-form-theme="formTheme" :data-size="size" :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]">
-    <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby>
+  <div class="input-checkbox-radio-options-button" :data-form-theme="formTheme" :data-size="size" :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]">
+    <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby :displayAsDisc>
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>
       </template>
     </InputCheckboxRadioCore>
-    <label v-if="hasLabelContent" class="input-checkbox-radio-button-label" :for="id">
+    <label v-if="hasLabelContent" class="input-checkbox-radio-options-button-label" :for="id">
       <slot name="labelContent"></slot>
     </label>
-    <label v-else class="input-checkbox-radio-button-label" :for="id">{{ label }}</label>
+    <label v-else class="input-checkbox-radio-options-button-label" :for="id">{{ label }}</label>
     <div class="item-icon">
       <slot name="itemIcon">
         <Icon name="material-symbols:add-2" class="icon" />
@@ -89,6 +89,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  displayAsDisc: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const slots = useSlots();
@@ -105,33 +109,37 @@ const flexDirection = ref(props.direction);
 </script>
 
 <style lang="css">
-.input-checkbox-radio-button-button {
+.input-checkbox-radio-options-button {
   /* --_checkbox-size: initial; */
-  --_background-color: var(--theme-checkbox-radio-button-bg-default);
-  --_outline-width: var(--form-element-outline-width);
-  --_border-color: var(--theme-checkbox-radio-button-border-default);
+
   --_outline-color: var(--theme-checkbox-radio-button-outline-default);
   --_label-color: var(--theme-checkbox-radio-button-label-default);
   --_box-shadow: var(--theme-checkbox-radio-button-shadow);
   --_white-space: wrap;
-  --_gap: 0.4rem;
   /* --_border-radius: 2.2rem; */
-  --_padding-block: 0.4rem;
-  --_padding-inline: 1.2rem;
+  /* --_padding-block: 0.4rem;
+  --_padding-inline: 1.2rem; */
 
   display: flex;
   flex-direction: v-bind(flexDirection);
   align-items: center;
   justify-content: space-between;
-  gap: var(--_gap);
+  gap: var(--input-checkbox-radio-options-button-gap);
+
+  background-color: var(--input-checkbox-radio-options-button-background-color);
+  border-radius: var(--input-checkbox-radio-options-button-border-radius);
+  border: var(--input-checkbox-radio-options-button-border);
+  outline: var(--input-checkbox-radio-options-button-outline);
 
-  background-color: var(--_background-color);
-  border-radius: calc(var(--form-element-line-height) / 1);
-  border: var(--theme-checkbox-radio-button-border-width) solid var(--_border-color);
-  outline: var(--theme-checkbox-radio-button-outline-width) solid var(--_outline-color);
   box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem var(--_box-shadow);
-  padding-block: var(--_padding-block);
-  padding-inline: var(--_padding-inline);
+  padding-block: var(--input-checkbox-radio-options-padding-block);
+  padding-inline: var(--input-checkbox-radio-options-padding-inline);
+
+  &:hover {
+    background-color: var(--input-checkbox-radio-options-button-background-color-active);
+    border: var(--input-checkbox-radio-options-button-border-active);
+    outline: var(--input-checkbox-radio-options-button-outline-active);
+  }
 
   &.inline {
     --_white-space: nowrap;
@@ -150,52 +158,47 @@ const flexDirection = ref(props.direction);
   /* Sizes */
   &.x-small {
     /* --_checkbox-size: 2rem; */
-    --_gap: 1rem;
     /* --_border-radius: 2rem; */
-    --_padding-block: 0.2rem;
-    --_padding-inline: 1.6rem;
+    /* --_padding-block: 0.2rem; */
+    /* --_padding-inline: 1.6rem; */
   }
   &.small {
     /* --_checkbox-size: 2.2rem; */
-    --_gap: 1.2rem;
     /* --_border-radius: 1.8rem; */
-    --_padding-block: 0rem;
-    --_padding-inline: 1.2rem;
+    /* --_padding-block: 0rem; */
+    /* --_padding-inline: 1.2rem; */
   }
   &.normal {
     /* --_checkbox-size: 3.4rem; */
-    --_gap: 1rem;
     /* --_border-radius: 2rem; */
-    --_padding-block: 0.4rem;
-    --_padding-inline: 1.2rem;
+    /* --_padding-block: 0.4rem; */
+    /* --_padding-inline: 1.2rem; */
   }
   &.medium {
     /* --_checkbox-size: 3.4rem; */
-    --_gap: 1rem;
     /* --_border-radius: 2rem; */
-    --_padding-block: 0.4rem;
-    --_padding-inline: 1.2rem;
+    /* --_padding-block: 0.4rem; */
+    /* --_padding-inline: 1.2rem; */
   }
   &.large {
     /* --_checkbox-size: 3.4rem; */
-    --_gap: 1rem;
     /* --_border-radius: 2rem; */
-    --_padding-block: 0.4rem;
-    --_padding-inline: 1.2rem;
+    /* --_padding-block: 0.4rem; */
+    /* --_padding-inline: 1.2rem; */
   }
 }
 
-.input-checkbox-radio-button-label {
+.input-checkbox-radio-options-button-label {
   display: flex;
   flex-grow: 1;
-  color: var(--_label-color);
-  font-size: var(--form-element-font-size);
+  color: var(--input-checkbox-radio-options-button-label-text-color);
+  font-size: var(--input-checkbox-radio-options-button-label-font-size);
   width: 100%;
-  height: var(--form-element-line-height);
+  min-height: var(--input-checkbox-radio-options-button-label-min-height);
   align-items: center;
   justify-content: center;
-  margin-block: 0.8rem;
-  padding-inline: 0.8rem;
+  margin-block: var(--input-checkbox-radio-options-button-label-margin-block);
+  padding-inline: var(--input-checkbox-radio-options-button-label-padding-inline);
   white-space: var(--_white-space);
 
   &:hover {
@@ -207,7 +210,7 @@ const flexDirection = ref(props.direction);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--_border-color);
+  color: var(--input-checkbox-radio-options-button-label-icon-color);
   height: var(--form-input-checkbox-radio-button-size);
   width: var(--form-input-checkbox-radio-button-size);
 }

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

@@ -1,5 +1,10 @@
 <template>
-  <div class="input-checkbox-radio-wrapper" :data-form-theme="formTheme" :data-theme="size" :class="[type, size, elementClasses, { error: fieldHasError }, { button: isButton }]">
+  <div
+    class="input-checkbox-radio-wrapper"
+    :data-form-theme="formTheme"
+    :data-theme="size"
+    :class="[type, size, elementClasses, { error: fieldHasError }, { button: isButton }, { 'display-as-disc': displayAsDisc }]"
+  >
     <slot name="checkedIcon" v-if="isChecked">
       <Icon :name="defaultIcon" class="input-checked-icon" />
     </slot>
@@ -84,6 +89,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  displayAsDisc: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -113,57 +122,32 @@ const isChecked = computed(() => {
 
 <style lang="css">
 .input-checkbox-radio-wrapper {
-  --_outline-width: 0.1rem;
-  --_border-width: 0.1rem;
-  --_border-radius: 50%;
-  --_background-color: var(--theme-form-checkbox-bg);
-  --_box-shadow: none;
-
-  --_icon-size: var(--form-input-checkbox-radio-button-size);
-
-  &:not(.button) {
-    --_icon-size: var(--form-toggle-symbol-size);
-    --_outline-width: var(--form-element-outline-width);
-    --_border-width: var(--form-element-border-width);
-    &.checkbox {
-      --_background-color: var(--theme-form-checkbox-bg);
-      --_border-color: var(--theme-form-checkbox-border);
-      --_border-radius: 0.4rem;
-      --_outline-color: var(--theme-form-checkbox-outline);
-    }
-
-    &.radio {
-      --_background-color: var(--theme-form-radio-bg);
-      --_border-color: var(--theme-form-radio-border);
-      --_border-radius: 50%;
-      --_outline-color: var(--theme-form-radio-outline);
-    }
-  }
-
   display: grid;
   grid-template-areas: 'element-stack';
   place-content: center;
 
-  background-color: var(--_background-color);
-  border: var(--_border-width) solid var(--_border-color);
-  border-radius: var(--_border-radius);
-  outline: 0.1rem solid var(--_outline-color);
+  background-color: var(--input-checkbox-radio-wrapper-background-color);
+  border: var(--input-checkbox-radio-wrapper-border);
+  border-radius: var(--input-checkbox-radio-wrapper-border-radius);
+  outline: var(--input-checkbox-radio-wrapper-outline);
   box-shadow: var(--_box-shadow);
 
-  height: var(--_icon-size);
-  width: var(--_icon-size);
+  height: var(--form-input-checkbox-radio-button-symbol-size);
+  width: var(--form-input-checkbox-radio-button-symbol-size);
 
-  transition: all 0.2s ease-in-out;
+  transition: var(--input-checkbox-radio-wrapper-transition);
 
   &:not(.button):has(.input-checkbox-radio-core:focus-visible) {
-    --_box-shadow: var(--form-focus-box-shadow);
+    border: var(--input-checkbox-radio-wrapper-border-on);
+    outline: var(--input-checkbox-radio-wrapper-outline-on);
+    box-shadow: var(--input-checkbox-radio-wrapper-box-shadow-on);
   }
 
   .input-checked-icon {
     grid-area: element-stack;
-    color: var(--theme-form-checkbox-symbol);
-    height: var(--_icon-size);
-    width: var(--_icon-size);
+    color: var(--form-input-checkbox-radio-button-symbol-color);
+    height: var(--form-input-checkbox-radio-button-symbol-size);
+    width: var(--form-input-checkbox-radio-button-symbol-size);
     box-shadow: var(--_box-shadow);
   }
 
@@ -174,8 +158,8 @@ const isChecked = computed(() => {
     overflow: hidden;
     opacity: 0;
 
-    height: var(--_icon-size);
-    width: var(--_icon-size);
+    height: var(--form-input-checkbox-radio-button-symbol-size);
+    width: var(--form-input-checkbox-radio-button-symbol-size);
 
     &:hover {
       cursor: pointer;
@@ -183,7 +167,9 @@ const isChecked = computed(() => {
 
     &:not(.is-button) {
       &:focus-visible {
-        --_box-shadow: var(--form-focus-box-shadow);
+        border: var(--input-checkbox-radio-wrapper-border-on);
+        outline: var(--input-checkbox-radio-wrapper-outline-on);
+        box-shadow: var(--input-checkbox-radio-wrapper-box-shadow-on);
       }
     }
   }

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

@@ -1,6 +1,6 @@
 <template>
   <div class="input-checkbox-radio-with-label" :data-size="size" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
-    <InputCheckboxRadioCore :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby>
+    <InputCheckboxRadioCore :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby :displayAsDisc>
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>
       </template>
@@ -73,6 +73,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  displayAsDisc: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const slots = useSlots();