@vmz/ui 0.3.8 → 0.3.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.
Files changed (2) hide show
  1. package/package.json +2 -2
  2. package/src/components/ConsoleShell.vmz +52 -26
package/package.json CHANGED
@@ -85,7 +85,7 @@
85
85
  "license": "MIT",
86
86
  "name": "@vmz/ui",
87
87
  "peerDependencies": {
88
- "@vmz/ui-icons": "0.3.8"
88
+ "@vmz/ui-icons": "0.3.9"
89
89
  },
90
90
  "peerDependenciesMeta": {
91
91
  "@vmz/ui-icons": {
@@ -101,5 +101,5 @@
101
101
  "url": "git+https://github.com/doki-land/vmz-framework.git"
102
102
  },
103
103
  "type": "module",
104
- "version": "0.3.8"
104
+ "version": "0.3.9"
105
105
  }
package/src/components/ConsoleShell.vmz CHANGED
@@ -100,9 +100,9 @@
100
100
  .vmz-ui-console-shell__brand {
101
101
  padding: var(--vmz-space-1, 0.25rem) var(--vmz-space-3, 0.75rem);
102
102
  color: var(--vmz-text-ink);
103
- font-size: 1rem;
104
- font-weight: 600;
105
- line-height: 1.5rem;
103
+ font-size: var(--vmz-type-body);
104
+ font-weight: var(--vmz-type-weight-semibold);
105
+ line-height: var(--vmz-type-line-height-body);
106
106
  letter-spacing: 0;
107
107
  text-decoration: none;
108
108
  outline: none;
@@ -127,13 +127,13 @@
127
127
  .vmz-ui-console-shell__nav a {
128
128
  display: flex;
129
129
  align-items: center;
130
- min-height: 2.25rem;
130
+ min-height: calc(var(--vmz-control-height) * 1.125);
131
131
  padding: 0 var(--vmz-space-3, 0.75rem);
132
132
  border-radius: var(--vmz-radius-md, 6px);
133
133
  color: var(--vmz-text-steel);
134
- font-size: 0.875rem;
135
- font-weight: 500;
136
- line-height: 1.25rem;
134
+ font-size: var(--vmz-type-code);
135
+ font-weight: var(--vmz-type-weight-medium);
136
+ line-height: var(--vmz-type-line-height-caption);
137
137
  text-decoration: none;
138
138
  outline: none;
139
139
  transition:
@@ -149,7 +149,7 @@
149
149
  .vmz-ui-console-shell__nav a[data-active="true"] {
150
150
  color: var(--vmz-action-primary-background);
151
151
  background: var(--vmz-action-primary-soft);
152
- font-weight: 600;
152
+ font-weight: var(--vmz-type-weight-semibold);
153
153
  box-shadow: inset 2px 0 0 var(--vmz-action-primary-background);
154
154
  }
155
155
 
@@ -204,30 +204,30 @@
204
204
 
205
205
  .vmz-ui-console-shell__header-copy {
206
206
  display: grid;
207
- gap: 0.125rem;
207
+ gap: var(--vmz-space-1, 0.25rem);
208
208
  min-width: 0;
209
209
  }
210
210
 
211
211
  .vmz-ui-console-shell__breadcrumb {
212
212
  margin: 0;
213
213
  color: var(--vmz-text-tertiary);
214
- font-size: 0.75rem;
215
- line-height: 1.125rem;
214
+ font-size: var(--vmz-type-caption);
215
+ line-height: var(--vmz-type-line-height-caption);
216
216
  }
217
217
 
218
218
  .vmz-ui-console-shell__title {
219
219
  margin: 0;
220
220
  color: var(--vmz-text-ink);
221
- font-size: 1.25rem;
222
- line-height: 1.75rem;
223
- font-weight: 600;
221
+ font-size: var(--vmz-type-subtitle);
222
+ line-height: var(--vmz-type-line-height-title);
223
+ font-weight: var(--vmz-type-weight-semibold);
224
224
  }
225
225
 
226
226
  .vmz-ui-console-shell__subtitle {
227
227
  margin: 0;
228
228
  color: var(--vmz-text-steel);
229
- font-size: 0.8125rem;
230
- line-height: 1.25rem;
229
+ font-size: var(--vmz-type-caption);
230
+ line-height: var(--vmz-type-line-height-caption);
231
231
  }
232
232
 
233
233
  .vmz-ui-console-shell__action {
@@ -235,13 +235,13 @@
235
235
  align-items: center;
236
236
  justify-content: center;
237
237
  flex: none;
238
- min-height: 2rem;
238
+ min-height: var(--vmz-control-height);
239
239
  padding: 0 var(--vmz-space-3, 0.75rem);
240
240
  border-radius: var(--vmz-radius-md, 6px);
241
241
  background: var(--vmz-action-primary-background);
242
242
  color: var(--vmz-action-primary-foreground);
243
- font-size: 0.875rem;
244
- font-weight: 500;
243
+ font-size: var(--vmz-type-code);
244
+ font-weight: var(--vmz-type-weight-medium);
245
245
  text-decoration: none;
246
246
  white-space: nowrap;
247
247
  outline: none;
@@ -278,7 +278,7 @@
278
278
  padding: var(--vmz-space-4, 1rem) var(--vmz-space-5, 1.5rem);
279
279
  border-top: 1px solid var(--vmz-line-subtle);
280
280
  color: var(--vmz-text-tertiary);
281
- font-size: 0.8125rem;
281
+ font-size: var(--vmz-type-caption);
282
282
  background: var(--vmz-surface-paper);
283
283
  }
284
284
 
@@ -291,6 +291,7 @@
291
291
  }
292
292
 
293
293
  .vmz-ui-console-shell__sidebar {
294
+ position: relative;
294
295
  border-right: 0;
295
296
  border-bottom: 1px solid var(--vmz-line-subtle);
296
297
  gap: var(--vmz-space-2, 0.5rem);
@@ -299,8 +300,8 @@
299
300
 
300
301
  .vmz-ui-console-shell__menu {
301
302
  display: inline-flex;
302
- width: calc(var(--vmz-control-height, 2rem) * 1.5);
303
- min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
303
+ width: calc(var(--vmz-control-height) * 1.5);
304
+ min-height: calc(var(--vmz-control-height) * 1.5);
304
305
  }
305
306
 
306
307
  .vmz-ui-console-shell__nav {
@@ -310,12 +311,23 @@
310
311
  flex: none;
311
312
  }
312
313
 
314
+ /* The menu overlays the page instead of inserting a new row, so opening
315
+ it never moves the current task down. */
313
316
  .vmz-ui-console-shell__nav[data-open="true"] {
314
317
  display: flex;
318
+ position: absolute;
319
+ top: 100%;
320
+ right: 0;
321
+ left: 0;
322
+ z-index: 30;
323
+ padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-4, 1rem);
324
+ border-bottom: 1px solid var(--vmz-line-subtle);
325
+ background: var(--vmz-surface-paper);
326
+ box-shadow: var(--vmz-shadow-popup);
315
327
  }
316
328
 
317
329
  .vmz-ui-console-shell__nav a {
318
- min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
330
+ min-height: calc(var(--vmz-control-height) * 1.5);
319
331
  white-space: normal;
320
332
  }
321
333
 
@@ -324,14 +336,14 @@
324
336
  grid-template-columns: auto minmax(0, 1fr) auto;
325
337
  align-items: center;
326
338
  gap: var(--vmz-space-2, 0.5rem);
327
- min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
339
+ min-height: calc(var(--vmz-control-height) * 1.5);
328
340
  padding: var(--vmz-space-3, 0.75rem) var(--vmz-space-4, 1rem);
329
341
  }
