68 lines
1.7 KiB
Svelte
68 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import Svelecte, { addFormatter } from 'svelecte';
|
|
import { writable, type Writable } from 'svelte/store';
|
|
import Item from './Item.svelte';
|
|
import { getColorCode } from "../../utils/utils.js";
|
|
export let options: { label: string; id_code: string; color: string }[];
|
|
export let disabled: { label: string; id_code: string; color: string }[] = [];
|
|
export let selected: { label: string; id_code: string; color: string }[] =[];
|
|
|
|
const COLORS = ["#ff00ff", '']
|
|
//$: options = options.filter(o=>!selected.map(s=>s.id_code).includes(o.id_code))
|
|
</script>
|
|
|
|
<Svelecte
|
|
options={options.map((o) => {
|
|
if (disabled.map((s) => s.id_code).includes(o.id_code)) {
|
|
return { ...o, $disabled: true };
|
|
}
|
|
return {...o};
|
|
}).sort(o=> o.$disabled == true ? 1:0)}
|
|
controlItem={Item}
|
|
dropdownItem={Item}
|
|
valueField={'id_code'}
|
|
createTransform={(inputValue, creatablePrefix, valueField, labelField) => {
|
|
return {
|
|
label: inputValue,
|
|
id_code: Math.random().toString(36).substring(2, 9),
|
|
color: getColorCode(inputValue),
|
|
created: true
|
|
};
|
|
}}
|
|
on:change={
|
|
(s)=>{
|
|
|
|
selected = s.detail
|
|
}
|
|
}
|
|
on:createoption={(opt) => {
|
|
|
|
|
|
selected.push({ ...opt.detail });
|
|
}}
|
|
|
|
multiple
|
|
{...$$restProps}
|
|
/>
|
|
|
|
<style lang="scss">
|
|
@import "../../variables";
|
|
:global(.sv-dropdown-scroll) {
|
|
padding: 0 !important;
|
|
}
|
|
:global(.svelecte-control) {
|
|
--sv-bg: $background!important;
|
|
--sv-border-color: green !important;
|
|
--sv-item-active-bg: $background!important;
|
|
--sv-border: none!important;
|
|
--sv-active-border:(1px solid $contrast)!important;
|
|
}
|
|
:global(.creatable-row-wrap), :global(.sv-dropdown-scroll){
|
|
background-color: $background!important ;
|
|
|
|
}
|
|
:global(.creatable-row){
|
|
padding: 7px 3px!important;
|
|
}
|
|
</style>
|