diff options
| -rw-r--r-- | code/app/src/lib/components/badge.svelte | 9 |
1 files changed, 5 insertions, 4 deletions
diff --git a/code/app/src/lib/components/badge.svelte b/code/app/src/lib/components/badge.svelte index fdffb11..6ec48d5 100644 --- a/code/app/src/lib/components/badge.svelte +++ b/code/app/src/lib/components/badge.svelte @@ -6,8 +6,9 @@ export let text: string; export let size: "large" | "default" = "default"; export let withDot: boolean = false; - export let removeable: boolean = false; + export let removable: boolean = false; export let uppercase: boolean = false; + export let tabindex: string | undefined = undefined; let colorName = "gray"; let sizeClass = "rounded px-2 py-0.5 text-xs"; @@ -16,7 +17,6 @@ const dispatch = createEventDispatcher(); function handle_remove(event) { - event.target.closest("span").remove(); dispatch("remove", { event, id, text }); } @@ -53,16 +53,17 @@ } </script> -<span class="inline-flex items-center font-medium {uppercase ? 'uppercase' : ''} bg-{colorName}-100 text-{colorName}-800 {sizeClass}"> +<span class="inline-flex items-center font-medium {uppercase ? 'uppercase' : ''} bg-{colorName}-100 text-{colorName}-800 {sizeClass}" {id}> {#if withDot} <svg class="{dotSizeClass} text-{colorName}-400" fill="currentColor" viewBox="0 0 8 8"> <circle cx="4" cy="4" r="3" /> </svg> {/if} {text} - {#if removeable} + {#if removable} <button on:click={handle_remove} + tabindex={parseInt(tabindex)} type="button" class="ml-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-{colorName}-400 hover:bg-{colorName}-200 hover:text-{colorName}-500 focus:bg-{colorName}-500 focus:text-white focus:outline-none" > |