@vmz/ui 0.0.4 → 0.1.1

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 (66) hide show
  1. package/README.md +15 -2
  2. package/contracts/token-requirements.v0.json +45 -10
  3. package/package.json +18 -2
  4. package/presets/web-surface.v0.json +24 -10
  5. package/src/components/Accordion.vmz +88 -89
  6. package/src/components/Alert.vmz +64 -63
  7. package/src/components/AppShell.vmz +64 -45
  8. package/src/components/Autocomplete.vmz +152 -151
  9. package/src/components/Avatar.vmz +16 -0
  10. package/src/components/Badge.vmz +46 -46
  11. package/src/components/Breadcrumb.vmz +52 -48
  12. package/src/components/BulkActions.vmz +37 -37
  13. package/src/components/Button.vmz +91 -70
  14. package/src/components/Callout.vmz +61 -61
  15. package/src/components/Card.vmz +58 -52
  16. package/src/components/Checkbox.vmz +56 -53
  17. package/src/components/CodeBlock.vmz +51 -51
  18. package/src/components/Collapse.vmz +20 -0
  19. package/src/components/ConsoleShell.vmz +134 -99
  20. package/src/components/Content.vmz +11 -0
  21. package/src/components/DataTable.vmz +197 -196
  22. package/src/components/DatePicker.vmz +650 -75
  23. package/src/components/Dialog.vmz +365 -384
  24. package/src/components/Divider.vmz +19 -0
  25. package/src/components/Drawer.vmz +361 -378
  26. package/src/components/Dropdown.vmz +22 -0
  27. package/src/components/Empty.vmz +36 -36
  28. package/src/components/Field.vmz +69 -40
  29. package/src/components/FilterBar.vmz +15 -15
  30. package/src/components/Flex.vmz +12 -0
  31. package/src/components/Footer.vmz +11 -0
  32. package/src/components/Form.vmz +56 -58
  33. package/src/components/FormItem.vmz +59 -59
  34. package/src/components/Grid.vmz +12 -0
  35. package/src/components/Header.vmz +11 -0
  36. package/src/components/Icon.vmz +86 -0
  37. package/src/components/Layout.vmz +11 -0
  38. package/src/components/Link.vmz +33 -33
  39. package/src/components/List.vmz +96 -96
  40. package/src/components/Menu.vmz +229 -240
  41. package/src/components/Notification.vmz +62 -62
  42. package/src/components/Pagination.vmz +63 -65
  43. package/src/components/Popover.vmz +202 -219
  44. package/src/components/Progress.vmz +18 -0
  45. package/src/components/Prose.vmz +61 -61
  46. package/src/components/QueryForm.vmz +26 -27
  47. package/src/components/RadioGroup.vmz +116 -113
  48. package/src/components/Result.vmz +63 -63
  49. package/src/components/Segmented.vmz +29 -0
  50. package/src/components/Select.vmz +462 -286
  51. package/src/components/Sider.vmz +6 -0
  52. package/src/components/Skeleton.vmz +58 -58
  53. package/src/components/Space.vmz +15 -0
  54. package/src/components/Spinner.vmz +29 -29
  55. package/src/components/Steps.vmz +86 -86
  56. package/src/components/Switch.vmz +86 -88
  57. package/src/components/Table.vmz +116 -114
  58. package/src/components/Tabs.vmz +113 -112
  59. package/src/components/Tag.vmz +8 -0
  60. package/src/components/TextArea.vmz +76 -49
  61. package/src/components/Timeline.vmz +55 -50
  62. package/src/components/Toc.vmz +64 -60
  63. package/src/components/Tooltip.vmz +51 -51
  64. package/src/components/Tree.vmz +184 -190
  65. package/src/components/Typography.vmz +9 -0
  66. package/src/components/Upload.vmz +1192 -82
package/src/components/ConsoleShell.vmz CHANGED
@@ -1,127 +1,162 @@
1
1
  <template>
2
2
  <div class="vmz-ui-console-shell" data-vmz-ui="console-shell">
