@tekkare/romulus 0.1.69 → 0.1.70

package/dist/module.json

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

package/dist/runtime/components/AppFooter.vue

@@ -0,0 +1,38 @@
+<!--
+  RmAppFooter - pied de page du portail : copyright et mentions legales.
+
+  Reprend `arg-footer` d'Auriga a l'identique. Les libelles vivent dans le
+  composant plutot que dans des JSON de locale charges au montage, qui
+  laissaient le pied a moitie vide le temps du premier rendu.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  lang?: 'fr' | 'en'
+  /** Lien des mentions legales. */
+  termsHref?: string
+}>(), {
+  lang: 'fr',
+  termsHref: 'https://openinnovationprogram.com/legal-notices',
+})
+
+const WORDS = {
+  fr: { rights: 'Tous droits réservés.', terms: 'Mentions légales' },
+  en: { rights: 'All rights reserved.', terms: 'Legal notices' },
+} as const
+
+const t = computed(() => WORDS[props.lang])
+const year = new Date().getFullYear()
+</script>
+
+<template>
+  <footer class="rm-footer">
+    <p>©{{ year }} Tekkare®. {{ t.rights }}</p>
+    <a :href="termsHref" target="_blank" rel="noopener">{{ t.terms }}</a>
+  </footer>
+</template>
+
+<style scoped>
+.rm-footer{align-items:center;background:var(--bg-surface-2);box-shadow:0 4px 8px rgba(var(--brand-rgb),.04),0 0 2px rgba(var(--brand-rgb),.06);display:flex;justify-content:space-between;margin-top:24px;padding:24px 84px}.rm-footer p{line-height:1.6;margin:0}.rm-footer a,.rm-footer p{font-size:var(--font-14,14px)}.rm-footer a{color:var(--color-primary);font-weight:500;text-decoration:underline;text-underline-offset:3px}.rm-footer a:hover{color:var(--color-primary-hover);text-decoration-thickness:2px}
+</style>

package/dist/runtime/components/AppSidebar.vue

@@ -8,7 +8,7 @@
   Laquelle des barres du paquet prendre :
   - celle-ci quand la page compose son menu en balises (`RmMenuItem`,
     `RmSubMenu`) et doit glisser ses propres blocs entre les entrees ;
-  - `RmSidebar` quand le menu tient dans une simple liste d'entrees ;
+  - 
   - `RmSidebarLeft` pour le chrome du portail, decrit par une prop `sections` ;
   - `RmSidebarRight` pour le rail d'icones.
 

package/dist/runtime/components/MainLayout.vue

@@ -0,0 +1,95 @@
+<!--
+  RmMainLayout - le cadre d'une page d'analyse : barre laterale, rail d'outils,
+  corps, pied.
+
+  Reprend `arg-main-layout` d'Auriga : le corps se decale de la largeur de la
+  barre laterale, le rail d'outils se cale sous l'en-tete fixe, et le pied
+  ferme la page.
+
+  Deux choses changent.
+
+  Le decalage sous l'en-tete est calcule par un `ResizeObserver` plutot que par
+  un `setTimeout(500)` rejoue au montage, a chaque mise a jour, a chaque
+  changement de route et a chaque redimensionnement. Chez Auriga, le corps
+  sautait une demi-seconde apres chaque navigation, et un en-tete qui grandit
+  entre-temps laissait le contenu dessous.
+
+  La hauteur passe par une variable CSS posee sur le cadre, plus par des
+  `style.marginTop` ecrits a la main sur des elements retrouves par
+  `getElementById` : deux cadres sur la meme page se marchaient dessus.
+-->
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Barre laterale depliee : le corps se decale de 200px au lieu de 52px. */
+  sidebarOpen?: boolean
+  /** Tiroir d'outils ouvert : le rail passe devant le reste. */
+  toolbarOpen?: boolean
+  lang?: 'fr' | 'en'
+  /**
+   * Selecteur de l'en-tete fixe dont il faut degager la hauteur. Absent, le
+   * corps commence en haut de page.
+   */
+  headerSelector?: string
+  /** Retire le pied, pour un ecran qui porte le sien. */
+  noFooter?: boolean
+}>(), {
+  sidebarOpen: true,
+  toolbarOpen: false,
+  lang: 'fr',
+  headerSelector: '#rm-header',
+  noFooter: false,
+})
+
+const rootRef = ref<HTMLElement>()
+let observer: ResizeObserver | undefined
+
+/** La hauteur de l'en-tete descend dans le CSS, qui la repartit ou il faut. */
+function measure() {
+  const root = rootRef.value
+  if (!root) return
+  const header = props.headerSelector
+    ? document.querySelector<HTMLElement>(props.headerSelector)
+    : null
+  root.style.setProperty('--rm-layout-header-h', `${header?.offsetHeight ?? 0}px`)
+  return header
+}
+
+onMounted(() => {
+  const header = measure()
+  if (typeof ResizeObserver === 'undefined') return
+  observer = new ResizeObserver(() => measure())
+  if (header) observer.observe(header)
+  if (rootRef.value) observer.observe(rootRef.value)
+})
+
+onBeforeUnmount(() => observer?.disconnect())
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="rm-layout"
+    :class="sidebarOpen ? 'rm-layout--with-sidebar' : 'rm-layout--no-sidebar'"
+  >
+    <slot name="sidebar" />
+
+    <div class="rm-layout__body">
+      <div class="rm-layout__tools" :class="{ 'is-open': toolbarOpen }">
+        <slot name="toolbar" />
+        <slot name="toolbarContent" />
+      </div>
+
+      <main class="rm-layout__main">
+        <slot name="body" />
+      </main>
+    </div>
+
+    <RmAppFooter v-if="!noFooter" :lang="lang" />
+  </div>
+</template>
+
+<style scoped>
+.rm-layout{--rm-layout-header-h:0px}.rm-layout--with-sidebar{margin-left:200px}.rm-layout--no-sidebar{margin-left:52px}.rm-layout__body{display:flex;flex-direction:column}.rm-layout__tools{position:fixed;right:8px;top:calc(var(--rm-layout-header-h) + 8px);transition:top .3s linear;z-index:95}.rm-layout__tools.is-open{z-index:99}.rm-layout__main{margin-top:var(--rm-layout-header-h);min-height:calc(100vh - 77px);padding:8px;transition:margin-top .3s linear}@media (prefers-reduced-motion:reduce){.rm-layout__main,.rm-layout__tools{transition:none}}
+</style>

