From 803c2ff0581e761c5175e1a04b006e1f6a997c6e Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 28 Sep 2022 21:30:30 +0800
Subject: feat: Support loading buttons

---
 apps/kit/src/lib/components/button.svelte        | 38 +++++++++++++++++-------
 apps/kit/src/lib/components/icons/index.ts       |  4 ++-
 apps/kit/src/lib/components/icons/spinner.svelte | 20 +++++++++++++
 apps/kit/src/routes/book/buttons/+page.svelte    |  8 +++--
 4 files changed, 55 insertions(+), 15 deletions(-)
 create mode 100644 apps/kit/src/lib/components/icons/spinner.svelte

diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte
index 929d728..954f195 100644
--- a/apps/kit/src/lib/components/button.svelte
+++ b/apps/kit/src/lib/components/button.svelte
@@ -1,11 +1,13 @@
 <script context="module" lang="ts">
     export type ButtonKind = "primary" | "secondary" | "white";
-    export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+    export type ButtonSize = "sm" | "lg" | "md" | "xl";
 </script>
 
 <script lang="ts">
+    import { Spinner } from "./icons";
+
     export let kind = "primary" as ButtonKind;
-    export let size = "sm" as ButtonSize;
+    export let size = "md" as ButtonSize;
     export let type: "button" | "submit" | "reset" = "button";
     export let id: string | undefined = undefined;
     export let tabindex: string | undefined = undefined;
@@ -14,34 +16,38 @@
     export let disabled = false;
     export let href: string | undefined = undefined;
     export let text: string;
+    export let loading = false;
 
     let sizeClasses = "";
     let kindClasses = "";
+    let spinnerTextClasses = "";
+    let spinnerMarginClasses = "";
 
     $: shared_props = {
         type: type,
         id: id || null,
         title: title || null,
-        disabled: disabled || null,
+        disabled: disabled || loading || null,
         tabindex: tabindex || null,
         style: style || null,
     } as any;
 
     $: switch (size) {
-        case "xs":
-            sizeClasses = "px-2.5 py-1.5 text-xs";
-            break;
         case "sm":
-            sizeClasses = "px-3 py-2 text-sm";
+            sizeClasses = "px-2.5 py-1.5 text-xs";
+            spinnerMarginClasses = "mr-2";
             break;
         case "md":
-            sizeClasses = "px-3 py-2 text-base";
+            sizeClasses = "px-3 py-2 text-sm";
+            spinnerMarginClasses = "mr-2";
             break;
         case "lg":
             sizeClasses = "px-3 py-2 text-lg";
+            spinnerMarginClasses = "mr-2";
             break;
         case "xl":
             sizeClasses = "px-6 py-3 text-xl";
+            spinnerMarginClasses = "mr-2";
             break;
     }
 
@@ -49,27 +55,34 @@
         case "secondary":
             kindClasses =
                 "border-transparent text-teal-800 bg-teal-100 hover:bg-teal-200 focus:ring-teal-500";
+            spinnerTextClasses = "teal-800";
             break;
         case "primary":
             kindClasses =
                 "border-transparent text-teal-900 bg-teal-300 hover:bg-teal-400 focus:ring-teal-500";
+            spinnerTextClasses = "text-teal-900";
             break;
         case "white":
             kindClasses =
                 "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-400";
+            spinnerTextClasses = "text-gray-700";
             break;
     }
 </script>
 
-{#if href && !disabled}
-    <!--@ts-ignore-->
+{#if href}
     <a
         {...shared_props}
         {href}
         on:click
         {type}
-        class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2"
+        class="{sizeClasses} {kindClasses} {loading
+            ? 'disabled:'
+            : ''} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2"
     >
+        {#if loading}
+            <Spinner class={spinnerTextClasses + " " + spinnerMarginClasses} />
+        {/if}
         {text}
     </a>
 {:else}
@@ -79,6 +92,9 @@
         {type}
         class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2"
     >
+        {#if loading}
+            <Spinner class={spinnerTextClasses + " " + spinnerMarginClasses} />
+        {/if}
         {text}
     </button>
 {/if}
diff --git a/apps/kit/src/lib/components/icons/index.ts b/apps/kit/src/lib/components/icons/index.ts
index 9b0fb7e..b220f37 100644
--- a/apps/kit/src/lib/components/icons/index.ts
+++ b/apps/kit/src/lib/components/icons/index.ts
@@ -8,6 +8,7 @@ import ExclamationTriangle from "./exclamation-triangle.svelte";
 import XCircle from "./x-circle.svelte";
 import CheckCircle from "./check-circle.svelte";
 import XMark from "./x-mark.svelte";
+import Spinner from "./spinner.svelte";
 export {
     XIcon,
     MenuIcon,
@@ -18,5 +19,6 @@ export {
     ExclamationTriangle,
     XCircle,
     CheckCircle,
-    XMark
+    XMark,
+    Spinner
 }
\ No newline at end of file
diff --git a/apps/kit/src/lib/components/icons/spinner.svelte b/apps/kit/src/lib/components/icons/spinner.svelte
new file mode 100644
index 0000000..80cc57c
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/spinner.svelte
@@ -0,0 +1,20 @@
+<svg
+    class="-ml-1 mr-3 h-5 w-5 animate-spin {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+>
+    <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+    />
+    <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+</svg>
diff --git a/apps/kit/src/routes/book/buttons/+page.svelte b/apps/kit/src/routes/book/buttons/+page.svelte
index c8e8c93..0a54930 100644
--- a/apps/kit/src/routes/book/buttons/+page.svelte
+++ b/apps/kit/src/routes/book/buttons/+page.svelte
@@ -6,12 +6,10 @@
 <section>
     <h2>Primary</h2>
     <div class="">
-        <Button kind="primary" text="Normal" />
+        <Button kind="primary" text="Medium/Default" />
         <Button kind="primary" text="Large" size="lg" />
-        <Button kind="primary" text="Medium" size="md" />
         <Button kind="primary" text="Small" size="sm" />
         <Button kind="primary" text="Extra large" size="xl" />
-        <Button kind="primary" text="Extra small" size="xs" />
     </div>
 </section>
 <section>
@@ -22,3 +20,7 @@
     <h2>White</h2>
     <Button kind="white" text="Click me!" />
 </section>
+<section>
+    <h2>Loading</h2>
+    <Button kind="primary" loading={true} text="Wait" size="sm" />
+</section>
-- 
cgit v1.3