srcdev-nuxt-forms 5.1.1 → 6.0.0

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

@@ -0,0 +1,204 @@
+<template>
+  <div class="input-checkbox-radio-options-button" :data-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-options-button-label" :for="id">
+      <slot name="labelContent"></slot>
+    </label>
+    <label v-else class="input-checkbox-radio-options-button-label" :for="id">{{ label }}</label>
+    <div class="decorator-icon">
+      <slot name="itemIcon">
+        <Icon name="material-symbols:add-2" class="icon" aria-hidden="true" focusable="false" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  type: {
+    type: String as PropType<'checkbox' | 'radio'>,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, 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);
+    },
+  },
+  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);
+    },
+  },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
+  displayAsDisc: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const slots = useSlots();
+const hasLabelContent = computed(() => slots.labelContent !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const modelValue = defineModel();
+
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+const flexDirection = ref(props.direction);
+</script>
+
+<style lang="css">
+.input-checkbox-radio-options-button {
+  --_white-space: wrap;
+
+  display: flex;
+  flex-direction: v-bind(flexDirection);
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border-radius: 1lh;
+  transition: all 0.2s ease-in-out;
+
+  &.inline {
+    --_white-space: nowrap;
+  }
+  background-color: var(--theme-input-surface);
+  border: var(--form-element-border-width) solid var(--theme-input-border);
+  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+
+  box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
+  padding-block: var(--input-checkbox-radio-options-padding-block);
+  padding-inline: var(--input-checkbox-radio-options-padding-inline);
+
+  &:hover {
+    background-color: var(--theme-input-surface-hover);
+    border-color: var(--theme-input-border);
+    outline-color: var(--theme-input-outline-hover);
+    outline-offset: var(--form-element-outline-offset-focus);
+  }
+
+  &:has(.input-checkbox-radio-core:focus-visible) {
+    background-color: var(--theme-input-surface-focus);
+    outline-color: var(--theme-input-outline-focus);
+    outline-offset: var(--form-element-outline-offset-focus);
+  }
+
+  /* Sizes */
+  &.x-small {
+    padding-block: 0.2rem;
+    padding-inline: 1.6rem;
+    gap: 1rem;
+  }
+  &.small {
+    padding-block: 0.2rem;
+    padding-inline: 1.6rem;
+    gap: 1rem;
+  }
+  &.default {
+    padding-block: 0.4rem;
+    padding-inline: 1.2rem;
+    gap: 1rem;
+  }
+  &.medium {
+    padding-block: 0.4rem;
+    padding-inline: 1.2rem;
+    gap: 1rem;
+  }
+  &.large {
+    padding-block: 0.4rem;
+    padding-inline: 1.2rem;
+    gap: 1rem;
+  }
+
+  .input-checkbox-radio-options-button-label {
+    display: flex;
+    flex-grow: 1;
+    color: var(--theme-checkbox-label-text-color);
+    font-size: var(--form-element-font-size);
+    width: 100%;
+    min-height: var(--form-element-line-height);
+    align-items: center;
+    justify-content: center;
+    padding-block: 0.8rem;
+    padding-inline: 0.8rem;
+    white-space: var(--_white-space);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .decorator-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--theme-checkbox-decorator-color);
+
+    .icon {
+      height: var(--theme-checkbox-decorator-icon-size);
+      width: var(--theme-checkbox-decorator-icon-size);
+    }
+  }
+}
+</style>

package/{components → app/components}/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     class="input-checkbox-radio-wrapper"
-    :data-form-theme="formTheme"
-    :data-theme="size"
+    :data-theme="formTheme"
+    :data-size="size"
     :class="[type, size, elementClasses, { error: fieldHasError }, { button: isButton }, { 'display-as-disc': displayAsDisc }]"
   >
     <slot name="checkedIcon" v-if="isChecked">
