feat: add column span support and FormRelayGrid component#7
Merged
RobertBoes merged 3 commits intomainfrom Apr 2, 2026
Merged
Conversation
Add `columns` to FormSchema and `columnSpan` to FormField for grid-based form layouts. New `<FormRelayGrid>` component in vue/nuxt packages handles CSS grid rendering automatically via a `#field` scoped slot.
Guard columns computed against falsy values (0), add prop validator for columns >= 1, and clamp columnSpan to [1, columns] to prevent invalid CSS grid values. Add edge case tests.
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
columnstoFormSchemaandcolumnSpantoFormFieldin@formrelay/corefor grid-based form layouts<FormRelayGrid>component in@formrelay/vueand@formrelay/nuxtthat handles CSS grid rendering automatically via a#fieldscoped slotChanges
@formrelay/core
FormSchemagainscolumns: number(grid column count from API)FormFieldgainscolumnSpan: number(field width in grid columns)column_span→columnSpan@formrelay/vue
useFormRelayexposescolumnscomputed property (defaults to2)FormRelaycomponent passescolumnsas a slot prop<FormRelayGrid>component with#fieldscoped slot,columns/fieldsprops, and optionaltagprop@formrelay/nuxt
FormRelayGridregistered as auto-imported componentUsage
Test plan