design-system-next 2.11.15 → 2.11.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/design-system-next.es.js +2248 -2213
- package/dist/design-system-next.es.js.gz +0 -0
- package/dist/design-system-next.umd.js +12 -12
- package/dist/design-system-next.umd.js.gz +0 -0
- package/dist/main.css +1 -1
- package/dist/main.css.gz +0 -0
- package/dist/package.json.d.ts +1 -1
- package/package.json +1 -1
- package/src/assets/styles/tailwind.css +6 -18
- package/src/components/date-picker/date-range-picker/date-range-picker.vue +1 -0
- package/src/components/dropdown/dropdown.ts +4 -0
- package/src/components/dropdown/dropdown.vue +2 -0
- package/src/components/list/list.ts +4 -0
- package/src/components/list/list.vue +56 -37
- package/src/components/list/use-list.ts +1 -0
- package/src/components/sidenav/sidenav.ts +17 -18
- package/src/components/sidenav/sidenav.vue +211 -126
- package/src/components/sidenav/use-sidenav.ts +85 -76
- package/src/components/tooltip/tooltip.ts +6 -8
- package/src/components/tooltip/tooltip.vue +4 -1
|
@@ -25,24 +25,33 @@
|
|
|
25
25
|
@click="handleSelectedItem(item)"
|
|
26
26
|
>
|
|
27
27
|
<spr-checkbox v-if="props.multiSelect" :checked="isItemSelected(item)" />
|
|
28
|
-
<div class="spr-flex spr-flex-
|
|
29
|
-
<span class="
|
|
30
|
-
|
|
31
|
-
</span>
|
|
32
|
-
<span v-if="item.subtext" class="spr-body-xs-regular spr-text-color-base spr-text-left">
|
|
33
|
-
{{ item.subtext }}
|
|
28
|
+
<div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
|
|
29
|
+
<span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']">
|
|
30
|
+
<icon :icon="item.icon" width="20px" height="20px" />
|
|
34
31
|
</span>
|
|
32
|
+
<div class="spr-flex spr-flex-auto spr-flex-col spr-justify-start">
|
|
33
|
+
<span class="spr-text-left spr-text-xs">
|
|
34
|
+
{{ item.text }}
|
|
35
|
+
</span>
|
|
36
|
+
<span v-if="item.subtext" class="spr-body-xs-regular spr-text-color-base spr-text-left">
|
|
37
|
+
{{ item.subtext }}
|
|
38
|
+
</span>
|
|
39
|
+
</div>
|
|
35
40
|
</div>
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
<template v-if="!props.multiSelect && !props.dropdown">
|
|
42
|
+
<Icon
|
|
43
|
+
v-if="isItemSelected(item) && !props.noCheck"
|
|
44
|
+
class="spr-text-color-brand-base spr-w-[1.39em]"
|
|
45
|
+
icon="ph:check"
|
|
46
|
+
/>
|
|
47
|
+
</template>
|
|
48
|
+
<template v-if="props.ladderized">
|
|
49
|
+
<Icon
|
|
50
|
+
v-if="item.sublevel && item.sublevel?.length > 0"
|
|
51
|
+
class="spr-text-color-weak spr-size-4"
|
|
52
|
+
icon="ph:caret-right"
|
|
53
|
+
/>
|
|
54
|
+
</template>
|
|
46
55
|
</div>
|
|
47
56
|
</div>
|
|
48
57
|
</div>
|
|
@@ -64,32 +73,42 @@
|
|
|
64
73
|
@click="handleSelectedItem(item)"
|
|
65
74
|
>
|
|
66
75
|
<spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
|
|
67
|
-
<div
|
|
68
|
-
:class="[
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
>
|
|
73
|
-
<span class="spr-text-left spr-text-xs">{{ item.text }}</span>
|
|
74
|
-
<span
|
|
75
|
-
v-if="item.subtext"
|
|
76
|
+
<div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
|
|
77
|
+
<span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']"
|
|
78
|
+
><icon :icon="item.icon" width="20px" height="20px"
|
|
79
|
+
/></span>
|
|
80
|
+
<div
|
|
76
81
|
:class="[
|
|
77
|
-
'spr-
|
|
82
|
+
'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
|
|
78
83
|
{ 'spr-text-color-disabled': item.disabled },
|
|
79
84
|
]"
|
|
80
|
-
>{{ item.subtext }}</span
|
|
81
85
|
>
|
|
86
|
+
<span class="spr-text-left spr-text-xs">{{ item.text }}</span>
|
|
87
|
+
<span
|
|
88
|
+
v-if="item.subtext"
|
|
89
|
+
:class="[
|
|
90
|
+
'spr-body-xs-regular spr-text-color-base spr-text-left',
|
|
91
|
+
{ 'spr-text-color-disabled': item.disabled },
|
|
92
|
+
]"
|
|
93
|
+
>
|
|
94
|
+
{{ item.subtext }}
|
|
95
|
+
</span>
|
|
96
|
+
</div>
|
|
82
97
|
</div>
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
98
|
+
<template v-if="!props.multiSelect && !props.dropdown">
|
|
99
|
+
<Icon
|
|
100
|
+
v-if="isItemSelected(item) && !props.noCheck"
|
|
101
|
+
class="spr-text-color-brand-base spr-w-[1.39em]"
|
|
102
|
+
icon="ph:check"
|
|
103
|
+
/>
|
|
104
|
+
</template>
|
|
105
|
+
<template v-if="props.ladderized">
|
|
106
|
+
<Icon
|
|
107
|
+
v-if="item.sublevel && item.sublevel?.length > 0"
|
|
108
|
+
class="spr-text-color-weak spr-size-4"
|
|
109
|
+
icon="ph:caret-right"
|
|
110
|
+
/>
|
|
111
|
+
</template>
|
|
93
112
|
</div>
|
|
94
113
|
</template>
|
|
95
114
|
<template v-else>
|
|
@@ -345,6 +345,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
|
|
|
345
345
|
'spr-background-color-single-active': isItemSelected(item) && !item.disabled && !noCheck.value,
|
|
346
346
|
'hover:spr-cursor-not-allowed spr-flex spr-cursor-pointer spr-items-center spr-gap-1.5 spr-rounded-lg spr-p-2':
|
|
347
347
|
item.disabled,
|
|
348
|
+
'spr-justify-between': !props.multiSelect,
|
|
348
349
|
});
|
|
349
350
|
|
|
350
351
|
const handleSearch = () => {
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import type { PropType, ExtractPropTypes } from 'vue';
|
|
2
2
|
|
|
3
|
-
type QuickAction = {
|
|
3
|
+
export type QuickAction = {
|
|
4
4
|
menuHeading: string;
|
|
5
5
|
items: QuickActionItem[];
|
|
6
6
|
};
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
type QuickActionItem = {
|
|
8
|
+
export type QuickActionItem = {
|
|
10
9
|
title: string;
|
|
11
10
|
description: string;
|
|
12
11
|
icon: string;
|
|
@@ -35,43 +34,43 @@ export type ParentLinkItem = {
|
|
|
35
34
|
hidden?: boolean;
|
|
36
35
|
};
|
|
37
36
|
|
|
38
|
-
type MenuLink = {
|
|
37
|
+
export type MenuLink = {
|
|
39
38
|
menuHeading: string;
|
|
40
39
|
items: MenuLinkItem[] | ParentLinkItem[];
|
|
41
40
|
};
|
|
42
41
|
|
|
43
|
-
type MenuLinkItem = {
|
|
42
|
+
export type MenuLinkItem = {
|
|
44
43
|
title: string;
|
|
45
44
|
hidden: boolean;
|
|
46
45
|
redirect: Redirect;
|
|
47
46
|
submenuLinks: SubmenuLink[];
|
|
48
47
|
};
|
|
49
48
|
|
|
50
|
-
type SubmenuLink = {
|
|
49
|
+
export type SubmenuLink = {
|
|
51
50
|
subMenuHeading: string;
|
|
52
51
|
items: SubmenuLinkItem[] | ParentLinkItem[];
|
|
53
52
|
};
|
|
54
53
|
|
|
55
|
-
type SubmenuLinkItem = {
|
|
54
|
+
export type SubmenuLinkItem = {
|
|
56
55
|
title: string;
|
|
57
56
|
hidden: boolean;
|
|
58
57
|
redirect: Redirect;
|
|
59
58
|
};
|
|
60
59
|
|
|
61
|
-
type Redirect = {
|
|
60
|
+
export type Redirect = {
|
|
62
61
|
openInNewTab: boolean;
|
|
63
62
|
isAbsoluteURL: boolean;
|
|
64
63
|
link: string;
|
|
65
64
|
};
|
|
66
65
|
|
|
67
|
-
type UserMenu = {
|
|
66
|
+
export type UserMenu = {
|
|
68
67
|
name: string;
|
|
69
68
|
email: string;
|
|
70
69
|
profileImage: string;
|
|
71
70
|
items: UserMenuItem[];
|
|
72
71
|
};
|
|
73
72
|
|
|
74
|
-
type UserMenuItem = {
|
|
73
|
+
export type UserMenuItem = {
|
|
75
74
|
title: string;
|
|
76
75
|
icon: string;
|
|
77
76
|
hidden: boolean;
|
|
@@ -92,17 +91,17 @@ export interface MappedNavItem {
|
|
|
92
91
|
title: string;
|
|
93
92
|
icon?: string;
|
|
94
93
|
redirect?: {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
94
|
+
openInNewTab: boolean;
|
|
95
|
+
isAbsoluteURL: boolean;
|
|
96
|
+
link: string;
|
|
98
97
|
};
|
|
99
98
|
menuLinks?: {
|
|
100
|
-
|
|
101
|
-
|
|
99
|
+
menuHeading: string;
|
|
100
|
+
items: MappedNavItem[];
|
|
102
101
|
}[];
|
|
103
102
|
submenuLinks?: {
|
|
104
|
-
|
|
105
|
-
|
|
103
|
+
subMenuHeading: string;
|
|
104
|
+
items: MappedNavItem[];
|
|
106
105
|
}[];
|
|
107
106
|
}
|
|
108
107
|
|
|
@@ -159,7 +158,7 @@ export const sidenavPropTypes = {
|
|
|
159
158
|
type: Boolean,
|
|
160
159
|
validator: (value: unknown) => typeof value === 'boolean',
|
|
161
160
|
default: false,
|
|
162
|
-
}
|
|
161
|
+
},
|
|
163
162
|
};
|
|
164
163
|
|
|
165
164
|
export const sidenavEmitTypes = {
|