From 0af1b3c5f75b9e35a635af87c5daa89803a6b8e7 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 27 Feb 2024 20:25:34 -0500
Subject: [PATCH] indeterminate

---
 src/lib/components/common/Checkbox.svelte     | 25 +++++++------------
 .../common/stories/Checkbox.stories.svelte    |  4 +--
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/common/Checkbox.svelte b/src/lib/components/common/Checkbox.svelte
index 55b599b0f..bbbc660e7 100644
--- a/src/lib/components/common/Checkbox.svelte
+++ b/src/lib/components/common/Checkbox.svelte
@@ -1,21 +1,13 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
   import { Check16, Dash16 } from "svelte-octicons";
 
-  const dispatch = createEventDispatcher();
-
   export let disabled = false;
-  export let status: "off" | "on" | "some" = "off";
+  export let checked = false;
+  export let indeterminate = false;
+
   export let label = "";
 
   let checkbox: HTMLInputElement;
-
-  $: checked = status === "on" || status === "some";
-
-  function onChange(e) {
-    console.log(e);
-    status = e.target.checked ? "on" : "off";
-  }
 </script>
 
 <label>
@@ -23,15 +15,15 @@
     type="checkbox"
     bind:this={checkbox}
     {disabled}
-    {checked}
+    bind:checked
+    bind:indeterminate
     on:input
     on:change
-    on:input={onChange}
   />
   <span>
-    {#if status === "on"}
+    {#if checked}
       <Check16 />
-    {:else if status === "some"}
+    {:else if indeterminate}
       <Dash16 />
     {/if}
   </span>
@@ -81,7 +73,8 @@
     border: solid 1px var(--primary, #4294f0);
   }
 
-  input:checked + span {
+  input:checked + span,
+  input:indeterminate + span {
     background: var(--primary, #4294f0);
     border: solid 1px var(--primary, #4294f0);
   }
diff --git a/src/lib/components/common/stories/Checkbox.stories.svelte b/src/lib/components/common/stories/Checkbox.stories.svelte
index 0952ca335..200064ffd 100644
--- a/src/lib/components/common/stories/Checkbox.stories.svelte
+++ b/src/lib/components/common/stories/Checkbox.stories.svelte
@@ -16,8 +16,8 @@
 
 <Story name="off" />
 
-<Story name="on" args={{ status: "on" }} />
+<Story name="on" args={{ checked: true }} />
 
-<Story name="some" args={{ status: "some" }} />
+<Story name="some" args={{ indeterminate: true }} />
 
 <Story name="labeled" args={{ label: "Select all" }} />