mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
ef39549c37
* feat: custom coloured labels * chore: lint * feat: add ColorSelector component for improved color selection in labels and integrate it into CreateModal and Selector components * style: lint * fix: update ColorSelector and Selector components to use empty string instead of null for default color values for types
48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { LabelOut, LabelSummary } from "~~/lib/api/types/data-contracts";
|
|
import MdiArrowUp from "~icons/mdi/arrow-up";
|
|
import MdiTagOutline from "~icons/mdi/tag-outline";
|
|
import { getContrastTextColor } from "~/lib/utils";
|
|
|
|
export type sizes = "sm" | "md" | "lg" | "xl";
|
|
defineProps({
|
|
label: {
|
|
type: Object as () => LabelOut | LabelSummary,
|
|
required: true,
|
|
},
|
|
size: {
|
|
type: String as () => sizes,
|
|
default: "md",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink
|
|
class="group/label-chip flex gap-2 rounded-full shadow transition duration-300 hover:bg-accent/50"
|
|
:class="{
|
|
'p-4 py-1 text-base': size === 'lg',
|
|
'p-3 py-1 text-sm': size !== 'sm' && size !== 'lg',
|
|
'p-2 py-0.5 text-xs': size === 'sm',
|
|
}"
|
|
:style="
|
|
label.color
|
|
? { backgroundColor: label.color, color: getContrastTextColor(label.color) }
|
|
: { backgroundColor: 'hsl(var(--accent))' }
|
|
"
|
|
:to="`/label/${label.id}`"
|
|
>
|
|
<div class="relative">
|
|
<MdiTagOutline class="invisible" /><!-- hack to ensure the size is correct -->
|
|
|
|
<div
|
|
class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover/label-chip:rotate-90"
|
|
>
|
|
<MdiTagOutline class="group-hover/label-chip:hidden" />
|
|
<MdiArrowUp class="hidden group-hover/label-chip:block" />
|
|
</div>
|
|
</div>
|
|
{{ label.name.length > 20 ? `${label.name.substring(0, 20)}...` : label.name }}
|
|
</NuxtLink>
|
|
</template>
|