@tekkare/romulus 0.1.78 → 0.1.79

package/dist/module.json

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

package/dist/runtime/components/ComplexSelect.vue

@@ -27,6 +27,7 @@
 -->
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { PhCaretDown, PhInfo, PhMagnifyingGlass, PhMinusCircle, PhPlusCircle } from '@phosphor-icons/vue'
 import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
 
 export interface RmComplexSelectPreset {
@@ -254,7 +255,7 @@ onUnmounted(() => {
     <p class="rm-csel__label">
       {{ label }}
       <button v-if="labelInfo" type="button" class="rm-csel__info" @click="emit('openInfo')">
-        <RmIcon name="Info" :size="14" />
+        <PhInfo :size="14" />
       </button>
     </p>
 
@@ -275,7 +276,7 @@ onUnmounted(() => {
       <span v-if="showAmount && selected.length > 0" class="rm-csel__count">
         {{ selected.length > 99 ? '99+' : selected.length }}
       </span>
-      <RmIcon name="CaretDown" :size="16" />
+      <PhCaretDown :size="16" />
     </button>
 
     <div
@@ -316,7 +317,7 @@ onUnmounted(() => {
         </div>
 
         <div class="rm-csel__search">
-          <RmIcon name="MagnifyingGlass" :size="14" />
+          <PhMagnifyingGlass :size="14" />
           <input
             ref="addRef"
             v-model="addSearch"
@@ -342,7 +343,7 @@ onUnmounted(() => {
             class="rm-csel__option rm-csel__option--add"
             @click="add(option)"
           >
-            <RmIcon name="PlusCircle" :size="16" weight="fill" />
+            <PhPlusCircle :size="16" weight="fill" />
             <span>{{ option }}</span>
           </button>
         </div>
@@ -362,7 +363,7 @@ onUnmounted(() => {
         </div>
 
         <div class="rm-csel__search">
-          <RmIcon name="MagnifyingGlass" :size="14" />
+          <PhMagnifyingGlass :size="14" />
           <input
             v-model="removeSearch"
             type="search"
@@ -384,7 +385,7 @@ onUnmounted(() => {
             class="rm-csel__option rm-csel__option--remove"
             @click="remove(option)"
           >
-            <RmIcon name="MinusCircle" :size="16" weight="fill" />
+            <PhMinusCircle :size="16" weight="fill" />
             <span>{{ option }}</span>
           </button>
         </div>

package/dist/runtime/components/DropdownSelect.vue

@@ -27,6 +27,7 @@
 -->
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { PhCaretDown, PhCaretUpDown, PhCheckCircle, PhCircle, PhMagnifyingGlass } from '@phosphor-icons/vue'
 import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
 
 const props = withDefaults(defineProps<{
@@ -187,12 +188,12 @@ onUnmounted(() => {
           {{ selected || emptyLabel || t.empty }}
         </span>
       </RmTooltip>
-      <RmIcon :name="sortIcon ? 'CaretUpDown' : 'CaretDown'" :size="16" />
+      <component :is="sortIcon ? PhCaretUpDown : PhCaretDown" :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" />
+        <PhMagnifyingGlass :size="16" />
         <input
           ref="searchRef"
           v-model="searchTerm"
@@ -222,8 +223,8 @@ onUnmounted(() => {
           @click="pick(option)"
           @mousemove="activeIndex = index"
         >
-          <RmIcon
-            :name="option === selected ? 'CheckCircle' : 'Circle'"
+          <component
+            :is="option === selected ? PhCheckCircle : PhCircle"
             :size="16"
             :weight="option === selected ? 'fill' : 'regular'"
           />

package/dist/runtime/components/Icon.vue

@@ -1,14 +1,24 @@
+<!--
+  RmIcon - une icone Phosphor designee par son nom.
+
+  Le composant charge le paquet d'icones a la demande : l'embarquer en entier
+  dans le premier rendu pesait plus lourd que tout le reste du panneau.
+
+  Les composants resolus sont gardes dans un cache commun a la page. Sans lui,
+  chaque instance fabriquait son propre composant asynchrone, meme pour une
+  icone deja chargee : une liste de trois cents lignes posait trois cents
+  attentes, et les icones apparaissaient apres le texte.
+-->
 <script setup lang="ts">
-import { computed, defineAsyncComponent, type Component } from 'vue'
+import { computed, defineAsyncComponent, shallowRef, type Component } from 'vue'
 
 export interface RmIconProps {
-  /** Phosphor icon name without the "Ph" prefix (e.g. "House", "Gear", "ChartBar") */
+  /** Nom Phosphor sans le prefixe « Ph » (« House », « Gear », « ChartBar »). */
   name: string
-  /** Icon size in pixels */
+  /** Taille en pixels. */
   size?: number
-  /** Icon weight: thin, light, regular, bold, fill, duotone */
+  /** Graisse du trait. `fill` donne la forme pleine. */
   weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
-  /** Icon color */
   color?: string
 }
 
@@ -18,14 +28,36 @@ const props = withDefaults(defineProps<RmIconProps>(), {
   color: undefined,
 })
 
-const iconComponent = computed<Component>(() => {
-  const iconName = `Ph${props.name}`
-  return defineAsyncComponent(() =>
-    import('@phosphor-icons/vue').then((mod) => {
-      return (mod as Record<string, Component>)[iconName] || mod.PhQuestion
-    }),
-  )
-})
+/**
+ * Un composant asynchrone par nom d'icone, partage par toutes les instances.
+ * Une fois le paquet charge, le composant garde sa resolution et se pose sans
+ * attente au montage suivant.
+ */
+const cache = new Map<string, Component>()
+
+/** Le module, demande une seule fois quel que soit le nombre d'icones. */
+const iconModule = shallowRef<Promise<Record<string, Component>>>()
+
+function loadIcons() {
+  if (!iconModule.value) {
+    iconModule.value = import('@phosphor-icons/vue') as unknown as Promise<Record<string, Component>>
+  }
+  return iconModule.value
+}
+
+function resolve(name: string) {
+  const key = `Ph${name}`
+  let component = cache.get(key)
+  if (!component) {
+    component = defineAsyncComponent(() =>
+      loadIcons().then(mod => mod[key] || mod.PhQuestion),
+    )
+    cache.set(key, component)
+  }
+  return component
+}
+
+const iconComponent = computed(() => resolve(props.name))
 </script>
 
 <template>
@@ -36,6 +68,8 @@ const iconComponent = computed<Component>(() => {
       :weight="weight"
       :color="color"
     />
+    <!-- La place est reservee des le premier rendu : sans elle, le texte se
+         decale lateralement quand l'icone arrive. -->
     <template #fallback>
       <span :style="{ display: 'inline-block', width: size + 'px', height: size + 'px' }" />
     </template>

package/dist/runtime/components/MultipleSelect.vue

@@ -25,6 +25,7 @@
 -->
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { PhCaretDown, PhCheckSquare, PhInfo, PhMagnifyingGlass, PhSquare } from '@phosphor-icons/vue'
 import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
 
 const props = withDefaults(defineProps<{
@@ -175,7 +176,7 @@ onUnmounted(() => {
     <p class="rm-msel__label">
       {{ label }}
       <button v-if="labelInfo" type="button" class="rm-msel__info" @click="emit('openInfo')">
-        <RmIcon name="Info" :size="14" />
+        <PhInfo :size="14" />
       </button>
     </p>
 
@@ -196,12 +197,12 @@ onUnmounted(() => {
       <span v-if="showAmount && selected.length > 0" class="rm-msel__count">
         {{ selected.length > 99 ? '99+' : selected.length }}
       </span>
-      <RmIcon name="CaretDown" :size="16" />
+      <PhCaretDown :size="16" />
     </button>
 
     <div v-show="isOpen" class="rm-msel__panel" @click.stop>
       <div v-if="search" class="rm-msel__search">
-        <RmIcon name="MagnifyingGlass" :size="16" />
+        <PhMagnifyingGlass :size="16" />
         <input
           ref="searchRef"
           v-model="searchTerm"
@@ -230,8 +231,8 @@ onUnmounted(() => {
           :aria-checked="allSelected"
           @click="toggleAll"
         >
-          <RmIcon
-            :name="allSelected ? 'CheckSquare' : 'Square'"
+          <component
+            :is="allSelected ? PhCheckSquare : PhSquare"
             :size="16"
             :weight="allSelected ? 'fill' : 'regular'"
           />
@@ -249,8 +250,8 @@ onUnmounted(() => {
             :aria-checked="selected.includes(option)"
             @click="toggleOption(option)"
           >
-            <RmIcon
-              :name="selected.includes(option) ? 'CheckSquare' : 'Square'"
+            <component
+              :is="selected.includes(option) ? PhCheckSquare : PhSquare"
               :size="16"
               :weight="selected.includes(option) ? 'fill' : 'regular'"
             />

package/package.json

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