Johan LEROY
d6c110fc3b
Refonte front (packages/web) : coquille applicative partagée (sidebar desktop + barre d'onglets mobile + PageHeader, langue/push/logout centralisés) pilotée par route.meta.layout ; design system (BaseButton/BaseBadge/SegmentedControl/EmptyState/ SkeletonRow, anneau de focus, icônes @lucide/vue) ; tri/filtre/recherche/pagination côté client via useListControls (+ synchro URL) sur sessions/worktrees/groupes ; section « À traiter », palette de commandes ⌘K, toasts. Aucune modif serveur/protocole/DB.
36 lines
1.0 KiB
Vue
36 lines
1.0 KiB
Vue
<template>
|
|
<span class="badge" :class="toneClass">
|
|
<span v-if="dot" class="inline-block h-1.5 w-1.5 rounded-full" :class="dotClass" />
|
|
<slot />
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Pastille d'état : centralise les paires bg/text répétées (zinc/emerald/amber/sky/red).
|
|
import { computed } from 'vue';
|
|
|
|
type Tone = 'zinc' | 'emerald' | 'amber' | 'sky' | 'red';
|
|
|
|
const props = withDefaults(defineProps<{ tone?: Tone; dot?: boolean; pulse?: boolean }>(), {
|
|
tone: 'zinc',
|
|
});
|
|
|
|
const TONES: Record<Tone, string> = {
|
|
zinc: 'bg-zinc-800 text-zinc-400',
|
|
emerald: 'bg-emerald-950 text-emerald-400',
|
|
amber: 'bg-amber-950 text-amber-300',
|
|
sky: 'bg-sky-950 text-sky-300',
|
|
red: 'bg-red-950 text-red-400',
|
|
};
|
|
const DOTS: Record<Tone, string> = {
|
|
zinc: 'bg-zinc-500',
|
|
emerald: 'bg-emerald-400',
|
|
amber: 'bg-amber-300',
|
|
sky: 'bg-sky-300',
|
|
red: 'bg-red-400',
|
|
};
|
|
|
|
const toneClass = computed(() => TONES[props.tone]);
|
|
const dotClass = computed(() => [DOTS[props.tone], props.pulse ? 'animate-pulse' : '']);
|
|
</script>
|