Change TriStateCheckbox a bit

src/TriStateCheckbox.svelte

@@ -8,45 +8,31 @@
   import { UNCHECKED, CHECKED, WEIRD } from './stores';
   import { createEventDispatcher } from 'svelte';
 
+  const icons = new Map()
+    .set(UNCHECKED, 'square')
+    .set(CHECKED, 'check-square-fill')
+    .set(WEIRD, 'square-half');
+
   const dispatch = createEventDispatcher();
 
-  function handleClick() {
+  const handleClick = () => {
-    if (state === CHECKED) {
+    state = state === CHECKED ? UNCHECKED : CHECKED;
-      state = UNCHECKED;
-    } else {
-      state = CHECKED;
-    }
     dispatch('change', { value: state });
-  }
-
-  function handleCollapse(evt) {
-    collapsed = !collapsed;
-  }
-
-  $: icon = () => {
-    switch (state) {
-      case UNCHECKED:
-        return 'square';
-      case WEIRD:
-        return 'square-half';
-      case CHECKED:
-        return 'check-square-fill';
-    }
   };
 
-  $: colIcon = () => {
+  $: icon = icons.get(state);
-    return collapsed ? 'chevron-expand' : 'chevron-contract';
+
-  };
+  $: chevron = collapsed ? 'chevron-expand' : 'chevron-contract';
 </script>
 
 <span class="cal w-100 d-block" on:click={handleClick}>
   <span class="ms-2">
-    <Icon name={icon()} />
+    <Icon name={icon} />
   </span>
   <span class="ms-1">{value}</span>
   {#if collapsed !== undefined}
-    <span class="float-end" on:click|stopPropagation={handleCollapse}>
+    <span class="float-end" on:click|stopPropagation={() => (collapsed = !collapsed)}>
-      <Icon name={colIcon()} />
+      <Icon name={chevron} />
     </span>
   {/if}
 </span>