Improve performance by removing keyed each blocks and fix reorder target styling

This commit is contained in:
Andrew Kingston 2023-03-02 13:39:47 +00:00
parent 9b5f2d92f0
commit 1067f06fd6
2 changed files with 4 additions and 4 deletions

View File

@ -93,7 +93,7 @@
right: 0; right: 0;
background: var(--spectrum-global-color-blue-400); background: var(--spectrum-global-color-blue-400);
width: 2px; width: 2px;
height: calc(var(--cell-height) + 1px); height: calc(var(--cell-height) + 2px);
} }
/* Label cells */ /* Label cells */

View File

@ -57,7 +57,7 @@
on:click={editable ? toggleOpen : null} on:click={editable ? toggleOpen : null}
> >
<div class="values"> <div class="values">
{#each values as val (val)} {#each values as val}
{@const color = getOptionColor(val)} {@const color = getOptionColor(val)}
{#if color} {#if color}
<div class="badge text" style="--color: {color}"> <div class="badge text" style="--color: {color}">
@ -77,7 +77,7 @@
{/if} {/if}
{#if open} {#if open}
<div class="options"> <div class="options">
{#each values as val (val)} {#each values as val}
{@const color = getOptionColor(val)} {@const color = getOptionColor(val)}
<div class="option" on:click={() => toggleOption(val)}> <div class="option" on:click={() => toggleOption(val)}>
<div class="badge text" style="--color: {color}"> <div class="badge text" style="--color: {color}">
@ -89,7 +89,7 @@
/> />
</div> </div>
{/each} {/each}
{#each unselectedOptions as option (option)} {#each unselectedOptions as option}
<div class="option" on:click={() => toggleOption(option)}> <div class="option" on:click={() => toggleOption(option)}>
<div class="badge text" style="--color: {getOptionColor(option)}"> <div class="badge text" style="--color: {getOptionColor(option)}">
{option} {option}