Toolbox 30rem sticky + accordéons collapsibles + renommage libreDecision
- Boîte à outils élargie à 30rem (×1.75) — flottante sticky, zéro scroll visible - ToolboxSection : nouveau composant accordéon générique (chevron, défaut fermé) - ToolboxVignette : titre cliquable, bullets/actions cachés par défaut - 4 pages : ContextMapper/SocioElection/WorkflowMilestones/inertie → ToolboxSection - Suppression doublon SectionLayout (common/) — conflit de nommage résolu - Renommage complet Glibredecision → libreDecision dans configs/docker/CI - README.md + CONTRIBUTING.md ajoutés Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -1,318 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* SectionLayout — Mise en page pour sections.
|
||||
*
|
||||
* Status pills inside the content block (not header).
|
||||
* Toolbox sidebar with condensed content.
|
||||
*/
|
||||
|
||||
export interface StatusFilter {
|
||||
id: string
|
||||
label: string
|
||||
count: number
|
||||
cssClass?: string
|
||||
}
|
||||
|
||||
export interface ToolboxItem {
|
||||
title: string
|
||||
description: string
|
||||
actions: Array<{
|
||||
label: string
|
||||
to?: string
|
||||
onClick?: () => void
|
||||
}>
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
title: string
|
||||
subtitle?: string
|
||||
statuses: StatusFilter[]
|
||||
toolboxItems?: ToolboxItem[]
|
||||
activeStatus?: string | null
|
||||
}>(),
|
||||
{
|
||||
subtitle: undefined,
|
||||
toolboxItems: undefined,
|
||||
activeStatus: null,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:activeStatus': [status: string | null]
|
||||
}>()
|
||||
|
||||
const toolboxOpen = ref(false)
|
||||
|
||||
const statusCssMap: Record<string, string> = {
|
||||
draft: 'status-prepa',
|
||||
qualification: 'status-prepa',
|
||||
candidacy: 'status-prepa',
|
||||
voting: 'status-vote',
|
||||
review: 'status-vote',
|
||||
active: 'status-vigueur',
|
||||
executed: 'status-vigueur',
|
||||
completed: 'status-vigueur',
|
||||
closed: 'status-clos',
|
||||
archived: 'status-clos',
|
||||
revoked: 'status-clos',
|
||||
reporting: 'status-vote',
|
||||
}
|
||||
|
||||
function getStatusClass(status: StatusFilter): string {
|
||||
return status.cssClass || statusCssMap[status.id] || 'status-prepa'
|
||||
}
|
||||
|
||||
function toggleStatus(statusId: string) {
|
||||
if (props.activeStatus === statusId) {
|
||||
emit('update:activeStatus', null)
|
||||
}
|
||||
else {
|
||||
emit('update:activeStatus', statusId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="section">
|
||||
<!-- Header: just title -->
|
||||
<div class="section__header">
|
||||
<h1 class="section__title">{{ title }}</h1>
|
||||
<p v-if="subtitle" class="section__subtitle">{{ subtitle }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Body: content + toolbox -->
|
||||
<div class="section__body">
|
||||
<div class="section__main">
|
||||
<!-- Status pills INSIDE the list block -->
|
||||
<div v-if="statuses.length > 0" class="section__pills">
|
||||
<button
|
||||
v-for="status in statuses"
|
||||
:key="status.id"
|
||||
type="button"
|
||||
class="status-pill"
|
||||
:class="[getStatusClass(status), { active: activeStatus === status.id }]"
|
||||
@click="toggleStatus(status.id)"
|
||||
>
|
||||
{{ status.label }}
|
||||
<span v-if="status.count > 0" class="section__pill-count">{{ status.count }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="$slots.search" class="section__search">
|
||||
<slot name="search" />
|
||||
</div>
|
||||
<div class="section__content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="section__toolbox">
|
||||
<button class="section__toolbox-head" @click="toolboxOpen = !toolboxOpen">
|
||||
<div class="section__toolbox-head-left">
|
||||
<UIcon name="i-lucide-wrench" />
|
||||
<span>Boite a outils</span>
|
||||
</div>
|
||||
<UIcon
|
||||
:name="toolboxOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
|
||||
class="section__toolbox-toggle"
|
||||
/>
|
||||
</button>
|
||||
<div class="section__toolbox-content" :class="{ 'section__toolbox-content--open': toolboxOpen }">
|
||||
<div v-if="$slots.toolbox" class="section__toolbox-body">
|
||||
<slot name="toolbox" />
|
||||
</div>
|
||||
<div v-else-if="toolboxItems && toolboxItems.length > 0" class="section__toolbox-body">
|
||||
<ToolboxVignette
|
||||
v-for="(item, idx) in toolboxItems"
|
||||
:key="idx"
|
||||
:title="item.title"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="section__toolbox-empty">
|
||||
Aucun outil disponible
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.section__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.section__title {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 800;
|
||||
color: var(--mood-text);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.section__title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section__subtitle {
|
||||
font-size: 0.875rem;
|
||||
color: var(--mood-text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.section__subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section__body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 16rem;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.section__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section__pills {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.section__pills::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.section__pills {
|
||||
flex-wrap: wrap;
|
||||
overflow-x: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.section__pill-count {
|
||||
margin-left: 0.25rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 800;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.section__search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.section__search {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.section__content {
|
||||
min-height: 12rem;
|
||||
}
|
||||
|
||||
.section__toolbox {
|
||||
position: sticky;
|
||||
top: 4.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--mood-surface);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section__toolbox-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.section__toolbox-head-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 800;
|
||||
color: var(--mood-accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.section__toolbox-toggle {
|
||||
color: var(--mood-text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.section__toolbox-content {
|
||||
display: none;
|
||||
padding: 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.section__toolbox-content--open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section__toolbox-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.section__toolbox-empty {
|
||||
font-size: 0.875rem;
|
||||
color: var(--mood-text-muted);
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
/* Desktop: toolbox always open, no toggle */
|
||||
@media (min-width: 1024px) {
|
||||
.section__toolbox-head {
|
||||
cursor: default;
|
||||
}
|
||||
.section__toolbox-toggle {
|
||||
display: none;
|
||||
}
|
||||
.section__toolbox-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.section__body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.section__toolbox {
|
||||
position: static;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* ToolboxVignette — Carte compacte, bullet points, bouton Demarrer.
|
||||
* ToolboxVignette — Carte compacte, collapsible, bullet points + actions.
|
||||
*/
|
||||
|
||||
export interface ToolboxAction {
|
||||
@@ -16,10 +16,12 @@ const props = withDefaults(
|
||||
title: string
|
||||
bullets?: string[]
|
||||
actions?: ToolboxAction[]
|
||||
defaultOpen?: boolean
|
||||
}>(),
|
||||
{
|
||||
bullets: undefined,
|
||||
actions: undefined,
|
||||
defaultOpen: false,
|
||||
},
|
||||
)
|
||||
|
||||
@@ -27,6 +29,8 @@ const emit = defineEmits<{
|
||||
action: [actionEmit: string]
|
||||
}>()
|
||||
|
||||
const open = ref(props.defaultOpen)
|
||||
|
||||
const defaultActions: ToolboxAction[] = [
|
||||
{ label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
|
||||
{ label: 'Formules', icon: 'i-lucide-calculator', emit: 'formules' },
|
||||
@@ -46,22 +50,27 @@ function handleAction(action: ToolboxAction) {
|
||||
</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 class="vignette" :class="{ 'vignette--open': open }">
|
||||
<button class="vignette__header" @click="open = !open">
|
||||
<h4 class="vignette__title">{{ title }}</h4>
|
||||
<UIcon name="i-lucide-chevron-down" class="vignette__chevron" />
|
||||
</button>
|
||||
<div v-show="open" class="vignette__content">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
@@ -70,19 +79,53 @@ function handleAction(action: ToolboxAction) {
|
||||
.vignette {
|
||||
background: var(--mood-accent-soft);
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vignette__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.75rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
gap: 0.375rem;
|
||||
transition: background 0.12s ease;
|
||||
}
|
||||
|
||||
.vignette__header:hover {
|
||||
background: color-mix(in srgb, var(--mood-accent) 8%, transparent);
|
||||
}
|
||||
|
||||
.vignette__title {
|
||||
flex: 1;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
color: var(--mood-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vignette__chevron {
|
||||
font-size: 0.875rem;
|
||||
color: var(--mood-text-muted);
|
||||
opacity: 0.5;
|
||||
transition: transform 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vignette--open .vignette__chevron {
|
||||
transform: rotate(180deg);
|
||||
opacity: 1;
|
||||
color: var(--mood-accent);
|
||||
}
|
||||
|
||||
.vignette__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0 0.75rem 0.625rem;
|
||||
}
|
||||
|
||||
.vignette__bullets {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1rem;
|
||||
|
||||
Reference in New Issue
Block a user