Merge pull request #5800 from Budibase/bug/sev3/misc-picker-fixes
Misc Picker Fixes
This commit is contained in:
commit
76640f65f1
5 changed files with 234 additions and 107 deletions
68
packages/bbui/src/Form/Core/CheckboxGroup.svelte
Normal file
68
packages/bbui/src/Form/Core/CheckboxGroup.svelte
Normal file
|
@ -0,0 +1,68 @@
|
|||
<script>
|
||||
import "@spectrum-css/fieldgroup/dist/index-vars.css"
|
||||
import "@spectrum-css/radio/dist/index-vars.css"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let direction = "vertical"
|
||||
export let value = []
|
||||
export let options = []
|
||||
export let error = null
|
||||
export let disabled = false
|
||||
export let getOptionLabel = option => option
|
||||
export let getOptionValue = option => option
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const onChange = e => {
|
||||
let tempValue = value
|
||||
let isChecked = e.target.checked
|
||||
if (!tempValue.includes(e.target.value) && isChecked) {
|
||||
tempValue.push(e.target.value)
|
||||
}
|
||||
value = tempValue
|
||||
dispatch(
|
||||
"change",
|
||||
tempValue.filter(val => val !== e.target.value || isChecked)
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
|
||||
{#if options && Array.isArray(options)}
|
||||
{#each options as option}
|
||||
<div
|
||||
title={getOptionLabel(option)}
|
||||
class="spectrum-Checkbox spectrum-FieldGroup-item"
|
||||
class:is-invalid={!!error}
|
||||
>
|
||||
<label
|
||||
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
|
||||
>
|
||||
<input
|
||||
on:change={onChange}
|
||||
value={getOptionValue(option)}
|
||||
type="checkbox"
|
||||
class="spectrum-Checkbox-input"
|
||||
{disabled}
|
||||
checked={value.includes(getOptionValue(option))}
|
||||
/>
|
||||
<span class="spectrum-Checkbox-box">
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="spectrum-Checkbox-label">{getOptionLabel(option)}</span>
|
||||
</label>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.spectrum-Checkbox-input {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
|
@ -43,7 +43,7 @@
|
|||
return
|
||||
}
|
||||
searchTerm = null
|
||||
open = true
|
||||
open = !open
|
||||
}
|
||||
|
||||
const getSortedOptions = (options, getLabel, sort) => {
|
||||
|
@ -71,6 +71,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div use:clickOutside={() => (open = false)}>
|
||||
<button
|
||||
{id}
|
||||
class="spectrum-Picker spectrum-Picker--sizeM"
|
||||
|
@ -114,7 +115,6 @@
|
|||
</button>
|
||||
{#if open}
|
||||
<div
|
||||
use:clickOutside={() => (open = false)}
|
||||
transition:fly|local={{ y: -20, duration: 200 }}
|
||||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
|
||||
class:auto-width={autoWidth}
|
||||
|
@ -183,6 +183,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.spectrum-Popover {
|
||||
|
|
|
@ -3,6 +3,7 @@ export { default as CoreSelect } from "./Select.svelte"
|
|||
export { default as CoreMultiselect } from "./Multiselect.svelte"
|
||||
export { default as CoreCheckbox } from "./Checkbox.svelte"
|
||||
export { default as CoreRadioGroup } from "./RadioGroup.svelte"
|
||||
export { default as CoreCheckboxGroup } from "./CheckboxGroup.svelte"
|
||||
export { default as CoreTextArea } from "./TextArea.svelte"
|
||||
export { default as CoreCombobox } from "./Combobox.svelte"
|
||||
export { default as CoreSwitch } from "./Switch.svelte"
|
||||
|
|
|
@ -2338,7 +2338,11 @@
|
|||
"type": "boolean",
|
||||
"label": "Autocomplete",
|
||||
"key": "autocomplete",
|
||||
"defaultValue": false
|
||||
"defaultValue": false,
|
||||
"dependsOn": {
|
||||
"setting": "optionsType",
|
||||
"value": "select"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
|
@ -2346,6 +2350,43 @@
|
|||
"key": "disabled",
|
||||
"defaultValue": false
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Type",
|
||||
"key": "optionsType",
|
||||
"defaultValue": "select",
|
||||
"placeholder": "Pick an options type",
|
||||
"options": [
|
||||
{
|
||||
"label": "Select",
|
||||
"value": "select"
|
||||
},
|
||||
{
|
||||
"label": "Checkboxes",
|
||||
"value": "checkbox"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Direction",
|
||||
"key": "direction",
|
||||
"defaultValue": "vertical",
|
||||
"options": [
|
||||
{
|
||||
"label": "Horizontal",
|
||||
"value": "horizontal"
|
||||
},
|
||||
{
|
||||
"label": "Vertical",
|
||||
"value": "vertical"
|
||||
}
|
||||
],
|
||||
"dependsOn": {
|
||||
"setting": "optionsType",
|
||||
"value": "checkbox"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Options source",
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { CoreMultiselect } from "@budibase/bbui"
|
||||
import { CoreMultiselect, CoreCheckboxGroup } from "@budibase/bbui"
|
||||
import Field from "./Field.svelte"
|
||||
import { getOptions } from "./optionsParser"
|
||||
export let field
|
||||
|
@ -15,6 +15,8 @@
|
|||
export let customOptions
|
||||
export let autocomplete = false
|
||||
export let onChange
|
||||
export let optionsType = "select"
|
||||
export let direction = "vertical"
|
||||
|
||||
let fieldState
|
||||
let fieldApi
|
||||
|
@ -61,6 +63,7 @@
|
|||
bind:fieldSchema
|
||||
>
|
||||
{#if fieldState}
|
||||
{#if !optionsType || optionsType === "select"}
|
||||
<CoreMultiselect
|
||||
value={fieldState.value || []}
|
||||
error={fieldState.error}
|
||||
|
@ -73,5 +76,18 @@
|
|||
{options}
|
||||
{autocomplete}
|
||||
/>
|
||||
{:else if optionsType === "checkbox"}
|
||||
<CoreCheckboxGroup
|
||||
value={fieldState.value || []}
|
||||
id={fieldState.fieldId}
|
||||
disabled={fieldState.disabled}
|
||||
error={fieldState.error}
|
||||
{options}
|
||||
{direction}
|
||||
on:change={handleChange}
|
||||
getOptionLabel={flatOptions ? x => x : x => x.label}
|
||||
getOptionValue={flatOptions ? x => x : x => x.value}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
</Field>
|
||||
|
|
Loading…
Reference in a new issue