Add boolean filter

src/lib/themes/carbon/Crud/CrudViewField.svelte

@@ -15,11 +15,6 @@
 	export let value: unknown;
 	export let theme: ThemeConfig;
 
-	console.info({
-		props: $$props,
-		restProps: $$restProps
-	});
-
 	const viewComponent = theme?.viewFields[field.viewComponent] ?? DefaultField;
 
 	if (value === undefined && entityObject) {

src/lib/themes/carbon/DataTable/Toolbar/DataTableToolbar.svelte

@@ -9,7 +9,6 @@
 	import Button from 'carbon-components-svelte/src/Button/Button.svelte';
 	import FilterIcon from 'carbon-icons-svelte/lib/Filter.svelte';
 	import FilterReset from 'carbon-icons-svelte/lib/FilterReset.svelte';
-	import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
 
 	import type { Action } from '$lib/actions';
 	import ActionComponent from '$lib/themes/carbon/DataTable/Toolbar/ToolbarAction.svelte';
@@ -36,8 +35,8 @@
 				'No target when submitted filters. Did you forget to attach the event to a Form?'
 			);
 		}
-		console.info('filtersValues', filtersValues);
 		const data = getSubmittedFormData(event);
+		console.info('filtersValues', data);
 		dispatchEvent('submitFilters', data);
 	}
 

src/lib/themes/carbon/FilterComponents/BooleanFilter.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import RadioButtonGroup from 'carbon-components-svelte/src/RadioButtonGroup/RadioButtonGroup.svelte';
+	import Button from 'carbon-components-svelte/src/Button/Button.svelte';
+	import CheckboxChecked from 'carbon-icons-svelte/lib/CheckboxChecked.svelte';
+	import Checkbox from 'carbon-icons-svelte/lib/Checkbox.svelte';
+	import CheckboxIndeterminate from 'carbon-icons-svelte/lib/CheckboxIndeterminate.svelte';
+	import type { TextFilter } from '$lib/Filter';
+	import { _ } from 'svelte-i18n';
+
+	export let filter: TextFilter;
+	let value: boolean | null = null;
+
+	$: inputValue = value === true ? 1 : value === false ? 0 : '';
+</script>
+
+<input type="hidden" name={filter.field} value={inputValue} />
+
+<RadioButtonGroup
+	name={filter.field}
+	legendText={$_(filter.label ?? filter.field)}
+	labelPosition="right"
+>
+	<Button
+		value={true}
+		disabled={value === true}
+		on:click={() => (value = true)}
+		size="small"
+		kind="secondary"
+	>
+		<CheckboxChecked size={24} style="color: #0a0;text-align: center" />
+	</Button>
+	<Button
+		value={false}
+		disabled={value === false}
+		on:click={() => (value = false)}
+		size="small"
+		kind="secondary"
+	>
+		<Checkbox size={24} style="color: #a00;" />
+	</Button>
+	<Button
+		labelText="null"
+		value={null}
+		disabled={value === null}
+		on:click={() => (value = null)}
+		size="small"
+		kind="secondary"
+	>
+		<CheckboxIndeterminate />
+	</Button>
+</RadioButtonGroup>

src/lib/themes/carbon/index.js

@@ -38,6 +38,7 @@ import ViewLabel from './ViewFieldsComponents/ViewLabel.svelte';
 import ColumnsViewField from './ViewFieldsComponents/ColumnsField.svelte';
 
 import TextFilter from './FilterComponents/TextFilter.svelte';
+import BooleanFilter from './FilterComponents/BooleanFilter.svelte';
 import NumericFilter from './FilterComponents/NumericFilter.svelte';
 
 /**
@@ -82,7 +83,7 @@ const theme = {
 		url: UrlFormField
 	},
 	filters: {
-		boolean: TextFilter,
+		boolean: BooleanFilter,
 		text: TextFilter,
 		date: TextFilter,
 		numeric: NumericFilter

src/testApp/TestCrud.ts

@@ -18,7 +18,12 @@ import {
 	UrlField,
 	CallbackAction,
 	Columns,
-	Tabs
+	Tabs,
+	NumericFilter,
+	TextFilter,
+	BooleanFilter,
+	DateFilter,
+	ExistsFilter
 } from '$lib';
 import type { RequestParameters } from '$lib/request';
 
@@ -92,6 +97,13 @@ export const testCrud = new CrudDefinition<Test>('tests', {
 						window.location.reload();
 					})
 				],
+				filters: [
+					new TextFilter('text_field', 'Filter text'),
+					new BooleanFilter('checkbox_field', 'Filter checkbox'),
+					// new DateFilter('date_field', 'Filter date'),
+					new ExistsFilter('toggle_field', 'Filter toggle'),
+					new NumericFilter('number_field', 'Filter number')
+				],
 				pagination: {
 					enabled: true,
 					itemsPerPage: 10