Delete old multiselect component
This commit is contained in:
Andrew Kingston
parent
9faed3fb5f
commit
afbb90297b
|
|
@ -1,354 +0,0 @@
|
||||||
<script>
|
|
||||||
import { onMount, afterUpdate } from "svelte"
|
|
||||||
import { fly } from "svelte/transition"
|
|
||||||
import { Label } from "@budibase/bbui"
|
|
||||||
import buildStyle from "@budibase/bbui/src/utils/buildStyle"
|
|
||||||
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 label = undefined
|
|
||||||
export let secondary = false
|
|
||||||
export let outline = false
|
|
||||||
export let disabled = false
|
|
||||||
export let placeholder = undefined
|
|
||||||
|
|
||||||
let options = []
|
|
||||||
let optionsVisible = false
|
|
||||||
let selected = {}
|
|
||||||
let first = true
|
|
||||||
let slot
|
|
||||||
let anchor
|
|
||||||
let dimensions = { top: 0, left: 0, minWidth: 0, maxHeight: 0 }
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
const domOptions = Array.from(slot.querySelectorAll("option"))
|
|
||||||
options = domOptions.map(option => ({
|
|
||||||
value: option.value,
|
|
||||||
name: option.textContent,
|
|
||||||
}))
|
|
||||||
if (value) {
|
|
||||||
options.forEach(option => {
|
|
||||||
if (value.includes(option.value)) {
|
|
||||||
selected[option.value] = option
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
first = false
|
|
||||||
})
|
|
||||||
|
|
||||||
// Update dimensions after each dom update
|
|
||||||
afterUpdate(() => {
|
|
||||||
if (anchor) {
|
|
||||||
updateDimensions()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Keep value up to date with selected options
|
|
||||||
$: {
|
|
||||||
if (!first) {
|
|
||||||
value = Object.values(selected).map(option => option.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Build CSS styles for options dropdown
|
|
||||||
$: menuStyle = buildStyle({
|
|
||||||
"max-height": `${dimensions.maxHeight.toFixed(0)}px`,
|
|
||||||
"min-width": `${dimensions.minWidth.toFixed(0)}px`,
|
|
||||||
top: `${dimensions.top}px`,
|
|
||||||
left: `${dimensions.left}px`,
|
|
||||||
})
|
|
||||||
|
|
||||||
function updateDimensions() {
|
|
||||||
const { bottom, left, width } = anchor.getBoundingClientRect()
|
|
||||||
dimensions = {
|
|
||||||
top: bottom,
|
|
||||||
left,
|
|
||||||
minWidth: width - 4,
|
|
||||||
maxHeight: window.innerHeight - bottom - 30,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function add(token) {
|
|
||||||
selected[token.value] = token
|
|
||||||
}
|
|
||||||
|
|
||||||
function remove(value) {
|
|
||||||
const { [value]: val, ...rest } = selected
|
|
||||||
selected = rest
|
|
||||||
}
|
|
||||||
|
|
||||||
function showOptions(show) {
|
|
||||||
optionsVisible = show
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClick() {
|
|
||||||
showOptions(!optionsVisible)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleOptionMousedown(e) {
|
|
||||||
const value = e.target.dataset.value
|
|
||||||
if (value == null) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (selected[value]) {
|
|
||||||
remove(value)
|
|
||||||
} else {
|
|
||||||
add(options.filter(option => option.value === value)[0])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{#if label}
|
|
||||||
<Label extraSmall grey>{label}</Label>
|
|
||||||
{/if}
|
|
||||||
<div class="multiselect">
|
|
||||||
<div class="tokens-wrapper">
|
|
||||||
<div
|
|
||||||
bind:this={anchor}
|
|
||||||
class="tokens"
|
|
||||||
class:outline
|
|
||||||
class:disabled
|
|
||||||
class:secondary
|
|
||||||
class:optionsVisible
|
|
||||||
on:click|self={handleClick}
|
|
||||||
class:empty={!value || !value.length}>
|
|
||||||
{#each Object.values(selected) as option}
|
|
||||||
<div
|
|
||||||
class="token"
|
|
||||||
class:secondary
|
|
||||||
data-id={option.value}
|
|
||||||
on:click|self={handleClick}>
|
|
||||||
<span>{option.name}</span>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{#if !value || !value.length}
|
|
||||||
{#if placeholder && placeholder.length}
|
|
||||||
<div class:disabled class="placeholder">{placeholder}</div>
|
|
||||||
{:else}
|
|
||||||
<div class="placeholder"> </div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<select bind:this={slot} type="multiple" class="hidden">
|
|
||||||
<slot />
|
|
||||||
</select>
|
|
||||||
|
|
||||||
{#if optionsVisible}
|
|
||||||
<div class="options-overlay" on:mousedown|self={() => showOptions(false)}>
|
|
||||||
<ul
|
|
||||||
class="options"
|
|
||||||
style={menuStyle}
|
|
||||||
transition:fly={{ duration: 200, y: 5 }}
|
|
||||||
on:mousedown|preventDefault={handleOptionMousedown}>
|
|
||||||
{#each options as option}
|
|
||||||
<li
|
|
||||||
class:selected={selected[option.value]}
|
|
||||||
data-value={option.value}>
|
|
||||||
{option.name}
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
{#if !options.length}
|
|
||||||
<li class="no-results">No results</li>
|
|
||||||
{/if}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.multiselect {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
}
|
|
||||||
.multiselect: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;
|
|
||||||
background-color: white;
|
|
||||||
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.disabled {
|
|
||||||
background-color: var(--grey-4);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.tokens.outline {
|
|
||||||
border: var(--border-dark);
|
|
||||||
}
|
|
||||||
.tokens.secondary {
|
|
||||||
background-color: var(--grey-2);
|
|
||||||
}
|
|
||||||
.tokens:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tokens::after {
|
|
||||||
background: none repeat scroll 0 0 transparent;
|
|
||||||
bottom: -1px;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 2px;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
transition: width 0.3s ease 0s, left 0.3s ease 0s;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
.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%;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token {
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
background-color: var(--grey-2);
|
|
||||||
border-radius: var(--border-radius-l);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
margin: calc(var(--spacing-m) - var(--spacing-xs)) 0 0
|
|
||||||
calc(var(--spacing-m) / 2);
|
|
||||||
max-height: 1.3rem;
|
|
||||||
padding: var(--spacing-xs) var(--spacing-s);
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.token.secondary {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.token span {
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.token .token-remove {
|
|
||||||
align-items: center;
|
|
||||||
background-color: var(--grey-4);
|
|
||||||
border-radius: 50%;
|
|
||||||
color: var(--white);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
height: 1rem;
|
|
||||||
width: 1rem;
|
|
||||||
margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs))
|
|
||||||
var(--spacing-xs);
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
.token .token-remove:hover {
|
|
||||||
background-color: var(--grey-5);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.placeholder.disabled {
|
|
||||||
color: var(--grey-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-clear path {
|
|
||||||
fill: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options {
|
|
||||||
left: 0;
|
|
||||||
list-style: none;
|
|
||||||
margin-block-end: 0;
|
|
||||||
margin-block-start: 0;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-inline-start: 0;
|
|
||||||
position: absolute;
|
|
||||||
border: var(--border-dark);
|
|
||||||
border-radius: var(--border-radius-m);
|
|
||||||
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
margin: var(--spacing-xs) 0;
|
|
||||||
padding: var(--spacing-s) 0;
|
|
||||||
background-color: white;
|
|
||||||
max-height: 200px;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
background-color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: var(--spacing-s) var(--spacing-m);
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
}
|
|
||||||
li.selected {
|
|
||||||
background-color: var(--blue);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
li:not(.selected):hover {
|
|
||||||
background-color: var(--grey-1);
|
|
||||||
}
|
|
||||||
li.no-results:hover {
|
|
||||||
background-color: white;
|
|
||||||
cursor: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue