@eturnity/eturnity_reusable_components 9.19.9 → 9.19.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -137,10 +137,14 @@
|
|
|
137
137
|
:is-disabled="item.isDisabled"
|
|
138
138
|
@click="
|
|
139
139
|
!item.isDisabled &&
|
|
140
|
-
|
|
140
|
+
$emit('on-menu-item-click', { item })
|
|
141
141
|
"
|
|
142
142
|
>
|
|
143
143
|
<IconCell :is-collapsed="isCollapsed">
|
|
144
|
+
<NavMenuStatusDot
|
|
145
|
+
v-if="item.statusDotBackgroundColor"
|
|
146
|
+
:background-color="item.statusDotBackgroundColor"
|
|
147
|
+
/>
|
|
144
148
|
<IconComponent
|
|
145
149
|
v-if="item.icon"
|
|
146
150
|
:color="
|
|
@@ -170,7 +174,7 @@
|
|
|
170
174
|
type="tertiary"
|
|
171
175
|
@click="
|
|
172
176
|
!item.isDisabled &&
|
|
173
|
-
|
|
177
|
+
$emit('on-menu-item-click', { item })
|
|
174
178
|
"
|
|
175
179
|
/>
|
|
176
180
|
</template>
|
|
@@ -187,6 +191,10 @@
|
|
|
187
191
|
@click="!item.isDisabled && toggleDropdown(item.id)"
|
|
188
192
|
>
|
|
189
193
|
<IconCell :is-collapsed="isCollapsed">
|
|
194
|
+
<NavMenuStatusDot
|
|
195
|
+
v-if="item.statusDotBackgroundColor"
|
|
196
|
+
:background-color="item.statusDotBackgroundColor"
|
|
197
|
+
/>
|
|
190
198
|
<IconComponent
|
|
191
199
|
v-if="item.icon"
|
|
192
200
|
:color="
|
|
@@ -236,7 +244,7 @@
|
|
|
236
244
|
:is-disabled="sub.isDisabled"
|
|
237
245
|
@click="
|
|
238
246
|
!sub.isDisabled &&
|
|
239
|
-
|
|
247
|
+
$emit('on-menu-item-click', { item: sub })
|
|
240
248
|
"
|
|
241
249
|
>
|
|
242
250
|
<span>{{ sub.name }}</span>
|
|
@@ -299,8 +307,8 @@
|
|
|
299
307
|
p.isCollapsed
|
|
300
308
|
? `${NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX}px`
|
|
301
309
|
: p.expandedWidth
|
|
302
|
-
|
|
303
|
-
|
|
310
|
+
? `${p.expandedWidth}px`
|
|
311
|
+
: 'max-content'};
|
|
304
312
|
min-width: ${(p) =>
|
|
305
313
|
p.isCollapsed ? `${NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX}px` : '0'};
|
|
306
314
|
border-right: 1px solid ${(p) => p.theme.semanticColors.grey[300]};
|
|
@@ -488,9 +496,23 @@
|
|
|
488
496
|
justify-content: center;
|
|
489
497
|
flex-shrink: 0;
|
|
490
498
|
width: 24px;
|
|
499
|
+
position: relative;
|
|
491
500
|
${(p) => p.isCollapsed && 'width: 100%;'}
|
|
492
501
|
`
|
|
493
502
|
|
|
503
|
+
const NavMenuStatusDotAttrs = { backgroundColor: String }
|
|
504
|
+
const NavMenuStatusDot = styled('div', NavMenuStatusDotAttrs)`
|
|
505
|
+
position: absolute;
|
|
506
|
+
z-index: 1;
|
|
507
|
+
background: ${(p) =>
|
|
508
|
+
p.backgroundColor || p.theme.semanticColors.green[500]};
|
|
509
|
+
width: 8px;
|
|
510
|
+
height: 8px;
|
|
511
|
+
border-radius: 100%;
|
|
512
|
+
top: -2px;
|
|
513
|
+
right: 0;
|
|
514
|
+
`
|
|
515
|
+
|
|
494
516
|
const ItemLabel = styled.div`
|
|
495
517
|
white-space: nowrap;
|
|
496
518
|
font-size: 14px;
|
|
@@ -740,6 +762,7 @@
|
|
|
740
762
|
ItemList,
|
|
741
763
|
MenuItem,
|
|
742
764
|
IconCell,
|
|
765
|
+
NavMenuStatusDot,
|
|
743
766
|
ItemLabel,
|
|
744
767
|
ChevronCell,
|
|
745
768
|
CollapseWrapper,
|