Table

src/lib/components/Facets/Facets.svelte

@@ -1,51 +1,26 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { getModalStore, Modal, TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
+	import type { Writable } from 'svelte/store';
 
 	import ShowMore from './ShowMore.svelte';
 	import type { FacetGroup, SelectedFacetGroup } from '$models/Models';
 
 	export let groupSelection = false;
-	export let groups: FacetGroup[];
+	export let groups: Writable<FacetGroup[]>;
 	export let showAll = false;
 	export let open = false;
 
-	let displayedGroups = structuredClone(groups);
-
-	let selected: { [key: string]: SelectedFacetGroup } = groups.reduce((acc, g) => {
-		const children = g.children.reduce((acc, c) => {
-			acc[c.name] = {
-				...c,
-				selected: false
-			};
-			return acc;
-		}, {});
-
-		acc[g.name] = {
-			...g,
-			children,
-			selected: false
-		};
-
-		return acc;
-	}, {});
+	let selected: { [key: string]: SelectedFacetGroup };
 	let selectedItems: {
 		[key: string]: {
 			[key: string]: boolean;
 		};
 	} = {};
 	let selectedGroups: { [key: string]: boolean } = {};
 
-	Object.keys(selected).forEach((groupName) => {
-		selectedItems[groupName] = {};
-		Object.keys(selected[groupName].children).forEach((itemName) => {
-			selectedItems[groupName][itemName] = false;
-		});
-		selectedGroups[groupName] = false;
-	});
-
 	const dispatch = createEventDispatcher();
-	
+
 	const modalStore = getModalStore();
 	const showMore = (group: SelectedFacetGroup) => {
 		modalStore.trigger({
@@ -64,7 +39,7 @@
 
 	const handleSave = (group: SelectedFacetGroup) => {
 		Object.keys(group.children).forEach((key) => {
-			selectedItems[group.name][key] = group.children[key].selected;
+			selectedItems[group.name][key] = group.children[key].selected || false;
 		});
 		modalStore.close();
 	};
@@ -100,7 +75,7 @@
 			});
 		}
 
-		dispatch('change', changed);
+		changed.length && dispatch('change', changed);
 	};
 
 	const sortOptions = () => {
@@ -134,6 +109,36 @@
 		});
 	};
 
+	groups.subscribe((data) => {
+		selected = data.reduce((acc, g) => {
+			const children = g.children.reduce((acc, c) => {
+				acc[c.name] = {
+					...c,
+					selected: c.selected || false
+				};
+				return acc;
+			}, {});
+
+			acc[g.name] = {
+				...g,
+				children,
+				selected: g.selected || false
+			};
+
+			return acc;
+		}, {});
+
+		Object.keys(selected).forEach((groupName) => {
+			selectedItems[groupName] = {};
+			Object.keys(selected[groupName].children).forEach((itemName) => {
+				selectedItems[groupName][itemName] =
+					selected[groupName].children[itemName].selected || false;
+			});
+			selectedGroups[groupName] = selected[groupName].selected || false;
+		});
+	});
+
+	$: displayedGroups = structuredClone($groups);
 	$: selectedItems, mapSelected('items'), sortOptions();
 	$: selectedGroups, mapSelected('groups');
 </script>
@@ -148,7 +153,9 @@
 			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
 		>
-			<p class="font-semibold">{group.displayName}</p>
+			<p class="font-semibold">
+				{group.displayName}{group.count !== undefined ? ` (${group.count})` : ''}
+			</p>
 
 			<svelte:fragment slot="children">
 				<!-- If more than 5 choices, show the remaining in the Modal -->

src/lib/index.ts

@@ -32,6 +32,7 @@ import type { TableConfig, Columns, Column } from './models/Models';
 
 //Facets
 import Facets from './components/Facets/Facets.svelte';
+import type { FacetGroup, FacetOption, SelectedFacetGroup } from './models/Models';
 
 // CodeEditor
 import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
