design-system-next 1.2.25 → 1.3.2

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.
Files changed (45) hide show
  1. package/dist/design-system-next.js +2937 -2937
  2. package/dist/design-system-next.js.gz +0 -0
  3. package/dist/main.css +1 -1
  4. package/dist/main.css.gz +0 -0
  5. package/dist/main.d.ts +1 -6
  6. package/package.json +1 -1
  7. package/src/App.vue +8 -8
  8. package/src/assets/styles/tailwind.css +366 -367
  9. package/src/components/avatar/avatar.vue +1 -1
  10. package/src/components/avatar/use-avatar.ts +40 -34
  11. package/src/components/badge/badge.vue +2 -2
  12. package/src/components/badge/use-badge.ts +16 -16
  13. package/src/components/button/use-button.ts +39 -34
  14. package/src/components/checkbox/checkbox.vue +2 -2
  15. package/src/components/checkbox/use-checkbox.ts +23 -20
  16. package/src/components/dropdown/dropdown.vue +6 -6
  17. package/src/components/dropdown/use-dropdown.ts +6 -5
  18. package/src/components/empty-state/empty-state.vue +6 -5
  19. package/src/components/empty-state/use-empty-state.ts +8 -6
  20. package/src/components/input/input.ts +6 -1
  21. package/src/components/input/input.vue +7 -4
  22. package/src/components/input/use-input.ts +49 -47
  23. package/src/components/lozenge/lozenge.vue +7 -5
  24. package/src/components/lozenge/use-lozenge.ts +23 -15
  25. package/src/components/modal/modal.vue +8 -8
  26. package/src/components/modal/use-modal.ts +8 -8
  27. package/src/components/radio/radio.vue +1 -1
  28. package/src/components/radio/use-radio.ts +15 -13
  29. package/src/components/sidenav/sidenav.vue +158 -138
  30. package/src/components/sidepanel/sidepanel.vue +29 -21
  31. package/src/components/sidepanel/use-sidepanel.ts +17 -15
  32. package/src/components/snackbar/snack/snack.vue +13 -40
  33. package/src/components/snackbar/snack/use-snack.ts +12 -11
  34. package/src/components/snackbar/snackbar.vue +11 -13
  35. package/src/components/switch/switch.vue +14 -8
  36. package/src/components/switch/use-switch.ts +16 -15
  37. package/src/components/table/table.ts +5 -0
  38. package/src/components/table/table.vue +51 -24
  39. package/src/components/table/use-table.ts +1 -0
  40. package/src/components/tabs/tabs.vue +23 -19
  41. package/src/components/tabs/use-tabs.ts +5 -4
  42. package/src/components/timePicker/timePicker.vue +10 -9
  43. package/src/components/timePicker/use-timePicker.ts +31 -45
  44. package/src/components/tooltip/tooltip.vue +1 -1
  45. package/src/main.ts +3 -0
package/src/components/sidenav/sidenav.vue CHANGED
@@ -1,26 +1,29 @@
1
1
  <template>
2
2
  <div
3
3
  :class="[
4
- 'hidden-scrolls fixed bottom-0 left-0 top-0',
5
- 'background-color w-auto overflow-y-auto overflow-x-hidden',
6
- 'border-color-weak border-b-0 border-l-0 border-r border-t-0 border-solid',
7
- 'transition duration-150 ease-in-out',
4
+ 'spr-hidden-scrolls spr-fixed spr-bottom-0 spr-left-0 spr-top-0',
5
+ 'spr-background-color spr-w-auto spr-overflow-y-auto spr-overflow-x-hidden',
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',
8
8
  ]"
9
9
  >
10
10
  <div
11
11
  :class="{
12
- 'hidden-scrolls flex h-full flex-col justify-between overflow-auto': true,
13
- 'max-h-[calc(100vh-194px)]': props.notificationCount && props.requestCount,
14
- 'max-h-[calc(100vh-60px)]': !props.notificationCount && !props.requestCount,
15
- 'max-h-[calc(100vh-150px)]':
12
+ 'spr-hidden-scrolls spr-flex spr-h-full spr-flex-col spr-justify-between spr-overflow-auto': true,
13
+ 'spr-max-h-[calc(100vh-194px)]': props.notificationCount && props.requestCount,
14
+ 'spr-max-h-[calc(100vh-60px)]': !props.notificationCount && !props.requestCount,
15
+ 'spr-max-h-[calc(100vh-150px)]':
16
16
  (props.notificationCount || props.requestCount) && !(props.notificationCount && props.requestCount),
