srcdev-nuxt-forms 2.4.18 → 2.4.20

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

@@ -0,0 +1,20 @@
+:root {
+  [data-btn-theme='input-action-underlined'] {
+    --theme-btn-bg: transparent;
+    --theme-btn-border: transparent;
+    --theme-btn-outline: transparent;
+    --theme-btn-text: var(--_input-text-core-color);
+
+    --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: 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: transparent;
+  }
+}

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

@@ -6,3 +6,4 @@
 @import './_success';
 @import './_warning';
 @import './_input-action';
+@import './_input-action-underlined';

package/components/forms/c12/prop-validators/index.ts

@@ -23,7 +23,7 @@ export const propValidators = {
     'fvs-wght-800',
     'fvs-wght-900',
   ],
-  theme: ['primary', 'secondary', 'tertiary', 'ghost', 'error', 'success', 'warning', 'input-action'],
+  theme: ['primary', 'secondary', 'tertiary', 'ghost', 'error', 'success', 'warning', 'input-action', 'input-action-underlined'],
   checkboxAppearance: [null, 'with-decorator'],
   checkboxStyle: ['check', 'cross'],
   radioAppearance: [null, 'with-decorator'],

package/components/forms/form-errors/InputError.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-error-message" :id :class="[elementClasses, { show: showError }, { detached: isDetached }, { hide: !showError }]" :data-Testid>
+  <div class="input-error-message" :id :class="[inputVariant, elementClasses, { show: showError }, { detached: isDetached }, { hide: !showError }]" :data-Testid>
     <div class="inner" :class="[{ show: showError }]">
       <div class="inner-content">
         <div class="inner-icon">
@@ -19,6 +19,8 @@
 </template>
 
 <script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
 const props = defineProps({
   dataTestid: {
     type: String,
@@ -48,6 +50,13 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
 });
 
 const isArray = computed(() => {
@@ -72,12 +81,14 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   --_gutter-inline: var(--_gutter);
   --_transition-duration: 500ms;
   --_transition-timing-function: linear;
-  --_message-translate-y-hide: calc(var(--_gutter) * -2);
-  --_message-translate-y-show: 0;
-  --_message-translate-y: var(--_message-translate-y-hide);
-  --_padding-message-show: var(--_gutter);
-  --_padding-message-hide: 0;
-  --_padding-message: var(--_padding-message-hide);
+  --_padding-message: 1.2rem 1rem;
+
+  &.show {
+    --_grid-template-rows: 1fr;
+    --_opacity: var(--_opacity-show);
+    --_display: var(--_display-show);
+    --_gutter-block: var(--_gutter);
+  }
 
   grid-row: 2;
   grid-column: 1;
@@ -98,23 +109,10 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
     margin-block-start: 2rem;
   }
 
-  /* &.mbs-12 {
-    transition: margin-block-start var(--_transition-duration) var(--_transition-timing-function);
-    &.hide {
-      margin-block-start: 0;
-    }
-    &.show {
-      margin-block-start: 1.2rem;
-    }
-  } */
+  &.outlined {
+  }
 
-  &.show {
-    --_grid-template-rows: 1fr;
-    --_opacity: var(--_opacity-show);
-    --_display: var(--_display-show);
-    --_message-translate-y: var(--_message-translate-y-show);
-    --_gutter-block: var(--_gutter);
-    --_padding-message: var(--_padding-message-show);
+  &.underlined {
   }
 
   .inner {
@@ -123,11 +121,6 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
     overflow: hidden;
     transition: opacity var(--_transition-duration) var(--_transition-timing-function), display var(--_transition-duration) var(--_transition-timing-function) allow-discrete;
 
-    &.show {
-      display: var(--_display-show);
-      opacity: var(--_opacity-show);
-    }
-
     .inner-content {
       display: flex;
       align-items: center;
@@ -150,11 +143,6 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
         font-weight: 500;
         padding-block: var(--_padding-message);
         padding-inline: var(--_gutter-inline);
-        transform: translateY(var(--_message-translate-y));
-
-        transition-property: transform, padding;
-        transition-duration: var(--_transition-duration);
-        transition-timing-function: linear;
 
         .message-single {
           color: white;

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

@@ -21,7 +21,7 @@
         @click.stop.prevent="toggleDisplayPassword"
         :is-pending="false"
         :buttonText
-        theme="input-action"
+        :theme="buttonTheme"
         :size
         @focusin="updateFocus(name, true)"
         @focusout="updateFocus(name, false)"
@@ -102,6 +102,10 @@ const formTheme = computed(() => {
   return props.fieldHasError ? 'error' : props.theme;
 });
 
+const buttonTheme = computed(() => {
+  return props.inputVariant === 'underlined' ? 'input-action-underlined' : 'input-action';
+});
+
 const modelValue = defineModel();
 
 const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);

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

@@ -35,7 +35,7 @@
         </template>
       </InputTextCore>
 
-      <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="false" />
+      <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="false" :inputVariant />
     </div>
 
     <div v-if="inputVariant !== 'normal' && hasDescriptionSlot" :id="`${id}-description`">
@@ -179,7 +179,7 @@ watch(
 
   &.underlined {
     --_label-text-color: var(--theme-form-input-text-label-color-underlined);
-    --_label-offset: 1rem 0;
+    --_label-offset: 1rem 0.2rem;
     --_input-text-with-label-background-color: color-mix(in srgb, currentColor 5%, transparent);
 
     --_input-text-wrapper-underlined-border-radius-top-left: 0;
@@ -191,7 +191,7 @@ watch(
 
     &:has(.input-text-wrapper.active),
     &:has(.input-text-wrapper.dirty) {
-      --_label-offset: 0 -4.2rem;
+      --_label-offset: 0 -3.2rem;
       --_label-text-weight: bolder;
       --_label-text-size: var(--step-1);
       /* line-height: 1.5; */
@@ -202,10 +202,10 @@ watch(
   &.outlined {
     --_label-text-color: var(--theme-form-input-text-label-color-outlined);
 
-    --_label-offset: 1rem 0;
+    --_label-offset: 1rem -0.2rem;
     --_input-text-with-label-background-color: var(--theme-form-input-bg-normal);
 
-    --_input-text-wrapper-padding-block: 0.4em;
+    --_input-text-wrapper-padding-block: 0.4em 0;
 
     &:has(.input-text-wrapper.active),
     &:has(.input-text-wrapper.dirty) {
@@ -240,6 +240,7 @@ watch(
 
   background-color: var(--_input-text-with-label-background-color);
   border-radius: var(--_input-text-wrapper-border-radius);
+
   /* overflow: clip; */
 
   &.underlined {

package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -160,7 +160,7 @@ watch(
 
     &:has(.input-textarea-wrapper.active),
     &:has(.input-textarea-wrapper.dirty) {
-      --_label-offset: 0 -4.2rem;
+      --_label-offset: 0 -3.2rem;
       --_label-textarea-weight: bolder;
       --_label-textarea-size: var(--step-1);
       /* line-height: 1.5; */
@@ -174,7 +174,7 @@ watch(
     --_label-offset: 1rem 0;
     --_input-textarea-with-label-background-color: var(--theme-form-input-bg-normal);
 
-    --_input-textarea-wrapper-padding-block: 0.4em;
+    --_input-textarea-wrapper-padding-block: 0.4em 0;
     --_label-textarea-height: fit-content;
 
     &:has(.input-textarea-wrapper.active),

package/package.json

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