diff options
Diffstat (limited to 'apps/kit/src/lib/components')
| -rw-r--r-- | apps/kit/src/lib/components/alert.svelte | 6 | ||||
| -rw-r--r-- | apps/kit/src/lib/components/button.svelte | 59 |
2 files changed, 39 insertions, 26 deletions
diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte index 6cc0e63..5bcb3ae 100644 --- a/apps/kit/src/lib/components/alert.svelte +++ b/apps/kit/src/lib/components/alert.svelte @@ -17,12 +17,12 @@ let iconComponent: any; let colorClassPart = ""; - // if no unique id is supplied, cooldown will not work between page loads. - // Therefore we are disabling it with noCooldownSetting in the fallback id. /** * An optional id for this alert, a default is set if not specified. * This value is necessary for closeable cooldown to work. */ + // if no unique id is supplied, cooldown will not work between page loads. + // Therefore we are disabling it with noCooldownSetting in the fallback id. export let id = "alert--" + noCooldownSetting + "--" + random_string(4); /** * The title to communicate, value is optional @@ -42,7 +42,7 @@ export let closeable = false; /** * The amount of seconds that should go by before this alert is shown again, only works when a unique id is set. - * Set to ~ if it should be only shown once per client (State stored in localestorage). + * Set to ~ if it should only be shown once per client (State stored in localestorage). **/ export let closeableCooldown = "-1"; /** diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte index 5550e5e..6566cec 100644 --- a/apps/kit/src/lib/components/button.svelte +++ b/apps/kit/src/lib/components/button.svelte @@ -1,19 +1,23 @@ -<script lang="ts"> - export type ButtonKind = "primary" | "secondary" | "white" +<script context="module" lang="ts"> + export type ButtonKind = "primary" | "secondary" | "white"; export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl"; +</script> + +<script lang="ts"> export let kind = "primary" as ButtonKind; export let size = "sm" as ButtonSize; export let type: "button" | "submit" | "reset" = "button"; - export let id = undefined; - export let tabindex = undefined; - export let style = undefined; - export let title = undefined; + export let id: string | undefined = undefined; + export let tabindex: string | undefined = undefined; + export let style: string | undefined = undefined; + export let title: string | undefined = undefined; export let disabled = false; - export let href = undefined; - export let text; + export let href: string | undefined = undefined; + export let text: string; let sizeClasses = "px-3 py-2 text-xs"; - let kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500"; + let kindClasses = + "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500"; $: shared_props = { type: type, @@ -22,7 +26,7 @@ disabled: disabled || null, tabindex: tabindex || null, style: style || null, - }; + } as any; $: switch (size) { case "xs": @@ -44,29 +48,38 @@ $: switch (kind) { case "secondary": - kindClasses = "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200"; + kindClasses = + "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500"; break; case "primary": - kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700"; + kindClasses = + "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500"; break; case "white": - kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50"; + kindClasses = + "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500"; break; } </script> + {#if href && !disabled} - <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 focus:ring-indigo-500"> + <!--@ts-ignore--> + <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" + > {text} </a> {:else} - <button {...shared_props} - on:click - {type} - class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> + <button + {...shared_props} + on:click + {type} + class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2" + > {text} </button> -{/if}
\ No newline at end of file +{/if} |