3
- <aside class="vmz-ui-console-shell__sidebar" data-vmz-shell="sidebar" aria-label={navLabel}>
4
- <a class="vmz-ui-console-shell__brand" href={homeHref}>{brand}</a>
5
- <nav class="vmz-ui-console-shell__nav">
6
- <a each={nav} as="item" key={item.id} href={item.href} data-vmz-nav={item.id}>
7
- {item.title}
8
- </a>
9
- </nav>
10
- </aside>
11
- <div class="vmz-ui-console-shell__body">
12
- <header class="vmz-ui-console-shell__header" data-vmz-shell="header">
13
- <h1 class="vmz-ui-console-shell__title">{title}</h1>
14
- </header>
15
- <main class="vmz-ui-console-shell__main" data-vmz-shell="main">
16
- <slot />
17
- </main>
3
+ <aside class="vmz-ui-console-shell__sidebar" data-vmz-shell="sidebar" aria-label={navLabel}>
4
+ <a class="vmz-ui-console-shell__brand" href={homeHref}>{brand}</a>
5
+ <nav class="vmz-ui-console-shell__nav">
6
+ <a each={nav} as="item" key={item.id} href={item.href} data-vmz-nav={item.id}>
7
+ {item.title}
8
+ </a>
9
+ </nav>
10
+ </aside>
11
+ <div class="vmz-ui-console-shell__body">
12
+ <header class="vmz-ui-console-shell__header" data-vmz-shell="header">
13
+ <h1 class="vmz-ui-console-shell__title">{title}</h1>
14
+ </header>
15
+ <main class="vmz-ui-console-shell__main" data-vmz-shell="main">
16
+ <slot />
17
+ </main>
18
+ <footer if={footer} class="vmz-ui-console-shell__footer" data-vmz-shell="footer">
19
+ {footer}
20
+ </footer>
21
+ </div>
18
22
  </div>
19
- </div>
20
23
  </template>
21
24
 
22
25
  <style>
