devops
b093b0c4b5
My rsync --delete based deploy sync overwrote the working tree with a stale local copy and accidentally reverted commit50d95fa(V2 Design-Fundament, task ea7c2063) — new ui/ components deleted, token/color work in dashboard/v2 and nexus-tokens.css rolled back. This restores all 17 files exactly from 50d95fa; no overlap with the modal rework files (TaskBoardView, tasks store, BoardCard), which stay as committed in2ee1fe9. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
135 lines
3.4 KiB
Vue
135 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* Badge — Nexus V2 Status- und Label-Badge
|
|
*
|
|
* Erweitert: zusätzliche nexus-token-basierte Varianten für
|
|
* Agenten-Rollen, Status-Pills und Prioritäten.
|
|
* Original shadcn-Varianten bleiben erhalten.
|
|
*/
|
|
import type { HTMLAttributes } from 'vue'
|
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const badgeVariants = cva(
|
|
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
// Original shadcn
|
|
default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
|
|
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
|
destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
|
|
outline: 'text-foreground',
|
|
|
|
// Nexus V2 — Token-basierte Varianten (Farben aus nexus-tokens.css)
|
|
work: 'nexus-badge-work',
|
|
think: 'nexus-badge-think',
|
|
blocked: 'nexus-badge-blocked',
|
|
queue: 'nexus-badge-queue',
|
|
done: 'nexus-badge-done',
|
|
review: 'nexus-badge-review',
|
|
iris: 'nexus-badge-iris',
|
|
bao: 'nexus-badge-bao',
|
|
agent: 'nexus-badge-agent',
|
|
priorityHigh: 'nexus-badge-prio-high',
|
|
priorityMed: 'nexus-badge-prio-med',
|
|
priorityLow: 'nexus-badge-prio-low',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
},
|
|
},
|
|
)
|
|
|
|
interface Props {
|
|
variant?: NonNullable<VariantProps<typeof badgeVariants>['variant']>
|
|
class?: HTMLAttributes['class']
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'default',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<span :class="cn(badgeVariants({ variant }), props.class)">
|
|
<slot />
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Nexus V2 Token-basierte Badge-Varianten */
|
|
.nexus-badge-work {
|
|
border-color: rgba(61, 220, 151, .25);
|
|
background: rgba(34, 197, 94, .12);
|
|
color: var(--st-work);
|
|
}
|
|
|
|
.nexus-badge-think {
|
|
border-color: rgba(52, 214, 245, .25);
|
|
background: rgba(52, 214, 245, .1);
|
|
color: var(--st-think);
|
|
}
|
|
|
|
.nexus-badge-blocked {
|
|
border-color: rgba(251, 113, 133, .25);
|
|
background: rgba(244, 63, 94, .12);
|
|
color: var(--st-block);
|
|
}
|
|
|
|
.nexus-badge-queue {
|
|
border-color: rgba(251, 191, 36, .25);
|
|
background: rgba(251, 191, 36, .12);
|
|
color: var(--st-queue);
|
|
}
|
|
|
|
.nexus-badge-done {
|
|
border-color: rgba(34, 197, 94, .25);
|
|
background: rgba(34, 197, 94, .12);
|
|
color: var(--st-work);
|
|
}
|
|
|
|
.nexus-badge-review {
|
|
border-color: rgba(249, 115, 22, .25);
|
|
background: rgba(249, 115, 22, .12);
|
|
color: var(--clr-review);
|
|
}
|
|
|
|
.nexus-badge-iris {
|
|
border-color: rgba(147, 51, 234, .25);
|
|
background: rgba(147, 51, 234, .12);
|
|
color: var(--clr-iris);
|
|
}
|
|
|
|
.nexus-badge-bao {
|
|
border-color: rgba(59, 130, 246, .25);
|
|
background: rgba(59, 130, 246, .12);
|
|
color: var(--clr-bao);
|
|
}
|
|
|
|
.nexus-badge-agent {
|
|
border-color: rgba(16, 185, 129, .2);
|
|
background: rgba(16, 185, 129, .12);
|
|
color: var(--clr-agent);
|
|
}
|
|
|
|
.nexus-badge-prio-high {
|
|
border-color: var(--st-block);
|
|
background: transparent;
|
|
color: var(--st-block);
|
|
}
|
|
|
|
.nexus-badge-prio-med {
|
|
border-color: var(--st-queue);
|
|
background: transparent;
|
|
color: var(--st-queue);
|
|
}
|
|
|
|
.nexus-badge-prio-low {
|
|
border-color: var(--a-blue);
|
|
background: transparent;
|
|
color: var(--a-blue);
|
|
}
|
|
</style>
|