1
0
Fork 0
mirror of synced 2024-06-26 18:10:51 +12:00

add radio buttons to standard components options picker

This commit is contained in:
Maurits Lourens 2021-08-03 21:30:06 +02:00
parent b8d94c7cb5
commit acd31618f2
2 changed files with 38 additions and 10 deletions

View file

@ -1841,6 +1841,22 @@
"key": "placeholder", "key": "placeholder",
"placeholder": "Choose an option" "placeholder": "Choose an option"
}, },
{
"type": "select",
"label": "Type",
"key": "optionsType",
"placeholder": "Pick an options type",
"options": [
{
"label": "Select",
"value": "select"
},
{
"label": "Radio buttons",
"value": "radio"
}
]
},
{ {
"type": "boolean", "type": "boolean",
"label": "Disabled", "label": "Disabled",

View file

@ -1,11 +1,12 @@
<script> <script>
import { CoreSelect } from "@budibase/bbui" import { CoreSelect, RadioGroup } from "@budibase/bbui"
import Field from "./Field.svelte" import Field from "./Field.svelte"
export let field export let field
export let label export let label
export let placeholder export let placeholder
export let disabled = false export let disabled = false
export let optionsType = "select"
let fieldState let fieldState
let fieldApi let fieldApi
@ -22,14 +23,25 @@
bind:fieldSchema bind:fieldSchema
> >
{#if fieldState} {#if fieldState}
<CoreSelect {#if optionsType === 'select'}
value={$fieldState.value} <CoreSelect
id={$fieldState.fieldId} value={$fieldState.value}
disabled={$fieldState.disabled} id={$fieldState.fieldId}
error={$fieldState.error} disabled={$fieldState.disabled}
options={fieldSchema?.constraints?.inclusion ?? []} error={$fieldState.error}
{placeholder} options={fieldSchema?.constraints?.inclusion ?? []}
on:change={e => fieldApi.setValue(e.detail)} {placeholder}
/> on:change={e => fieldApi.setValue(e.detail)}
/>
{:else if optionsType === 'radio'}
<RadioGroup
value={$fieldState.value}
id={$fieldState.fieldId}
disabled={$fieldState.disabled}
error={$fieldState.error}
options={fieldSchema?.constraints?.inclusion ?? []}
on:change={e => fieldApi.setValue(e.detail)}
/>
{/if}
{/if} {/if}
</Field> </Field>