Add multi option select and multi table view field select components
This commit is contained in:
parent
75bfa60231
commit
465f2a6fbd
|
@ -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>
|
<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}
|
||||||
|
|
Loading…
Reference in New Issue