From 70347722fa1f959a5b224ed43b6b64bf289f36cf Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 2 Oct 2022 17:35:06 +0800
Subject: feat/refactor: Initial surroundings for (app) and normalise icon
 names

---
 apps/kit/src/lib/components/input.svelte | 58 +++++++++-----------------------
 1 file changed, 16 insertions(+), 42 deletions(-)

(limited to 'apps/kit/src/lib/components/input.svelte')

diff --git a/apps/kit/src/lib/components/input.svelte b/apps/kit/src/lib/components/input.svelte
index 6063fe4..999c565 100644
--- a/apps/kit/src/lib/components/input.svelte
+++ b/apps/kit/src/lib/components/input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { random_string } from "$lib/helpers";
-    import { ExclamationCircle } from "./icons";
+    import { ExclamationCircleIcon } from "./icons";
 
     export let label: string | undefined = undefined;
     export let type: string = "text";
@@ -28,12 +28,10 @@
         required: required || null,
     } as any;
     $: hasBling = icon || addon || errorText;
-    const defaultColorClass =
-        "border-gray-300 focus:border-teal-500 focus:ring-teal-500";
+    const defaultColorClass = "border-gray-300 focus:border-teal-500 focus:ring-teal-500";
     let colorClass = defaultColorClass;
     $: if (errorText) {
-        colorClass =
-            "placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500 text-red-900 pr-10 border-red-300";
+        colorClass = "placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500 text-red-900 pr-10 border-red-300";
     } else {
         colorClass = defaultColorClass;
     }
@@ -45,23 +43,13 @@
 
 <div class={wrapperClass}>
     {#if label && !cornerHint && !hideLabel}
-        <label
-            for={id}
-            class={hideLabel
-                ? "sr-only"
-                : "block text-sm font-medium text-gray-700"}
-        >
+        <label for={id} class={hideLabel ? "sr-only" : "block text-sm font-medium text-gray-700"}>
             {label}
         </label>
     {:else if cornerHint && !hideLabel}
         <div class="flex justify-between">
             {#if label}
-                <label
-                    for={id}
-                    class={hideLabel
-                        ? "sr-only"
-                        : "block text-sm font-medium text-gray-700"}
-                >
+                <label for={id} class={hideLabel ? "sr-only" : "block text-sm font-medium text-gray-700"}>
                     {label}
                 </label>
             {/if}
@@ -70,24 +58,13 @@
             </span>
         </div>
     {/if}
-    <div
-        class="mt-1 {hasBling ? 'relative rounded-md' : ''} {addon
-            ? 'flex'
-            : ''}"
-    >
+    <div class="mt-1 {hasBling ? 'relative rounded-md' : ''} {addon ? 'flex' : ''}">
         {#if icon}
-            <div
-                class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
-            >
-                <svelte:component
-                    this={icon}
-                    class={errorText ? "text-red-500" : "text-gray-400"}
-                />
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                <svelte:component this={icon} class={errorText ? "text-red-500" : "text-gray-400"} />
             </div>
         {:else if addon}
-            <div
-                class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm"
-            >
+            <div class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
                 <span class="text-gray-500 sm:text-sm">{addon}</span>
             </div>
         {/if}
@@ -97,19 +74,16 @@
             {id}
             {...attributes}
             bind:value
-            class="block w-full rounded-md shadow-sm sm:text-sm {colorClass} {disabled
-                ? 'disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500'
-                : ''}
-                {addon ? 'min-w-0 flex-1 rounded-none rounded-r-md' : ''} {icon
-                ? 'pl-10'
-                : ''}"
+            class="block w-full rounded-md shadow-sm sm:text-sm
+                {colorClass}
+                {disabled ? 'disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500' : ''}
+                {addon ? 'min-w-0 flex-1 rounded-none rounded-r-md' : ''}
+                {icon ? 'pl-10' : ''}"
             {placeholder}
         />
         {#if errorText}
-            <div
-                class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
-            >
-                <ExclamationCircle class="text-red-500" />
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                <ExclamationCircleIcon class="text-red-500" />
             </div>
         {/if}
     </div>
-- 
cgit v1.3