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 ++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 11 deletions(-)

(limited to 'apps/kit/src/lib/components/button.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}
-- 
cgit v1.3