17
17
  }"
18
18
  >
19
19
  <!-- Top Section -->
20
- <div class="grid justify-center gap-2 px-3 pb-4 pt-4">
20
+ <div class="spr-grid spr-justify-center spr-gap-2 spr-px-3 spr-pb-4 spr-pt-4">
21
21
  <!-- Logo -->
22
22
  <div
23
- :class="['grid justify-center p-2', '[&>img]:mx-auto [&>img]:h-[24px] [&>img]:w-[24px] [&>img]:object-cover']"
23
+ :class="[
24
+ 'spr-grid spr-justify-center spr-p-2',
25
+ '[&>img]:spr-mx-auto [&>img]:spr-h-[24px] [&>img]:spr-w-[24px] [&>img]:spr-object-cover',
26
+ ]"
24
27
  >
25
28
  <slot name="logo-image" />
26
29
  </div>
@@ -38,44 +41,44 @@
38
41
  >
39
42
  <div
40
43
  :class="{
41
- 'flex w-full cursor-pointer items-center text-center text-[28px] transition duration-150 ease-in-out': true,
42
- 'hover:brightness-75': true,
43
- 'active:text-color-success-pressed active:scale-90': true,
44
- 'text-color-inverted-disabled rotate-180': isQuckActionMenuVisible,
45
- 'text-color-brand-base': !isQuckActionMenuVisible,
44
+ 'spr-flex spr-w-full spr-cursor-pointer spr-items-center spr-text-center spr-text-[28px] spr-transition spr-duration-150 spr-ease-in-out': true,
45
+ 'hover:spr-brightness-75': true,
46
+ 'active:spr-text-color-success-pressed active:spr-scale-90': true,
47
+ 'spr-text-color-inverted-disabled spr-rotate-180': isQuckActionMenuVisible,
48
+ 'spr-text-color-brand-base': !isQuckActionMenuVisible,
46
49
  }"
47
50
  @click="isQuckActionMenuVisible = !isQuckActionMenuVisible"
48
51
  >
49
- <Icon icon="ph:plus-circle-fill" class="w-full" />
52
+ <Icon icon="ph:plus-circle-fill" class="spr-w-full" />
50
53
  </div>
51
54
 
52
55
  <template #popper>
53
56
  <div
54
57
  :class="[
55
- 'px-4 py-3',
56
- 'border-color-weak flex justify-between border-x-0 border-b border-t-0 border-solid',
58
+ 'spr-px-4 spr-py-3',
59
+ 'spr-border-color-weak spr-flex spr-justify-between spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
57
60
  ]"
58
61
  >
59
- <h3 class="body-sm-regular-medium m-0">Quick Actions</h3>
62
+ <h3 class="spr-body-sm-regular-medium spr-m-0">Quick Actions</h3>
60
63
  <Icon
61
64
  icon="ph:x"
62
65
  :class="[
63
- 'text-color-weak h-[20px] w-[20px] cursor-pointer',
64
- 'transition duration-150 ease-in-out',
65
- 'active:scale-90',
66
+ 'spr-text-color-weak spr-h-[20px] spr-w-[20px] spr-cursor-pointer',
67
+ 'spr-transition spr-duration-150 spr-ease-in-out',
68
+ 'active:spr-scale-90',
66
69
  ]"
67
70
  @click="isQuckActionMenuVisible = !isQuckActionMenuVisible"
68
71
  />
69
72
  </div>
70
73
 
71
- <div class="max-h-[268px] overflow-auto">
74
+ <div class="spr-max-h-[268px] spr-overflow-auto">
72
75
  <template v-for="(quickAction, quickActionIndex) in props.quickActions" :key="quickActionIndex">
73
76
  <h5
74
77
  v-if="quickAction.menuHeading"
75
78
  :class="[
76
79
  {
77
- 'label-xs-medium text-color-supporting m-0 p-2': true,
78
- 'mt-3': quickActionIndex !== 0,
80
+ 'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
81
+ 'spr-mt-3': quickActionIndex !== 0,
79
82
  },
80
83
  ]"
81
84
  >
@@ -85,28 +88,32 @@
85
88
  <div
