@vmz/ui 0.2.2 → 0.2.3
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/package.json +1 -1
- package/src/components/ConsoleShell.vmz +118 -26
package/package.json
CHANGED
|
@@ -3,14 +3,30 @@
|
|
|
3
3
|
<aside class="vmz-ui-console-shell__sidebar" data-vmz-shell="sidebar" :aria-label="navLabel">
|
|
4
4
|
<a class="vmz-ui-console-shell__brand" :href="homeHref">{{ brand }}</a>
|
|
5
5
|
<nav class="vmz-ui-console-shell__nav">
|
|
6
|
-
<a
|
|
6
|
+
<a
|
|
7
|
+
v-for="item in nav"
|
|
8
|
+
:key="item.id"
|
|
9
|
+
:href="item.href"
|
|
10
|
+
:data-vmz-nav="item.id"
|
|
11
|
+
:data-active="item.id === activeNavId ? 'true' : null"
|
|
12
|
+
:aria-current="item.id === activeNavId ? 'page' : null"
|
|
13
|
+
>
|
|
7
14
|
{{ item.title }}
|
|
8
15
|
</a>
|
|
9
16
|
</nav>
|
|
10
17
|
</aside>
|
|
11
18
|
<div class="vmz-ui-console-shell__body">
|
|
12
19
|
<header class="vmz-ui-console-shell__header" data-vmz-shell="header">
|
|
13
|
-
<
|
|
20
|
+
<div class="vmz-ui-console-shell__header-copy">
|
|
21
|
+
<p v-if="breadcrumbLabel" class="vmz-ui-console-shell__breadcrumb" data-vmz-shell="breadcrumb">{{ breadcrumbLabel }}</p>
|
|
22
|
+
<h1 class="vmz-ui-console-shell__title">{{ title }}</h1>
|
|
23
|
+
<p v-if="subtitle" class="vmz-ui-console-shell__subtitle">{{ subtitle }}</p>
|
|
24
|
+
</div>
|
|
25
|
+
<a
|
|
26
|
+
v-if="primaryActionLabel && primaryActionHref"
|
|
27
|
+
class="vmz-ui-console-shell__action"
|
|
28
|
+
:href="primaryActionHref"
|
|
29
|
+
>{{ primaryActionLabel }}</a>
|
|
14
30
|
</header>
|
|
15
31
|
<main class="vmz-ui-console-shell__main" data-vmz-shell="main">
|
|
16
32
|
<slot />
|
|
@@ -25,32 +41,33 @@
|
|
|
25
41
|
<style>
|
|
26
42
|
.vmz-ui-console-shell {
|
|
27
43
|
display: grid;
|
|
28
|
-
grid-template-columns:
|
|
44
|
+
grid-template-columns: 13rem minmax(0, 1fr);
|
|
29
45
|
grid-template-rows: minmax(100%, 100%);
|
|
30
46
|
min-height: 100vh;
|
|
31
47
|
min-height: 100dvh;
|
|
32
48
|
height: 100dvh;
|
|
33
49
|
color: inherit;
|
|
34
|
-
background: var(--vmz-surface-page, #
|
|
50
|
+
background: var(--vmz-surface-page, #f5f6f8);
|
|
35
51
|
}
|
|
36
52
|
|
|
37
53
|
.vmz-ui-console-shell__sidebar {
|
|
38
54
|
display: flex;
|
|
39
55
|
flex-direction: column;
|
|
40
56
|
gap: 1rem;
|
|
41
|
-
padding:
|
|
42
|
-
border-right: 1px solid var(--vmz-line-subtle,
|
|
57
|
+
padding: 1rem 0.75rem 1.5rem;
|
|
58
|
+
border-right: 1px solid var(--vmz-line-subtle, #e5e6eb);
|
|
43
59
|
min-height: 100%;
|
|
44
60
|
align-self: stretch;
|
|
61
|
+
background: #fff;
|
|
45
62
|
}
|
|
46
63
|
|
|
47
64
|
.vmz-ui-console-shell__brand {
|
|
48
65
|
font: inherit;
|
|
49
|
-
font-weight:
|
|
50
|
-
font-size:
|
|
51
|
-
letter-spacing: 0
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
font-size: 1rem;
|
|
68
|
+
letter-spacing: 0;
|
|
52
69
|
text-decoration: none;
|
|
53
|
-
color:
|
|
70
|
+
color: #1f2329;
|
|
54
71
|
}
|
|
55
72
|
|
|
56
73
|
.vmz-ui-console-shell__brand:focus-visible {
|
|
@@ -61,16 +78,25 @@
|
|
|
61
78
|
.vmz-ui-console-shell__nav {
|
|
62
79
|
display: flex;
|
|
63
80
|
flex-direction: column;
|
|
64
|
-
gap: 0.
|
|
81
|
+
gap: 0.25rem;
|
|
65
82
|
flex: 1;
|
|
66
83
|
}
|
|
67
84
|
|
|
68
85
|
.vmz-ui-console-shell__nav a {
|
|
69
86
|
font: inherit;
|
|
70
|
-
font-weight:
|
|
87
|
+
font-weight: 400;
|
|
88
|
+
font-size: 0.875rem;
|
|
89
|
+
line-height: 1.375rem;
|
|
71
90
|
text-decoration: none;
|
|
72
|
-
color:
|
|
91
|
+
color: #51565d;
|
|
73
92
|
padding: 0.45rem 0.55rem;
|
|
93
|
+
border-radius: 6px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.vmz-ui-console-shell__nav a[data-active='true'] {
|
|
97
|
+
color: #0958d9;
|
|
98
|
+
font-weight: 500;
|
|
99
|
+
background: #e6f4ff;
|
|
74
100
|
}
|
|
75
101
|
|
|
76
102
|
.vmz-ui-console-shell__nav a:focus-visible {
|
|
@@ -91,33 +117,84 @@
|
|
|
91
117
|
position: sticky;
|
|
92
118
|
top: 0;
|
|
93
119
|
z-index: 20;
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
120
|
+
display: flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: space-between;
|
|
123
|
+
gap: 1rem;
|
|
124
|
+
min-height: 3.5rem;
|
|
125
|
+
padding: 0.75rem 1.5rem;
|
|
126
|
+
border-bottom: 1px solid var(--vmz-line-subtle, #e5e6eb);
|
|
127
|
+
background: #fff;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.vmz-ui-console-shell__header-copy {
|
|
131
|
+
display: grid;
|
|
132
|
+
gap: 0.15rem;
|
|
133
|
+
min-width: 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.vmz-ui-console-shell__breadcrumb {
|
|
137
|
+
margin: 0;
|
|
138
|
+
color: #646a73;
|
|
139
|
+
font-size: 0.8125rem;
|
|
140
|
+
line-height: 1.25rem;
|
|
97
141
|
}
|
|
98
142
|
|
|
99
143
|
.vmz-ui-console-shell__title {
|
|
100
144
|
margin: 0;
|
|
101
|
-
font-size: 1.
|
|
102
|
-
|
|
103
|
-
|
|
145
|
+
font-size: 1.5rem;
|
|
146
|
+
line-height: 2rem;
|
|
147
|
+
font-weight: 600;
|
|
148
|
+
color: #1f2329;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.vmz-ui-console-shell__subtitle {
|
|
152
|
+
margin: 0;
|
|
153
|
+
color: #51565d;
|
|
154
|
+
font-size: 0.875rem;
|
|
155
|
+
line-height: 1.375rem;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.vmz-ui-console-shell__action {
|
|
159
|
+
display: inline-flex;
|
|
160
|
+
align-items: center;
|
|
161
|
+
justify-content: center;
|
|
162
|
+
min-height: 2rem;
|
|
163
|
+
padding: 0.25rem 0.75rem;
|
|
164
|
+
border-radius: 6px;
|
|
165
|
+
background: #1677ff;
|
|
166
|
+
color: #fff;
|
|
167
|
+
font-size: 0.875rem;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
text-decoration: none;
|
|
170
|
+
white-space: nowrap;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.vmz-ui-console-shell__action:hover {
|
|
174
|
+
color: #fff;
|
|
175
|
+
background: #0958d9;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.vmz-ui-console-shell__action:focus-visible {
|
|
179
|
+
outline: none;
|
|
180
|
+
box-shadow: 0 0 0 2px var(--vmz-focus-ring);
|
|
104
181
|
}
|
|
105
182
|
|
|
106
183
|
.vmz-ui-console-shell__main {
|
|
107
184
|
flex: 1 1 auto;
|
|
108
|
-
padding: 1.
|
|
185
|
+
padding: 1.5rem;
|
|
109
186
|
display: flex;
|
|
110
187
|
flex-direction: column;
|
|
111
|
-
gap:
|
|
188
|
+
gap: 1rem;
|
|
112
189
|
}
|
|
113
190
|
|
|
114
191
|
.vmz-ui-console-shell__footer {
|
|
115
192
|
margin-top: auto;
|
|
116
|
-
padding: 0.85rem 1.
|
|
117
|
-
border-top: 1px solid var(--vmz-line-subtle,
|
|
118
|
-
color: var(--vmz-text-steel, #
|
|
193
|
+
padding: 0.85rem 1.5rem 1.1rem;
|
|
194
|
+
border-top: 1px solid var(--vmz-line-subtle, #e5e6eb);
|
|
195
|
+
color: var(--vmz-text-steel, #646a73);
|
|
119
196
|
font-size: 0.82rem;
|
|
120
|
-
background:
|
|
197
|
+
background: #fff;
|
|
121
198
|
}
|
|
122
199
|
|
|
123
200
|
@media (max-width: 40rem) {
|
|
@@ -130,7 +207,7 @@
|
|
|
130
207
|
|
|
131
208
|
.vmz-ui-console-shell__sidebar {
|
|
132
209
|
border-right: 0;
|
|
133
|
-
border-bottom: 1px solid var(--vmz-line-subtle,
|
|
210
|
+
border-bottom: 1px solid var(--vmz-line-subtle, #e5e6eb);
|
|
134
211
|
}
|
|
135
212
|
|
|
136
213
|
.vmz-ui-console-shell__nav {
|
|
@@ -138,6 +215,16 @@
|
|
|
138
215
|
flex-wrap: wrap;
|
|
139
216
|
flex: 0;
|
|
140
217
|
}
|
|
218
|
+
|
|
219
|
+
.vmz-ui-console-shell__header {
|
|
220
|
+
flex-direction: column;
|
|
221
|
+
align-items: flex-start;
|
|
222
|
+
padding-inline: 1rem;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.vmz-ui-console-shell__main {
|
|
226
|
+
padding: 1rem;
|
|
227
|
+
}
|
|
141
228
|
}
|
|
142
229
|
</style>
|
|
143
230
|
|
|
@@ -150,6 +237,11 @@ export default class ConsoleShell {
|
|
|
150
237
|
public brand: string = "VMZ";
|
|
151
238
|
public homeHref: string = "/";
|
|
152
239
|
public title: string = "Console";
|
|
240
|
+
public subtitle: string = "";
|
|
241
|
+
public breadcrumbLabel: string = "";
|
|
242
|
+
public primaryActionLabel: string = "";
|
|
243
|
+
public primaryActionHref: string = "";
|
|
244
|
+
public activeNavId: string = "";
|
|
153
245
|
public navLabel: string = "Console";
|
|
154
246
|
public footer: string = "";
|
|
155
247
|
/** @type {{ id: string, title: string, href: string }[]} */
|