@tekkare/romulus 0.1.175 → 0.1.177

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.174",
+  "version": "0.1.176",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/NoteEditor.vue

@@ -0,0 +1,639 @@
+<!--
+  RmNoteEditor - la redaction d'une note du panneau « Notes ».
+
+  Une note n'est pas du texte libre : elle est faite de blocs typés que
+  RmNotes rend chacun a sa maniere (un encadre, un exemple en chasse fixe,
+  une liste de definitions, un renvoi vers un ecran). Un champ de texte riche
+  ordinaire produirait du HTML, que le panneau ne lit pas, et perdrait les
+  encadres des la premiere correction.
+
+  L'editeur travaille donc sur la meme structure que le panneau : une ligne
+  par bloc, son genre choisi dans une liste, et une mise en page qui ressemble
+  au rendu final. Ce qu'on voit en ecrivant est ce qui sortira.
+
+  Le gras est la seule mise en forme dans le texte, parce que c'est la seule
+  que le panneau connait. Un bouton le pose sur la selection, plutot que le
+  seul raccourci du navigateur : le raccourci reste, mais rien ne le montre, et
+  une barre de mise en forme se cherche la ou elle se voit. Le collage est
+  force en texte brut, sans quoi une copie depuis Word ramenerait des styles
+  que la note ne saura pas rendre.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { RmNoteBlock, RmNoteSection } from './Notes.vue'
+
+const props = withDefaults(defineProps<{
+  /** Etiquette posee au-dessus de l'editeur. */
+  label?: string
+  disabled?: boolean
+  lang?: 'fr' | 'en'
+}>(), {
+  label: undefined,
+  disabled: false,
+  lang: 'fr',
+})
+
+const model = defineModel<RmNoteSection[]>({ default: () => [] })
+
+const WORDS = {
+  fr: {
+    bold: 'Gras',
+    hint: 'Le gras porte sur la sélection de la zone où vous écrivez.',
+    add: 'Ajouter un bloc',
+    up: 'Monter le bloc',
+    down: 'Descendre le bloc',
+    remove: 'Supprimer le bloc',
+    addItem: 'Ajouter une ligne',
+    removeItem: 'Supprimer la ligne',
+    empty: 'Cette note est vide. Ajoutez un premier bloc.',
+    sectionTitle: 'Titre de section',
+    term: 'Terme',
+    def: 'Définition',
+    linkTo: 'Chemin (/hubr/...)',
+    linkLabel: 'Libellé du renvoi',
+    kinds: {
+      text: 'Paragraphe',
+      list: 'Liste à puces',
+      terms: 'Définitions',
+      callout: 'Encadré',
+      example: 'Exemple',
+      section: 'Titre de section',
+      link: 'Renvoi vers un écran',
+    },
+    tones: { info: 'Information', warning: 'Attention' },
+  },
+  en: {
+    bold: 'Bold',
+    hint: 'Bold applies to the selection in the field you are writing in.',
+    add: 'Add a block',
+    up: 'Move block up',
+    down: 'Move block down',
+    remove: 'Remove block',
+    addItem: 'Add a line',
+    removeItem: 'Remove line',
+    empty: 'This note is empty. Add a first block.',
+    sectionTitle: 'Section title',
+    term: 'Term',
+    def: 'Definition',
+    linkTo: 'Path (/hubr/...)',
+    linkLabel: 'Link label',
+    kinds: {
+      text: 'Paragraph',
+      list: 'Bulleted list',
+      terms: 'Definitions',
+      callout: 'Callout',
+      example: 'Example',
+      section: 'Section title',
+      link: 'Link to a screen',
+    },
+    tones: { info: 'Information', warning: 'Warning' },
+  },
+} as const
+
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+type RowKind = 'section' | 'text' | 'list' | 'terms' | 'callout' | 'example' | 'link'
+
+/**
+ * Un champ ou le gras est permis.
+ *
+ * `text` porte le balisage (`**gras**`), `html` ce que la zone editable
+ * affiche. `html` n'est jamais reecrit pendant la frappe : le remplacer
+ * replacerait le curseur au debut du champ a chaque lettre.
+ */
+interface Field { text: string, html: string }
+
+interface Row {
+  key: number
+  kind: RowKind
+  /** section */
+  title: string
+  /** text, callout */
+  body: Field
+  /** example */
+  plain: string
+  tone: 'info' | 'warning'
+  /** list */
+  items: Field[]
+  /** terms */
+  terms: { term: string, def: string }[]
+  /** link */
+  to: string
+  label: string
+}
+
+let seq = 0
+
+function field(text = ''): Field {
+  return { text, html: toHtml(text) }
+}
+
+function blankRow(kind: RowKind): Row {
+  return {
+    key: ++seq,
+    kind,
+    title: '',
+    body: field(),
+    plain: '',
+    tone: 'info',
+    items: kind === 'list' ? [field()] : [],
+    terms: kind === 'terms' ? [{ term: '', def: '' }] : [],
+    to: '',
+    label: '',
+  }
+}
+
+const escapeHtml = (text: string) =>
+  text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+/** `**gras**` vers la zone editable. Rien d'autre n'est interprete. */
+function toHtml(text: string) {
+  return escapeHtml(text ?? '')
+    .split(/(\*\*[^*]+\*\*)/g)
+    .filter(Boolean)
+    .map(chunk =>
+      chunk.startsWith('**') && chunk.endsWith('**')
+        ? `<b>${chunk.slice(2, -2)}</b>`
+        : chunk)
+    .join('')
+}
+
+/**
+ * La zone editable vers le balisage.
+ *
+ * On parcourt les noeuds plutot que d'eplucher une chaine : le navigateur
+ * produit `<b>`, `<strong>`, parfois les deux imbriques, et une expression
+ * reguliere sur du HTML se trompe des le premier cas tordu. Tout ce qui n'est
+ * ni du texte ni du gras est aplati : la note ne sait rendre que ces deux la.
+ */
+function fromHtml(node: Node, bold = false): string {
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = (node.textContent ?? '').replace(/\s+/g, ' ')
+    if (!text.trim()) return text
+    return bold ? `**${text.trim()}**` : text
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return ''
+
+  const element = node as HTMLElement
+  const tag = element.tagName.toLowerCase()
+  if (tag === 'br') return ' '
+
+  const strong = bold || tag === 'b' || tag === 'strong'
+  let out = ''
+  for (const child of Array.from(element.childNodes)) out += fromHtml(child, strong)
+  // Deux `**gras**` colles se relisent comme un seul : on les recolle.
+  return out.replace(/\*\*\*\*/g, '')
+}
+
+/** Ce qu'une zone editable vient de produire, en balisage. */
+function readEditable(element: HTMLElement) {
+  return fromHtml(element).replace(/\s+/g, ' ').trim()
+}
+
+/* --- le modele, en lignes --- */
+
+function toRows(sections: RmNoteSection[]): Row[] {
+  const rows: Row[] = []
+
+  for (const section of sections ?? []) {
+    if (section.title) {
+      const row = blankRow('section')
+      row.title = section.title
+      rows.push(row)
+    }
+    for (const block of section.blocks ?? []) rows.push(toRow(block))
+  }
+
+  return rows
+}
+
+function toRow(block: RmNoteBlock): Row {
+  if (block.type === 'list') {
+    const row = blankRow('list')
+    row.items = (block.items ?? []).map(item => field(item))
+    if (!row.items.length) row.items = [field()]
+    return row
+  }
+  if (block.type === 'terms') {
+    const row = blankRow('terms')
+    row.terms = (block.items ?? []).map(item => ({ term: item.term, def: item.def ?? '' }))
+    if (!row.terms.length) row.terms = [{ term: '', def: '' }]
+    return row
+  }
+  if (block.type === 'callout') {
+    const row = blankRow('callout')
+    row.body = field(block.text)
+    row.tone = block.tone ?? 'info'
+    return row
+  }
+  if (block.type === 'example') {
+    const row = blankRow('example')
+    row.plain = block.text
+    return row
+  }
+  if (block.type === 'link') {
+    const row = blankRow('link')
+    row.to = block.to
+    row.label = block.label
+    return row
+  }
+
+  const row = blankRow('text')
+  row.body = field(block.text)
+  return row
+}
+
+/**
+ * Les lignes, regroupees en sections.
+ *
+ * Un titre de section ouvre la suivante ; ce qui le precede forme la section
+ * d'entete, sans titre. Une ligne vide ne sort pas : un bloc qu'on ajoute
+ * puis qu'on laisse en blanc ne doit pas apparaitre dans le panneau.
+ */
+function toSections(rows: Row[]): RmNoteSection[] {
+  const sections: RmNoteSection[] = []
+  let current: RmNoteSection = { blocks: [] }
+
+  for (const row of rows) {
+    if (row.kind === 'section') {
+      if (current.blocks.length) sections.push(current)
+      current = { title: row.title.trim(), blocks: [] }
+      continue
+    }
+    const block = toBlock(row)
+    if (block) current.blocks.push(block)
+  }
+  if (current.blocks.length) sections.push(current)
+
+  return sections
+}
+
+function toBlock(row: Row): RmNoteBlock | null {
+  if (row.kind === 'list') {
+    const items = row.items.map(item => item.text.trim()).filter(Boolean)
+    return items.length ? { type: 'list', items } : null
+  }
+  if (row.kind === 'terms') {
+    const items = row.terms
+      .map(item => ({ term: item.term.trim(), def: item.def.trim() }))
+      .filter(item => item.term)
+      .map(item => (item.def ? { term: item.term, def: item.def } : { term: item.term }))
+    return items.length ? { type: 'terms', items } : null
+  }
+  if (row.kind === 'callout') {
+    const text = row.body.text.trim()
+    return text ? { type: 'callout', text, tone: row.tone } : null
+  }
+  if (row.kind === 'example') {
+    const text = row.plain.trim()
+    return text ? { type: 'example', text } : null
+  }
+  if (row.kind === 'link') {
+    const to = row.to.trim()
+    const label = row.label.trim()
+    return to && label ? { type: 'link', to, label } : null
+  }
+  const text = row.body.text.trim()
+  return text ? { type: 'text', text } : null
+}
+
+const rows = ref<Row[]>(toRows(model.value))
+
+/**
+ * Le modele ne redescend dans les lignes que s'il a change ailleurs qu'ici.
+ * Sans cette garde, chaque frappe reconstruirait les lignes, donc les zones
+ * editables, donc perdrait le curseur.
+ */
+const lastEmitted = ref<RmNoteSection[] | null>(null)
+
+watch(model, (value) => {
+  if (value === lastEmitted.value) return
+  rows.value = toRows(value)
+})
+
+function emitRows() {
+  const sections = toSections(rows.value)
+  lastEmitted.value = sections
+  model.value = sections
+}
+
+/* --- edition --- */
+
+/**
+ * La zone ou l'on ecrit, retenue au focus.
+ *
+ * Le bouton « Gras » est hors des zones editables : sans cette reference, il
+ * ne saurait pas sur quel texte agir, et cliquer dessus aurait deja fait
+ * perdre la selection (d'ou le `mousedown` retenu cote modele).
+ */
+const active = ref<{ el: HTMLElement, field: Field } | null>(null)
+
+function onEditable(event: Event, target: Field) {
+  target.text = readEditable(event.target as HTMLElement)
+  emitRows()
+}
+
+function onFocus(event: FocusEvent, target: Field) {
+  active.value = { el: event.target as HTMLElement, field: target }
+}
+
+/**
+ * `execCommand` est deprecie et sans remplacant : l'API Editing Context n'est
+ * implementee nulle part, et tous les navigateurs le portent encore. Ecrire a
+ * la main « mettre en gras la selection » serait une bibliotheque a soi seul.
+ */
+function bold() {
+  const target = active.value
+  if (props.disabled || !target) return
+  target.el.focus()
+  document.execCommand('bold')
+  target.field.text = readEditable(target.el)
+  emitRows()
+}
+
+/** Le collage entre en texte brut : un collage riche ramene du HTML illisible. */
+function onPaste(event: ClipboardEvent) {
+  event.preventDefault()
+  const text = event.clipboardData?.getData('text/plain') ?? ''
+  document.execCommand('insertText', false, text.replace(/\s+/g, ' '))
+}
+
+function changeKind(row: Row, kind: RowKind) {
+  if (row.kind === kind) return
+  // Le texte deja saisi suit le changement de genre quand les deux en
+  // portent : passer un paragraphe en encadre ne doit pas l'effacer.
+  const carried = row.kind === 'example' ? row.plain : row.body.text
+  const next = blankRow(kind)
+  next.key = row.key
+  if (kind === 'example') next.plain = carried
+  else if (kind === 'section') next.title = carried.replace(/\*\*/g, '')
+  else if (kind === 'list') next.items = [field(carried)]
+  else if (kind !== 'link' && kind !== 'terms') next.body = field(carried)
+
+  rows.value = rows.value.map(item => (item.key === row.key ? next : item))
+  emitRows()
+}
+
+function addRow(kind: RowKind) {
+  rows.value = [...rows.value, blankRow(kind)]
+  emitRows()
+}
+
+function move(index: number, delta: number) {
+  const next = [...rows.value]
+  const target = index + delta
+  if (target < 0 || target >= next.length) return
+  const [row] = next.splice(index, 1)
+  next.splice(target, 0, row!)
+  rows.value = next
+  emitRows()
+}
+
+function removeRow(index: number) {
+  rows.value = rows.value.filter((_, position) => position !== index)
+  emitRows()
+}
+
+function addItem(row: Row) {
+  if (row.kind === 'list') row.items = [...row.items, field()]
+  else row.terms = [...row.terms, { term: '', def: '' }]
+  emitRows()
+}
+
+function removeItem(row: Row, index: number) {
+  if (row.kind === 'list') row.items = row.items.filter((_, position) => position !== index)
+  else row.terms = row.terms.filter((_, position) => position !== index)
+  emitRows()
+}
+
+const KINDS: RowKind[] = ['text', 'list', 'terms', 'callout', 'example', 'section', 'link']
+</script>
+
+<template>
+  <div class="rm-note-editor" :class="{ 'rm-note-editor--disabled': disabled }">
+    <div v-if="label || !disabled" class="rm-note-editor__head">
+      <span v-if="label" class="rm-note-editor__label">{{ label }}</span>
+      <span class="rm-note-editor__tools">
+        <span class="rm-note-editor__hint">{{ T.hint }}</span>
+        <button
+          type="button"
+          class="rm-note-editor__bold"
+          :disabled="disabled || !active"
+          :title="T.bold"
+          :aria-label="T.bold"
+          @mousedown.prevent
+          @click="bold()"
+        >
+          <RmIcon name="TextB" :size="14" weight="bold" />
+        </button>
+      </span>
+    </div>
+
+    <p v-if="!rows.length" class="rm-note-editor__empty">{{ T.empty }}</p>
+
+    <div v-else class="rm-note-editor__rows">
+      <section
+        v-for="(row, index) in rows"
+        :key="row.key"
+        class="rm-note-editor__row"
+        :class="`rm-note-editor__row--${row.kind}`"
+      >
+        <header class="rm-note-editor__bar">
+          <select
+            class="rm-note-editor__kind"
+            :value="row.kind"
+            :disabled="disabled"
+            :aria-label="T.add"
+            @change="changeKind(row, ($event.target as HTMLSelectElement).value as RowKind)"
+          >
+            <!-- `selected` en plus de la valeur du champ : le navigateur pose la
+                 valeur avant que les options existent, et la liste repartirait
+                 sur la premiere de toutes. -->
+            <option v-for="kind in KINDS" :key="kind" :value="kind" :selected="kind === row.kind">
+              {{ T.kinds[kind] }}
+            </option>
+          </select>
+
+          <select
+            v-if="row.kind === 'callout'"
+            v-model="row.tone"
+            class="rm-note-editor__kind"
+            :disabled="disabled"
+            :aria-label="T.kinds.callout"
+            @change="emitRows()"
+          >
+            <option value="info">{{ T.tones.info }}</option>
+            <option value="warning">{{ T.tones.warning }}</option>
+          </select>
+
+          <span class="rm-note-editor__spacer" />
+
+          <button
+            type="button"
+            class="rm-note-editor__act"
+            :disabled="disabled || index === 0"
+            :title="T.up"
+            :aria-label="T.up"
+            @click="move(index, -1)"
+          >
+            <RmIcon name="ArrowUp" :size="14" />
+          </button>
+          <button
+            type="button"
+            class="rm-note-editor__act"
+            :disabled="disabled || index === rows.length - 1"
+            :title="T.down"
+            :aria-label="T.down"
+            @click="move(index, 1)"
+          >
+            <RmIcon name="ArrowDown" :size="14" />
+          </button>
+          <button
+            type="button"
+            class="rm-note-editor__act rm-note-editor__act--danger"
+            :disabled="disabled"
+            :title="T.remove"
+            :aria-label="T.remove"
+            @click="removeRow(index)"
+          >
+            <RmIcon name="Trash" :size="14" />
+          </button>
+        </header>
+
+        <input
+          v-if="row.kind === 'section'"
+          v-model="row.title"
+          class="rm-note-editor__input rm-note-editor__input--section"
+          :placeholder="T.sectionTitle"
+          :disabled="disabled"
+          @input="emitRows()"
+        >
+
+        <textarea
+          v-else-if="row.kind === 'example'"
+          v-model="row.plain"
+          class="rm-note-editor__input rm-note-editor__input--example"
+          rows="2"
+          :disabled="disabled"
+          @input="emitRows()"
+        />
+
+        <div v-else-if="row.kind === 'link'" class="rm-note-editor__pair">
+          <input
+            v-model="row.to"
+            class="rm-note-editor__input"
+            :placeholder="T.linkTo"
+            :disabled="disabled"
+            @input="emitRows()"
+          >
+          <input
+            v-model="row.label"
+            class="rm-note-editor__input"
+            :placeholder="T.linkLabel"
+            :disabled="disabled"
+            @input="emitRows()"
+          >
+        </div>
+
+        <ul v-else-if="row.kind === 'list'" class="rm-note-editor__items">
+          <li v-for="(item, itemIndex) in row.items" :key="itemIndex" class="rm-note-editor__item">
+            <span class="rm-note-editor__bullet">•</span>
+            <div
+              class="rm-note-editor__editable"
+              :contenteditable="!disabled"
+              role="textbox"
+              @input="onEditable($event, item)"
+              @focus="onFocus($event, item)"
+              @paste="onPaste"
+              v-html="item.html"
+            />
+            <button
+              type="button"
+              class="rm-note-editor__act"
+              :disabled="disabled"
+              :title="T.removeItem"
+              :aria-label="T.removeItem"
+              @click="removeItem(row, itemIndex)"
+            >
+              <RmIcon name="X" :size="12" />
+            </button>
+          </li>
+          <li>
+            <button type="button" class="rm-note-editor__more" :disabled="disabled" @click="addItem(row)">
+              <RmIcon name="Plus" :size="12" />
+              {{ T.addItem }}
+            </button>
+          </li>
+        </ul>
+
+        <ul v-else-if="row.kind === 'terms'" class="rm-note-editor__items">
+          <li v-for="(item, itemIndex) in row.terms" :key="itemIndex" class="rm-note-editor__item">
+            <input
+              v-model="item.term"
+              class="rm-note-editor__input rm-note-editor__input--term"
+              :placeholder="T.term"
+              :disabled="disabled"
+              @input="emitRows()"
+            >
+            <input
+              v-model="item.def"
+              class="rm-note-editor__input"
+              :placeholder="T.def"
+              :disabled="disabled"
+              @input="emitRows()"
+            >
+            <button
+              type="button"
+              class="rm-note-editor__act"
+              :disabled="disabled"
+              :title="T.removeItem"
+              :aria-label="T.removeItem"
+              @click="removeItem(row, itemIndex)"
+            >
+              <RmIcon name="X" :size="12" />
+            </button>
+          </li>
+          <li>
+            <button type="button" class="rm-note-editor__more" :disabled="disabled" @click="addItem(row)">
+              <RmIcon name="Plus" :size="12" />
+              {{ T.addItem }}
+            </button>
+          </li>
+        </ul>
+
+        <div
+          v-else
+          class="rm-note-editor__editable"
+          :class="{
+            'rm-note-editor__editable--info': row.kind === 'callout' && row.tone === 'info',
+            'rm-note-editor__editable--warning': row.kind === 'callout' && row.tone === 'warning',
+          }"
+          :contenteditable="!disabled"
+          role="textbox"
+          @input="onEditable($event, row.body)"
+          @focus="onFocus($event, row.body)"
+          @paste="onPaste"
+          v-html="row.body.html"
+        />
+      </section>
+    </div>
+
+    <div class="rm-note-editor__add">
+      <button
+        v-for="kind in KINDS"
+        :key="kind"
+        type="button"
+        class="rm-note-editor__more"
+        :disabled="disabled"
+        @click="addRow(kind)"
+      >
+        <RmIcon name="Plus" :size="12" />
+        {{ T.kinds[kind] }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-note-editor{display:flex;flex-direction:column;font-family:var(--font-sans);gap:var(--space-8)}.rm-note-editor--disabled{opacity:.6}.rm-note-editor__head{align-items:baseline;display:flex;gap:var(--space-8);justify-content:space-between}.rm-note-editor__label{color:var(--text-secondary);font-size:var(--font-13);font-weight:var(--weight-medium)}.rm-note-editor__tools{align-items:center;display:inline-flex;gap:var(--space-8)}.rm-note-editor__bold{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:inline-flex;height:26px;justify-content:center;padding:0;width:26px}.rm-note-editor__bold:hover:not(:disabled){background:var(--bg-hover);color:var(--color-primary)}.rm-note-editor__bold:disabled{cursor:default;opacity:.4}.rm-note-editor__hint{color:var(--text-muted);font-size:var(--font-11)}.rm-note-editor__empty{border:1px dashed var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);font-size:var(--font-13);margin:0;padding:var(--space-16);text-align:center}.rm-note-editor__rows{display:flex;flex-direction:column;gap:var(--space-8)}.rm-note-editor__row{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-8)}.rm-note-editor__bar{align-items:center;display:flex;gap:var(--space-4)}.rm-note-editor__spacer{flex:1}.rm-note-editor__kind{background:var(--bg-surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:inherit;font-size:var(--font-11);height:26px;padding:0 var(--space-6)}.rm-note-editor__act{align-items:center;background:none;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;display:inline-flex;height:24px;justify-content:center;padding:0;width:24px}.rm-note-editor__act:hover:not(:disabled){background:var(--bg-hover);color:var(--color-secondary)}.rm-note-editor__act--danger:hover:not(:disabled){color:var(--color-danger)}.rm-note-editor__act:disabled{cursor:default;opacity:.4}.rm-note-editor__editable,.rm-note-editor__input{background:var(--bg-surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:var(--font-13);line-height:1.5;min-height:30px;outline:none;padding:var(--space-6) var(--space-8)}.rm-note-editor__editable:focus,.rm-note-editor__input:focus{border-color:var(--color-primary)}.rm-note-editor__input--section{font-size:var(--font-11);font-weight:var(--weight-bold);letter-spacing:.06em;text-transform:uppercase}.rm-note-editor__input--example{font-family:var(--font-mono,monospace);font-size:var(--font-12);resize:vertical}.rm-note-editor__editable--info{background:var(--bg-hover);border-color:var(--color-info,var(--color-secondary))}.rm-note-editor__editable--warning{background:var(--bg-surface-3);border-color:var(--color-warning)}.rm-note-editor__pair{display:flex;gap:var(--space-6)}.rm-note-editor__pair .rm-note-editor__input{flex:1;min-width:0}.rm-note-editor__items{display:flex;flex-direction:column;gap:var(--space-4);list-style:none;margin:0;padding:0}.rm-note-editor__item{align-items:center;display:flex;gap:var(--space-6)}.rm-note-editor__item .rm-note-editor__editable,.rm-note-editor__item .rm-note-editor__input{flex:1;min-width:0}.rm-note-editor__input--term{flex:0 0 30%;font-weight:var(--weight-semibold)}.rm-note-editor__bullet{color:var(--text-muted)}.rm-note-editor__add{display:flex;flex-wrap:wrap;gap:var(--space-4)}.rm-note-editor__more{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-11);gap:var(--space-4);padding:var(--space-4) var(--space-8)}.rm-note-editor__more:hover:not(:disabled){background:var(--bg-hover);color:var(--color-primary)}.rm-note-editor__more:disabled{cursor:default;opacity:.4}
+</style>

package/dist/runtime/components/Notes.vue

@@ -83,16 +83,23 @@ const props = withDefaults(defineProps<{
   description?: string
   /** Pastille d'auteur en haut a droite (« TEKKARE »). Vide : pas de pastille. */
   badge?: string
+  /**
+   * Pose un crayon sur chaque note, qui emet `edit`. Reserve a l'equipe qui
+   * redige : le panneau ne decide pas du droit, il l'affiche. L'ecriture est
+   * revalidee la ou elle a lieu, jamais sur la presence du bouton.
+   */
+  editable?: boolean
   lang?: 'fr' | 'en'
 }>(), {
   categories: () => [],
   title: 'Notes',
   description: undefined,
   badge: undefined,
+  editable: false,
   lang: 'fr',
 })
 
-const emit = defineEmits<{ navigate: [to: string] }>()
+const emit = defineEmits<{ navigate: [to: string], edit: [id: string] }>()
 
 const WORDS = {
   fr: {
@@ -102,6 +109,7 @@ const WORDS = {
     reading: 'min de lecture',
     expand: 'Déplier la note',
     collapse: 'Replier la note',
+    edit: 'Modifier la note',
     emptyTitle: 'Aucune note pour cet écran',
     emptyText: "Les notes sont rattachées à la page affichée : changez d'écran pour en voir d'autres.",
     noMatch: 'Aucune note ne correspond',
@@ -114,6 +122,7 @@ const WORDS = {
     reading: 'min read',
     expand: 'Expand note',
     collapse: 'Collapse note',
+    edit: 'Edit note',
     emptyTitle: 'No note for this screen',
     emptyText: 'Notes belong to the page on display: switch screens to see others.',
     noMatch: 'No note matches',
@@ -316,6 +325,17 @@ function onLink(to: string) {
             </span>
           </button>
 
+          <button
+            v-if="editable"
+            type="button"
+            class="rm-notes__caret"
+            :aria-label="T.edit"
+            :title="T.edit"
+            @click="emit('edit', note.id)"
+          >
+            <RmIcon name="PencilSimple" :size="14" />
+          </button>
+
           <button
             type="button"
             class="rm-notes__caret"

package/dist/runtime/components/Popover.vue

@@ -60,14 +60,22 @@ function place() {
 
   const wanted = props.align === 'start' ? box.left : box.right - size.width
   const left = Math.max(EDGE, Math.min(wanted, window.innerWidth - size.width - EDGE))
-  const below = box.bottom + 6
-  const above = box.top - size.height - 6
-  const top = below + size.height > window.innerHeight - EDGE && above > EDGE ? above : below
+
+  // Le cote le plus large l'emporte : sous le bouton tant que ca tient, au
+  // dessus sinon. Une liste plus haute que la fenetre ne peut tenir nulle
+  // part : elle prend alors la place disponible et defile, plutot que de
+  // sortir par le bas comme le faisait un simple basculement.
+  const room = { below: window.innerHeight - box.bottom - 6 - EDGE, above: box.top - 6 - EDGE }
+  const below = room.below >= size.height || room.below >= room.above
+  const max = Math.max(120, Math.round(below ? room.below : room.above))
+  const height = Math.min(size.height, max)
+  const top = below ? box.bottom + 6 : box.top - 6 - height
 
   style.value = {
     position: 'fixed',
     left: `${Math.round(left)}px`,
-    top: `${Math.round(top)}px`,
+    top: `${Math.round(Math.max(EDGE, top))}px`,
+    maxHeight: `${max}px`,
   }
 }
 
@@ -133,5 +141,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-pop{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:min(92vw,360px);min-width:220px;padding:var(--space-12);z-index:var(--z-drawer)}.rm-pop-enter-active,.rm-pop-leave-active{transition:transform var(--duration-fast) var(--ease-out),opacity var(--duration-fast) linear}.rm-pop-enter-from,.rm-pop-leave-to{opacity:0;transform:translateY(-4px)}@media (prefers-reduced-motion:reduce){.rm-pop-enter-active,.rm-pop-leave-active{transition:opacity var(--duration-fast) linear}.rm-pop-enter-from,.rm-pop-leave-to{transform:none}}
+.rm-pop{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);box-sizing:border-box;max-width:min(92vw,360px);min-width:220px;overflow-y:auto;padding:var(--space-12);z-index:var(--z-drawer)}.rm-pop-enter-active,.rm-pop-leave-active{transition:transform var(--duration-fast) var(--ease-out),opacity var(--duration-fast) linear}.rm-pop-enter-from,.rm-pop-leave-to{opacity:0;transform:translateY(-4px)}@media (prefers-reduced-motion:reduce){.rm-pop-enter-active,.rm-pop-leave-active{transition:opacity var(--duration-fast) linear}.rm-pop-enter-from,.rm-pop-leave-to{transform:none}}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.175",
+  "version": "0.1.177",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",