330
342
 
331
343
  .vmz-ui-console-shell__back {
332
344
  display: inline-flex;
333
345
  grid-column: 1;
334
- min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
346
+ min-height: calc(var(--vmz-control-height) * 1.5);
335
347
  }
336
348
 
337
349
  .vmz-ui-console-shell__header-copy {
@@ -355,7 +367,7 @@
355
367
  .vmz-ui-console-shell__action {
356
368
  grid-column: 3;
357
369
  justify-self: end;
358
- min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
370
+ min-height: calc(var(--vmz-control-height) * 1.5);
359
371
  }
360
372
 
361
373
  .vmz-ui-console-shell__main {
@@ -393,6 +405,20 @@ export default class ConsoleShell {
393
405
  title: string;
394
406
  href: string;
395
407
  }[] = [];
408
+ _onDocumentClick = null;
409
+ onMount() {
410
+ this._onDocumentClick = (ev) => {
411
+ if (!this.menuOpen) return;
412
+ const target = ev.target;
413
+ if (target && target.closest && target.closest('[data-vmz-shell="sidebar"]')) return;
414
+ this.menuOpen = false;
415
+ };
416
+ document.addEventListener("click", this._onDocumentClick);
417
+ }
418
+ onDestroy() {
419
+ if (this._onDocumentClick) document.removeEventListener("click", this._onDocumentClick);
420
+ this._onDocumentClick = null;
421
+ }
396
422
  toggleMenu() {
397
423
  this.menuOpen = !this.menuOpen;
398
424
  }