design-system-next 2.12.3 → 2.12.7
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 +6821 -7001
- 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/components/avatar/avatar.ts +8 -1
- package/src/components/avatar/avatar.vue +10 -5
- package/src/components/avatar/use-avatar.ts +14 -3
- package/src/components/calendar/calendar.ts +12 -2
- package/src/components/sidenav/sidenav-menu-links.vue +304 -0
- package/src/components/sidenav/sidenav.ts +7 -6
- package/src/components/sidenav/sidenav.vue +34 -587
- package/src/components/sidenav/use-sidenav.ts +29 -20
- package/src/components/table/table.vue +1 -1
- package/src/components/table/use-table.ts +2 -2
- package/src/components/date-picker/__tests__/date-picker.test.ts +0 -112
- package/src/components/dropdown/__tests__/dropdown-fixes.spec.ts +0 -106
- package/src/components/dropdown/__tests__/dropdown-value-types.spec.ts +0 -213
- package/src/examples/dropdown-number-multi-select.vue +0 -76
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
'spr-hidden-scrolls spr-fixed spr-bottom-0 spr-left-0 spr-top-0',
|
|
5
5
|
'spr-background-color spr-w-auto spr-overflow-y-auto spr-overflow-x-hidden',
|
|
6
6
|
'spr-border-color-weak spr-border-b-0 spr-border-l-0 spr-border-r spr-border-t-0 spr-border-solid',
|
|
7
|
-
'spr-transition spr-duration-150 spr-ease-in-out',
|
|
7
|
+
'spr-z-10 spr-transition spr-duration-150 spr-ease-in-out',
|
|
8
8
|
]"
|
|
9
9
|
>
|
|
10
10
|
<div
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
:triggers="[]"
|
|
40
40
|
:popper-hide-triggers="[]"
|
|
41
41
|
instant-move
|
|
42
|
+
:delay="0"
|
|
42
43
|
>
|
|
43
44
|
<div
|
|
44
45
|
:class="{
|
|
@@ -143,292 +144,7 @@
|
|
|
143
144
|
<!-- #endregion - Search -->
|
|
144
145
|
|
|
145
146
|
<!-- #region - Grouped Nav Links -->
|
|
146
|
-
<
|
|
147
|
-
<template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
|
|
148
|
-
<!-- #region - Parent Links with Menus -->
|
|
149
|
-
<template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
|
|
150
|
-
<Menu
|
|
151
|
-
aria-id="sidenav-menu-wrapper"
|
|
152
|
-
distance="18"
|
|
153
|
-
placement="right"
|
|
154
|
-
:triggers="['click', 'hover']"
|
|
155
|
-
instant-move
|
|
156
|
-
>
|
|
157
|
-
<!-- #region - Parent Links -->
|
|
158
|
-
<div
|
|
159
|
-
:id="`${generateId(parentLink.title)}`"
|
|
160
|
-
:class="{
|
|
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,
|
|
162
|
-
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
163
|
-
props.activeNav.parentNav === parentLink.title,
|
|
164
|
-
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
165
|
-
'active:spr-background-color-single-active active:spr-scale-90': true,
|
|
166
|
-
}"
|
|
167
|
-
>
|
|
168
|
-
<template v-if="parentLink.icon && parentLink.icon.includes('https://')">
|
|
169
|
-
<img
|
|
170
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
171
|
-
:src="parentLink.icon"
|
|
172
|
-
:alt="`${parentLink.title} icon`"
|
|
173
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
174
|
-
/>
|
|
175
|
-
<img
|
|
176
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
177
|
-
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
178
|
-
:alt="`${parentLink.title} icon`"
|
|
179
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
180
|
-
/>
|
|
181
|
-
</template>
|
|
182
|
-
<template v-else>
|
|
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
|
-
/>
|
|
193
|
-
<Icon v-else icon="ph:globe" />
|
|
194
|
-
</template>
|
|
195
|
-
</div>
|
|
196
|
-
<!-- #endregion - Parent Links -->
|
|
197
|
-
|
|
198
|
-
<!-- #region - Menu Links Popper -->
|
|
199
|
-
<template #popper>
|
|
200
|
-
<div
|
|
201
|
-
class="spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-2"
|
|
202
|
-
>
|
|
203
|
-
<h3 class="spr-body-sm-regular-medium spr-m-0">
|
|
204
|
-
{{ parentLink.title }}
|
|
205
|
-
</h3>
|
|
206
|
-
</div>
|
|
207
|
-
|
|
208
|
-
<template v-for="(menuLink, menuLinkIndex) in parentLink.menuLinks" :key="menuLinkIndex">
|
|
209
|
-
<h5
|
|
210
|
-
v-if="menuLink.menuHeading"
|
|
211
|
-
:class="{
|
|
212
|
-
'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
|
|
213
|
-
'spr-mt-2': menuLinkIndex !== 0,
|
|
214
|
-
}"
|
|
215
|
-
>
|
|
216
|
-
{{ menuLink.menuHeading }}
|
|
217
|
-
</h5>
|
|
218
|
-
|
|
219
|
-
<template v-for="(menuLinkItem, menuLinkItemIndex) in menuLink.items" :key="menuLinkItemIndex">
|
|
220
|
-
<!-- #region - Menu link with Submenu links -->
|
|
221
|
-
<template v-if="menuLinkItem.submenuLinks && menuLinkItem.submenuLinks.length > 0">
|
|
222
|
-
<Menu
|
|
223
|
-
aria-id="sidenav-submenu-l1-wrapper"
|
|
224
|
-
distance="4"
|
|
225
|
-
placement="right-start"
|
|
226
|
-
:triggers="['click', 'hover']"
|
|
227
|
-
instant-move
|
|
228
|
-
>
|
|
229
|
-
<!-- #region - Menu links -->
|
|
230
|
-
<div
|
|
231
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
232
|
-
:class="{
|
|
233
|
-
'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
|
|
234
|
-
'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
|
|
235
|
-
'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
|
|
236
|
-
'active:spr-background-color-pressed': true,
|
|
237
|
-
}"
|
|
238
|
-
>
|
|
239
|
-
<div
|
|
240
|
-
v-if="props.activeNav.menu === menuLinkItem.title"
|
|
241
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
242
|
-
></div>
|
|
243
|
-
<span>{{ menuLinkItem.title }}</span>
|
|
244
|
-
<div class="spr-flex spr-items-center spr-gap-1">
|
|
245
|
-
<template v-for="(attr, i) in menuLinkItem?.attributes" :key="i">
|
|
246
|
-
<spr-lozenge
|
|
247
|
-
v-if="attr?.name === 'lozenge' && attr?.value"
|
|
248
|
-
:label="(attr.value && typeof attr?.value === 'object' && 'label' in attr.value) ? String(attr.value.label) : ''"
|
|
249
|
-
:tone="getLozengeTone(attr)"
|
|
250
|
-
fill
|
|
251
|
-
/>
|
|
252
|
-
</template>
|
|
253
|
-
<Icon
|
|
254
|
-
icon="ph:caret-right"
|
|
255
|
-
class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
|
|
256
|
-
/>
|
|
257
|
-
</div>
|
|
258
|
-
</div>
|
|
259
|
-
<!-- #endregion - Menu links -->
|
|
260
|
-
|
|
261
|
-
<!-- #region - Submenu Links Popper -->
|
|
262
|
-
<!--
|
|
263
|
-
Note: if you want the popper to stay open while hovering over submenuLink.subMenuHeading & submenuLinkItem.title,
|
|
264
|
-
you need to keep it inside a <Menu> or ensure the content is part of the popper's interactive area.
|
|
265
|
-
|
|
266
|
-
"sidenav-submenu-l2-wrapper" - Popper is currently hidden since sidenav only has 1 level of submenu links.
|
|
267
|
-
-->
|
|
268
|
-
<template #popper>
|
|
269
|
-
<Menu aria-id="sidenav-submenu-l2-wrapper" :triggers="['click', 'hover']" instant-move>
|
|
270
|
-
<template
|
|
271
|
-
v-for="(submenuLink, submenuLinkIndex) in menuLinkItem.submenuLinks"
|
|
272
|
-
:key="submenuLinkIndex"
|
|
273
|
-
>
|
|
274
|
-
<h5
|
|
275
|
-
v-if="submenuLink.subMenuHeading"
|
|
276
|
-
:class="{
|
|
277
|
-
'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
|
|
278
|
-
'spr-mt-2': submenuLinkIndex !== 0,
|
|
279
|
-
}"
|
|
280
|
-
>
|
|
281
|
-
{{ submenuLink.subMenuHeading }}
|
|
282
|
-
</h5>
|
|
283
|
-
|
|
284
|
-
<template
|
|
285
|
-
v-for="(submenuLinkItem, submenuLinkItemIndex) in submenuLink.items"
|
|
286
|
-
:key="submenuLinkItemIndex"
|
|
287
|
-
>
|
|
288
|
-
<!-- #region - Submenu Links -->
|
|
289
|
-
<div
|
|
290
|
-
v-if="!submenuLinkItem.hidden"
|
|
291
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
|
|
292
|
-
:class="{
|
|
293
|
-
'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
|
|
294
|
-
'spr-background-color-single-active':
|
|
295
|
-
props.activeNav.submenu === submenuLinkItem.title,
|
|
296
|
-
'hover:spr-background-color-hover':
|
|
297
|
-
props.activeNav.submenu !== submenuLinkItem.title,
|
|
298
|
-
'active:spr-background-color-pressed': true,
|
|
299
|
-
}"
|
|
300
|
-
@click="
|
|
301
|
-
handleRedirect(
|
|
302
|
-
submenuLinkItem,
|
|
303
|
-
parentLink.title,
|
|
304
|
-
menuLinkItem.title,
|
|
305
|
-
submenuLinkItem.title,
|
|
306
|
-
)
|
|
307
|
-
"
|
|
308
|
-
>
|
|
309
|
-
<div
|
|
310
|
-
v-show="props.activeNav.submenu === submenuLinkItem.title"
|
|
311
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
312
|
-
></div>
|
|
313
|
-
<span>{{ submenuLinkItem.title }}</span>
|
|
314
|
-
<div class="spr-flex spr-items-center spr-gap-1">
|
|
315
|
-
<template v-for="(attr, i) in submenuLinkItem?.attributes" :key="i">
|
|
316
|
-
<spr-lozenge
|
|
317
|
-
v-if="attr?.name === 'lozenge' && attr?.value"
|
|
318
|
-
:label="(attr.value && typeof attr?.value === 'object' && 'label' in attr.value) ? String(attr.value.label) : ''"
|
|
319
|
-
:tone="getLozengeTone(attr)"
|
|
320
|
-
fill
|
|
321
|
-
/>
|
|
322
|
-
</template>
|
|
323
|
-
</div>
|
|
324
|
-
</div>
|
|
325
|
-
<!-- #endregion - Submenu Links -->
|
|
326
|
-
</template>
|
|
327
|
-
</template>
|
|
328
|
-
</Menu>
|
|
329
|
-
</template>
|
|
330
|
-
<!-- #endregion - Submenu Links Popper -->
|
|
331
|
-
</Menu>
|
|
332
|
-
</template>
|
|
333
|
-
<!-- #endregion - Menu link with Submenu links -->
|
|
334
|
-
|
|
335
|
-
<!-- #region - Menu link only -->
|
|
336
|
-
<template v-else>
|
|
337
|
-
<div
|
|
338
|
-
v-if="!menuLinkItem.hidden"
|
|
339
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
340
|
-
:class="{
|
|
341
|
-
'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
|
|
342
|
-
'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
|
|
343
|
-
'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
|
|
344
|
-
'active:spr-background-color-pressed': true,
|
|
345
|
-
}"
|
|
346
|
-
@click="handleRedirect(menuLinkItem, parentLink.title, menuLinkItem.title, '')"
|
|
347
|
-
>
|
|
348
|
-
<div
|
|
349
|
-
v-if="props.activeNav.menu === menuLinkItem.title"
|
|
350
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
351
|
-
></div>
|
|
352
|
-
<span>{{ menuLinkItem.title }}</span>
|
|
353
|
-
<template v-for="(attr, i) in menuLinkItem?.attributes" :key="i">
|
|
354
|
-
<spr-lozenge
|
|
355
|
-
v-if="attr?.name === 'lozenge' && attr?.value"
|
|
356
|
-
:label="(attr.value && typeof attr?.value === 'object' && 'label' in attr.value) ? String(attr.value.label) : ''"
|
|
357
|
-
:tone="getLozengeTone(attr)"
|
|
358
|
-
fill
|
|
359
|
-
/>
|
|
360
|
-
</template>
|
|
361
|
-
</div>
|
|
362
|
-
</template>
|
|
363
|
-
<!-- #endregion - Menu link only -->
|
|
364
|
-
</template>
|
|
365
|
-
</template>
|
|
366
|
-
</template>
|
|
367
|
-
<!-- #endregion - Menu Links -->
|
|
368
|
-
</Menu>
|
|
369
|
-
</template>
|
|
370
|
-
<!-- #endregion - Parent Links with Menus -->
|
|
371
|
-
|
|
372
|
-
<!-- #region - Parent link only -->
|
|
373
|
-
<template v-else>
|
|
374
|
-
<spr-tooltip
|
|
375
|
-
v-if="!parentLink.hidden"
|
|
376
|
-
:text="parentLink.title"
|
|
377
|
-
placement="right"
|
|
378
|
-
:distance="18"
|
|
379
|
-
:fit-content="false"
|
|
380
|
-
>
|
|
381
|
-
<div
|
|
382
|
-
:id="`${generateId(parentLink.title)}`"
|
|
383
|
-
:class="{
|
|
384
|
-
'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,
|
|
385
|
-
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
386
|
-
props.activeNav.parentNav === parentLink.title,
|
|
387
|
-
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
388
|
-
'active:spr-background-color-single-active active:spr-scale-90': true,
|
|
389
|
-
}"
|
|
390
|
-
@click="handleRedirect(parentLink, parentLink.title, '', '')"
|
|
391
|
-
>
|
|
392
|
-
<template v-if="parentLink.icon && parentLink.icon.includes('https://')">
|
|
393
|
-
<img
|
|
394
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
395
|
-
:src="parentLink.icon"
|
|
396
|
-
:alt="`${parentLink.title} icon`"
|
|
397
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
398
|
-
/>
|
|
399
|
-
<img
|
|
400
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
401
|
-
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
402
|
-
:alt="`${parentLink.title} icon`"
|
|
403
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
404
|
-
/>
|
|
405
|
-
</template>
|
|
406
|
-
<template v-else>
|
|
407
|
-
<Icon
|
|
408
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
409
|
-
:icon="parentLink.icon"
|
|
410
|
-
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
411
|
-
/>
|
|
412
|
-
<Icon
|
|
413
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
414
|
-
:icon="`${parentLink.icon}-fill`"
|
|
415
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
416
|
-
/>
|
|
417
|
-
<Icon v-else icon="ph:globe" />
|
|
418
|
-
</template>
|
|
419
|
-
</div>
|
|
420
|
-
<!-- #endregion - Parent Links -->
|
|
421
|
-
</spr-tooltip>
|
|
422
|
-
</template>
|
|
423
|
-
<!-- #endregion - Parent link only -->
|
|
424
|
-
</template>
|
|
425
|
-
|
|
426
|
-
<!-- Divider -->
|
|
427
|
-
<div
|
|
428
|
-
v-if="navLinks.top.length > 0 && navLinkIndex < navLinks.top.length - 1"
|
|
429
|
-
class="spr-background-color-hover spr-h-[2px] spr-w-full"
|
|
430
|
-
></div>
|
|
431
|
-
</template>
|
|
147
|
+
<sidenav-menu-links :nav-links="navLinks" />
|
|
432
148
|
<!-- #endregion - Grouped Nav Links -->
|
|
433
149
|
</div>
|
|
434
150
|
<!-- #endregion - Top Section -->
|
|
@@ -439,260 +155,7 @@
|
|
|
439
155
|
class="spr-grid spr-justify-center spr-gap-2 spr-px-3 spr-pb-4 spr-pt-0"
|
|
440
156
|
>
|
|
441
157
|
<!-- #region - Grouped Nav Links -->
|
|
442
|
-
<
|
|
443
|
-
<template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
|
|
444
|
-
<!-- #region - Parent Links with Menus -->
|
|
445
|
-
<template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
|
|
446
|
-
<Menu
|
|
447
|
-
aria-id="sidenav-menu-wrapper"
|
|
448
|
-
distance="18"
|
|
449
|
-
placement="right"
|
|
450
|
-
:triggers="['click', 'hover']"
|
|
451
|
-
instant-move
|
|
452
|
-
:show-group="'my-group-name' + parentLinkIndex"
|
|
453
|
-
>
|
|
454
|
-
<!-- #region - Parent Links -->
|
|
455
|
-
<div
|
|
456
|
-
:id="`${generateId(parentLink.title)}`"
|
|
457
|
-
:class="{
|
|
458
|
-
'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,
|
|
459
|
-
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
460
|
-
props.activeNav.parentNav === parentLink.title,
|
|
461
|
-
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
462
|
-
'active:spr-background-color-single-active active:spr-scale-90': true,
|
|
463
|
-
}"
|
|
464
|
-
>
|
|
465
|
-
<template v-if="parentLink.icon && parentLink.icon.includes('https://')">
|
|
466
|
-
<img
|
|
467
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
468
|
-
:src="parentLink.icon"
|
|
469
|
-
:alt="`${parentLink.title} icon`"
|
|
470
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
471
|
-
/>
|
|
472
|
-
<img
|
|
473
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
474
|
-
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
475
|
-
:alt="`${parentLink.title} icon`"
|
|
476
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
477
|
-
/>
|
|
478
|
-
</template>
|
|
479
|
-
<template v-else>
|
|
480
|
-
<Icon
|
|
481
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
482
|
-
:icon="parentLink.icon"
|
|
483
|
-
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
484
|
-
/>
|
|
485
|
-
<Icon
|
|
486
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
487
|
-
:icon="`${parentLink.icon}-fill`"
|
|
488
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
489
|
-
/>
|
|
490
|
-
<Icon v-else icon="ph:globe" />
|
|
491
|
-
</template>
|
|
492
|
-
</div>
|
|
493
|
-
<!-- #endregion - Parent Links -->
|
|
494
|
-
|
|
495
|
-
<!-- #region - Menu Links Popper -->
|
|
496
|
-
<template #popper>
|
|
497
|
-
<div
|
|
498
|
-
class="spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-2"
|
|
499
|
-
>
|
|
500
|
-
<h3 class="spr-body-sm-regular-medium spr-m-0">
|
|
501
|
-
{{ parentLink.title }}
|
|
502
|
-
</h3>
|
|
503
|
-
</div>
|
|
504
|
-
|
|
505
|
-
<template v-for="(menuLink, menuLinkIndex) in parentLink.menuLinks" :key="menuLinkIndex">
|
|
506
|
-
<h5
|
|
507
|
-
v-if="menuLink.menuHeading"
|
|
508
|
-
:class="{
|
|
509
|
-
'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
|
|
510
|
-
'spr-mt-3': menuLinkIndex !== 0,
|
|
511
|
-
}"
|
|
512
|
-
>
|
|
513
|
-
{{ menuLink.menuHeading }}
|
|
514
|
-
</h5>
|
|
515
|
-
|
|
516
|
-
<template v-for="(menuLinkItem, menuLinkItemIndex) in menuLink.items" :key="menuLinkItemIndex">
|
|
517
|
-
<!-- #region - Menu link with Submenu links -->
|
|
518
|
-
<template v-if="menuLinkItem.submenuLinks && menuLinkItem.submenuLinks.length > 0">
|
|
519
|
-
<Menu
|
|
520
|
-
aria-id="sidenav-submenu-l1-wrapper"
|
|
521
|
-
distance="4"
|
|
522
|
-
placement="right-start"
|
|
523
|
-
:triggers="['click', 'hover']"
|
|
524
|
-
instant-move
|
|
525
|
-
>
|
|
526
|
-
<!-- #region - Menu links -->
|
|
527
|
-
<div
|
|
528
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
529
|
-
:class="{
|
|
530
|
-
'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
|
|
531
|
-
'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
|
|
532
|
-
'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
|
|
533
|
-
'active:spr-background-color-pressed': true,
|
|
534
|
-
}"
|
|
535
|
-
>
|
|
536
|
-
<div
|
|
537
|
-
v-if="props.activeNav.menu === menuLinkItem.title"
|
|
538
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
539
|
-
></div>
|
|
540
|
-
<span>{{ menuLinkItem.title }}</span>
|
|
541
|
-
<Icon
|
|
542
|
-
icon="ph:caret-right"
|
|
543
|
-
class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
|
|
544
|
-
/>
|
|
545
|
-
</div>
|
|
546
|
-
<!-- #endregion - Menu links -->
|
|
547
|
-
|
|
548
|
-
<!-- #region - Submenu Links Popper -->
|
|
549
|
-
<!--
|
|
550
|
-
Note: if you want the popper to stay open while hovering over submenuLink.subMenuHeading & submenuLinkItem.title,
|
|
551
|
-
you need to keep it inside a <Menu> or ensure the content is part of the popper's interactive area.
|
|
552
|
-
|
|
553
|
-
"sidenav-submenu-l2-wrapper" - Popper is currently hidden since sidenav only has 1 level of submenu links.
|
|
554
|
-
-->
|
|
555
|
-
<template #popper>
|
|
556
|
-
<Menu aria-id="sidenav-submenu-l2-wrapper" :triggers="['click', 'hover']" instant-move>
|
|
557
|
-
<template
|
|
558
|
-
v-for="(submenuLink, submenuLinkIndex) in menuLinkItem.submenuLinks"
|
|
559
|
-
:key="submenuLinkIndex"
|
|
560
|
-
>
|
|
561
|
-
<h5
|
|
562
|
-
v-if="submenuLink.subMenuHeading"
|
|
563
|
-
:class="{
|
|
564
|
-
'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
|
|
565
|
-
'spr-mt-3': submenuLinkIndex !== 0,
|
|
566
|
-
}"
|
|
567
|
-
>
|
|
568
|
-
{{ submenuLink.subMenuHeading }}
|
|
569
|
-
</h5>
|
|
570
|
-
|
|
571
|
-
<template
|
|
572
|
-
v-for="(submenuLinkItem, submenuLinkItemIndex) in submenuLink.items"
|
|
573
|
-
:key="submenuLinkItemIndex"
|
|
574
|
-
>
|
|
575
|
-
<!-- #region - Submenu Links -->
|
|
576
|
-
<div
|
|
577
|
-
v-if="!submenuLinkItem.hidden"
|
|
578
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
|
|
579
|
-
:class="{
|
|
580
|
-
'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
|
|
581
|
-
'spr-background-color-single-active':
|
|
582
|
-
props.activeNav.submenu === submenuLinkItem.title,
|
|
583
|
-
'hover:spr-background-color-hover':
|
|
584
|
-
props.activeNav.submenu !== submenuLinkItem.title,
|
|
585
|
-
'active:spr-background-color-pressed': true,
|
|
586
|
-
}"
|
|
587
|
-
@click="
|
|
588
|
-
handleRedirect(
|
|
589
|
-
submenuLinkItem,
|
|
590
|
-
parentLink.title,
|
|
591
|
-
menuLinkItem.title,
|
|
592
|
-
submenuLinkItem.title,
|
|
593
|
-
)
|
|
594
|
-
"
|
|
595
|
-
>
|
|
596
|
-
<div
|
|
597
|
-
v-show="props.activeNav.submenu === submenuLinkItem.title"
|
|
598
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
599
|
-
></div>
|
|
600
|
-
<span>{{ submenuLinkItem.title }}</span>
|
|
601
|
-
</div>
|
|
602
|
-
<!-- #endregion - Submenu Links -->
|
|
603
|
-
</template>
|
|
604
|
-
</template>
|
|
605
|
-
</Menu>
|
|
606
|
-
</template>
|
|
607
|
-
<!-- #endregion - Submenu Links Popper -->
|
|
608
|
-
</Menu>
|
|
609
|
-
</template>
|
|
610
|
-
<!-- #endregion - Menu link with Submenu links -->
|
|
611
|
-
|
|
612
|
-
<!-- #region - Menu link only -->
|
|
613
|
-
<template v-else>
|
|
614
|
-
<div
|
|
615
|
-
v-if="!menuLinkItem.hidden"
|
|
616
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
617
|
-
:class="[
|
|
618
|
-
'spr-body-sm-regular spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-300 spr-ease-in-out',
|
|
619
|
-
'hover:spr-background-color-hover',
|
|
620
|
-
'active:spr-background-color-pressed',
|
|
621
|
-
'last:spr-rounded-b-xl',
|
|
622
|
-
]"
|
|
623
|
-
@click="handleRedirect(menuLinkItem, parentLink.title, menuLinkItem.title, '')"
|
|
624
|
-
>
|
|
625
|
-
<span>{{ menuLinkItem.title }}</span>
|
|
626
|
-
</div>
|
|
627
|
-
</template>
|
|
628
|
-
<!-- #endregion - Menu link only -->
|
|
629
|
-
</template>
|
|
630
|
-
</template>
|
|
631
|
-
</template>
|
|
632
|
-
<!-- #endregion - Menu Links Popper -->
|
|
633
|
-
</Menu>
|
|
634
|
-
</template>
|
|
635
|
-
<!-- #endregion - Parent Links with Menus -->
|
|
636
|
-
|
|
637
|
-
<!-- #region - Parent link only -->
|
|
638
|
-
<template v-else>
|
|
639
|
-
<spr-tooltip
|
|
640
|
-
v-if="!parentLink.hidden"
|
|
641
|
-
:text="parentLink.title"
|
|
642
|
-
placement="right"
|
|
643
|
-
:distance="18"
|
|
644
|
-
:fit-content="false"
|
|
645
|
-
>
|
|
646
|
-
<!-- #region - Parent Links -->
|
|
647
|
-
<div
|
|
648
|
-
:id="`${generateId(parentLink.title)}`"
|
|
649
|
-
:class="{
|
|
650
|
-
'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,
|
|
651
|
-
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
652
|
-
props.activeNav.parentNav === parentLink.title,
|
|
653
|
-
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
654
|
-
'active:spr-background-color-single-active active:spr-scale-90': true,
|
|
655
|
-
}"
|
|
656
|
-
@click="handleRedirect(parentLink, parentLink.title, '', '')"
|
|
657
|
-
>
|
|
658
|
-
<template v-if="parentLink.icon && parentLink.icon.includes('https://')">
|
|
659
|
-
<img
|
|
660
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
661
|
-
:src="parentLink.icon"
|
|
662
|
-
:alt="`${parentLink.title} icon`"
|
|
663
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
664
|
-
/>
|
|
665
|
-
<img
|
|
666
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
667
|
-
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
668
|
-
:alt="`${parentLink.title} icon`"
|
|
669
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
670
|
-
/>
|
|
671
|
-
</template>
|
|
672
|
-
<template v-else>
|
|
673
|
-
<Icon
|
|
674
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
675
|
-
:icon="parentLink.icon"
|
|
676
|
-
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
677
|
-
/>
|
|
678
|
-
<Icon
|
|
679
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
680
|
-
:icon="`${parentLink.icon}-fill`"
|
|
681
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
682
|
-
/>
|
|
683
|
-
<Icon v-else icon="ph:globe" />
|
|
684
|
-
</template>
|
|
685
|
-
</div>
|
|
686
|
-
<!-- #endregion - Parent Links -->
|
|
687
|
-
</spr-tooltip>
|
|
688
|
-
</template>
|
|
689
|
-
<!-- #endregion - Parent link only -->
|
|
690
|
-
</template>
|
|
691
|
-
<div
|
|
692
|
-
v-if="navLinks.bottom.length > 0 && navLinkIndex < navLinks.bottom.length - 1"
|
|
693
|
-
class="spr-background-color-hover spr-h-[2px] spr-w-full"
|
|
694
|
-
></div>
|
|
695
|
-
</template>
|
|
158
|
+
<sidenav-menu-links :nav-links="navLinks" />
|
|
696
159
|
<!-- #endregion - Grouped Nav Links -->
|
|
697
160
|
</div>
|
|
698
161
|
<!-- #endregion - Bottom Section -->
|
|
@@ -775,30 +238,24 @@
|
|
|
775
238
|
<Menu
|
|
776
239
|
v-model:shown="isUserMenuVisible"
|
|
777
240
|
aria-id="user-menu-wrapper"
|
|
778
|
-
distance="
|
|
241
|
+
distance="16"
|
|
779
242
|
placement="right"
|
|
780
243
|
:triggers="['click', 'hover']"
|
|
781
244
|
instant-move
|
|
245
|
+
:delay="0"
|
|
782
246
|
>
|
|
783
|
-
<
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
>
|
|
795
|
-
<template v-if="props.userMenu.profileImage && !userProfileError">
|
|
796
|
-
<img :src="props.userMenu.profileImage" alt="profile" @error="userProfileError = true" />
|
|
797
|
-
</template>
|
|
798
|
-
<template v-else>
|
|
799
|
-
<span>{{ getUserInitials(props.userMenu.name) }}</span>
|
|
800
|
-
</template>
|
|
801
|
-
</div>
|
|
247
|
+
<template v-if="props.userMenu.profileImage">
|
|
248
|
+
<spr-avatar
|
|
249
|
+
class="spr-cursor-pointer"
|
|
250
|
+
variant="image"
|
|
251
|
+
:src="props.userMenu.profileImage"
|
|
252
|
+
:initial="props.userMenu.name"
|
|
253
|
+
size="md"
|
|
254
|
+
/>
|
|
255
|
+
</template>
|
|
256
|
+
<template v-else>
|
|
257
|
+
<spr-avatar class="spr-cursor-pointer" :initial="props.userMenu.name" size="md" />
|
|
258
|
+
</template>
|
|
802
259
|
|
|
803
260
|
<template #popper>
|
|
804
261
|
<div
|
|
@@ -808,20 +265,17 @@
|
|
|
808
265
|
]"
|
|
809
266
|
>
|
|
810
267
|
<div class="spr-flex spr-items-center spr-gap-2">
|
|
811
|
-
<
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
<span>{{ getUserInitials(props.userMenu.name) }}</span>
|
|
823
|
-
</template>
|
|
824
|
-
</div>
|
|
268
|
+
<template v-if="props.userMenu.profileImage">
|
|
269
|
+
<spr-avatar
|
|
270
|
+
variant="image"
|
|
271
|
+
:src="props.userMenu.profileImage"
|
|
272
|
+
:initial="props.userMenu.name"
|
|
273
|
+
size="md"
|
|
274
|
+
/>
|
|
275
|
+
</template>
|
|
276
|
+
<template v-else>
|
|
277
|
+
<spr-avatar :initial="props.userMenu.name" size="md" />
|
|
278
|
+
</template>
|
|
825
279
|
<div class="spr-grid spr-justify-between spr-gap-1">
|
|
826
280
|
<h3 class="spr-body-sm-regular spr-m-0 spr-truncate">
|
|
827
281
|
{{ props.userMenu.name }}
|
|
@@ -873,21 +327,14 @@ import 'floating-vue/dist/style.css';
|
|
|
873
327
|
import { sidenavPropTypes, sidenavEmitTypes } from './sidenav';
|
|
874
328
|
import { useSidenav } from './use-sidenav';
|
|
875
329
|
|
|
876
|
-
import
|
|
330
|
+
import SidenavMenuLinks from './sidenav-menu-links.vue';
|
|
331
|
+
|
|
332
|
+
import SprAvatar from '../avatar/avatar.vue';
|
|
877
333
|
import SprBadge from '../badge/badge.vue';
|
|
878
|
-
import
|
|
334
|
+
import SprTooltip from '../tooltip/tooltip.vue';
|
|
879
335
|
|
|
880
336
|
const props = defineProps(sidenavPropTypes);
|
|
881
337
|
const emit = defineEmits(sidenavEmitTypes);
|
|
882
338
|
|
|
883
|
-
const {
|
|
884
|
-
navLinks,
|
|
885
|
-
isQuckActionMenuVisible,
|
|
886
|
-
isUserMenuVisible,
|
|
887
|
-
userProfileError,
|
|
888
|
-
getUserInitials,
|
|
889
|
-
handleRedirect,
|
|
890
|
-
generateId,
|
|
891
|
-
getLozengeTone,
|
|
892
|
-
} = useSidenav(props, emit);
|
|
339
|
+
const { navLinks, isQuckActionMenuVisible, isUserMenuVisible, handleRedirect, generateId } = useSidenav(props, emit);
|
|
893
340
|
</script>
|