design-system-next 2.11.15 → 2.11.18
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/dist/design-system-next.es.js +2248 -2213
- package/dist/design-system-next.es.js.gz +0 -0
- package/dist/design-system-next.umd.js +12 -12
- package/dist/design-system-next.umd.js.gz +0 -0
- package/dist/main.css +1 -1
- package/dist/main.css.gz +0 -0
- package/dist/package.json.d.ts +1 -1
- package/package.json +1 -1
- package/src/assets/styles/tailwind.css +6 -18
- package/src/components/date-picker/date-range-picker/date-range-picker.vue +1 -0
- package/src/components/dropdown/dropdown.ts +4 -0
- package/src/components/dropdown/dropdown.vue +2 -0
- package/src/components/list/list.ts +4 -0
- package/src/components/list/list.vue +56 -37
- package/src/components/list/use-list.ts +1 -0
- package/src/components/sidenav/sidenav.ts +17 -18
- package/src/components/sidenav/sidenav.vue +211 -126
- package/src/components/sidenav/use-sidenav.ts +85 -76
- package/src/components/tooltip/tooltip.ts +6 -8
- package/src/components/tooltip/tooltip.vue +4 -1
|
@@ -11,13 +11,14 @@
|
|
|
11
11
|
:class="{
|
|
12
12
|
'spr-hidden-scrolls spr-flex spr-h-full spr-flex-col spr-justify-between spr-overflow-auto': true,
|
|
13
13
|
'spr-max-h-[calc(100vh-60px)]': props.notificationCount === null && props.requestCount === null,
|
|
14
|
-
'spr-max-h-[calc(100vh-194px)]':
|
|
15
|
-
|
|
14
|
+
'spr-max-h-[calc(100vh-194px)]':
|
|
15
|
+
(props.notificationCount && props.requestCount) || props.notificationCount === 0 || props.requestCount === 0,
|
|
16
|
+
'!spr-max-h-[calc(100vh-150px)]': props.requestCount === '' || props.notificationCount === '',
|
|
16
17
|
}"
|
|
17
18
|
>
|
|
18
|
-
<!-- Top Section -->
|
|
19
|
+
<!-- #region - Top Section -->
|
|
19
20
|
<div class="spr-grid spr-justify-center spr-gap-2 spr-px-3 spr-pb-4 spr-pt-4">
|
|
20
|
-
<!-- Logo -->
|
|
21
|
+
<!-- #region - Logo -->
|
|
21
22
|
<div
|
|
22
23
|
:class="[
|
|
23
24
|
'spr-grid spr-justify-center spr-p-2',
|
|
@@ -26,8 +27,9 @@
|
|
|
26
27
|
>
|
|
27
28
|
<slot name="logo-image" />
|
|
28
29
|
</div>
|
|
30
|
+
<!-- #endregion - Logo -->
|
|
29
31
|
|
|
30
|
-
<!-- Quick Actions -->
|
|
32
|
+
<!-- #region - Quick Actions -->
|
|
31
33
|
<Menu
|
|
32
34
|
v-if="props.quickActions && props.quickActions.length > 0"
|
|
33
35
|
v-model:shown="isQuckActionMenuVisible"
|
|
@@ -122,8 +124,9 @@
|
|
|
122
124
|
</div>
|
|
123
125
|
</template>
|
|
124
126
|
</Menu>
|
|
127
|
+
<!-- #endregion - Quick Actions -->
|
|
125
128
|
|
|
126
|
-
<!-- Search -->
|
|
129
|
+
<!-- #region - Search -->
|
|
127
130
|
<div
|
|
128
131
|
v-if="props.hasSearch"
|
|
129
132
|
id="sidenav_search"
|
|
@@ -131,17 +134,18 @@
|
|
|
131
134
|
'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out',
|
|
132
135
|
'hover:spr-background-color-hover',
|
|
133
136
|
'active:spr-background-color-single-active active:spr-scale-90',
|
|
134
|
-
'spr-
|
|
137
|
+
'spr-m-auto spr-box-border spr-max-h-9 spr-max-w-9',
|
|
135
138
|
]"
|
|
136
139
|
@click="emit('search', 'search-triggered')"
|
|
137
140
|
>
|
|
138
|
-
<Icon icon="ph:magnifying-glass" class="spr-h-[1.25em] spr-w-[1.25em]"/>
|
|
141
|
+
<Icon icon="ph:magnifying-glass" class="spr-h-[1.25em] spr-w-[1.25em]" />
|
|
139
142
|
</div>
|
|
143
|
+
<!-- #endregion - Search -->
|
|
140
144
|
|
|
141
|
-
<!-- Grouped Nav Links -->
|
|
145
|
+
<!-- #region - Grouped Nav Links -->
|
|
142
146
|
<template v-for="(navLink, navLinkIndex) in navLinks.top" :key="navLinkIndex">
|
|
143
147
|
<template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
|
|
144
|
-
<!-- Parent
|
|
148
|
+
<!-- #region - Parent Links with Menus -->
|
|
145
149
|
<template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
|
|
146
150
|
<Menu
|
|
147
151
|
aria-id="sidenav-menu-wrapper"
|
|
@@ -150,10 +154,11 @@
|
|
|
150
154
|
:triggers="['click', 'hover']"
|
|
151
155
|
instant-move
|
|
152
156
|
>
|
|
157
|
+
<!-- #region - Parent Links -->
|
|
153
158
|
<div
|
|
154
159
|
:id="`${generateId(parentLink.title)}`"
|
|
155
160
|
:class="{
|
|
156
|
-
'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out
|
|
161
|
+
'spr-m-auto spr-box-border spr-flex spr-max-h-9 spr-max-w-9 spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out': true,
|
|
157
162
|
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
158
163
|
props.activeNav.parentNav === parentLink.title,
|
|
159
164
|
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
@@ -165,20 +170,32 @@
|
|
|
165
170
|
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
166
171
|
:src="parentLink.icon"
|
|
167
172
|
:alt="`${parentLink.title} icon`"
|
|
168
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
173
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
174
|
+
/>
|
|
169
175
|
<img
|
|
170
176
|
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
171
177
|
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
172
178
|
:alt="`${parentLink.title} icon`"
|
|
173
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
179
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
180
|
+
/>
|
|
174
181
|
</template>
|
|
175
182
|
<template v-else>
|
|
176
|
-
<Icon
|
|
177
|
-
|
|
183
|
+
<Icon
|
|
184
|
+
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
185
|
+
:icon="parentLink.icon"
|
|
186
|
+
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
187
|
+
/>
|
|
188
|
+
<Icon
|
|
189
|
+
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
190
|
+
:icon="`${parentLink.icon}-fill`"
|
|
191
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
192
|
+
/>
|
|
178
193
|
<Icon v-else icon="ph:globe" />
|
|
179
194
|
</template>
|
|
180
195
|
</div>
|
|
196
|
+
<!-- #endregion - Parent Links -->
|
|
181
197
|
|
|
198
|
+
<!-- #region - Menu Links Popper -->
|
|
182
199
|
<template #popper>
|
|
183
200
|
<div
|
|
184
201
|
class="spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-2"
|
|
@@ -200,15 +217,16 @@
|
|
|
200
217
|
</h5>
|
|
201
218
|
|
|
202
219
|
<template v-for="(menuLinkItem, menuLinkItemIndex) in menuLink.items" :key="menuLinkItemIndex">
|
|
203
|
-
<!-- Menu link with
|
|
220
|
+
<!-- #region - Menu link with Submenu links -->
|
|
204
221
|
<template v-if="menuLinkItem.submenuLinks && menuLinkItem.submenuLinks.length > 0">
|
|
205
222
|
<Menu
|
|
206
|
-
aria-id="sidenav-submenu-wrapper"
|
|
223
|
+
aria-id="sidenav-submenu-l1-wrapper"
|
|
207
224
|
distance="4"
|
|
208
225
|
placement="right-start"
|
|
209
226
|
:triggers="['click', 'hover']"
|
|
210
227
|
instant-move
|
|
211
228
|
>
|
|
229
|
+
<!-- #region - Menu links -->
|
|
212
230
|
<div
|
|
213
231
|
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
214
232
|
:class="{
|
|
@@ -228,13 +246,21 @@
|
|
|
228
246
|
class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
|
|
229
247
|
/>
|
|
230
248
|
</div>
|
|
249
|
+
<!-- #endregion - Menu links -->
|
|
231
250
|
|
|
251
|
+
<!-- #region - Submenu Links Popper -->
|
|
252
|
+
<!--
|
|
253
|
+
Note: if you want the popper to stay open while hovering over submenuLink.subMenuHeading & submenuLinkItem.title,
|
|
254
|
+
you need to keep it inside a <Menu> or ensure the content is part of the popper's interactive area.
|
|
255
|
+
|
|
256
|
+
"sidenav-submenu-l2-wrapper" - Popper is currently hidden since sidenav only has 1 level of submenu links.
|
|
257
|
+
-->
|
|
232
258
|
<template #popper>
|
|
233
|
-
<
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
259
|
+
<Menu aria-id="sidenav-submenu-l2-wrapper" :triggers="['click', 'hover']" instant-move>
|
|
260
|
+
<template
|
|
261
|
+
v-for="(submenuLink, submenuLinkIndex) in menuLinkItem.submenuLinks"
|
|
262
|
+
:key="submenuLinkIndex"
|
|
263
|
+
>
|
|
238
264
|
<h5
|
|
239
265
|
v-if="submenuLink.subMenuHeading"
|
|
240
266
|
:class="{
|
|
@@ -244,12 +270,12 @@
|
|
|
244
270
|
>
|
|
245
271
|
{{ submenuLink.subMenuHeading }}
|
|
246
272
|
</h5>
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
273
|
+
|
|
274
|
+
<template
|
|
275
|
+
v-for="(submenuLinkItem, submenuLinkItemIndex) in submenuLink.items"
|
|
276
|
+
:key="submenuLinkItemIndex"
|
|
277
|
+
>
|
|
278
|
+
<!-- #region - Submenu Links -->
|
|
253
279
|
<div
|
|
254
280
|
v-if="!submenuLinkItem.hidden"
|
|
255
281
|
:id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
|
|
@@ -276,14 +302,17 @@
|
|
|
276
302
|
></div>
|
|
277
303
|
<span>{{ submenuLinkItem.title }}</span>
|
|
278
304
|
</div>
|
|
279
|
-
|
|
305
|
+
<!-- #endregion - Submenu Links -->
|
|
306
|
+
</template>
|
|
280
307
|
</template>
|
|
281
|
-
</
|
|
308
|
+
</Menu>
|
|
282
309
|
</template>
|
|
310
|
+
<!-- #endregion - Submenu Links Popper -->
|
|
283
311
|
</Menu>
|
|
284
312
|
</template>
|
|
313
|
+
<!-- #endregion - Menu link with Submenu links -->
|
|
285
314
|
|
|
286
|
-
<!-- Menu link only -->
|
|
315
|
+
<!-- #region - Menu link only -->
|
|
287
316
|
<template v-else>
|
|
288
317
|
<div
|
|
289
318
|
v-if="!menuLinkItem.hidden"
|
|
@@ -303,28 +332,28 @@
|
|
|
303
332
|
<span>{{ menuLinkItem.title }}</span>
|
|
304
333
|
</div>
|
|
305
334
|
</template>
|
|
335
|
+
<!-- #endregion - Menu link only -->
|
|
306
336
|
</template>
|
|
307
337
|
</template>
|
|
308
338
|
</template>
|
|
339
|
+
<!-- #endregion - Menu Links -->
|
|
309
340
|
</Menu>
|
|
310
341
|
</template>
|
|
342
|
+
<!-- #endregion - Parent Links with Menus -->
|
|
311
343
|
|
|
312
|
-
<!-- Parent link only
|
|
344
|
+
<!-- #region - Parent link only -->
|
|
313
345
|
<template v-else>
|
|
314
|
-
<
|
|
346
|
+
<spr-tooltip
|
|
315
347
|
v-if="!parentLink.hidden"
|
|
316
|
-
|
|
348
|
+
:text="parentLink.title"
|
|
317
349
|
placement="right"
|
|
318
|
-
distance="18"
|
|
319
|
-
:
|
|
350
|
+
:distance="18"
|
|
351
|
+
:fit-content="false"
|
|
320
352
|
>
|
|
321
|
-
<template #popper>
|
|
322
|
-
<span class="spr-label-xs-medium spr-uppercase">{{ parentLink.title }}</span>
|
|
323
|
-
</template>
|
|
324
353
|
<div
|
|
325
354
|
:id="`${generateId(parentLink.title)}`"
|
|
326
355
|
:class="{
|
|
327
|
-
'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out
|
|
356
|
+
'spr-m-auto spr-box-border spr-flex spr-max-h-9 spr-max-w-9 spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out': true,
|
|
328
357
|
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
329
358
|
props.activeNav.parentNav === parentLink.title,
|
|
330
359
|
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
@@ -337,38 +366,54 @@
|
|
|
337
366
|
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
338
367
|
:src="parentLink.icon"
|
|
339
368
|
:alt="`${parentLink.title} icon`"
|
|
340
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
369
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
370
|
+
/>
|
|
341
371
|
<img
|
|
342
372
|
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
343
373
|
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
344
374
|
:alt="`${parentLink.title} icon`"
|
|
345
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
375
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
376
|
+
/>
|
|
346
377
|
</template>
|
|
347
378
|
<template v-else>
|
|
348
|
-
<Icon
|
|
349
|
-
|
|
379
|
+
<Icon
|
|
380
|
+
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
381
|
+
:icon="parentLink.icon"
|
|
382
|
+
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
383
|
+
/>
|
|
384
|
+
<Icon
|
|
385
|
+
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
386
|
+
:icon="`${parentLink.icon}-fill`"
|
|
387
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
388
|
+
/>
|
|
350
389
|
<Icon v-else icon="ph:globe" />
|
|
351
390
|
</template>
|
|
352
391
|
</div>
|
|
353
|
-
|
|
392
|
+
<!-- #endregion - Parent Links -->
|
|
393
|
+
</spr-tooltip>
|
|
354
394
|
</template>
|
|
395
|
+
<!-- #endregion - Parent link only -->
|
|
355
396
|
</template>
|
|
397
|
+
|
|
398
|
+
<!-- Divider -->
|
|
356
399
|
<div
|
|
357
400
|
v-if="navLinks.top.length > 0 && navLinkIndex < navLinks.top.length - 1"
|
|
358
401
|
class="spr-background-color-hover spr-h-[2px] spr-w-full"
|
|
359
402
|
></div>
|
|
360
403
|
</template>
|
|
404
|
+
<!-- #endregion - Grouped Nav Links -->
|
|
361
405
|
</div>
|
|
406
|
+
<!-- #endregion - Top Section -->
|
|
362
407
|
|
|
363
|
-
<!-- Bottom Section -->
|
|
408
|
+
<!-- #region - Bottom Section -->
|
|
364
409
|
<div
|
|
365
410
|
v-if="navLinks.bottom && navLinks.bottom.length > 0"
|
|
366
411
|
class="spr-grid spr-justify-center spr-gap-2 spr-px-3 spr-pb-4 spr-pt-0"
|
|
367
412
|
>
|
|
368
|
-
<!-- Grouped Nav Links -->
|
|
413
|
+
<!-- #region - Grouped Nav Links -->
|
|
369
414
|
<template v-for="(navLink, navLinkIndex) in navLinks.bottom" :key="navLinkIndex">
|
|
370
415
|
<template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
|
|
371
|
-
<!-- Parent
|
|
416
|
+
<!-- #region - Parent Links with Menus -->
|
|
372
417
|
<template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
|
|
373
418
|
<Menu
|
|
374
419
|
aria-id="sidenav-menu-wrapper"
|
|
@@ -376,11 +421,13 @@
|
|
|
376
421
|
placement="right"
|
|
377
422
|
:triggers="['click', 'hover']"
|
|
378
423
|
instant-move
|
|
424
|
+
:show-group="'my-group-name' + parentLinkIndex"
|
|
379
425
|
>
|
|
426
|
+
<!-- #region - Parent Links -->
|
|
380
427
|
<div
|
|
381
428
|
:id="`${generateId(parentLink.title)}`"
|
|
382
429
|
:class="{
|
|
383
|
-
'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out
|
|
430
|
+
'spr-m-auto spr-box-border spr-flex spr-max-h-9 spr-max-w-9 spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out': true,
|
|
384
431
|
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
385
432
|
props.activeNav.parentNav === parentLink.title,
|
|
386
433
|
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
@@ -392,20 +439,32 @@
|
|
|
392
439
|
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
393
440
|
:src="parentLink.icon"
|
|
394
441
|
:alt="`${parentLink.title} icon`"
|
|
395
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
442
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
443
|
+
/>
|
|
396
444
|
<img
|
|
397
445
|
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
398
446
|
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
399
447
|
:alt="`${parentLink.title} icon`"
|
|
400
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
448
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
449
|
+
/>
|
|
401
450
|
</template>
|
|
402
451
|
<template v-else>
|
|
403
|
-
<Icon
|
|
404
|
-
|
|
452
|
+
<Icon
|
|
453
|
+
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
454
|
+
:icon="parentLink.icon"
|
|
455
|
+
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
456
|
+
/>
|
|
457
|
+
<Icon
|
|
458
|
+
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
459
|
+
:icon="`${parentLink.icon}-fill`"
|
|
460
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
461
|
+
/>
|
|
405
462
|
<Icon v-else icon="ph:globe" />
|
|
406
463
|
</template>
|
|
407
464
|
</div>
|
|
465
|
+
<!-- #endregion - Parent Links -->
|
|
408
466
|
|
|
467
|
+
<!-- #region - Menu Links Popper -->
|
|
409
468
|
<template #popper>
|
|
410
469
|
<div
|
|
411
470
|
class="spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-2"
|
|
@@ -427,15 +486,16 @@
|
|
|
427
486
|
</h5>
|
|
428
487
|
|
|
429
488
|
<template v-for="(menuLinkItem, menuLinkItemIndex) in menuLink.items" :key="menuLinkItemIndex">
|
|
430
|
-
<!-- Menu link with
|
|
489
|
+
<!-- #region - Menu link with Submenu links -->
|
|
431
490
|
<template v-if="menuLinkItem.submenuLinks && menuLinkItem.submenuLinks.length > 0">
|
|
432
491
|
<Menu
|
|
433
|
-
aria-id="sidenav-submenu-wrapper"
|
|
492
|
+
aria-id="sidenav-submenu-l1-wrapper"
|
|
434
493
|
distance="4"
|
|
435
494
|
placement="right-start"
|
|
436
495
|
:triggers="['click', 'hover']"
|
|
437
496
|
instant-move
|
|
438
497
|
>
|
|
498
|
+
<!-- #region - Menu links -->
|
|
439
499
|
<div
|
|
440
500
|
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
441
501
|
:class="{
|
|
@@ -455,13 +515,21 @@
|
|
|
455
515
|
class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
|
|
456
516
|
/>
|
|
457
517
|
</div>
|
|
518
|
+
<!-- #endregion - Menu links -->
|
|
458
519
|
|
|
520
|
+
<!-- #region - Submenu Links Popper -->
|
|
521
|
+
<!--
|
|
522
|
+
Note: if you want the popper to stay open while hovering over submenuLink.subMenuHeading & submenuLinkItem.title,
|
|
523
|
+
you need to keep it inside a <Menu> or ensure the content is part of the popper's interactive area.
|
|
524
|
+
|
|
525
|
+
"sidenav-submenu-l2-wrapper" - Popper is currently hidden since sidenav only has 1 level of submenu links.
|
|
526
|
+
-->
|
|
459
527
|
<template #popper>
|
|
460
|
-
<
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
528
|
+
<Menu aria-id="sidenav-submenu-l2-wrapper" :triggers="['click', 'hover']" instant-move>
|
|
529
|
+
<template
|
|
530
|
+
v-for="(submenuLink, submenuLinkIndex) in menuLinkItem.submenuLinks"
|
|
531
|
+
:key="submenuLinkIndex"
|
|
532
|
+
>
|
|
465
533
|
<h5
|
|
466
534
|
v-if="submenuLink.subMenuHeading"
|
|
467
535
|
:class="{
|
|
@@ -471,12 +539,12 @@
|
|
|
471
539
|
>
|
|
472
540
|
{{ submenuLink.subMenuHeading }}
|
|
473
541
|
</h5>
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
542
|
+
|
|
543
|
+
<template
|
|
544
|
+
v-for="(submenuLinkItem, submenuLinkItemIndex) in submenuLink.items"
|
|
545
|
+
:key="submenuLinkItemIndex"
|
|
546
|
+
>
|
|
547
|
+
<!-- #region - Submenu Links -->
|
|
480
548
|
<div
|
|
481
549
|
v-if="!submenuLinkItem.hidden"
|
|
482
550
|
:id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
|
|
@@ -503,14 +571,17 @@
|
|
|
503
571
|
></div>
|
|
504
572
|
<span>{{ submenuLinkItem.title }}</span>
|
|
505
573
|
</div>
|
|
506
|
-
|
|
574
|
+
<!-- #endregion - Submenu Links -->
|
|
575
|
+
</template>
|
|
507
576
|
</template>
|
|
508
|
-
</
|
|
577
|
+
</Menu>
|
|
509
578
|
</template>
|
|
579
|
+
<!-- #endregion - Submenu Links Popper -->
|
|
510
580
|
</Menu>
|
|
511
581
|
</template>
|
|
582
|
+
<!-- #endregion - Menu link with Submenu links -->
|
|
512
583
|
|
|
513
|
-
<!-- Menu link only -->
|
|
584
|
+
<!-- #region - Menu link only -->
|
|
514
585
|
<template v-else>
|
|
515
586
|
<div
|
|
516
587
|
v-if="!menuLinkItem.hidden"
|
|
@@ -526,28 +597,29 @@
|
|
|
526
597
|
<span>{{ menuLinkItem.title }}</span>
|
|
527
598
|
</div>
|
|
528
599
|
</template>
|
|
600
|
+
<!-- #endregion - Menu link only -->
|
|
529
601
|
</template>
|
|
530
602
|
</template>
|
|
531
603
|
</template>
|
|
604
|
+
<!-- #endregion - Menu Links Popper -->
|
|
532
605
|
</Menu>
|
|
533
606
|
</template>
|
|
607
|
+
<!-- #endregion - Parent Links with Menus -->
|
|
534
608
|
|
|
535
|
-
<!-- Parent link only
|
|
609
|
+
<!-- #region - Parent link only -->
|
|
536
610
|
<template v-else>
|
|
537
|
-
<
|
|
611
|
+
<spr-tooltip
|
|
538
612
|
v-if="!parentLink.hidden"
|
|
539
|
-
|
|
613
|
+
:text="parentLink.title"
|
|
540
614
|
placement="right"
|
|
541
|
-
distance="18"
|
|
542
|
-
:
|
|
615
|
+
:distance="18"
|
|
616
|
+
:fit-content="false"
|
|
543
617
|
>
|
|
544
|
-
|
|
545
|
-
<span class="spr-label-xs-medium spr-uppercase">{{ parentLink.title }}</span>
|
|
546
|
-
</template>
|
|
618
|
+
<!-- #region - Parent Links -->
|
|
547
619
|
<div
|
|
548
620
|
:id="`${generateId(parentLink.title)}`"
|
|
549
621
|
:class="{
|
|
550
|
-
'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out
|
|
622
|
+
'spr-m-auto spr-box-border spr-flex spr-max-h-9 spr-max-w-9 spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out': true,
|
|
551
623
|
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
552
624
|
props.activeNav.parentNav === parentLink.title,
|
|
553
625
|
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
@@ -560,58 +632,67 @@
|
|
|
560
632
|
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
561
633
|
:src="parentLink.icon"
|
|
562
634
|
:alt="`${parentLink.title} icon`"
|
|
563
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
635
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
636
|
+
/>
|
|
564
637
|
<img
|
|
565
638
|
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
566
639
|
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
567
640
|
:alt="`${parentLink.title} icon`"
|
|
568
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
641
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
642
|
+
/>
|
|
569
643
|
</template>
|
|
570
644
|
<template v-else>
|
|
571
|
-
<Icon
|
|
572
|
-
|
|
645
|
+
<Icon
|
|
646
|
+
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
647
|
+
:icon="parentLink.icon"
|
|
648
|
+
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
649
|
+
/>
|
|
650
|
+
<Icon
|
|
651
|
+
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
652
|
+
:icon="`${parentLink.icon}-fill`"
|
|
653
|
+
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
654
|
+
/>
|
|
573
655
|
<Icon v-else icon="ph:globe" />
|
|
574
656
|
</template>
|
|
575
657
|
</div>
|
|
576
|
-
|
|
658
|
+
<!-- #endregion - Parent Links -->
|
|
659
|
+
</spr-tooltip>
|
|
577
660
|
</template>
|
|
661
|
+
<!-- #endregion - Parent link only -->
|
|
578
662
|
</template>
|
|
579
663
|
<div
|
|
580
664
|
v-if="navLinks.bottom.length > 0 && navLinkIndex < navLinks.bottom.length - 1"
|
|
581
665
|
class="spr-background-color-hover spr-h-[2px] spr-w-full"
|
|
582
666
|
></div>
|
|
583
667
|
</template>
|
|
668
|
+
<!-- #endregion - Grouped Nav Links -->
|
|
584
669
|
</div>
|
|
670
|
+
<!-- #endregion - Bottom Section -->
|
|
585
671
|
</div>
|
|
586
672
|
|
|
587
|
-
<div
|
|
588
|
-
v-if="props.notificationCount || props.requestCount || props.notificationCount === 0 || props.requestCount === 0"
|
|
673
|
+
<div
|
|
674
|
+
v-if="props.notificationCount || props.requestCount || props.notificationCount === 0 || props.requestCount === 0"
|
|
589
675
|
class="spr-grid spr-gap-2 spr-py-6"
|
|
590
676
|
>
|
|
591
|
-
<!-- Notification -->
|
|
592
|
-
<
|
|
593
|
-
aria-id="sidenav-tooltip-wrapper"
|
|
594
|
-
placement="right"
|
|
595
|
-
distance="4"
|
|
596
|
-
:triggers="['hover']"
|
|
597
|
-
>
|
|
598
|
-
<template #popper>
|
|
599
|
-
<span class="spr-label-xs-medium spr-uppercase">NOTIFICATIONS</span>
|
|
600
|
-
</template>
|
|
677
|
+
<!-- #region - Notification -->
|
|
678
|
+
<spr-tooltip text="NOTIFICATIONS" placement="right" :distance="4" :fit-content="false">
|
|
601
679
|
<div
|
|
602
680
|
v-if="props.notificationCount || props.notificationCount === 0"
|
|
603
681
|
id="sidenav_notification"
|
|
604
682
|
:class="[
|
|
605
|
-
'spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-
|
|
606
|
-
'spr-
|
|
683
|
+
'spr-2 spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md',
|
|
684
|
+
'spr-m-auto spr-h-9 spr-w-9 spr-transition spr-duration-150 spr-ease-in-out',
|
|
607
685
|
'active:spr-background-color-single-active active:spr-scale-90',
|
|
608
|
-
{
|
|
609
|
-
|
|
686
|
+
{
|
|
687
|
+
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
688
|
+
props.isNotifActive,
|
|
689
|
+
},
|
|
690
|
+
{ 'hover:spr-background-color-hover': !props.isNotifActive },
|
|
610
691
|
]"
|
|
611
692
|
@click="emit('notifications', 'notifications-triggered')"
|
|
612
693
|
>
|
|
613
694
|
<Icon v-if="!props.isNotifActive" icon="ph:bell" class="spr-h-[1.25em] spr-w-[1.25em]" />
|
|
614
|
-
<Icon v-else icon="ph:bell-fill" class="spr-
|
|
695
|
+
<Icon v-else icon="ph:bell-fill" class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700" />
|
|
615
696
|
<spr-badge
|
|
616
697
|
v-if="props.notificationCount !== 0"
|
|
617
698
|
class="spr-absolute -spr-top-0.5 spr-right-0.5"
|
|
@@ -620,32 +701,28 @@
|
|
|
620
701
|
size="small"
|
|
621
702
|
/>
|
|
622
703
|
</div>
|
|
623
|
-
</
|
|
704
|
+
</spr-tooltip>
|
|
705
|
+
<!-- #endregion - Notification -->
|
|
624
706
|
|
|
625
|
-
<!-- Requests -->
|
|
626
|
-
<
|
|
627
|
-
aria-id="sidenav-tooltip-wrapper"
|
|
628
|
-
placement="right"
|
|
629
|
-
distance="4"
|
|
630
|
-
:triggers="['hover']"
|
|
631
|
-
>
|
|
632
|
-
<template #popper>
|
|
633
|
-
<span class="spr-label-xs-medium spr-uppercase">REQUESTS</span>
|
|
634
|
-
</template>
|
|
707
|
+
<!-- #region - Requests -->
|
|
708
|
+
<spr-tooltip text="REQUESTS" placement="right" :distance="4" :fit-content="false">
|
|
635
709
|
<div
|
|
636
710
|
v-if="props.requestCount || props.requestCount === 0"
|
|
637
711
|
id="sidenav_request"
|
|
638
712
|
:class="[
|
|
639
|
-
'spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-
|
|
640
|
-
'spr-
|
|
713
|
+
'spr-2 spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md',
|
|
714
|
+
'spr-m-auto spr-h-9 spr-w-9 spr-transition spr-duration-150 spr-ease-in-out',
|
|
641
715
|
'active:spr-background-color-single-active active:spr-scale-90',
|
|
642
|
-
{
|
|
643
|
-
|
|
716
|
+
{
|
|
717
|
+
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
718
|
+
props.isRequestActive,
|
|
719
|
+
},
|
|
720
|
+
{ 'hover:spr-background-color-hover': !props.isRequestActive },
|
|
644
721
|
]"
|
|
645
722
|
@click="emit('requests', 'requests-triggered')"
|
|
646
723
|
>
|
|
647
724
|
<Icon v-if="!props.isRequestActive" icon="ph:file-text" class="spr-h-[1.25em] spr-w-[1.25em]" />
|
|
648
|
-
<Icon v-else icon="ph:file-text-fill" class="spr-
|
|
725
|
+
<Icon v-else icon="ph:file-text-fill" class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700" />
|
|
649
726
|
<spr-badge
|
|
650
727
|
v-if="props.requestCount !== 0"
|
|
651
728
|
class="spr-absolute -spr-top-0.5 spr-right-0.5"
|
|
@@ -654,10 +731,11 @@
|
|
|
654
731
|
size="small"
|
|
655
732
|
/>
|
|
656
733
|
</div>
|
|
657
|
-
</
|
|
734
|
+
</spr-tooltip>
|
|
735
|
+
<!-- #endregion - Requests -->
|
|
658
736
|
</div>
|
|
659
737
|
|
|
660
|
-
<!-- Avatar -->
|
|
738
|
+
<!-- #region - Avatar -->
|
|
661
739
|
<div
|
|
662
740
|
v-if="props.userMenu"
|
|
663
741
|
:class="[
|
|
@@ -669,7 +747,7 @@
|
|
|
669
747
|
<Menu
|
|
670
748
|
v-model:shown="isUserMenuVisible"
|
|
671
749
|
aria-id="user-menu-wrapper"
|
|
672
|
-
distance="
|
|
750
|
+
distance="18"
|
|
673
751
|
placement="right"
|
|
674
752
|
:triggers="['click', 'hover']"
|
|
675
753
|
instant-move
|
|
@@ -720,7 +798,7 @@
|
|
|
720
798
|
<h3 class="spr-body-sm-regular spr-m-0 spr-truncate">
|
|
721
799
|
{{ props.userMenu.name }}
|
|
722
800
|
</h3>
|
|
723
|
-
<p class="spr-body-xs-regular spr-m-0 spr-truncate
|
|
801
|
+
<p class="spr-body-xs-regular spr-text-color-supporting spr-m-0 spr-truncate">
|
|
724
802
|
{{ props.userMenu.email }}
|
|
725
803
|
</p>
|
|
726
804
|
</div>
|
|
@@ -736,7 +814,7 @@
|
|
|
736
814
|
'spr-flex spr-cursor-pointer spr-gap-2 spr-p-2 spr-align-middle spr-duration-150 spr-ease-in-out',
|
|
737
815
|
'hover:spr-background-color-hover',
|
|
738
816
|
'active:spr-background-color-pressed spr-bg-red',
|
|
739
|
-
'last-of-type:spr-border-
|
|
817
|
+
'last-of-type:spr-border-color-weak last-of-type:spr-border-0 last-of-type:spr-border-t last-of-type:spr-border-solid',
|
|
740
818
|
]"
|
|
741
819
|
@click="handleRedirect(userMenuItem, '', '', '')"
|
|
742
820
|
>
|
|
@@ -754,11 +832,12 @@
|
|
|
754
832
|
</template>
|
|
755
833
|
</Menu>
|
|
756
834
|
</div>
|
|
835
|
+
<!-- #endregion - Avatar -->
|
|
757
836
|
</div>
|
|
758
837
|
</template>
|
|
759
838
|
|
|
760
839
|
<script lang="ts" setup>
|
|
761
|
-
import { Menu
|
|
840
|
+
import { Menu } from 'floating-vue';
|
|
762
841
|
import { Icon } from '@iconify/vue';
|
|
763
842
|
|
|
764
843
|
import 'floating-vue/dist/style.css';
|
|
@@ -766,13 +845,19 @@ import 'floating-vue/dist/style.css';
|
|
|
766
845
|
import { sidenavPropTypes, sidenavEmitTypes } from './sidenav';
|
|
767
846
|
import { useSidenav } from './use-sidenav';
|
|
768
847
|
|
|
848
|
+
import SprTooltip from '../tooltip/tooltip.vue';
|
|
769
849
|
import SprBadge from '../badge/badge.vue';
|
|
770
850
|
|
|
771
851
|
const props = defineProps(sidenavPropTypes);
|
|
772
852
|
const emit = defineEmits(sidenavEmitTypes);
|
|
773
853
|
|
|
774
|
-
const {
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
854
|
+
const {
|
|
855
|
+
navLinks,
|
|
856
|
+
isQuckActionMenuVisible,
|
|
857
|
+
isUserMenuVisible,
|
|
858
|
+
userProfileError,
|
|
859
|
+
getUserInitials,
|
|
860
|
+
handleRedirect,
|
|
861
|
+
generateId,
|
|
862
|
+
} = useSidenav(props, emit);
|
|
778
863
|
</script>
|