blob: f967c2dc554be6064d859354b48d026fd7117d92 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let id: string | undefined = undefined;
export let type: "default" | "red" | "yellow" | "green" | "blue" | "tame" = "default";
export let text: string;
export let size: "large" | "default" = "default";
export let withDot: 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";
let dotSizeClass = "mr-1.5 h-2 w-2";
const dispatch = createEventDispatcher();
function handle_remove(event) {
dispatch("remove", { event, id, text });
}
$: switch (type) {
case "red":
colorName = "red";
break;
case "yellow":
colorName = "yellow";
break;
case "blue":
colorName = "blue";
break;
case "green":
colorName = "teal";
break;
case "default":
case "tame":
default:
colorName = "gray";
break;
}
$: switch (size) {
case "large":
sizeClass = "rounded-md px-2.5 py-0.5 text-sm";
dotSizeClass = "-ml-0.5 mr-1.5 h-2 w-2";
break;
case "default":
default:
sizeClass = "rounded px-2 py-0.5 text-xs";
dotSizeClass = "mr-1.5 h-2 w-2";
break;
}
</script>
<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 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:outline-none"
>
<span class="sr-only">Remove badge</span>
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
</svg>
</button>
{/if}
</span>
|