@@ -108,6 +109,7 @@ export { Table, TableFilter, columnFilter, searchFilter };
 
 // Facets
 export { Facets };
+export type { FacetGroup, FacetOption, SelectedFacetGroup };
 
 // CodeEditor
 export { CodeEditor };

src/lib/models/Models.ts

@@ -195,23 +195,20 @@ export interface FacetOption {
 	name: string;
 	displayName: string;
 	count?: number;
+	selected?: boolean;
 }
 
 export interface FacetGroup {
 	name: string;
 	displayName: string;
+	selected?: boolean;
 	children: FacetOption[];
 	count?: number;
 }
 
-export interface SelectedFacetOption extends FacetOption {
-	selected: boolean;
-}
-
 export interface SelectedFacetGroup extends Omit<FacetGroup, 'children'> {
-	selected: boolean;
 	children: {
-		[key: string]: SelectedFacetOption;
+		[key: string]: FacetOption;
 	};
 }
 

src/routes/components/facets/data/data.ts

@@ -64,9 +64,10 @@ export const groups: FacetGroup[] = [
 			{ name: 'Stephen King', displayName: 'Stephen King', count: 10 },
 			{ name: 'J.K. Rowling', displayName: 'J.K. Rowling', count: 3 },
 			{ name: 'Agatha Christie', displayName: 'Agatha Christie', count: 4 },
-			{ name: 'Dan Brown', displayName: 'Dan Brown', count: 7 }
+			{ name: 'Dan Brown', displayName: 'Dan Brown', count: 7, selected: true },
 		],
 		name: 'authors',
-		displayName: 'Authors'
+		displayName: 'Authors',
+		count: 24
 	}
 ];

src/routes/components/facets/examples/FacetsGroupSelection.svelte

@@ -1,20 +1,12 @@
 <script lang="ts">
+	import { writable } from 'svelte/store';
+
 	import CodeContainer from '$docs/components/CodeContainer.svelte';
 	import Facets from '$lib/components/Facets/Facets.svelte';
 	import { facetsNoGroupSelectionData, facetsGroupSelectionSvelte } from '../data/codeBlocks';
 	import { groups } from '../data/data';
 
-	let selected = {
-		Mediums: [],
-		Genres: [],
-		Authors: []
-	};
-
-	let selectedGroups = {
-		Mediums: true,
-		Genres: false,
-		Authors: false
-	};
+	const groupsStore = writable(groups);
 </script>
 
 <div id="facetsGroupSelection">
@@ -23,6 +15,6 @@
 		svelte={facetsGroupSelectionSvelte}
 		data={facetsNoGroupSelectionData}
 	>
-		<Facets {groups} bind:selected bind:selectedGroups groupSelection open />
+		<Facets groups={groupsStore} groupSelection open on:change={(e) => console.log(e)} />
 	</CodeContainer>
 </div>

src/routes/components/facets/examples/FacetsNoGroupSelection.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
+	import { writable } from 'svelte/store';
+
 	import CodeContainer from '$docs/components/CodeContainer.svelte';
 	import Facets from '$lib/components/Facets/Facets.svelte';
 	import { facetsNoGroupSelectionData, facetsNoGroupSelectionSvelte } from '../data/codeBlocks';
 	import { groups } from '../data/data';
 
-	let selected = {
-		Mediums: [],
-		Genres: [],
-		Authors: []
-	};
+	const groupsStore = writable(groups);
 </script>
 
 <div id="facetsNoGroupSelection">
-	<CodeContainer title="No group selection, closed by default and all options displayed in UI" svelte={facetsNoGroupSelectionSvelte} data={facetsNoGroupSelectionData}>
-		<Facets {groups} bind:selected showAll />
+	<CodeContainer
+		title="No group selection, closed by default and all options displayed in UI"
+		svelte={facetsNoGroupSelectionSvelte}
+		data={facetsNoGroupSelectionData}
+	>
+		<Facets groups={groupsStore} showAll on:change={(e) => console.log(e)} />
 	</CodeContainer>
 </div>