feat: row and column attributes, and panels.<panel>.add to hide add buttons - #522
Merged
Merged
Conversation
Rows and columns need a panel that isn't backed by their data (row Settings) and an Attributes panel before any attribute exists. A row's or column's className list never becomes a panel. A component whose panels are all disabled no longer throws while building its (empty) Panels. Refs #112
The row edit window now uses the shared Panels: a Settings tab with the existing input group, fieldset and column layout controls, and an Attributes tab that edits rows.<id>.attrs with the add-attribute dialog. id, tag and data-clone-of are reserved. Re-adding an attribute on a non-field component now replaces its item instead of duplicating it. Refs #112
Columns get an edit button that opens an Attributes panel for columns.<id>.attrs. id and tag are reserved. columns.all.actionButtons.disabled: ['edit'] restores the old buttons. Refs #112
attrs.class now joins the class list instead of being lost, a column's attrs.style is kept with its width last, and attrs.id / attrs.tag no longer override the element Formeo addresses. Pins: row and column attrs validate in the formData schema, reach the row from a control set, and don't break row conditions or input-group clones. Refs #112
Works for attrs, options, conditions and config on fields, rows, columns and stages, scoped per all, control id and component id. Existing items stay editable and removable; locked and disabled rules are unchanged. Clear All on conditions stays. Refs #117
The zero-panel edit window removed the first descendant's edit toggle when the component's own was disabled, and updateEditPanels could swap a nested component's panel nav. Query only the component's direct actions and edit window, and guard against having no buttons. Refs #112
Contributor
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Class/style handling, panel typings, and renderer documentation contain unresolved contract inconsistencies.
Review effort: Balanced
Findings: 2
Open (4)
What changed in this PR
Adds editable row/column attributes and configurable panel add-button visibility.
Changes:
- Adds row Settings/Attributes tabs and column attribute editing.
- Renders layout attributes while preserving reserved renderer properties.
- Adds scoped
panels.<panel>.addconfiguration, typings, documentation, and tests.
| File | Description |
|---|---|
tests/row-column-attributes.spec.js |
Adds end-to-end coverage. |
src/types/formeo.test-d.ts |
Tests new public types. |
src/types/formeo.d.ts |
Extends attributes and panel configuration types. |
src/lib/js/renderer/layout-attrs.test.js |
Tests layout attribute rendering. |
src/lib/js/renderer/index.js |
Processes row and column attributes. |
src/lib/js/formdata-schema.test.mjs |
Validates layout attributes. |
src/lib/js/components/rows/row.test.js |
Tests row panels and attributes. |
src/lib/js/components/rows/row.js |
Introduces tabbed row editing. |
src/lib/js/components/rows/index.js |
Configures row panels and reservations. |
src/lib/js/components/edit-panel/edit-panel.test.js |
Tests hidden add buttons. |
src/lib/js/components/edit-panel/edit-panel.js |
Applies panel add-button settings. |
src/lib/js/components/control-sets.test.js |
Tests control-set row attributes. |
src/lib/js/components/component.js |
Supports custom/default panels and scoped actions. |
src/lib/js/components/component-panels.test.js |
Tests shared panel behavior. |
src/lib/js/components/columns/index.js |
Enables column editing and panels. |
src/lib/js/components/columns/column.test.js |
Tests column attribute editing. |
src/lib/js/components/columns/column.js |
Adds the column edit window. |
docs/renderer/renderer.md |
Documents rendered layout attributes. |
docs/options/config/README.md |
Documents panel and attribute configuration. |
docs/options/actions/README.md |
Clarifies add-action behavior. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+49
to
+52
| const { id: _id, tag: _tag, class: classAttr, ...rest } = attrs ?? {} | ||
| if (classAttr) { | ||
| rest.className = [rest.className, classAttr].flat().filter(Boolean) | ||
| } |
Comment on lines
+451
to
+452
| // the column's own style first, so its width always wins (#112) | ||
| style: style ? `${String(style).trim().replace(/;$/, '')}; ${width}` : width, |
Comment on lines
+1054
to
+1055
| A row's `attrs` and a column's `attrs` render on the `.formeo-row` / `.formeo-column` element, the one with id | ||
| `f-<id>` that conditions show and hide. The fieldset or wrapper around a row gets none of them. |
|
|
||
| ```javascript | ||
| rows: { | ||
| 'row-1': { id: 'row-1', config: {}, children: ['col-1'], attrs: { 'data-section': 'contact', className: 'contact' } }, |
…dth always win Formeo's own class list, attrs.className and attrs.class now become one array, so dom.create can no longer overwrite a string attrs.className with the top-level one. Function class values are called instead of rendered as source text. Width declarations in a column's attrs.style, !important included, are dropped so config.width always applies. Docs now say conditions hide the parent wrapper, not the f-<id> element, and the row example includes the class it claims to render. Refs #112
Without an edit button nothing opens the panels, so each column was holding an unused panel tree and ResizeObserver. Refs #112
Collaborator
Author
|
🎉 This PR is included in version 5.15.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
rows.<id>.attrs/columns.<id>.attrsand render on the.formeo-row/.formeo-columnelement that conditions target.idandtagare reserved on rows and columns (plusdata-clone-ofon rows). The renderer now foldsattrs.classinto the class list, keeps a column'sattrs.stylewith its width last, and ignoresattrs.id/attrs.tag.panels.<panel>.add: falsehides the add button forattrs,options,conditionsandconfig, scoped perall, control id and component id.Component#editWindownow looks up the edit button inside the component's own action bar. Without this, disabling a row's edit button and all its panels removed a child column's edit button (same for columns and their fields).Visible changes
rows.all.panels.disabled: ['settings']hides the Settings tab.columns.all.actionButtons.disabled: ['edit']removes it.Test plan
npm test(819 passing),npm run test:types,npm run linttests/row-column-attributes.spec.jsplus the full suite (189 passed, 3 skipped)dist/formData_schema.jsonunchanged afternpm run build:libRelated bugs found along the way, not fixed here: #520, #521.
Fixes #112
Fixes #117
Please squash-merge.