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

Update multiselect component

This commit is contained in:
Andrew Kingston 2020-10-02 08:36:16 +01:00
parent f86e7b6c92
commit d4ebd3bb63
1 changed files with 117 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,22 +2,22 @@
import { onMount } from "svelte" import { onMount } from "svelte"
import { fly } from "svelte/transition" import { fly } from "svelte/transition"
import { Label } from "@budibase/bbui" import { Label } from "@budibase/bbui"
const xPath =
"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 readonly = false
export let placeholder = ""
export let label export let label
let input, let placeholder = "Type to search"
inputValue, let input
options = [], let inputValue
activeOption, let options = []
showOptions = false, let activeOption
selected = {}, let optionsVisible = false
first = true, let selected = {}
slot let first = true
const iconClearPath = let slot
"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"
onMount(() => { onMount(() => {
slot.querySelectorAll("option").forEach(o => { slot.querySelectorAll("option").forEach(o => {
@ -31,7 +31,6 @@
{} {}
)) ))
first = false first = false
console.log(options)
}) })
$: if (!first) value = Object.values(selected).map(o => o.value) $: if (!first) value = Object.values(selected).map(o => o.value)
@ -55,53 +54,26 @@
} }
} }
function optionsVisibility(show) { function removeAll() {
if (readonly) return
if (typeof show === "boolean") {
showOptions = show
show && input.focus()
} else {
showOptions = !showOptions
}
if (!showOptions) {
activeOption = undefined
}
}
function handleKeyup(e) {
if (e.keyCode === 13) {
Object.keys(selected).includes(activeOption.value)
? remove(activeOption.value)
: add(activeOption)
inputValue = ""
}
if ([38, 40].includes(e.keyCode)) {
// up and down arrows
const increment = e.keyCode === 38 ? -1 : 1
const calcIndex = filtered.indexOf(activeOption) + increment
activeOption =
calcIndex < 0
? filtered[filtered.length - 1]
: calcIndex === filtered.length
? filtered[0]
: filtered[calcIndex]
}
}
function handleBlur(e) {
optionsVisibility(false)
}
function handleTokenClick(e) {
if (e.target.closest(".token-remove")) {
e.stopPropagation()
remove(e.target.closest(".token").dataset.id)
} else if (e.target.closest(".remove-all")) {
selected = [] selected = []
inputValue = "" inputValue = ""
} else {
optionsVisibility(true)
} }
function showOptions(show) {
optionsVisible = show
if (!show) {
activeOption = undefined
} else {
input.focus()
}
}
function handleBlur() {
showOptions(false)
}
function handleFocus() {
showOptions(true)
} }
function handleOptionMousedown(e) { function handleOptionMousedown(e) {
@ -109,7 +81,7 @@
if (selected[value]) { if (selected[value]) {
remove(value) remove(value)
} else { } else {
add(options.filter(o => o.value === value)[0]) add(options.filter(option => option.value === value)[0])
input.focus() input.focus()
} }
} }
@ -120,63 +92,61 @@
<Label extraSmall grey>{label}</Label> <Label extraSmall grey>{label}</Label>
{/if} {/if}
<div class="multiselect" class:readonly> <div class="multiselect" class:readonly>
<div class="tokens" class:showOptions on:click={handleTokenClick}> <div class="tokens-wrapper">
{#each Object.values(selected) as s} <div class="tokens" class:showOptions>
<div class="token" data-id={s.value}> {#each Object.values(selected) as option}
<span>{s.name}</span> <div class="token" data-id={option.value}>
<span>{option.name}</span>
{#if !readonly} {#if !readonly}
<div class="token-remove" title="Remove {s.name}"> <div
class="token-remove"
title="Remove {option.name}"
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={iconClearPath} /> <path d={xPath} />
</svg> </svg>
</div> </div>
{/if} {/if}
</div> </div>
{/each} {/each}
</div>
</div>
<div class="actions"> <div class="actions">
{#if !readonly} {#if !readonly}
<input <input
autocomplete="off" autocomplete="off"
bind:value={inputValue} bind:value={inputValue}
bind:this={input} bind:this={input}
on:keyup={handleKeyup}
on:blur={handleBlur} on:blur={handleBlur}
on:focus={handleFocus}
{placeholder} /> {placeholder} />
<div <div
class="remove-all" class="remove-all"
title="Remove All" title="Remove All"
class:hidden={!Object.keys(selected).length}> class:hidden={!Object.keys(selected).length}
on:click={removeAll}>
<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={iconClearPath} /> <path d={xPath} />
</svg> </svg>
</div> </div>
<svg
class="dropdown-arrow"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18">
<path d="M5 8l4 4 4-4z" />
</svg>
{/if} {/if}
</div> </div>
</div>
<select bind:this={slot} type="multiple" class="hidden"> <select bind:this={slot} type="multiple" class="hidden">
<slot /> <slot />
</select> </select>
{#if showOptions} {#if optionsVisible}
<ul <ul
class="options" class="options"
transition:fly={{ duration: 200, y: 5 }} transition:fly={{ duration: 200, y: 5 }}
@ -189,6 +159,9 @@
{option.name} {option.name}
</li> </li>
{/each} {/each}
{#if !filtered.length && inputValue.length}
<li>No results</li>
{/if}
</ul> </ul>
{/if} {/if}
</div> </div>
@ -196,19 +169,31 @@
<style> <style>
.multiselect { .multiselect {
background-color: white;
border-bottom: 1px solid hsl(0, 0%, 70%);
position: relative; position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
} }
.multiselect:not(.readonly):hover { .multiselect:not(.readonly):hover {
border-bottom-color: hsl(0, 0%, 50%); border-bottom-color: hsl(0, 0%, 50%);
} }
.tokens-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex: 0 1 auto;
}
.tokens { .tokens {
align-items: center; align-items: center;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
width: 0;
flex: 1 1 auto;
} }
.tokens::after { .tokens::after {
background: none repeat scroll 0 0 transparent; background: none repeat scroll 0 0 transparent;
@ -218,7 +203,6 @@
height: 2px; height: 2px;
left: 50%; left: 50%;
position: absolute; position: absolute;
background: hsl(45, 100%, 51%);
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;
} }
@ -227,18 +211,19 @@
left: 0; left: 0;
} }
.token { .token {
font-size: var(--font-size-xs);
align-items: center; align-items: center;
background-color: hsl(214, 17%, 92%); background-color: var(--grey-3);
border-radius: 1.25rem; border-radius: var(--border-radius-l);
display: flex; display: flex;
margin: 0.25rem 0.5rem 0.25rem 0; margin: 0.25rem 0.5rem 0.25rem 0;
max-height: 1.3rem; max-height: 1.3rem;
padding: 0.25rem 0.5rem 0.25rem 0.5rem; padding: var(--spacing-s) var(--spacing-m);
transition: background-color 0.3s; transition: background-color 0.3s;
white-space: nowrap; white-space: nowrap;
} }
.token:hover { .token:hover {
background-color: hsl(214, 15%, 88%); background-color: var(--grey-4);
} }
.readonly .token { .readonly .token {
color: hsl(0, 0%, 40%); color: hsl(0, 0%, 40%);
@ -246,9 +231,9 @@
.token-remove, .token-remove,
.remove-all { .remove-all {
align-items: center; align-items: center;
background-color: hsl(214, 15%, 55%); background-color: var(--grey-5);
border-radius: 50%; border-radius: 50%;
color: hsl(214, 17%, 92%); color: var(--white);
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 1.25rem; height: 1.25rem;
@ -257,7 +242,7 @@
} }
.token-remove:hover, .token-remove:hover,
.remove-all:hover { .remove-all:hover {
background-color: hsl(215, 21%, 43%); background-color: var(--grey-6);
cursor: pointer; cursor: pointer;
} }
@ -265,24 +250,17 @@
align-items: center; align-items: center;
display: flex; display: flex;
flex: 1; flex: 1;
min-width: 15rem;
} }
.actions > * {
input { flex: 0 0 auto;
}
.actions > input {
border: none; border: none;
font-size: 1.5rem; font-size: var(--font-size-xs);
line-height: 1.5rem; line-height: 1.5rem;
margin: 0;
outline: none; outline: none;
padding: 0; background-color: transparent;
width: 100%; flex: 1 1 auto;
}
.dropdown-arrow path {
fill: hsl(0, 0%, 70%);
}
.multiselect:hover .dropdown-arrow path {
fill: hsl(0, 0%, 50%);
} }
.icon-clear path { .icon-clear path {
@ -290,7 +268,6 @@
} }
.options { .options {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px -2px 4px rgba(0, 0, 0, 0.1);
left: 0; left: 0;
list-style: none; list-style: none;
margin-block-end: 0; margin-block-end: 0;
@ -300,34 +277,27 @@
padding-inline-start: 0; padding-inline-start: 0;
position: absolute; position: absolute;
top: calc(100% + 1px); top: calc(100% + 1px);
width: 100%; width: calc(100% - 4px);
border: var(--border-dark);
border-radius: var(--border-radius-m);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
margin-top: var(--spacing-xs);
padding: var(--spacing-s) 0;
z-index: 1;
background-color: white;
} }
li { li {
background-color: white; background-color: white;
cursor: pointer; cursor: pointer;
padding: 0.5rem; padding: var(--spacing-s) var(--spacing-m);
} font-size: var(--font-size-xs);
li:last-child {
border-bottom-left-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
li:not(.selected):hover {
background-color: hsl(214, 17%, 92%);
} }
li.selected { li.selected {
background-color: hsl(232, 54%, 41%); background-color: var(--blue);
color: white; color: white;
} }
li.selected:nth-child(even) { li:not(.selected):hover {
background-color: hsl(232, 50%, 45%); background-color: var(--grey-1);
color: white;
}
li.active {
background-color: hsl(214, 17%, 88%);
}
li.selected.active,
li.selected:hover {
background-color: hsl(232, 48%, 50%);
} }
.hidden { .hidden {