flexdesk 0.18.1 → 0.18.2

package/docs/components/flow-editors.md

@@ -81,6 +81,26 @@ be used is disabled and its reason is shown next to it, not only in a tooltip.
 `extra` holds the editor's own fields (a port shown as a setting) and notes,
 placed with `after: '<key>'` or `at: 'start'`.
 
+### A flat panel: `variant: 'sheet'` (0.18.2)
+
+`createSettingsPanel({ ..., variant: 'sheet' })` draws the panel flat, as one
+section of a page of them: no fill and no icon chip, the title and the
+description in a margin at the left, the id line, findings, slots and fields
+beside them. Two sheets in a row are split by a rule, so a settings page built of
+several panels (one per subject: *Run*, *Solver*, *Metadata*) reads as one form.
+Narrower than 560px the margin goes above the fields. Everything else is the
+card's: `show()`, the repaints, focus, findings and slots behave the same.
+`variant` is `'card'` (the default) or `'sheet'`; any other value is refused when
+the panel is created.
+
+```js
+for (const section of sections) {
+    const panel = createSettingsPanel({ widgets, host: page, variant: 'sheet', onChange: section.write });
+    panel.show({ title: section.title, description: section.hint, type: { config_schema: section.schema },
+                 value: section.read() });
+}
+```
+
 **The widgets.** A schema type with no `x-ui-widget` draws its plain control: an
 `enum` a select (writing the enum's own value, so a number stays a number), a
 string a text box, a number a number box, a boolean a checkbox, an object with

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.18.1",
+    "version": "0.18.2",
     "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
     "license": "MIT",
     "repository": {

package/src/flow/kit/settings_panel.js

@@ -50,13 +50,20 @@ const TITLE = 'data-twm-flow-title';
  * @param {string} [o.valuesNote]            the picker's footer sentence
  * @param {(step: object) => object[]|null} [o.columns]  a step's input columns (a data flow)
  * @param {HTMLElement} [o.host]             appended here when given
+ * @param {'card'|'sheet'} [o.variant]       'card' (the default): a raised panel, its header above
+ *        its fields. 'sheet': flat, one section of a page of them — the title and the description
+ *        in a margin at the left, the fields beside them, a rule between two sheets (0.18.2)
  */
 export function createSettingsPanel({ widgets, references = {}, strings = null, services = null, readOnly = false,
                                       onChange = null, onRename = null, onFocusLost = null, values = null,
-                                      valuesNote = null, columns = null, host = null } = {}) {
+                                      valuesNote = null, columns = null, host = null, variant = 'card' } = {}) {
     if (!widgets?.get) throw new Error('createSettingsPanel needs a widget registry (createWidgetRegistry()).');
+    if (variant !== 'card' && variant !== 'sheet') {
+        throw new Error(`createSettingsPanel's variant is 'card' or 'sheet', not ${JSON.stringify(variant)}.`);
+    }
+    const sheet = variant === 'sheet';
     const S = createStrings(strings);
-    const root = el('section', 'twm-flow-panel');
+    const root = el('section', sheet ? 'twm-flow-panel twm-flow-panel--sheet' : 'twm-flow-panel');
     root.setAttribute('role', 'region');
     root.setAttribute('aria-label', say(S, 'settings'));
     if (host) host.appendChild(root);
@@ -167,15 +174,23 @@ export function createSettingsPanel({ widgets, references = {}, strings = null,
         root.replaceChildren();
         if (!spec) return;
         if (isReadOnly() && readOnlyReason()) root.appendChild(el('p', 'twm-flow-panel__readonly', readOnlyReason()));
-        root.appendChild(paintHeader());
-        if (spec.description) root.appendChild(el('p', 'twm-flow-panel__description', spec.description));
-        if (spec.idLine) root.appendChild(el('div', 'twm-flow-panel__id', spec.idLine));
+        // A sheet sets the header and the description in its margin, the rest beside them
+        const margin = sheet ? el('div', 'twm-flow-panel__margin') : root;
+        const body = sheet ? el('div', 'twm-flow-panel__body') : root;
+        if (sheet) {
+            const grid = el('div', 'twm-flow-panel__sheet');
+            grid.append(margin, body);
+            root.appendChild(grid);
+        }
+        margin.appendChild(paintHeader());
+        if (spec.description) margin.appendChild(el('p', 'twm-flow-panel__description', spec.description));
+        if (spec.idLine) body.appendChild(el('div', 'twm-flow-panel__id', spec.idLine));
         findingsBox = el('ul', 'twm-flow-panel__findings');
         findingsBox.hidden = true;
-        root.appendChild(findingsBox);
+        body.appendChild(findingsBox);
         slotBefore = el('div', 'twm-flow-panel__slot');
         slotBefore.dataset.slot = 'before';
-        root.appendChild(slotBefore);
+        body.appendChild(slotBefore);
 
         const list = el('div', 'twm-flow-panel__fields');
         allFields = Array.isArray(spec.fields) ? spec.fields : fieldsFromSchema(spec.type?.config_schema);
@@ -213,10 +228,10 @@ export function createSettingsPanel({ widgets, references = {}, strings = null,
             const anchor = placed(e);
             if (anchor === null || !keys.has(anchor)) drawExtra(e);
         }
-        root.appendChild(list);
+        body.appendChild(list);
         slotAfter = el('div', 'twm-flow-panel__slot');
         slotAfter.dataset.slot = 'after';
-        root.appendChild(slotAfter);
+        body.appendChild(slotAfter);
         paintSlots();
         applyFindings();
     }