61a414d214
- CSS: couleurs saturees sans pastels, border-radius 4-6px, inputs mood-aware - Header: allege (3.25rem), logo typographique, bouton connexion fin - Login: redesign complet avec steps dots et input natif style - Dashboard: entry cards epurees, tags toolbox compacts - Seed: 34 vraies clauses forgeron v2.0.0 (forum topic 33165) - Seed: 9 clauses certification (licence G1) - Seed: 11 votants simules + 3 sessions de vote (10 pour / 1 contre) - MoodSwitcher: dots colores au lieu d'icones Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
135 lines
2.8 KiB
Vue
135 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* ToolboxVignette — Carte compacte pour la boite a outils.
|
|
*/
|
|
|
|
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="vignette">
|
|
<h4 class="vignette__title">{{ title }}</h4>
|
|
<p v-if="description" class="vignette__desc">{{ description }}</p>
|
|
<div v-if="contextLabel" class="vignette__ctx">
|
|
<UIcon name="i-lucide-tag" class="text-xs" />
|
|
<span>{{ contextLabel }}</span>
|
|
</div>
|
|
<div class="vignette__actions">
|
|
<button
|
|
v-for="action in resolvedActions"
|
|
:key="action.label"
|
|
class="vignette__btn"
|
|
@click="handleAction(action)"
|
|
>
|
|
<UIcon v-if="action.icon" :name="action.icon" class="text-xs" />
|
|
<span>{{ action.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.vignette {
|
|
background: var(--mood-surface);
|
|
border: 1px solid var(--mood-border);
|
|
border-radius: 4px;
|
|
padding: 0.625rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
.vignette:hover {
|
|
border-color: var(--mood-accent);
|
|
}
|
|
|
|
.vignette__title {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--mood-text);
|
|
margin: 0;
|
|
}
|
|
|
|
.vignette__desc {
|
|
font-size: 0.6875rem;
|
|
color: var(--mood-text-muted);
|
|
line-height: 1.35;
|
|
margin: 0;
|
|
}
|
|
|
|
.vignette__ctx {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.625rem;
|
|
color: var(--mood-text-muted);
|
|
}
|
|
|
|
.vignette__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.vignette__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.1875rem 0.5rem;
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
color: var(--mood-accent);
|
|
background: var(--mood-accent-soft);
|
|
border: none;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: opacity 0.12s ease;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.vignette__btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|