MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15666 from Budibase/BUDI-9077/type-bbui-multiselect 

Type BBUI multiselect
This commit is contained in:
Adria Navarro 2025-03-04 11:18:14 +01:00 committed by GitHub
parent 2c43740500 1d059dc644
commit 59db83f3c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 42 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
packages/bbui/src/Form/Core/Multiselect.svelte
View File

@ -1,22 +1,26 @@
<script> <script lang="ts" context="module">
type Option = any
</script>
<script lang="ts">
import Picker from "./Picker.svelte" import Picker from "./Picker.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
export let value = [] export let value: string[] = []
export let id = null export let id: string | undefined = undefined
export let placeholder = null export let placeholder: string | null = null
export let disabled = false export let disabled: boolean = false
export let options = [] export let options: Option[] = []
export let getOptionLabel = option => option export let getOptionLabel = (option: Option, _index?: number) => option
export let getOptionValue = option => option export let getOptionValue = (option: Option, _index?: number) => option
export let readonly = false export let readonly: boolean = false
export let autocomplete = false export let autocomplete: boolean = false
export let sort = false export let sort: boolean = false
export let autoWidth = false export let autoWidth: boolean = false
export let searchTerm = null export let searchTerm: string | null = null
export let customPopoverHeight = undefined export let customPopoverHeight: string | undefined = undefined
export let open = false export let open: boolean = false
export let loading export let loading: boolean
export let onOptionMouseenter = () => {} export let onOptionMouseenter = () => {}
export let onOptionMouseleave = () => {} export let onOptionMouseleave = () => {}
@ -27,10 +31,15 @@
$: optionLookupMap = getOptionLookupMap(options) $: optionLookupMap = getOptionLookupMap(options)
$: fieldText = getFieldText(arrayValue, optionLookupMap, placeholder) $: fieldText = getFieldText(arrayValue, optionLookupMap, placeholder)
$: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true $: isOptionSelected = (optionValue: string) =>
selectedLookupMap[optionValue] === true
$: toggleOption = makeToggleOption(selectedLookupMap, arrayValue) $: toggleOption = makeToggleOption(selectedLookupMap, arrayValue)
const getFieldText = (value, map, placeholder) => { const getFieldText = (
value: string[],
map: Record<string, any> | null,
placeholder: string | null
) => {
if (Array.isArray(value) && value.length > 0) { if (Array.isArray(value) && value.length > 0) {
if (!map) { if (!map) {
return "" return ""
@ -42,8 +51,8 @@
} }
} }
const getSelectedLookupMap = value => { const getSelectedLookupMap = (value: string[]) => {
let map = {} const map: Record<string, boolean> = {}
if (Array.isArray(value) && value.length > 0) { if (Array.isArray(value) && value.length > 0) {
value.forEach(option => { value.forEach(option => {
if (option) { if (option) {
@ -54,22 +63,23 @@
return map return map
} }
const getOptionLookupMap = options => { const getOptionLookupMap = (options: Option[]) => {
let map = null if (!options?.length) {
if (options?.length) { return null
map = {}
options.forEach((option, idx) => {
const optionValue = getOptionValue(option, idx)
if (optionValue != null) {
map[optionValue] = getOptionLabel(option, idx) || ""
}
})
} }
const map: Record<string, any> = {}
options.forEach((option, idx) => {
const optionValue = getOptionValue(option, idx)
if (optionValue != null) {
map[optionValue] = getOptionLabel(option, idx) || ""
}
})
return map return map
} }
const makeToggleOption = (map, value) => { const makeToggleOption = (map: Record<string, boolean>, value: string[]) => {
return optionValue => { return (optionValue: string) => {
if (map[optionValue]) { if (map[optionValue]) {
const filtered = value.filter(option => option !== optionValue) const filtered = value.filter(option => option !== optionValue)
dispatch("change", filtered) dispatch("change", filtered)