86
89
  v-if="!menuLinkItem.hidden"
87
90
  :class="[
88
- 'flex cursor-pointer gap-2 px-4 py-3 align-middle duration-150 ease-in-out',
89
- 'hover:background-color-hover',
90
- 'active:background-color-pressed',
91
+ 'spr-flex spr-cursor-pointer spr-gap-2 spr-px-4 spr-py-3 spr-align-middle spr-duration-150 spr-ease-in-out',
92
+ 'hover:spr-background-color-hover',
93
+ 'active:spr-background-color-pressed',
91
94
  ]"
92
95
  @click="handleRedirect(menuLinkItem, '', '', '')"
93
96
  >
94
97
  <div
95
98
  :class="{
96
- 'flex items-center rounded-border-radius-md p-2': true,
97
- 'border border-solid border-kangkong-400 bg-kangkong-50 text-kangkong-800':
99
+ 'spr-flex spr-items-center spr-rounded-border-radius-md spr-p-2': true,
100
+ 'spr-border spr-border-solid spr-border-kangkong-400 spr-bg-kangkong-50 spr-text-kangkong-800':
98
101
  menuLinkItem.iconBgColor === 'green',
99
- 'border border-solid border-ubas-400 bg-ubas-50 text-ubas-800':
102
+ 'spr-border spr-border-solid spr-border-ubas-400 spr-bg-ubas-50 spr-text-ubas-800':
100
103
  menuLinkItem.iconBgColor === 'purple',
101
104
  }"
102
105
  >
103
- <Icon v-if="menuLinkItem.icon" :icon="menuLinkItem.icon" class="h-[1em] w-[1em] text-[20px]" />
106
+ <Icon
107
+ v-if="menuLinkItem.icon"
108
+ :icon="menuLinkItem.icon"
109
+ class="spr-h-[1em] spr-w-[1em] spr-text-[20px]"
110
+ />
104
111
  </div>
105
- <div class="grid justify-between">
106
- <h5 class="body-sm-regular-medium text-color-strong m-0 truncate">
112
+ <div class="spr-grid spr-justify-between">
113
+ <h5 class="spr-body-sm-regular-medium spr-text-color-strong spr-m-0 spr-truncate">
107
114
  {{ menuLinkItem.title }}
108
115
  </h5>
109
- <p class="body-xs-regular text-color-base m-0 truncate">
116
+ <p class="spr-body-xs-regular spr-text-color-base spr-m-0 spr-truncate">
110
117
  {{ menuLinkItem.description }}
111
118
  </p>
112
119
  </div>
@@ -121,9 +128,9 @@
121
128
  <div
122
129
  v-if="props.hasSearch"
123
130
  :class="[
124
- 'flex cursor-pointer items-center justify-center rounded-border-radius-md p-2 transition duration-150 ease-in-out',
125
- 'hover:background-color-hover',
126
- 'active:background-color-single-active active:scale-90',
131
+ '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
+ 'hover:spr-background-color-hover',
133
+ 'active:spr-background-color-single-active active:spr-scale-90',
127
134
  ]"
128
135
  @click="emit('search', 'search-triggered')"
129
136
  >
@@ -144,20 +151,22 @@
144
151
  >
145
152
  <div
146
153
  :class="{
147
- 'flex cursor-pointer items-center justify-center rounded-border-radius-md p-2 transition duration-150 ease-in-out': true,
148
- 'background-color-single-active border-color-brand-base border-[1.5px] border-solid active:scale-90':
154
+ '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': true,
155
+ 'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
149
156
  props.activeNav.parentNav === parentLink.title,
150
- 'hover:background-color-hover': props.activeNav.parentNav != parentLink.title,
151
- 'active:background-color-single-active active:scale-90': true,
157
+ 'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
158
+ 'active:spr-background-color-single-active active:spr-scale-90': true,
152
159
  }"
153
160
  >
154
- <Icon v-if="parentLink.icon" :icon="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
161
+ <Icon v-if="parentLink.icon" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
155
162
  <Icon v-else icon="ph:globe" />
156
163
  </div>
157
164
 
158
165
  <template #popper>
159
- <div class="border-color-weak border-x-0 border-b border-t-0 border-solid p-2">
160
- <h3 class="body-sm-regular-medium m-0">
166
+ <div
167
+ class="spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-2"
168
+ >
169
+ <h3 class="spr-body-sm-regular-medium spr-m-0">
161
170
  {{ parentLink.title }}
