srcdev-nuxt-forms 2.1.45 → 2.1.47

package/assets/styles/forms/themes/_input-action.css

@@ -5,16 +5,16 @@
     --theme-btn-outline: transparent;
     --theme-btn-text: var(--theme-form-input-text);
 
-    --theme-btn-bg-hover: light-dark(var(--gray-2), var(--gray-3));
-    --theme-btn-border-hover: transparent;
-    --theme-btn-outline-hover: transparent;
-    --theme-btn-text-hover: var(--theme-form-input-text);
+    --theme-btn-bg-hover: var(--blue-8);
+    --theme-btn-border-hover: var(--blue-8);
+    --theme-btn-outline-hover: var(--blue-8);
+    --theme-btn-text-hover: var(--gray-00);
 
-    --theme-btn-bg-focus: transparent;
-    --theme-btn-border-focus: transparent;
-    --theme-btn-outline-focus: transparent;
-    --theme-btn-text-focus: transparent;
+    --theme-btn-bg-focus: var(--blue-8);
+    --theme-btn-border-focus: var(--blue-8);
+    --theme-btn-outline-focus: var(--blue-8);
+    --theme-btn-text-focus: var(--gray-00);
 
-    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
+    --theme-form-focus-box-shadow: transparent;
   }
 }

package/assets/styles/forms/variables/_sizes.css

@@ -13,7 +13,7 @@
     --form-text-padding-inline: calc(var(--step-0) * 0.25);
     --form-button-icon-gap: calc(var(--step-0) * 0.65);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2);
+    --form-icon-only-button-size: calc(var(--step-1) * 2 + 1px);
     --form-toggle-symbol-size: calc(var(--step-0) * 1.55);
     --form-toggle-switch-width-adjustment: 0.5rem;
 
@@ -28,7 +28,7 @@
     --form-text-padding-inline: calc(var(--step-1) * 0.25);
     --form-button-icon-gap: calc(var(--step-0) * 0.65);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.25);
+    --form-icon-only-button-size: calc(var(--step-1) * 2.25 + 1px);
     --form-toggle-symbol-size: calc(var(--step-1) * 1.635);
     --form-toggle-switch-width-adjustment: 0.3rem;
 
@@ -43,7 +43,7 @@
     --form-text-padding-inline: calc(var(--step-2) * 0.25);
     --form-button-icon-gap: calc(var(--step-0) * 0.65);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.5);
+    --form-icon-only-button-size: calc(var(--step-1) * 2.5 + 1px);
     --form-toggle-symbol-size: calc(var(--step-2) * 1.72);
     --form-toggle-switch-width-adjustment: 0.2rem;
 
@@ -58,7 +58,7 @@
     --form-text-padding-inline: calc(var(--step-3) * 0.25);
     --form-button-icon-gap: calc(var(--step-0) * 0.65);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.75);
+    --form-icon-only-button-size: calc(var(--step-1) * 2.75 + 1px);
     --form-toggle-symbol-size: calc(var(--step-3) * 1.78);
     --form-toggle-switch-width-adjustment: 0rem;
 
@@ -73,7 +73,7 @@
     --form-text-padding-inline: calc(var(--step-4) * 0.25);
     --form-button-icon-gap: calc(var(--step-0) * 0.75);
     --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 3);
+    --form-icon-only-button-size: calc(var(--step-1) * 3 + 1px);
     --form-toggle-symbol-size: calc(var(--step-4) * 1.816);
     --form-toggle-switch-width-adjustment: -0.2rem;
 

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

@@ -18,6 +18,7 @@
       ref="inputField"
       :aria-checked="isChecked"
       :aria-describedby
+      :aria-invalid="fieldHasError"
     />
   </div>
 </template>

package/components/forms/input-number/InputNumberCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-number-wrapper" :data-form-theme="formTheme" :data-size="size" :class="elementClasses">
+  <div class="input-number-wrapper" :data-form-theme="formTheme" :data-size="size">
     <div v-if="hasLeftContent" class="slot left">
       <slot name="left"></slot>
     </div>
@@ -13,7 +13,7 @@
         :min
         :max
         :step
-        :class="['input-number-core', `input-number--${theme}`, `input-number--${size}`, `input-number--${weight}`]"
+        :class="[elementClasses, 'input-number-core', `input-number--${theme}`, `input-number--${size}`, `input-number--${weight}`]"
         v-model="modelValue"
         ref="inputField"
         inputmode="numeric"
@@ -102,9 +102,7 @@ const modelValue = defineModel<number | readonly number[]>();
 const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
 const minLength = computed(() => `${max.toString().length + 3}ch`);
 
-onMounted(() => {
-  updateElementClasses(['number-1']);
-});
+// updateElementClasses(['number-1']);
 </script>
 
 <style lang="css">
@@ -175,6 +173,28 @@ onMounted(() => {
       font-weight: 400;
     }
   }
