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

Add final version of multiselect

This commit is contained in:
Andrew Kingston 2020-10-02 16:38:33 +01:00
parent f53bf54929
commit e6db9aefd1
1 changed files with 94 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
packages/builder/src/components/common/MultiSelect.svelte
View File

@ -6,74 +6,57 @@
"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
export let value = [] export let value = []
export let readonly = false
export let label export let label
let placeholder = "Type to search" let placeholder = "Type to search"
let input
let inputValue
let options = [] let options = []
let activeOption
let optionsVisible = false let optionsVisible = false
let selected = {} let selected = {}
let first = true let first = true
let slot let slot
onMount(() => { onMount(() => {
slot.querySelectorAll("option").forEach(o => { const domOptions = Array.from(slot.querySelectorAll("option"))
o.selected && !value.includes(o.value) && (value = [...value, o.value]) options = domOptions.map(option => ({
options = [...options, { value: o.value, name: o.textContent }] value: option.value,
}) name: option.textContent,
value && }))
(selected = options.reduce( if (value) {
(obj, op) => options.forEach(option => {
value.includes(op.value) ? { ...obj, [op.value]: op } : obj, if (value.includes(option.value)) {
{} selected[option.value] = option
)) }
})
}
first = false first = false
}) })
$: if (!first) value = Object.values(selected).map(o => o.value) // Keep value up to date with selected options
$: filtered = options.filter(o => $: {
inputValue ? o.name.toLowerCase().includes(inputValue.toLowerCase()) : o if (!first) {
) value = Object.values(selected).map(option => option.value)
$: if ( }
(activeOption && !filtered.includes(activeOption)) || }
(!activeOption && inputValue)
)
activeOption = filtered[0]
function add(token) { function add(token) {
if (!readonly) selected[token.value] = token selected[token.value] = token
} }
function remove(value) { function remove(value) {
if (!readonly) { const { [value]: val, ...rest } = selected
const { [value]: val, ...rest } = selected selected = rest
selected = rest
}
} }
function removeAll() { function removeAll() {
selected = [] selected = []
inputValue = ""
} }
function showOptions(show) { function showOptions(show) {
optionsVisible = show optionsVisible = show
if (!show) {
activeOption = undefined
} else {
input.focus()
}
} }
function handleBlur() { function handleClick() {
showOptions(false) showOptions(!optionsVisible)
}
function handleFocus() {
showOptions(true)
} }
function handleOptionMousedown(e) { function handleOptionMousedown(e) {
@ -82,7 +65,6 @@
remove(value) remove(value)
} else { } else {
add(options.filter(option => option.value === value)[0]) add(options.filter(option => option.value === value)[0])
input.focus()
} }
} }
</script> </script>
@ -91,75 +73,51 @@
{#if label} {#if label}
<Label extraSmall grey>{label}</Label> <Label extraSmall grey>{label}</Label>
{/if} {/if}
<div class="multiselect" class:readonly> <div class="multiselect">
<div class="tokens-wrapper"> <div class="tokens-wrapper">
<div class="tokens" class:showOptions> <div
class="tokens"
class:optionsVisible
on:click|self={handleClick}
class:empty={!value || !value.length}>
{#each Object.values(selected) as option} {#each Object.values(selected) as option}
<div class="token" data-id={option.value}> <div class="token" data-id={option.value} on:click|self={handleClick}>
<span>{option.name}</span> <span>{option.name}</span>
{#if !readonly} <div
<div class="token-remove"
class="token-remove" title="Remove {option.name}"
title="Remove {option.name}" on:click={() => remove(option.value)}>
on:click={() => remove(option.value)}> <svg
<svg class="icon-clear"
class="icon-clear" xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" width="18"
width="18" height="18"
height="18" viewBox="0 0 24 24">
viewBox="0 0 24 24"> <path d={xPath} />
<path d={xPath} /> </svg>
</svg> </div>
</div>
{/if}
</div> </div>
{/each} {/each}
{#if !value || !value.length}&nbsp;{/if}
</div> </div>
</div> </div>
<div class="actions">
{#if !readonly}
<input
autocomplete="off"
bind:value={inputValue}
bind:this={input}
on:blur={handleBlur}
on:focus={handleFocus}
{placeholder} />
<div
class="remove-all"
title="Remove All"
class:hidden={!Object.keys(selected).length}
on:click={removeAll}>
<svg
class="icon-clear"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24">
<path d={xPath} />
</svg>
</div>
{/if}
</div>
<select bind:this={slot} type="multiple" class="hidden"> <select bind:this={slot} type="multiple" class="hidden">
<slot /> <slot />
</select> </select>
{#if optionsVisible} {#if optionsVisible}
<div class="options-overlay" on:click|self={() => showOptions(false)} />
<ul <ul
class="options" class="options"
transition:fly={{ duration: 200, y: 5 }} transition:fly={{ duration: 200, y: 5 }}
on:mousedown|preventDefault={handleOptionMousedown}> on:mousedown|preventDefault={handleOptionMousedown}>
{#each filtered as option} {#each options as option}
<li <li class:selected={selected[option.value]} data-value={option.value}>
class:selected={selected[option.value]}
class:active={activeOption === option}
data-value={option.value}>
{option.name} {option.name}
</li> </li>
{/each} {/each}
{#if !filtered.length && inputValue.length} {#if !options.length}
<li>No results</li> <li>No results</li>
{/if} {/if}
</ul> </ul>
@ -175,7 +133,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
} }
.multiselect:not(.readonly):hover { .multiselect:hover {
border-bottom-color: hsl(0, 0%, 50%); border-bottom-color: hsl(0, 0%, 50%);
} }
@ -185,6 +143,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex: 0 1 auto; flex: 0 1 auto;
z-index: 2;
} }
.tokens { .tokens {
@ -194,6 +153,14 @@
position: relative; position: relative;
width: 0; width: 0;
flex: 1 1 auto; flex: 1 1 auto;
background-color: var(--grey-2);
border-radius: var(--border-radius-m);
padding: 0 var(--spacing-m) calc(var(--spacing-m) - var(--spacing-xs))
calc(var(--spacing-m) / 2);
border: var(--border-transparent);
}
.tokens:hover {
cursor: pointer;
} }
.tokens::after { .tokens::after {
background: none repeat scroll 0 0 transparent; background: none repeat scroll 0 0 transparent;
@ -206,74 +173,72 @@
transition: width 0.3s ease 0s, left 0.3s ease 0s; transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0; width: 0;
} }
.tokens.showOptions::after { .tokens.optionsVisible {
border: var(--border-blue);
}
.tokens.empty {
padding: var(--spacing-m);
font-size: var(--font-size-xs);
user-select: none;
}
.tokens::after {
width: 100%; width: 100%;
left: 0; left: 0;
} }
.token { .token {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
align-items: center; align-items: center;
background-color: var(--grey-3); background-color: white;
border-radius: var(--border-radius-l); border-radius: var(--border-radius-l);
display: flex; display: flex;
margin: 0.25rem 0.5rem 0.25rem 0; margin: calc(var(--spacing-m) - var(--spacing-xs)) 0 0
calc(var(--spacing-m) / 2);
max-height: 1.3rem; max-height: 1.3rem;
padding: var(--spacing-s) var(--spacing-m); padding: var(--spacing-xs) var(--spacing-s);
transition: background-color 0.3s; transition: background-color 0.3s;
white-space: nowrap; white-space: nowrap;
} }
.token:hover { .token span {
background-color: var(--grey-4); pointer-events: none;
user-select: none;
} }
.readonly .token { .token-remove {
color: hsl(0, 0%, 40%);
}
.token-remove,
.remove-all {
align-items: center; align-items: center;
background-color: var(--grey-5); background-color: var(--grey-4);
border-radius: 50%; border-radius: 50%;
color: var(--white); color: var(--white);
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 1.25rem; height: 1rem;
margin-left: 0.25rem; width: 1rem;
min-width: 1.25rem; margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs))
var(--spacing-xs);
} }
.token-remove:hover, .token-remove:hover {
.remove-all:hover { background-color: var(--grey-5);
background-color: var(--grey-6);
cursor: pointer; cursor: pointer;
} }
.actions {
align-items: center;
display: flex;
flex: 1;
}
.actions > * {
flex: 0 0 auto;
}
.actions > input {
border: none;
font-size: var(--font-size-xs);
line-height: 1.5rem;
outline: none;
background-color: transparent;
flex: 1 1 auto;
}
.icon-clear path { .icon-clear path {
fill: white; fill: white;
} }
.options-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
.options { .options {
z-index: 2;
left: 0; left: 0;
list-style: none; list-style: none;
margin-block-end: 0; margin-block-end: 0;
margin-block-start: 0; margin-block-start: 0;
max-height: 70vh; overflow-y: auto;
overflow: auto;
padding-inline-start: 0; padding-inline-start: 0;
position: absolute; position: absolute;
top: calc(100% + 1px); top: calc(100% + 1px);
@ -283,8 +248,8 @@
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
margin-top: var(--spacing-xs); margin-top: var(--spacing-xs);
padding: var(--spacing-s) 0; padding: var(--spacing-s) 0;
z-index: 1;
background-color: white; background-color: white;
max-height: 200px;
} }
li { li {
background-color: white; background-color: white;