ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #5800 from Budibase/bug/sev3/misc-picker-fixes 

Misc Picker Fixes
master
melohagan 4 years ago
committed by GitHub
parent
13e374774c bead1e7cb9
commit
53b1cdbba1
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 234 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      packages/bbui/src/Form/Core/CheckboxGroup.svelte
  2. 187
      packages/bbui/src/Form/Core/Picker.svelte
  3. 1
      packages/bbui/src/Form/Core/index.js
  4. 43
      packages/client/manifest.json
  5. 42
      packages/client/src/components/app/forms/MultiFieldSelect.svelte

68
packages/bbui/src/Form/Core/CheckboxGroup.svelte
View 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>

187
packages/bbui/src/Form/Core/Picker.svelte
View File

@ -43,7 +43,7 @@
return
}
searchTerm = null
open = true
open = !open
}
const getSortedOptions = (options, getLabel, sort) => {
@ -71,105 +71,73 @@
}
</script>
<button
{id}
class="spectrum-Picker spectrum-Picker--sizeM"
class:spectrum-Picker--quiet={quiet}
{disabled}
class:is-invalid={!!error}
class:is-open={open}
aria-haspopup="listbox"
on:mousedown={onClick}
>
{#if fieldIcon}
<span class="icon-Placeholder-Padding">
<img src={fieldIcon} alt="icon" width="20" height="15" />
</span>
{/if}
<span
class="spectrum-Picker-label"
class:is-placeholder={isPlaceholder}
class:auto-width={autoWidth}
<div use:clickOutside={() => (open = false)}>
<button
{id}
class="spectrum-Picker spectrum-Picker--sizeM"
class:spectrum-Picker--quiet={quiet}
{disabled}
class:is-invalid={!!error}
class:is-open={open}
aria-haspopup="listbox"
on:mousedown={onClick}
>
{fieldText}
</span>
{#if error}
{#if fieldIcon}
<span class="icon-Placeholder-Padding">
<img src={fieldIcon} alt="icon" width="20" height="15" />
</span>
{/if}
<span
class="spectrum-Picker-label"
class:is-placeholder={isPlaceholder}
class:auto-width={autoWidth}
>
{fieldText}
</span>
{#if error}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
focusable="false"
aria-hidden="true"
aria-label="Folder"
>
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
focusable="false"
aria-hidden="true"
aria-label="Folder"
>
<use xlink:href="#spectrum-icon-18-Alert" />
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
{/if}
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</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}
>
{#if autocomplete}
<Search
value={searchTerm}
on:change={event => (searchTerm = event.detail)}
{disabled}
placeholder="Search"
/>
{/if}
<ul class="spectrum-Menu" role="listbox">
{#if placeholderOption}
<li
class="spectrum-Menu-item placeholder"
class:is-selected={isPlaceholder}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(null)}
>
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
</button>
{#if open}
<div
transition:fly|local={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
class:auto-width={autoWidth}
>
{#if autocomplete}
<Search
value={searchTerm}
on:change={event => (searchTerm = event.detail)}
{disabled}
placeholder="Search"
/>
{/if}
{#if filteredOptions.length}
{#each filteredOptions as option, idx}
<ul class="spectrum-Menu" role="listbox">
{#if placeholderOption}
<li
class="spectrum-Menu-item"
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
class="spectrum-Menu-item placeholder"
class:is-selected={isPlaceholder}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(getOptionValue(option, idx))}
on:click={() => onSelectOption(null)}
>
{#if getOptionIcon(option, idx)}
<span class="icon-Padding">
<img
src={getOptionIcon(option, idx)}
alt="icon"
width="20"
height="15"
/>
</span>
{/if}
<span class="spectrum-Menu-itemLabel">
{getOptionLabel(option, idx)}
</span>
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
@ -178,11 +146,44 @@
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
{/each}
{/if}
</ul>
</div>
{/if}
{/if}
{#if filteredOptions.length}
{#each filteredOptions as option, idx}
<li
class="spectrum-Menu-item"
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(getOptionValue(option, idx))}
>
{#if getOptionIcon(option, idx)}
<span class="icon-Padding">
<img
src={getOptionIcon(option, idx)}
alt="icon"
width="20"
height="15"
/>
</span>
{/if}
<span class="spectrum-Menu-itemLabel">
{getOptionLabel(option, idx)}
</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
{/each}
{/if}
</ul>
</div>
{/if}
</div>
<style>
.spectrum-Popover {

1
packages/bbui/src/Form/Core/index.js
View File

@ -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"

43
packages/client/manifest.json
View File

@ -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",

42
packages/client/src/components/app/forms/MultiFieldSelect.svelte
View File

@ -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,17 +63,31 @@
bind:fieldSchema
>
{#if fieldState}
<CoreMultiselect
value={fieldState.value || []}
error={fieldState.error}
getOptionLabel={flatOptions ? x => x : x => x.label}
getOptionValue={flatOptions ? x => x : x => x.value}
id={fieldState.fieldId}
disabled={fieldState.disabled}
on:change={handleChange}
{placeholder}
{options}
{autocomplete}
/>
{#if !optionsType || optionsType === "select"}
<CoreMultiselect
value={fieldState.value || []}
error={fieldState.error}
getOptionLabel={flatOptions ? x => x : x => x.label}
getOptionValue={flatOptions ? x => x : x => x.value}
id={fieldState.fieldId}
disabled={fieldState.disabled}
on:change={handleChange}
{placeholder}
{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>

Write Preview
Loading…
Cancel
Save