diff --git a/crates/story/src/form_story.rs b/crates/story/src/form_story.rs index aa498034..fb602dde 100644 --- a/crates/story/src/form_story.rs +++ b/crates/story/src/form_story.rs @@ -28,7 +28,7 @@ pub struct FormStory { date: Entity, layout: Axis, size: Size, - column: u16, + columns: usize, } impl super::Story for FormStory { @@ -93,7 +93,7 @@ impl FormStory { subscribe_email: false, layout: Axis::Vertical, size: Size::default(), - column: 1, + columns: 1, } } } @@ -106,7 +106,7 @@ impl Focusable for FormStory { impl Render for FormStory { fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement { - let is_multi_column = self.column > 1; + let is_multi_column = self.columns > 1; let is_horizontal = self.layout.is_horizontal(); v_flex() @@ -138,13 +138,13 @@ impl Render for FormStory { ) .child( Switch::new("column") - .checked(self.column > 1) - .label("Multi Column") + .checked(self.columns > 1) + .label("Multi Columns") .on_click(cx.listener(|this, checked: &bool, _, cx| { if *checked { - this.column = 2; + this.columns = 2; } else { - this.column = 1; + this.columns = 1; } cx.notify(); })), @@ -186,7 +186,7 @@ impl Render for FormStory { v_form() .layout(self.layout) .with_size(self.size) - .column(self.column) + .columns(self.columns) .label_width(px(if is_multi_column { 100. } else { 140. })) .child( form_field().label_fn(|_, _| "Name").child( diff --git a/crates/ui/src/drawer.rs b/crates/ui/src/drawer.rs index 4a03c16f..0b3ad184 100644 --- a/crates/ui/src/drawer.rs +++ b/crates/ui/src/drawer.rs @@ -22,6 +22,7 @@ pub(crate) fn init(cx: &mut App) { cx.bind_keys([KeyBinding::new("escape", Cancel, Some(CONTEXT))]) } +/// A drawer component that slides in from the side of the window. #[derive(IntoElement)] pub struct Drawer { pub(crate) focus_handle: FocusHandle, @@ -38,6 +39,7 @@ pub struct Drawer { } impl Drawer { + /// Creates a new drawer. pub fn new(_: &mut Window, cx: &mut App) -> Self { Self { focus_handle: cx.focus_handle(), diff --git a/crates/ui/src/form.rs b/crates/ui/src/form.rs index 003e3ead..e367eb6f 100644 --- a/crates/ui/src/form.rs +++ b/crates/ui/src/form.rs @@ -23,6 +23,7 @@ pub fn form_field() -> FormField { FormField::new() } +/// A form element that contains multiple form fields. #[derive(IntoElement)] pub struct Form { fields: Vec, @@ -37,7 +38,7 @@ struct FieldProps { layout: Axis, /// Field gap gap: Option, - column: u16, + columns: usize, } impl Default for FieldProps { @@ -48,7 +49,7 @@ impl Default for FieldProps { layout: Axis::Vertical, size: Size::default(), gap: None, - column: 1, + columns: 1, } } } @@ -110,8 +111,8 @@ impl Form { /// Set the column count for the form. /// /// Default is 1. - pub fn column(mut self, column: u16) -> Self { - self.props.column = column; + pub fn columns(mut self, columns: usize) -> Self { + self.props.columns = columns; self } } @@ -467,7 +468,7 @@ impl RenderOnce for Form { .gap_x(gap * 3.) .gap_y(gap) .grid() - .grid_cols(props.column) + .grid_cols(props.columns as u16) .children( self.fields .into_iter() diff --git a/docs/docs/components/form.md b/docs/docs/components/form.md index c8f81969..93edc78f 100644 --- a/docs/docs/components/form.md +++ b/docs/docs/components/form.md @@ -53,7 +53,7 @@ h_form() ```rust v_form() - .column(2) // Two-column layout + .columns(2) // Two-column layout .child( form_field() .label("First Name") @@ -293,7 +293,7 @@ v_form() ```rust v_form() - .column(3) // Three-column grid + .columns(3) // Three-column grid .child(form_field().label("First").child(input1)) .child(form_field().label("Second").child(input2)) .child(form_field().label("Third").child(input3)) @@ -309,7 +309,7 @@ v_form() ```rust v_form() - .column(4) + .columns(4) .child(form_field().label("A").child(input_a)) .child(form_field().label("B").child(input_b)) .child( @@ -325,7 +325,7 @@ v_form() ```rust 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("Email").child(email_input)) .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 ### User Registration Form