Add Chips component

.github/workflows/release.yml

@@ -46,5 +46,5 @@ jobs:
 
       - uses: EndBug/add-and-commit@v9
         with:
-          message: '(bot) Bump package version [skip ci]'
+          message: 'Bump package version [skip ci]'
           default_author: github_actions

src/lib/components/Button.svelte

@@ -22,19 +22,19 @@
 </script>
 
 {#if as === 'button'}
-    <button class={className} {disabled}>
+    <button class={className} {disabled} on:click>
         <slot/>
     </button>
 {:else if as === 'a'}
-    <a class={className} {href} {disabled}>
+    <a class={className} {href} {disabled} on:click>
         <slot/>
     </a>
 {:else if as === 'summary'}
-    <summary class={className} {disabled}>
+    <summary class={className} {disabled} on:click>
         <slot/>
     </summary>
 {:else if as === 'input'}
-    <input class={className} {value} {disabled}/>
+    <input class={className} {value} {disabled} on:click/>
 {/if}
 
 <style lang="postcss">

src/lib/components/Chips.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import IconCheck from 'virtual:icons/heroicons-outline/check'
+
+  interface Option {
+    label: string;
+    value: string | number;
+  }
+
+  export let options: Option[] = [];
+  export let value: string | number;
+  // If set to true, one chip is always selected
+  export let neverEmpty = false;
+
+  let selected: Option | null = options.find((option) => option.value === (value || ''));
+
+  $: if (selected) {
+    value = selected.value;
+  } else {
+    value = ''
+  }
+</script>
+
+<div class="chips">
+  {#each options as option}
+    {@const isSelected = selected?.value === option.value}
+    <Button
+      color={isSelected ? 'primary-light' : undefined}
+      on:click={() => {
+        console.log(option)
+        isSelected && !neverEmpty
+          ? selected = null
+          : selected = option
+      }}
+    >
+      {#if isSelected}
+        <IconCheck />
+      {/if}
+      {option.label}
+    </Button>
+  {/each}
+</div>
+
+<style lang="postcss">
+  .chips {
+    display: flex;
+    grid-gap: 0.5rem;
+  }
+</style>

src/routes/_internal/components/Example.svelte

@@ -17,6 +17,8 @@
 
 <style lang="postcss">
     .example {
+        margin-bottom: 32px;
+
         &__preview {
             padding: 16px;
             border-radius: var(--rounded-sm-top);

src/routes/_internal/components/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar'].sort()
+    const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar', 'Chips'].sort()
 </script>
 
 <nav class="sidebar">

src/routes/components/Chips.md

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import Chips from "$lib/components/Chips.svelte";
+    import Example from "../_internal/components/Example.svelte"
+
+    let foo = 'modpack'
+</script>
+
+### Simple example
+
+<Example code={`
+<Chips options={[
+    {
+        label: 'One',
+        value: 'one'
+    },
+    {
+        label: 'Two',
+        value: 'two'
+    }]}
+/>
+`}>
+<Chips options={[
+{
+label: 'One',
+value: 'one'
+},
+{
+label: 'Two',
+value: 'two'
+}]}
+/>
+</Example>
+
+
+### Force an option to be selected with `neverEmpty`
+
+<Example code={`
+<script>
+    let foo = 'modpack';
+</script>
+
+<Chips neverEmpty bind:value={foo} options={[
+    {
+        label: 'Mod',
+        value: 'mod'
+    },
+    {
+        label: 'Modpack',
+        value: 'modpack'
+    },
+    {
+        label: 'World',
+        value: 'world'
+    }]}
+/>
+`}>
+<Chips neverEmpty bind:value={foo} options={[
+{
+label: 'Mod',
+value: 'mod'
+},
+{
+label: 'Modpack',
+value: 'modpack'
+},
+{
+label: 'World',
+value: 'world'
+}]}
+/>
+</Example>