Add multi option select and multi table view field select components

This commit is contained in:
Andrew Kingston 2020-11-03 09:42:46 +00:00
parent 75bfa60231
commit 465f2a6fbd
3 changed files with 52 additions and 3 deletions

View File

@ -0,0 +1,39 @@
<script>
import { Multiselect } from "@budibase/bbui"
export let options = []
export let value = []
export let styleBindingProperty
export let onChange = () => {}
let boundValue = getValidOptions(value, options)
$: setValue(boundValue)
$: sanitiseOptions(options)
function getValidOptions(selectedOptions, allOptions) {
return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
}
function setValue(val) {
console.log(val)
onChange(val)
}
function sanitiseOptions(options) {
boundValue = getValidOptions(value, options)
}
</script>
<div>
<Multiselect extraThin secondary bind:value={boundValue}>
{#each options as option}
<option value={option}>{option}</option>
{/each}
</Multiselect>
</div>
<style>
div {
flex: 1 1 auto;
}
</style>

View File

@ -0,0 +1,5 @@
<script>
import TableViewFieldSelect from "./TableViewFieldSelect.svelte"
</script>
<TableViewFieldSelect {...$$props} multiselect />

View File

@ -1,11 +1,12 @@
<script> <script>
import OptionSelect from "./OptionSelect.svelte" import OptionSelect from "./OptionSelect.svelte"
import { backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
import { onMount } from "svelte" import MultiOptionSelect from "./MultiOptionSelect.svelte"
export let componentInstance = {} export let componentInstance = {}
export let value = "" export let value = ""
export let onChange = (val = {}) export let onChange = () => {}
export let multiselect = false
const tables = $backendUiStore.tables const tables = $backendUiStore.tables
@ -24,4 +25,8 @@
} }
</script> </script>
<OptionSelect {value} {onChange} {options} /> {#if multiselect}
<MultiOptionSelect {value} {onChange} {options} />
{:else}
<OptionSelect {value} {onChange} {options} />
{/if}