@tekkare/romulus 0.1.70 → 0.1.72

package/dist/module.json

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

package/dist/runtime/components/AppSidebar.vue

@@ -8,7 +8,6 @@
   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 ;
-  - 
   - `RmSidebarLeft` pour le chrome du portail, decrit par une prop `sections` ;
   - `RmSidebarRight` pour le rail d'icones.
 

package/dist/runtime/components/Collapse.vue

@@ -0,0 +1,67 @@
+<!--
+  RmCollapse - section repliable posee dans le flux, avec un compteur.
+
+  Un titre, un compteur de ce que la section contient, un chevron, et le
+  contenu en dessous. C'est le pendant en liste de `RmAccordionMenu`, qui ne
+  sait replier qu'un menu de navigation : ici la section ne porte pas des
+  entrees de nav mais n'importe quel contenu, et son intitule est une entete
+  de contenu, pas un lien.
+
+  L'entete est un `<button aria-expanded>` relie a son contenu par
+  `aria-controls` : la section est atteignable au clavier et annoncee comme
+  repliable. Le contenu replie est retire du DOM, il ne reste donc pas dans
+  l'ordre de tabulation.
+
+  Le compteur double le titre, il ne le remplace pas : « Prix » reste lisible
+  sans lui.
+-->
+<script setup lang="ts">
+import { useId } from 'vue'
+
+withDefaults(
+  defineProps<{
+    /** Intitule de la section. */
+    title: string
+    /** Nombre affiche dans la pastille. Absent, aucune pastille. */
+    count?: number | string
+    /** Icone Phosphor posee devant le titre. */
+    icon?: string
+  }>(),
+  { count: undefined, icon: undefined },
+)
+
+/** Etat replie. Liable en `v-model` quand la page veut le piloter. */
+const open = defineModel<boolean>({ default: true })
+
+const bodyId = `rm-collapse-${useId()}`
+</script>
+
+<template>
+  <section class="rm-collapse" :class="{ 'rm-collapse--open': open }">
+    <button
+      class="rm-collapse__head"
+      type="button"
+      :aria-expanded="open"
+      :aria-controls="bodyId"
+      @click="open = !open"
+    >
+      <!-- Le chevron est enveloppe : `RmIcon` rend l'icone Phosphor, dont la
+           racine ne porte pas l'identifiant de portee, et la regle de rotation
+           ne l'atteindrait pas. -->
+      <span class="rm-collapse__chevron">
+        <RmIcon name="CaretRight" :size="14" />
+      </span>
+      <RmIcon v-if="icon" class="rm-collapse__icon" :name="icon" :size="16" />
+      <span class="rm-collapse__title">{{ title }}</span>
+      <span v-if="count !== undefined" class="rm-collapse__count">{{ count }}</span>
+    </button>
+
+    <div v-if="open" :id="bodyId" class="rm-collapse__body">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.rm-collapse{align-self:stretch;display:flex;flex-direction:column;font-family:var(--font-sans);width:100%}.rm-collapse__head{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-semibold);gap:var(--space-8);padding:var(--space-8);text-align:left;width:100%}.rm-collapse__head:hover{background:var(--bg-hover)}.rm-collapse__head:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}.rm-collapse__chevron{color:var(--text-muted);display:inline-flex;flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.rm-collapse--open .rm-collapse__chevron{transform:rotate(90deg)}.rm-collapse__icon{color:var(--text-muted);flex-shrink:0}.rm-collapse__title{flex:1}.rm-collapse__count{background:var(--bg-surface-3);border-radius:999px;color:var(--text-secondary);flex-shrink:0;font-size:var(--font-11);font-weight:var(--weight-medium);min-width:20px;padding:1px var(--space-8);text-align:center}.rm-collapse__body{padding:var(--space-4) 0 var(--space-8)}
+</style>

package/dist/runtime/components/Drawer.vue

@@ -5,8 +5,12 @@ import { useRmDialog } from '../composables/useRmDialog'
 export interface RmDrawerProps {
   /** Whether the drawer is open */
   modelValue: boolean
-  /** Drawer size */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  /**
+   * Largeur : une taille nommee (sm 360, md 480, lg 640, xl 860, full 100%),
+   * ou n'importe quelle largeur CSS quand aucune ne convient — le composant
+   * l'accepte deja, le type le disait mal.
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {})
   /** Position */
   side?: 'right' | 'left'
   /** Show overlay behind the drawer */

package/dist/runtime/components/DropdownSelect.vue

@@ -0,0 +1,228 @@
+<!--
+  RmDropdownSelect - champ de filtre a choix unique.
+
+  Reprend `arg-dropdown-select` d'Auriga : un intitule, un champ qui montre la
+  valeur retenue, et un panneau qui liste les valeurs possibles avec, au
+  besoin, une recherche.
+
+  Laquelle prendre : celle-ci pour un choix unique pose dans un panneau de
+  filtres (periode, tri, devise) ; `RmFilterDropdown` pour la pastille d'une
+  barre de filtres ; `RmMultipleSelect` quand plusieurs valeurs peuvent tenir
+  ensemble.
+
+  Trois choses changent par rapport a Auriga.
+
+  La valeur est un `v-model` sur la chaine retenue, plus un index
+  (`default_select`) double d'un drapeau `return_value` : l'appelant passait
+  systematiquement `options.indexOf(valeur)` pour retrouver ce qu'il avait
+  deja, et une valeur absente de la liste donnait l'index -1, donc un champ
+  vide sans explication.
+
+  La liste est un `role="listbox"` navigable au clavier (fleches, Entree,
+  Echap) : chez Auriga c'etait une pile de `div` cliquables, hors d'atteinte
+  au clavier.
+
+  Les libelles du chrome sont dans le composant plutot que charges depuis des
+  JSON de locale au montage.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Intitule pose au-dessus du champ. */
+  label: string
+  options: string[]
+  /** Champ de recherche en tete du panneau. */
+  search?: boolean
+  disabled?: boolean
+  /** Liste en cours de chargement : le panneau montre son attente. */
+  loading?: boolean
+  /** Chevrons haut-bas au lieu du chevron bas, pour un choix de tri. */
+  sortIcon?: boolean
+  /** Texte du champ quand rien n'est retenu. */
+  emptyLabel?: string
+  /** Texte du panneau quand la liste est vide. */
+  emptyContent?: string
+  searchPlaceholder?: string
+  /**
+   * Filtrage local de la liste sur la saisie. A passer a `false` quand les
+   * options arrivent deja filtrees du serveur : sinon un resultat trouve a
+   * distance mais dont le libelle ne contient pas la saisie (un synonyme,
+   * une marque cherchee par sa molecule) est refiltre puis efface a l'ecran.
+   */
+  filterSearch?: boolean
+  /** Le panneau se ferme des qu'une valeur est prise. */
+  closeOnClick?: boolean
+  lang?: 'fr' | 'en'
+}>(), {
+  search: true,
+  disabled: false,
+  loading: false,
+  sortIcon: false,
+  emptyLabel: undefined,
+  emptyContent: undefined,
+  searchPlaceholder: undefined,
+  filterSearch: true,
+  closeOnClick: true,
+  lang: 'fr',
+})
+
+const emit = defineEmits<{
+  /** Valeur retenue. Double le `v-model`, pour les effets de bord. */
+  change: [value: string]
+  /** Saisie de recherche, amortie a 500 ms. */
+  search: [value: string]
+}>()
+
+const selected = defineModel<string | undefined>({ default: undefined })
+
+const WORDS = {
+  fr: { empty: 'Aucune sélection', search: 'Rechercher...', notFound: 'Aucun résultat', loading: 'Chargement' },
+  en: { empty: 'No selection', search: 'Search...', notFound: 'No result', loading: 'Loading' },
+} as const
+
+const t = computed(() => WORDS[props.lang])
+
+const isOpen = ref(false)
+const searchTerm = ref('')
+const activeIndex = ref(-1)
+const rootRef = ref<HTMLElement>()
+const searchRef = ref<HTMLInputElement>()
+
+const visibleOptions = computed(() => {
+  const needle = searchTerm.value.trim().toLowerCase()
+  if (!needle || !props.filterSearch) return props.options
+  // Une saisie en plusieurs mots vaut « tous ces mots », dans n'importe quel
+  // ordre : « keytruda 25 » doit trouver « 25 MG KEYTRUDA ».
+  const parts = needle.split(' ').filter(Boolean)
+  return props.options.filter(option => parts.every(part => option.toLowerCase().includes(part)))
+})
+
+/** La recherche part au serveur amortie : une frappe par lettre le noierait. */
+let debounceId: ReturnType<typeof setTimeout> | undefined
+watch(searchTerm, (value) => {
+  clearTimeout(debounceId)
+  debounceId = setTimeout(() => emit('search', value), 500)
+})
+
+function close() {
+  isOpen.value = false
+  activeIndex.value = -1
+  document.removeEventListener('click', onDocumentClick)
+}
+
+function onDocumentClick(event: MouseEvent) {
+  if (!rootRef.value?.contains(event.target as Node)) close()
+}
+
+async function toggle() {
+  if (props.disabled) return
+  if (isOpen.value) return close()
+
+  isOpen.value = true
+  searchTerm.value = ''
+  activeIndex.value = props.options.indexOf(selected.value ?? '')
+  document.addEventListener('click', onDocumentClick)
+  if (!props.search) return
+  await nextTick()
+  searchRef.value?.focus()
+}
+
+function pick(option: string) {
+  selected.value = option
+  emit('change', option)
+  if (props.closeOnClick) close()
+}
+
+/** Les fleches parcourent la liste affichee, pas la liste complete. */
+function move(step: 1 | -1) {
+  const total = visibleOptions.value.length
+  if (total === 0) return
+  activeIndex.value = (activeIndex.value + step + total) % total
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') return close()
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    event.preventDefault()
+    if (!isOpen.value) return toggle()
+    return move(event.key === 'ArrowDown' ? 1 : -1)
+  }
+  if (event.key === 'Enter' && isOpen.value && activeIndex.value >= 0) {
+    event.preventDefault()
+    const option = visibleOptions.value[activeIndex.value]
+    if (option !== undefined) pick(option)
+  }
+}
+
+onUnmounted(() => {
+  clearTimeout(debounceId)
+  document.removeEventListener('click', onDocumentClick)
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="rm-dsel" @keydown="onKeydown">
+    <p class="rm-dsel__label">{{ label }}</p>
+
+    <button
+      type="button"
+      class="rm-dsel__field"
+      :class="{ 'is-open': isOpen, 'is-disabled': disabled }"
+      :disabled="disabled"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      @click.stop="toggle"
+    >
+      <RmTooltip :text="selected ?? ''" :disabled="!selected" class="rm-dsel__value-slot">
+        <span class="rm-dsel__value" :class="{ 'is-empty': !selected }">
+          {{ selected || emptyLabel || t.empty }}
+        </span>
+      </RmTooltip>
+      <RmIcon :name="sortIcon ? 'CaretUpDown' : 'CaretDown'" :size="16" />
+    </button>
+
+    <div v-show="isOpen" class="rm-dsel__panel" @click.stop>
+      <div v-if="search" class="rm-dsel__search">
+        <RmIcon name="MagnifyingGlass" :size="16" />
+        <input
+          ref="searchRef"
+          v-model="searchTerm"
+          type="search"
+          class="rm-dsel__search-input"
+          :placeholder="searchPlaceholder || t.search"
+          :aria-label="searchPlaceholder || t.search"
+        >
+      </div>
+
+      <p v-if="loading" class="rm-dsel__state" aria-busy="true">{{ t.loading }}</p>
+      <p v-else-if="visibleOptions.length === 0" class="rm-dsel__state">
+        {{ emptyContent || t.notFound }}
+      </p>
+
+      <ul v-else class="rm-dsel__list" role="listbox" :aria-label="label">
+        <li
+          v-for="(option, index) in visibleOptions"
+          :key="option"
+          role="option"
+          class="rm-dsel__option"
+          :class="{ 'is-selected': option === selected, 'is-active': index === activeIndex }"
+          :aria-selected="option === selected"
+          @click="pick(option)"
+          @mousemove="activeIndex = index"
+        >
+          <RmIcon
+            :name="option === selected ? 'CheckCircle' : 'Circle'"
+            :size="16"
+            :weight="option === selected ? 'fill' : 'regular'"
+          />
+          <span>{{ option }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-dsel{align-items:flex-start;display:flex;flex-direction:column;gap:4px;position:relative}.rm-dsel__label{color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-dsel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:4px;line-height:16px;padding:12px;text-align:left;width:196px}.rm-dsel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-dsel__field.is-open{border-color:var(--color-primary)}.rm-dsel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-dsel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-dsel__value-slot{display:block;flex:1;min-width:0}.rm-dsel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-dsel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-dsel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-dsel__panel{border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:320px;min-width:230px;padding:16px;position:absolute;top:100%;z-index:12}.rm-dsel__panel,.rm-dsel__search{background:var(--bg-surface);display:flex}.rm-dsel__search{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);gap:8px;padding:8px 12px}.rm-dsel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-dsel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input:focus-visible{outline:none}.rm-dsel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:16px;text-align:center}.rm-dsel__list{display:flex;flex-direction:column;list-style:none;margin:0;min-height:10px;overflow-y:auto;padding:0}.rm-dsel__list:not(:only-child){margin-top:16px}.rm-dsel__option{align-items:center;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;font-size:var(--font-14,14px);gap:8px;line-height:160%;margin:4px 0;min-height:24px;padding:2px 4px}.rm-dsel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__option.is-active{background:rgba(var(--brand-rgb),.05)}.rm-dsel__option.is-selected{font-weight:700}.rm-dsel__option.is-active :deep(svg),.rm-dsel__option.is-selected :deep(svg){color:var(--color-primary)}
+</style>

package/package.json

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