+
+  &:has(.has-left-button),
+  &:has(.has-right-button) {
+    .slot {
+      .input-button-core {
+        border: initial;
+        border-radius: 0;
+        outline: initial;
+        box-shadow: unset;
+      }
+    }
+
+    .left-slot {
+      margin-inline-end: 0;
+      border-right: 2px solid var(--theme-btn-bg-hover);
+    }
+
+    .right-slot {
+      margin-inline-end: 0;
+      border-left: 2px solid var(--theme-btn-bg-hover);
+    }
+  }
 }
 
 input[type='number']::-webkit-inner-spin-button,

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

@@ -5,7 +5,7 @@
       <slot name="description"></slot>
     </template>
 
-    <InputNumberCore v-model="modelValue" :id :name :min :max :step :theme :required :size :weight :fieldHasError>
+    <InputNumberCore v-model="modelValue" :id :name :min :max :step :theme :required :size :weight :fieldHasError :styleClassPassthrough>
       <template v-if="hasLeftContent" #left>
         <InputButtonCore
           type="button"
@@ -129,6 +129,8 @@ const updateValue = (step: number, withinRangeLimit: boolean) => {
     modelValue.value = (Number(modelValue.value) + step) as number;
   }
 };
+
+updateElementClasses(['has-left-button', 'has-right-button']);
 </script>
 
 <style lang="css">

package/components/forms/input-text/InputTextCore.vue

@@ -145,7 +145,6 @@ const validateInput = () => {
 };
 
 onMounted(() => {
-  updateElementClasses(['deep-bristol', 'deep-london', 'deep-bath']);
   if (inputmode === 'numeric') validateInput();
 });
 </script>
@@ -240,9 +239,31 @@ onMounted(() => {
     /*
     &:focus-visible {
       --_focus-box-shadow: var(--box-shadow-on);
-    }
+   :has(:has( }
     */
   }
+
+  &:has(.has-left-button),
+  &:has(.has-right-button) {
+    .slot {
+      .input-button-core {
+        border: initial;
+        border-radius: 0;
+        outline: initial;
+        box-shadow: unset;
+      }
+    }
+
+    .left-slot {
+      margin-inline-end: 0;
+      border-right: 2px solid var(--theme-btn-bg-hover);
+    }
+
+    .right-slot {
+      margin-inline-end: 0;
+      border-left: 2px solid var(--theme-btn-bg-hover);
+    }
+  }
 }
 
 input:autofill,

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

@@ -6,8 +6,8 @@
         @click.stop.prevent="toggleDisplayPassword"
         :is-pending="false"
         :buttonText
-        :theme
-        size="x-small"
+        theme="input-action"
+        :size
         @focusin="updateFocus(name, true)"
         @focusout="updateFocus(name, false)"
       >
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const { type, maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
+const { type, maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
   type: {
     type: String,
     default: 'password',
@@ -71,6 +71,13 @@ const { type, maxlength, id, name, placeholder, label, errorMessage, fieldHasErr
       return propValidators.theme.includes(value);
     },
   },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
 });
 
 const formTheme = computed(() => {
@@ -79,6 +86,8 @@ const formTheme = computed(() => {
 
 const modelValue = defineModel();
 
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
 const updateFocus = (name: string, isFocused: boolean) => {
   // console.log('updateFocus', name, isFocused);
   // modelValue.value.focusedField = isFocused ? name : '';
@@ -94,6 +103,34 @@ const buttonText = computed(() => {
 const toggleDisplayPassword = () => {
   displayPassword.value = !displayPassword.value;
 };
+
+updateElementClasses(['has-right-button']);
 </script>
 
-<style lang="css"></style>
+<style lang="css">
+/* .input-text-with-label {
+  &.has-left-button,
+  &.has-right-button {
+    .input-text-wrapper {
+      .slot {
+        .input-button-core {
+          border: initial;
+          border-radius: 0;
+          outline: initial;
+          box-shadow: unset;
+        }
+      }
+
+      .left-slot {
+        margin-inline-end: 0;
+        border-right: 2px solid var(--theme-btn-bg-hover);
+      }
+
+      .right-slot {
+        margin-inline-end: 0;
+        border-left: 2px solid var(--theme-btn-bg-hover);
+      }
+    }
+  }
+} */
+</style>

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

@@ -155,9 +155,7 @@ const updateValue = (step: number, withinRangeLimit: boolean) => {
   }
 };
 
-onMounted(() => {
-  updateElementClasses(['input-text-as-number']);
-});
+updateElementClasses(['input-text-as-number', 'has-left-button', 'has-right-button']);
 </script>
 
 <style lang="css">

package/composables/useZodValidation.ts

@@ -112,11 +112,14 @@ const useZodValidation = (formSchema: any, formRef: Ref<HTMLFormElement | null>)
   const scrollToFirstError = async () => {
     if (formRef.value) {
       const firstErrorElement = formRef.value.querySelector('[aria-invalid=true]');
-      window.scrollTo({
-        top: firstErrorElement?.getBoundingClientRect().y,
-        left: 0,
-        behavior: 'smooth',
-      });
+
+      if (firstErrorElement) {
+        window.scrollTo({
+          top: firstErrorElement?.getBoundingClientRect().y + window.scrollY,
+          left: 0,
+          behavior: 'smooth',
+        });
+      }
     }
   };
 

package/package.json

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