mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
## Summary Refactors StatusBadge to use CVA (class-variance-authority) for variant management and adds a new `dot` mode for label-free status indicators. ## Changes - **CVA variants** (`statusBadge.variants.ts`): Extracts styling logic into a CVA config with: - `severity`: `default` | `secondary` | `warn` | `danger` | `contrast` - `variant`: `label` (text badge) | `dot` (small indicator) | `circle` (numeric badge) - **StatusBadge.vue**: Simplified component using CVA; auto-selects `dot` variant when no label provided - **Storybook stories**: Comprehensive coverage of all severities and variants ## Breaking Changes - `label` prop is now optional (was required) - `label` accepts `string | number` (was `string` only) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8202-feat-StatusBadge-add-dot-mode-with-CVA-variants-2ef6d73d36508120beedd04b2c277227) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com>
28 lines
549 B
Vue
28 lines
549 B
Vue
<script setup lang="ts">
|
|
import { statusBadgeVariants } from './statusBadge.variants'
|
|
import type { StatusBadgeVariants } from './statusBadge.variants'
|
|
|
|
const {
|
|
label,
|
|
severity = 'default',
|
|
variant
|
|
} = defineProps<{
|
|
label?: string | number
|
|
severity?: StatusBadgeVariants['severity']
|
|
variant?: StatusBadgeVariants['variant']
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
:class="
|
|
statusBadgeVariants({
|
|
severity,
|
|
variant: variant ?? (label == null ? 'dot' : 'label')
|
|
})
|
|
"
|
|
>
|
|
{{ label }}
|
|
</span>
|
|
</template>
|