77dceb49c3
- Systeme de themes adaptatifs : Peps (light chaud), Zen (light calme), Chagrine (dark violet), Grave (dark ambre) avec CSS custom properties - Dashboard d'accueil orienté onboarding avec cartes-portes et teaser boite a outils - SectionLayout reutilisable : liste + sidebar toolbox + status pills cliquables (En prepa / En vote / En vigueur / Clos) - ToolboxVignette : vignettes Contexte / Tutos / Choisir / Demarrer - Seed : Acte engagement certification + forgeron, Runtime Upgrade (decision on-chain), 3 modalites de vote (majoritaire, quadratique, permanent) - Backend adapte SQLite (Uuid portable, 204 fix, pool conditionnel) - Correction noms composants (pathPrefix: false), pinia/nuxt ^0.11 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
133 lines
2.9 KiB
Vue
133 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* ToolboxVignette — Carte compacte pour la barre laterale "Boite a outils".
|
|
*
|
|
* Affiche un protocole ou outil avec titre, description, contexte et actions.
|
|
* Utilise les variables mood pour le theming.
|
|
*/
|
|
|
|
export interface ToolboxAction {
|
|
label: string
|
|
icon?: string
|
|
to?: string
|
|
emit?: string
|
|
}
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
title: string
|
|
description?: string
|
|
contextLabel?: string
|
|
actions?: ToolboxAction[]
|
|
}>(),
|
|
{
|
|
description: undefined,
|
|
contextLabel: undefined,
|
|
actions: undefined,
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
action: [actionEmit: string]
|
|
}>()
|
|
|
|
const defaultActions: ToolboxAction[] = [
|
|
{ label: 'Contexte', icon: 'i-lucide-info', emit: 'context' },
|
|
{ label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
|
|
{ label: 'Choisir', icon: 'i-lucide-check-circle', emit: 'choisir' },
|
|
{ label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer' },
|
|
]
|
|
|
|
const resolvedActions = computed(() => props.actions ?? defaultActions)
|
|
|
|
function handleAction(action: ToolboxAction) {
|
|
if (action.to) {
|
|
navigateTo(action.to)
|
|
}
|
|
else if (action.emit) {
|
|
emit('action', action.emit)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toolbox-vignette">
|
|
<h4 class="toolbox-vignette__title">
|
|
{{ title }}
|
|
</h4>
|
|
|
|
<p v-if="description" class="toolbox-vignette__description">
|
|
{{ description }}
|
|
</p>
|
|
|
|
<div v-if="contextLabel" class="toolbox-vignette__context">
|
|
<UIcon name="i-lucide-tag" class="text-xs" />
|
|
<span>Contexte : {{ contextLabel }}</span>
|
|
</div>
|
|
|
|
<div class="toolbox-vignette__actions">
|
|
<UButton
|
|
v-for="action in resolvedActions"
|
|
:key="action.label"
|
|
:icon="action.icon"
|
|
:label="action.label"
|
|
size="xs"
|
|
variant="soft"
|
|
class="toolbox-vignette__action-btn"
|
|
@click="handleAction(action)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.toolbox-vignette {
|
|
background: var(--mood-surface);
|
|
border: 1px solid var(--mood-border);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.toolbox-vignette:hover {
|
|
border-color: var(--mood-accent);
|
|
box-shadow: 0 1px 4px var(--mood-shadow);
|
|
}
|
|
|
|
.toolbox-vignette__title {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--mood-text);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.toolbox-vignette__description {
|
|
font-size: 0.75rem;
|
|
color: var(--mood-text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.toolbox-vignette__context {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.6875rem;
|
|
color: var(--mood-text-muted);
|
|
}
|
|
|
|
.toolbox-vignette__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.toolbox-vignette__action-btn {
|
|
--btn-bg: var(--mood-accent-soft);
|
|
--btn-color: var(--mood-accent);
|
|
}
|
|
</style>
|