srcdev-nuxt-forms 2.4.14 → 2.4.16

package/assets/styles/utils/_page.css

@@ -28,3 +28,9 @@ a {
   font-family: var(--font-family);
   font-size: var(--step-1);
 }
+
+body {
+  &.page-theme-grey {
+    background-color: lightseagreen;
+  }
+}

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

@@ -169,10 +169,13 @@ onMounted(() => {
   --_input-text-wrapper-opacity: 1;
   --_input-text-wrapper-box-shadow: var(--_focus-box-shadow);
   --_input-text-wrapper-margin-inline: 0;
+  --_input-text-wrapper-padding-block: 0;
 
   &.underlined {
     --_input-text-core-color: var(--theme-form-input-text-color-underlined);
-    --_input-text-wrapper-background-color: var(--theme-form-input-bg-underlined);
+    /* --_input-text-wrapper-background-color: var(--theme-form-input-bg-underlined); */
+    --_input-text-wrapper-background-color: transparent;
+    --_input-text-wrapper-padding-block: 0.5rem;
   }
 
   &.outlined {
@@ -229,6 +232,7 @@ onMounted(() => {
   opacity: var(--_input-text-wrapper-opacity);
 
   margin-inline: var(--_input-text-wrapper-margin-inline);
+  padding-block: var(--_input-text-wrapper-padding-block);
 
   &:not(.normal) {
     transition: opacity 0.2s ease-in-out;

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

@@ -172,20 +172,29 @@ watch(
   /* Label vars */
   --_label-text-color: var(--theme-form-input-text-label-color-normal);
   --_label-text-margin-block: 0.8rem;
-  --_label-text-size: var(--step-1);
+  --_label-text-size: var(--step-2);
   --_label-text-weight: normal;
   --_label-text-line-height: 1.5;
+  --_label-text-background-color: var(--_input-text-with-label-background-color);
 
   &.underlined {
     --_label-text-color: var(--theme-form-input-text-label-color-underlined);
-    --_label-offset: 0 0;
-    --_input-text-with-label-background-color: var(--theme-form-input-bg-underlined);
-    --_input-text-wrapper-border-radius: 0;
+    --_label-offset: 1rem 0;
+    /* --_input-text-with-label-background-color: var(--theme-form-input-bg-underlined); */
+    --_input-text-with-label-background-color: rgba(255, 255, 255, 0.1);
+
+    --_input-text-wrapper-underlined-border-radius-top-left: 0;
+    --_input-text-wrapper-underlined-border-radius-top-right: 0;
+    --_input-text-wrapper-underlined-border-radius-bottom-left: 4px;
+    --_input-text-wrapper-underlined-border-radius-bottom-right: 4px;
+
+    --_label-text-background-color: transparent;
 
     &:has(.input-text-wrapper.active),
     &:has(.input-text-wrapper.dirty) {
-      --_label-offset: 0 -2.8rem;
-      /* font-size: var(--step-1); */
+      --_label-offset: 0 -4.2rem;
+      --_label-text-weight: bolder;
+      --_label-text-size: var(--step-1);
       /* line-height: 1.5; */
       /* padding: 0.2rem 1.2rem; */
     }
@@ -202,14 +211,15 @@ watch(
     &:has(.input-text-wrapper.active),
     &:has(.input-text-wrapper.dirty) {
       --_label-offset: 1rem -2.8rem;
-      /* font-size: var(--step-1); */
+      --_label-text-weight: normal;
+      /* --_label-text-size: var(--step-1); */
       /* line-height: 1.5; */
       /* padding: 0.2rem 1.2rem; */
     }
   }
 
   &:not(.normal) {
-    --_input-text-with-label-margin-block-start: 2em;
+    --_input-text-with-label-margin-block-start: 3em;
 
     &:has(.input-text-wrapper.active),
     &:has(.input-text-wrapper.dirty) {
@@ -231,9 +241,14 @@ watch(
 
   background-color: var(--_input-text-with-label-background-color);
   border-radius: var(--_input-text-wrapper-border-radius);
+  /* overflow: clip; */
 
   &.underlined {
     border-bottom: var(--_input-text-wrapper-border-underlined);
+    border-top-left-radius: var(--_input-text-wrapper-underlined-border-radius-top-left);
+    border-top-right-radius: var(--_input-text-wrapper-underlined-border-radius-top-right);
+    border-bottom-left-radius: var(--_input-text-wrapper-underlined-border-radius-bottom-left);
+    border-bottom-right-radius: var(--_input-text-wrapper-underlined-border-radius-bottom-right);
   }
 
   &.outlined {
@@ -262,14 +277,21 @@ watch(
   }
 
   .input-text-label {
-    display: block;
+    display: inline-block;
     color: var(--_label-text-color);
+    background-color: var(--_label-text-background-color);
     margin-block: var(--_label-text-margin-block);
     font-size: var(--_label-text-size);
     font-weight: var(--_label-text-weight);
     line-height: var(--_label-text-line-height);
     translate: var(--_label-offset);
+    width: fit-content;
     transition: font-size 0.2s ease-in-out, translate 0.2s ease-in-out;
+
+    &:not(.normal) {
+      display: flex;
+      align-items: center;
+    }
   }
 }
 </style>

package/components/forms/ui/FormField.vue

@@ -32,10 +32,10 @@ defineProps({
 .form-field {
   --_gutter-width: 0rem;
   --_max-width: 400px;
-  --_background-color: var(--page-bg);
+  --_background-color: transparent;
   --_border-radius: 0.4rem;
 
-  background-color: var(--gray-2);
+  background-color: var(--_background-color);
   border-radius: var(--_border-radius);
   margin-inline: auto;
   margin-block: 1lh;
@@ -47,6 +47,10 @@ defineProps({
     background-color: var(--theme-error-surface);
   }
 
+  &:has(.underline) {
+    --_background-color: var(--theme-form-input-bg-underlined);
+  }
+
   .form-field-inner {
     background-color: var(--_background-color);
     border-radius: var(--_border-radius);

package/composables/useZodValidation.ts

@@ -1,4 +1,3 @@
-import { ref, reactive, toRaw, type Ref } from 'vue';
 import { z, ZodError } from 'zod';
 import type { ApiErrorResponse } from '../types/types.forms';
 

package/package.json

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