feat(input): switch to translate instead of absolute

dvcol · Nov 20, 2024 · 3a088c8 · 3a088c8
1 parent 473b4c7
commit 3a088c8
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 61 deletions.
diff --git a/demo/components/DemoInputs.svelte b/demo/components/DemoInputs.svelte
@@ -80,19 +80,20 @@
     },
 
     {
-      label: 'Label',
+      label: 'Floating',
       props: {
-        label,
+        label: 'Floating',
         placeholder: 'Placeholder',
+        floating: true,
         prefix,
         suffix,
         suffixProps: { onclick },
       },
     },
     {
-      label: 'Floating',
+      label: 'Label',
       props: {
-        label: 'Floating',
+        label,
         placeholder: 'Placeholder',
         floating: true,
         prefix,
@@ -171,7 +172,10 @@
 </div>
 
 {#snippet label()}
-  <span style="color: lightseagreen">Custom label Snippet</span>
+  <div>
+    <div style="color: lightseagreen">Custom snippet label</div>
+    <div style="color: cadetblue">With multiple lines</div>
+  </div>
 {/snippet}
 
 {#snippet text()}

diff --git a/src/lib/input/NeoInput.svelte b/src/lib/input/NeoInput.svelte
@@ -137,6 +137,15 @@
 
   const affix = $derived(clearable || loading !== undefined);
   const close = $derived(clearable && (focused || hovered) && value?.length && !rest?.disabled && !rest?.readonly);
+  const isFloating = $derived(floating && !focused && !value?.length);
+
+  let labelRef = $state<HTMLLabelElement>();
+  let labelHeight = $state();
+
+  $effect(() => {
+    if (!labelRef || !floating) return;
+    labelHeight = `${labelRef?.clientHeight ?? 0}px`;
+  });
 
   const context: NeoInputContext = $derived({
     // Ref
@@ -249,8 +258,8 @@
 >
   {@render before()}
   {#if label}
-    <div class="neo-input-label-container" class:placeholder={floating && !focused && !value?.length}>
-      <label for={id} class="neo-input-label" class:prefix class:rounded>
+    <div class="neo-input-label-container" class:prefix class:placeholder={isFloating}>
+      <label bind:this={labelRef} for={id} class="neo-input-label" class:prefix class:rounded style:--neo-input-label-height={labelHeight}>
         {#if typeof label === 'string'}
           {label}
         {:else}
@@ -268,47 +277,6 @@
 <style lang="scss">
   @use 'src/lib/styles/mixin' as mixin;
 
-  .neo-input-label-container {
-    position: relative;
-    flex: 1 1 auto;
-    padding-top: calc(0.5rem + var(--neo-font-size-xs));
-
-    .neo-input-label {
-      position: absolute;
-      top: 0.3rem;
-      left: 0;
-      width: 100%;
-      padding: 0.1rem 0.75rem;
-      overflow: hidden;
-      font-size: var(--neo-font-size-xs);
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      transition:
-        color 0.3s ease,
-        font-size 0.3s ease,
-        top 0.3s ease,
-        left 0.3s ease;
-      pointer-events: unset;
-
-      &.prefix {
-        padding-left: 0;
-      }
-    }
-
-    &.placeholder {
-      .neo-input-label {
-        top: calc(50% - 0.1rem - var(--neo-font-size-xs));
-        color: var(--neo-input-placeholder-color, var(--neo-text-color-disabled));
-        font-size: var(--neo-font-size);
-        pointer-events: none;
-      }
-
-      ::placeholder {
-        opacity: 0;
-      }
-    }
-  }
-
   .neo-input-group,
   .neo-input,
   .neo-input-clear,
@@ -450,6 +418,46 @@
     }
   }
 
+  .neo-input-label-container {
+    flex: 1 1 auto;
+
+    .neo-input-label {
+      display: flex;
+      min-height: var(--neo-input-label-height);
+      padding: 0.5rem 1rem 0;
+      overflow: hidden;
+      font-size: var(--neo-font-size-xs);
+      text-wrap: stable;
+      text-overflow: ellipsis;
+      transition:
+        width 0.3s ease,
+        color 0.3s ease,
+        font-size 0.3s ease,
+        translate 0.3s ease;
+      will-change: width, color, font-size, translate;
+
+      &.prefix {
+        padding-left: 0.25rem;
+      }
+    }
+
+    .neo-input {
+      padding: 0.25rem 1rem 0.75rem;
+    }
+
+    &.placeholder {
+      .neo-input-label {
+        color: var(--neo-input-placeholder-color, var(--neo-text-color-disabled));
+        font-size: var(--neo-font-size);
+        translate: 0 calc(50% + 0.75rem - var(--neo-input-label-height) / 2);
+      }
+
+      ::placeholder {
+        opacity: 0;
+      }
+    }
+  }
+
   .neo-input-group {
     margin: var(--neo-shadow-margin, 0.6rem);
     color: var(--neo-input-text-color, inherit);
@@ -480,18 +488,6 @@
     &.rounded {
       border-radius: var(--neo-border-radius-lg, 2rem);
 
-      .neo-input-label-container {
-        padding-left: 0.5rem;
-
-        .neo-input-label {
-          left: 0.5rem;
-
-          &:not(.prefix) {
-            left: 0.75rem;
-          }
-        }
-      }
-
       .neo-input {
         padding: 0.75rem 1rem;
         border-radius: var(--neo-border-radius-lg, 2rem);
@@ -517,6 +513,24 @@
           padding-right: 0.75rem;
         }
       }
+
+      .neo-input-label-container {
+        &:not(.prefix) {
+          padding-left: 0.75rem;
+        }
+
+        .neo-input-label {
+          padding: 0.5rem 1rem 0;
+
+          &.prefix {
+            padding-left: 0.125rem;
+          }
+        }
+
+        .neo-input {
+          padding: 0.25rem 1rem 0.75rem;
+        }
+      }
     }
 
     &.glass {

diff --git a/src/lib/styles/common/colors.scss b/src/lib/styles/common/colors.scss
@@ -117,7 +117,8 @@
   --neo-dark-skeleton-color: var(--neo-grey-strong-dark);
   --neo-dark-skeleton-color-step: 0.05;
   --neo-dark-close-color: oklch(from var(--neo-red) calc(l + 0.15) c h);
-  --neo-dark-close-color-focused: oklch(from var(--neo-red-75) calc(l + 0.3) c h);
+  --neo-dark-close-color-hover: oklch(from var(--neo-red-75) calc(l + 0.3) c h);
+  --neo-dark-close-color-focused: oklch(from var(--neo-red-50) calc(l + 0.3) c h);
   --neo-dark-close-bg-color-hover: oklch(from var(--neo-red-10) calc(l + 0.3) c h);
   --neo-dark-close-bg-color-focused: oklch(from var(--neo-red-5) calc(l + 0.3) c h);
 
@@ -164,6 +165,7 @@
     --neo-skeleton-color: var(--neo-dark-skeleton-color);
     --neo-skeleton-color-step: var(--neo-dark-skeleton-color-step);
     --neo-close-color: var(--neo-dark-close-color);
+    --neo-close-color-hover: var(--neo-dark-close-color-hover);
     --neo-close-color-focused: var(--neo-dark-close-color-focused);
     --neo-close-bg-color-hover: var(--neo-dark-close-bg-color-hover);
     --neo-close-bg-color-focused: var(--neo-dark-close-bg-color-focused);