135 lines
3.1 KiB
Svelte
135 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { itemActions, highlightSearch, CloseButton } from 'svelecte/item';
|
|
import chroma from 'chroma-js';
|
|
// these properties can be used
|
|
//export let inputValue;
|
|
export let index = -1;
|
|
export let item: { label: string; id_code: string; color: string };
|
|
export let isSelected = false;
|
|
export let isDisabled = false;
|
|
//export let isMultiple = false;
|
|
|
|
const color = chroma("rgb(255,0,0)");
|
|
|
|
</script>
|
|
|
|
<!-- you need to use itemActions and pass given events -->
|
|
<div
|
|
class="sv-item"
|
|
use:itemActions={{ item, index }}
|
|
class:is-selected={isSelected}
|
|
on:select
|
|
on:deselect
|
|
on:hover
|
|
>
|
|
<div
|
|
class={`sv-item-content`}
|
|
style={`--item-color:${chroma(item.color).rgb().join(',')};`}
|
|
class:disabled={isDisabled}
|
|
>
|
|
{#if !isSelected}
|
|
{item.label}
|
|
{:else}
|
|
<div class="selected">
|
|
<div class="label">{item.label}</div>
|
|
<div class="unselect" data-action="deselect">
|
|
<svg
|
|
height="14"
|
|
width="14"
|
|
viewBox="0 0 20 20"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
class="css-8mmkcg"
|
|
><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
|
|
>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import '../../variables';
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
/** some style override */
|
|
.sv-item {
|
|
background-color: $background!important;
|
|
padding: 0;
|
|
}
|
|
.sv-item-content {
|
|
color: rgb(var(--item-color));
|
|
}
|
|
:global(.sv-dropdown-content) .sv-item-content {
|
|
padding: 13px;
|
|
}
|
|
:global(.sv-dropdown-content) .sv-item {
|
|
padding: 0;
|
|
}
|
|
:global(.sv-dd-item-active) .sv-item-content:not(.disabled) {
|
|
background-color: rgba(var(--item-color), 0.1);
|
|
color: rgb(var(--item-color)) !important;
|
|
}
|
|
:global(.sv-dd-item-active) .sv-dd-item{
|
|
background-color: var(--sv-bg);
|
|
}
|
|
|
|
:global(.sv-content) .sv-item-content {
|
|
padding: 0 !important;
|
|
background-color: transparent;
|
|
}
|
|
:global(.sv-content) .sv-item {
|
|
background-color: transparent;
|
|
}
|
|
.disabled,
|
|
:global(.sv-dd-item-active) .sv-item-content.disabled {
|
|
cursor: not-allowed;
|
|
color: grey;
|
|
background-color: var(--sv-bg);
|
|
}
|
|
|
|
:global(.creatable-row-wrap){
|
|
background-color: red;
|
|
}
|
|
</style>
|