@tekkare/romulus 0.1.229 → 0.1.231

package/dist/module.json

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

package/dist/runtime/components/DocumentViewer.vue

@@ -0,0 +1,521 @@
+<!--
+  RmDocumentViewer - un document (PDF ou page HTML) affiche dans la page, avec
+  une recherche dans son texte.
+
+  Un document pose dans une `<iframe>` passe par le lecteur du navigateur : la
+  page n'a aucune prise dessus, et quand le fichier vient d'un autre domaine
+  elle ne peut meme pas lire son texte. Pour un compte rendu de deux cents
+  pages, la seule recherche possible etait Ctrl+F, que personne ne pense a
+  faire dans un tiroir, et qui ne savait rien des termes deja tapes dans la
+  page.
+
+  Le composant lit le fichier lui-meme et choisit le rendu sur son contenu,
+  pas sur son type annonce (les copies S3 sortent en `binary/octet-stream`,
+  et un proxy qui sert « du PDF » peut servir du HTML) :
+  - un PDF passe par pdf.js : pages dessinees a la demande, couche de texte ;
+  - une page HTML va dans une iframe `srcdoc` sandboxee SANS `allow-scripts`
+    (aucun script du document ne tourne) mais avec `allow-same-origin`, ce
+    qui laisse le composant parcourir son texte et y poser des surlignages
+    (API CSS Custom Highlight, le DOM du document n'est pas touche).
+
+  La barre en tete cherche dans le texte : surlignage de toutes les
+  occurrences, compteur, precedent / suivant. `query` sert de terme de
+  depart, pour ouvrir le document directement sur les passages qui l'ont fait
+  remonter dans une liste de resultats. Une liste cherche chaque terme
+  separement ; une chaine, et tout ce que l'utilisateur tape ensuite, cherche
+  une expression. La recherche ignore la casse et les accents, comme
+  `RmTextHighlight`.
+
+  Le fichier est lu par `fetch` : il doit venir de la meme origine ou d'un
+  serveur qui autorise CORS. Une app qui affiche des documents tiers les fait
+  passer par son propre proxy, et donne l'adresse d'origine en `base` pour
+  que les liens relatifs d'une page HTML pointent au bon endroit. Si le
+  fichier ne se lit pas (404, CORS, ni PDF ni HTML), le composant emet
+  `error` : a l'appelant de retomber sur une `<iframe>`.
+
+  pdf.js (~1 Mo avec son worker) n'est charge que pour un PDF.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Adresse du document, lue par `fetch`. */
+  src: string
+  /** Terme(s) cherche(s) a l'ouverture. Une liste cherche chaque terme. */
+  query?: string | readonly string[] | null
+  /**
+   * Adresse d'origine d'une page HTML servie par un proxy : sert de `<base>`
+   * aux liens relatifs. Sans effet sur un PDF.
+   */
+  base?: string | null
+  lang?: 'fr' | 'en'
+}>(), {
+  query: null,
+  base: null,
+  lang: 'fr',
+})
+
+const emit = defineEmits<{ error: [error: unknown] }>()
+
+const WORDS = {
+  fr: {
+    search: 'Rechercher dans le document',
+    previous: 'Occurrence précédente',
+    next: 'Occurrence suivante',
+    none: 'Aucun résultat',
+    loading: 'Chargement du document…',
+    failed: 'Le document ne s’affiche pas.',
+    count: (current: number, total: number) => `${current} sur ${total}`,
+  },
+  en: {
+    search: 'Search in document',
+    previous: 'Previous match',
+    next: 'Next match',
+    none: 'No match',
+    loading: 'Loading document…',
+    failed: 'The document cannot be displayed.',
+    count: (current: number, total: number) => `${current} of ${total}`,
+  },
+} as const
+
+const words = computed(() => WORDS[props.lang])
+
+const root = ref<HTMLDivElement | null>(null)
+const scroller = ref<HTMLDivElement | null>(null)
+const frame = ref<HTMLIFrameElement | null>(null)
+const input = ref<HTMLInputElement | null>(null)
+
+const status = ref<'loading' | 'ready' | 'failed'>('loading')
+const kind = ref<'pdf' | 'html' | null>(null)
+/** Le HTML a poser dans l'iframe, `<base>` et styles de surlignage compris. */
+const srcdoc = ref('')
+/** Ce qui est dans le champ. */
+const text = ref('')
+/**
+ * Les termes de `query` tant que le champ n'a pas ete retouche : une liste
+ * affichee « a b » ne doit pas se chercher comme l'expression « a b ».
+ */
+const terms = shallowRef<string[] | null>(null)
+const matches = ref({ current: 0, total: 0 })
+const pending = ref(false)
+
+function seed() {
+  const q = props.query
+  if (Array.isArray(q)) {
+    const list = q.map(x => String(x).trim()).filter(Boolean)
+    terms.value = list.length > 1 ? list : null
+    text.value = list.join(' ')
+  }
+  else {
+    terms.value = null
+    text.value = String(q ?? '').trim()
+  }
+}
+
+/** Ce qui se cherche : la liste de depart, ou l'expression tapee. */
+const searched = computed<string | string[]>(() => terms.value ?? text.value.trim())
+const hasQuery = computed(() => (Array.isArray(searched.value) ? searched.value.length > 0 : searched.value !== ''))
+
+function find(type: '' | 'again' = '', findPrevious = false) {
+  if (kind.value === 'pdf') findPdf(type, findPrevious)
+  else if (kind.value === 'html') findHtml(type, findPrevious)
+}
+
+function onInput(event: Event) {
+  text.value = (event.target as HTMLInputElement).value
+  terms.value = null
+  find()
+}
+
+function step(previous: boolean) {
+  if (hasQuery.value) find('again', previous)
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Enter') return
+  event.preventDefault()
+  step(event.shiftKey)
+}
+
+/** Ctrl/Cmd+F dans le lecteur va au champ plutot qu'a la recherche de la page. */
+function onRootKeydown(event: KeyboardEvent) {
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'f') {
+    event.preventDefault()
+    input.value?.focus()
+    input.value?.select()
+  }
+}
+
+const countLabel = computed(() => {
+  if (status.value !== 'ready' || !hasQuery.value || pending.value) return ''
+  return matches.value.total
+    ? words.value.count(matches.value.current, matches.value.total)
+    : words.value.none
+})
+
+/* ── Chargement ─────────────────────────────────────────────────────────── */
+
+let abort: AbortController | null = null
+
+/** PDF, HTML ou rien, d'apres les premiers octets. */
+function sniff(bytes: Uint8Array): 'pdf' | 'html' | null {
+  const head = new TextDecoder('latin1').decode(bytes.subarray(0, 2048))
+  if (head.includes('%PDF-')) return 'pdf'
+  if (/<(!doctype html|html|head|body)\b/i.test(head)) return 'html'
+  return null
+}
+
+async function load() {
+  destroy()
+  status.value = 'loading'
+  kind.value = null
+  srcdoc.value = ''
+  matches.value = { current: 0, total: 0 }
+  seed()
+  if (!props.src) return
+  abort = new AbortController()
+
+  try {
+    const response = await fetch(props.src, { signal: abort.signal })
+    if (!response.ok) throw new Error(`HTTP ${response.status}`)
+    const bytes = new Uint8Array(await response.arrayBuffer())
+    const type = sniff(bytes)
+    if (!type) throw new Error('Unsupported document')
+    kind.value = type
+    await nextTick()
+    if (type === 'pdf') await loadPdf(bytes)
+    else loadHtml(bytes)
+  }
+  catch (error) {
+    // Une annulation (fermeture pendant le chargement) n'est pas une erreur.
+    const name = (error as any)?.name
+    if (name === 'AbortError' || name === 'AbortException') return
+    status.value = 'failed'
+    emit('error', error)
+  }
+}
+
+function destroy() {
+  abort?.abort()
+  abort = null
+  destroyPdf()
+  destroyHtml()
+}
+
+watch(() => props.src, load)
+watch(() => props.query, () => {
+  seed()
+  find()
+})
+onMounted(load)
+onBeforeUnmount(destroy)
+
+/* ── PDF ────────────────────────────────────────────────────────────────── */
+
+// Objets pdf.js : hors de la reactivite, Vue n'a rien a y suivre.
+let eventBus: any = null
+let viewer: any = null
+let loadingTask: any = null
+let resizeObserver: ResizeObserver | null = null
+
+async function loadPdf(data: Uint8Array) {
+  const container = scroller.value
+  if (!container) return
+  const pdfjs: any = await import('pdfjs-dist')
+  // Le visualiseur lit la bibliotheque sur `globalThis` : elle doit etre la
+  // avant son import.
+  ;(globalThis as any).pdfjsLib ??= pdfjs
+  const [{ default: workerSrc }, viewerLib] = await Promise.all([
+    // @ts-ignore import d URL, resolu par Vite cote app
+    import('pdfjs-dist/build/pdf.worker.min.mjs?url'),
+    import('pdfjs-dist/web/pdf_viewer.mjs'),
+    // @ts-ignore feuille de style, resolue par Vite cote app
+    import('pdfjs-dist/web/pdf_viewer.css'),
+  ])
+  pdfjs.GlobalWorkerOptions.workerSrc ||= workerSrc
+
+  const { EventBus, PDFLinkService, PDFFindController, PDFViewer } = viewerLib as any
+  eventBus = new EventBus()
+  const linkService = new PDFLinkService({ eventBus })
+  const findController = new PDFFindController({ eventBus, linkService })
+  viewer = new PDFViewer({
+    container,
+    eventBus,
+    linkService,
+    findController,
+    removePageBorders: true,
+  })
+  linkService.setViewer(viewer)
+
+  eventBus.on('pagesinit', () => {
+    viewer.currentScaleValue = 'page-width'
+    if (hasQuery.value) find()
+  })
+  eventBus.on('updatefindcontrolstate', (e: any) => {
+    pending.value = e.state === 3
+    matches.value = e.matchesCount
+  })
+  eventBus.on('updatefindmatchescount', (e: any) => {
+    matches.value = e.matchesCount
+  })
+
+  loadingTask = pdfjs.getDocument({ data })
+  const pdf = await loadingTask.promise
+  viewer.setDocument(pdf)
+  linkService.setDocument(pdf)
+  status.value = 'ready'
+
+  resizeObserver = new ResizeObserver(() => {
+    if (viewer?.pagesCount) viewer.currentScaleValue = 'page-width'
+  })
+  resizeObserver.observe(container)
+}
+
+function findPdf(type: '' | 'again', findPrevious: boolean) {
+  eventBus?.dispatch('find', {
+    source: null,
+    type,
+    query: searched.value,
+    caseSensitive: false,
+    entireWord: false,
+    highlightAll: true,
+    findPrevious,
+    matchDiacritics: false,
+  })
+}
+
+function destroyPdf() {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  loadingTask?.destroy()
+  loadingTask = null
+  viewer?.cleanup?.()
+  viewer = null
+  eventBus = null
+  const inner = scroller.value?.firstElementChild
+  if (inner) inner.innerHTML = ''
+}
+
+/* ── HTML ───────────────────────────────────────────────────────────────── */
+
+const ALL = 'rm-document-match'
+const CURRENT = 'rm-document-match-current'
+
+/**
+ * Le texte du document, replie (minuscule, sans accent, blancs fusionnes),
+ * et pour chaque caractere replie le noeud texte et la position d'ou il vient.
+ */
+let index: { text: string, nodes: Text[], node: number[], offset: number[] } | null = null
+let ranges: Range[] = []
+let currentMatch = -1
+
+/** Un caractere, minuscule et sans accent, en un seul caractere. */
+function foldChar(char: string): string {
+  return char.normalize('NFD')[0]!.toLowerCase()[0]!
+}
+
+function foldQuery(value: string): string {
+  let out = ''
+  for (const char of value.trim()) {
+    if (/\s/.test(char)) {
+      if (!out.endsWith(' ')) out += ' '
+    }
+    else out += foldChar(char)
+  }
+  return out
+}
+
+function loadHtml(bytes: Uint8Array) {
+  const html = new TextDecoder(charsetOf(bytes)).decode(bytes)
+  // Couleurs du surlignage : l'iframe ne voit pas les jetons de la page, on
+  // lui passe leur valeur.
+  const primary = root.value
+    ? getComputedStyle(root.value).getPropertyValue('--color-primary').trim() || 'currentColor'
+    : 'currentColor'
+  const base = props.base ? ` href="${props.base.replace(/"/g, '&quot;')}"` : ''
+  // Balise ecrite en deux morceaux : la balise de style en toutes lettres
+  // ferait croire au compilateur SFC qu'un bloc de style commence ici.
+  const tag = 'sty' + 'le'
+  const head = `<base${base} target="_blank"><${tag}>`
+    + `::highlight(${ALL}){background-color:color-mix(in srgb, ${primary} 20%, transparent)}`
+    + `::highlight(${CURRENT}){background-color:color-mix(in srgb, ${primary} 45%, transparent)}`
+    + `</${tag}>`
+  srcdoc.value = /<head[^>]*>/i.test(html)
+    ? html.replace(/<head[^>]*>/i, match => match + head)
+    : head + html
+}
+
+/** Le `charset` annonce par la page, UTF-8 sinon. */
+function charsetOf(bytes: Uint8Array): string {
+  const head = new TextDecoder('latin1').decode(bytes.subarray(0, 4096))
+  const charset = head.match(/charset=["']?([\w-]+)/i)?.[1]
+  try {
+    return charset ? new TextDecoder(charset).encoding : 'utf-8'
+  }
+  catch {
+    return 'utf-8'
+  }
+}
+
+function onFrameLoad() {
+  const doc = frame.value?.contentDocument
+  if (!srcdoc.value || !doc?.body) return
+  indexHtml(doc)
+  doc.addEventListener('keydown', onRootKeydown)
+  status.value = 'ready'
+  if (hasQuery.value) find()
+}
+
+function indexHtml(doc: Document) {
+  const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT, {
+    acceptNode: node => (['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(node.parentElement?.tagName ?? '')
+      ? NodeFilter.FILTER_REJECT
+      : NodeFilter.FILTER_ACCEPT),
+  })
+  const out = { text: '', nodes: [] as Text[], node: [] as number[], offset: [] as number[] }
+  let space = true
+  for (let node = walker.nextNode() as Text | null; node; node = walker.nextNode() as Text | null) {
+    const k = out.nodes.push(node) - 1
+    const data = node.data
+    for (let i = 0; i < data.length; i++) {
+      const char = data[i]!
+      if (/\s/.test(char)) {
+        if (space) continue
+        out.text += ' '
+        space = true
+      }
+      else {
+        out.text += foldChar(char)
+        space = false
+      }
+      out.node.push(k)
+      out.offset.push(i)
+    }
+  }
+  index = out
+}
+
+function findHtml(type: '' | 'again', findPrevious: boolean) {
+  const doc = frame.value?.contentDocument
+  const win = frame.value?.contentWindow
+  if (!doc || !win || !index) return
+
+  if (type === '') {
+    const queries = (Array.isArray(searched.value) ? searched.value : [searched.value])
+      .map(foldQuery)
+      .filter(Boolean)
+    const spans: [number, number][] = []
+    for (const query of queries) {
+      for (let at = index.text.indexOf(query); at !== -1; at = index.text.indexOf(query, at + 1)) {
+        spans.push([at, at + query.length])
+      }
+    }
+    // Dans l'ordre du document, sans chevauchement.
+    spans.sort((a, b) => a[0] - b[0])
+    ranges = []
+    let end = -1
+    for (const [start, stop] of spans) {
+      if (start < end) continue
+      end = stop
+      const range = doc.createRange()
+      range.setStart(index.nodes[index.node[start]!]!, index.offset[start]!)
+      range.setEnd(index.nodes[index.node[stop - 1]!]!, index.offset[stop - 1]! + 1)
+      ranges.push(range)
+    }
+    currentMatch = ranges.length ? 0 : -1
+  }
+  else if (ranges.length) {
+    currentMatch = (currentMatch + (findPrevious ? -1 : 1) + ranges.length) % ranges.length
+  }
+
+  const highlights = (win as any).CSS?.highlights
+  const Highlight = (win as any).Highlight
+  if (highlights && Highlight) {
+    highlights.set(ALL, new Highlight(...ranges))
+    if (currentMatch >= 0) highlights.set(CURRENT, new Highlight(ranges[currentMatch]))
+    else highlights.delete(CURRENT)
+  }
+
+  matches.value = { current: currentMatch + 1, total: ranges.length }
+  pending.value = false
+
+  // Defilement de l'iframe seule : `scrollIntoView` ferait aussi defiler le
+  // tiroir qui la contient, et la barre sortirait de l'ecran.
+  const range = ranges[currentMatch]
+  if (range) {
+    const rect = range.getBoundingClientRect()
+    win.scrollBy({ top: rect.top - win.innerHeight / 3, left: 0 })
+  }
+}
+
+function destroyHtml() {
+  frame.value?.contentDocument?.removeEventListener('keydown', onRootKeydown)
+  index = null
+  ranges = []
+  currentMatch = -1
+}
+</script>
+
+<template>
+  <div ref="root" class="rm-document-viewer" @keydown="onRootKeydown">
+    <div class="rm-document-viewer__bar" role="search">
+      <label class="rm-document-viewer__field">
+        <RmIcon name="MagnifyingGlass" :size="14" color="var(--text-muted)" />
+        <input
+          ref="input"
+          class="rm-document-viewer__input"
+          type="search"
+          :value="text"
+          :placeholder="words.search"
+          :aria-label="words.search"
+          :disabled="status !== 'ready'"
+          @input="onInput"
+          @keydown="onKeydown"
+        >
+      </label>
+      <span class="rm-document-viewer__count" aria-live="polite">{{ countLabel }}</span>
+      <RmButton
+        ghost
+        icon-only
+        size="sm"
+        prefix-icon="CaretUp"
+        :aria-label="words.previous"
+        :title="words.previous"
+        :disabled="!matches.total"
+        @click="step(true)"
+      />
+      <RmButton
+        ghost
+        icon-only
+        size="sm"
+        prefix-icon="CaretDown"
+        :aria-label="words.next"
+        :title="words.next"
+        :disabled="!matches.total"
+        @click="step(false)"
+      />
+    </div>
+
+    <div class="rm-document-viewer__frame">
+      <!-- pdf.js exige un conteneur positionne en absolu qui defile, et un
+           enfant `.pdfViewer` ou il pose les pages. -->
+      <div v-show="kind === 'pdf'" ref="scroller" class="rm-document-viewer__scroller">
+        <div class="pdfViewer" />
+      </div>
+      <iframe
+        v-if="kind === 'html' && srcdoc"
+        ref="frame"
+        class="rm-document-viewer__page"
+        sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+        :srcdoc="srcdoc"
+        @load="onFrameLoad"
+      />
+      <p v-if="status === 'loading'" class="rm-document-viewer__state">{{ words.loading }}</p>
+      <p v-else-if="status === 'failed'" class="rm-document-viewer__state">{{ words.failed }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-document-viewer{display:flex;flex-direction:column;gap:var(--space-8);height:100%;min-height:60vh}.rm-document-viewer__bar{align-items:center;display:flex;gap:var(--space-4)}.rm-document-viewer__field{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);display:flex;flex:1;gap:var(--space-8);height:32px;max-width:420px;min-width:0;padding:0 var(--space-12)}.rm-document-viewer__field:focus-within{border-color:var(--color-secondary);box-shadow:var(--shadow-focus)}.rm-document-viewer__input{background:none;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-13);min-width:0;outline:none}.rm-document-viewer__input::-moz-placeholder{color:var(--text-muted)}.rm-document-viewer__input::placeholder{color:var(--text-muted)}.rm-document-viewer__count{color:var(--text-secondary);font-size:var(--font-12);font-variant-numeric:tabular-nums;margin-left:var(--space-8);min-width:80px}.rm-document-viewer__frame{background:var(--bg-surface-2);border-radius:var(--radius-8,8px);flex:1;min-height:0;overflow:hidden;position:relative}.rm-document-viewer__scroller{inset:0;overflow:auto;position:absolute;--highlight-bg-color:color-mix(in srgb,var(--color-primary) 30%,transparent);--highlight-selected-bg-color:color-mix(in srgb,var(--color-primary) 65%,transparent)}.rm-document-viewer__scroller :deep(.pdfViewer .page){box-shadow:0 2px 8px rgba(var(--shadow-rgb),12%);margin:var(--space-12) auto}.rm-document-viewer__page{background:Canvas;border:none;color-scheme:light;height:100%;inset:0;position:absolute;width:100%}.rm-document-viewer__state{color:var(--text-secondary);display:grid;font-size:var(--font-13);inset:0;margin:0;place-items:center;position:absolute}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.229",
+  "version": "0.1.231",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -48,6 +48,7 @@
     "html2canvas-pro": "^1.6.7",
     "jspdf": "^4.2.0",
     "jspdf-autotable": "^5.0.7",
+    "pdfjs-dist": "6.3.289",
     "write-excel-file": "^1.4.30"
   },
   "devDependencies": {