@@ -126,40 +126,52 @@ const isChecked = computed(() => {
   grid-template-areas: 'element-stack';
   place-content: center;
 
-  background-color: var(--input-checkbox-radio-symbol-color-default);
-  border: var(--input-checkbox-radio-wrapper-border);
-  border-radius: var(--input-checkbox-radio-wrapper-border-radius);
-  outline: var(--input-checkbox-radio-wrapper-outline);
+  background-color: var(--theme-checkbox-symbol-surface);
+  border: 0.1rem solid var(--theme-input-border);
+  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
   box-shadow: var(--_box-shadow);
 
-  height: var(--form-input-checkbox-radio-button-symbol-size);
-  width: var(--form-input-checkbox-radio-button-symbol-size);
+  height: var(--input-symbol-size);
+  width: var(--input-symbol-size);
 
-  transition: var(--input-checkbox-radio-wrapper-transition);
+  transition: all var(--theme-form-transition-duration) ease-in-out;
 
+  &.checkbox {
+    border-radius: var(--form-input-border-radius);
+    &.button {
+      &.display-as-disc {
+        border-radius: 50%;
+      }
+    }
+  }
+
+  &.radio {
+    border-radius: 50%;
+  }
+
+  /* focus-visible */
   &:not(.button):has(.input-checkbox-radio-core:focus-visible) {
-    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);
+    outline: var(--theme-focus-visible-outline);
   }
 
   .input-checked-icon {
     grid-area: element-stack;
-    color: var(--input-checkbox-radio-symbol-color-active);
-    height: var(--form-input-checkbox-radio-button-symbol-size);
-    width: var(--form-input-checkbox-radio-button-symbol-size);
+    color: var(--theme-checkbox-symbol-color);
+    height: var(--input-symbol-size);
+    width: var(--input-symbol-size);
     box-shadow: var(--_box-shadow);
   }
 
   .input-checkbox-radio-core {
+    touch-action: manipulation;
     grid-area: element-stack;
     appearance: none;
     margin: 0;
     overflow: hidden;
     opacity: 0;
 
-    height: var(--form-input-checkbox-radio-button-symbol-size);
-    width: var(--form-input-checkbox-radio-button-symbol-size);
+    height: var(--input-symbol-size);
+    width: var(--input-symbol-size);
 
     &:hover {
       cursor: pointer;

package/{components → app/components}/forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue

@@ -5,6 +5,7 @@
         <slot name="checkedIcon"></slot>
       </template>
     </InputCheckboxRadioCore>
+
     <label v-if="hasLabelContent" class="input-checkbox-radio-label body-normal" :for="id">
       <slot name="labelContent"></slot>
     </label>

package/{components → app/components}/forms/input-label/InputLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :for="id" class="input-label" :class="[elementClasses]">
+  <label :for="id" class="input-label" :class="[elementClasses, inputVariant]">
     <slot v-if="hasHtmlLabel" name="htmlLabel"></slot>
     <slot v-if="hasTextLabel" name="textLabel"></slot>
   </label>
@@ -34,7 +34,7 @@ const props = defineProps({
   },
   inputVariant: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.inputVariant.includes(value);
     },
@@ -50,11 +50,30 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style lang="css">
 .input-label {
-  color: var(--input-label-text-color);
-  margin-block: var(--input-label-text-margin-block);
-  font-size: var(--input-label-text-size);
-  font-weight: var(--input-label-text-weight);
-  line-height: var(--input-label-text-line-height);
+  touch-action: manipulation;
+  color: var(--form-label-color);
+  margin-block: 0.8rem;
+  font-size: var(--step-5);
+  font-weight: normal;
+  line-height: 1.5;
   display: block;
+
+  &.normal {
+    color: var(--form-label-color);
+    margin-block: 0.8rem;
+    font-size: var(--step-5);
+    font-weight: normal;
+    line-height: 1.5;
+    display: block;
+  }
+
+  &.underlined {
+    color: var(--form-label-color);
+    margin-block: 0.8rem;
+    font-size: var(--step-5);
+    font-weight: normal;
+    line-height: 1.5;
+    display: block;
+  }
 }
 </style>

package/{components → app/components}/forms/input-number/InputNumberCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-number-wrapper" :data-form-theme="formTheme" :data-size="size">
+  <div class="input-number-wrapper" :data-theme="formTheme" :data-size="size">
     <div v-if="hasLeftContent" class="slot left">
       <slot name="left"></slot>
     </div>
@@ -113,9 +113,9 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
   width: fit-content;
 
-  background-color: var(--theme-form-input-bg-normal);
+  background-color: var(--theme-button-surface);
   border-radius: var(--form-element-border-width);
-  border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  border: var(--form-element-border-width) solid var(--theme-input-border);
   outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
   box-shadow: var(--_focus-box-shadow);
 
@@ -142,12 +142,13 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
   }
 
   .input-number-core {
+    touch-action: manipulation;
     background-color: transparent;
     border: none;
     outline: none;
     box-shadow: none;
 
-    background-color: var(--theme-form-input-bg-normal);
+    background-color: var(--theme-input-surface);
     color: var(--theme-form-input-text-color-normal);
     font-family: var(--font-family);
     font-size: var(--form-element-font-size);
@@ -185,12 +186,12 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
     .left-slot {
       margin-inline-end: 0;
-      border-right: 2px solid var(--theme-btn-bg-hover);
+      border-right: 2px solid var(--theme-button-surface-hover);
     }
 
     .right-slot {
       margin-inline-end: 0;
-      border-left: 2px solid var(--theme-btn-bg-hover);
+      border-left: 2px solid var(--theme-button-surface-hover);
     }
   }
 }

package/{components → app/components}/forms/input-number/variants/InputNumberDefault.vue

@@ -1,6 +1,9 @@
 <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>
+  <div class="input-number-with-label" :data-theme="formTheme" :data-size="size" :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]">
+    <InputLabel :for="id" :id :theme :name input-variant="normal" :field-has-error :style-class-passthrough="['input-number-label', 'body-normal-bold']">
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
+
     <template v-if="hasDescription">
       <slot name="description"></slot>
     </template>
