in CheckboxGroup replace select/clear all buttons with checkbox (#126)

.changeset/old-goats-build.md

@@ -0,0 +1,5 @@
+---
+'@ldn-viz/ui': minor
+---
+
+CHANGED - in CheckboxGroup, replace Select/Clear All buttons with a checkbox

packages/ui/src/lib/checkBox/Checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	export let color: string | undefined = undefined;
 	export let checked = false;
+	export let indeterminate = false;
 	export let label: string;
 	export let id: string;
 
@@ -16,6 +17,8 @@
 		type="checkbox"
 		bind:checked
 		{disabled}
+		{indeterminate}
+		on:change
 		style={color
 			? `--border-color: ${color}; --background-color: ${color}; --tw-ring-color: ${color}`
 			: ''}

packages/ui/src/lib/checkBox/CheckboxGroup.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
-	import Button from '../button/Button.svelte';
 	import Checkbox from './Checkbox.svelte';
 
 	export let options: { id: string; label: string; disabled?: boolean; color?: string }[] = [];
 
 	export let buttonsHidden = false;
 
 	export let selectedOptions: string[] = [];
+	$: selectedOptions = options.map((o) => o.id).filter((id) => selectionState[id]);
+
 	let selectionState = Object.fromEntries(
 		options.map((o) => [o.id, selectedOptions.includes(o.id)])
 	);
 
-	const numAvailableOptions = options.filter((o) => !o.disabled).length;
-	let numAvailableOptionsSelected: number;
+	let allCheckboxesCheckedOrDisabled;
+	$: allCheckboxesCheckedOrDisabled = options.every(o =>  o.disabled ? true :  selectionState[o.id]);
+
+	let noCheckboxesChecked;
+	$: noCheckboxesChecked = !Object.values(selectionState).some(d => d);
 
 	const selectAll = () => {
 		selectionState = Object.fromEntries(
@@ -26,40 +30,37 @@
 		);
 	};
 
-	$: {
-		selectedOptions = options.map((o) => o.id).filter((id) => selectionState[id]);
-		numAvailableOptionsSelected = options.filter(
-			(o, i) => !o.disabled && selectionState[o.id]
-		).length;
+	const toggleAll = () => {
+		console.log("TOGGLING!")
+
+		if (!allCheckboxesCheckedOrDisabled){
+			selectAll();
+		} else {
+			clearAll();
+		}
 	}
 </script>
 
 <div>
 	{#if !buttonsHidden}
-		<Button
-			size="sm"
-			variant="ghost"
-			on:click={selectAll}
-			disabled={numAvailableOptionsSelected === numAvailableOptions}
-			>Select all
-		</Button>
-
-		<Button
-			size="sm" 
-			variant="ghost" 
-			on:click={clearAll}
-			disabled={numAvailableOptionsSelected === 0}
-			>Clear all</Button
-		>
-	{/if}
-
-	{#each options as option}
 		<Checkbox
-			id={option.id}
-			label={option.label}
-			color={option.color}
-			disabled={option.disabled}
-			bind:checked={selectionState[option.id]}
+				label="Select all"
+				color="#3787D2"
+				checked={allCheckboxesCheckedOrDisabled}
+				indeterminate={!allCheckboxesCheckedOrDisabled && !noCheckboxesChecked}
+				on:change={toggleAll}
 		/>
-	{/each}
+	{/if}
+
+	<div class={buttonsHidden ? '' : 'pl-[28px]'}>
+		{#each options as option}
+			<Checkbox
+				id={option.id}
+				label={option.label}
+				color={option.color}
+				disabled={option.disabled}
+				bind:checked={selectionState[option.id]}
+			/>
+		{/each}
+	</div>
 </div>