Valentin Le Moign
59dfbe4155
App Nuxt 3 + Nuxt UI qui lit les projets du CMS Grav et compose des portfolios A3 paysage exportés en PDF (gabarit book_v3) : composeur WYSIWYG, templates cover/toc/projet/grille/page libre, pipeline Playwright + Ghostscript, gel du contenu à la génération, partage public opt-in. Dépôt autonome : Dockerfile (base Playwright + Ghostscript + ffmpeg + rsync) inclus. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
52 lines
1.8 KiB
Vue
52 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
// Fond de page (spec §7.2) : blanc / teinté (aplat clair) / pleine couleur.
|
|
import type { Background } from '~~/types'
|
|
|
|
const model = defineModel<Background>({ required: true })
|
|
|
|
const modes = [
|
|
{ value: 'white', label: 'Blanc' },
|
|
{ value: 'tint', label: 'Teinté' },
|
|
{ value: 'color', label: 'Couleur' },
|
|
] as const
|
|
|
|
function setMode(mode: Background['mode']) {
|
|
if (mode === 'white') model.value = { mode: 'white' }
|
|
else if (mode === 'tint') model.value = { mode: 'tint', color: model.value.mode === 'tint' ? model.value.color : TINT_PRESETS[0] }
|
|
else model.value = { mode: 'color', color: model.value.mode === 'color' ? model.value.color : COLOR_PRESETS[1] }
|
|
}
|
|
|
|
const swatches = computed(() =>
|
|
model.value.mode === 'tint' ? TINT_PRESETS : model.value.mode === 'color' ? COLOR_PRESETS : [],
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-2">
|
|
<p class="text-xs font-medium uppercase tracking-wide text-neutral-500">Fond de page</p>
|
|
<div class="flex gap-1">
|
|
<UButton
|
|
v-for="m in modes"
|
|
:key="m.value"
|
|
:label="m.label"
|
|
size="xs"
|
|
:variant="model.mode === m.value ? 'solid' : 'outline'"
|
|
color="neutral"
|
|
@click="setMode(m.value)"
|
|
/>
|
|
</div>
|
|
<div v-if="swatches.length" class="flex flex-wrap gap-1.5 pt-1">
|
|
<button
|
|
v-for="c in swatches"
|
|
:key="c"
|
|
type="button"
|
|
class="size-7 rounded-full border transition-transform hover:scale-110"
|
|
:class="(model as any).color === c ? 'ring-2 ring-[var(--fl-ink)] ring-offset-1 dark:ring-white' : 'border-neutral-300 dark:border-neutral-600'"
|
|
:style="{ backgroundColor: c }"
|
|
:aria-label="c"
|
|
@click="model = { mode: model.mode as 'tint' | 'color', color: c }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|