@eturnity/eturnity_reusable_components 9.19.8 → 9.19.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.19.8",
+  "version": "9.19.10",
   "files": [
     "dist",
     "src"

package/src/components/icon/Icon.vue

@@ -250,7 +250,12 @@
   const icon = reactive({ html: '' })
 
   const loadSvg = async () => {
-    let svgString = await fetchIcon(props.name.toLowerCase())
+    const raw = props.name
+    if (raw == null || String(raw).trim() === '') {
+      icon.html = ''
+      return
+    }
+    let svgString = await fetchIcon(String(raw).toLowerCase())
     if (props.svgRotation) svgString = rotateSvg(svgString, props.svgRotation)
     icon.html = svgString
   }

package/src/components/icon/iconCache.mjs

@@ -1,23 +1,53 @@
+/**
+ * Load SVG icon markup by file stem (lowercase), matching files in
+ * `src/assets/svgIcons/<stem>.svg`.
+ *
+ * Uses `import.meta.glob` instead of `new URL(..., import.meta.url)` + `fetch`
+ * so Vite does not emit a broken asset URL when this package is linked via
+ * `@fs/...` (which previously produced requests like `.../icon/undefined`).
+ */
+const rawIconModules = import.meta.glob('../../assets/svgIcons/*.svg', {
+  query: '?raw',
+  import: 'default',
+})
+
+const iconLoadersByStem = {}
+for (const path of Object.keys(rawIconModules)) {
+  const normalized = path.replace(/\\/g, '/')
+  const match = normalized.match(/\/([^/]+)\.svg$/i)
+  if (!match) continue
+  iconLoadersByStem[match[1].toLowerCase()] = rawIconModules[path]
+}
+
 const iconCache = {}
 
 export const fetchIcon = async (fileName) => {
-  if (iconCache[fileName]) {
-    return iconCache[fileName]
+  if (fileName == null) {
+    console.warn('fetchIcon called with null or undefined fileName')
+    return ''
   }
 
-  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
-  const fetchUrl = new URL(
-    `../../assets/svgIcons/${fileName}.svg`,
-    import.meta.url
-  ).href
+  const stem = String(fileName).trim().toLowerCase()
+  if (!stem) {
+    return ''
+  }
 
-  try {
-    const response = await fetch(fetchUrl)
-    const rawFile = await response.text()
-    iconCache[fileName] = rawFile
+  if (iconCache[stem]) {
+    return iconCache[stem]
+  }
+
+  const loader = iconLoadersByStem[stem]
+  if (!loader) {
+    console.error(`Unknown icon SVG: ${stem}.svg`)
+    return ''
+  }
 
+  try {
+    const rawFile = await loader()
+    iconCache[stem] = rawFile
     return rawFile
   } catch (error) {
-    console.error(`Failed to load ${fileName}.svg`)
+    console.error(`Failed to load ${stem}.svg`, error)
+    return ''
   }
 }

package/src/components/navigationSideMenu/index.vue

@@ -137,11 +137,16 @@
                         :is-disabled="item.isDisabled"
                         @click="
                           !item.isDisabled &&
-                            $emit('on-menu-item-click', { item })
+                          $emit('on-menu-item-click', { item })
                         "
                       >
                         <IconCell :is-collapsed="isCollapsed">
+                          <NavMenuStatusDot
+                            v-if="item.statusDotBackgroundColor"
+                            :background-color="item.statusDotBackgroundColor"
+                          />
                           <IconComponent
+                            v-if="item.icon"
                             :color="
                               item.id === activeItemId
                                 ? theme.semanticColors.purple[500]
@@ -169,7 +174,7 @@
                         type="tertiary"
                         @click="
                           !item.isDisabled &&
-                            $emit('on-menu-item-click', { item })
+                          $emit('on-menu-item-click', { item })
                         "
                       />
                     </template>
@@ -186,7 +191,12 @@
                         @click="!item.isDisabled && toggleDropdown(item.id)"
                       >
                         <IconCell :is-collapsed="isCollapsed">
+                          <NavMenuStatusDot
+                            v-if="item.statusDotBackgroundColor"
+                            :background-color="item.statusDotBackgroundColor"
+                          />
                           <IconComponent
+                            v-if="item.icon"
                             :color="
                               item.id === activeParentId
                                 ? theme.semanticColors.purple[500]
@@ -234,7 +244,7 @@
                           :is-disabled="sub.isDisabled"
                           @click="
                             !sub.isDisabled &&
-                              $emit('on-menu-item-click', { item: sub })
+                            $emit('on-menu-item-click', { item: sub })
                           "
                         >
                           <span>{{ sub.name }}</span>
@@ -297,8 +307,8 @@
       p.isCollapsed
         ? `${NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX}px`
         : p.expandedWidth
-        ? `${p.expandedWidth}px`
-        : 'max-content'};
+          ? `${p.expandedWidth}px`
+          : 'max-content'};
     min-width: ${(p) =>
       p.isCollapsed ? `${NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX}px` : '0'};
     border-right: 1px solid ${(p) => p.theme.semanticColors.grey[300]};
@@ -486,9 +496,23 @@
     justify-content: center;
     flex-shrink: 0;
     width: 24px;
+    position: relative;
     ${(p) => p.isCollapsed && 'width: 100%;'}
   `
 
+  const NavMenuStatusDotAttrs = { backgroundColor: String }
+  const NavMenuStatusDot = styled('div', NavMenuStatusDotAttrs)`
+    position: absolute;
+    z-index: 1;
+    background: ${(p) =>
+      p.backgroundColor || p.theme.semanticColors.green[500]};
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    top: -2px;
+    right: 0;
+  `
+
   const ItemLabel = styled.div`
     white-space: nowrap;
     font-size: 14px;
@@ -738,6 +762,7 @@
       ItemList,
       MenuItem,
       IconCell,
+      NavMenuStatusDot,
       ItemLabel,
       ChevronCell,
       CollapseWrapper,