From b3dcacdc54e9893a77f165acd1809958be9b2a66 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sat, 15 Oct 2022 16:38:25 +0800
Subject: feat: Grammar on prop, add tabindex, don't remove from dom

---
 code/app/src/lib/components/badge.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'code/app/src/lib/components/badge.svelte')

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"
         >
-- 
cgit v1.3