package/dist/runtime/components/MenuItem.vue

@@ -5,7 +5,7 @@
   quand la barre est repliee, bulle a droite qui prend le relais dans ce cas,
   et squelette scintillant pendant le chargement.
 
-  A poser dans `RmSidebar`, qui transmet son etat replie. Pour un menu a
+  A poser dans `RmAppSidebar`, qui transmet son etat replie. Pour un menu a
   sections depliables, c'est `RmAccordionMenu`.
 
   Deux choses changent. L'entree en chargement porte `aria-busy` et un intitule

package/dist/runtime/components/SidebarRight.vue

@@ -26,6 +26,17 @@ export interface RmRailTile {
    * vide dirait qu'il y a quelque chose a voir.
    */
   count?: number
+  /**
+   * Marqueur d'etat : la tuile porte quelque chose d'actif (une vue
+   * appliquee, par exemple). Un point, pas un nombre — l'etat n'a rien a
+   * compter, et il se voit sans ouvrir le panneau.
+   */
+  dot?: boolean
+  /**
+   * Precision ajoutee a l'infobulle, quand l'etat porte un nom (le titre de
+   * la vue active). Le rail n'a pas la place de l'ecrire.
+   */
+  hint?: string
 }
 
 export interface RmRailLocale {
@@ -67,6 +78,17 @@ const emit = defineEmits<{
 }>()
 
 /** Couleur par defaut de la pastille : l'accent du portail. */
+/**
+ * Infobulle d'une tuile : son libelle, son compteur, et ce que son marqueur
+ * d'etat designe. La legende du rail est tronquee a 56px, l'infobulle est le
+ * seul endroit ou le nom tient.
+ */
+function tileTitle(tile: RmRailTile): string {
+  const parts = [tile.count ? `${tile.label} (${tile.count})` : tile.label]
+  if (tile.hint) parts.push(tile.hint)
+  return parts.join(' : ')
+}
+
 const avatarColor = computed(() => props.user?.color ?? 'var(--rm-shell-accent)')
 
 /** Le pouce descend quand la langue active n'est pas la premiere. */
@@ -93,13 +115,14 @@ const second = computed(() =>
       class="rm-rail__item"
       :class="{ 'rm-rail__item--active': active === tile.key }"
       type="button"
-      :title="tile.count ? `${tile.label} (${tile.count})` : tile.label"
+      :title="tileTitle(tile)"
       :aria-pressed="active === tile.key"
       @click="emit('select', tile.key)"
     >
       <span class="rm-rail__tile">
         <i :class="`ph ph-${tile.icon}`" />
         <span v-if="tile.count" class="rm-rail__badge">{{ tile.count > 99 ? '99+' : tile.count }}</span>
+        <span v-else-if="tile.dot" class="rm-rail__dot" />
       </span>
       <span class="rm-rail__caption">{{ tile.label }}</span>
     </button>

package/dist/runtime/components/SubMenu.vue

@@ -5,7 +5,7 @@
   entrees en dessous. Repliee, la barre ne garde que le chevron, la bulle porte
   alors le nom du groupe.
 
-  A poser dans `RmSidebar`, autour de `RmMenuItem`. Pour un menu entier decrit
+  A poser dans `RmAppSidebar`, autour de `RmMenuItem`. Pour un menu entier decrit
   en donnees plutot qu'en balises, c'est `RmAccordionMenu`.
 
   Deux choses changent : le bouton porte `aria-expanded`, et l'ouverture est un

package/dist/runtime/components/TabBar.vue

@@ -0,0 +1,145 @@
+<!--
+  RmTabBar - barre d'onglets d'une fiche, avec trait glissant.
+
+  Reprend `arg-nav-bar` d'Auriga : les onglets d'une page de detail, un trait
+  de marque qui glisse sous l'onglet lu, et deux fleches qui apparaissent quand
+  la barre deborde.
+
+  Laquelle prendre : celle-ci quand les onglets portent une valeur metier
+  (`{ name, value }`) et peuvent deborder ; `RmTabs` pour une simple liste de
+  libelles indexes ; `RmFilterTabs` pour un rail voile pose dans un panneau ;
+  `RmSegmented` pour une echelle ordonnee.
+
+  Trois choses changent. Les mesures passent par des refs de template, plus par
+  `document.getElementById('rcd_tab_3')` : deux barres sur la meme page se
+  volaient leurs identifiants, et le trait sautait de l'une a l'autre.
+
+  Le debordement est surveille par un `ResizeObserver` plutot qu'au montage
+  seulement : les fleches sortaient ou restaient a tort des que la fenetre
+  changeait de taille.
+
+  Les onglets sont dans un `role="tablist"` avec `aria-selected`, et l'onglet
+  actif est un `v-model` sur la valeur, pas un index interne recalcule.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+export interface RmTabBarTab {
+  name: string
+  /** Valeur portee par le modele. Absente, c'est l'index. */
+  value?: string | number
+}
+
+const props = withDefaults(defineProps<{
+  tabs: RmTabBarTab[]
+  ariaLabel?: string
+}>(), {
+  ariaLabel: undefined,
+})
+
+const selected = defineModel<string | number>({ default: '' })
+
+const containerRef = ref<HTMLElement>()
+const scrollRef = ref<HTMLElement>()
+const tabRefs = ref<HTMLElement[]>([])
+const overflow = ref(false)
+const bar = ref({ left: 0, width: 0 })
+
+function valueOf(tab: RmTabBarTab, index: number) {
+  return tab.value ?? index
+}
+
+const activeIndex = computed(() => {
+  const found = props.tabs.findIndex((tab, i) => valueOf(tab, i) === selected.value)
+  return found === -1 ? 0 : found
+})
+
+/** Le trait se cale sur l'onglet reellement pose, mesure dans le DOM. */
+async function placeBar() {
+  await nextTick()
+  const el = tabRefs.value[activeIndex.value]
+  if (!el) return
+  bar.value = { left: el.offsetLeft, width: el.offsetWidth }
+}
+
+function checkOverflow() {
+  const container = containerRef.value
+  const content = scrollRef.value
+  if (!container || !content) return
+  // 48px : la place que prendraient les deux fleches.
+  overflow.value = content.scrollWidth > container.clientWidth - 48
+}
+
+function scrollBy(direction: -1 | 1) {
+  scrollRef.value?.scrollBy({ left: direction * 200, behavior: 'smooth' })
+}
+
+let observer: ResizeObserver | undefined
+
+onMounted(() => {
+  placeBar()
+  checkOverflow()
+  if (typeof ResizeObserver !== 'undefined' && containerRef.value) {
+    observer = new ResizeObserver(() => {
+      checkOverflow()
+      placeBar()
+    })
+    observer.observe(containerRef.value)
+  }
+})
+onBeforeUnmount(() => observer?.disconnect())
+
+watch(selected, placeBar)
+watch(() => props.tabs, () => {
+  placeBar()
+  checkOverflow()
+}, { deep: true })
+</script>
+
+<template>
+  <div ref="containerRef" class="rm-tabbar" :class="{ 'rm-tabbar--overflow': overflow }">
+    <button
+      v-show="overflow"
+      type="button"
+      class="rm-tabbar__arrow rm-tabbar__arrow--left"
+      aria-label="Faire défiler vers la gauche"
+      @click="scrollBy(-1)"
+    >
+      <RmIcon name="CaretLeft" :size="12" />
+    </button>
+
+    <div ref="scrollRef" class="rm-tabbar__scroll" role="tablist" :aria-label="ariaLabel">
+      <span
+        class="rm-tabbar__bar"
+        aria-hidden="true"
+        :style="{ transform: `translateX(${bar.left}px)`, width: `${bar.width}px` }"
+      />
+      <span v-for="(tab, index) in tabs" :key="index" ref="tabRefs" class="rm-tabbar__slot">
+        <button
+          type="button"
+          role="tab"
+          class="rm-tabbar__tab"
+          :class="{ 'is-active': index === activeIndex }"
+          :aria-selected="index === activeIndex"
+          @click="selected = valueOf(tab, index)"
+        >
+          {{ tab.name }}
+        </button>
+      </span>
+    </div>
+
+    <button
+      v-show="overflow"
+      type="button"
+      class="rm-tabbar__arrow rm-tabbar__arrow--right"
+      aria-label="Faire défiler vers la droite"
+      @click="scrollBy(1)"
+    >
+      <RmIcon name="CaretRight" :size="12" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rm-tabbar{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);box-shadow:var(--r-shadow-sm);margin-bottom:30px;max-width:calc(100% - 48px);padding:0 24px;position:relative;white-space:nowrap;width:auto}.rm-tabbar--overflow{max-width:calc(100% - 80px);padding:0 40px}.rm-tabbar__scroll{align-items:center;display:flex;gap:32px;overflow-x:auto;position:relative;scrollbar-width:none}.rm-tabbar__scroll::-webkit-scrollbar{display:none}.rm-tabbar__slot{display:inline-block;padding:16px 0}.rm-tabbar__tab{align-items:center;background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-12,12px);font-weight:700;gap:4px;padding:0;text-align:center;white-space:pre-line}.rm-tabbar__tab.is-active,.rm-tabbar__tab:hover{color:var(--text-primary)}.rm-tabbar__tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-tabbar__bar{background:var(--color-primary);bottom:0;height:3px;left:0;position:absolute;transition:transform .3s cubic-bezier(.645,.045,.355,1),width .3s ease;z-index:0}.rm-tabbar__arrow{align-items:center;background:var(--bg-surface);border:none;color:var(--text-muted);cursor:pointer;display:flex;height:calc(100% - 8px);padding:4px 12px;position:absolute;top:0;z-index:2}.rm-tabbar__arrow--left{border-right:1px solid var(--border-soft);box-shadow:4px 0 10px rgba(var(--shadow-rgb,62 63 94),.04);left:0}.rm-tabbar__arrow--right{border-left:1px solid var(--border-soft);box-shadow:-4px 0 10px rgba(var(--shadow-rgb,62 63 94),.04);right:0}@media (prefers-reduced-motion:reduce){.rm-tabbar__bar{transition:none}}
+</style>