162
171
  </h3>
163
172
  </div>
@@ -166,8 +175,8 @@
166
175
  <h5
167
176
  v-if="menuLink.menuHeading"
168
177
  :class="{
169
- 'label-xs-medium text-color-supporting m-0 p-2': true,
170
- 'mt-3': menuLinkIndex !== 0,
178
+ 'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
179
+ 'spr-mt-3': menuLinkIndex !== 0,
171
180
  }"
172
181
  >
173
182
  {{ menuLink.menuHeading }}
@@ -185,20 +194,20 @@
185
194
  >
186
195
  <div
187
196
  :class="{
188
- 'body-sm-regular relative m-0 flex cursor-pointer justify-between px-2 py-1.5 align-middle duration-150 ease-in-out': true,
189
- 'background-color-single-active': props.activeNav.menu === menuLinkItem.title,
190
- 'hover:background-color-hover': props.activeNav.menu !== menuLinkItem.title,
191
- 'active:background-color-pressed': true,
197
+ '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,
198
+ 'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
199
+ 'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
200
+ 'active:spr-background-color-pressed': true,
192
201
  }"
193
202
  >
194
203
  <div
195
204
  v-if="props.activeNav.menu === menuLinkItem.title"
196
- class="background-color-brand-base absolute left-0 top-0 h-full w-[2px]"
205
+ class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
197
206
  ></div>
198
207
  <span>{{ menuLinkItem.title }}</span>
199
208
  <Icon
200
209
  icon="ph:caret-right"
201
- class="h-[16px] w-[16px] transform font-normal transition-transform duration-300"
210
+ class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
202
211
  />
203
212
  </div>
204
213
 
@@ -210,8 +219,8 @@
210
219
  <h5
211
220
  v-if="submenuLink.subMenuHeading"
212
221
  :class="{
213
- 'label-xs-medium text-color-supporting m-0 p-2': true,
214
- 'mt-3': submenuLinkIndex !== 0,
222
+ 'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
223
+ 'spr-mt-3': submenuLinkIndex !== 0,
215
224
  }"
216
225
  >
217
226
  {{ submenuLink.subMenuHeading }}
@@ -224,11 +233,12 @@
224
233
  <div
225
234
  v-if="!submenuLinkItem.hidden"
226
235
  :class="{
227
- 'body-sm-regular relative m-0 flex cursor-pointer justify-between px-2 py-1.5 align-middle duration-150 ease-in-out': true,
228
- 'background-color-single-active':
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':
229
238
  props.activeNav.submenu === submenuLinkItem.title,
230
- 'hover:background-color-hover': props.activeNav.submenu !== submenuLinkItem.title,
231
- 'active:background-color-pressed': true,
239
+ 'hover:spr-background-color-hover':
240
+ props.activeNav.submenu !== submenuLinkItem.title,
241
+ 'active:spr-background-color-pressed': true,
232
242
  }"
233
243
  @click="
234
244
  handleRedirect(
@@ -241,7 +251,7 @@
241
251
  >
242
252
  <div
243
253
  v-show="props.activeNav.submenu === submenuLinkItem.title"
244
- class="background-color-brand-base absolute left-0 top-0 h-full w-[2px]"
254
+ class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
245
255
  ></div>
246
256
  <span>{{ submenuLinkItem.title }}</span>
247
257
  </div>
@@ -257,10 +267,10 @@
257
267
  <div
258
268
  v-if="!menuLinkItem.hidden"
259
269
  :class="{
260
- 'body-sm-regular relative m-0 flex cursor-pointer justify-between px-2 py-1.5 align-middle duration-150 ease-in-out': true,
261
- 'background-color-single-active': props.activeNav.menu === menuLinkItem.title,
262
- 'hover:background-color-hover': props.activeNav.menu !== menuLinkItem.title,
263
- 'active:background-color-pressed': true,
270
+ '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,
271
+ 'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
272
+ 'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
273
+ 'active:spr-background-color-pressed': true,
264
274
  }"
265
275
  @click="handleRedirect(menuLinkItem, parentLink.title, menuLinkItem.title, '')"
266
276
  >
@@ -283,19 +293,19 @@
283
293
  :triggers="['hover']"
284
294
  >
285
295
  <template #popper>
