Skip to content

feat: add column span support and FormRelayGrid component#7

Merged
RobertBoes merged 3 commits intomainfrom
feature/column-span-grid
Apr 2, 2026
Merged

feat: add column span support and FormRelayGrid component#7
RobertBoes merged 3 commits intomainfrom
feature/column-span-grid

Conversation

@RobertBoes
Copy link
Copy Markdown
Contributor

Summary

  • Adds columns to FormSchema and columnSpan to FormField in @formrelay/core for grid-based form layouts
  • New <FormRelayGrid> component in @formrelay/vue and @formrelay/nuxt that handles CSS grid rendering automatically via a #field scoped slot
  • Depends on API changes in FormRelay/formrelay#223

Changes

@formrelay/core

  • FormSchema gains columns: number (grid column count from API)
  • FormField gains columnSpan: number (field width in grid columns)
  • Snake-to-camel transformation for column_spancolumnSpan

@formrelay/vue

  • useFormRelay exposes columns computed property (defaults to 2)
  • FormRelay component passes columns as a slot prop
  • New <FormRelayGrid> component with #field scoped slot, columns/fields props, and optional tag prop

@formrelay/nuxt

  • FormRelayGrid registered as auto-imported component

Usage

<FormRelay form-id="abc" public-key="pk_test" v-slot="{ columns, fields, values }">
  <FormRelayGrid :columns="columns" :fields="fields">
    <template #field="{ field }">
      <input :name="field.name" v-model="values[field.name]" />
    </template>
  </FormRelayGrid>
</FormRelay>

Test plan

  • Core: all 74 tests pass (including updated schema transformation tests)
  • Vue: all 40 tests pass (including 6 new FormRelayGrid tests)
  • Verify integration with API once FormRelay/formrelay#223 is merged

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.
@RobertBoes RobertBoes merged commit 4c2637b into main Apr 2, 2026
1 check failed
@RobertBoes RobertBoes deleted the feature/column-span-grid branch April 2, 2026 15:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant