89 lines
1.9 KiB
Svelte
89 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import chroma from 'chroma-js';
|
|
|
|
export let label: string;
|
|
export let color: string;
|
|
console.log(color)
|
|
export let remove: Function | null = null;
|
|
let removed = false;
|
|
|
|
</script>
|
|
|
|
<div class:removed class="selected" style={`--item-color:${chroma(color).rgb().join(',')};`} class:removable={!!remove} {...$$restProps}>
|
|
<div class="label">{label}</div>
|
|
{#if !!remove}
|
|
<button
|
|
class="unselect"
|
|
on:click={() => {
|
|
removed = true;
|
|
remove && remove();
|
|
}}
|
|
on:keypress={() => {}}
|
|
>
|
|
<svg
|
|
height="14"
|
|
width="14"
|
|
viewBox="0 0 20 20"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
><path
|
|
d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
|
|
/></svg
|
|
>
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.unselect {
|
|
color: rgb(var(--item-color));
|
|
-moz-box-align: center;
|
|
align-items: center;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
svg {
|
|
fill: currentColor;
|
|
}
|
|
&:hover {
|
|
background-color: currentColor;
|
|
svg {
|
|
fill: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selected {
|
|
background-color: rgba(var(--item-color), 0.1);
|
|
border-radius: 2px;
|
|
display: flex;
|
|
margin: 2px;
|
|
min-width: 0px;
|
|
box-sizing: border-box;
|
|
transition: 0.5s;
|
|
//max-width: 100px;
|
|
}
|
|
|
|
.removed {
|
|
max-width: 0;
|
|
}
|
|
|
|
.label {
|
|
color: rgb(var(--item-color));
|
|
border-radius: 2px;
|
|
font-size: 85%;
|
|
overflow: hidden;
|
|
padding: 3px 3px 3px 6px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:not(.removable) > .label{
|
|
padding: 4px 6px;
|
|
}
|
|
</style>
|