srcdev-nuxt-forms 2.1.8 → 2.1.10

package/assets/styles/forms/themes/_error.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--red-6);
     --theme-form-input-outline-focus: var(--red-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--red-12), var(--red-12));
+    --theme-form-checkbox-outline: light-dark(var(--red-1), var(--red-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--red-6);
-    --theme-form-checkbox-symbol: var(--red-8);
+    --theme-form-checkbox-symbol: var(--red-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--red-12), var(--red-12));
+    --theme-form-radio-outline: light-dark(var(--red-1), var(--red-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--red-6);
-    --theme-form-radio-symbol: var(--red-8);
+    --theme-form-radio-symbol: var(--red-12);
+
+    --theme-form-range-accent-color: light-dark(var(--red-12), var(--red-3));
   }
 
   [data-btn-theme='error'] {
@@ -37,9 +44,6 @@
     --theme-btn-outline-focus: var(--red-0);
     --theme-btn-text-focus: var(--red-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
   }
-
-  --theme-error-surface: var(--red-12);
-  --theme-error-text: var(--red-0);
 }

package/assets/styles/forms/themes/_ghost.css

@@ -8,35 +8,42 @@
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--gray-6);
-    --theme-form-checkbox-symbol: var(--gray-8);
+    --theme-form-checkbox-symbol: var(--gray-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--gray-6);
-    --theme-form-radio-symbol: var(--gray-8);
+    --theme-form-radio-symbol: var(--gray-12);
+
+    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
   }
 
   [data-btn-theme='ghost'] {
-    --theme-btn-bg: var(--gray-0);
-    --theme-btn-border: transparent;
-    --theme-btn-outline: transparent;
-    --theme-btn-text: var(--gray-12);
-
-    --theme-btn-bg-hover: var(--gray-2);
-    --theme-btn-border-hover: transparent;
-    --theme-btn-outline-hover: transparent;
+    --theme-btn-bg: var(--gray-12);
+    --theme-btn-border: var(--gray-0);
+    --theme-btn-outline: var(--gray-12);
+    --theme-btn-text: var(--gray-0);
+
+    --theme-btn-bg-hover: var(--gray-0);
+    --theme-btn-border-hover: var(--gray-12);
+    --theme-btn-outline-hover: var(--gray-0);
     --theme-btn-text-hover: var(--gray-12);
 
-    --theme-btn-bg-focus: var(--gray-1);
-    --theme-btn-border-focus: transparent;
-    --theme-btn-outline-focus: transparent;
+    --theme-btn-bg-focus: var(--gray-0);
+    --theme-btn-border-focus: var(--gray-12);
+    --theme-btn-outline-focus: var(--gray-0);
     --theme-btn-text-focus: var(--gray-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
   }
 }

package/assets/styles/forms/themes/_primary.css

@@ -12,14 +12,20 @@
     --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--blue-12), var(--blue-12));
+    --theme-form-checkbox-outline: light-dark(var(--blue-1), var(--blue-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--blue-6);
     --theme-form-checkbox-symbol: var(--blue-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--blue-12), var(--blue-12));
+    --theme-form-radio-outline: light-dark(var(--blue-1), var(--blue-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--blue-6);
     --theme-form-radio-symbol: var(--blue-12);
+
+    --theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-3));
   }
 
   [data-btn-theme='primary'] {

package/assets/styles/forms/themes/_secondary.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--gray-6);
-    --theme-form-checkbox-symbol: var(--gray-8);
+    --theme-form-checkbox-symbol: var(--gray-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--gray-6);
-    --theme-form-radio-symbol: var(--gray-8);
+    --theme-form-radio-symbol: var(--gray-12);
+
+    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
   }
 
   [data-btn-theme='secondary'] {
@@ -37,6 +44,6 @@
     --theme-btn-outline-focus: var(--gray-0);
     --theme-btn-text-focus: var(--gray-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
   }
 }

package/assets/styles/forms/themes/_success.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--green-6);
     --theme-form-input-outline-focus: var(--green-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--green-12), var(--green-12));
+    --theme-form-checkbox-outline: light-dark(var(--green-1), var(--green-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--green-6);
-    --theme-form-checkbox-symbol: var(--green-8);
+    --theme-form-checkbox-symbol: var(--green-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--green-12), var(--green-12));
+    --theme-form-radio-outline: light-dark(var(--green-1), var(--green-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--green-6);
-    --theme-form-radio-symbol: var(--green-8);
+    --theme-form-radio-symbol: var(--green-12);
+
+    --theme-form-range-accent-color: light-dark(var(--green-12), var(--green-3));
   }
 
   [data-btn-theme='success'] {
@@ -37,6 +44,6 @@
     --theme-btn-outline-focus: var(--green-0);
     --theme-btn-text-focus: var(--green-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
   }
 }

package/assets/styles/forms/themes/_tertiary.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--gray-6);
-    --theme-form-checkbox-symbol: var(--gray-8);
+    --theme-form-checkbox-symbol: var(--gray-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--gray-6);
-    --theme-form-radio-symbol: var(--gray-8);
+    --theme-form-radio-symbol: var(--gray-12);
+
+    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
   }
 
   [data-btn-theme='tertiary'] {

package/assets/styles/forms/themes/_warning.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--orange-6);
     --theme-form-input-outline-focus: var(--orange-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-checkbox-outline: light-dark(var(--orange-1), var(--orange-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--orange-6);
-    --theme-form-checkbox-symbol: var(--orange-8);
+    --theme-form-checkbox-symbol: var(--orange-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-radio-outline: light-dark(var(--orange-1), var(--orange-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--orange-6);
-    --theme-form-radio-symbol: var(--orange-8);
+    --theme-form-radio-symbol: var(--orange-12);
+
+    --theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
   }
 
   [data-btn-theme='warning'] {
@@ -37,6 +44,6 @@
     --theme-btn-outline-focus: var(--orange-0);
     --theme-btn-text-focus: var(--orange-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
   }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div class="input-checkbox-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
-    <Icon :name="icon" class="input-checkbox-decorator" />
+    <Icon v-show="isChecked" name="material-symbols:check-small" class="input-checkbox-decorator" />
     <input
       type="checkbox"
       :true-value="trueValue"
@@ -105,13 +105,22 @@ const icon = computed(() => {
   --_checkbox-size: initial;
   --_outline-width: var(--input-outline-width-thin);
   --_border-width: var(--input-border-width-default);
+  --_border-color: var(--theme-form-checkbox-border);
+  --_outline-color: var(--theme-form-checkbox-outline);
   --_box-shadow: none;
 
   display: grid;
   grid-template-areas: 'element-stack';
+  place-content: center;
 
-  background-color: var(--theme-form-radio-bg);
+  background-color: var(--theme-form-checkbox-bg);
   border-radius: 4px;
+  border: var(--_border-width) solid var(--_border-color);
+  outline: 1px solid var(--_outline-color);
+  box-shadow: var(--_box-shadow);
+
+  height: var(--_checkbox-size);
+  width: var(--_checkbox-size);
 
   &:has(.input-checkbox-core:focus-visible) {
     --_box-shadow: var(--theme-form-focus-box-shadow);
@@ -136,7 +145,7 @@ const icon = computed(() => {
 
   .input-checkbox-decorator {
     grid-area: element-stack;
-    color: var(--theme-form-radio-symbol);
+    color: var(--theme-form-checkbox-symbol);
     height: var(--_checkbox-size);
     width: var(--_checkbox-size);
     box-shadow: var(--_box-shadow);
@@ -149,13 +158,15 @@ const icon = computed(() => {
     overflow: hidden;
     opacity: 0;
 
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+
     &:hover {
       cursor: pointer;
     }
 
-    &:focus {
-      border: var(--_border-width) solid var(--theme-form-input-border);
-      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline) h s 50%);
+    &:focus-visible {
+      --_box-shadow: var(--theme-form-focus-box-shadow);
     }
   }
 }

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

@@ -6,7 +6,7 @@
     </template>
     <div class="multiple-checkboxes-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputCheckboxWithLabel :id="item.value" :name :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :optionsLayout :theme />
+        <InputCheckboxWithLabel :id="`${name}-${item.value}`" :name :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :optionsLayout :theme />
       </template>
     </div>
     <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />

package/components/forms/input-number/variants/InputNumberDefault.vue

@@ -13,7 +13,7 @@
           :readonly="Number(modelValue) <= min"
           :is-pending="false"
           buttonText="Step down"
-          theme="primary"
+          :theme
           size="x-small"
         >
           <template #iconOnly>
@@ -28,7 +28,7 @@
           :readonly="Number(modelValue) >= max"
           :is-pending="false"
           buttonText="Step up"
-          theme="primary"
+          :theme
           size="x-small"
         >
           <template #iconOnly>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="input-radiobutton-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
-    <Icon :name="icon" class="input-radiobutton-decorator" />
+    <Icon v-show="isChecked" name="material-symbols:circle" class="input-radiobutton-decorator" />
     <input
       type="radio"
       :true-value="trueValue"
@@ -120,13 +120,22 @@ const useCustomizeIcon = (content: string, name: string, prefix: string, provide
   --_checkbox-size: initial;
   --_outline-width: var(--input-outline-width-thin);
   --_border-width: var(--input-border-width-default);
+  --_border-color: var(--theme-form-radio-border);
+  --_outline-color: var(--theme-form-radio-outline);
   --_box-shadow: none;
 
   display: grid;
   grid-template-areas: 'element-stack';
+  /* place-content: center; */
 
   background-color: var(--theme-form-radio-bg);
   border-radius: 50%;
+  border: var(--_border-width) solid var(--_border-color);
+  outline: 1px solid var(--_outline-color);
+  box-shadow: var(--_box-shadow);
+
+  height: var(--_checkbox-size);
+  width: var(--_checkbox-size);
 
   &:has(.input-radiobutton-core:focus-visible) {
     --_box-shadow: var(--theme-form-focus-box-shadow);
@@ -150,11 +159,14 @@ const useCustomizeIcon = (content: string, name: string, prefix: string, provide
   }
 
   .input-radiobutton-decorator {
+    --_checked-size: calc(var(--_checkbox-size) * 0.65);
     grid-area: element-stack;
+    align-self: center;
+    justify-self: center;
     color: var(--theme-form-radio-symbol);
-    height: var(--_checkbox-size);
-    width: var(--_checkbox-size);
-    box-shadow: var(--_box-shadow);
+    height: var(--_checked-size);
+    width: var(--_checked-size);
+    translate: -2px -2px;
   }
 
   .input-radiobutton-core {
@@ -164,13 +176,15 @@ const useCustomizeIcon = (content: string, name: string, prefix: string, provide
     overflow: hidden;
     opacity: 0;
 
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+
     &:hover {
       cursor: pointer;
     }
 
-    &:focus {
-      border: var(--_border-width) solid var(--theme-form-input-border);
-      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline) h s 50%);
+    &:focus-visible {
+      --_box-shadow: var(--theme-form-focus-box-shadow);
     }
   }
 }

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

@@ -6,7 +6,7 @@
     </template>
     <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputRadiobuttonWithLabel :id="item.value" :name="item.name" :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :theme />
+        <InputRadiobuttonWithLabel :id="`${name}-${item.value}`" :name="item.name" :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :theme />
       </template>
     </div>
     <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />

package/components/forms/input-range/InputRangeCore.vue

@@ -16,7 +16,7 @@
         :list="hasDataList ? name + '-datalist' : ''"
         :class="['input-range-core', `input-range--${size}`, `input-range--${weight}`, styleClassPassthrough]"
         v-model="modelValue"
-        ref="inputField"
+        ref="inputRange"
       />
 
       <template v-if="hasDataList">
@@ -102,6 +102,15 @@ const formTheme = computed(() => {
 });
 
 const modelValue = defineModel<number | readonly number[]>();
+
+// @input="changeBackgroundColor"
+const changeBackgroundColor = () => {
+  console.log('changeBackgroundColor()');
+  const inputRange = ref<HTMLInputElement | null>(null);
+  if (inputRange.value !== null) {
+    inputRange.value.style.accentColor = 'hsl(' + modelValue.value + ', 100%, 50%)';
+  }
+};
 </script>
 
 <style lang="css">
@@ -126,11 +135,41 @@ const modelValue = defineModel<number | readonly number[]>();
   .input-range-container {
     flex-grow: 1;
     .input-range-core {
-      color: var(--theme-form-input-text);
+      accent-color: var(--theme-form-range-accent-color);
       height: var(--_input-range-height);
       margin: 0;
       width: 100%;
 
+      /* For Chrome, Safari, Opera, and Edge */
+      /* &::-webkit-slider-runnable-track {
+        background: var(--theme-form-range-accent-color);
+        height: var(--_input-range-height);
+      } */
+
+      /* For Firefox */
+      /* &::-moz-range-track {
+        background: var(--theme-form-range-accent-color);
+        height: var(--_input-range-height);
+      } */
+
+      /* Stling the thumb */
+      /* &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        background: #5cd5eb;
+        height: 2rem;
+        width: 1rem;
+        border-radius: 10px;
+      } */
+
+      /* For Firefox */
+      /* &::-moz-range-thumb {
+        background: #5cd5eb;
+        height: 2rem;
+        width: 1rem;
+        border-radius: 10px;
+        border: none;
+      } */
+
       &:focus-visible {
         box-shadow: var(--theme-form-focus-box-shadow);
       }

package/components/forms/input-range/variants/InputRangeDefault.vue

@@ -16,7 +16,7 @@
           :readonly="Number(modelValue) === min"
           :is-pending="false"
           buttonText="Step down"
-          theme="ghost"
+          :theme
           size="x-small"
         >
           <template #iconOnly>
@@ -31,7 +31,7 @@
           :readonly="Number(modelValue) === max"
           :is-pending="false"
           buttonText="Step up"
-          theme="ghost"
+          :theme
           size="x-small"
         >
           <template #iconOnly>

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

@@ -29,7 +29,7 @@
           :readonly="Number(modelValue) <= min"
           :is-pending="false"
           buttonText="Step down"
-          theme="ghost"
+          :theme
           size="x-small"
         >
           <template #iconOnly>
@@ -44,7 +44,7 @@
           :readonly="Number(modelValue) >= max"
           :is-pending="false"
           buttonText="Step up"
-          theme="ghost"
+          :theme
           size="x-small"
         >
           <template #iconOnly>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",