Add multi option select and multi table view field select components
This commit is contained in:
parent
e3512353ac
commit
42b9192725
|
@ -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>
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import TableViewFieldSelect from "./TableViewFieldSelect.svelte"
|
||||
</script>
|
||||
|
||||
<TableViewFieldSelect {...$$props} multiselect />
|
|
@ -1,11 +1,12 @@
|
|||
<script>
|
||||
import OptionSelect from "./OptionSelect.svelte"
|
||||
import { backendUiStore } from "builderStore"
|
||||
import { onMount } from "svelte"
|
||||
import MultiOptionSelect from "./MultiOptionSelect.svelte"
|
||||
|
||||
export let componentInstance = {}
|
||||
export let value = ""
|
||||
export let onChange = (val = {})
|
||||
export let onChange = () => {}
|
||||
export let multiselect = false
|
||||
|
||||
const tables = $backendUiStore.tables
|
||||
|
||||
|
@ -24,4 +25,8 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<OptionSelect {value} {onChange} {options} />
|
||||
{#if multiselect}
|
||||
<MultiOptionSelect {value} {onChange} {options} />
|
||||
{:else}
|
||||
<OptionSelect {value} {onChange} {options} />
|
||||
{/if}
|
||||
|
|
Loading…
Reference in New Issue