diff options
Diffstat (limited to 'apps/web-shared/src/components/button.svelte')
| -rw-r--r-- | apps/web-shared/src/components/button.svelte | 116 |
1 files changed, 0 insertions, 116 deletions
diff --git a/apps/web-shared/src/components/button.svelte b/apps/web-shared/src/components/button.svelte deleted file mode 100644 index 5eaf19f..0000000 --- a/apps/web-shared/src/components/button.svelte +++ /dev/null @@ -1,116 +0,0 @@ -<script lang="ts"> - import Icon from "$shared/components/icon.svelte"; - - export let text = ""; - export let title = ""; - export let href = ""; - export let variant: "primary"|"secondary"|"subtle" = "primary"; - export let type: "button"|"submit"|"reset" = "button"; - export let disabled = false; - export let loading = false; - export let icon = ""; - export let icon_right_aligned = false; - export let icon_width = false; - export let icon_height = false; - export let id; - export let tabindex; - export let style; - - $: shared_props = { - type: type, - id: id || null, - title: title || null, - disabled: disabled || null, - tabindex: tabindex || null, - style: style || null, - "aria-controls": ($$restProps["aria-controls"] ?? "") || null, - class: [variant === "reset" ? "reset" : `btn btn--${variant} btn--preserve-width ${loading ? "btn--state-b" : ""}`, $$restProps.class ?? ""].filter(Boolean).join(" "), - }; -</script> - -<template> - {#if href && !disabled} - <a {href} - {...shared_props} - on:click> - <span class="btn__content-a"> - {#if icon !== ""} - {#if icon_right_aligned} - {text} - <Icon class="{text ? 'margin-left-xxxs': ''}" - width={icon_width} - height={icon_height} - name={icon}/> - {:else} - <Icon class="{text ? 'margin-left-xxxs': ''}" - width={icon_width} - height={icon_height} - name={icon}/> - {text} - {/if} - {:else} - {text} - {/if} - </span> - {#if variant !== "reset" && loading} - <span class="btn__content-b"> - <svg class="icon icon--is-spinning" - aria-hidden="true" - viewBox="0 0 16 16"> - <title>Loading</title> - <g stroke-width="1" - fill="currentColor" - stroke="currentColor"> - <path d="M.5,8a7.5,7.5,0,1,1,1.91,5" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round"/> - </g> - </svg> - </span> - {/if} - </a> - {:else} - <button {...shared_props} - on:click> - <span class="btn__content-a"> - {#if icon !== ""} - {#if icon_right_aligned} - {text} - <Icon class="{text ? 'margin-left-xxxs': ''}" - width={icon_width} - height={icon_height} - name={icon}/> - {:else} - <Icon class="{text ? 'margin-left-xxxs': ''}" - width={icon_width} - height={icon_height} - name={icon}/> - {text} - {/if} - {:else} - {text} - {/if} - </span> - {#if variant !== "reset" && loading} - <span class="btn__content-b"> - <svg class="icon icon--is-spinning" - aria-hidden="true" - viewBox="0 0 16 16"> - <title>Loading</title> - <g stroke-width="1" - fill="currentColor" - stroke="currentColor"> - <path d="M.5,8a7.5,7.5,0,1,1,1.91,5" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round"/> - </g> - </svg> - </span> - {/if} - </button> - {/if} -</template> |
