MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pull in picker changes from new design UI

This commit is contained in:
Andrew Kingston 2022-06-24 14:10:13 +01:00
parent 465ef6ab57
commit 8e6acda5bd
3 changed files with 131 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,12 +6,15 @@
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import clickOutside from "../../Actions/click_outside" import clickOutside from "../../Actions/click_outside"
import Search from "./Search.svelte" import Search from "./Search.svelte"
import Icon from "../../Icon/Icon.svelte"
import StatusLight from "../../StatusLight/StatusLight.svelte"
export let id = null export let id = null
export let disabled = false export let disabled = false
export let error = null export let error = null
export let fieldText = "" export let fieldText = ""
export let fieldIcon = "" export let fieldIcon = ""
export let fieldColour = ""
export let isPlaceholder = false export let isPlaceholder = false
export let placeholderOption = null export let placeholderOption = null
export let options = [] export let options = []
@ -20,6 +23,7 @@
export let getOptionLabel = option => option export let getOptionLabel = option => option
export let getOptionValue = option => option export let getOptionValue = option => option
export let getOptionIcon = () => null export let getOptionIcon = () => null
export let getOptionColour = () => null
export let open = false export let open = false
export let readonly = false export let readonly = false
export let quiet = false export let quiet = false
@ -43,7 +47,7 @@
return return
} }
searchTerm = null searchTerm = null
open = !open open = true
} }
const getSortedOptions = (options, getLabel, sort) => { const getSortedOptions = (options, getLabel, sort) => {
@ -71,73 +75,104 @@
} }
</script> </script>
<div use:clickOutside={() => (open = false)}> <button
<button {id}
{id} class="spectrum-Picker spectrum-Picker--sizeM"
class="spectrum-Picker spectrum-Picker--sizeM" class:spectrum-Picker--quiet={quiet}
class:spectrum-Picker--quiet={quiet} {disabled}
{disabled} class:is-invalid={!!error}
class:is-invalid={!!error} class:is-open={open}
class:is-open={open} aria-haspopup="listbox"
aria-haspopup="listbox" on:mousedown={onClick}
on:mousedown={onClick} >
> {#if fieldIcon}
{#if fieldIcon} <span class="option-icon">
<span class="icon-Placeholder-Padding"> <Icon name={fieldIcon} />
<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> </span>
{#if error} {/if}
<svg <span
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" class="spectrum-Picker-label"
focusable="false" class:is-placeholder={isPlaceholder}
aria-hidden="true" class:auto-width={autoWidth}
aria-label="Folder" >
> {fieldText}
<use xlink:href="#spectrum-icon-18-Alert" /> </span>
</svg> {#if error}
{/if}
<svg <svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
aria-label="Folder"
> >
<use xlink:href="#spectrum-css-icon-Chevron100" /> <use xlink:href="#spectrum-icon-18-Alert" />
</svg> </svg>
</button> {/if}
{#if open} {#if fieldColour}
<div <span class="option-colour">
transition:fly|local={{ y: -20, duration: 200 }} <StatusLight custom color={fieldColour} />
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" </span>
class:auto-width={autoWidth} {/if}
> <svg
{#if autocomplete} class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
<Search focusable="false"
value={searchTerm} aria-hidden="true"
on:change={event => (searchTerm = event.detail)} >
{disabled} <use xlink:href="#spectrum-css-icon-Chevron100" />
placeholder="Search" </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>
{/if} {/if}
<ul class="spectrum-Menu" role="listbox"> {#if filteredOptions.length}
{#if placeholderOption} {#each filteredOptions as option, idx}
<li <li
class="spectrum-Menu-item placeholder" class="spectrum-Menu-item"
class:is-selected={isPlaceholder} class:is-selected={isOptionSelected(getOptionValue(option, idx))}
role="option" role="option"
aria-selected="true" aria-selected="true"
tabindex="0" tabindex="0"
on:click={() => onSelectOption(null)} on:click={() => onSelectOption(getOptionValue(option, idx))}
> >
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span> {#if getOptionIcon(option, idx)}
<span class="option-icon">
<Icon name={getOptionIcon(option, idx)} />
</span>
{/if}
<span class="spectrum-Menu-itemLabel">
{getOptionLabel(option, idx)}
</span>
<svg <svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false" focusable="false"
@ -145,45 +180,17 @@
> >
<use xlink:href="#spectrum-css-icon-Checkmark100" /> <use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg> </svg>
</li> {#if getOptionColour(option, idx)}
{/if} <span class="option-colour">
{#if filteredOptions.length} <StatusLight custom color={getOptionColour(option, idx)} />
{#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> </span>
<svg {/if}
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" </li>
focusable="false" {/each}
aria-hidden="true" {/if}
> </ul>
<use xlink:href="#spectrum-css-icon-Checkmark100" /> </div>
</svg> {/if}
</li>
{/each}
{/if}
</ul>
</div>
{/if}
</div>
<style> <style>
.spectrum-Popover { .spectrum-Popover {
@ -213,13 +220,18 @@
padding-right: 2px; padding-right: 2px;
} }
.icon-Padding { /* Icon and colour alignment */
padding-right: 10px; .spectrum-Menu-checkmark {
align-self: center;
margin-top: 0;
} }
.icon-Placeholder-Padding { .option-colour {
padding-top: 5px; padding-left: 8px;
padding-right: 10px;
} }
.option-icon {
padding-right: 8px;
}
.spectrum-Popover :global(.spectrum-Search) { .spectrum-Popover :global(.spectrum-Search) {
margin-top: -1px; margin-top: -1px;
margin-left: -1px; margin-left: -1px;

41
packages/bbui/src/Form/Core/Select.svelte
View File

@ -11,6 +11,7 @@
export let getOptionLabel = option => option export let getOptionLabel = option => option
export let getOptionValue = option => option export let getOptionValue = option => option
export let getOptionIcon = () => null export let getOptionIcon = () => null
export let getOptionColour = () => null
export let readonly = false export let readonly = false
export let quiet = false export let quiet = false
export let autoWidth = false export let autoWidth = false
@ -20,7 +21,19 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let open = false let open = false
$: fieldText = getFieldText(value, options, placeholder) $: fieldText = getFieldText(value, options, placeholder)
$: fieldIcon = getFieldIcon(value, options, placeholder) $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
$: fieldColour = getFieldAttribute(getOptionColour, value, options)
const getFieldAttribute = (getAttribute, value, options) => {
// Wait for options to load if there is a value but no options
if (!options?.length) {
return ""
}
const index = options.findIndex(
(option, idx) => getOptionValue(option, idx) === value
)
return index !== -1 ? getAttribute(options[index], index) : null
}
const getFieldText = (value, options, placeholder) => { const getFieldText = (value, options, placeholder) => {
// Always use placeholder if no value // Always use placeholder if no value
@ -28,27 +41,7 @@
return placeholder || "Choose an option" return placeholder || "Choose an option"
} }
// Wait for options to load if there is a value but no options return getFieldAttribute(getOptionLabel, value, options)
if (!options?.length) {
return ""
}
// Render the label if the selected option is found, otherwise raw value
const index = options.findIndex(
(option, idx) => getOptionValue(option, idx) === value
)
return index !== -1 ? getOptionLabel(options[index], index) : value
}
const getFieldIcon = (value, options) => {
// Wait for options to load if there is a value but no options
if (!options?.length) {
return ""
}
const index = options.findIndex(
(option, idx) => getOptionValue(option, idx) === value
)
return index !== -1 ? getOptionIcon(options[index], index) : null
} }
const selectOption = value => { const selectOption = value => {
@ -66,12 +59,14 @@
{disabled} {disabled}
{readonly} {readonly}
{fieldText} {fieldText}
{fieldIcon}
{fieldColour}
{options} {options}
{autoWidth} {autoWidth}
{getOptionLabel} {getOptionLabel}
{getOptionValue} {getOptionValue}
{getOptionIcon} {getOptionIcon}
{fieldIcon} {getOptionColour}
{autocomplete} {autocomplete}
{sort} {sort}
isPlaceholder={value == null || value === ""} isPlaceholder={value == null || value === ""}

2
packages/bbui/src/Form/Select.svelte
View File

@ -14,6 +14,7 @@
export let getOptionLabel = option => extractProperty(option, "label") export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value") export let getOptionValue = option => extractProperty(option, "value")
export let getOptionIcon = option => option?.icon export let getOptionIcon = option => option?.icon
export let getOptionColour = option => option?.colour
export let quiet = false export let quiet = false
export let autoWidth = false export let autoWidth = false
export let sort = false export let sort = false
@ -47,6 +48,7 @@
{getOptionLabel} {getOptionLabel}
{getOptionValue} {getOptionValue}
{getOptionIcon} {getOptionIcon}
{getOptionColour}
on:change={onChange} on:change={onChange}
on:click on:click
/> />