package/package.json

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

package/dist/runtime/components/Sidebar.vue

@@ -1,143 +0,0 @@
-<script setup lang="ts">
-export interface RmSidebarMenuItem {
-  /** Display label */
-  label: string
-  /** Phosphor icon name (e.g. "ChartBar", "Flask") */
-  icon: string
-  /** Navigation path (if no children) */
-  to?: string
-  /** Sub-menu items */
-  children?: RmSidebarMenuItem[]
-}
-
-export interface RmSidebarProps {
-  /** Application name displayed in the header */
-  name: string
-  /** Menu items */
-  menus: RmSidebarMenuItem[]
-  /** Whether the sidebar is open */
-  open?: boolean
-}
-
-const props = withDefaults(defineProps<RmSidebarProps>(), {
-  open: true,
-})
-
-defineEmits<{
-  toggle: []
-}>()
-
-const route = useRoute()
-const router = useRouter()
-const expandedMenu = ref<string | null>(null)
-
-function onSubmenuEnter(el: Element) {
-  const element = el as HTMLElement
-  element.style.height = '0'
-  element.style.overflow = 'hidden'
-  element.offsetHeight // force reflow
-  element.style.transition = 'height 250ms ease, opacity 250ms ease'
-  element.style.opacity = '0'
-  element.style.height = element.scrollHeight + 'px'
-  element.style.opacity = '1'
-}
-
-function onSubmenuAfterEnter(el: Element) {
-  const element = el as HTMLElement
-  element.style.height = ''
-  element.style.overflow = ''
-  element.style.transition = ''
-  element.style.opacity = ''
-}
-
-function onSubmenuLeave(el: Element) {
-  const element = el as HTMLElement
-  element.style.height = element.scrollHeight + 'px'
-  element.style.overflow = 'hidden'
-  element.offsetHeight // force reflow
-  element.style.transition = 'height 200ms ease, opacity 200ms ease'
-  element.style.height = '0'
-  element.style.opacity = '0'
-}
-
-function onSubmenuAfterLeave(el: Element) {
-  const element = el as HTMLElement
-  element.style.height = ''
-  element.style.overflow = ''
-  element.style.transition = ''
-  element.style.opacity = ''
-}
-
-function isActive(item: RmSidebarMenuItem): boolean {
-  if (item.to) return route.path === item.to
-  return item.children?.some(c => isActive(c)) ?? false
-}
-
-function handleClick(item: RmSidebarMenuItem) {
-  if (item.children) {
-    expandedMenu.value = expandedMenu.value === item.label ? null : item.label
-  }
-  else if (item.to) {
-    router.push(item.to)
-  }
-}
-</script>
-
-<template>
-  <aside class="rm-sidebar" :class="{ 'rm-sidebar--collapsed': !open }">
-    <div class="rm-sidebar__header">
-      <div v-if="open" class="rm-sidebar__brand">
-        <RmIcon name="DiamondsFour" :size="22" weight="duotone" class="rm-sidebar__logo" />
-        <span class="rm-sidebar__name">{{ name }}</span>
-      </div>
-      <button class="rm-sidebar__toggle" @click="$emit('toggle')">
-        <RmIcon name="SidebarSimple" :size="20" />
-      </button>
-    </div>
-
-    <nav class="rm-sidebar__nav">
-      <template v-for="item in menus" :key="item.label">
-        <RmNavLink
-          :icon="item.icon"
-          :label="open ? item.label : ''"
-          :active="isActive(item)"
-          :caret="item.children && open ? 'expand' : 'none'"
-          :expanded="expandedMenu === item.label"
-          @click="handleClick(item)"
-        />
-
-        <Transition
-          @enter="onSubmenuEnter"
-          @after-enter="onSubmenuAfterEnter"
-          @leave="onSubmenuLeave"
-          @after-leave="onSubmenuAfterLeave"
-        >
-          <div
-            v-if="open && item.children && expandedMenu === item.label"
-            class="rm-sidebar__submenu"
-          >
-            <RmNavLink
-              v-for="(child, idx) in item.children"
-              :key="child.label"
-              :icon="child.icon"
-              :label="child.label"
-              :active="isActive(child)"
-              :expandable="false"
-              :style="{ animationDelay: `${idx * 50}ms` }"
-              class="rm-sidebar__submenu-item"
-              @click="child.to && router.push(child.to)"
-            />
-          </div>
-        </Transition>
-      </template>
-    </nav>
-
-    <div v-if="$slots.footer" class="rm-sidebar__footer">
-      <slot name="footer" />
-    </div>
-  </aside>
-</template>
-
-<style scoped>
-.rm-sidebar{background-color:var(--color-text-inverse);border-right:1px solid var(--border-default);bottom:0;display:flex;flex-direction:column;left:0;overflow-y:auto;position:fixed;top:0;transition:width var(--duration-base) var(--ease-in-out);width:240px;z-index:50}.rm-sidebar--collapsed{width:64px}.rm-sidebar__header{align-items:center;border-bottom:1px solid var(--border-default);display:flex;justify-content:space-between;min-height:64px;padding:0 16px}.rm-sidebar__brand{align-items:center;display:flex;gap:8px}.rm-sidebar__logo{color:var(--color-healthcare)}.rm-sidebar__name{color:var(--text-primary);font-family:var(--font-sans);font-size:16px;font-weight:700;white-space:nowrap}.rm-sidebar__toggle{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;justify-content:center;padding:4px}.rm-sidebar__toggle:hover{background-color:var(--bg-surface-3)}.rm-sidebar__nav{display:flex;flex:1;flex-direction:column;gap:6px;padding:8px}.rm-sidebar__submenu{display:flex;flex-direction:column;gap:6px;padding-left:20px}.rm-sidebar__submenu-item{animation:rm-submenu-fade-in .25s ease both}@keyframes rm-submenu-fade-in{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.rm-sidebar__footer{border-top:1px solid var(--border-default);padding:12px}
-</style>