@vmz/ui 0.3.5 → 0.3.7
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 +2 -2
- package/presets/web-surface.v0.json +19 -7
- package/src/components/Accordion.vmz +2 -2
- package/src/components/AppShell.vmz +79 -32
- package/src/components/Autocomplete.vmz +3 -3
- package/src/components/Badge.vmz +1 -1
- package/src/components/Breadcrumb.vmz +3 -3
- package/src/components/BulkActions.vmz +2 -2
- package/src/components/Button.vmz +38 -17
- package/src/components/Callout.vmz +1 -1
- package/src/components/Card.vmz +19 -5
- package/src/components/Checkbox.vmz +2 -2
- package/src/components/CodeBlock.vmz +93 -19
- package/src/components/ConsoleShell.vmz +21 -21
- package/src/components/DataTable.vmz +4 -4
- package/src/components/DatePicker.vmz +9 -9
- package/src/components/Dialog.vmz +26 -7
- package/src/components/Drawer.vmz +3 -3
- package/src/components/Dropdown.vmz +181 -16
- package/src/components/Empty.vmz +1 -1
- package/src/components/Field.vmz +4 -4
- package/src/components/FormItem.vmz +1 -1
- package/src/components/Link.vmz +38 -4
- package/src/components/List.vmz +2 -2
- package/src/components/Menu.vmz +4 -4
- package/src/components/Pagination.vmz +7 -5
- package/src/components/Popover.vmz +3 -3
- package/src/components/Prose.vmz +1 -1
- package/src/components/RadioGroup.vmz +4 -4
- package/src/components/Segmented.vmz +1 -1
- package/src/components/Select.vmz +12 -12
- package/src/components/Steps.vmz +1 -1
- package/src/components/Switch.vmz +2 -2
- package/src/components/Table.vmz +45 -13
- package/src/components/Tabs.vmz +3 -3
- package/src/components/Tag.vmz +5 -2
- package/src/components/TextArea.vmz +4 -4
- package/src/components/Timeline.vmz +2 -2
- package/src/components/Toc.vmz +3 -3
- package/src/components/Tooltip.vmz +4 -4
- package/src/components/Tree.vmz +4 -4
- package/src/components/Upload.vmz +23 -13
package/src/components/Table.vmz
CHANGED
|
@@ -31,59 +31,91 @@
|
|
|
31
31
|
<style>
|
|
32
32
|
.vmz-ui-table-wrap {
|
|
33
33
|
overflow-x: auto;
|
|
34
|
-
border: 1px solid var(--vmz-line-default);
|
|
35
|
-
border-radius: var(--vmz-radius-
|
|
34
|
+
border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
|
|
35
|
+
border-radius: var(--vmz-radius-lg, 8px);
|
|
36
|
+
background: var(--vmz-surface-paper);
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
.vmz-ui-table {
|
|
39
40
|
width: 100%;
|
|
40
41
|
border-collapse: collapse;
|
|
41
42
|
font: inherit;
|
|
43
|
+
font-size: 0.875rem;
|
|
42
44
|
}
|
|
43
45
|
|
|
44
46
|
.vmz-ui-table th,
|
|
45
47
|
.vmz-ui-table td {
|
|
46
|
-
padding:
|
|
48
|
+
padding: 0.75rem 1rem;
|
|
47
49
|
text-align: left;
|
|
48
50
|
border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
|
|
49
51
|
vertical-align: middle;
|
|
50
52
|
}
|
|
51
53
|
|
|
54
|
+
/* Header is structure, not brand: quiet ink on a tinted band. */
|
|
52
55
|
.vmz-ui-table th {
|
|
53
|
-
font-weight:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
+
font-weight: 600;
|
|
57
|
+
font-size: 0.8125rem;
|
|
58
|
+
letter-spacing: 0.01em;
|
|
59
|
+
color: var(--vmz-text-steel);
|
|
60
|
+
background: var(--vmz-surface-mist);
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.vmz-ui-table tbody tr {
|
|
65
|
+
transition: background-color var(--vmz-motion-control-duration, 150ms)
|
|
66
|
+
var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.vmz-ui-table tbody tr:hover {
|
|
70
|
+
background: var(--vmz-surface-mist);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.vmz-ui-table tbody tr:last-child td {
|
|
74
|
+
border-bottom: 0;
|
|
56
75
|
}
|
|
57
76
|
|
|
58
77
|
.vmz-ui-table__sort {
|
|
78
|
+
display: inline-flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
gap: 0.25rem;
|
|
59
81
|
font: inherit;
|
|
60
|
-
font-weight:
|
|
82
|
+
font-weight: 600;
|
|
61
83
|
padding: 0;
|
|
62
84
|
border: 0;
|
|
63
85
|
background: transparent;
|
|
64
86
|
color: inherit;
|
|
65
87
|
cursor: pointer;
|
|
66
88
|
outline: none;
|
|
89
|
+
border-radius: var(--vmz-radius-xs, 2px);
|
|
67
90
|
}
|
|
68
91
|
|
|
69
92
|
.vmz-ui-table__sort:focus-visible {
|
|
70
|
-
box-shadow: 0 0 0
|
|
93
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
71
94
|
}
|
|
72
95
|
|
|
73
96
|
.vmz-ui-table__row-action {
|
|
74
97
|
font: inherit;
|
|
75
|
-
font-weight:
|
|
76
|
-
padding: 0.
|
|
98
|
+
font-weight: 500;
|
|
99
|
+
padding: 0.25rem 0.625rem;
|
|
77
100
|
border: 1px solid var(--vmz-line-default);
|
|
78
101
|
border-radius: var(--vmz-radius-md, 6px);
|
|
79
|
-
background:
|
|
80
|
-
color: var(--vmz-action-primary-
|
|
102
|
+
background: var(--vmz-surface-paper);
|
|
103
|
+
color: var(--vmz-action-primary-background);
|
|
81
104
|
cursor: pointer;
|
|
82
105
|
outline: none;
|
|
106
|
+
transition:
|
|
107
|
+
color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
|
|
108
|
+
border-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
|
|
109
|
+
background-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.vmz-ui-table__row-action:hover:not(:disabled) {
|
|
113
|
+
color: var(--vmz-action-primary-hover);
|
|
114
|
+
border-color: var(--vmz-action-primary-hover);
|
|
83
115
|
}
|
|
84
116
|
|
|
85
117
|
.vmz-ui-table__row-action:focus-visible {
|
|
86
|
-
box-shadow: 0 0 0
|
|
118
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
87
119
|
}
|
|
88
120
|
|
|
89
121
|
.vmz-ui-table__row-action:disabled {
|
package/src/components/Tabs.vmz
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
.vmz-ui-tabs {
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-direction: column;
|
|
17
|
-
gap: 0.
|
|
17
|
+
gap: 0.625rem;
|
|
18
18
|
max-width: 36rem;
|
|
19
19
|
}
|
|
20
20
|
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.vmz-ui-tabs__tab:focus-visible {
|
|
51
|
-
box-shadow: 0 0 0
|
|
51
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.vmz-ui-tabs__panel {
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.vmz-ui-tabs__panel:focus-visible {
|
|
60
|
-
box-shadow: 0 0 0
|
|
60
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
61
61
|
}
|
|
62
62
|
</style>
|
|
63
63
|
<script client>
|
package/src/components/Tag.vmz
CHANGED
|
@@ -7,14 +7,17 @@
|
|
|
7
7
|
.vmz-ui-tag {
|
|
8
8
|
display: inline-flex;
|
|
9
9
|
align-items: center;
|
|
10
|
+
gap: 0.25rem;
|
|
10
11
|
min-height: 1.5rem;
|
|
11
|
-
padding: 0 0.
|
|
12
|
+
padding: 0 0.5rem;
|
|
12
13
|
border: 1px solid var(--vmz-line-default);
|
|
13
|
-
border-radius: var(--vmz-radius-sm,
|
|
14
|
+
border-radius: var(--vmz-radius-sm, 4px);
|
|
14
15
|
background: var(--vmz-surface-mist);
|
|
15
16
|
color: var(--vmz-text-steel);
|
|
16
17
|
font-size: 0.75rem;
|
|
18
|
+
font-weight: 500;
|
|
17
19
|
line-height: 1;
|
|
20
|
+
white-space: nowrap;
|
|
18
21
|
}
|
|
19
22
|
.vmz-ui-tag[data-status="success"] {
|
|
20
23
|
color: var(--vmz-status-success-foreground);
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
.vmz-ui-textarea {
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
19
|
-
gap: 0.
|
|
19
|
+
gap: 0.5rem;
|
|
20
20
|
max-width: none;
|
|
21
21
|
width: 100%;
|
|
22
22
|
}
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
resize: vertical;
|
|
45
45
|
transition:
|
|
46
46
|
border-color var(--vmz-motion-control-duration, 120ms)
|
|
47
|
-
var(--vmz-motion-control-easing,
|
|
47
|
+
var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
|
|
48
48
|
box-shadow var(--vmz-motion-control-duration, 120ms)
|
|
49
|
-
var(--vmz-motion-control-easing,
|
|
49
|
+
var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
.vmz-ui-textarea__control::placeholder {
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
|
|
65
65
|
.vmz-ui-textarea__control:focus-visible {
|
|
66
66
|
border-color: var(--vmz-action-primary-background);
|
|
67
|
-
box-shadow: 0 0 0
|
|
67
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.vmz-ui-textarea__control:disabled,
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
.vmz-ui-timeline__item {
|
|
28
28
|
position: relative;
|
|
29
|
-
padding: 0.
|
|
29
|
+
padding: 0.125rem 0 0.125rem 0.85rem;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.vmz-ui-timeline__item::before {
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.vmz-ui-timeline__title {
|
|
51
|
-
margin: 0.
|
|
51
|
+
margin: 0.125rem 0 0;
|
|
52
52
|
font-weight: 700;
|
|
53
53
|
color: var(--vmz-action-primary-active);
|
|
54
54
|
}
|
package/src/components/Toc.vmz
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
.vmz-ui-toc {
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-direction: column;
|
|
17
|
-
gap: 0.
|
|
17
|
+
gap: 0.5rem;
|
|
18
18
|
min-width: 11rem;
|
|
19
19
|
padding: 0.85rem 0.75rem;
|
|
20
20
|
border: 1px solid var(--vmz-line-default);
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
.vmz-ui-toc__nav {
|
|
37
37
|
display: flex;
|
|
38
38
|
flex-direction: column;
|
|
39
|
-
gap: 0.
|
|
39
|
+
gap: 0.375rem;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.vmz-ui-toc__link {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.vmz-ui-toc__link:focus-visible {
|
|
56
|
-
box-shadow: 0 0 0
|
|
56
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
57
57
|
border-radius: var(--vmz-radius-md, 6px);
|
|
58
58
|
}
|
|
59
59
|
</style>
|
|
@@ -14,20 +14,20 @@
|
|
|
14
14
|
display: inline-flex;
|
|
15
15
|
flex-direction: column;
|
|
16
16
|
align-items: flex-start;
|
|
17
|
-
gap: 0.
|
|
17
|
+
gap: 0.375rem;
|
|
18
18
|
max-width: 28rem;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.vmz-ui-tooltip__trigger {
|
|
22
22
|
display: inline-flex;
|
|
23
23
|
align-items: center;
|
|
24
|
-
gap: 0.
|
|
24
|
+
gap: 0.375rem;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.vmz-ui-tooltip__bubble {
|
|
28
28
|
box-sizing: border-box;
|
|
29
29
|
max-width: 18rem;
|
|
30
|
-
padding: 0.
|
|
30
|
+
padding: 0.375rem 0.625rem;
|
|
31
31
|
border: 1px solid var(--vmz-line-default);
|
|
32
32
|
border-radius: var(--vmz-radius-md, 6px);
|
|
33
33
|
background: var(--vmz-surface-paper);
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
.vmz-ui-tooltip[data-open="true"]
|
|
41
41
|
.vmz-ui-tooltip__trigger
|
|
42
42
|
:where(button, a, [tabindex]):focus-visible {
|
|
43
|
-
box-shadow: 0 0 0
|
|
43
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
44
44
|
}
|
|
45
45
|
</style>
|
|
46
46
|
<script client>
|
package/src/components/Tree.vmz
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
.vmz-ui-tree {
|
|
21
21
|
display: flex;
|
|
22
22
|
flex-direction: column;
|
|
23
|
-
gap: 0.
|
|
23
|
+
gap: 0.375rem;
|
|
24
24
|
max-width: 28rem;
|
|
25
25
|
}
|
|
26
26
|
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
.vmz-ui-tree__item {
|
|
44
44
|
display: flex;
|
|
45
45
|
align-items: center;
|
|
46
|
-
gap: 0.
|
|
46
|
+
gap: 0.375rem;
|
|
47
47
|
padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
|
|
48
48
|
border-radius: var(--vmz-radius-md, 6px);
|
|
49
49
|
cursor: pointer;
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
.vmz-ui-tree__item:focus-visible {
|
|
67
|
-
box-shadow: 0 0 0
|
|
67
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.vmz-ui-tree__twist {
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
.vmz-ui-tree__twist:focus-visible {
|
|
87
|
-
box-shadow: 0 0 0
|
|
87
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.vmz-ui-tree__twist-spacer {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<div data-vmz-upload="zone" class="vmz-ui-upload__zone">
|
|
7
7
|
<input :id="controlId" type="file" :accept="accept" :multiple="multiple" :disabled="inputDisabled" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :data-vmz-upload-directory="directoryAttr" @change="onPick" class="vmz-ui-upload__control" />
|
|
8
8
|
<p data-vmz-upload="hint" class="vmz-ui-upload__hint">
|
|
9
|
-
{{ zoneHint }}
|
|
9
|
+
{{ hint || zoneHint }}
|
|
10
10
|
</p>
|
|
11
11
|
</div>
|
|
12
12
|
<ul v-if="hasItems" data-vmz-upload="queue" class="vmz-ui-upload__queue">
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
.vmz-ui-upload {
|
|
56
56
|
display: flex;
|
|
57
57
|
flex-direction: column;
|
|
58
|
-
gap: 0.
|
|
58
|
+
gap: 0.375rem;
|
|
59
59
|
max-width: 28rem;
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -84,13 +84,13 @@
|
|
|
84
84
|
.vmz-ui-upload__control {
|
|
85
85
|
font: inherit;
|
|
86
86
|
width: 100%;
|
|
87
|
-
padding: 0.
|
|
87
|
+
padding: 0.125rem 0;
|
|
88
88
|
color: inherit;
|
|
89
89
|
outline: none;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.vmz-ui-upload__control:focus-visible {
|
|
93
|
-
box-shadow: 0 0 0
|
|
93
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
.vmz-ui-upload__control:disabled {
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
.vmz-ui-upload__hint {
|
|
102
|
-
margin: 0.
|
|
102
|
+
margin: 0.375rem 0 0;
|
|
103
103
|
font-size: 0.88rem;
|
|
104
104
|
color: var(--vmz-text-steel);
|
|
105
105
|
}
|
|
@@ -110,14 +110,14 @@
|
|
|
110
110
|
padding: 0;
|
|
111
111
|
display: flex;
|
|
112
112
|
flex-direction: column;
|
|
113
|
-
gap: 0.
|
|
113
|
+
gap: 0.375rem;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.vmz-ui-upload__item {
|
|
117
117
|
display: grid;
|
|
118
118
|
grid-template-columns: 1fr auto;
|
|
119
|
-
gap: 0.
|
|
120
|
-
padding: 0.
|
|
119
|
+
gap: 0.125rem 0.75rem;
|
|
120
|
+
padding: 0.375rem 0.5rem;
|
|
121
121
|
border: 1px solid var(--vmz-line-default);
|
|
122
122
|
border-radius: var(--vmz-radius-md, 6px);
|
|
123
123
|
background: var(--vmz-surface-paper);
|
|
@@ -151,10 +151,18 @@
|
|
|
151
151
|
color: var(--vmz-status-danger-foreground);
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
+
/* The native file input already announces "no file chosen"; keep this node for
|
|
155
|
+
assistive tech without repeating the same line visually. */
|
|
154
156
|
.vmz-ui-upload__empty {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
157
|
+
position: absolute;
|
|
158
|
+
width: 1px;
|
|
159
|
+
height: 1px;
|
|
160
|
+
margin: -1px;
|
|
161
|
+
padding: 0;
|
|
162
|
+
overflow: hidden;
|
|
163
|
+
clip-path: inset(50%);
|
|
164
|
+
white-space: nowrap;
|
|
165
|
+
border: 0;
|
|
158
166
|
}
|
|
159
167
|
|
|
160
168
|
.vmz-ui-upload__progress {
|
|
@@ -162,7 +170,7 @@
|
|
|
162
170
|
grid-template-columns: 1fr auto;
|
|
163
171
|
align-items: center;
|
|
164
172
|
gap: 0.5rem;
|
|
165
|
-
padding: 0.
|
|
173
|
+
padding: 0.375rem 0;
|
|
166
174
|
}
|
|
167
175
|
|
|
168
176
|
.vmz-ui-upload__bar {
|
|
@@ -221,7 +229,7 @@
|
|
|
221
229
|
|
|
222
230
|
.vmz-ui-upload__cancel:focus-visible,
|
|
223
231
|
.vmz-ui-upload__resume:focus-visible {
|
|
224
|
-
box-shadow: 0 0 0
|
|
232
|
+
box-shadow: 0 0 0 3px var(--vmz-focus-ring);
|
|
225
233
|
}
|
|
226
234
|
|
|
227
235
|
.vmz-ui-upload__resume {
|
|
@@ -304,6 +312,8 @@ export default class Upload {
|
|
|
304
312
|
public onStatus: ((status: string) => void) | null = null;
|
|
305
313
|
public cancelLabel: string = "Cancel upload";
|
|
306
314
|
public resumeLabel: string = "Resume upload";
|
|
315
|
+
/** Caller-supplied drop-zone hint; empty keeps the mode-aware default. */
|
|
316
|
+
public hint: string = "";
|
|
307
317
|
// presentation (component-owned — NOT public props)
|
|
308
318
|
status: string = "idle";
|
|
309
319
|
progress: string = "0";
|