c7cb22f313
- ToolboxVignette: prop bullets[] remplace description, touch targets agrandis - Design arrondi: border-radius 16px cards, 20px pills, 12px inputs, no borders - Hover animations: translateY(-3px) + shadow, active states pour touch - SectionLayout: toolbox accordion mobile, pills scroll horizontal, responsive title/subtitle - app.vue: MoodSwitcher dans drawer mobile, header responsive, nav touch-friendly - Dashboard: grille 2-colonnes mobile, connect banner column layout, formula code scroll - Documents/decisions/mandates/protocols: cards responsive (padding, font-size, gap) - Login: touch targets 3rem min, iOS zoom prevention, responsive sizing - Modals: padding responsive sm:p-6 - Protocols: table compact mobile, proto items responsive - nuxt.config: host 0.0.0.0 pour fix IPv4/IPv6 binding Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
141 lines
2.9 KiB
Vue
141 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* ToolboxVignette — Carte compacte, bullet points, bouton Demarrer.
|
|
*/
|
|
|
|
export interface ToolboxAction {
|
|
label: string
|
|
icon?: string
|
|
to?: string
|
|
emit?: string
|
|
primary?: boolean
|
|
}
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
title: string
|
|
bullets?: string[]
|
|
actions?: ToolboxAction[]
|
|
}>(),
|
|
{
|
|
bullets: undefined,
|
|
actions: undefined,
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
action: [actionEmit: string]
|
|
}>()
|
|
|
|
const defaultActions: ToolboxAction[] = [
|
|
{ label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
|
|
{ label: 'Formules', icon: 'i-lucide-calculator', emit: 'formules' },
|
|
{ label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer', primary: true },
|
|
]
|
|
|
|
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>
|
|
<ul v-if="bullets && bullets.length > 0" class="vignette__bullets">
|
|
<li v-for="(b, i) in bullets" :key="i">{{ b }}</li>
|
|
</ul>
|
|
<div class="vignette__actions">
|
|
<button
|
|
v-for="action in resolvedActions"
|
|
:key="action.label"
|
|
class="vignette__btn"
|
|
:class="{ 'vignette__btn--primary': action.primary }"
|
|
@click="handleAction(action)"
|
|
>
|
|
<UIcon v-if="action.icon" :name="action.icon" />
|
|
<span>{{ action.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.vignette {
|
|
background: var(--mood-accent-soft);
|
|
border-radius: 12px;
|
|
padding: 0.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.vignette__title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 700;
|
|
color: var(--mood-text);
|
|
margin: 0;
|
|
}
|
|
|
|
.vignette__bullets {
|
|
margin: 0;
|
|
padding: 0 0 0 1rem;
|
|
font-size: 0.8125rem;
|
|
color: var(--mood-text-muted);
|
|
line-height: 1.5;
|
|
list-style-type: disc;
|
|
}
|
|
.vignette__bullets li::marker {
|
|
color: var(--mood-accent);
|
|
}
|
|
|
|
.vignette__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.vignette__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.5rem 0.875rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 700;
|
|
color: var(--mood-accent);
|
|
background: var(--mood-surface);
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
|
min-height: 2.25rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.vignette__btn {
|
|
padding: 0.375rem 0.75rem;
|
|
min-height: auto;
|
|
}
|
|
}
|
|
|
|
.vignette__btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px var(--mood-shadow);
|
|
}
|
|
|
|
.vignette__btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.vignette__btn--primary {
|
|
color: var(--mood-accent-text);
|
|
background: var(--mood-accent);
|
|
}
|
|
</style>
|