design-system-next 2.12.6 → 2.12.9
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 +6253 -6350
- 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/dropdown/dropdown.ts +5 -0
- package/src/components/dropdown/dropdown.vue +1 -0
- package/src/components/input/input.ts +4 -0
- package/src/components/input/input.vue +5 -2
- package/src/components/input/use-input.ts +26 -14
- package/src/components/list/list.ts +7 -0
- package/src/components/list/list.vue +80 -56
- package/src/components/list/use-list.ts +3 -1
- package/src/components/select/select-ladderized/select-ladderized.ts +12 -0
- package/src/components/select/select-ladderized/select-ladderized.vue +5 -2
- package/src/components/select/select-ladderized/use-select-ladderized.ts +14 -5
- package/src/components/select/select-multiple/select-multiple.ts +4 -0
- package/src/components/select/select-multiple/select-multiple.vue +5 -2
- package/src/components/select/select-multiple/use-select-multiple.ts +7 -1
- package/src/components/select/select.ts +4 -0
- package/src/components/select/select.vue +5 -2
- package/src/components/select/use-select.ts +7 -1
- package/src/components/sidenav/sidenav-menu-links.vue +304 -0
- package/src/components/sidenav/sidenav.ts +2 -2
- package/src/components/sidenav/sidenav.vue +5 -574
- package/src/components/table/table.ts +9 -9
- package/src/components/textarea/textarea.ts +4 -0
- package/src/components/textarea/textarea.vue +7 -1
- package/src/components/textarea/use-textarea.ts +7 -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
|
@@ -144,299 +144,7 @@
|
|
|
144
144
|
<!-- #endregion - Search -->
|
|
145
145
|
|
|
146
146
|
<!-- #region - Grouped Nav Links -->
|
|
147
|
-
<
|
|
148
|
-
<template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
|
|
149
|
-
<!-- #region - Parent Links with Menus -->
|
|
150
|
-
<template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
|
|
151
|
-
<Menu
|
|
152
|
-
aria-id="sidenav-menu-wrapper"
|
|
153
|
-
distance="18"
|
|
154
|
-
placement="right"
|
|
155
|
-
:triggers="['click', 'hover']"
|
|
156
|
-
instant-move
|
|
157
|
-
:delay="0"
|
|
158
|
-
>
|
|
159
|
-
<!-- #region - Parent Links -->
|
|
160
|
-
<div
|
|
161
|
-
:id="`${generateId(parentLink.title)}`"
|
|
162
|
-
:class="{
|
|
163
|
-
'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,
|
|
164
|
-
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
165
|
-
props.activeNav.parentNav === parentLink.title,
|
|
166
|
-
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
167
|
-
'active:spr-background-color-single-active active:spr-scale-90': true,
|
|
168
|
-
}"
|
|
169
|
-
>
|
|
170
|
-
<template v-if="parentLink.icon && parentLink.icon.includes('https://')">
|
|
171
|
-
<img
|
|
172
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
173
|
-
:src="parentLink.icon"
|
|
174
|
-
:alt="`${parentLink.title} icon`"
|
|
175
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
176
|
-
/>
|
|
177
|
-
<img
|
|
178
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
179
|
-
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
180
|
-
:alt="`${parentLink.title} icon`"
|
|
181
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
182
|
-
/>
|
|
183
|
-
</template>
|
|
184
|
-
<template v-else>
|
|
185
|
-
<Icon
|
|
186
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
187
|
-
:icon="parentLink.icon"
|
|
188
|
-
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
189
|
-
/>
|
|
190
|
-
<Icon
|
|
191
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
192
|
-
:icon="`${parentLink.icon}-fill`"
|
|
193
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
194
|
-
/>
|
|
195
|
-
<Icon v-else icon="ph:globe" />
|
|
196
|
-
</template>
|
|
197
|
-
</div>
|
|
198
|
-
<!-- #endregion - Parent Links -->
|
|
199
|
-
|
|
200
|
-
<!-- #region - Menu Links Popper -->
|
|
201
|
-
<template #popper>
|
|
202
|
-
<div
|
|
203
|
-
class="spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-2"
|
|
204
|
-
>
|
|
205
|
-
<h3 class="spr-body-sm-regular-medium spr-m-0">
|
|
206
|
-
{{ parentLink.title }}
|
|
207
|
-
</h3>
|
|
208
|
-
</div>
|
|
209
|
-
|
|
210
|
-
<template v-for="(menuLink, menuLinkIndex) in parentLink.menuLinks" :key="menuLinkIndex">
|
|
211
|
-
<h5
|
|
212
|
-
v-if="menuLink.menuHeading"
|
|
213
|
-
:class="{
|
|
214
|
-
'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
|
|
215
|
-
'spr-mt-2': menuLinkIndex !== 0,
|
|
216
|
-
}"
|
|
217
|
-
>
|
|
218
|
-
{{ menuLink.menuHeading }}
|
|
219
|
-
</h5>
|
|
220
|
-
|
|
221
|
-
<template v-for="(menuLinkItem, menuLinkItemIndex) in menuLink.items" :key="menuLinkItemIndex">
|
|
222
|
-
<!-- #region - Menu link with Submenu links -->
|
|
223
|
-
<template v-if="menuLinkItem.submenuLinks && menuLinkItem.submenuLinks.length > 0">
|
|
224
|
-
<Menu
|
|
225
|
-
aria-id="sidenav-submenu-l1-wrapper"
|
|
226
|
-
distance="4"
|
|
227
|
-
placement="right-start"
|
|
228
|
-
:triggers="['click', 'hover']"
|
|
229
|
-
instant-move
|
|
230
|
-
:delay="0"
|
|
231
|
-
>
|
|
232
|
-
<!-- #region - Menu links -->
|
|
233
|
-
<div
|
|
234
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
235
|
-
:class="{
|
|
236
|
-
'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,
|
|
237
|
-
'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
|
|
238
|
-
'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
|
|
239
|
-
'active:spr-background-color-pressed': true,
|
|
240
|
-
}"
|
|
241
|
-
>
|
|
242
|
-
<div
|
|
243
|
-
v-if="props.activeNav.menu === menuLinkItem.title"
|
|
244
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
245
|
-
></div>
|
|
246
|
-
<span>{{ menuLinkItem.title }}</span>
|
|
247
|
-
<div class="spr-flex spr-items-center spr-gap-1">
|
|
248
|
-
<template v-for="(attr, i) in menuLinkItem?.attributes" :key="i">
|
|
249
|
-
<spr-lozenge
|
|
250
|
-
v-if="attr?.name === 'lozenge' && attr?.value"
|
|
251
|
-
:label="getLozengeLabel(attr)"
|
|
252
|
-
:tone="getLozengeTone(attr)"
|
|
253
|
-
fill
|
|
254
|
-
/>
|
|
255
|
-
</template>
|
|
256
|
-
<Icon
|
|
257
|
-
icon="ph:caret-right"
|
|
258
|
-
class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
|
|
259
|
-
/>
|
|
260
|
-
</div>
|
|
261
|
-
</div>
|
|
262
|
-
<!-- #endregion - Menu links -->
|
|
263
|
-
|
|
264
|
-
<!-- #region - Submenu Links Popper -->
|
|
265
|
-
<!--
|
|
266
|
-
Note: if you want the popper to stay open while hovering over submenuLink.subMenuHeading & submenuLinkItem.title,
|
|
267
|
-
you need to keep it inside a <Menu> or ensure the content is part of the popper's interactive area.
|
|
268
|
-
|
|
269
|
-
"sidenav-submenu-l2-wrapper" - Popper is currently hidden since sidenav only has 1 level of submenu links.
|
|
270
|
-
-->
|
|
271
|
-
<template #popper>
|
|
272
|
-
<Menu
|
|
273
|
-
aria-id="sidenav-submenu-l2-wrapper"
|
|
274
|
-
:triggers="['click', 'hover']"
|
|
275
|
-
instant-move
|
|
276
|
-
:delay="0"
|
|
277
|
-
>
|
|
278
|
-
<template
|
|
279
|
-
v-for="(submenuLink, submenuLinkIndex) in menuLinkItem.submenuLinks"
|
|
280
|
-
:key="submenuLinkIndex"
|
|
281
|
-
>
|
|
282
|
-
<h5
|
|
283
|
-
v-if="submenuLink.subMenuHeading"
|
|
284
|
-
:class="{
|
|
285
|
-
'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
|
|
286
|
-
'spr-mt-2': submenuLinkIndex !== 0,
|
|
287
|
-
}"
|
|
288
|
-
>
|
|
289
|
-
{{ submenuLink.subMenuHeading }}
|
|
290
|
-
</h5>
|
|
291
|
-
|
|
292
|
-
<template
|
|
293
|
-
v-for="(submenuLinkItem, submenuLinkItemIndex) in submenuLink.items"
|
|
294
|
-
:key="submenuLinkItemIndex"
|
|
295
|
-
>
|
|
296
|
-
<!-- #region - Submenu Links -->
|
|
297
|
-
<div
|
|
298
|
-
v-if="!submenuLinkItem.hidden"
|
|
299
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
|
|
300
|
-
:class="{
|
|
301
|
-
'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,
|
|
302
|
-
'spr-background-color-single-active':
|
|
303
|
-
props.activeNav.submenu === submenuLinkItem.title,
|
|
304
|
-
'hover:spr-background-color-hover':
|
|
305
|
-
props.activeNav.submenu !== submenuLinkItem.title,
|
|
306
|
-
'active:spr-background-color-pressed': true,
|
|
307
|
-
}"
|
|
308
|
-
@click="
|
|
309
|
-
handleRedirect(
|
|
310
|
-
submenuLinkItem,
|
|
311
|
-
parentLink.title,
|
|
312
|
-
menuLinkItem.title,
|
|
313
|
-
submenuLinkItem.title,
|
|
314
|
-
)
|
|
315
|
-
"
|
|
316
|
-
>
|
|
317
|
-
<div
|
|
318
|
-
v-show="props.activeNav.submenu === submenuLinkItem.title"
|
|
319
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
320
|
-
></div>
|
|
321
|
-
<div class="spr-flex spr-items-center spr-gap-1">
|
|
322
|
-
<span>{{ submenuLinkItem.title }}</span>
|
|
323
|
-
|
|
324
|
-
<template v-for="(attr, i) in submenuLinkItem?.attributes" :key="i">
|
|
325
|
-
<spr-lozenge
|
|
326
|
-
v-if="attr?.name === 'lozenge' && attr?.value"
|
|
327
|
-
:label="getLozengeLabel(attr)"
|
|
328
|
-
:tone="getLozengeTone(attr)"
|
|
329
|
-
fill
|
|
330
|
-
/>
|
|
331
|
-
</template>
|
|
332
|
-
</div>
|
|
333
|
-
</div>
|
|
334
|
-
<!-- #endregion - Submenu Links -->
|
|
335
|
-
</template>
|
|
336
|
-
</template>
|
|
337
|
-
</Menu>
|
|
338
|
-
</template>
|
|
339
|
-
<!-- #endregion - Submenu Links Popper -->
|
|
340
|
-
</Menu>
|
|
341
|
-
</template>
|
|
342
|
-
<!-- #endregion - Menu link with Submenu links -->
|
|
343
|
-
|
|
344
|
-
<!-- #region - Menu link only -->
|
|
345
|
-
<template v-else>
|
|
346
|
-
<div
|
|
347
|
-
v-if="!menuLinkItem.hidden"
|
|
348
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
349
|
-
:class="{
|
|
350
|
-
'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,
|
|
351
|
-
'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
|
|
352
|
-
'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
|
|
353
|
-
'active:spr-background-color-pressed': true,
|
|
354
|
-
}"
|
|
355
|
-
@click="handleRedirect(menuLinkItem, parentLink.title, menuLinkItem.title, '')"
|
|
356
|
-
>
|
|
357
|
-
<div
|
|
358
|
-
v-if="props.activeNav.menu === menuLinkItem.title"
|
|
359
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
360
|
-
></div>
|
|
361
|
-
<span>{{ menuLinkItem.title }}</span>
|
|
362
|
-
<template v-for="(attr, i) in menuLinkItem?.attributes" :key="i">
|
|
363
|
-
<spr-lozenge
|
|
364
|
-
v-if="attr?.name === 'lozenge' && attr?.value"
|
|
365
|
-
:label="getLozengeLabel(attr)"
|
|
366
|
-
:tone="getLozengeTone(attr)"
|
|
367
|
-
fill
|
|
368
|
-
/>
|
|
369
|
-
</template>
|
|
370
|
-
</div>
|
|
371
|
-
</template>
|
|
372
|
-
<!-- #endregion - Menu link only -->
|
|
373
|
-
</template>
|
|
374
|
-
</template>
|
|
375
|
-
</template>
|
|
376
|
-
<!-- #endregion - Menu Links -->
|
|
377
|
-
</Menu>
|
|
378
|
-
</template>
|
|
379
|
-
<!-- #endregion - Parent Links with Menus -->
|
|
380
|
-
|
|
381
|
-
<!-- #region - Parent link only -->
|
|
382
|
-
<template v-else>
|
|
383
|
-
<spr-tooltip
|
|
384
|
-
v-if="!parentLink.hidden"
|
|
385
|
-
:text="parentLink.title"
|
|
386
|
-
placement="right"
|
|
387
|
-
:distance="18"
|
|
388
|
-
:fit-content="false"
|
|
389
|
-
>
|
|
390
|
-
<div
|
|
391
|
-
:id="`${generateId(parentLink.title)}`"
|
|
392
|
-
:class="{
|
|
393
|
-
'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,
|
|
394
|
-
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
395
|
-
props.activeNav.parentNav === parentLink.title,
|
|
396
|
-
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
397
|
-
'active:spr-background-color-single-active active:spr-scale-90': true,
|
|
398
|
-
}"
|
|
399
|
-
@click="handleRedirect(parentLink, parentLink.title, '', '')"
|
|
400
|
-
>
|
|
401
|
-
<template v-if="parentLink.icon && parentLink.icon.includes('https://')">
|
|
402
|
-
<img
|
|
403
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
404
|
-
:src="parentLink.icon"
|
|
405
|
-
:alt="`${parentLink.title} icon`"
|
|
406
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
407
|
-
/>
|
|
408
|
-
<img
|
|
409
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
410
|
-
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
411
|
-
:alt="`${parentLink.title} icon`"
|
|
412
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
413
|
-
/>
|
|
414
|
-
</template>
|
|
415
|
-
<template v-else>
|
|
416
|
-
<Icon
|
|
417
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
418
|
-
:icon="parentLink.icon"
|
|
419
|
-
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
420
|
-
/>
|
|
421
|
-
<Icon
|
|
422
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
423
|
-
:icon="`${parentLink.icon}-fill`"
|
|
424
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
425
|
-
/>
|
|
426
|
-
<Icon v-else icon="ph:globe" />
|
|
427
|
-
</template>
|
|
428
|
-
</div>
|
|
429
|
-
</spr-tooltip>
|
|
430
|
-
</template>
|
|
431
|
-
<!-- #endregion - Parent link only -->
|
|
432
|
-
</template>
|
|
433
|
-
|
|
434
|
-
<!-- Divider -->
|
|
435
|
-
<div
|
|
436
|
-
v-if="navLinks.top.length > 0 && navLinkIndex < navLinks.top.length - 1"
|
|
437
|
-
class="spr-background-color-hover spr-h-[2px] spr-w-full"
|
|
438
|
-
></div>
|
|
439
|
-
</template>
|
|
147
|
+
<sidenav-menu-links :nav-links="navLinks" />
|
|
440
148
|
<!-- #endregion - Grouped Nav Links -->
|
|
441
149
|
</div>
|
|
442
150
|
<!-- #endregion - Top Section -->
|
|
@@ -447,277 +155,7 @@
|
|
|
447
155
|
class="spr-grid spr-justify-center spr-gap-2 spr-px-3 spr-pb-4 spr-pt-0"
|
|
448
156
|
>
|
|
449
157
|
<!-- #region - Grouped Nav Links -->
|
|
450
|
-
<
|
|
451
|
-
<template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
|
|
452
|
-
<!-- #region - Parent Links with Menus -->
|
|
453
|
-
<template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
|
|
454
|
-
<Menu
|
|
455
|
-
aria-id="sidenav-menu-wrapper"
|
|
456
|
-
distance="18"
|
|
457
|
-
placement="right"
|
|
458
|
-
:triggers="['click', 'hover']"
|
|
459
|
-
instant-move
|
|
460
|
-
:delay="0"
|
|
461
|
-
>
|
|
462
|
-
<!-- #region - Parent Links -->
|
|
463
|
-
<div
|
|
464
|
-
:id="`${generateId(parentLink.title)}`"
|
|
465
|
-
:class="{
|
|
466
|
-
'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,
|
|
467
|
-
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
468
|
-
props.activeNav.parentNav === parentLink.title,
|
|
469
|
-
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
470
|
-
'active:spr-background-color-single-active active:spr-scale-90': true,
|
|
471
|
-
}"
|
|
472
|
-
>
|
|
473
|
-
<template v-if="parentLink.icon && parentLink.icon.includes('https://')">
|
|
474
|
-
<img
|
|
475
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
476
|
-
:src="parentLink.icon"
|
|
477
|
-
:alt="`${parentLink.title} icon`"
|
|
478
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
479
|
-
/>
|
|
480
|
-
<img
|
|
481
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
482
|
-
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
483
|
-
:alt="`${parentLink.title} icon`"
|
|
484
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
485
|
-
/>
|
|
486
|
-
</template>
|
|
487
|
-
<template v-else>
|
|
488
|
-
<Icon
|
|
489
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
490
|
-
:icon="parentLink.icon"
|
|
491
|
-
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
492
|
-
/>
|
|
493
|
-
<Icon
|
|
494
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
495
|
-
:icon="`${parentLink.icon}-fill`"
|
|
496
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
497
|
-
/>
|
|
498
|
-
<Icon v-else icon="ph:globe" />
|
|
499
|
-
</template>
|
|
500
|
-
</div>
|
|
501
|
-
<!-- #endregion - Parent Links -->
|
|
502
|
-
|
|
503
|
-
<!-- #region - Menu Links Popper -->
|
|
504
|
-
<template #popper>
|
|
505
|
-
<div
|
|
506
|
-
class="spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-2"
|
|
507
|
-
>
|
|
508
|
-
<h3 class="spr-body-sm-regular-medium spr-m-0">
|
|
509
|
-
{{ parentLink.title }}
|
|
510
|
-
</h3>
|
|
511
|
-
</div>
|
|
512
|
-
|
|
513
|
-
<template v-for="(menuLink, menuLinkIndex) in parentLink.menuLinks" :key="menuLinkIndex">
|
|
514
|
-
<h5
|
|
515
|
-
v-if="menuLink.menuHeading"
|
|
516
|
-
:class="{
|
|
517
|
-
'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
|
|
518
|
-
'spr-mt-3': menuLinkIndex !== 0,
|
|
519
|
-
}"
|
|
520
|
-
>
|
|
521
|
-
{{ menuLink.menuHeading }}
|
|
522
|
-
</h5>
|
|
523
|
-
|
|
524
|
-
<template v-for="(menuLinkItem, menuLinkItemIndex) in menuLink.items" :key="menuLinkItemIndex">
|
|
525
|
-
<!-- #region - Menu link with Submenu links -->
|
|
526
|
-
<template v-if="menuLinkItem.submenuLinks && menuLinkItem.submenuLinks.length > 0">
|
|
527
|
-
<Menu
|
|
528
|
-
aria-id="sidenav-submenu-l1-wrapper"
|
|
529
|
-
distance="4"
|
|
530
|
-
placement="right-start"
|
|
531
|
-
:triggers="['click', 'hover']"
|
|
532
|
-
instant-move
|
|
533
|
-
:delay="0"
|
|
534
|
-
>
|
|
535
|
-
<!-- #region - Menu links -->
|
|
536
|
-
<div
|
|
537
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
538
|
-
:class="{
|
|
539
|
-
'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,
|
|
540
|
-
'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
|
|
541
|
-
'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
|
|
542
|
-
'active:spr-background-color-pressed': true,
|
|
543
|
-
}"
|
|
544
|
-
>
|
|
545
|
-
<div
|
|
546
|
-
v-if="props.activeNav.menu === menuLinkItem.title"
|
|
547
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
548
|
-
></div>
|
|
549
|
-
<span>{{ menuLinkItem.title }}</span>
|
|
550
|
-
<Icon
|
|
551
|
-
icon="ph:caret-right"
|
|
552
|
-
class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
|
|
553
|
-
/>
|
|
554
|
-
</div>
|
|
555
|
-
<!-- #endregion - Menu links -->
|
|
556
|
-
|
|
557
|
-
<!-- #region - Submenu Links Popper -->
|
|
558
|
-
<!--
|
|
559
|
-
Note: if you want the popper to stay open while hovering over submenuLink.subMenuHeading & submenuLinkItem.title,
|
|
560
|
-
you need to keep it inside a <Menu> or ensure the content is part of the popper's interactive area.
|
|
561
|
-
|
|
562
|
-
"sidenav-submenu-l2-wrapper" - Popper is currently hidden since sidenav only has 1 level of submenu links.
|
|
563
|
-
-->
|
|
564
|
-
<template #popper>
|
|
565
|
-
<Menu
|
|
566
|
-
aria-id="sidenav-submenu-l2-wrapper"
|
|
567
|
-
:triggers="['click', 'hover']"
|
|
568
|
-
instant-move
|
|
569
|
-
:delay="0"
|
|
570
|
-
>
|
|
571
|
-
<template
|
|
572
|
-
v-for="(submenuLink, submenuLinkIndex) in menuLinkItem.submenuLinks"
|
|
573
|
-
:key="submenuLinkIndex"
|
|
574
|
-
>
|
|
575
|
-
<h5
|
|
576
|
-
v-if="submenuLink.subMenuHeading"
|
|
577
|
-
:class="{
|
|
578
|
-
'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
|
|
579
|
-
'spr-mt-3': submenuLinkIndex !== 0,
|
|
580
|
-
}"
|
|
581
|
-
>
|
|
582
|
-
{{ submenuLink.subMenuHeading }}
|
|
583
|
-
</h5>
|
|
584
|
-
|
|
585
|
-
<template
|
|
586
|
-
v-for="(submenuLinkItem, submenuLinkItemIndex) in submenuLink.items"
|
|
587
|
-
:key="submenuLinkItemIndex"
|
|
588
|
-
>
|
|
589
|
-
<!-- #region - Submenu Links -->
|
|
590
|
-
<div
|
|
591
|
-
v-if="!submenuLinkItem.hidden"
|
|
592
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
|
|
593
|
-
:class="{
|
|
594
|
-
'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,
|
|
595
|
-
'spr-background-color-single-active':
|
|
596
|
-
props.activeNav.submenu === submenuLinkItem.title,
|
|
597
|
-
'hover:spr-background-color-hover':
|
|
598
|
-
props.activeNav.submenu !== submenuLinkItem.title,
|
|
599
|
-
'active:spr-background-color-pressed': true,
|
|
600
|
-
}"
|
|
601
|
-
@click="
|
|
602
|
-
handleRedirect(
|
|
603
|
-
submenuLinkItem,
|
|
604
|
-
parentLink.title,
|
|
605
|
-
menuLinkItem.title,
|
|
606
|
-
submenuLinkItem.title,
|
|
607
|
-
)
|
|
608
|
-
"
|
|
609
|
-
>
|
|
610
|
-
<div
|
|
611
|
-
v-show="props.activeNav.submenu === submenuLinkItem.title"
|
|
612
|
-
class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
|
|
613
|
-
></div>
|
|
614
|
-
<div class="spr-flex spr-items-center spr-gap-1">
|
|
615
|
-
<span>{{ submenuLinkItem.title }}</span>
|
|
616
|
-
|
|
617
|
-
<template v-for="(attr, i) in submenuLinkItem?.attributes" :key="i">
|
|
618
|
-
<spr-lozenge
|
|
619
|
-
v-if="attr?.name === 'lozenge' && attr?.value"
|
|
620
|
-
:label="getLozengeLabel(attr)"
|
|
621
|
-
:tone="getLozengeTone(attr)"
|
|
622
|
-
fill
|
|
623
|
-
/>
|
|
624
|
-
</template>
|
|
625
|
-
</div>
|
|
626
|
-
</div>
|
|
627
|
-
<!-- #endregion - Submenu Links -->
|
|
628
|
-
</template>
|
|
629
|
-
</template>
|
|
630
|
-
</Menu>
|
|
631
|
-
</template>
|
|
632
|
-
<!-- #endregion - Submenu Links Popper -->
|
|
633
|
-
</Menu>
|
|
634
|
-
</template>
|
|
635
|
-
<!-- #endregion - Menu link with Submenu links -->
|
|
636
|
-
|
|
637
|
-
<!-- #region - Menu link only -->
|
|
638
|
-
<template v-else>
|
|
639
|
-
<div
|
|
640
|
-
v-if="!menuLinkItem.hidden"
|
|
641
|
-
:id="`${generateId(parentLink.title, menuLinkItem.title)}`"
|
|
642
|
-
:class="[
|
|
643
|
-
'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',
|
|
644
|
-
'hover:spr-background-color-hover',
|
|
645
|
-
'active:spr-background-color-pressed',
|
|
646
|
-
'last:spr-rounded-b-xl',
|
|
647
|
-
]"
|
|
648
|
-
@click="handleRedirect(menuLinkItem, parentLink.title, menuLinkItem.title, '')"
|
|
649
|
-
>
|
|
650
|
-
<span>{{ menuLinkItem.title }}</span>
|
|
651
|
-
</div>
|
|
652
|
-
</template>
|
|
653
|
-
<!-- #endregion - Menu link only -->
|
|
654
|
-
</template>
|
|
655
|
-
</template>
|
|
656
|
-
</template>
|
|
657
|
-
<!-- #endregion - Menu Links Popper -->
|
|
658
|
-
</Menu>
|
|
659
|
-
</template>
|
|
660
|
-
<!-- #endregion - Parent Links with Menus -->
|
|
661
|
-
|
|
662
|
-
<!-- #region - Parent link only -->
|
|
663
|
-
<template v-else>
|
|
664
|
-
<spr-tooltip
|
|
665
|
-
v-if="!parentLink.hidden"
|
|
666
|
-
:text="parentLink.title"
|
|
667
|
-
placement="right"
|
|
668
|
-
:distance="18"
|
|
669
|
-
:fit-content="false"
|
|
670
|
-
>
|
|
671
|
-
<!-- #region - Parent Links -->
|
|
672
|
-
<div
|
|
673
|
-
:id="`${generateId(parentLink.title)}`"
|
|
674
|
-
:class="{
|
|
675
|
-
'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,
|
|
676
|
-
'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
|
|
677
|
-
props.activeNav.parentNav === parentLink.title,
|
|
678
|
-
'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
|
|
679
|
-
'active:spr-background-color-single-active active:spr-scale-90': true,
|
|
680
|
-
}"
|
|
681
|
-
@click="handleRedirect(parentLink, parentLink.title, '', '')"
|
|
682
|
-
>
|
|
683
|
-
<template v-if="parentLink.icon && parentLink.icon.includes('https://')">
|
|
684
|
-
<img
|
|
685
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
686
|
-
:src="parentLink.icon"
|
|
687
|
-
:alt="`${parentLink.title} icon`"
|
|
688
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
689
|
-
/>
|
|
690
|
-
<img
|
|
691
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
692
|
-
:src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
|
|
693
|
-
:alt="`${parentLink.title} icon`"
|
|
694
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]"
|
|
695
|
-
/>
|
|
696
|
-
</template>
|
|
697
|
-
<template v-else>
|
|
698
|
-
<Icon
|
|
699
|
-
v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
|
|
700
|
-
:icon="parentLink.icon"
|
|
701
|
-
class="spr-h-[1.25em] spr-w-[1.25em]"
|
|
702
|
-
/>
|
|
703
|
-
<Icon
|
|
704
|
-
v-else-if="props.activeNav.parentNav === parentLink.title"
|
|
705
|
-
:icon="`${parentLink.icon}-fill`"
|
|
706
|
-
class="spr-h-[1.25em] spr-w-[1.25em] spr-text-kangkong-700"
|
|
707
|
-
/>
|
|
708
|
-
<Icon v-else icon="ph:globe" />
|
|
709
|
-
</template>
|
|
710
|
-
</div>
|
|
711
|
-
<!-- #endregion - Parent Links -->
|
|
712
|
-
</spr-tooltip>
|
|
713
|
-
</template>
|
|
714
|
-
<!-- #endregion - Parent link only -->
|
|
715
|
-
</template>
|
|
716
|
-
<div
|
|
717
|
-
v-if="navLinks.bottom.length > 0 && navLinkIndex < navLinks.bottom.length - 1"
|
|
718
|
-
class="spr-background-color-hover spr-h-[2px] spr-w-full"
|
|
719
|
-
></div>
|
|
720
|
-
</template>
|
|
158
|
+
<sidenav-menu-links :nav-links="navLinks" />
|
|
721
159
|
<!-- #endregion - Grouped Nav Links -->
|
|
722
160
|
</div>
|
|
723
161
|
<!-- #endregion - Bottom Section -->
|
|
@@ -889,21 +327,14 @@ import 'floating-vue/dist/style.css';
|
|
|
889
327
|
import { sidenavPropTypes, sidenavEmitTypes } from './sidenav';
|
|
890
328
|
import { useSidenav } from './use-sidenav';
|
|
891
329
|
|
|
330
|
+
import SidenavMenuLinks from './sidenav-menu-links.vue';
|
|
331
|
+
|
|
892
332
|
import SprAvatar from '../avatar/avatar.vue';
|
|
893
333
|
import SprBadge from '../badge/badge.vue';
|
|
894
|
-
import SprLozenge from '../lozenge/lozenge.vue';
|
|
895
334
|
import SprTooltip from '../tooltip/tooltip.vue';
|
|
896
335
|
|
|
897
336
|
const props = defineProps(sidenavPropTypes);
|
|
898
337
|
const emit = defineEmits(sidenavEmitTypes);
|
|
899
338
|
|
|
900
|
-
const {
|
|
901
|
-
navLinks,
|
|
902
|
-
isQuckActionMenuVisible,
|
|
903
|
-
isUserMenuVisible,
|
|
904
|
-
handleRedirect,
|
|
905
|
-
generateId,
|
|
906
|
-
getLozengeLabel,
|
|
907
|
-
getLozengeTone,
|
|
908
|
-
} = useSidenav(props, emit);
|
|
339
|
+
const { navLinks, isQuckActionMenuVisible, isUserMenuVisible, handleRedirect, generateId } = useSidenav(props, emit);
|
|
909
340
|
</script>
|
|
@@ -6,15 +6,15 @@ export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<
|
|
|
6
6
|
export interface Header {
|
|
7
7
|
field: string;
|
|
8
8
|
name: string;
|
|
9
|
-
sort
|
|
10
|
-
hasAvatar
|
|
11
|
-
hasIcon
|
|
12
|
-
hasSubtext
|
|
13
|
-
hasLozengeTitle
|
|
14
|
-
hasChipTitle
|
|
15
|
-
badgeText
|
|
16
|
-
badgeVariant
|
|
17
|
-
avatarVariant
|
|
9
|
+
sort?: boolean;
|
|
10
|
+
hasAvatar?: boolean;
|
|
11
|
+
hasIcon?: boolean;
|
|
12
|
+
hasSubtext?: boolean;
|
|
13
|
+
hasLozengeTitle?: boolean;
|
|
14
|
+
hasChipTitle?: boolean;
|
|
15
|
+
badgeText?: string;
|
|
16
|
+
badgeVariant?: string;
|
|
17
|
+
avatarVariant?: string;
|
|
18
18
|
customTailwindClasses?: string;
|
|
19
19
|
}
|
|
20
20
|
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="textareaClasses.wrapperClasses">
|
|
3
|
-
<label v-if="label" :for="id" :class="textareaClasses.labelClasses">
|
|
3
|
+
<label v-if="props.label || props.supportingLabel" :for="props.id" :class="textareaClasses.labelClasses">
|
|
4
|
+
<span v-if="props.label">{{ props.label }}</span>
|
|
5
|
+
<span v-if="props.supportingLabel" :class="textareaClasses.supportingLabelClasses">
|
|
6
|
+
{{ props.supportingLabel }}
|
|
7
|
+
</span>
|
|
8
|
+
</label>
|
|
9
|
+
|
|
4
10
|
<textarea
|
|
5
11
|
v-bind="$attrs"
|
|
6
12
|
:id="props.id"
|