286
- <span class="label-xs-medium uppercase">{{ parentLink.title }}</span>
296
+ <span class="spr-label-xs-medium spr-uppercase">{{ parentLink.title }}</span>
287
297
  </template>
288
298
  <div
289
299
  :class="{
290
- 'flex cursor-pointer items-center justify-center rounded-border-radius-md p-2 transition duration-150 ease-in-out': true,
291
- 'background-color-single-active border-color-brand-base border-[1.5px] border-solid active:scale-90':
300
+ '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': true,
301
+ 'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
292
302
  props.activeNav.parentNav === parentLink.title,
293
- 'hover:background-color-hover': props.activeNav.parentNav != parentLink.title,
294
- 'active:background-color-single-active active:scale-90': true,
303
+ 'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
304
+ 'active:spr-background-color-single-active active:spr-scale-90': true,
295
305
  }"
296
306
  @click="handleRedirect(parentLink, parentLink.title, '', '')"
297
307
  >
298
- <Icon v-if="parentLink.icon" class="h-[1.25em] w-[1.25em]" :icon="parentLink.icon" />
308
+ <Icon v-if="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" :icon="parentLink.icon" />
299
309
  <Icon v-else icon="ph:globe" />
300
310
  </div>
301
311
  </Tooltip>
@@ -303,7 +313,7 @@
303
313
  </template>
304
314
  <div
305
315
  v-if="props.navLinks.top.length > 0 && navLinkIndex < props.navLinks.top.length - 1"
306
- class="background-color-hover h-[2px] w-full"
316
+ class="spr-background-color-hover spr-h-[2px] spr-w-full"
307
317
  ></div>
308
318
  </template>
309
319
  </div>
@@ -311,7 +321,7 @@
311
321
  <!-- Bottom Section -->
312
322
  <div
313
323
  v-if="props.navLinks.bottom && props.navLinks.bottom.length > 0"
314
- class="grid justify-center gap-2 px-3 pb-4 pt-0"
324
+ class="spr-grid spr-justify-center spr-gap-2 spr-px-3 spr-pb-4 spr-pt-0"
315
325
  >
316
326
  <!-- Grouped Nav Links -->
317
327
  <template v-for="(navLink, navLinkIndex) in props.navLinks.bottom" :key="navLinkIndex">
@@ -327,20 +337,22 @@
327
337
  >
328
338
  <div
329
339
  :class="{
330
- 'flex cursor-pointer items-center justify-center rounded-border-radius-md p-2 transition duration-150 ease-in-out': true,
331
- 'background-color-single-active border-color-brand-base border-[1.5px] border-solid active:scale-90':
340
+ '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': true,
341
+ 'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
332
342
  props.activeNav.parentNav === parentLink.title,
333
- 'hover:background-color-hover': props.activeNav.parentNav != parentLink.title,
334
- 'active:background-color-single-active active:scale-90': true,
343
+ 'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
344
+ 'active:spr-background-color-single-active active:spr-scale-90': true,
335
345
  }"
336
346
  >
337
- <Icon v-if="parentLink.icon" :icon="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
347
+ <Icon v-if="parentLink.icon" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
338
348
  <Icon v-else icon="ph:globe" />
339
349
  </div>
340
350
 
341
351
  <template #popper>
342
- <div class="border-color-weak border-x-0 border-b border-t-0 border-solid p-2">
343
- <h3 class="body-sm-regular-medium m-0">
352
+ <div
353
+ class="spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-2"
354
+ >
355
+ <h3 class="spr-body-sm-regular-medium spr-m-0">
344
356
  {{ parentLink.title }}
345
357
  </h3>
346
358
  </div>
@@ -349,8 +361,8 @@
349
361
  <h5
350
362
  v-if="menuLink.menuHeading"
351
363
  :class="{
352
- 'label-xs-medium text-color-supporting m-0 p-2': true,
353
- 'mt-3': menuLinkIndex !== 0,
364
+ 'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
365
+ 'spr-mt-3': menuLinkIndex !== 0,
354
366
  }"
355
367
  >
356
368
  {{ menuLink.menuHeading }}
@@ -368,20 +380,20 @@
368
380
  >
369
381
  <div
370
382
  :class="{
