45 lines
1.2 KiB
Svelte
45 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { URL_ENTRIES } from "$lib/shared/constants";
|
|
import type { Category } from "$lib/shared/model";
|
|
import { gotoEntityQuery } from "$lib/shared/util";
|
|
import { getTextColor, colorToHex, hexToColor } from "$lib/shared/util/colors";
|
|
|
|
export let category: Category;
|
|
export let baseUrl = URL_ENTRIES;
|
|
export let href: string | undefined = undefined;
|
|
export let nolink = false;
|
|
|
|
$: textColor = category.color
|
|
? colorToHex(getTextColor(hexToColor(category.color)))
|
|
: null;
|
|
|
|
function onClick(e: MouseEvent): void {
|
|
gotoEntityQuery(
|
|
{
|
|
filter: {
|
|
category: [{ id: category.id, name: category.name }],
|
|
},
|
|
},
|
|
baseUrl,
|
|
);
|
|
e.stopPropagation();
|
|
}
|
|
</script>
|
|
|
|
{#if href || nolink}
|
|
<a
|
|
style:color={category.color ? textColor : undefined}
|
|
style:background-color={category.color}
|
|
class="badge ellipsis"
|
|
class:badge-neutral={!category.color}
|
|
{href}>{category.name}</a
|
|
>
|
|
{:else}
|
|
<button
|
|
style:color={category.color ? textColor : undefined}
|
|
style:background-color={category.color}
|
|
class="badge ellipsis"
|
|
class:badge-neutral={!category.color}
|
|
on:click={onClick}>{category.name}</button
|
|
>
|
|
{/if}
|