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

Update multiselect component

pull/678/head
Andrew Kingston 6 years ago
parent
f86e7b6c92
commit
d4ebd3bb63
1 changed files with 113 additions and 143 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. 256
      packages/builder/src/components/common/MultiSelect.svelte

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

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

Write Preview
Loading…
Cancel
Save