371
- 'body-sm-regular relative m-0 flex cursor-pointer justify-between px-2 py-1.5 align-middle duration-150 ease-in-out': true,
372
- 'background-color-single-active': props.activeNav.menu === menuLinkItem.title,
373
- 'hover:background-color-hover': props.activeNav.menu !== menuLinkItem.title,
374
- 'active:background-color-pressed': true,
383
+ '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,
384
+ 'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
385
+ 'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
386
+ 'active:spr-background-color-pressed': true,
375
387
  }"
376
388
  >
377
389
  <div
378
390
  v-if="props.activeNav.menu === menuLinkItem.title"
379
- class="background-color-brand-base absolute left-0 top-0 h-full w-[2px]"
391
+ class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
380
392
  ></div>
381
393
  <span>{{ menuLinkItem.title }}</span>
382
394
  <Icon
383
395
  icon="ph:caret-right"
384
- class="h-[16px] w-[16px] transform font-normal transition-transform duration-300"
396
+ class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
385
397
  />
386
398
  </div>
387
399
 
@@ -393,8 +405,8 @@
393
405
  <h5
394
406
  v-if="submenuLink.subMenuHeading"
395
407
  :class="{
396
- 'label-xs-medium text-color-supporting m-0 p-2': true,
397
- 'mt-3': submenuLinkIndex !== 0,
408
+ 'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
409
+ 'spr-mt-3': submenuLinkIndex !== 0,
398
410
  }"
399
411
  >
400
412
  {{ submenuLink.subMenuHeading }}
@@ -407,11 +419,12 @@
407
419
  <div
408
420
  v-if="!submenuLinkItem.hidden"
409
421
  :class="{
410
- 'body-sm-regular relative m-0 flex cursor-pointer justify-between px-2 py-1.5 align-middle duration-150 ease-in-out': true,
411
- 'background-color-single-active':
422
+ '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,
423
+ 'spr-background-color-single-active':
412
424
  props.activeNav.submenu === submenuLinkItem.title,
413
- 'hover:background-color-hover': props.activeNav.submenu !== submenuLinkItem.title,
414
- 'active:background-color-pressed': true,
425
+ 'hover:spr-background-color-hover':
426
+ props.activeNav.submenu !== submenuLinkItem.title,
427
+ 'active:spr-background-color-pressed': true,
415
428
  }"
416
429
  @click="
417
430
  handleRedirect(
@@ -424,7 +437,7 @@
424
437
  >
425
438
  <div
426
439
  v-show="props.activeNav.submenu === submenuLinkItem.title"
427
- class="background-color-brand-base absolute left-0 top-0 h-full w-[2px]"
440
+ class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
428
441
  ></div>
429
442
  <span>{{ submenuLinkItem.title }}</span>
430
443
  </div>
@@ -440,10 +453,10 @@
440
453
  <div
441
454
  v-if="!menuLinkItem.hidden"
442
455
  :class="[
443
- 'body-sm-regular m-0 flex cursor-pointer justify-between px-2 py-1.5 align-middle duration-300 ease-in-out',
444
- 'hover:background-color-hover',
445
- 'active:background-color-pressed',
446
- 'last:rounded-b-xl',
456
+ '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',
457
+ 'hover:spr-background-color-hover',
458
+ 'active:spr-background-color-pressed',
459
+ 'last:spr-rounded-b-xl',
447
460
  ]"
448
461
  @click="handleRedirect(menuLinkItem, parentLink.title, menuLinkItem.title, '')"
449
462
  >
@@ -466,19 +479,19 @@
466
479
  :triggers="['hover']"
467
480
  >
468
481
  <template #popper>
469
- <span class="label-xs-medium uppercase">{{ parentLink.title }}</span>
482
+ <span class="spr-label-xs-medium spr-uppercase">{{ parentLink.title }}</span>
470
483
  </template>
471
484
  <div
472
485
  :class="{
473
- 'flex cursor-pointer items-center justify-center rounded-border-radius-md p-2 transition duration-150 ease-in-out': true,
474
- 'background-color-single-active border-color-brand-base border-[1.5px] border-solid active:scale-90':
486
+ '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': true,
487
+ 'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
475
488
  props.activeNav.parentNav === parentLink.title,
476
- 'hover:background-color-hover': props.activeNav.parentNav != parentLink.title,
477
- 'active:background-color-single-active active:scale-90': true,
489
+ 'hover:spr-background-color-hover': props.activeNav.parentNav != parentLink.title,
490
+ 'active:spr-background-color-single-active active:spr-scale-90': true,
478
491
  }"
