@eturnity/eturnity_reusable_components 9.19.7 → 9.19.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.19.7",
+  "version": "9.19.9",
   "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

@@ -49,45 +49,46 @@
                     @on-dropdown-close="onResponsibleSelectDropdownClose"
                     @on-dropdown-open="onResponsibleSelectDropdownOpen"
                   >
-                  <template #selector>
-                    <ResponsibleSelectorRow>
-                      <ResponsibleAvatar>{{
-                        responsibleInitials
-                      }}</ResponsibleAvatar>
-                      <ResponsibleTextStack>
-                        <ResponsibleRoleLabel>{{
-                          $gettext('responsible')
-                        }}</ResponsibleRoleLabel>
-                        <ResponsibleNameLine :title="responsibleDisplayName">{{
-                          responsibleDisplayName
-                        }}</ResponsibleNameLine>
-                      </ResponsibleTextStack>
-                    </ResponsibleSelectorRow>
-                  </template>
-                  <template #dropdown>
-                    <SelectOption
-                      v-for="(item, optionIdx) in projectManagerOptions"
-                      :key="
-                        item.id === null || item.id === undefined
-                          ? `pm_opt_none_${optionIdx}`
-                          : `pm_opt_${item.id}`
-                      "
-                      :data-id="`sidebar_responsible_option_${optionIdx + 1}`"
-                      :data-qa-id="`sidebar_responsible_option_${
-                        optionIdx + 1
-                      }`"
-                      :value="item.id"
-                    >
-                      <ResponsibleOptionRow>
-                        <ResponsibleOptionAvatar>{{
-                          initialsFromFullName(item.full_name)
-                        }}</ResponsibleOptionAvatar>
-                        <SelectOptionText :title="item.full_name">{{
-                          item.full_name
-                        }}</SelectOptionText>
-                      </ResponsibleOptionRow>
-                    </SelectOption>
-                  </template>
+                    <template #selector>
+                      <ResponsibleSelectorRow>
+                        <ResponsibleAvatar>{{
+                          responsibleInitials
+                        }}</ResponsibleAvatar>
+                        <ResponsibleTextStack>
+                          <ResponsibleRoleLabel>{{
+                            $gettext('responsible')
+                          }}</ResponsibleRoleLabel>
+                          <ResponsibleNameLine
+                            :title="responsibleDisplayName"
+                            >{{ responsibleDisplayName }}</ResponsibleNameLine
+                          >
+                        </ResponsibleTextStack>
+                      </ResponsibleSelectorRow>
+                    </template>
+                    <template #dropdown>
+                      <SelectOption
+                        v-for="(item, optionIdx) in projectManagerOptions"
+                        :key="
+                          item.id === null || item.id === undefined
+                            ? `pm_opt_none_${optionIdx}`
+                            : `pm_opt_${item.id}`
+                        "
+                        :data-id="`sidebar_responsible_option_${optionIdx + 1}`"
+                        :data-qa-id="`sidebar_responsible_option_${
+                          optionIdx + 1
+                        }`"
+                        :value="item.id"
+                      >
+                        <ResponsibleOptionRow>
+                          <ResponsibleOptionAvatar>{{
+                            initialsFromFullName(item.full_name)
+                          }}</ResponsibleOptionAvatar>
+                          <SelectOptionText :title="item.full_name">{{
+                            item.full_name
+                          }}</SelectOptionText>
+                        </ResponsibleOptionRow>
+                      </SelectOption>
+                    </template>
                   </SelectComponent>
                 </ResponsibleSelectSurface>
               </ResponsibleCard>
@@ -141,6 +142,7 @@
                       >
                         <IconCell :is-collapsed="isCollapsed">
                           <IconComponent
+                            v-if="item.icon"
                             :color="
                               item.id === activeItemId
                                 ? theme.semanticColors.purple[500]
@@ -186,6 +188,7 @@
                       >
                         <IconCell :is-collapsed="isCollapsed">
                           <IconComponent
+                            v-if="item.icon"
                             :color="
                               item.id === activeParentId
                                 ? theme.semanticColors.purple[500]
@@ -595,7 +598,7 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    margin-left: ${(p) => (p.isCollapsed ? '0' : '0')};
+    margin-left: ${(p) => (p.isCollapsed ? '0' : 'auto')};
   `
 
   const ResponsibleBlock = styled.div`