23
- .vmz-ui-console-shell {
24
- display: grid;
25
- grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
26
- min-height: 100%;
27
- color: inherit;
28
- }
29
-
30
- .vmz-ui-console-shell__sidebar {
31
- display: flex;
32
- flex-direction: column;
33
- gap: 1rem;
34
- padding: 1rem 0.9rem;
35
- border-right: 1px solid var(--vmz-action-primary-background);
36
- }
26
+ .vmz-ui-console-shell {
27
+ display: grid;
28
+ grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
29
+ grid-template-rows: minmax(100%, 100%);
30
+ min-height: 100vh;
31
+ min-height: 100dvh;
32
+ height: 100dvh;
33
+ color: inherit;
34
+ background: var(--vmz-surface-page, #f5f5f5);
35
+ }
37
36
 
38
- .vmz-ui-console-shell__brand {
39
- font: inherit;
40
- font-weight: 700;
41
- font-size: 1.05rem;
42
- letter-spacing: 0.04em;
43
- text-decoration: none;
44
- color: var(--vmz-action-primary-background);
45
- }
37
+ .vmz-ui-console-shell__sidebar {
38
+ display: flex;
39
+ flex-direction: column;
40
+ gap: 1rem;
41
+ padding: 1.15rem 0.95rem 1.5rem;
42
+ border-right: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
43
+ min-height: 100%;
44
+ align-self: stretch;
45
+ }
46
46
 
47
- .vmz-ui-console-shell__brand:focus-visible {
48
- outline: none;
49
- box-shadow: 0 0 0 2px var(--vmz-focus-ring);
50
- }
47
+ .vmz-ui-console-shell__brand {
48
+ font: inherit;
49
+ font-weight: 700;
50
+ font-size: 1.05rem;
51
+ letter-spacing: 0.04em;
52
+ text-decoration: none;
53
+ color: var(--vmz-action-primary-background);
54
+ }
51
55
 
52
- .vmz-ui-console-shell__nav {
53
- display: flex;
54
- flex-direction: column;
55
- gap: 0.45rem;
56
- }
56
+ .vmz-ui-console-shell__brand:focus-visible {
57
+ outline: none;
58
+ box-shadow: 0 0 0 2px var(--vmz-focus-ring);
59
+ }
57
60
 
58
- .vmz-ui-console-shell__nav a {
59
- font: inherit;
60
- font-weight: 600;
61
- text-decoration: none;
62
- color: var(--vmz-action-primary-active);
63
- padding: 0.35rem 0.4rem;
64
- }
61
+ .vmz-ui-console-shell__nav {
62
+ display: flex;
63
+ flex-direction: column;
64
+ gap: 0.35rem;
65
+ flex: 1;
66
+ }
65
67
 
66
- .vmz-ui-console-shell__nav a:focus-visible {
67
- outline: none;
68
- box-shadow: 0 0 0 2px var(--vmz-focus-ring);
69
- }
68
+ .vmz-ui-console-shell__nav a {
69
+ font: inherit;
70
+ font-weight: 600;
71
+ text-decoration: none;
72
+ color: var(--vmz-action-primary-active);
73
+ padding: 0.45rem 0.55rem;
74
+ }
70
75
 
71
- .vmz-ui-console-shell__body {
72
- display: flex;
73
- flex-direction: column;
74
- min-width: 0;
75
- }
76
+ .vmz-ui-console-shell__nav a:focus-visible {
77
+ outline: none;
78
+ box-shadow: 0 0 0 2px var(--vmz-focus-ring);
79
+ }
76
80
 
77
- .vmz-ui-console-shell__header {
78
- padding: 0.85rem 1.1rem;
79
- border-bottom: 1px solid var(--vmz-action-primary-background);
80
- }
81
+ .vmz-ui-console-shell__body {
82
+ display: flex;
83
+ flex-direction: column;
84
+ min-width: 0;
85
+ min-height: 0;
86
+ height: 100%;
87
+ overflow: auto;
88
+ }
81
89
 
82
- .vmz-ui-console-shell__title {
83
- margin: 0;
84
- font-size: 1.15rem;
85
- font-weight: 700;
86
- color: var(--vmz-action-primary-active);
87
- }
90
+ .vmz-ui-console-shell__header {
91
+ position: sticky;
92
+ top: 0;
93
+ z-index: 20;
94
+ padding: 0.9rem 1.25rem;
95
+ border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
96
+ background: var(--vmz-surface-paper, #fff);
97
+ }
88
98
 
89
- .vmz-ui-console-shell__main {
90
- flex: 1;
91
- padding: 1rem 1.1rem 1.75rem;
92
- display: flex;
93
- flex-direction: column;
94
- gap: 0.85rem;
95
- }
99
+ .vmz-ui-console-shell__title {
100
+ margin: 0;
101
+ font-size: 1.15rem;
102
+ font-weight: 700;
103
+ color: var(--vmz-action-primary-active);
104
+ }
96
105
 
97
- @media (max-width: 40rem) {
98
- .vmz-ui-console-shell {
99
- grid-template-columns: 1fr;
106
+ .vmz-ui-console-shell__main {
107
+ flex: 1 1 auto;
108
+ padding: 1.15rem 1.25rem 1.5rem;
109
+ display: flex;
110
+ flex-direction: column;
111
+ gap: 0.85rem;
100
112
  }
101
113
 
102
- .vmz-ui-console-shell__sidebar {
103
- border-right: 0;
104
- border-bottom: 1px solid var(--vmz-action-primary-background);
114
+ .vmz-ui-console-shell__footer {
115
+ margin-top: auto;
116
+ padding: 0.85rem 1.25rem 1.1rem;
117
+ border-top: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
118
+ color: var(--vmz-text-steel, #6b7466);
119
+ font-size: 0.82rem;
120
+ background: var(--vmz-surface-paper, #fff);
105
121
  }
106
122
 
107
- .vmz-ui-console-shell__nav {
108
- flex-direction: row;
109
- flex-wrap: wrap;
123
+ @media (max-width: 40rem) {
124
+ .vmz-ui-console-shell {
125
+ grid-template-columns: 1fr;
126
+ grid-template-rows: auto minmax(0, 1fr);
127
+ height: auto;
128
+ min-height: 100dvh;
129
+ }
130
+
131
+ .vmz-ui-console-shell__sidebar {
132
+ border-right: 0;
133
+ border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
134
+ }
135
+
136
+ .vmz-ui-console-shell__nav {
137
+ flex-direction: row;
138
+ flex-wrap: wrap;
139
+ flex: 0;
140
+ }
110
141
  }
111
- }
112
142
  </style>
113
143
 
114
144
  <script client>
115
145
  /**
116
- * VMZ UI — ConsoleShell (Console composition).
117
- * Sidebar + header landmarks + main slot. Parent supplies nav; no private theme.
118
- */
146
+ * VMZ UI — ConsoleShell (Console composition).
147
+ * Sidebar + sticky header + main slot + optional footer. Parent supplies nav.
148
+ */
119
149
  export default class ConsoleShell {
120
- public brand: string = 'VMZ';
121
- public homeHref: string = '/';
122
- public title: string = 'Console';
123
- public navLabel: string = 'Console';
124
- /** @type {{ id: string, title: string, href: string }[]} */
125
- public nav: { id: string; title: string; href: string }[] = [];
150
+ public brand: string = "VMZ";
151
+ public homeHref: string = "/";
152
+ public title: string = "Console";
153
+ public navLabel: string = "Console";
154
+ public footer: string = "";
155
+ /** @type {{ id: string, title: string, href: string }[]} */
156
+ public nav: {
157
+ id: string;
158
+ title: string;
159
+ href: string;
160
+ }[] = [];
126
161
  }
127
162
  </script>
package/src/components/Content.vmz ADDED
@@ -0,0 +1,11 @@
1
+ <template>
2
+ <main class="vmz-ui-content" data-vmz-ui="content"><slot /></main>
3
+ </template>
4
+
5
+ <style>
6
+ .vmz-ui-content{flex:1;min-width:0;padding:1.5rem}
7
+ </style>
8
+
9
+ <script client>
10
+ export default class Content {}
11
+ </script>