Add option values to enum editor
Closed this issue · 4 comments
Example code to allow enum to have values and displayed text different to each other.
<script lang="ts">
import type { CommonComponentParameters } from "@restspace/svelte-schema-form/types/CommonComponentParameters";
export let params: CommonComponentParameters;
export let schema: any;
export let value: any;
let { enum: options } = schema as { enum: ( string | { value: string, text: string } )[]};
</script>
<!-- event which calls pathChanged should be after all bindings so 'value' will have been updated -->
<svelte:component this={params.components['fieldWrapper']} {params} {schema}>
<select id={params.path.join('.')}
name={params.path.join('.')}
value={value.value | value}
on:change={ev => params.pathChanged(params.path, ev.currentTarget.value || undefined)}>
<option></option>
{#each options as option (option)}
{#if typeof option == "object"}
<option value={option.value}>{option.text}</option>
{:else}
<option>{option}</option>
{/if}
{/each}
</select>
</svelte:component>
Thanks so much for this contribution! Obviously this is very useful to have. I have a suspicion that putting objects in the enum list would cause problems with the validation of the data, as the enum
items should be the same type as the type
property on the subschema i.e. "type": "string"
, enum
is a list of strings; "type": "number"
, enum
is a list of numbers. I'll check it out: I've implemented this functionality before and done it with an extra property enumText
which is non-standard to the JSON schema and therefore ignored in validation, it just provides a string for each enum item which is the text
field in your example. Thanks again.
Testing this I can see that you are correct and that it doesn't validate.
This is unfortunate since I would like to be able to use the select for database records with the value as row ID and the text as some description.
Hi I added the enumText property (see the README) so now you can use this to supply label text for the enum values. Let me know if you have any problems with this, otherwise I'll close this issue in a few days.
Thank-you.
This solution works for me.