@tekkare/romulus 0.1.228 → 0.1.230

package/dist/module.json

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

package/dist/runtime/components/FilterBar.vue

@@ -109,6 +109,24 @@ function toggle(which: RmFilterBarPanel) {
   panel.value = panel.value === which ? null : which
 }
 
+/**
+ * Un clic hors de la barre referme le panneau ouvert. Les menus des listes
+ * deroulantes, les popovers et les modales sont teleportes sous <body>, hors
+ * de l'arbre de l'app : un clic dedans appartient encore au panneau (choisir
+ * une option ne doit pas le fermer), on ne ferme donc que pour un clic tombe
+ * dans le meme conteneur racine que la barre.
+ */
+const root = ref<HTMLElement | null>(null)
+
+function onDocPointerDown(event: PointerEvent) {
+  if (!panel.value || !root.value) return
+  const target = event.target as Node
+  if (root.value.contains(target)) return
+  let appRoot: HTMLElement = root.value
+  while (appRoot.parentElement && appRoot.parentElement !== document.body) appRoot = appRoot.parentElement
+  if (appRoot.contains(target)) panel.value = null
+}
+
 /**
  * Le lien de recherche avancee est pose DANS le champ, a son bout : le champ
  * doit donc lui reserver sa place, sinon le texte saisi et la croix passent
@@ -157,6 +175,7 @@ function watchHeader() {
 onMounted(() => {
   watchHeader()
   watchAdvanced()
+  document.addEventListener('pointerdown', onDocPointerDown)
 })
 
 onBeforeUnmount(() => {
@@ -164,12 +183,14 @@ onBeforeUnmount(() => {
   headerSize = null
   advancedSize?.disconnect()
   advancedSize = null
+  document.removeEventListener('pointerdown', onDocPointerDown)
 })
 </script>
 
 <template>
   <div
     id="rm_filter_bar"
+    ref="root"
     class="rm-fbar"
     :class="panel ? 'rm-fbar--open' : 'rm-fbar--closed'"
     :style="{ top: `${stickyTop}px`, '--rm-fbar-advanced-w': `${advancedWidth}px` }"

package/dist/runtime/components/PdfViewer.vue

@@ -0,0 +1,294 @@
+<!--
+  RmPdfViewer - un PDF affiche dans la page, avec une recherche dans son texte.
+
+  Un PDF 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.
+
+  Ici le rendu passe par pdf.js : les pages sont dessinees a la demande, une
+  couche de texte se pose dessus, et la barre en tete cherche dans ce 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. Si le fichier ne se lit pas (pas un PDF, CORS,
+  404), le composant emet `error` : a l'appelant de retomber sur une
+  `<iframe>`, qui sait au moins afficher une page HTML.
+
+  pdf.js (~1 Mo avec son worker) n'est charge qu'au montage du composant.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Adresse du PDF, lue par `fetch`. */
+  src: string
+  /** Terme(s) cherche(s) a l'ouverture. Une liste cherche chaque terme. */
+  query?: string | readonly string[] | null
+  lang?: 'fr' | 'en'
+}>(), {
+  query: 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 scroller = ref<HTMLDivElement | null>(null)
+const input = ref<HTMLInputElement | null>(null)
+
+const status = ref<'loading' | 'ready' | 'failed'>('loading')
+/** 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)
+
+// 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
+
+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 que pdf.js 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 (!eventBus) return
+  eventBus.dispatch('find', {
+    source: null,
+    type,
+    query: searched.value,
+    caseSensitive: false,
+    entireWord: false,
+    highlightAll: true,
+    findPrevious,
+    matchDiacritics: false,
+  })
+}
+
+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
+})
+
+async function load() {
+  destroy()
+  status.value = 'loading'
+  matches.value = { current: 0, total: 0 }
+  seed()
+  await nextTick()
+  const container = scroller.value
+  if (!container || !props.src) return
+
+  try {
+    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({ url: props.src })
+    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)
+  }
+  catch (error) {
+    // Une annulation (fermeture pendant le chargement) n'est pas une erreur.
+    if ((error as any)?.name === 'AbortException') return
+    status.value = 'failed'
+    emit('error', error)
+  }
+}
+
+function destroy() {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  loadingTask?.destroy()
+  loadingTask = null
+  viewer?.cleanup?.()
+  viewer = null
+  eventBus = null
+  if (scroller.value) {
+    const inner = scroller.value.firstElementChild
+    if (inner) inner.innerHTML = ''
+  }
+}
+
+watch(() => props.src, load)
+watch(() => props.query, () => {
+  seed()
+  find()
+})
+onMounted(load)
+onBeforeUnmount(destroy)
+</script>
+
+<template>
+  <div class="rm-pdf-viewer" @keydown="onRootKeydown">
+    <div class="rm-pdf-viewer__bar" role="search">
+      <label class="rm-pdf-viewer__field">
+        <RmIcon name="MagnifyingGlass" :size="14" color="var(--text-muted)" />
+        <input
+          ref="input"
+          class="rm-pdf-viewer__input"
+          type="search"
+          :value="text"
+          :placeholder="words.search"
+          :aria-label="words.search"
+          :disabled="status !== 'ready'"
+          @input="onInput"
+          @keydown="onKeydown"
+        >
+      </label>
+      <span class="rm-pdf-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-pdf-viewer__frame">
+      <!-- pdf.js exige un conteneur positionne en absolu qui defile, et un
+           enfant `.pdfViewer` ou il pose les pages. -->
+      <div ref="scroller" class="rm-pdf-viewer__scroller">
+        <div class="pdfViewer" />
+      </div>
+      <p v-if="status === 'loading'" class="rm-pdf-viewer__state">{{ words.loading }}</p>
+      <p v-else-if="status === 'failed'" class="rm-pdf-viewer__state">{{ words.failed }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-pdf-viewer{display:flex;flex-direction:column;gap:var(--space-8);height:100%;min-height:60vh}.rm-pdf-viewer__bar{align-items:center;display:flex;gap:var(--space-4)}.rm-pdf-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-pdf-viewer__field:focus-within{border-color:var(--color-secondary);box-shadow:var(--shadow-focus)}.rm-pdf-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-pdf-viewer__input::-moz-placeholder{color:var(--text-muted)}.rm-pdf-viewer__input::placeholder{color:var(--text-muted)}.rm-pdf-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-pdf-viewer__frame{background:var(--bg-surface-2);border-radius:var(--radius-8,8px);flex:1;min-height:0;position:relative}.rm-pdf-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-pdf-viewer__scroller :deep(.pdfViewer .page){box-shadow:0 2px 8px rgba(var(--shadow-rgb),12%);margin:var(--space-12) auto}.rm-pdf-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.228",
+  "version": "0.1.230",
   "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": {