diff --git a/packages/bbui/src/Form/Core/CheckboxGroup.svelte b/packages/bbui/src/Form/Core/CheckboxGroup.svelte index a10d67cb23e..3c98aa569fd 100644 --- a/packages/bbui/src/Form/Core/CheckboxGroup.svelte +++ b/packages/bbui/src/Form/Core/CheckboxGroup.svelte @@ -16,6 +16,8 @@ export let readonly = false export let getOptionLabel = (option: O) => `${option}` export let getOptionValue = (option: O) => option as unknown as V + export let showSelectAll = false + export let selectAllText = "Select all" const dispatch = createEventDispatcher<{ change: V[] }>() @@ -29,9 +31,55 @@ ) } } + + $: allSelected = + options.length > 0 && + options.every(option => value.includes(getOptionValue(option))) + $: noneSelected = + options.length === 0 || + options.every(option => !value.includes(getOptionValue(option))) + $: indeterminate = !allSelected && !noneSelected + + const toggleSelectAll = () => { + if (allSelected) { + dispatch("change", []) + } else { + const allValues = options.map(option => getOptionValue(option)) + dispatch("change", allValues) + } + }
+ {#if showSelectAll && options?.length > 0} +
+ +
+ {/if} {#if options && Array.isArray(options)} {#each options as option} {@const optionValue = getOptionValue(option)} @@ -87,4 +135,21 @@ .icon :global(i) { font-size: 14px; } + .select-all-checkbox { + margin-bottom: 8px; + padding: 0; + } + .select-all-checkbox .spectrum-Checkbox { + padding: 0; + } + .select-all-checkbox .spectrum-Checkbox-input { + margin: 0; + } + .spectrum-FieldGroup .select-all-checkbox, + .spectrum-FieldGroup .select-all-checkbox:hover, + .spectrum-FieldGroup .select-all-checkbox:focus-within, + .spectrum-FieldGroup .select-all-checkbox .spectrum-Checkbox, + .spectrum-FieldGroup .select-all-checkbox label { + background: none !important; + } diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte index 656b6c6652a..61ce78426b6 100644 --- a/packages/bbui/src/Form/Core/Multiselect.svelte +++ b/packages/bbui/src/Form/Core/Multiselect.svelte @@ -24,12 +24,21 @@ export let loading: boolean = false export let onOptionMouseenter = () => {} export let onOptionMouseleave = () => {} + export let showSelectAll = false + export let selectAllText = "Select all" const dispatch = createEventDispatcher() $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x) $: selectedLookupMap = getSelectedLookupMap(arrayValue) $: optionLookupMap = getOptionLookupMap(options) + $: allSelected = + options.length > 0 && + options.every(option => arrayValue.includes(getOptionValue(option))) + $: noneSelected = + options.length === 0 || + options.every(option => !arrayValue.includes(getOptionValue(option))) + $: indeterminate = !allSelected && !noneSelected $: fieldText = getFieldText(arrayValue, optionLookupMap, placeholder) $: isOptionSelected = (optionValue: string) => @@ -101,6 +110,15 @@ } } } + + const toggleSelectAll = () => { + if (allSelected) { + dispatch("change", []) + } else { + const allValues = options.map(option => getOptionValue(option)) + dispatch("change", allValues) + } + } diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 7e751dd20a4..544953b947e 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -64,6 +64,11 @@ _e: MouseEvent, _option: any ) => void = () => {} + export let showSelectAll: boolean = false + export let selectAllText: string = "Select all" + export let indeterminate: boolean = false + export let allSelected: boolean = false + export let toggleSelectAll: () => void = () => {} const dispatch = createEventDispatcher() @@ -198,6 +203,27 @@ /> {/if}