9 Commits

Author SHA1 Message Date
f30619a497 fix: ajout du composant rich text editor (TipTap v3) (#39)
All checks were successful
Release / release (push) Successful in 1m8s
## Résumé

Release pour publier le composant `MalioInputRichText` (mergé via #37 dans `develop`).

Inclut également un correctif de configuration `semantic-release` pour tolérer le format de commits du repo (`<type>(<scope>) : <message>` avec espace avant `:`).

## Changements

- **#37** — `feat(input-rich-text)` : composant éditeur de texte riche TipTap v3 (déjà sur `develop`)
- **chore(release)** : `parserOpts.headerPattern` ajouté à `commit-analyzer` et `release-notes-generator` dans `.releaserc.json` pour matcher le format Malio avec espace

## Pourquoi un titre `fix:` et pas `feat:`

Choix utilisateur — bump souhaité **patch** (`v1.4.6` → `v1.4.7`) plutôt que minor.

## Test plan

- [ ] Workflow Gitea Actions se déclenche après merge
- [ ] semantic-release détecte le commit `fix:` et bump en `v1.4.7`
- [ ] Tag `v1.4.7` créé
- [ ] Package publié sur Gitea Packages npm registry
- [ ] Test côté projet consommateur : `npm update @malio/layer-ui` → import `<MalioInputRichText>`

## Note durable

Pour les futures PR de release : titre de la PR = un commit Conventional Commits (ex: `fix: …`, `feat: …`, `chore: …`). Avec ce parserOpts en place, l'espace avant `:` est désormais toléré par semantic-release.

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #39
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-committed-by: matthieu <matthieu@yuno.malio.fr>
2026-05-04 13:27:57 +00:00
d7bf038fdd release : rich text editor (TipTap) (#38)
All checks were successful
Release / release (push) Successful in 1m6s
## Résumé

Release de `develop` vers `main` pour déclencher `semantic-release` (publication sur Gitea Packages).

Inclut :
- **#37** — `feat(input-rich-text) : ajout d'un éditeur de texte riche basé sur TipTap v3`

Le commit `feat:` déclenchera un bump **minor** (rétrocompatible).

## Test plan

- [x] Tests verts sur `develop` (315/315)
- [x] Lint OK (0 erreur sur les fichiers ajoutés)
- [x] Histoire build OK
- [ ] Vérifier le run du workflow `release.yml` après merge
- [ ] Vérifier la nouvelle version publiée sur Gitea Packages

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #38
2026-05-04 13:15:41 +00:00
2059556ffe fix: option vide rendue uniquement si emptyOptionLabel non vide (#36)
All checks were successful
Release / release (push) Successful in 1m11s
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #36
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-04-27 12:59:18 +00:00
a95cf8cdfb fix: select checkbox (#35)
All checks were successful
Release / release (push) Successful in 1m10s
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #35
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-04-27 10:09:24 +00:00
ba2ecb5768 fix: suppression de la marge top sur la Checkbox (#34)
All checks were successful
Release / release (push) Successful in 1m12s
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #34
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-04-27 09:31:14 +00:00
87940481d6 fix: utilisation de la bonne police (#33)
All checks were successful
Release / release (push) Successful in 1m6s
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #33
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-04-24 12:15:03 +00:00
66fbbf8abe fix: suppression de la margin top du textArea component (#32)
All checks were successful
Release / release (push) Successful in 1m3s
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #32
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-04-20 13:02:59 +00:00
8de950c402 fix: distribution de tailwind.config.ts aux projets consommateurs avec paths content absolus (#31)
All checks were successful
Release / release (push) Successful in 1m8s
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #31
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-04-20 12:54:42 +00:00
1a14629404 feat: ajout du composant site selector (#30)
All checks were successful
Release / release (push) Successful in 1m7s
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [x] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [x] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #30
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-04-17 12:32:09 +00:00
23 changed files with 2073 additions and 52 deletions

View File

@@ -0,0 +1,91 @@
<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>

View File

@@ -0,0 +1,67 @@
<template>
<div class="grid grid-cols-1 items-start gap-6">
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Simple (3 sites) + event change</h2>
<MalioSiteSelector v-model="simpleValue" :sites="sites" @change="onSiteChange" />
<p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ simpleValue }}</code></p>
<p class="mt-1 text-sm text-gray-600">Dernier event <code>change</code> : <code>{{ lastChange }}</code></p>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Deux sites</h2>
<MalioSiteSelector v-model="twoValue" :sites="sitesTwo" />
<p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ twoValue }}</code></p>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Cinq sites (largeur proportionnelle)</h2>
<MalioSiteSelector v-model="fiveValue" :sites="sitesFive" />
<p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ fiveValue }}</code></p>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Non contrôlé (sans v-model)</h2>
<MalioSiteSelector :sites="sites" />
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Largeur contrainte</h2>
<div class="w-[480px]">
<MalioSiteSelector v-model="constrainedValue" :sites="sites" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const sites = [
{ id: 'chatellerault', name: 'Châtellerault', color: '#0055ff' },
{ id: 'saint-jean', name: 'Saint-Jean', color: '#16a34a' },
{ id: 'pommevic', name: 'Pommevic', color: '#dc2626' },
]
const sitesTwo = [
{ id: 'nord', name: 'Usine Nord', color: '#7c3aed' },
{ id: 'sud', name: 'Usine Sud', color: '#ea580c' },
]
const sitesFive = [
{ id: 's1', name: 'Site 1', color: '#0ea5e9' },
{ id: 's2', name: 'Site 2', color: '#14b8a6' },
{ id: 's3', name: 'Site 3', color: '#f59e0b' },
{ id: 's4', name: 'Site 4', color: '#ec4899' },
{ id: 's5', name: 'Site 5', color: '#6366f1' },
]
const simpleValue = ref('chatellerault')
const twoValue = ref('nord')
const fiveValue = ref('s3')
const constrainedValue = ref('saint-jean')
const lastChange = ref<string>('—')
function onSiteChange(site: { id: string; name: string; color: string }) {
lastChange.value = JSON.stringify(site)
}
</script>

View File

@@ -2,8 +2,26 @@
"branches": ["main", "master"],
"repositoryUrl": "https://gitea.malio.fr/MALIO-DEV/malio-layer-ui.git",
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
[
"@semantic-release/commit-analyzer",
{
"preset": "angular",
"parserOpts": {
"headerPattern": "^(\\w+)(?:\\(([\\w$.\\-* ]+)\\))?\\s*:\\s+(.+)$",
"headerCorrespondence": ["type", "scope", "subject"]
}
}
],
[
"@semantic-release/release-notes-generator",
{
"preset": "angular",
"parserOpts": {
"headerPattern": "^(\\w+)(?:\\(([\\w$.\\-* ]+)\\))?\\s*:\\s+(.+)$",
"headerCorrespondence": ["type", "scope", "subject"]
}
}
],
"@semantic-release/npm"
]
}

View File

@@ -25,7 +25,11 @@ Liste des évolutions de la librairie Malio layer UI
* [#MUI-2] Faire un MCP pour la librairie de composant
* [#MUI-15] Création d'un composant drawer
* [#MUI-22] Création d'un composant datatable
* [#MUI-27] Création d'un composant sélection de site
* Création d'un composant rich text (TipTap) avec sortie markdown / HTML
### Changed
### Fixed
* Hauteur des boutons de pagination du datatable alignée sur le select (40px)
* Distribution de `tailwind.config.ts` aux projets consommateurs avec paths `content` absolus

View File

@@ -132,6 +132,39 @@ Zone de texte multiligne avec compteur et redimensionnement.
---
## MalioInputRichText
Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**. Toolbar avec gras, italique, barré, titres H2/H3, listes, citation, code, code-block, lien, undo/redo. Sortie en markdown (par défaut) ou HTML.
| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `id` | `string` | auto | Identifiant HTML |
| `label` | `string` | `''` | Label affiché au-dessus de l'éditeur |
| `modelValue` | `string \| null` | `undefined` | Contenu (v-model) |
| `placeholder` | `string` | `''` | Texte affiché quand vide |
| `minHeight` | `string` | `'160px'` | Hauteur min de la zone d'édition |
| `editable` | `boolean` | `true` | `false` → mode affichage seul (toolbar masquée) |
| `disabled` | `boolean` | `false` | Désactive l'édition et la toolbar |
| `readonly` | `boolean` | `false` | Lecture seule (toolbar visible mais désactivée) |
| `hint` | `string` | `''` | Message d'aide |
| `error` | `string` | `''` | Message d'erreur |
| `success` | `string` | `''` | Message de succès |
| `outputFormat` | `'markdown' \| 'html'` | `'markdown'` | Format émis dans `update:modelValue` |
| `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
| `labelClass` | `string` | `''` | Classes CSS label (twMerge) |
| `editorClass` | `string` | `''` | Classes CSS wrapper éditeur (twMerge) |
**Events :** `update:modelValue(value: string)`
```vue
<MalioInputRichText v-model="note" label="Note" placeholder="Écrire ici…" />
<MalioInputRichText v-model="cr" label="Compte-rendu" error="Trop court" />
<MalioInputRichText v-model="article" label="Article" output-format="html" min-height="240px" />
<MalioInputRichText :model-value="content" :editable="false" />
```
---
## MalioInputUpload
Champ d'upload de fichier.

View File

@@ -35,6 +35,6 @@
--m-site-yellow: 243 203 0; /* #F3CB00 - Jaune Saint-Jean */
--m-site-green: 116 191 4; /* #74BF04 - Vert Pommevic */
--m-radius: 8px;
--m-radius: 6px;
}
}

View File

@@ -94,7 +94,7 @@ const describedBy = computed(() => {
const mergedGroupClass = computed(() =>
twMerge(
'checkbox-wrapper-4 mt-4 w-full',
'checkbox-wrapper-4 w-full',
props.groupClass,
),
)

View File

@@ -80,7 +80,7 @@
variant="tertiary"
label="Prev"
:disabled="page <= 1"
button-class="h-8 w-auto min-w-0 px-3 text-sm"
button-class="h-10 w-auto min-w-0 px-3 text-sm"
aria-label="Page précédente"
data-test="prev-button"
@click="goToPage(page - 1)"
@@ -95,7 +95,7 @@
<button
v-else
type="button"
class="h-8 min-w-[2rem] rounded px-2 text-sm transition-colors"
class="h-10 min-w-[2.5rem] rounded px-2 text-sm transition-colors"
:class="p === page
? 'bg-m-btn-primary text-white font-semibold'
: 'text-m-text hover:bg-m-bg'"
@@ -111,7 +111,7 @@
variant="tertiary"
label="Next"
:disabled="page >= totalPages"
button-class="h-8 w-auto min-w-0 px-3 text-sm"
button-class="h-10 w-auto min-w-0 px-3 text-sm"
aria-label="Page suivante"
data-test="next-button"
@click="goToPage(page + 1)"

View File

@@ -0,0 +1,133 @@
import {afterEach, describe, expect, it} from 'vitest'
import {flushPromises, mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import InputRichText from './InputRichText.vue'
type InputRichTextProps = {
id?: string
label?: string
modelValue?: string | null
placeholder?: string
minHeight?: string
editable?: boolean
disabled?: boolean
readonly?: boolean
hint?: string
error?: string
success?: string
outputFormat?: 'markdown' | 'html'
groupClass?: string
labelClass?: string
editorClass?: string
}
const InputRichTextForTest = InputRichText as DefineComponent<InputRichTextProps>
const mountComponent = async (props: InputRichTextProps = {}) => {
const wrapper = mount(InputRichTextForTest, {
props,
attachTo: document.body,
})
await flushPromises()
return wrapper
}
afterEach(() => {
document.body.replaceChildren()
})
describe('MalioInputRichText', () => {
it('renders the label and reuses a provided id', async () => {
const wrapper = await mountComponent({id: 'custom-rt-id', label: 'Description'})
const label = wrapper.get('label')
expect(label.text()).toBe('Description')
expect(label.attributes('for')).toBe('custom-rt-id')
expect(wrapper.get('#custom-rt-id').exists()).toBe(true)
})
it('generates an id when missing', async () => {
const wrapper = await mountComponent({label: 'Description'})
const labelFor = wrapper.get('label').attributes('for')
expect(labelFor?.startsWith('malio-input-rich-text-')).toBe(true)
})
it('renders the toolbar buttons in editable mode', async () => {
const wrapper = await mountComponent({modelValue: ''})
const buttons = wrapper.findAll('button[type="button"]')
expect(buttons.length).toBeGreaterThanOrEqual(13)
expect(wrapper.find('button[title="Gras"]').exists()).toBe(true)
expect(wrapper.find('button[title="Italique"]').exists()).toBe(true)
expect(wrapper.find('button[title="Lien"]').exists()).toBe(true)
expect(wrapper.find('button[title="Annuler"]').exists()).toBe(true)
expect(wrapper.find('button[title="Rétablir"]').exists()).toBe(true)
})
it('does not render the toolbar in readonly display mode (editable=false)', async () => {
const wrapper = await mountComponent({editable: false, modelValue: '**hi**'})
expect(wrapper.find('button[title="Gras"]').exists()).toBe(false)
})
it('disables toolbar buttons when disabled', async () => {
const wrapper = await mountComponent({disabled: true, modelValue: ''})
const boldBtn = wrapper.get('button[title="Gras"]')
expect(boldBtn.attributes('disabled')).toBeDefined()
})
it('disables toolbar buttons when readonly', async () => {
const wrapper = await mountComponent({readonly: true, modelValue: ''})
const boldBtn = wrapper.get('button[title="Gras"]')
expect(boldBtn.attributes('disabled')).toBeDefined()
})
it('shows hint message in muted color', async () => {
const wrapper = await mountComponent({hint: 'Helpful hint'})
expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
})
it('shows error state on wrapper, label and message', async () => {
const wrapper = await mountComponent({label: 'Description', error: 'Editor error'})
expect(wrapper.get('label').classes()).toContain('text-m-danger')
expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
})
it('shows success state on wrapper, label and message', async () => {
const wrapper = await mountComponent({label: 'Description', success: 'Editor success'})
expect(wrapper.get('label').classes()).toContain('text-m-success')
expect(wrapper.get('p.text-m-success').text()).toBe('Editor success')
expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-success')
})
it('prioritizes error over success', async () => {
const wrapper = await mountComponent({error: 'Editor error', success: 'Editor success'})
expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
expect(wrapper.find('p.text-m-success').exists()).toBe(false)
expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
})
it('sets aria-invalid and aria-describedby on the editor content when error', async () => {
const wrapper = await mountComponent({id: 'rt-aria', error: 'Boom'})
const editorContent = wrapper.find('[aria-invalid="true"]')
expect(editorContent.exists()).toBe(true)
expect(editorContent.attributes('aria-describedby')).toBe('rt-aria-describedby')
})
it('renders initial markdown content visually', async () => {
const wrapper = await mountComponent({modelValue: '## Mon titre\n\nUn paragraphe.'})
const html = wrapper.html()
expect(html).toContain('Mon titre')
expect(html).toContain('Un paragraphe.')
})
})

View File

@@ -0,0 +1,326 @@
<template>
<div :class="mergedGroupClass">
<label
v-if="label"
:for="editorId"
:class="mergedLabelClass"
>
{{ label }}
</label>
<!-- Mode lecture seule (rendu uniquement) -->
<div
v-if="!editable"
:id="editorId"
:class="mergedReadonlyClass"
>
<EditorContent :editor="editor" />
</div>
<!-- Mode éditable -->
<div
v-else
:id="editorId"
:class="mergedEditorWrapperClass"
@click="focusEditor"
>
<div
class="flex flex-wrap items-center gap-0.5 border-b border-m-border bg-m-bg p-1"
@click.stop
>
<button
v-for="btn in toolbarButtons"
:key="btn.key"
type="button"
class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
:class="btn.isActive() ? 'bg-m-primary/15 text-m-primary' : ''"
:title="btn.title"
:disabled="disabled || readonly"
:aria-label="btn.title"
:aria-pressed="btn.isActive()"
@mousedown.prevent
@click="btn.action()"
>
<IconifyIcon :icon="btn.icon" :width="18" :height="18" />
</button>
<span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
title="Annuler"
aria-label="Annuler"
:disabled="disabled || readonly || !editor?.can().undo()"
@mousedown.prevent
@click="editor?.chain().focus().undo().run()"
>
<IconifyIcon icon="mdi:undo" :width="18" :height="18" />
</button>
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
title="Rétablir"
aria-label="Rétablir"
:disabled="disabled || readonly || !editor?.can().redo()"
@mousedown.prevent
@click="editor?.chain().focus().redo().run()"
>
<IconifyIcon icon="mdi:redo" :width="18" :height="18" />
</button>
</div>
<EditorContent
:editor="editor"
class="malio-rich-text flex flex-1 cursor-text"
:style="{ minHeight }"
:aria-invalid="hasError || undefined"
:aria-describedby="describedBy"
/>
</div>
<p
v-if="hint || hasError || hasSuccess"
:id="`${editorId}-describedby`"
:class="[
hasError
? 'text-m-danger'
: hasSuccess
? 'text-m-success'
: 'text-m-muted',
'mt-1 text-xs ml-[2px]',
]"
>
{{ error || success || hint }}
</p>
</div>
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, shallowRef, useId, watch } from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'
import { Markdown } from 'tiptap-markdown'
import { twMerge } from 'tailwind-merge'
defineOptions({ name: 'MalioInputRichText', inheritAttrs: false })
type OutputFormat = 'markdown' | 'html'
const props = withDefaults(
defineProps<{
id?: string
label?: string
modelValue?: string | null | undefined
placeholder?: string
minHeight?: string
editable?: boolean
disabled?: boolean
readonly?: boolean
hint?: string
error?: string
success?: string
outputFormat?: OutputFormat
groupClass?: string
labelClass?: string
editorClass?: string
}>(),
{
id: '',
label: '',
modelValue: undefined,
placeholder: '',
minHeight: '160px',
editable: true,
disabled: false,
readonly: false,
hint: '',
error: '',
success: '',
outputFormat: 'markdown',
groupClass: '',
labelClass: '',
editorClass: '',
},
)
const emit = defineEmits<{
(event: 'update:modelValue', value: string): void
}>()
const generatedId = useId()
const editor = shallowRef<Editor>()
const isFocused = shallowRef(false)
const editorId = computed(() => props.id?.toString() || `malio-input-rich-text-${generatedId}`)
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!props.success && !hasError.value)
const isInteractionLocked = computed(() => props.disabled || props.readonly)
const describedBy = computed(() =>
hasError.value || hasSuccess.value || props.hint ? `${editorId.value}-describedby` : undefined,
)
const mergedGroupClass = computed(() => twMerge('w-full', props.groupClass))
const mergedLabelClass = computed(() =>
twMerge(
'mb-1 block text-sm font-medium',
hasError.value
? 'text-m-danger'
: hasSuccess.value
? 'text-m-success'
: isFocused.value
? 'text-m-primary'
: 'text-m-text',
props.disabled ? 'text-black/60' : '',
props.labelClass,
),
)
const mergedEditorWrapperClass = computed(() =>
twMerge(
'rich-text-wrapper flex flex-col overflow-hidden rounded-md border bg-white transition-colors',
hasError.value
? 'border-m-danger focus-within:border-m-danger'
: hasSuccess.value
? 'border-m-success focus-within:border-m-success'
: isFocused.value
? 'border-m-primary'
: 'border-m-muted hover:border-m-text/60',
props.disabled ? 'cursor-not-allowed bg-m-bg/50 opacity-70' : '',
props.editorClass,
),
)
const mergedReadonlyClass = computed(() =>
twMerge(
'malio-rich-text prose prose-sm max-w-none rounded-md border border-m-border bg-white p-3',
'prose-headings:font-semibold prose-a:text-m-primary',
'prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none',
'prose-pre:bg-m-text prose-pre:text-white',
props.editorClass,
),
)
const focusEditor = () => {
if (isInteractionLocked.value) return
editor.value?.commands.focus()
}
const promptForLink = () => {
if (!editor.value) return
const previous = editor.value.getAttributes('link').href as string | undefined
const url = window.prompt('URL du lien (vide pour retirer)', previous ?? '')
if (url === null) return
if (url === '') {
editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
return
}
editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
}
const toolbarButtons = computed(() => {
const e = editor.value
return [
{ key: 'bold', icon: 'mdi:format-bold', title: 'Gras', isActive: () => !!e?.isActive('bold'), action: () => e?.chain().focus().toggleBold().run() },
{ key: 'italic', icon: 'mdi:format-italic', title: 'Italique', isActive: () => !!e?.isActive('italic'), action: () => e?.chain().focus().toggleItalic().run() },
{ key: 'strike', icon: 'mdi:format-strikethrough', title: 'Barré', isActive: () => !!e?.isActive('strike'), action: () => e?.chain().focus().toggleStrike().run() },
{ key: 'h2', icon: 'mdi:format-header-2', title: 'Titre H2', isActive: () => !!e?.isActive('heading', { level: 2 }), action: () => e?.chain().focus().toggleHeading({ level: 2 }).run() },
{ key: 'h3', icon: 'mdi:format-header-3', title: 'Titre H3', isActive: () => !!e?.isActive('heading', { level: 3 }), action: () => e?.chain().focus().toggleHeading({ level: 3 }).run() },
{ key: 'bulletList', icon: 'mdi:format-list-bulleted', title: 'Liste à puces', isActive: () => !!e?.isActive('bulletList'), action: () => e?.chain().focus().toggleBulletList().run() },
{ key: 'orderedList', icon: 'mdi:format-list-numbered', title: 'Liste numérotée', isActive: () => !!e?.isActive('orderedList'), action: () => e?.chain().focus().toggleOrderedList().run() },
{ key: 'blockquote', icon: 'mdi:format-quote-close', title: 'Citation', isActive: () => !!e?.isActive('blockquote'), action: () => e?.chain().focus().toggleBlockquote().run() },
{ key: 'code', icon: 'mdi:code-tags', title: 'Code inline', isActive: () => !!e?.isActive('code'), action: () => e?.chain().focus().toggleCode().run() },
{ key: 'codeBlock', icon: 'mdi:code-braces-box', title: 'Bloc de code', isActive: () => !!e?.isActive('codeBlock'), action: () => e?.chain().focus().toggleCodeBlock().run() },
{ key: 'link', icon: 'mdi:link-variant', title: 'Lien', isActive: () => !!e?.isActive('link'), action: promptForLink },
]
})
const getCurrentValue = (): string => {
if (!editor.value) return ''
if (props.outputFormat === 'html') return editor.value.getHTML()
const storage = editor.value.storage.markdown as { getMarkdown: () => string } | undefined
return storage ? storage.getMarkdown() : editor.value.getHTML()
}
onMounted(() => {
editor.value = new Editor({
content: props.modelValue ?? '',
editable: props.editable && !props.disabled && !props.readonly,
extensions: [
StarterKit.configure({
heading: { levels: [2, 3] },
link: {
openOnClick: false,
autolink: true,
HTMLAttributes: { rel: 'noopener noreferrer nofollow', target: '_blank' },
},
}),
Placeholder.configure({
placeholder: props.placeholder,
}),
Markdown.configure({
html: false,
tightLists: true,
bulletListMarker: '-',
linkify: true,
breaks: false,
transformPastedText: true,
transformCopiedText: true,
}),
],
editorProps: {
attributes: {
class: 'prose prose-sm max-w-none w-full p-3 focus:outline-none prose-headings:font-semibold prose-a:text-m-primary prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-m-text prose-pre:text-white',
},
},
onUpdate: () => {
emit('update:modelValue', getCurrentValue())
},
onFocus: () => {
isFocused.value = true
},
onBlur: () => {
isFocused.value = false
},
})
})
onBeforeUnmount(() => {
editor.value?.destroy()
})
watch(() => props.modelValue, (incoming) => {
if (!editor.value) return
if ((incoming ?? '') === getCurrentValue()) return
editor.value.commands.setContent(incoming ?? '', { emitUpdate: false })
})
watch(() => [props.editable, props.disabled, props.readonly], () => {
editor.value?.setEditable(props.editable && !props.disabled && !props.readonly)
})
</script>
<style scoped>
.malio-rich-text :deep(.ProseMirror) {
outline: none;
flex: 1 1 auto;
min-width: 0;
}
.malio-rich-text :deep(.ProseMirror > *:first-child) {
margin-top: 0;
}
.malio-rich-text :deep(.ProseMirror > *:last-child) {
margin-bottom: 0;
}
.malio-rich-text :deep(.ProseMirror p.is-editor-empty:first-child::before) {
content: attr(data-placeholder);
float: left;
color: rgb(var(--m-muted));
pointer-events: none;
height: 0;
}
</style>

View File

@@ -1,6 +1,6 @@
<template>
<div
class="relative mt-4 w-full"
class="relative w-full"
>
<textarea
:id="inputId"

View File

@@ -88,11 +88,46 @@ describe('MalioSelect', () => {
})
await wrapper.get('button').trigger('click')
await wrapper.findAll('li')[2].trigger('click')
await wrapper.findAll('li')[1].trigger('click')
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
})
it('does not render empty option when emptyOptionLabel is empty', async () => {
const wrapper = mount(SelectForTest, {
props: {
modelValue: null,
options: [
{label: 'AM', value: 'am'},
{label: 'PM', value: 'pm'},
],
},
})
await wrapper.get('button').trigger('click')
const items = wrapper.findAll('li[role="option"]')
expect(items).toHaveLength(2)
expect(items[0].text()).toBe('AM')
expect(items[1].text()).toBe('PM')
})
it('renders empty option when emptyOptionLabel is provided', async () => {
const wrapper = mount(SelectForTest, {
props: {
modelValue: null,
options: [{label: 'AM', value: 'am'}],
emptyOptionLabel: 'Choisir...',
},
})
await wrapper.get('button').trigger('click')
const items = wrapper.findAll('li[role="option"]')
expect(items).toHaveLength(2)
expect(items[0].text()).toBe('Choisir...')
})
it('renders the empty option with muted text style', async () => {
const wrapper = mount(SelectForTest, {
props: {

View File

@@ -208,10 +208,10 @@ const buttonId = `custom-select-btn-${uid}`
const listboxId = `custom-select-listbox-${uid}`
const listRef = ref<HTMLElement | null>(null)
const listHeight = ref(0)
const normalizedOptions = computed<Option[]>(() => [
{label: props.emptyOptionLabel, value: null},
...props.options,
])
const normalizedOptions = computed<Option[]>(() => {
if (!props.emptyOptionLabel) return props.options
return [{label: props.emptyOptionLabel, value: null}, ...props.options]
})
const mergedGroupClass = computed(() =>
twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
)

View File

@@ -26,6 +26,7 @@ type SelectCheckboxProps = {
displaySelectAll?: boolean
selectAllLabel?: string
disabled?: boolean
groupClass?: string
}
const SelectCheckboxForTest = SelectCheckbox as DefineComponent<SelectCheckboxProps>
@@ -175,4 +176,21 @@ describe('MalioSelectCheckbox', () => {
const checkboxes = wrapper.findAll('input[type="checkbox"]')
expect((checkboxes[0].element as HTMLInputElement).checked).toBe(false)
})
it('applies minWidth via twMerge so it overrides w-full (parity with MalioSelect)', () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: [], options: [], minWidth: 'w-80'},
})
const root = wrapper.find('button').element.parentElement
expect(root?.className).toContain('w-80')
expect(root?.className).not.toContain('w-full')
})
it('applies groupClass via twMerge', () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: [], options: [], groupClass: 'mt-4'},
})
const root = wrapper.find('button').element.parentElement
expect(root?.className).toContain('mt-4')
})
})

View File

@@ -2,8 +2,7 @@
<div>
<div
ref="root"
class="relative w-full"
:class="[minWidth, maxWidth]"
:class="mergedGroupClass"
>
<button
:id="buttonId"
@@ -26,7 +25,7 @@
? openDirection === 'down'
? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
: 'rounded-t-none !border-2 !border-m-primary !border-t-0'
: isOptionSelected
: isOptionSelected
? 'border-black'
: 'border-m-muted',
disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
@@ -45,7 +44,7 @@
v-if="label"
class="floating-label pointer-events-none absolute left-3 inline-block origin-left transition-transform duration-150 font-medium"
:class="[
shouldFloatLabel ? 'top-2 z-30' : 'top-1/2 -translate-y-1/2',
isOpen ? 'top-2 z-30' : 'top-2',
hasError
? 'text-m-danger'
: hasSuccess
@@ -206,6 +205,7 @@
<script setup lang="ts">
import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
import {Icon as IconifyIcon} from '@iconify/vue'
import {twMerge} from 'tailwind-merge'
import Checkbox from '../checkbox/Checkbox.vue'
defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
@@ -232,6 +232,7 @@ const props = withDefaults(defineProps<{
displaySelectAll?: boolean
selectAllLabel?: string
disabled?: boolean
groupClass?: string
}>(), {
options: () => [],
emptyOptionLabel: '',
@@ -249,6 +250,7 @@ const props = withDefaults(defineProps<{
displaySelectAll: false,
selectAllLabel: 'Tout sélectionner',
disabled: false,
groupClass: '',
})
const emit = defineEmits<{
@@ -264,6 +266,9 @@ const listboxId = `custom-select-listbox-${uid}`
const listRef = ref<HTMLElement | null>(null)
const listHeight = ref(0)
const normalizedOptions = computed<Option[]>(() => props.options)
const mergedGroupClass = computed(() =>
twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
)
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!props.success && !hasError.value)
const isOptionSelected = computed(() =>
@@ -281,6 +286,10 @@ const shouldFloatLabel = computed(() =>
const selectionSummary = computed(() =>
`${props.modelValue.length}/${normalizedOptions.value.length}`
)
const allSelected = computed(() =>
normalizedOptions.value.length > 0
&& normalizedOptions.value.every(opt => props.modelValue.includes(opt.value)),
)
const describedBy = computed(() =>
(hasError.value || hasSuccess.value || !!props.hint) ? `${buttonId}-describedby` : undefined,
)
@@ -320,18 +329,22 @@ function open() {
}
const labelTransformStyle = computed(() => {
// label non flottant
if (!shouldFloatLabel.value) {
return undefined
return {}
}
// fermé ou ouverture vers le bas : comportement classique
if (!isOpen.value || openDirection.value === 'down') {
return {
transform: 'translateY(-1.15rem) scale(0.9)',
}
}
// ouverture vers le haut : on remonte en fonction de la hauteur de la liste
const extraOffset = 8 // marge visuelle au-dessus de la liste en px
const total = 4 + listHeight.value + extraOffset
const total = 4 +listHeight.value + extraOffset
// 18 ≈ 1.15rem pour garder la même base que votre flottant actuel
return {
transform: `translateY(-${total}px) scale(0.9)`,
@@ -351,19 +364,6 @@ function toggle() {
open()
}
const allSelected = computed(() =>
normalizedOptions.value.length > 0
&& normalizedOptions.value.every(opt => props.modelValue.includes(opt.value)),
)
function toggleAll() {
if (allSelected.value) {
emit('update:modelValue', [])
} else {
emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
}
}
function isChecked(value: string | number) {
return props.modelValue.includes(value)
}
@@ -373,10 +373,17 @@ function toggleOption(value: string | number) {
emit('update:modelValue', props.modelValue.filter(item => item !== value))
return
}
emit('update:modelValue', [...props.modelValue, value])
}
function toggleAll() {
if (allSelected.value) {
emit('update:modelValue', [])
} else {
emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
}
}
function onClickOutside(e: MouseEvent) {
if (!root.value) return
if (!root.value.contains(e.target as Node)) close()

View File

@@ -0,0 +1,154 @@
import {describe, expect, it} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import SiteSelector from './SiteSelector.vue'
type Site = {
id: string
name: string
color: string
}
type SiteSelectorProps = {
sites: Site[]
modelValue?: string
id?: string
groupClass?: string
tileClass?: string
labelClass?: string
}
const SiteSelectorForTest = SiteSelector as DefineComponent<SiteSelectorProps>
const sites: Site[] = [
{id: 'chatellerault', name: 'Châtellerault', color: '#2563eb'},
{id: 'saint-jean', name: 'Saint-Jean', color: '#16a34a'},
{id: 'pommevic', name: 'Pommevic', color: '#dc2626'},
]
function mountComponent(props: SiteSelectorProps) {
return mount(SiteSelectorForTest, {props})
}
describe('MalioSiteSelector', () => {
it('renders one tile per site with the site name', () => {
const wrapper = mountComponent({sites})
const tiles = wrapper.findAll('[role="radio"]')
expect(tiles).toHaveLength(3)
expect(tiles[0]!.text()).toBe('Châtellerault')
expect(tiles[1]!.text()).toBe('Saint-Jean')
expect(tiles[2]!.text()).toBe('Pommevic')
})
it('has role="radiogroup" on the wrapper', () => {
const wrapper = mountComponent({sites})
expect(wrapper.find('[role="radiogroup"]').exists()).toBe(true)
})
it('selects the first site by default in uncontrolled mode', () => {
const wrapper = mountComponent({sites})
const tiles = wrapper.findAll('[role="radio"]')
expect(tiles[0]!.attributes('aria-checked')).toBe('true')
expect(tiles[1]!.attributes('aria-checked')).toBe('false')
expect(tiles[2]!.attributes('aria-checked')).toBe('false')
})
it('paints all tiles with the selected site color', () => {
const wrapper = mountComponent({sites, modelValue: 'saint-jean'})
const tiles = wrapper.findAll('[role="radio"]')
for (const tile of tiles) {
expect(tile.attributes('style')).toContain('background-color: rgb(22, 163, 74)')
}
})
it('applies opacity 1 on the selected tile and 0.4 on the others', () => {
const wrapper = mountComponent({sites, modelValue: 'chatellerault'})
const tiles = wrapper.findAll('[role="radio"]')
expect(tiles[0]!.attributes('style')).toContain('opacity: 1')
expect(tiles[1]!.attributes('style')).toContain('opacity: 0.4')
expect(tiles[2]!.attributes('style')).toContain('opacity: 0.4')
})
it('updates the shared color when the selection changes', async () => {
const wrapper = mountComponent({sites})
let tiles = wrapper.findAll('[role="radio"]')
expect(tiles[0]!.attributes('style')).toContain('background-color: rgb(37, 99, 235)')
await tiles[2]!.trigger('click')
tiles = wrapper.findAll('[role="radio"]')
for (const tile of tiles) {
expect(tile.attributes('style')).toContain('background-color: rgb(220, 38, 38)')
}
})
it('emits update:modelValue with the clicked site id', async () => {
const wrapper = mountComponent({sites, modelValue: 'chatellerault'})
const tiles = wrapper.findAll('[role="radio"]')
await tiles[1]!.trigger('click')
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['saint-jean'])
})
it('emits change with the full selected site object', async () => {
const wrapper = mountComponent({sites, modelValue: 'chatellerault'})
const tiles = wrapper.findAll('[role="radio"]')
await tiles[2]!.trigger('click')
expect(wrapper.emitted('change')?.[0]).toEqual([
{id: 'pommevic', name: 'Pommevic', color: '#dc2626'},
])
})
it('respects modelValue in controlled mode', () => {
const wrapper = mountComponent({sites, modelValue: 'pommevic'})
const tiles = wrapper.findAll('[role="radio"]')
expect(tiles[0]!.attributes('aria-checked')).toBe('false')
expect(tiles[1]!.attributes('aria-checked')).toBe('false')
expect(tiles[2]!.attributes('aria-checked')).toBe('true')
})
it('switches selection on click in uncontrolled mode', async () => {
const wrapper = mountComponent({sites})
const tiles = wrapper.findAll('[role="radio"]')
await tiles[1]!.trigger('click')
expect(tiles[0]!.attributes('aria-checked')).toBe('false')
expect(tiles[1]!.attributes('aria-checked')).toBe('true')
expect(tiles[2]!.attributes('aria-checked')).toBe('false')
})
it('sets roving tabindex (active = 0, others = -1)', () => {
const wrapper = mountComponent({sites, modelValue: 'saint-jean'})
const tiles = wrapper.findAll('[role="radio"]')
expect(tiles[0]!.attributes('tabindex')).toBe('-1')
expect(tiles[1]!.attributes('tabindex')).toBe('0')
expect(tiles[2]!.attributes('tabindex')).toBe('-1')
})
it('merges groupClass, tileClass and labelClass via twMerge', () => {
const wrapper = mountComponent({
sites,
groupClass: 'rounded-none bg-black',
tileClass: 'py-10',
labelClass: 'text-xs',
})
const group = wrapper.find('[role="radiogroup"]')
expect(group.classes()).toContain('rounded-none')
expect(group.classes()).toContain('bg-black')
const tile = wrapper.find('[role="radio"]')
expect(tile.classes()).toContain('py-10')
expect(tile.classes()).not.toContain('py-4')
const label = tile.find('span')
expect(label.classes()).toContain('text-xs')
})
it('uses a custom id when provided', () => {
const wrapper = mountComponent({sites, id: 'my-selector'})
expect(wrapper.find('[role="radiogroup"]').attributes('id')).toBe('my-selector')
})
})

View File

@@ -0,0 +1,104 @@
<template>
<div
v-bind="$attrs"
:id="componentId"
role="radiogroup"
:class="mergedGroupClass"
>
<button
v-for="site in sites"
:key="site.id"
type="button"
role="radio"
:aria-checked="activeId === site.id"
:tabindex="activeId === site.id ? 0 : -1"
:style="{
backgroundColor: activeColor,
opacity: activeId === site.id ? 1 : 0.4,
}"
:class="mergedTileClass"
@click="select(site.id)"
>
<span :class="mergedLabelClass">{{ site.name }}</span>
</button>
</div>
</template>
<script setup lang="ts">
import {computed, ref, useId} from 'vue'
import {twMerge} from 'tailwind-merge'
defineOptions({name: 'MalioSiteSelector', inheritAttrs: false})
type Site = {
id: string
name: string
color: string
}
const props = withDefaults(defineProps<{
sites: Site[]
modelValue?: string
id?: string
groupClass?: string
tileClass?: string
labelClass?: string
}>(), {
modelValue: undefined,
id: '',
groupClass: '',
tileClass: '',
labelClass: '',
})
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void
(e: 'change', site: Site): void
}>()
const generatedId = useId()
const componentId = computed(() => props.id || `malio-site-selector-${generatedId}`)
const isControlled = computed(() => props.modelValue !== undefined)
const localValue = ref(props.sites.length > 0 ? props.sites[0]!.id : '')
const activeId = computed(() =>
isControlled.value ? props.modelValue! : localValue.value,
)
const activeColor = computed(() =>
props.sites.find((s) => s.id === activeId.value)?.color ?? '',
)
const mergedGroupClass = computed(() =>
twMerge(
'flex w-full',
props.groupClass,
),
)
const mergedTileClass = computed(() =>
twMerge(
'flex-1 cursor-pointer px-6 py-4 text-center transition-opacity focus:outline-none',
props.tileClass,
),
)
const mergedLabelClass = computed(() =>
twMerge(
'text-white font-bold uppercase tracking-wide',
props.labelClass,
),
)
function select(id: string) {
const site = props.sites.find((s) => s.id === id)
if (!site) return
if (!isControlled.value) {
localValue.value = id
}
emit('update:modelValue', id)
emit('change', site)
}
</script>

View File

@@ -0,0 +1,202 @@
<template>
<Story title="Input/RichText">
<div class="grid grid-cols-1 gap-6 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…"
/>
</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="Mise en forme via 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">Désactivé</h2>
<MalioInputRichText
v-model="disabledValue"
label="Note"
disabled
/>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
<MalioInputRichText
v-model="readonlyValue"
label="Note"
readonly
/>
</div>
<div class="rounded-lg border p-4 lg:col-span-2">
<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 lg:col-span-2">
<h2 class="mb-4 text-xl font-bold">Sortie HTML</h2>
<MalioInputRichText
v-model="htmlValue"
label="Article"
output-format="html"
min-height="200px"
/>
</div>
</div>
</Story>
</template>
<docs lang="md">
# MalioInputRichText
Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**.
Sortie en **markdown** (par défaut) ou en **HTML**. Aligné sur le thème Malio
(couleurs `m-*`, icônes `mdi:*`, états error / success / hint).
------------------------------------------------------------------------
## Props détaillées
### id
- Type: `string`
- Description: Identifiant HTML.
- Comportement: Généré automatiquement si non fourni (`malio-input-rich-text-…`).
### label
- Type: `string`
- Description: Label affiché au-dessus de l'éditeur.
- Comportement: Change de couleur selon l'état (focus `m-primary`, error `m-danger`, success `m-success`).
### modelValue
- Type: `string | null | undefined`
- Description: Contenu de l'éditeur (markdown ou HTML selon `outputFormat`).
- Comportement: `v-model` ; sync bidirectionnelle.
### placeholder
- Type: `string`
- Défaut: `''`
- Description: Texte affiché quand l'éditeur est vide.
### minHeight
- Type: `string`
- Défaut: `160px`
- Description: Hauteur minimale de la zone d'édition (CSS valid value).
### editable
- Type: `boolean`
- Défaut: `true`
- Description: `false` → mode affichage seul, **toolbar masquée**, contenu rendu en `prose`.
### disabled
- Type: `boolean`
- Défaut: `false`
- Description: Désactive l'édition et la toolbar (opacité réduite).
### readonly
- Type: `boolean`
- Défaut: `false`
- Description: Lecture seule (toolbar visible mais désactivée, pas de saisie).
### hint / error / success
- Type: `string`
- Description: Messages contextuels affichés sous l'éditeur.
- Priorité: `error` > `success` > `hint`.
### outputFormat
- Type: `'markdown' | 'html'`
- Défaut: `'markdown'`
- Description: Format émis dans `update:modelValue`.
- `markdown` : utilise `tiptap-markdown` (`getMarkdown()`).
- `html` : utilise `editor.getHTML()`.
### groupClass / labelClass / editorClass
- Type: `string`
- Description: Classes Tailwind additionnelles fusionnées via `twMerge` pour override.
------------------------------------------------------------------------
## Toolbar
Boutons (icônes `mdi:*`) :
- Gras, Italique, Barré
- Titre H2, Titre H3
- Liste à puces, Liste numérotée
- Citation
- Code inline, Bloc de code
- Lien (prompt URL ; vide pour retirer)
- Annuler / Rétablir
------------------------------------------------------------------------
## Accessibilité
- Le label est lié à la zone d'édition via `for` / `id`.
- `aria-invalid="true"` sur la zone d'édition en cas d'erreur.
- `aria-describedby` référence le message d'erreur / succès / hint.
- Boutons toolbar : `aria-pressed` reflète l'état actif, `aria-label` pour l'usage screen-reader.
------------------------------------------------------------------------
## Events
### update:modelValue
- Émis à chaque modification du contenu.
- Payload : `string` (markdown ou HTML selon `outputFormat`).
</docs>
<script setup lang="ts">
import {ref} from 'vue'
import MalioInputRichText from '../../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 disabledValue = ref('Contenu indisponible.')
const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
</script>

View File

@@ -0,0 +1,116 @@
<template>
<Story title="Site/Selector">
<div class="grid grid-cols-1 gap-6">
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Trois sites</h2>
<MalioSiteSelector v-model="threeValue" :sites="sites" />
<p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ threeValue }}</code></p>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Deux sites</h2>
<MalioSiteSelector v-model="twoValue" :sites="sitesTwo" />
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Cinq sites</h2>
<MalioSiteSelector v-model="fiveValue" :sites="sitesFive" />
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Non contrôlé</h2>
<MalioSiteSelector :sites="sites" />
</div>
</div>
</Story>
</template>
<docs lang="md">
# MalioSiteSelector
Sélecteur horizontal pour choisir **un site** (usine ou lieu) parmi une liste. Les tuiles occupent une largeur proportionnelle du conteneur. La couleur du site sélectionné est appliquée à toutes les tuiles ; la tuile active est opaque (opacité 1), les autres sont atténuées (opacité 0.4).
---
## Props détaillées
### sites
- Type : `Array<{ id: string; name: string; color: string }>`
- Requis : oui
- Description : Liste des sites à afficher. `color` est un hex (ex : `'#0055ff'`). La couleur du site actuellement sélectionné est appliquée à toutes les tuiles.
### modelValue
- Type : `string`
- Description : `id` du site sélectionné (v-model). Sans `v-model`, le premier site est sélectionné par défaut (mode non contrôlé).
### id
- Type : `string`
- Description : Identifiant HTML du conteneur. Auto-généré si absent.
### groupClass / tileClass / labelClass
- Type : `string`
- Description : Classes Tailwind additionnelles fusionnées via `twMerge` sur, respectivement, le conteneur `<div role="radiogroup">`, chaque tuile et le libellé.
---
## Comportement
- **Toujours un site sélectionné.** Re-cliquer sur la tuile active ne la désélectionne pas.
- **Couleur partagée.** Le `background-color` de toutes les tuiles suit la couleur du site sélectionné. Changer de site met à jour instantanément la couleur de la bande.
- **Pas de gestion d'overflow** : les tuiles se répartissent proportionnellement sur toute la largeur disponible.
---
## Accessibilité
- `role="radiogroup"` sur le conteneur.
- `role="radio"` avec `aria-checked` sur chaque tuile.
- Roving `tabindex` : la tuile active est focusable (`tabindex="0"`), les autres sont exclues du tab order (`tabindex="-1"`).
- Activation par Enter/Space via l'élément `<button>`.
---
## Events
### update:modelValue
- Émis au clic sur une tuile.
- Retourne l'`id` (`string`) du site sélectionné.
### change
- Émis au clic sur une tuile, en complément de `update:modelValue`.
- Retourne l'objet `Site` complet (`{ id, name, color }`) utile pour déclencher des actions (appel API, filtrage) sans avoir à relire le tableau `sites` côté consommateur.
</docs>
<script setup lang="ts">
import { ref } from 'vue'
import MalioSiteSelector from '../../components/malio/site/SiteSelector.vue'
const sites = [
{ id: 'chatellerault', name: 'Châtellerault', color: '#0055ff' },
{ id: 'saint-jean', name: 'Saint-Jean', color: '#16a34a' },
{ id: 'pommevic', name: 'Pommevic', color: '#dc2626' },
]
const sitesTwo = [
{ id: 'nord', name: 'Usine Nord', color: '#7c3aed' },
{ id: 'sud', name: 'Usine Sud', color: '#ea580c' },
]
const sitesFive = [
{ id: 's1', name: 'Site 1', color: '#0ea5e9' },
{ id: 's2', name: 'Site 2', color: '#14b8a6' },
{ id: 's3', name: 'Site 3', color: '#f59e0b' },
{ id: 's4', name: 'Site 4', color: '#ec4899' },
{ id: 's5', name: 'Site 5', color: '#6366f1' },
]
const threeValue = ref('chatellerault')
const twoValue = ref('nord')
const fiveValue = ref('s3')
</script>

View File

@@ -12,6 +12,7 @@ export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './'),
'tiptap-markdown': path.resolve(__dirname, 'node_modules/tiptap-markdown/dist/tiptap-markdown.es.js'),
},
},
css: {
@@ -19,6 +20,17 @@ export default defineConfig({
plugins: [tailwindcss(), autoprefixer()],
},
},
ssr: {
noExternal: ['tiptap-markdown', /^@tiptap\//],
},
optimizeDeps: {
include: [
'tiptap-markdown',
'@tiptap/vue-3',
'@tiptap/starter-kit',
'@tiptap/extension-placeholder',
],
},
},
plugins: [HstVue()],
})

717
package-lock.json generated
View File

@@ -10,8 +10,13 @@
"dependencies": {
"@nuxt/icon": "^2.2.1",
"@nuxtjs/tailwindcss": "^6.14.0",
"@tiptap/extension-placeholder": "^3.22.5",
"@tiptap/pm": "^3.22.5",
"@tiptap/starter-kit": "^3.22.5",
"@tiptap/vue-3": "^3.22.5",
"maska": "^3.2.0",
"tailwind-merge": "^3.3.1"
"tailwind-merge": "^3.3.1",
"tiptap-markdown": "^0.9.0"
},
"devDependencies": {
"@histoire/plugin-vue": "^1.0.0-beta.1",
@@ -178,6 +183,7 @@
"integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.29.0",
"@babel/generator": "^7.29.0",
@@ -803,6 +809,7 @@
}
],
"license": "MIT",
"peer": true,
"engines": {
"node": ">=20.19.0"
},
@@ -843,6 +850,7 @@
}
],
"license": "MIT",
"peer": true,
"engines": {
"node": ">=20.19.0"
}
@@ -1553,6 +1561,32 @@
}
}
},
"node_modules/@floating-ui/core": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
"integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
"license": "MIT",
"dependencies": {
"@floating-ui/utils": "^0.2.11"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.7.6",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@floating-ui/core": "^1.7.5",
"@floating-ui/utils": "^0.2.11"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.11",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
"license": "MIT"
},
"node_modules/@histoire/app": {
"version": "1.0.0-beta.1",
"resolved": "https://registry.npmjs.org/@histoire/app/-/app-1.0.0-beta.1.tgz",
@@ -2636,6 +2670,7 @@
"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.1.tgz",
"integrity": "sha512-UjBFt72dnpc+83BV3OIbCT0YHLevJtgJCHpxMX0YRKWLDhhbcDdUse87GtsQBrjvOzK7WUNUYLDS/hQLYev5rA==",
"license": "MIT",
"peer": true,
"dependencies": {
"c12": "^3.3.3",
"consola": "^3.4.2",
@@ -2723,6 +2758,7 @@
"integrity": "sha512-S+wHJdYDuyk9I43Ej27y5BeWMZgi7R/UVql3b3qtT35d0fbpXW7fUenzhLRCCDC6O10sjguc6fcMcR9sMKvV8g==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/shared": "^3.5.27",
"defu": "^6.1.4",
@@ -5008,6 +5044,444 @@
"url": "https://opencollective.com/eslint"
}
},
"node_modules/@tiptap/core": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.22.5.tgz",
"integrity": "sha512-L1lhWz6ujGny8LduTJ7MBWYhzigwOvfUJUrJ7IzOJSuy3+OAzisdGDD1GV7LEO/hU0Hr2Mkm1wajRIHExvS9HQ==",
"license": "MIT",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/pm": "3.22.5"
}
},
"node_modules/@tiptap/extension-blockquote": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.22.5.tgz",
"integrity": "sha512-ajyP5W8fG5Hrru47T/eF3xMKOpNvWofgNJqBTeNuGl02sYxsy9a4EunyFxudsaZP9WW3VOD4SaIWr5+MqpbnOQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-bold": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.22.5.tgz",
"integrity": "sha512-l/uDtpJISiFFyfctvnODNWBN/XPZI1jVZRacTRDDnSn8+x6KQ7G2qgFYueU7KvVJGDFVT39Iio56mcFRG/Pozg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-bubble-menu": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.22.5.tgz",
"integrity": "sha512-yrNlFQQJY5MmhBpmD8tnmaSmyUQrEvgyPKa3bzVeWEhDSG1CW4A0ZSMx3hrA9yFO0HWfw3IJmvSCycEZQBalpQ==",
"license": "MIT",
"optional": true,
"dependencies": {
"@floating-ui/dom": "^1.0.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5",
"@tiptap/pm": "3.22.5"
}
},
"node_modules/@tiptap/extension-bullet-list": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.22.5.tgz",
"integrity": "sha512-cf54fG9AybU8NgPMv1TOcoqAkELeRc/VpnSCt/rIJZphWQx9nsFmrtkrlCatrIcCaGtNZYwlHlMnC5LVVMu0uA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extension-list": "3.22.5"
}
},
"node_modules/@tiptap/extension-code": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.22.5.tgz",
"integrity": "sha512-mwDNOJC9rYbDu/JcqrN4dbUQRklJU8Fuk2raxD/IvFw9qUIcPCmxQ2XT9UTKmZz/Ju7Kdy72fss6XpgWv6gLAQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-code-block": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.22.5.tgz",
"integrity": "sha512-d123kCfLdJTi4fue1m0+TNFztDkmIRSZGZmGu6H9KqwG5Q7IzjT9o8lzRsz+pXxYqHvqgYmXoEpM6srbzXx/Ag==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5",
"@tiptap/pm": "3.22.5"
}
},
"node_modules/@tiptap/extension-document": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.22.5.tgz",
"integrity": "sha512-8NJERd+pCtvSuEP4C4WMGYmRRCV12ePZL7bC+QUdFlbdXg+kNZS0zZ7hh879tYA0Kidbi8rWWD1Tx+H2ezkmMw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-dropcursor": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.22.5.tgz",
"integrity": "sha512-Mp40DaFrY3sEUVtFqmxrR0BmU4G3k8GCYYNGqNa9OqWv7BrcFDC03V2n3okESDKt4MKkzhQQmypq+ouLy8dLfA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extensions": "3.22.5"
}
},
"node_modules/@tiptap/extension-floating-menu": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.22.5.tgz",
"integrity": "sha512-dhem4sTPhyQgQ+pFp2Oud4k4FSQz9PVMgeQAC9288SmGwxBkJNveDAw6sKTMrumqDvwkJrtslXIupq9TZYQnzg==",
"license": "MIT",
"optional": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@floating-ui/dom": "^1.0.0",
"@tiptap/core": "3.22.5",
"@tiptap/pm": "3.22.5"
}
},
"node_modules/@tiptap/extension-gapcursor": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.22.5.tgz",
"integrity": "sha512-4WkMu7qqjbsm8hCQS+8X+la1wjriN0SKoRdvpfKH33qM50MB34tYJuGLAO+y7TTh4MMMco3AZCKPBL5JVMqNIg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extensions": "3.22.5"
}
},
"node_modules/@tiptap/extension-hard-break": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.22.5.tgz",
"integrity": "sha512-n0R2mUVYZU2AVbJhg/WcY9+zx690wVwvsItHJf0DrYbf1tCYHx+PRHUt/AoXk6u8BSmnkb8/FDziS8m3mjfpSg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-heading": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.22.5.tgz",
"integrity": "sha512-hjyEG4947PAhMBfP1G6B0QAh6+y9mp2C5BQmNjprA05/lQzDAT7KFZzNh8ZVp3ol6aICKq/N1gFOW9Dc/9FUOw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-horizontal-rule": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.22.5.tgz",
"integrity": "sha512-vUV0/ugIbXOc8SJib0h8UMhgcqZXWu/dkEhlswZN4VVven1o5enkfxEiDw+OyIJHi5rUkrdhsQ/KTxG/Xb7X8A==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5",
"@tiptap/pm": "3.22.5"
}
},
"node_modules/@tiptap/extension-italic": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.22.5.tgz",
"integrity": "sha512-4T8baSiLkeIymTgEwirxDFt5YgYofkP3m1+MGYdGy2HKcOK+1vpvlPhEO1X5qtZngtJW5S4+njKjinRg52A4PA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-link": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.22.5.tgz",
"integrity": "sha512-d671MvF3GPKoS2OVxjIlQ7hIE7MS3hREdR+d4cvnnoiLLD+ZJ6KgDnxmWqF0a1s4qxLWK2KxKRSOIfYGE31QWQ==",
"license": "MIT",
"dependencies": {
"linkifyjs": "^4.3.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5",
"@tiptap/pm": "3.22.5"
}
},
"node_modules/@tiptap/extension-list": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.22.5.tgz",
"integrity": "sha512-cVO3ZHCgxAWZ4zrFSs81FO2nyCk1wb2EHkpLpW98FzbJLkN9rDkazhW99P3HRWy/CvUldOT+8ecI1YrQtBojMg==",
"license": "MIT",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5",
"@tiptap/pm": "3.22.5"
}
},
"node_modules/@tiptap/extension-list-item": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.22.5.tgz",
"integrity": "sha512-W7uTmyKLhlsvuTPLv+8WwnsY+mlikBFIoLSvVcBaFt4MwpsZ+DeB6KQg02Y7tbtaAnG7rXu9Fvw2QORh2P728A==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extension-list": "3.22.5"
}
},
"node_modules/@tiptap/extension-list-keymap": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.22.5.tgz",
"integrity": "sha512-cGUnxJ0y515e1bVHNjUmbx7oWHoEon59w6BA5N2KwV9iW2mZZchlTX4yxJSOX+ixeVRChsa7YwC3Z1jUZ6AMEg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extension-list": "3.22.5"
}
},
"node_modules/@tiptap/extension-ordered-list": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.22.5.tgz",
"integrity": "sha512-OXdh4k4CNrukwiSdWdEQ49uvgnqvR0Z9aNSP4HI5/kZQ/Te1NtRtYCpUrzWyO/7CtjcCisXHti0o9C/TV8YMbQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extension-list": "3.22.5"
}
},
"node_modules/@tiptap/extension-paragraph": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.22.5.tgz",
"integrity": "sha512-52KCto4+XKpnBWpIufspWLyq4UWxAWC72ANPdGuIhbi72NRTabiTbTVN40uwGSPkyakeESG0/vKdWJCVvB4f0g==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-placeholder": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-3.22.5.tgz",
"integrity": "sha512-MZAohQ3FCS763BkhGXgaWRya6WruZjwRwEAkXP8vkxbERzl2OJRjniS4uXCWzAlRb3ttE103SnY7LMdM8FvsXw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extensions": "3.22.5"
}
},
"node_modules/@tiptap/extension-strike": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.22.5.tgz",
"integrity": "sha512-42WrrFK5gOom/0znH85x12Mw5IQ/6O6DWdyUWoRIrNA/qJpuHtU8oVU+bIgU2tuomMGHruRjIzgBQv5sBjEtww==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-text": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.22.5.tgz",
"integrity": "sha512-bzpDOdAEo1JeoVZDIyV0oY0jGXkEG+AzF70SzHoRSjOvFDtKWunyXf9eO1OnOr2/fmMcckT2qwUBNBMQplWBzw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extension-underline": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.22.5.tgz",
"integrity": "sha512-9ut09rJD0iEbS6sk7yd2j6IwuFDLTNmDEGTDLodvqAfi+bq7ddsTDv0YviXoZaA9sdHAdTEVr2ITy2m6WK5jpA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5"
}
},
"node_modules/@tiptap/extensions": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.22.5.tgz",
"integrity": "sha512-Ifg4MzKCj3uRqe3ieTwYnomu2y4p7EXr2avVSKZYfh12i2dyWe2Gkn1KuZDREANVE+gHqFlQjJRYzhJFwzSCrg==",
"license": "MIT",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.22.5",
"@tiptap/pm": "3.22.5"
}
},
"node_modules/@tiptap/pm": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.22.5.tgz",
"integrity": "sha512-Cr9Mv4igxvI2tKMiahw48sZxva3PfDzypErH8IB82N+9qa9n9ygVMt0BOaDg53hLKxEEVeYr2S/wCcJIVFgBTw==",
"license": "MIT",
"peer": true,
"dependencies": {
"prosemirror-changeset": "^2.3.0",
"prosemirror-commands": "^1.6.2",
"prosemirror-dropcursor": "^1.8.1",
"prosemirror-gapcursor": "^1.3.2",
"prosemirror-history": "^1.4.1",
"prosemirror-keymap": "^1.2.2",
"prosemirror-model": "^1.24.1",
"prosemirror-schema-list": "^1.5.0",
"prosemirror-state": "^1.4.3",
"prosemirror-tables": "^1.6.4",
"prosemirror-transform": "^1.10.2",
"prosemirror-view": "^1.38.1"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
}
},
"node_modules/@tiptap/starter-kit": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.22.5.tgz",
"integrity": "sha512-LZ/LYbwH6rnDi5DnRyagkuNsYAVyhM+yJvvz+ZuYA0JkPiTXJV86J5PWSKew8M0gVfMHcNVtKjfQCvViFCeIgw==",
"license": "MIT",
"dependencies": {
"@tiptap/core": "^3.22.5",
"@tiptap/extension-blockquote": "^3.22.5",
"@tiptap/extension-bold": "^3.22.5",
"@tiptap/extension-bullet-list": "^3.22.5",
"@tiptap/extension-code": "^3.22.5",
"@tiptap/extension-code-block": "^3.22.5",
"@tiptap/extension-document": "^3.22.5",
"@tiptap/extension-dropcursor": "^3.22.5",
"@tiptap/extension-gapcursor": "^3.22.5",
"@tiptap/extension-hard-break": "^3.22.5",
"@tiptap/extension-heading": "^3.22.5",
"@tiptap/extension-horizontal-rule": "^3.22.5",
"@tiptap/extension-italic": "^3.22.5",
"@tiptap/extension-link": "^3.22.5",
"@tiptap/extension-list": "^3.22.5",
"@tiptap/extension-list-item": "^3.22.5",
"@tiptap/extension-list-keymap": "^3.22.5",
"@tiptap/extension-ordered-list": "^3.22.5",
"@tiptap/extension-paragraph": "^3.22.5",
"@tiptap/extension-strike": "^3.22.5",
"@tiptap/extension-text": "^3.22.5",
"@tiptap/extension-underline": "^3.22.5",
"@tiptap/extensions": "^3.22.5",
"@tiptap/pm": "^3.22.5"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
}
},
"node_modules/@tiptap/vue-3": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@tiptap/vue-3/-/vue-3-3.22.5.tgz",
"integrity": "sha512-xwSXPwDjauIVktMXBMaNaSgFyq3O1sXcX1vWyHyyCFlq4+8ekq4uXbjkD6y6IhZyr/AQoRYnjgosus+apGyGuA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"optionalDependencies": {
"@tiptap/extension-bubble-menu": "^3.22.5",
"@tiptap/extension-floating-menu": "^3.22.5"
},
"peerDependencies": {
"@floating-ui/dom": "^1.0.0",
"@tiptap/core": "3.22.5",
"@tiptap/pm": "3.22.5",
"vue": "^3.0.0"
}
},
"node_modules/@tybys/wasm-util": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -5076,7 +5550,8 @@
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
"dev": true,
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@types/jsonfile": {
"version": "6.1.4",
@@ -5092,15 +5567,14 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
"integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/markdown-it": {
"version": "14.1.2",
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
"integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@types/linkify-it": "^5",
"@types/mdurl": "^2"
@@ -5120,7 +5594,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
"integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/node": {
@@ -5182,6 +5655,7 @@
"integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "8.56.0",
"@typescript-eslint/types": "8.56.0",
@@ -6026,6 +6500,7 @@
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
"integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/parser": "^7.29.0",
"@vue/compiler-core": "3.5.28",
@@ -6248,6 +6723,7 @@
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -6491,7 +6967,6 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true,
"license": "Python-2.0"
},
"node_modules/assertion-error": {
@@ -6752,6 +7227,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.9.0",
"caniuse-lite": "^1.0.30001759",
@@ -7147,6 +7623,7 @@
"resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
"integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"consola": "^3.2.3"
}
@@ -8347,6 +8824,7 @@
"integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
"hasInstallScript": true,
"license": "MIT",
"peer": true,
"bin": {
"esbuild": "bin/esbuild"
},
@@ -8416,6 +8894,7 @@
"integrity": "sha512-O0piBKY36YSJhlFSG8p9VUdPV/SxxS4FYDWVpr/9GJuMaepzwlf4J8I4ov1b+ySQfDTPhc3DtLaxcT1fN0yqCg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.2",
@@ -9816,6 +10295,7 @@
"integrity": "sha512-hzhFiqlL9Ko1B2APCamGIchM3Bjng5+CTX7kLL1q/NB2Lp4Uqpe4ZZicc7RU4CTCe4Vj7Q/Eb3UE/IacL1Ta5g==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@akryum/tinypool": "^0.3.1",
"@histoire/app": "^1.0.0-beta.1",
@@ -11250,12 +11730,17 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"uc.micro": "^2.0.0"
}
},
"node_modules/linkifyjs": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
"integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
"license": "MIT"
},
"node_modules/listhen": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/listhen/-/listhen-1.9.0.tgz",
@@ -11472,8 +11957,8 @@
"version": "14.1.1",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
"integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"argparse": "^2.0.1",
"entities": "^4.4.0",
@@ -11517,11 +12002,16 @@
"dev": true,
"license": "MIT"
},
"node_modules/markdown-it-task-lists": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
"integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==",
"license": "ISC"
},
"node_modules/markdown-it/node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
@@ -11578,7 +12068,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
"dev": true,
"license": "MIT"
},
"node_modules/media-typer": {
@@ -12235,6 +12724,7 @@
"integrity": "sha512-bl+0rFcT5Ax16aiWFBFPyWcsTob19NTZaDL5P6t0MQdK63AtgS6fN6fwvwdbXtnTk6/YdCzlmuLzXhSM22h0OA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@dxup/nuxt": "^0.3.2",
"@nuxt/cli": "^3.33.0",
@@ -12542,6 +13032,12 @@
"node": ">= 0.8.0"
}
},
"node_modules/orderedmap": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
"integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
"license": "MIT"
},
"node_modules/oxc-minify": {
"version": "0.112.0",
"resolved": "https://registry.npmjs.org/oxc-minify/-/oxc-minify-0.112.0.tgz",
@@ -12583,6 +13079,7 @@
"integrity": "sha512-7rQ3QdJwobMQLMZwQaPuPYMEF2fDRZwf51lZ//V+bA37nejjKW5ifMHbbCwvA889Y4RLhT+/wLJpPRhAoBaZYw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@oxc-project/types": "^0.112.0"
},
@@ -12958,6 +13455,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -13526,6 +14024,7 @@
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
"integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
"license": "MIT",
"peer": true,
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
@@ -13656,6 +14155,146 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/prosemirror-changeset": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.1.tgz",
"integrity": "sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==",
"license": "MIT",
"dependencies": {
"prosemirror-transform": "^1.0.0"
}
},
"node_modules/prosemirror-commands": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
"integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.0.0",
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.10.2"
}
},
"node_modules/prosemirror-dropcursor": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz",
"integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==",
"license": "MIT",
"dependencies": {
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.1.0",
"prosemirror-view": "^1.1.0"
}
},
"node_modules/prosemirror-gapcursor": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.1.tgz",
"integrity": "sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==",
"license": "MIT",
"dependencies": {
"prosemirror-keymap": "^1.0.0",
"prosemirror-model": "^1.0.0",
"prosemirror-state": "^1.0.0",
"prosemirror-view": "^1.0.0"
}
},
"node_modules/prosemirror-history": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.5.0.tgz",
"integrity": "sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==",
"license": "MIT",
"dependencies": {
"prosemirror-state": "^1.2.2",
"prosemirror-transform": "^1.0.0",
"prosemirror-view": "^1.31.0",
"rope-sequence": "^1.3.0"
}
},
"node_modules/prosemirror-keymap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
"integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
"license": "MIT",
"dependencies": {
"prosemirror-state": "^1.0.0",
"w3c-keyname": "^2.2.0"
}
},
"node_modules/prosemirror-markdown": {
"version": "1.13.4",
"resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.4.tgz",
"integrity": "sha512-D98dm4cQ3Hs6EmjK500TdAOew4Z03EV71ajEFiWra3Upr7diytJsjF4mPV2dW+eK5uNectiRj0xFxYI9NLXDbw==",
"license": "MIT",
"dependencies": {
"@types/markdown-it": "^14.0.0",
"markdown-it": "^14.0.0",
"prosemirror-model": "^1.25.0"
}
},
"node_modules/prosemirror-model": {
"version": "1.25.4",
"resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
"integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
"license": "MIT",
"dependencies": {
"orderedmap": "^2.0.0"
}
},
"node_modules/prosemirror-schema-list": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
"integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.0.0",
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.7.3"
}
},
"node_modules/prosemirror-state": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
"integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.0.0",
"prosemirror-transform": "^1.0.0",
"prosemirror-view": "^1.27.0"
}
},
"node_modules/prosemirror-tables": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz",
"integrity": "sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==",
"license": "MIT",
"dependencies": {
"prosemirror-keymap": "^1.2.3",
"prosemirror-model": "^1.25.4",
"prosemirror-state": "^1.4.4",
"prosemirror-transform": "^1.10.5",
"prosemirror-view": "^1.41.4"
}
},
"node_modules/prosemirror-transform": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.12.0.tgz",
"integrity": "sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.21.0"
}
},
"node_modules/prosemirror-view": {
"version": "1.41.8",
"resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.8.tgz",
"integrity": "sha512-TnKDdohEatgyZNGCDWIdccOHXhYloJwbwU+phw/a23KBvJIR9lWQWW7WHHK3vBdOLDNuF7TaX98GObUZOWkOnA==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.20.0",
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.1.0"
}
},
"node_modules/proto-list": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -13677,7 +14316,6 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
@@ -14129,6 +14767,7 @@
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
"integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/estree": "1.0.8"
},
@@ -14199,6 +14838,12 @@
}
}
},
"node_modules/rope-sequence": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
"integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
"license": "MIT"
},
"node_modules/rou3": {
"version": "0.7.12",
"resolved": "https://registry.npmjs.org/rou3/-/rou3-0.7.12.tgz",
@@ -15138,6 +15783,7 @@
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
"integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
@@ -15417,6 +16063,46 @@
"node": ">=14.0.0"
}
},
"node_modules/tiptap-markdown": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.9.0.tgz",
"integrity": "sha512-dKLQ9iiuGNgrlGVjrNauF/UBzWu4LYOx5pkD0jNkmQt/GOwfCJsBuzZTsf1jZ204ANHOm572mZ9PYvGh1S7tpQ==",
"license": "MIT",
"workspaces": [
"example"
],
"dependencies": {
"@types/markdown-it": "^13.0.7",
"markdown-it": "^14.1.0",
"markdown-it-task-lists": "^2.1.1",
"prosemirror-markdown": "^1.11.1"
},
"peerDependencies": {
"@tiptap/core": "^3.0.1"
}
},
"node_modules/tiptap-markdown/node_modules/@types/linkify-it": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz",
"integrity": "sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==",
"license": "MIT"
},
"node_modules/tiptap-markdown/node_modules/@types/markdown-it": {
"version": "13.0.9",
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.9.tgz",
"integrity": "sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==",
"license": "MIT",
"dependencies": {
"@types/linkify-it": "^3",
"@types/mdurl": "^1"
}
},
"node_modules/tiptap-markdown/node_modules/@types/mdurl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz",
"integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==",
"license": "MIT"
},
"node_modules/tldts": {
"version": "7.0.23",
"resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.23.tgz",
@@ -15628,6 +16314,7 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -15640,7 +16327,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
"dev": true,
"license": "MIT"
},
"node_modules/ufo": {
@@ -16029,6 +16715,7 @@
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"peer": true,
"dependencies": {
"napi-postinstall": "^0.3.0"
},
@@ -16324,6 +17011,7 @@
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.27.0",
"fdir": "^6.5.0",
@@ -16815,6 +17503,7 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
"integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.5.28",
"@vue/compiler-sfc": "3.5.28",
@@ -16861,6 +17550,7 @@
"integrity": "sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"debug": "^4.4.0",
"eslint-scope": "^8.2.0 || ^9.0.0",
@@ -16898,6 +17588,7 @@
"integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/devtools-api": "^6.6.4"
},
@@ -16912,7 +17603,6 @@
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
"dev": true,
"license": "MIT"
},
"node_modules/w3c-xmlserializer": {
@@ -17133,6 +17823,7 @@
"integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
"devOptional": true,
"license": "ISC",
"peer": true,
"bin": {
"yaml": "bin.mjs"
},

View File

@@ -6,6 +6,7 @@
"files": [
"app/**",
"nuxt.config.ts",
"tailwind.config.ts",
"README.md",
"COMPONENTS.md"
],
@@ -41,7 +42,12 @@
"dependencies": {
"@nuxt/icon": "^2.2.1",
"@nuxtjs/tailwindcss": "^6.14.0",
"@tiptap/extension-placeholder": "^3.22.5",
"@tiptap/pm": "^3.22.5",
"@tiptap/starter-kit": "^3.22.5",
"@tiptap/vue-3": "^3.22.5",
"maska": "^3.2.0",
"tailwind-merge": "^3.3.1"
"tailwind-merge": "^3.3.1",
"tiptap-markdown": "^0.9.0"
}
}

View File

@@ -1,12 +1,16 @@
import type {Config} from 'tailwindcss'
import {fileURLToPath} from 'node:url'
import {dirname, join} from 'node:path'
const dir = dirname(fileURLToPath(import.meta.url))
export default {
content: [
'./app/**/*.{vue,js,ts}',
'./app/**/*.story.{vue,js,ts}',
'./.playground/**/*.{vue,js,ts}',
'./histoire.setup.ts',
'./histoire.config.ts',
join(dir, 'app/**/*.{vue,js,ts}'),
join(dir, 'app/**/*.story.{vue,js,ts}'),
join(dir, '.playground/**/*.{vue,js,ts}'),
join(dir, 'histoire.setup.ts'),
join(dir, 'histoire.config.ts'),
],
theme: {
extend: {