479
492
  @click="handleRedirect(parentLink, parentLink.title, '', '')"
480
493
  >
481
- <Icon v-if="parentLink.icon" :icon="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
494
+ <Icon v-if="parentLink.icon" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
482
495
  <Icon v-else icon="ph:globe" />
483
496
  </div>
484
497
  </Tooltip>
@@ -486,26 +499,26 @@
486
499
  </template>
487
500
  <div
488
501
  v-if="props.navLinks.bottom.length > 0 && navLinkIndex < props.navLinks.bottom.length - 1"
489
- class="background-color-hover h-[2px] w-full"
502
+ class="spr-background-color-hover spr-h-[2px] spr-w-full"
490
503
  ></div>
491
504
  </template>
492
505
  </div>
493
506
  </div>
494
507
 
495
- <div v-if="props.notificationCount || props.requestCount" class="grid gap-2 py-6">
508
+ <div v-if="props.notificationCount || props.requestCount" class="spr-grid spr-gap-2 spr-py-6">
496
509
  <!-- Notification -->
497
510
  <div
498
511
  v-if="props.notificationCount"
499
512
  :class="[
500
- 'relative flex cursor-pointer items-center justify-center p-2',
501
- 'transition duration-150 ease-in-out',
502
- 'active:scale-90',
513
+ 'spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center p-2',
514
+ 'spr-transition spr-duration-150 spr-ease-in-out',
515
+ 'active:spr-scale-90',
503
516
  ]"
504
517
  @click="emit('notifications', 'notifications-triggered')"
505
518
  >
506
- <Icon icon="ph:bell" class="h-[1.25em] w-[1.25em]" />
519
+ <Icon icon="ph:bell" class="spr-h-[1.25em] spr-w-[1.25em]" />
507
520
  <spr-badge
508
- class="absolute -top-0.5 right-2.5"
521
+ class="spr-absolute -spr-top-0.5 spr-right-2.5"
509
522
  :text="String(props.notificationCount)"
510
523
  variant="danger"
511
524
  size="small"
@@ -516,15 +529,15 @@
516
529
  <div
517
530
  v-if="props.requestCount"
518
531
  :class="[
519
- 'relative flex cursor-pointer items-center justify-center p-2',
520
- 'transition duration-150 ease-in-out',
521
- 'active:scale-90',
532
+ 'spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-p-2',
533
+ 'spr-transition spr-duration-150 spr-ease-in-out',
534
+ 'active:spr-scale-90',
522
535
  ]"
523
536
  @click="emit('requests', 'requests-triggered')"
524
537
  >
525
- <Icon icon="ph:check-square" class="h-[1.25em] w-[1.25em]" />
538
+ <Icon icon="ph:check-square" class="spr-h-[1.25em] spr-w-[1.25em]" />
526
539
  <spr-badge
527
- class="absolute -top-0.5 right-2.5"
540
+ class="spr-absolute -spr-top-0.5 spr-right-2.5"
528
541
  :text="String(props.requestCount)"
529
542
  variant="danger"
530
543
  size="small"
@@ -536,8 +549,8 @@
536
549
  <div
537
550
  v-if="props.userMenu"
538
551
  :class="[
539
- 'border-color-weak absolute bottom-0 w-full p-3.5',
540
- 'border-b-0 border-l-0 border-r-0 border-t border-solid',
552
+ 'spr-border-color-weak spr-absolute spr-bottom-0 spr-w-full spr-p-3.5',
553
+ 'spr-border-b-0 spr-border-l-0 spr-border-r-0 spr-border-t spr-border-solid',
541
554
  ]"
542
555
  >
543
556
  <Menu
@@ -550,12 +563,12 @@
550
563
  >
551
564
  <div
552
565
  :class="[
553
- 'background-color flex h-[36px] w-[36px] cursor-pointer items-center justify-center rounded-full',
554
- 'border-color-weak border border-solid',
555
- 'transition duration-150 ease-in-out',
556
- 'hover:background-color-hover',
557
- 'active:background-color-pressed active:scale-90',
558
- '[&>img]:h-[36px] [&>img]:w-[36px] [&>img]:rounded-full [&>img]:object-cover',
566
+ 'spr-background-color spr-flex spr-h-[36px] spr-w-[36px] spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-full',
567
+ 'spr-border-color-weak spr-border spr-border-solid',
568
+ 'spr-transition spr-duration-150 spr-ease-in-out',
569
+ 'hover:spr-background-color-hover',
570
+ 'active:spr-background-color-pressed active:spr-scale-90',
571
+ '[&>img]:spr-h-[36px] [&>img]:spr-w-[36px] [&>img]:spr-rounded-full [&>img]:spr-object-cover',
559
572
  ]"
