matthieu
db9dd86b7d
Composant MalioInputRichText aligné sur le thème Malio : - TipTap v3.22.5 + StarterKit + Placeholder + tiptap-markdown 0.9.0 - Toolbar : gras, italique, barré, H2/H3, listes, citation, code, lien, undo/redo - États error / success / hint, props disabled / readonly / editable - Sortie configurable markdown (défaut) ou HTML via outputFormat - Couleurs m-primary / m-danger / m-success / m-muted, icônes mdi:* - Tests (12), playground page, story Histoire, MAJ CHANGELOG + COMPONENTS Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
92 lines
2.8 KiB
Vue
92 lines
2.8 KiB
Vue
<template>
|
|
<div class="grid grid-cols-1 items-start gap-6 p-4 lg:grid-cols-2">
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
|
<MalioInputRichText
|
|
v-model="simpleValue"
|
|
label="Note"
|
|
placeholder="Écrire ici…"
|
|
/>
|
|
<pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ simpleValue }}</pre>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec contenu initial + hint</h2>
|
|
<MalioInputRichText
|
|
v-model="hintValue"
|
|
label="Description"
|
|
hint="Tu peux mettre en forme avec la barre d'outils"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
|
<MalioInputRichText
|
|
v-model="errorValue"
|
|
label="Compte-rendu"
|
|
error="Le compte-rendu doit faire au moins 20 caractères"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
|
<MalioInputRichText
|
|
v-model="successValue"
|
|
label="Compte-rendu"
|
|
success="Compte-rendu validé"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
|
<MalioInputRichText
|
|
v-model="readonlyValue"
|
|
label="Note (lecture seule)"
|
|
readonly
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Disabled</h2>
|
|
<MalioInputRichText
|
|
v-model="disabledValue"
|
|
label="Note (désactivée)"
|
|
disabled
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Affichage seul (editable=false)</h2>
|
|
<MalioInputRichText
|
|
:model-value="readonlyValue"
|
|
:editable="false"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Sortie HTML</h2>
|
|
<MalioInputRichText
|
|
v-model="htmlValue"
|
|
label="Article"
|
|
output-format="html"
|
|
min-height="200px"
|
|
placeholder="Tape ici, la sortie sera en HTML…"
|
|
/>
|
|
<pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ htmlValue }}</pre>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import MalioInputRichText from '../../../../app/components/malio/input/InputRichText.vue'
|
|
|
|
const simpleValue = ref('')
|
|
const hintValue = ref('## Titre\n\nUn paragraphe avec du **gras**, de l\'*italique* et un [lien](https://malio.fr).')
|
|
const errorValue = ref('Trop court')
|
|
const successValue = ref('Tout est bon de mon côté.')
|
|
const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
|
|
const disabledValue = ref('Contenu indisponible.')
|
|
const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
|
|
</script>
|