diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
| commit | a9072370ca1eb9a5cce928b1d487db0f307edea6 (patch) | |
| tree | 59c3c23df930a8b5f888dc7813923abf4ceefed4 /old-apps/web-shared/src/components/chip.svelte | |
| parent | 56fa963a1d63cbe0bf28e29e717cceaa417c45c1 (diff) | |
| download | greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.tar.xz greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.zip | |
feat: Move old apps into it's own directory
Diffstat (limited to 'old-apps/web-shared/src/components/chip.svelte')
| -rw-r--r-- | old-apps/web-shared/src/components/chip.svelte | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/old-apps/web-shared/src/components/chip.svelte b/old-apps/web-shared/src/components/chip.svelte new file mode 100644 index 0000000..7fbb445 --- /dev/null +++ b/old-apps/web-shared/src/components/chip.svelte @@ -0,0 +1,50 @@ +<script> + import {IconNames} from "$shared/lib/configuration"; + import {createEventDispatcher} from "svelte"; + import Button from "./button.svelte"; + + const dispatch = createEventDispatcher(); + export let removable = false; + export let clickable = false; + export let text = ""; + export let id = ""; + export let color = ""; + export let tabindex = ""; + + function handle_remove() { + if (removable) { + dispatch("remove", { + id + }); + } + } + + function handle_click() { + if (clickable) { + dispatch("clicked", { + id + }); + } + } +</script> + +<div class="chip break-word text-sm justify-between justify-start@md {clickable ? 'chip--interactive' : ''}" + on:click={handle_click} + id={id} + style={color !== "" ? `background-color: ${color}15; border: 1px solid ${color}; color: ${color}` : ""} + {tabindex} +> + <span class="chip__label">{text}</span> + + {#if removable} + <Button class="chip__btn" + variant="reset" + style="{color !== '' ? `background-color: ${color}45;` : ''}" + {tabindex} + icon="{IconNames.x}" + icon_width="initial" + icon_height="initial" + on:click={handle_remove} + /> + {/if} +</div> |
