diff options
Diffstat (limited to 'apps/kit/src/lib/components')
| -rw-r--r-- | apps/kit/src/lib/components/button.svelte | 38 | ||||
| -rw-r--r-- | apps/kit/src/lib/components/icons/index.ts | 4 | ||||
| -rw-r--r-- | apps/kit/src/lib/components/icons/spinner.svelte | 20 |
3 files changed, 50 insertions, 12 deletions
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> |