@ashley-shrok/viewmodel-shell 3.6.0 → 3.6.2
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/browser.js +19 -0
- package/package.json +2 -2
- package/styles/default.css +14 -0
package/dist/browser.js
CHANGED
|
@@ -688,6 +688,25 @@ export class BrowserAdapter {
|
|
|
688
688
|
o.selected = isMulti ? selectedSet.has(opt.value) : opt.value === selectedSingle;
|
|
689
689
|
sel.appendChild(o);
|
|
690
690
|
});
|
|
691
|
+
// A <select> ALWAYS displays a selected option — HTML auto-selects the
|
|
692
|
+
// first when none is explicitly `selected`. VMS is state-driven: the
|
|
693
|
+
// submitted _state carries the value, NOT a DOM harvest, so the value the
|
|
694
|
+
// user SEES selected must be reflected in state. Without this seed a select
|
|
695
|
+
// whose bound path has no value (or that the user leaves at its displayed
|
|
696
|
+
// default) writes NOTHING to state — its key is ABSENT on dispatch even
|
|
697
|
+
// though an option is visibly chosen — so presence-checking server
|
|
698
|
+
// validators report it unset. Seed the effective displayed value whenever
|
|
699
|
+
// state doesn't already carry it. An app wanting a "please choose" state
|
|
700
|
+
// uses a placeholder option (value ""): the seeded value is then "" — an
|
|
701
|
+
// explicit empty the server can reject, never a silently-missing key.
|
|
702
|
+
if (isMulti) {
|
|
703
|
+
if (!Array.isArray(stateValue)) {
|
|
704
|
+
this.sa.write(n.bind, Array.from(sel.selectedOptions, o => o.value));
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
else if (stateValue === undefined || String(stateValue) !== sel.value) {
|
|
708
|
+
this.sa.write(n.bind, sel.value);
|
|
709
|
+
}
|
|
691
710
|
sel.addEventListener("change", () => {
|
|
692
711
|
if (isMulti) {
|
|
693
712
|
const arr = Array.from(sel.selectedOptions).map(o => o.value);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ashley-shrok/viewmodel-shell",
|
|
3
|
-
"version": "3.6.
|
|
4
|
-
"description": "A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic
|
|
3
|
+
"version": "3.6.2",
|
|
4
|
+
"description": "A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic \u2014 a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"author": "ashley-shrok",
|
package/styles/default.css
CHANGED
|
@@ -154,6 +154,20 @@ body {
|
|
|
154
154
|
Orthogonal to layout; outside a fill page the section rule is an inert no-op. */
|
|
155
155
|
.vms-page--fill { height: 100dvh; }
|
|
156
156
|
.vms-section--fill { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
157
|
+
/* Fill makes the host's <body> margin load-bearing: the base `body` rule above
|
|
158
|
+
deliberately leaves margin to the host (one-line `body{margin:0}` convention),
|
|
159
|
+
but a 100dvh page plus the UA's default 8px body margin overflows the viewport
|
|
160
|
+
(100dvh + 16px → ~16px of scroll, a clipped pinned footer). So when — and ONLY
|
|
161
|
+
when — a fill page is present, the framework owns the body reset itself. Scoped
|
|
162
|
+
via :has() so non-fill pages keep the existing host-owns-margin convention. */
|
|
163
|
+
body:has(.vms-page--fill) { margin: 0; }
|
|
164
|
+
/* Fill + sidebar composition: `.vms-page--sidebar` is `flex-wrap: wrap` (for the
|
|
165
|
+
breakpoint-free stacked collapse), so the flex LINE's cross-size is the children's
|
|
166
|
+
natural max, not the container's 100dvh. With `align: stretch` the children then
|
|
167
|
+
stretch to that natural max and burst the fill height (e.g. a long sidebar list
|
|
168
|
+
pushes the page past the viewport). Cap each child at the page height and let it
|
|
169
|
+
scroll internally instead. Scoped to fill+sidebar so no other layout is touched. */
|
|
170
|
+
.vms-page--fill.vms-page--sidebar > * { max-height: 100%; overflow-y: auto; }
|
|
157
171
|
|
|
158
172
|
/* ── Section ── */
|
|
159
173
|
.vms-section { display: flex; flex-direction: column; gap: var(--vms-space-sm); }
|