@eturnity/eturnity_reusable_components 9.19.9 → 9.19.11

package/package.json

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

package/src/components/filter/filterSettings.vue

@@ -155,6 +155,7 @@
                   <DropdownCheckboxContainer
                     v-for="(filterOption, optionIdx) in filter.choices"
                     :key="optionIdx + 'optionIdx'"
+                    :data-value="selectOptionDomDataValue(filterOption.choice)"
                     @click.stop
                   >
                     <Checkbox
@@ -773,6 +774,13 @@
       isDateSelector(type) {
         return type === 'datetime' || type === 'date_range'
       },
+      /** Align with RC Select Option `domDataValue` so dropdown search can find rows via `[data-value]`. */
+      selectOptionDomDataValue(choice) {
+        if (choice === null || choice === undefined) {
+          return '__rc_select_null__'
+        }
+        return String(choice)
+      },
     },
   }
 </script>

package/src/components/navigationSideMenu/index.vue

@@ -137,10 +137,14 @@
                         :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="
@@ -170,7 +174,7 @@
                         type="tertiary"
                         @click="
                           !item.isDisabled &&
-                            $emit('on-menu-item-click', { item })
+                          $emit('on-menu-item-click', { item })
                         "
                       />
                     </template>
@@ -187,6 +191,10 @@
                         @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="
@@ -236,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>
@@ -299,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]};
@@ -488,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;
@@ -740,6 +762,7 @@
       ItemList,
       MenuItem,
       IconCell,
+      NavMenuStatusDot,
       ItemLabel,
       ChevronCell,
       CollapseWrapper,