forked from tsai/budibase
PClmnt
5 years ago
committed by
GitHub
GitHub
24 changed files with 356 additions and 51 deletions
@ -0,0 +1,17 @@ |
|||
<script> |
|||
import "@spectrum-css/label/dist/index-vars.css" |
|||
import Badge from "../Badge/Badge.svelte" |
|||
export let value |
|||
|
|||
const displayLimit = 5 |
|||
|
|||
$: badges = value?.slice(0, displayLimit) ?? [] |
|||
$: leftover = (value?.length ?? 0) - badges.length |
|||
</script> |
|||
|
|||
{#each badges as badge} |
|||
<Badge size="S" grey>{badge}</Badge> |
|||
{/each} |
|||
{#if leftover} |
|||
<div>+{leftover} more</div> |
|||
{/if} |
|||
@ -0,0 +1,58 @@ |
|||
<script> |
|||
import { CoreMultiselect } from "@budibase/bbui" |
|||
import Field from "./Field.svelte" |
|||
import { getOptions } from "./optionsParser" |
|||
export let field |
|||
export let label |
|||
export let placeholder |
|||
export let disabled = false |
|||
export let validation |
|||
export let defaultValue |
|||
export let optionsSource = "schema" |
|||
export let dataProvider |
|||
export let labelColumn |
|||
export let valueColumn |
|||
export let customOptions |
|||
export let autocomplete = false |
|||
|
|||
let fieldState |
|||
let fieldApi |
|||
let fieldSchema |
|||
|
|||
$: flatOptions = optionsSource == null || optionsSource === "schema" |
|||
$: options = getOptions( |
|||
optionsSource, |
|||
fieldSchema, |
|||
dataProvider, |
|||
labelColumn, |
|||
valueColumn, |
|||
customOptions |
|||
) |
|||
</script> |
|||
|
|||
<Field |
|||
{field} |
|||
{label} |
|||
{disabled} |
|||
{validation} |
|||
{defaultValue} |
|||
type="array" |
|||
bind:fieldState |
|||
bind:fieldApi |
|||
bind:fieldSchema |
|||
> |
|||
{#if fieldState} |
|||
<CoreMultiselect |
|||
value={fieldState.value || []} |
|||
error={fieldState.error} |
|||
getOptionLabel={flatOptions ? x => x : x => x.label} |
|||
getOptionValue={flatOptions ? x => x : x => x.value} |
|||
id={fieldState.fieldId} |
|||
disabled={fieldState.disabled} |
|||
on:change={e => fieldApi.setValue(e.detail)} |
|||
{placeholder} |
|||
{options} |
|||
{autocomplete} |
|||
/> |
|||
{/if} |
|||
</Field> |
|||
@ -0,0 +1,47 @@ |
|||
export const getOptions = ( |
|||
optionsSource, |
|||
fieldSchema, |
|||
dataProvider, |
|||
labelColumn, |
|||
valueColumn, |
|||
customOptions |
|||
) => { |
|||
const isArray = fieldSchema?.type === "array" |
|||
// Take options from schema
|
|||
if (optionsSource == null || optionsSource === "schema") { |
|||
return fieldSchema?.constraints?.inclusion ?? [] |
|||
} |
|||
|
|||
if (optionsSource === "provider" && isArray) { |
|||
let optionsSet = {} |
|||
|
|||
dataProvider?.rows?.forEach(row => { |
|||
const value = row?.[valueColumn] |
|||
if (value) { |
|||
const label = row[labelColumn] || value |
|||
optionsSet[value] = { value, label } |
|||
} |
|||
}) |
|||
return Object.values(optionsSet) |
|||
} |
|||
|
|||
// Extract options from data provider
|
|||
if (optionsSource === "provider" && valueColumn) { |
|||
let optionsSet = {} |
|||
dataProvider?.rows?.forEach(row => { |
|||
const value = row?.[valueColumn] |
|||
if (value) { |
|||
const label = row[labelColumn] || value |
|||
optionsSet[value] = { value, label } |
|||
} |
|||
}) |
|||
return Object.values(optionsSet) |
|||
} |
|||
|
|||
// Extract custom options
|
|||
if (optionsSource === "custom" && customOptions) { |
|||
return customOptions |
|||
} |
|||
|
|||
return [] |
|||
} |
|||
Loading…
Reference in new issue