srcdev-nuxt-forms 2.4.17 → 2.4.18

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

@@ -173,7 +173,6 @@ onMounted(() => {
 
   &.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: transparent;
     --_input-text-wrapper-padding-block: 0.5rem;
   }
@@ -324,9 +323,9 @@ input:-webkit-autofill-strong-password-viewable,
 input:-webkit-autofill-and-obscured {
   background-color: var(--theme-form-input-bg-normal) !important;
   background-image: none !important;
-  color: var(--theme-form-input-text-color-normal) !important;
+  color: var(--_input-text-core-color) !important;
   -webkit-box-shadow: 0 0 0rem 1000px var(--theme-form-input-bg-normal) inset;
-  -webkit-text-fill-color: var(--theme-form-input-text-color-normal);
+  -webkit-text-fill-color: var(--_input-text-core-color);
   transition: background-color 5000s ease-in-out 0s;
 }
 </style>

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

@@ -180,8 +180,7 @@ watch(
   &.underlined {
     --_label-text-color: var(--theme-form-input-text-label-color-underlined);
     --_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-with-label-background-color: color-mix(in srgb, currentColor 5%, transparent);
 
     --_input-text-wrapper-underlined-border-radius-top-left: 0;
     --_input-text-wrapper-underlined-border-radius-top-right: 0;
@@ -286,6 +285,7 @@ watch(
     line-height: var(--_label-text-line-height);
     translate: var(--_label-offset);
     width: fit-content;
+    height: fit-content;
     transition: font-size 0.2s ease-in-out, translate 0.2s ease-in-out;
 
     &:not(.normal) {

package/components/forms/input-textarea/InputTextareaCore.vue

@@ -3,7 +3,7 @@
     class="input-textarea-wrapper"
     :data-form-theme="formTheme"
     :data-size="size"
-    :class="[{ dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
+    :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
   >
     <span v-if="hasLeftSlot" class="slot left-slot">
       <slot name="left"></slot>
@@ -75,6 +75,13 @@ const props = defineProps({
       return propValidators.size.includes(value);
     },
   },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
 });
 
 const slots = useSlots();
@@ -100,36 +107,91 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style lang="css">
 .input-textarea-wrapper {
-  --_gutter: 1.2rem;
-  --_border-width: var(--form-element-border-width);
-  --_outline-width: var(--form-element-border-width);
+  --_focus-box-shadow: var(--box-shadow-off);
+  --_input-textarea-core-color: var(--theme-form-input-text-color-normal);
 
-  display: flex;
-  align-items: center;
+  --_input-textarea-wrapper-background-color: var(--theme-form-input-bg-normal);
+
+  --_input-textarea-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  --_input-textarea-wrapper-border-radius: var(--form-input-border-radius);
 
-  background-color: var(--theme-form-input-bg-normal);
-  border-radius: var(--form-element-border-width);
-  border: var(--_border-width) solid var(--theme-form-input-border);
+  --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  --_input-textarea-wrapper-opacity: 1;
+  --_input-textarea-wrapper-box-shadow: var(--_focus-box-shadow);
+  --_input-textarea-wrapper-margin-inline: 0;
+  --_input-textarea-wrapper-padding-block: 0;
 
-  &:focus-within {
-    border: var(--_border-width) solid var(--theme-form-input-border-focus);
-    outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 50%);
-    box-shadow: var(--form-focus-box-shadow);
+  &.underlined {
+    --_input-textarea-core-color: var(--theme-form-input-text-color-underlined);
+    --_input-textarea-wrapper-background-color: transparent;
+    --_input-textarea-wrapper-padding-block: 0.5rem;
   }
 
-  .slot {
-    display: inline-block;
-    padding-inline: 0.8rem;
+  &.outlined {
+    --_input-textarea-wrapper-margin-inline: 1px;
+    --_input-textarea-wrapper-background-color: var(--theme-form-input-bg-outlined);
+  }
 
-    .icon {
-      color: var(--theme-form-input-text-color-normal);
+  &.normal {
+    &:focus-within {
+      --_input-textarea-wrapper-box-shadow: var(--box-shadow-on);
+      --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
     }
   }
 
+  &:not(.normal) {
+    --_input-textarea-wrapper-border: none;
+    --_input-textarea-wrapper-box-shadow: none;
+    --_input-textarea-wrapper-outline: none;
+    --_input-textarea-wrapper-opacity: 0;
+
+    &:focus {
+      --_input-textarea-wrapper-border: none;
+      --_input-textarea-wrapper-box-shadow: none;
+      --_input-textarea-wrapper-outline: none;
+      --_input-textarea-wrapper-background-color: transparent;
+    }
+
+    &:focus-within {
+      --_input-textarea-wrapper-border: none;
+      --_input-textarea-wrapper-box-shadow: none;
+      --_input-textarea-wrapper-outline: none;
+      --_input-textarea-wrapper-background-color: transparent;
+    }
+
+    &.active,
+    &.dirty {
+      --_input-textarea-wrapper-border: none;
+      --_input-textarea-wrapper-box-shadow: none;
+      --_input-textarea-wrapper-outline: none;
+      --_input-textarea-wrapper-background-color: transparent;
+
+      --_input-textarea-wrapper-opacity: 1;
+    }
+  }
+
+  display: flex;
+  align-items: center;
+
+  background-color: var(--_input-textarea-wrapper-background-color);
+  border-radius: var(--_input-textarea-wrapper-border-radius);
+  border: var(--_input-textarea-wrapper-border);
+  outline: var(--_input-textarea-wrapper-outline);
+  box-shadow: var(--_input-textarea-wrapper-box-shadow);
+  opacity: var(--_input-textarea-wrapper-opacity);
+
+  margin-inline: var(--_input-textarea-wrapper-margin-inline);
+  padding-block: var(--_input-textarea-wrapper-padding-block);
+
+  &:not(.normal) {
+    transition: opacity 0.2s ease-in-out;
+  }
+
   &.has-left-slot {
     .left-slot {
       display: flex;
       align-items: center;
+      margin-inline-start: 1rem;
     }
   }
 
@@ -137,6 +199,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     .right-slot {
       display: flex;
       align-items: center;
+      margin-inline-end: 1rem;
     }
   }
 
@@ -147,7 +210,10 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     box-shadow: none;
     flex-grow: 1;
 
-    color: var(--theme-form-input-text-color-normal);
+    min-height: 4lh;
+    field-sizing: content;
+
+    color: var(--_input-textarea-core-color);
     font-family: var(--font-family);
     font-size: var(--form-element-font-size);
     line-height: var(--form-element-line-height);
@@ -156,10 +222,6 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     padding-block-start: var(--form-element-padding-block-start);
     padding-block-end: var(--form-element-padding-block-end);
 
-    min-height: 5em;
-
-    field-sizing: content;
-
     &::placeholder,
     &::-webkit-input-placeholder {
       font-family: var(--font-family);

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

@@ -1,8 +1,23 @@
 <template>
-  <div class="input-textarea-with-label" :data-form-theme="formTheme" :class="[elementClasses, { dirty: isDirty }, { active: isActive }]">
+  <div class="input-textarea-with-label" :data-form-theme="formTheme" :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]">
     <label :for="id" class="input-textarea-label body-normal-semibold">{{ label }}</label>
 
-    <InputTextareaCore v-model="modelValue" v-model:isDirty="isDirty" v-model:isActive="isActive" :maxlength :id :name :placeholder :label :fieldHasError :required :styleClassPassthrough :theme :size>
+    <InputTextareaCore
+      v-model="modelValue"
+      v-model:isDirty="isDirty"
+      v-model:isActive="isActive"
+      :maxlength
+      :id
+      :name
+      :placeholder
+      :label
+      :fieldHasError
+      :required
+      :styleClassPassthrough
+      :theme
+      :size
+      :inputVariant
+    >
       <template v-if="hasLeftSlot" #left>
         <slot name="left"></slot>
       </template>
@@ -63,6 +78,13 @@ const props = defineProps({
       return propValidators.size.includes(value);
     },
   },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
 });
 
 const slots = useSlots();
@@ -102,9 +124,144 @@ watch(
 
 <style lang="css">
 .input-textarea-with-label {
+  --_input-textarea-with-label-margin-block-start: 0;
+  --_input-textarea-with-label-background-color: transparent;
+
+  --_input-textarea-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  --_input-textarea-wrapper-border-radius: var(--form-input-border-radius);
+  --_input-textarea-wrapper-border-underlined: var(--form-element-border-width-underlined) solid var(--theme-form-input-border);
+  --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  --_input-textarea-wrapper-box-shadow: var(--_focus-box-shadow);
+  --_input-textarea-wrapper-padding-block: 0;
+
+  --_focus-box-shadow: var(--box-shadow-off);
+
+  /* Label vars */
+  --_label-textarea-color: var(--theme-form-input-text-label-color-normal);
+  --_label-textarea-margin-block: 0.8rem;
+  --_label-textarea-size: var(--step-2);
+  --_label-textarea-weight: normal;
+  --_label-textarea-height: auto;
+  --_label-textarea-line-height: 1.5;
+  --_label-textarea-background-color: var(--_input-textarea-with-label-background-color);
+
+  &.underlined {
+    --_label-textarea-color: var(--theme-form-input-text-label-color-underlined);
+    --_label-offset: 1rem 0;
+    --_input-textarea-with-label-background-color: color-mix(in srgb, currentColor 5%, transparent);
+
+    --_input-textarea-wrapper-underlined-border-radius-top-left: 0;
+    --_input-textarea-wrapper-underlined-border-radius-top-right: 0;
+    --_input-textarea-wrapper-underlined-border-radius-bottom-left: 4px;
+    --_input-textarea-wrapper-underlined-border-radius-bottom-right: 4px;
+
+    --_label-textarea-background-color: transparent;
+    --_label-textarea-height: fit-content;
+
+    &:has(.input-textarea-wrapper.active),
+    &:has(.input-textarea-wrapper.dirty) {
+      --_label-offset: 0 -4.2rem;
+      --_label-textarea-weight: bolder;
+      --_label-textarea-size: var(--step-1);
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+  }
+
+  &.outlined {
+    --_label-textarea-color: var(--theme-form-input-text-label-color-outlined);
+
+    --_label-offset: 1rem 0;
+    --_input-textarea-with-label-background-color: var(--theme-form-input-bg-normal);
+
+    --_input-textarea-wrapper-padding-block: 0.4em;
+    --_label-textarea-height: fit-content;
+
+    &:has(.input-textarea-wrapper.active),
+    &:has(.input-textarea-wrapper.dirty) {
+      --_label-offset: 1rem -2.8rem;
+      --_label-textarea-weight: normal;
+      /* --_label-textarea-size: var(--step-1); */
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+  }
+
+  &:not(.normal) {
+    --_input-textarea-with-label-margin-block-start: 3em;
+
+    &:has(.input-textarea-wrapper.active),
+    &:has(.input-textarea-wrapper.dirty) {
+      /* --_label-offset: 1rem -2.8rem; */
+      /* font-size: var(--step-1); */
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+
+    &:focus-within {
+      --_input-textarea-wrapper-box-shadow: var(--box-shadow-on);
+      --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
+    }
+  }
+
+  /*
+  * Apply generic styles
+  **/
+
+  background-color: var(--_input-textarea-with-label-background-color);
+  border-radius: var(--_input-textarea-wrapper-border-radius);
+  /* overflow: clip; */
+
+  &.underlined {
+    border-bottom: var(--_input-textarea-wrapper-border-underlined);
+    border-top-left-radius: var(--_input-textarea-wrapper-underlined-border-radius-top-left);
+    border-top-right-radius: var(--_input-textarea-wrapper-underlined-border-radius-top-right);
+    border-bottom-left-radius: var(--_input-textarea-wrapper-underlined-border-radius-bottom-left);
+    border-bottom-right-radius: var(--_input-textarea-wrapper-underlined-border-radius-bottom-right);
+  }
+
+  &.outlined {
+    border: var(--_input-textarea-wrapper-border);
+    outline: var(--_input-textarea-wrapper-outline);
+    box-shadow: var(--_input-textarea-wrapper-box-shadow);
+    padding-block: var(--_input-textarea-wrapper-padding-block);
+  }
+
+  &:not(.normal) {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'underlined-textarea-stack';
+
+    margin-block-start: var(--_input-textarea-with-label-margin-block-start);
+
+    .input-textarea-label {
+      grid-area: underlined-textarea-stack;
+      z-index: 2;
+    }
+    .input-textarea-wrapper {
+      grid-area: underlined-textarea-stack;
+      z-index: 1;
+    }
+  }
+
   .input-textarea-label {
-    display: block;
-    margin-block: 0.8rem;
+    display: inline-block;
+    color: var(--_label-textarea-color);
+    background-color: var(--_label-textarea-background-color);
+    margin-block: var(--_label-textarea-margin-block);
+    font-size: var(--_label-textarea-size);
+    font-weight: var(--_label-textarea-weight);
+    line-height: var(--_label-textarea-line-height);
+    translate: var(--_label-offset);
+    width: fit-content;
+    height: var(--_label-textarea-height);
+    transition: font-size 0.2s ease-in-out, translate 0.2s ease-in-out;
+
+    &:not(.normal) {
+      display: flex;
+      align-items: center;
+    }
   }
 }
 </style>

package/package.json

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