560
573
  @click="isUserMenuVisible = !isUserMenuVisible"
561
574
  >
@@ -569,14 +582,17 @@
569
582
 
570
583
  <template #popper>
571
584
  <div
572
- :class="['px-4 py-3', 'border-color-weak flex justify-between border-x-0 border-b border-t-0 border-solid']"
585
+ :class="[
586
+ 'spr-px-4 spr-py-3',
587
+ 'spr-border-color-weak spr-flex spr-justify-between spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
588
+ ]"
573
589
  >
574
- <div class="flex items-center gap-2">
590
+ <div class="spr-flex spr-items-center spr-gap-2">
575
591
  <div
576
592
  :class="[
577
- 'background-color flex h-[36px] w-[36px] items-center justify-center rounded-full',
578
- 'border-color-weak border border-solid',
579
- '[&>img]:h-[36px] [&>img]:w-[36px] [&>img]:rounded-full [&>img]:object-cover',
593
+ 'spr-background-color spr-flex spr-h-[36px] spr-w-[36px] spr-items-center spr-justify-center spr-rounded-full',
594
+ 'spr-border-color-weak spr-border spr-border-solid',
595
+ '[&>img]:spr-h-[36px] [&>img]:spr-w-[36px] [&>img]:spr-rounded-full [&>img]:spr-object-cover',
580
596
  ]"
581
597
  >
582
598
  <template v-if="props.userMenu.profileImage && !userProfileError">
@@ -586,30 +602,34 @@
586
602
  <span>{{ getUserInitials(props.userMenu.name) }}</span>
587
603
  </template>
588
604
  </div>
589
- <div class="grid justify-between gap-1">
590
- <h3 class="body-sm-regular-medium m-0 truncate">
605
+ <div class="spr-grid spr-justify-between spr-gap-1">
606
+ <h3 class="spr-body-sm-regular-medium spr-m-0 spr-truncate">
591
607
  {{ props.userMenu.name }}
592
608
  </h3>
593
- <p class="body-xs-regular m-0 truncate">
609
+ <p class="spr-body-xs-regular spr-m-0 spr-truncate">
594
610
  {{ props.userMenu.email }}
595
611
  </p>
596
612
  </div>
597
613
  </div>
598
614
  </div>
599
615
 
600
- <div class="max-h-[268px] overflow-auto">
616
+ <div class="spr-max-h-[268px] spr-overflow-auto">
601
617
  <template v-for="(userMenuItem, userMenuItemIndex) in props.userMenu.items" :key="userMenuItemIndex">
602
618
  <div
603
619
  v-if="!userMenuItem.hidden"
604
620
  :class="[
605
- 'flex cursor-pointer gap-2 p-2 align-middle duration-150 ease-in-out',
606
- 'hover:background-color-hover',
607
- 'active:background-color-pressed',
621
+ 'spr-flex spr-cursor-pointer spr-gap-2 spr-p-2 spr-align-middle spr-duration-150 spr-ease-in-out',
622
+ 'hover:spr-background-color-hover',
623
+ 'active:spr-background-color-pressed',
608
624
  ]"
609
625
  @click="handleRedirect(userMenuItem, '', '', '')"
610
626
  >
611
- <Icon v-if="userMenuItem.icon" :icon="userMenuItem.icon" class="h-[1em] w-[1em] text-[20px]" />
612
- <h5 class="body-sm-regular text-color-strong m-0 truncate">
627
+ <Icon
628
+ v-if="userMenuItem.icon"
629
+ :icon="userMenuItem.icon"
630
+ class="spr-h-[1em] spr-w-[1em] spr-text-[20px]"
631
+ />
632
+ <h5 class="spr-body-sm-regular spr-text-color-strong spr-m-0 spr-truncate">
613
633
  {{ userMenuItem.title }}
614
634
  </h5>
615
635
  </div>