@@ -132,10 +135,6 @@ updateElementClasses(['has-left-button', 'has-right-button']);
 
 <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;

package/{components → app/components}/forms/input-range/InputRangeCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-range-wrapper" :data-form-theme="formTheme">
+  <div class="input-range-wrapper" :data-theme="formTheme">
     <div v-if="hasLeftContent" class="slot left">
       <slot name="left"></slot>
     </div>

package/{components → app/components}/forms/input-range/variants/InputRangeDefault.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="input-range-with-label" :data-form-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
-    <label class="input-range-label body-normal-bold" :for="id">{{ label }}</label>
+  <div class="input-range-with-label" :data-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
+    <InputLabel :for="id" :id :theme :name input-variant="normal" :field-has-error :style-class-passthrough="['input-number-label', 'body-normal-bold']">
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
+
     <template v-if="hasDescription">
       <slot name="description"></slot>
     </template>

package/{components → app/components}/forms/input-range-fancy/InputRangeFancyCore.vue

@@ -173,7 +173,7 @@ onMounted(() => {
   }
 
   [type='range']:focus-visible {
-    outline-offset: 0.25rem;
+    outline-offset: var(--form-element-outline-offset-focus);
     outline-color: transparent;
   }
 

package/{components → app/components}/forms/input-range-fancy/InputRangeFancyWithLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-range-fancy-with-label" :data-form-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
+  <div class="input-range-fancy-with-label" :data-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
     <label class="input-range-fancy-label body-normal-bold" :for="id">{{ label }}</label>
     <template v-if="hasDescription">
       <slot name="description"></slot>

package/{components → app/components}/forms/input-select/InputSelectCore.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="input-select-wrapper" :data-form-theme="formTheme" :data-size="size" :class="[inputVariant, size, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]">
-    <select v-model="modelValue" class="input-select-core" :name :id>
+  <div class="input-select-wrapper" :data-theme="formTheme" :data-size="size" :class="[inputVariant, size, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]">
+    <select v-model="modelValue" class="input-select-core" :name :id :title>
       <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-core-option placeholder">{{ placeholder }}</option>
       <option v-for="item in fieldData.data" :key="item.id" :value="item.value" :selected="item.value === modelValue" class="input-select-core-option">
-        <Icon :name="item.icon" class="input-select-core-option-icon" />
+        <Icon v-if="item.icon" :name="item.icon" class="input-select-core-option-decorator-icon" aria-hidden="true" focusable="false" />
         {{ item.label }}
       </option>
     </select>
@@ -27,6 +27,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  title: {
+    type: String,
+    default: 'Please select an option',
+  },
   required: {
     type: Boolean,
     default: false,
@@ -74,8 +78,8 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 
 <style lang="css">
 .input-select-wrapper {
-  background-color: var(--element-decorator-background-color);
-  outline: var(--element-decorator-outline-default);
+  background-color: var(--theme-input-surface);
+  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
 
   border-top-left-radius: var(--element-decorator-border-top-left-radius);
   border-top-right-radius: var(--element-decorator-border-top-right-radius);
@@ -96,7 +100,7 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
       content: '';
       width: 0.8em;
       height: 0.5em;
-      background-color: var(--theme-form-input-border);
+      background-color: var(--theme-input-border);
       clip-path: polygon(100% 0%, 0 0%, 50% 100%);
     } */
 
@@ -107,7 +111,7 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
     }
 
     &::picker(select) {
-      transition: display allow-discrete var(--input-select-animation-duration), opacity var(--input-select-animation-duration), overlay var(--input-select-animation-duration) allow-discrete;
+      transition: display allow-discrete var(--theme-form-transition-duration), opacity var(--theme-form-transition-duration), overlay var(--theme-form-transition-duration) allow-discrete;
     }
 
     &:not(:open)::picker(select) {
@@ -116,7 +120,7 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 
     &:open::picker(select) {
       opacity: 1;
-      border: var(--form-element-border-width) solid var(--theme-form-input-border);
+      border: var(--form-element-border-width) solid var(--theme-input-border);
       outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
 
       @starting-style {
@@ -130,33 +134,31 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
     width: 100%;
 
     &:hover {
-      /* background-color: lab(89.6502 -0.829279 -2.45323 / 0.1); */
-      background-color: var(--form-core-background-color-hover);
+      background-color: var(--theme-input-surface-hover);
     }
 
     /* END modern Select CSS */
 
-    /* color: var(--_input-text-core-color); */
     font-family: var(--font-family);
     font-size: var(--form-element-font-size);
     line-height: var(--form-element-line-height);
-    padding-block: var(--input-select-padding-block);
-    padding-inline: var(--input-select-padding-inline);
+    padding-block: 1.5rem;
+    padding-inline: 1rem;
 
     .input-select-core-option {
-      padding-block: var(--input-select-option-padding-block);
-      padding-inline: var(--input-select-option-padding-inline);
-      gap: var(--input-select-option-gap);
-      transition: var(--input-select-option-transition);
+      padding-block: 1rem;
+      padding-inline: 1.75rem;
+      gap: 1.5rem;
+      transition: all var(--theme-form-transition-duration) ease-in-out;
 
       &:hover {
-        background-color: var(--input-select-option-background-color-hover);
+        background-color: var(--theme-input-surface-hover);
       }
 
-      .input-select-core-option-icon {
+      .input-select-core-option-decorator-icon {
         display: inline-block;
-        width: var(--input-select-option-icon-size);
-        height: var(--input-select-option-icon-size);
+        width: 1.5rem;
+        height: 1.5rem;
       }
     }
   }

package/{components → app/components}/forms/input-select/variants/InputSelectWithLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="input-select-with-label" :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]" :data-testid :data-form-theme="formTheme" :data-size="size">
+    <div class="input-select-with-label" :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]" :data-testid :data-theme="formTheme" :data-size="size">
       <InputLabel :for="id" :id :theme :name :input-variant :field-has-error :style-class-passthrough="['input-select-label']">
         <template #textLabel>{{ label }}</template>
       </InputLabel>