Tooloop/Caramel-CRM-Backup
Archived
2
0
Fork 0
Code Issues 40 Pull Requests Projects 3 Releases Wiki Activity

Overall design work

Browse Source
This commit is contained in:
Daniel Stock
2025-11-11 11:49:38 +01:00
parent ec482cea6c
commit b81c6d71f4
12 changed files with 101 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/ui/status-badge/index.ts
+14 -9
View File
@@ -4,22 +4,22 @@ import { cva } from "class-variance-authority"
export { default as StatusBadge } from "./StatusBadge.vue"
export const statusBadgeVariants = cva(
"shadow inline-flex items-center justify-center aspect-1/1 p-1 lg:aspect-auto lg:px-2 lg:py-0.5 rounded-full lg:rounded-md border text-xs font-medium lg:w-full whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
"inline-flex items-center justify-center bg-gray-50 dark:bg-neutral-700 border-1 aspect-1/1 p-1 lg:aspect-auto lg:px-2 lg:py-0.5 rounded-full lg:rounded-sm text-xs lg:w-full whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{
variants: {
variant: {
draft:
"text-foreground bg-slate-100 dark:bg-zinc-500 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
"border-dashed text-muted-foreground dark:bg-transparent",
issued:
"border-transparent bg-sky-400 dark:bg-sky-700 [a&]:hover:bg-primary/90",
"bg-transparent border-sky-200 text-sky-600 dark:bg-sky-800 dark:text-sky-300 dark:border-0",
paid:
"border-transparent bg-lime-500 dark:bg-lime-700 text-lime-950 dark:text-lime-200 [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"border-none bg-lime-400 dark:bg-lime-900 dark:text-lime-400",
due:
"border-transparent bg-amber-300 text-amber-900 [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"font-bold border-none bg-amber-300 text-amber-800 dark:bg-amber-900 dark:text-amber-500",
reminded:
"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"font-bold border-none bg-red-500 text-red-100 dark:bg-red-900 dark:text-red-200 dark:font-normal",
cancelled:
"text-foreground bg-slate-400 dark:bg-zinc-700 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
"bg-background text-foreground",
},
size: {
@@ -45,7 +45,12 @@ export const statusBadgeLabels: { [key: string]: string } = {
cancelled: 'Storniert'
}
export function statusBadgeTextColor(status: string): string {
export function statusTextStyle(status: string): string {
if (status === 'draft') return 'text-muted-foreground'
if (status === 'due') return 'text-amber-600'
if (status === 'reminded') return 'text-red-600 dark:text-red-400'
if (status === 'cancelled') return 'line-through text-muted-foreground decoration-gray-300'
return (['due', 'reminded'].includes(status)) ?
'var(--color-destructive)' :
''
@@ -61,5 +66,5 @@ export const castToStatusVariant = (status: string): StatusBadgeVariants['varian
'cancelled': 'cancelled',
};
return statusMapping[status] || 'draft'; // 'draft' als Standardwert
return statusMapping[status] || 'draft';
};