|
|
|
@ -9,13 +9,26 @@ |
|
|
|
$: leftover = roles.length - tags.length |
|
|
|
</script> |
|
|
|
|
|
|
|
<Tags> |
|
|
|
{#each tags as tag} |
|
|
|
<Tag disabled> |
|
|
|
{tag} |
|
|
|
</Tag> |
|
|
|
{/each} |
|
|
|
{#if leftover} |
|
|
|
<Tag>+{leftover} more</Tag> |
|
|
|
{/if} |
|
|
|
</Tags> |
|
|
|
<div class="tag-renderer"> |
|
|
|
<Tags> |
|
|
|
{#each tags as tag} |
|
|
|
<Tag> |
|
|
|
{tag} |
|
|
|
</Tag> |
|
|
|
{/each} |
|
|
|
{#if leftover} |
|
|
|
<Tag>+{leftover} more</Tag> |
|
|
|
{/if} |
|
|
|
</Tags> |
|
|
|
</div> |
|
|
|
|
|
|
|
<style> |
|
|
|
.tag-renderer :global(.spectrum-Tags-item:hover) { |
|
|
|
color: var(--spectrum-alias-label-text-color); |
|
|
|
border-color: var(--spectrum-alias-border-color-darker-default); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.tag-renderer :global(.spectrum-Tags-itemLabel) { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|