@xeplr/ui-factory 1.8.4 → 1.8.5

package/README.md

@@ -433,6 +433,7 @@ actions.register({
 | `ask` | asked first: `title`, `message`, and `note` — the label of a note box, whose text reaches the function as `note` (it must take one) |
 | `when` | shown only when every rule matches the record |
 | `disabledWhen` | greyed out when every rule matches |
+| `pressedWhen` | drawn as the **current choice** (filled, `aria-pressed`) when every rule matches — the status an order is at. Give it the same rules as `disabledWhen` when choosing it again would change nothing |
 | `variant` | `default`, `primary`, `danger` |
 
 Rules are [`@xeplr/rules`](https://www.npmjs.com/package/@xeplr/rules) rules — `{ field, op, value }`, with `eq`, `neq`, `isEmpty`, `contains`, `gt`, … — read from **the record the screen is about**: the `record` handed to `<FactoryScreen>`, with the form's own changes on top.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeplr/ui-factory",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "Design data-entry screens on @xeplr/ui-canvas, save them as JSON, run them as auto-saving forms with lists of saved records — built for Claude to draft and people to refine",
   "type": "module",
   "main": "src/index.js",

package/src/buttons.js

@@ -7,6 +7,7 @@
 //
 //   { id: 'packed', label: 'Packed', action: 'setOrderStatus', params: { status: 'packed' },
 //     ask: { title: 'Change status to Packed', note: 'Reason (optional)' },
+//     pressedWhen:  [{ field: 'customStatus', op: 'eq', value: 'packed' }],
 //     disabledWhen: [{ field: 'customStatus', op: 'eq', value: 'packed' }] }
 //
 // The function lives in the app, registered with @xeplr/actions and an
@@ -66,6 +67,16 @@ export function buttonDisabled(button, record) {
   return Array.isArray(rules) && rules.length > 0 && conditionMet(rules, record)
 }
 
+/**
+ * Whether a button is drawn as the CURRENT choice — the status an order is
+ * at, filled in. Usually also its disabledWhen: choosing it again changes
+ * nothing. No pressedWhen: never.
+ */
+export function buttonPressed(button, record) {
+  const rules = button && button.pressedWhen
+  return Array.isArray(rules) && rules.length > 0 && conditionMet(rules, record)
+}
+
 /** Every button on a screen, with the panel it is on. */
 export function screenButtons(doc) {
   return ((doc && doc.nodes) || [])

package/src/designs/ButtonsView.jsx

@@ -37,7 +37,8 @@ export default function ButtonsView({ node, design, panel }) {
         <button
           key={b.id}
           type="button"
-          className={`xeplr-factory-button xeplr-factory-button--${b.variant || 'default'}`}
+          className={`xeplr-factory-button xeplr-factory-button--${b.variant || 'default'}${b.pressed ? ' xeplr-factory-button--pressed' : ''}`}
+          aria-pressed={b.pressedWhen ? Boolean(b.pressed) : undefined}
           disabled={b.disabled || Boolean(panel.pressing)}
           aria-busy={panel.pressing === b.id}
           onClick={() => run(b)}

package/src/designs/PropertyPanel.jsx

@@ -985,6 +985,7 @@ function ButtonsEditor({ value, onChange, functions }) {
             )}
             <ConditionsEditor label="Shows when" value={b.when} onChange={(v) => edit(i, { when: v })} />
             <ConditionsEditor label="Greyed out when" value={b.disabledWhen} onChange={(v) => edit(i, { disabledWhen: v })} />
+            <ConditionsEditor label="Shown as the current choice when" value={b.pressedWhen} onChange={(v) => edit(i, { pressedWhen: v })} />
             <MiniField label="Look">
               <select className="xeplr-factory-prop-input" value={b.variant || 'default'} onChange={(e) => edit(i, { variant: e.target.value === 'default' ? undefined : e.target.value })}>
                 {BUTTON_VARIANTS.map((v) => <option key={v} value={v}>{VARIANT_LABELS[v]}</option>)}

package/src/designs/factory.css

@@ -372,6 +372,10 @@ button.xeplr-factory-activity-item:hover, button.xeplr-factory-activity-item:foc
 .xeplr-factory-button--danger { color: var(--xf-danger); border-color: color-mix(in srgb, var(--xf-danger) 55%, var(--xf-border)); }
 .xeplr-factory-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--xf-danger) 10%, transparent); }
 .xeplr-factory-buttons--design .xeplr-factory-button { cursor: inherit; }
+/* The current choice (pressedWhen): filled, and never faded — greyed out is
+   "unavailable", which the current status is not. */
+.xeplr-factory-button--pressed,
+.xeplr-factory-button--pressed:disabled { color: var(--xf-accent-ink); background: var(--xf-accent); border-color: var(--xf-accent); opacity: 1; }
 .xeplr-factory-buttons-note {
   display: inline-flex; align-items: center; gap: 6px; font-size: .9em; padding: 4px 6px 4px 10px; border-radius: 6px;
   color: var(--xf-good); background: color-mix(in srgb, var(--xf-good) 10%, transparent);

package/src/model.js

@@ -17,7 +17,7 @@ export { SCREEN_EVENTS, SCREEN_EVENT_KEYS, DECIDE_EVENT, FUNCTION_NAME, screenFu
 // Buttons and lists whose rows a function works out — names and values only.
 export {
   BUTTON_EVENT, LIST_ROWS_EVENT, ROW_DETAILS_EVENT, BUTTON_VARIANTS, COLUMN_DISPLAYS, BADGE_TONES, NOTE_INPUT, CONDITION_OPERATORS,
-  conditionMet, buttonShown, buttonDisabled, screenButtons, buttonById, buttonInput, nodeFunctions, paramProblems, optionValues
+  conditionMet, buttonShown, buttonDisabled, buttonPressed, screenButtons, buttonById, buttonInput, nodeFunctions, paramProblems, optionValues
 } from './buttons.js'
 // Which pages are drawn from documents and which are web only (ui/pages.json).
 export { checkInventory, routesIn, pageWarnings, webOnlyMenus } from './pagesInventory.js'

package/src/useFactoryScreen.js

@@ -5,7 +5,7 @@ import { validateDocument } from './validateDocument.js'
 import { initialValues, parseInput, saveState, fieldError, optionValue, recordValues, listSource, resolveBinding } from './values.js'
 import { hookMethod } from './hooks.js'
 import { useUrlSteps, useUrlListQuery } from './useUrlPlaces.js'
-import { buttonShown, buttonDisabled } from './buttons.js'
+import { buttonShown, buttonDisabled, buttonPressed } from './buttons.js'
 
 // A saved screen, running. No JSX — designs/ScreenSample.jsx draws it.
 //
@@ -838,7 +838,7 @@ export function useFactoryScreen({
     record: buttonRecord,
     buttons: ((node.props && node.props.buttons) || [])
       .filter((b) => buttonShown(b, buttonRecord))
-      .map((b) => ({ ...b, disabled: buttonDisabled(b, buttonRecord) || recordId === null || recordId === undefined })),
+      .map((b) => ({ ...b, pressed: buttonPressed(b, buttonRecord), disabled: buttonDisabled(b, buttonRecord) || recordId === null || recordId === undefined })),
     pressing,
     note: buttonNote,
     clearNote: () => setButtonNote(null),

package/src/validateDocument.js

@@ -522,7 +522,7 @@ function checkFedColumn(c, p, err) {
   }
 }
 
-const BUTTON_KEYS = ['id', 'label', 'action', 'params', 'ask', 'when', 'disabledWhen', 'variant']
+const BUTTON_KEYS = ['id', 'label', 'action', 'params', 'ask', 'when', 'disabledWhen', 'pressedWhen', 'variant']
 const ASK_KEYS = ['title', 'message', 'note']
 
 /**
@@ -559,7 +559,7 @@ function checkButtons(props, at, err, ids) {
       }
     }
     if (b.variant !== undefined && !BUTTON_VARIANTS.includes(b.variant)) err(`${p}.variant`, `must be one of: ${BUTTON_VARIANTS.join(', ')}`)
-    ;['when', 'disabledWhen'].forEach((k) => { if (b[k] !== undefined) checkRules(b[k], `${p}.${k}`, err) })
+    ;['when', 'disabledWhen', 'pressedWhen'].forEach((k) => { if (b[k] !== undefined) checkRules(b[k], `${p}.${k}`, err) })
   })
 }