Default option labels and values
This commit is contained in:
parent
959f5e888b
commit
88b801ac08
|
@ -41,14 +41,12 @@
|
||||||
bind:value={option.label}
|
bind:value={option.label}
|
||||||
label="Label"
|
label="Label"
|
||||||
labelPosition="left"
|
labelPosition="left"
|
||||||
error={option.error?.label}
|
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
placeholder="Value"
|
placeholder="Value"
|
||||||
bind:value={option.value}
|
bind:value={option.value}
|
||||||
label="Value"
|
label="Value"
|
||||||
labelPosition="left"
|
labelPosition="left"
|
||||||
error={option.error?.value}
|
|
||||||
/>
|
/>
|
||||||
<Icon
|
<Icon
|
||||||
name="Close"
|
name="Close"
|
||||||
|
|
|
@ -10,57 +10,25 @@
|
||||||
let drawer
|
let drawer
|
||||||
let tempValue = value || []
|
let tempValue = value || []
|
||||||
|
|
||||||
const saveFilter = async () => {
|
const saveOptions = async () => {
|
||||||
let hasError = false
|
// Filter out incomplete options, default if needed
|
||||||
|
tempValue = tempValue.filter(option => option.value || option.label)
|
||||||
for (let i = 0; i < tempValue.length; i++) {
|
for (let i = 0; i < tempValue.length; i++) {
|
||||||
let option = tempValue[i]
|
let option = tempValue[i]
|
||||||
if (!(option.label && option.value)) {
|
option.label = option.label ? option.label : option.value
|
||||||
option.error = {
|
option.value = option.value ? option.value : option.label
|
||||||
label: option.label ? undefined : "You must provide a label.",
|
tempValue[i] = option
|
||||||
value: option.value ? undefined : "You must provide a value.",
|
|
||||||
}
|
|
||||||
tempValue[i] = option
|
|
||||||
hasError = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!hasError) {
|
|
||||||
drawer.hide()
|
|
||||||
}
|
}
|
||||||
dispatch("change", tempValue)
|
dispatch("change", tempValue)
|
||||||
}
|
drawer.hide()
|
||||||
|
|
||||||
const clearOptionErrors = () => {
|
|
||||||
for (let i = 0; i < tempValue.length; i++) {
|
|
||||||
let option = tempValue[i]
|
|
||||||
option.error = undefined
|
|
||||||
tempValue[i] = option
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
|
||||||
for (let i = 0; i < tempValue.length; i++) {
|
|
||||||
let option = tempValue[i]
|
|
||||||
if (option.error?.label && option.label) {
|
|
||||||
option.error.label = undefined
|
|
||||||
}
|
|
||||||
if (option.error?.value && option.value) {
|
|
||||||
option.error.value = undefined
|
|
||||||
}
|
|
||||||
tempValue[i] = option
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionButton
|
<ActionButton on:click={drawer.show}>Define Options</ActionButton>
|
||||||
on:click={() => {
|
|
||||||
clearOptionErrors()
|
|
||||||
drawer.show()
|
|
||||||
}}>Define Options</ActionButton
|
|
||||||
>
|
|
||||||
<Drawer bind:this={drawer} title="Options">
|
<Drawer bind:this={drawer} title="Options">
|
||||||
<svelte:fragment slot="description">
|
<svelte:fragment slot="description">
|
||||||
Define the options for this picker.
|
Define the options for this picker.
|
||||||
</svelte:fragment>
|
</svelte:fragment>
|
||||||
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
|
<Button cta slot="buttons" on:click={saveOptions}>Save</Button>
|
||||||
<OptionsDrawer bind:options={tempValue} slot="body" />
|
<OptionsDrawer bind:options={tempValue} slot="body" />
|
||||||
</Drawer>
|
</Drawer>
|
||||||
|
|
Loading…
Reference in New Issue