dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

form: Renamed column to columns. (#1522)

Browse source 
## Break Change

- Renamed `column` to `columns` and receive `usize` type.
This commit is contained in:
Jason Lee 2025-11-05 15:32:15 +08:00 committed by GitHub
parent aea8223637
commit 469b53178b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 20 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
crates/story/src/form_story.rs
View file

@ -28,7 +28,7 @@ pub struct FormStory {
date: Entity<DatePickerState>, date: Entity<DatePickerState>,
layout: Axis, layout: Axis,
size: Size, size: Size,
column: u16, columns: usize,
} }
impl super::Story for FormStory { impl super::Story for FormStory {
@ -93,7 +93,7 @@ impl FormStory {
subscribe_email: false, subscribe_email: false,
layout: Axis::Vertical, layout: Axis::Vertical,
size: Size::default(), size: Size::default(),
column: 1, columns: 1,
} }
} }
} }
@ -106,7 +106,7 @@ impl Focusable for FormStory {
impl Render for FormStory { impl Render for FormStory {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement { fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let is_multi_column = self.column > 1; let is_multi_column = self.columns > 1;
let is_horizontal = self.layout.is_horizontal(); let is_horizontal = self.layout.is_horizontal();
v_flex() v_flex()
@ -138,13 +138,13 @@ impl Render for FormStory {
) )
.child( .child(
Switch::new("column") Switch::new("column")
.checked(self.column > 1) .checked(self.columns > 1)
.label("Multi Column") .label("Multi Columns")
.on_click(cx.listener(|this, checked: &bool, _, cx| { .on_click(cx.listener(|this, checked: &bool, _, cx| {
if *checked { if *checked {
this.column = 2; this.columns = 2;
} else { } else {
this.column = 1; this.columns = 1;
} }
cx.notify(); cx.notify();
})), })),
@ -186,7 +186,7 @@ impl Render for FormStory {
v_form() v_form()
.layout(self.layout) .layout(self.layout)
.with_size(self.size) .with_size(self.size)
.column(self.column) .columns(self.columns)
.label_width(px(if is_multi_column { 100. } else { 140. })) .label_width(px(if is_multi_column { 100. } else { 140. }))
.child( .child(
form_field().label_fn(|_, _| "Name").child( form_field().label_fn(|_, _| "Name").child(

2
crates/ui/src/drawer.rs
View file

@ -22,6 +22,7 @@ pub(crate) fn init(cx: &mut App) {
cx.bind_keys([KeyBinding::new("escape", Cancel, Some(CONTEXT))]) cx.bind_keys([KeyBinding::new("escape", Cancel, Some(CONTEXT))])
} }
/// A drawer component that slides in from the side of the window.
#[derive(IntoElement)] #[derive(IntoElement)]
pub struct Drawer { pub struct Drawer {
pub(crate) focus_handle: FocusHandle, pub(crate) focus_handle: FocusHandle,
@ -38,6 +39,7 @@ pub struct Drawer {
} }
impl Drawer { impl Drawer {
/// Creates a new drawer.
pub fn new(_: &mut Window, cx: &mut App) -> Self { pub fn new(_: &mut Window, cx: &mut App) -> Self {
Self { Self {
focus_handle: cx.focus_handle(), focus_handle: cx.focus_handle(),

11
crates/ui/src/form.rs
View file

@ -23,6 +23,7 @@ pub fn form_field() -> FormField {
FormField::new() FormField::new()
} }
/// A form element that contains multiple form fields.
#[derive(IntoElement)] #[derive(IntoElement)]
pub struct Form { pub struct Form {
fields: Vec<FormField>, fields: Vec<FormField>,
@ -37,7 +38,7 @@ struct FieldProps {
layout: Axis, layout: Axis,
/// Field gap /// Field gap
gap: Option<Pixels>, gap: Option<Pixels>,
column: u16, columns: usize,
} }
impl Default for FieldProps { impl Default for FieldProps {
@ -48,7 +49,7 @@ impl Default for FieldProps {
layout: Axis::Vertical, layout: Axis::Vertical,
size: Size::default(), size: Size::default(),
gap: None, gap: None,
column: 1, columns: 1,
} }
} }
} }
@ -110,8 +111,8 @@ impl Form {
/// Set the column count for the form. /// Set the column count for the form.
/// ///
/// Default is 1. /// Default is 1.
pub fn column(mut self, column: u16) -> Self { pub fn columns(mut self, columns: usize) -> Self {
self.props.column = column; self.props.columns = columns;
self self
} }
} }
@ -467,7 +468,7 @@ impl RenderOnce for Form {
.gap_x(gap * 3.) .gap_x(gap * 3.)
.gap_y(gap) .gap_y(gap)
.grid() .grid()
.grid_cols(props.column) .grid_cols(props.columns as u16)
.children( .children(
self.fields self.fields
.into_iter() .into_iter()

45
docs/docs/components/form.md
View file

@ -53,7 +53,7 @@ h_form()
```rust ```rust
v_form() v_form()
.column(2) // Two-column layout .columns(2) // Two-column layout
.child( .child(
form_field() form_field()
.label("First Name") .label("First Name")
@ -293,7 +293,7 @@ v_form()
```rust ```rust
v_form() v_form()
.column(3) // Three-column grid .columns(3) // Three-column grid
.child(form_field().label("First").child(input1)) .child(form_field().label("First").child(input1))
.child(form_field().label("Second").child(input2)) .child(form_field().label("Second").child(input2))
.child(form_field().label("Third").child(input3)) .child(form_field().label("Third").child(input3))
@ -309,7 +309,7 @@ v_form()
```rust ```rust
v_form() v_form()
.column(4) .columns(4)
.child(form_field().label("A").child(input_a)) .child(form_field().label("A").child(input_a))
.child(form_field().label("B").child(input_b)) .child(form_field().label("B").child(input_b))
.child( .child(
@ -325,7 +325,7 @@ v_form()
```rust ```rust
v_form() v_form()
.column(if is_mobile { 1 } else { 2 }) .columns(if is_mobile { 1 } else { 2 })
.child(form_field().label("Name").child(name_input)) .child(form_field().label("Name").child(name_input))
.child(form_field().label("Email").child(email_input)) .child(form_field().label("Email").child(email_input))
.child( .child(
@ -336,43 +336,6 @@ v_form()
) )
``` ```
## API Reference
### Form
| Method | Description |
| ----------------------- | ------------------------------------- |
| `vertical()` | Create vertical layout form |
| `horizontal()` | Create horizontal layout form |
| `layout(Axis)` | Set form layout direction |
| `label_width(Pixels)` | Set label width (horizontal layout) |
| `label_text_size(Rems)` | Set label text size |
| `gap(Pixels)` | Set gap between fields |
| `column(u16)` | Set number of columns for grid layout |
| `child(FormField)` | Add form field |
| `children(iter)` | Add multiple form fields |
| `large()` | Set large size |
| `small()` | Set small size |
### FormField
| Method | Description |
| --------------------- | -------------------------------- |
| `label(str)` | Set field label |
| `label_fn(fn)` | Set dynamic label using function |
| `description(str)` | Set field description |
| `description_fn(fn)` | Set dynamic description |
| `required(bool)` | Mark field as required |
| `visible(bool)` | Set field visibility |
| `no_label_indent()` | Disable label indentation |
| `items_start()` | Align items to start |
| `items_center()` | Align items to center |
| `items_end()` | Align items to end |
| `col_span(u16)` | Set column span |
| `col_start(i16)` | Set starting column |
| `col_end(i16)` | Set ending column |
| `track_focus(handle)` | Track focus for field |
## Examples ## Examples
### User Registration Form ### User Registration Form