@tekkare/romulus 0.1.248 → 0.1.250

package/dist/module.json

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

package/dist/runtime/components/Notes.vue

@@ -17,9 +17,16 @@
   main : une note qu'on rallonge annoncerait sinon une duree fausse. La date,
   elle, vient de l'appelant — c'est une date de revision editoriale, que rien
   dans le contenu ne permet de deviner.
+
+  `openId` sert au lecteur qui arrive par un renvoi (le « i » d'un filtre) :
+  la note qu'il est venu chercher s'ouvre depliee et defile en vue, au lieu
+  d'une liste repliee ou il devrait la retrouver. La recherche et la pastille
+  sont remises a zero, sinon la note pourrait etre filtree hors de la liste.
+  Le depliage n'a lieu qu'une fois par identifiant : un rechargement des notes
+  ne rouvre pas une note que le lecteur vient de replier.
 -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 export type RmNoteTone = 'primary' | 'info' | 'warning' | 'success' | 'neutral'
 
@@ -90,6 +97,11 @@ const props = withDefaults(defineProps<{
    */
   editable?: boolean
   lang?: 'fr' | 'en'
+  /**
+   * Note a ouvrir depliee et a montrer. Attendue meme si les notes arrivent
+   * apres (chargement distant) : elle s'ouvre des qu'elle est dans la liste.
+   */
+  openId?: string | null
 }>(), {
   categories: () => [],
   title: 'Notes',
@@ -97,6 +109,7 @@ const props = withDefaults(defineProps<{
   badge: undefined,
   editable: false,
   lang: 'fr',
+  openId: null,
 })
 
 const emit = defineEmits<{ navigate: [to: string], edit: [id: string] }>()
@@ -136,6 +149,30 @@ const search = ref('')
 const category = ref('all')
 const open = ref<string[]>([])
 
+const root = ref<HTMLElement | null>(null)
+let revealed: string | null = null
+
+watch(
+  () => [props.openId, props.notes] as const,
+  ([id]) => {
+    if (!id) {
+      revealed = null
+      return
+    }
+    if (id === revealed || !props.notes.some(note => note.id === id)) return
+    revealed = id
+    search.value = ''
+    category.value = 'all'
+    if (!open.value.includes(id)) open.value = [...open.value, id]
+    nextTick(() => {
+      root.value
+        ?.querySelector(`[data-note-id="${CSS.escape(id)}"]`)
+        ?.scrollIntoView({ block: 'start' })
+    })
+  },
+  { immediate: true },
+)
+
 function toggle(id: string) {
   open.value = open.value.includes(id)
     ? open.value.filter(item => item !== id)
@@ -237,7 +274,7 @@ function onLink(to: string) {
 </script>
 
 <template>
-  <div class="rm-notes">
+  <div ref="root" class="rm-notes">
     <div class="rm-notes__head">
       <h2 v-if="title" class="rm-notes__title">{{ title }}</h2>
       <span v-if="badge" class="rm-notes__badge">
@@ -290,6 +327,7 @@ function onLink(to: string) {
       <article
         v-for="note in shown"
         :key="note.id"
+        :data-note-id="note.id"
         class="rm-notes__note"
         :class="{ 'rm-notes__note--open': open.includes(note.id) }"
       >

package/layer/app/assets/oip-frame.css

@@ -0,0 +1,36 @@
+/*
+  Regles du cadre OIP 7 communes a toutes les apps qui etendent le layer.
+  Non prefixees : elles visent la colonne `.main_container` que chaque app
+  pose dans son layout, sous le `.rm-shell` d'OipShell.
+*/
+
+/* Le bandeau de page traverse tout le cadre, quel que soit le wrapper de la
+   page (`oip_grid`, `arg_page_layout`...) : meme calcul que la barre de
+   filtres (largeur publiee par OipShell, marges negatives). Son contenu reste
+   cale sur la colonne de contenu. */
+.rm-shell .main_container .rm-page-header {
+  box-sizing: border-box;
+  width: var(--oip-main-w, 100%);
+  max-width: none;
+  margin-inline: calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%)) / 2);
+  padding-inline: max(32px, (var(--oip-main-w, 100%) - var(--oip-content-max, 100%)) / 2 + 32px);
+}
+
+/* La barre calcule sa largeur elle-meme : le plafond de la colonne
+   (`.main_container > *`) la couperait quand elle en est enfant direct. */
+.rm-shell .main_container #rm_filter_bar {
+  max-width: none;
+}
+
+/* La barre de filtres colle au bandeau : le gap du wrapper de page saute
+   entre les deux (barre soeur du bandeau, ou premiere fille de son voisin),
+   l'espacement est rendu aux blocs suivants. Pas de `:has()` dans un
+   `:has()` : le selecteur serait invalide et la regle entiere ignoree. */
+.rm-shell .main_container :has(> .rm-page-header + #rm_filter_bar),
+.rm-shell .main_container :has(> .rm-page-header + * > #rm_filter_bar:first-child) {
+  row-gap: 0;
+}
+
+.rm-shell .main_container .rm-page-header + :is(#rm_filter_bar, :has(> #rm_filter_bar:first-child)) ~ * {
+  margin-top: 32px;
+}

package/layer/app/components/panels/OipPanelNotes.vue

@@ -29,6 +29,7 @@
     badge="Tekkare"
     :lang="locale === 'en' ? 'en' : 'fr'"
     :editable="superAdmin"
+    :open-id="openId"
     @navigate="go"
     @edit="openEditor"
   />
@@ -60,8 +61,10 @@ const props = withDefaults(
     showOrigin?: boolean;
     /** Notes encore ecrites dans le code de l'app (cf. useOipNotes). */
     localNotes?: Note[];
+    /** Note a ouvrir depliee : le « i » d'un filtre renvoie a sa note. */
+    openId?: string | null;
   }>(),
-  { sourceUuids: () => [], superAdmin: false, showOrigin: undefined, localNotes: () => [] },
+  { openId: null, sourceUuids: () => [], superAdmin: false, showOrigin: undefined, localNotes: () => [] },
 );
 
 const { locale } = useI18n();

package/layer/app/components/panels/OipPanelStatistics.vue

@@ -136,6 +136,15 @@
             </tr>
           </tbody>
         </table>
+        <RmButton
+          v-if="pagesShown < viewedPages.length"
+          variant="secondary"
+          size="sm"
+          class="stats_more"
+          @click="pagesShown += PAGES_STEP"
+        >
+          {{ isFr ? "Charger plus" : "Load more" }}
+        </RmButton>
       </section>
 
       <p class="stats_note">
@@ -257,12 +266,18 @@ const screensHint = computed(() =>
 const seen = (iso: string) =>
   iso ? new Date(iso).toLocaleDateString(isFr.value ? "fr-FR" : "en-GB", { day: "2-digit", month: "short" }) : "";
 
-const topPages = computed(() =>
+// Toutes les pages vues sur la periode, dix par dix : les ecrans peu visites
+// (une fiche, une page recente) doivent rester trouvables.
+const PAGES_STEP = 10;
+const pagesShown = ref(PAGES_STEP);
+watch([period, internal], () => (pagesShown.value = PAGES_STEP));
+
+const viewedPages = computed(() =>
   (data.value?.topPages ?? [])
     .filter((p) => p.pageviews[period.value] > 0)
     .sort((a, b) => b.pageviews[period.value] - a.pageviews[period.value])
-    .slice(0, 10)
 );
+const topPages = computed(() => viewedPages.value.slice(0, pagesShown.value));
 </script>
 
 <style scoped>

package/layer/nuxt.config.ts

@@ -21,6 +21,8 @@ export default defineNuxtConfig({
   future: {
     compatibilityVersion: 4,
   },
+  // Regles du cadre communes aux apps (bandeau de page, barre de filtres).
+  css: [fileURLToPath(new URL("./app/assets/oip-frame.css", import.meta.url))],
   // Reglages serveur propres au layer. Les cles Directus (directus*Url,
   // directus*Token) restent declarees par l'app, qui les avait deja.
   runtimeConfig: {

package/layer/server/api/oip/stats.get.ts

@@ -27,7 +27,9 @@ import {
  * Reservee aux superadmins, comme les metadonnees.
  */
 
-const TOP_PAGES = 100;
+// Large : chaque fiche (une marque, une association) est une page, et le
+// panneau doit pouvoir descendre jusqu'aux ecrans peu visites.
+const TOP_PAGES = 300;
 
 export default defineEventHandler(async (event): Promise<OipStats> => {
   const { path, hosts, where, hogql } = await oipStatsContext(event);

package/package.json

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