Use bbui selects for all selects in workflow steps

This commit is contained in:
Andrew Kingston 2020-09-16 14:38:18 +01:00
parent 1610f483b0
commit c44ba8b995
3 changed files with 38 additions and 15 deletions

View File

@ -1,14 +1,15 @@
<script>
import { backendUiStore } from "builderStore"
import { Select } from "@budibase/bbui"
export let value
</script>
<div class="block-field">
<select class="budibase__input" bind:value>
<Select bind:value secondary thin>
<option value="">Choose an option</option>
{#each $backendUiStore.models as model}
<option value={model._id}>{model.name}</option>
{/each}
</select>
</Select>
</div>

View File

@ -1,11 +1,11 @@
<script>
import { backendUiStore } from "builderStore"
import { Input, Label } from "@budibase/bbui"
import { Input, Select, Label } from "@budibase/bbui"
export let value
$: value = value || {}
$: model = $backendUiStore.models.find(model => model._id === value?.modelId)
$: schemaFields = Object.keys(model?.schema ?? {})
$: schemaFields = Object.entries(model?.schema ?? {})
function setParsedValue(evt, field) {
const fieldSchema = model?.schema[field]
@ -20,30 +20,52 @@
</script>
<div class="block-field">
<select class="budibase__input" bind:value={value.modelId}>
<Select bind:value={value.modelId} thin secondary>
<option value="">Choose an option</option>
{#each $backendUiStore.models as model}
<option value={model._id}>{model.name}</option>
{/each}
</select>
</Select>
</div>
{#if schemaFields.length}
<div class="bb-margin-xl block-field">
{#each schemaFields as field}
{#each schemaFields as [field, schema]}
<div class="bb-margin-xl capitalise">
{#if schema.constraints?.inclusion?.length}
<div class="field-label">{field}</div>
<Select
thin
secondary
bind:value={value[field]}>
<option value="">Choose an option</option>
{#each schema.constraints.inclusion as option}
<option value={option}>{option}</option>
{/each}
</Select>
{:else}
<Input
thin
value={value[field]}
label={field}
on:change={e => setParsedValue(e, field)} />
{/if}
</div>
{/each}
</div>
{/if}
<style>
.capitalise :global(label) {
text-transform: capitalize !important;
.field-label {
color: var(--ink);
margin-bottom: 12px;
display: flex;
font-size: 14px;
font-weight: 500;
font-family: sans-serif;
}
.capitalise :global(label), .field-label {
text-transform: capitalize;
}
</style>

View File

@ -12,7 +12,7 @@
{#each inputs as [key, value]}
<div class="bb-margin-xl block-field">
<div class="field-label">{value.title}</div>
{#if value.type === 'string' && value.enum}
{#if value.type === 'string' && value.enum?.length}
<Select bind:value={block.inputs[key]} thin secondary>
<option value="">Choose an option</option>
{#each value.enum as option}