>` | `Default::default()` | Card title. |
-| children | `Children` | | Card's content. |
-
-### Card Slots
-
-| Name | Default | Description |
-| --------------- | ------- | --------------------- |
-| CardHeader | `None` | Header content. |
-| CardHeaderExtra | `None` | Header extra content. |
-| CardFooter | `None` | Footer content. |
diff --git a/demo_markdown/docs/checkbox/mod.md b/demo_markdown/docs/checkbox/mod.md
deleted file mode 100644
index d67d59a..0000000
--- a/demo_markdown/docs/checkbox/mod.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Checkbox
-
-```rust demo
-let checked = RwSignal::new(false);
-
-view! {
-
-
-}
-```
-
-### Group
-
-```rust demo
-use std::collections::HashSet;
-
-let value = RwSignal::new(HashSet::new());
-
-view! {
-
-
-
-
-
- "value: " {move || format!("{:?}", value.get())}
-}
-```
-
-### Checkbox Props
-
-| Name | Type | Default | Description |
-| -------- | ----------------------------------- | -------------------- | ------------------------------------------- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the checkbox element. |
-| value | `Model` | `false` | Whether the checkbox is being checked. |
-| children | `Children` | | Checkbox's content. |
-
-### CheckboxGroup Props
-
-| Name | Type | Default | Description |
-| -------- | ------------------------ | -------------------- | ------------------------------------- |
-| value | `Model>` | `Default::default()` | Sets the value of the checkbox group. |
-| children | `Children` | | CheckboxGroup's content. |
-
-### CheckboxItem Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the checkbox element. |
-| key | `String` | | The key of the checkbox to be used in a checkbox group. |
-| label | `Option` | `None` | Checkbox's label. |
diff --git a/demo_markdown/docs/date_picker/mod.md b/demo_markdown/docs/date_picker/mod.md
deleted file mode 100644
index a537d93..0000000
--- a/demo_markdown/docs/date_picker/mod.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Date Picker
-
-```rust demo
-use chrono::prelude::*;
-let value = RwSignal::new(Local::now().date_naive());
-let option_value = RwSignal::new(Some(Local::now().date_naive()));
-
-view! {
-
-
-
-
-}
-```
-
-### DatePicker Props
-
-| Name | Type | Default | Desciption |
-| --- | --- | --- | --- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the date picker element. |
-| value | `Model>` | `Default::default()` | Set the date picker value |
-| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
diff --git a/demo_markdown/docs/dialog/mod.md b/demo_markdown/docs/dialog/mod.md
deleted file mode 100644
index 5f340f5..0000000
--- a/demo_markdown/docs/dialog/mod.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Dialog
-
-```rust demo
-let open = RwSignal::new(false);
-
-view! {
-
-
-}
-```
-
-### Modal Props
-
-| Name | Type | Default | Description |
-| -------------- | --------------------- | -------------------- | ------------------------------------------- |
-| show | `Model` | | Whether to show modal. |
-| title | `MaybeSignal` | `Default::default()` | Modal title. |
-| width | `MaybeSignal` | `600px` | Modal width. |
-| z_index | `MaybeSignal` | `2000` | z-index of the modal. |
-| mask_closeable | `MaybeSignal` | `true` | Whether to emit hide event when click mask. |
-| close_on_esc | `bool` | `true` | Whether to close modal on Esc is pressed. |
-| children | `Children` | | Modal's content. |
-
-### Modal Slots
-
-| Name | Default | Description |
-| ----------- | ------- | --------------- |
-| ModalFooter | `None` | Footer content. |
diff --git a/demo_markdown/docs/icon/mod.md b/demo_markdown/docs/icon/mod.md
deleted file mode 100644
index 78c400a..0000000
--- a/demo_markdown/docs/icon/mod.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Icon
-
-```rust demo
-view! {
-
-
-
-
-}
-```
-
-### Icon Props
-
-| Name | Type | Default | Desciption |
-| ------ | ----------------------------- | -------------------- | ----------------------- |
-| class | `Option>` | `Default::default()` | HTML class attribute. |
-| style | `Option>` | `Default::default()` | HTML style attribute. |
-| icon | `MaybeSignal` | | The icon to show. |
-| width | `Option>` | `1em` | The width of the icon. |
-| height | `Option>` | `1em` | The height of the icon. |
diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs
index 0c64ad5..25d1550 100644
--- a/demo_markdown/src/lib.rs
+++ b/demo_markdown/src/lib.rs
@@ -26,24 +26,24 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"AccordionMdPage" => "../../thaw/src/accordion/docs/mod.md",
// "AlertMdPage" => "../docs/alert/mod.md",
"AnchorMdPage" => "../../thaw/src/anchor/docs/mod.md",
- "AutoCompleteMdPage" => "../docs/auto_complete/mod.md",
- "AvatarMdPage" => "../docs/avatar/mod.md",
- "BackTopMdPage" => "../docs/back_top/mod.md",
- "BadgeMdPage" => "../docs/badge/mod.md",
- "BreadcrumbMdPage" => "../docs/breadcrumb/mod.md",
- "ButtonMdPage" => "../docs/button/mod.md",
- "CalendarMdPage" => "../docs/calendar/mod.md",
- "CardMdPage" => "../docs/card/mod.md",
- "CheckboxMdPage" => "../docs/checkbox/mod.md",
- "ColorPickerMdPage" => "../docs/color_picker/mod.md",
+ "AutoCompleteMdPage" => "../../thaw/src/auto_complete/docs/mod.md",
+ "AvatarMdPage" => "../../thaw/src/avatar/docs/mod.md",
+ "BackTopMdPage" => "../../thaw/src/back_top/docs/mod.md",
+ "BadgeMdPage" => "../../thaw/src/badge/docs/mod.md",
+ "BreadcrumbMdPage" => "../../thaw/src/breadcrumb/docs/mod.md",
+ "ButtonMdPage" => "../../thaw/src/button/docs/mod.md",
+ "CalendarMdPage" => "../../thaw/src/calendar/docs/mod.md",
+ "CardMdPage" => "../../thaw/src/card/docs/mod.md",
+ "CheckboxMdPage" => "../../thaw/src/checkbox/docs/mod.md",
+ "ColorPickerMdPage" => "../../thaw/src/color_picker/docs/mod.md",
"ComboboxMdPage" => "../../thaw/src/combobox/docs/mod.md",
- "ConfigProviderMdPage" => "../docs/config_provider/mod.md",
- "DatePickerMdPage" => "../docs/date_picker/mod.md",
- "DialogMdPage" => "../docs/dialog/mod.md",
- "DividerMdPage" => "../docs/divider/mod.md",
- "DrawerMdPage" => "../docs/drawer/mod.md",
- "GridMdPage" => "../docs/grid/mod.md",
- "IconMdPage" => "../docs/icon/mod.md",
+ "ConfigProviderMdPage" => "../../thaw/src/config_provider/docs/mod.md",
+ "DatePickerMdPage" => "../../thaw/src/date_picker/docs/mod.md",
+ "DialogMdPage" => "../../thaw/src/dialog/docs/mod.md",
+ "DividerMdPage" => "../../thaw/src/divider/docs/mod.md",
+ "DrawerMdPage" => "../../thaw/src/drawer/docs/mod.md",
+ "GridMdPage" => "../../thaw/src/grid/docs/mod.md",
+ "IconMdPage" => "../../thaw/src/icon/docs/mod.md",
"ImageMdPage" => "../docs/image/mod.md",
"InputMdPage" => "../docs/input/mod.md",
"LayoutMdPage" => "../docs/layout/mod.md",
diff --git a/thaw/src/accordion/accordion_item.rs b/thaw/src/accordion/accordion_item.rs
index d48e50c..2e48534 100644
--- a/thaw/src/accordion/accordion_item.rs
+++ b/thaw/src/accordion/accordion_item.rs
@@ -95,7 +95,7 @@ pub struct AccordionHeader {
children: Children,
}
-#[slot]
-pub struct AccordionPanel {
- children: Children,
-}
+// #[slot]
+// pub struct AccordionPanel {
+// children: Children,
+// }
diff --git a/thaw/src/accordion/docs/mod.md b/thaw/src/accordion/docs/mod.md
index 9def26c..9369925 100644
--- a/thaw/src/accordion/docs/mod.md
+++ b/thaw/src/accordion/docs/mod.md
@@ -63,4 +63,29 @@ view! {
}
-```
\ No newline at end of file
+```
+
+### Accordion Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeProp` | `Default::default()` | |
+| open_items | `Model>` | `Default::default()` | Controls the state of the panel. |
+| multiple | `bool` | `Default::default()` | Indicates if Accordion support multiple Panels opened at the same time. |
+| collapsible | `bool` | `Default::default()` | Indicates if Accordion support multiple Panels closed at the same time. |
+| children | `Children` | | |
+
+### AccordionItem Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeProp` | `Default::default()` | |
+| value | `MaybeSignal` | | Required value that identifies this item inside an Accordion component. |
+| accordion_header | slot `AccordionHeader` | | |
+| children | `Children` | | |
+
+### AccordionHeader Props
+
+| Name | Type | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` | | |
diff --git a/thaw/src/anchor/docs/mod.md b/thaw/src/anchor/docs/mod.md
index 91ec112..96cd046 100644
--- a/thaw/src/anchor/docs/mod.md
+++ b/thaw/src/anchor/docs/mod.md
@@ -29,15 +29,15 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
-| class | `OptionalProp>` | `Default::default()` | Additional classes for the anchor element. |
+| class | `MaybeProp` | `Default::default()` | |
| offset_target | `Option` | `None` | The element or selector used to calc offset of link elements. If you are not scrolling the entire document but only a part of it, you may need to set this. |
-| children | `Children` | | Anchor's children. |
+| children | `Children` | | |
### AnchorLink Props
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| class | `OptionalProp>` | `Default::default()` | Additional classes for the anchor link element. |
-| title | `MaybeSignal` | | The content of link. |
-| href | `String` | | The target of link. |
-| children | `Option` | `None` | AnchorLink's children. |
+| Name | Type | Default | Description |
+| -------- | --------------------- | -------------------- | -------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| title | `MaybeSignal` | | The content of link. |
+| href | `String` | | The target of link. |
+| children | `Option` | `None` | |
diff --git a/thaw/src/anchor/mod.rs b/thaw/src/anchor/mod.rs
index cd3a321..43824c0 100644
--- a/thaw/src/anchor/mod.rs
+++ b/thaw/src/anchor/mod.rs
@@ -10,7 +10,8 @@ use web_sys::{DomRect, Element};
pub fn Anchor(
#[prop(optional, into)] class: MaybeProp,
/// The element or selector used to calc offset of link elements.
- /// If you are not scrolling the entire document but only a part of it, you may need to set this.
+ /// If you are not scrolling the entire document but only a part of it,
+ /// you may need to set this.
#[prop(into, optional)]
offset_target: Option,
children: Children,
diff --git a/thaw/src/auto_complete/auto_complete_option.rs b/thaw/src/auto_complete/auto_complete_option.rs
index 9da00d2..f0f8d8d 100644
--- a/thaw/src/auto_complete/auto_complete_option.rs
+++ b/thaw/src/auto_complete/auto_complete_option.rs
@@ -6,6 +6,7 @@ use thaw_utils::class_list;
#[component]
pub fn AutoCompleteOption(
#[prop(optional, into)] class: MaybeProp,
+ /// Option ID.
value: String,
children: Children,
) -> impl IntoView {
diff --git a/demo_markdown/docs/auto_complete/mod.md b/thaw/src/auto_complete/docs/mod.md
similarity index 61%
rename from demo_markdown/docs/auto_complete/mod.md
rename to thaw/src/auto_complete/docs/mod.md
index e5c925f..3fe1929 100644
--- a/demo_markdown/docs/auto_complete/mod.md
+++ b/thaw/src/auto_complete/docs/mod.md
@@ -59,33 +59,38 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
-| class | `OptionalProp>` | `Default::default()` | Additional classes for the autocomplete element. |
+| class | `MaybeProp` | `Default::default()` | |
| value | `Model` | `Default::default()` | Input of autocomplete. |
-| placeholder | `OptionalProp>` | `Default::default()` | Autocomplete's placeholder. |
-| options | `MaybeSignal>` | `Default::default()` | Options to autocomplete from. |
+| placeholder | `MaybeProp` | `Default::default()` | Autocomplete's placeholder. |
| disabled | `MaybeSignal` | `false` | Whether the input is disabled. |
-| allow_free_input | `bool` | `false` | Whether free text input is allowed. |
-| invalid | `MaybeSignal` | `false` | Whether the input is invalid. |
| clear_after_select | `MaybeSignal` | `false` | Whether to clear after selection. |
| blur_after_select | `MaybeSignal` | `false` | Whether to blur after selection. |
-| on_select | `Option>` | `None` | On select callback function. |
-| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
+| auto_complete_prefix | slot `Option` | `None` | |
+| auto_complete_suffix | slot `Option` | `None` | |
+| comp_ref | ref `ComponentRef` | `Default::default()` | |
+| children | `Option` | `None` | |
-### AutoCompleteOption Properties
+### AutoCompleteOption Props
-| Name | Type | Description |
-| ----- | -------- | ------------------- |
-| value | `String` | Option ID. |
-| label | `String` | Option label value. |
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| value | `String` | | Option ID. |
+| children | `Children` | | |
-### AutoCompleteOption Slots
+### AutoCompletePrefix Props
-| Name | Default | Description |
-| ------------------ | ------- | --------------------------- |
-| AutoCompletePrefix | `None` | AutoCompletePrefix content. |
-| AutoCompleteSuffix | `None` | AutoCompleteSuffix content. |
+| Name | Type | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` | | |
-### AutoComplete Ref
+### AutoCompleteSuffix Props
+
+| Name | Type | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` | | |
+
+### AutoCompleteRef Props
| Name | Type | Description |
| ----- | ----------- | ------------------------ |
diff --git a/thaw/src/auto_complete/mod.rs b/thaw/src/auto_complete/mod.rs
index a44906b..7b5ab3d 100644
--- a/thaw/src/auto_complete/mod.rs
+++ b/thaw/src/auto_complete/mod.rs
@@ -24,13 +24,19 @@ pub struct AutoCompleteSuffix {
#[component]
pub fn AutoComplete(
- #[prop(optional, into)] value: Model,
- #[prop(optional, into)] placeholder: MaybeProp,
- #[prop(optional, into)] clear_after_select: MaybeSignal,
- #[prop(optional, into)] blur_after_select: MaybeSignal,
- #[prop(optional, into)] on_select: Option>,
- #[prop(optional, into)] disabled: MaybeSignal,
#[prop(optional, into)] class: MaybeProp,
+ /// Input of autocomplete.
+ #[prop(optional, into)] value: Model,
+ /// Autocomplete's placeholder.
+ #[prop(optional, into)] placeholder: MaybeProp,
+ // Whether to clear after selection.
+ #[prop(optional, into)] clear_after_select: MaybeSignal,
+ /// Whether to blur after selection.
+ #[prop(optional, into)] blur_after_select: MaybeSignal,
+ // On select callback function.
+ #[prop(optional, into)] on_select: Option>,
+ /// Whether the input is disabled.
+ #[prop(optional, into)] disabled: MaybeSignal,
#[prop(optional)] auto_complete_prefix: Option,
#[prop(optional)] auto_complete_suffix: Option,
#[prop(optional)] comp_ref: ComponentRef,
@@ -193,12 +199,14 @@ pub struct AutoCompleteRef {
}
impl AutoCompleteRef {
+ /// Focus the input element.
pub fn focus(&self) {
if let Some(input_ref) = self.input_ref.get_untracked() {
input_ref.focus();
}
}
+ /// Blur the input element.
pub fn blur(&self) {
if let Some(input_ref) = self.input_ref.get_untracked() {
input_ref.blur();
diff --git a/demo_markdown/docs/avatar/mod.md b/thaw/src/avatar/docs/mod.md
similarity index 58%
rename from demo_markdown/docs/avatar/mod.md
rename to thaw/src/avatar/docs/mod.md
index 4ad2e7e..0e70510 100644
--- a/demo_markdown/docs/avatar/mod.md
+++ b/thaw/src/avatar/docs/mod.md
@@ -55,9 +55,11 @@ view! {
### Avatar Props
-| Name | Type | Default | Description |
-| ----- | ----------------------------------- | -------------------- | ----------------------------------------- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the avatar element. |
-| src | `Option>` | `Default::default()` | Avatar's image source. |
-| round | `MaybeSignal` | `false` | Whether to display a rounded avatar. |
-| size | `MaybeSignal` | `30` | Avatar's size. |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeProp` | `Default::default()` | |
+| src | `MaybeProp` | `Default::default()` | The Avatar's image. |
+| name | `MaybeProp` | `Default::default()` | The name of the person or entity represented by this Avatar. |
+| initials | `MaybeProp` | `Default::default()` | Custom initials. |
+| shape | `MaybeSignal` | `Default::default()` | The avatar can have a circular or square shape. |
+| size | `MaybeProp` | `Default::default()` | Size of the avatar in pixels. |
diff --git a/thaw/src/avatar/mod.rs b/thaw/src/avatar/mod.rs
index bff5348..1646deb 100644
--- a/thaw/src/avatar/mod.rs
+++ b/thaw/src/avatar/mod.rs
@@ -1,30 +1,30 @@
-use leptos::prelude::*;
+use leptos::{either::Either, prelude::*};
use thaw_components::OptionComp;
-use thaw_utils::{class_list, mount_style, StoredMaybeSignal};
+use thaw_utils::{class_list, mount_style};
#[component]
pub fn Avatar(
+ #[prop(optional, into)] class: MaybeProp,
/// The Avatar's image.
#[prop(optional, into)]
- src: Option>,
+ src: MaybeProp,
/// The name of the person or entity represented by this Avatar.
#[prop(optional, into)]
- name: Option>,
+ name: MaybeProp,
/// Custom initials.
#[prop(optional, into)]
- initials: Option>,
+ initials: MaybeProp,
/// The avatar can have a circular or square shape.
#[prop(optional, into)]
shape: MaybeSignal,
/// Size of the avatar in pixels.
#[prop(optional, into)]
- size: Option>,
- #[prop(optional, into)] class: MaybeProp,
+ size: MaybeProp,
) -> impl IntoView {
mount_style("avatar", include_str!("./avatar.css"));
let style = move || {
- let size = size?.get();
+ let size = size.get()?;
let mut style = format!("width: {0}px; height: {0}px;", size);
@@ -43,43 +43,70 @@ pub fn Avatar(
Some(style)
};
- let is_show_default_icon = src.is_none() && initials.is_none() && name.is_none();
- let name: Option> = name.map(|n| n.into());
+ let name = StoredValue::new(name);
+ let src = StoredValue::new(src);
+ let initials = StoredValue::new(initials);
+ let is_show_default_icon = Memo::new(move |_| {
+ if name.with_value(|n| n.with(|n| n.is_some())) {
+ false
+ } else if src.with_value(|s| s.with(|s| s.is_some())) {
+ false
+ } else if initials.with_value(|i| i.with(|i| i.is_some())) {
+ false
+ } else {
+ true
+ }
+ });
view! {
{
move || {
- if let Some(initials) = initials.as_ref().map_or_else(|| name.as_ref().map(|n| initials_name(n.get())), |i| Some(i.get())) {
- view! {
+ let mut initials = initials.with_value(|i| i.get());
+ if initials.is_none() {
+ name.with_value(|name| {
+ if let Some(name) = name.get() {
+ initials = Some(initials_name(name));
+ }
+ });
+ }
+ view! {
+
{initials}
- }.into()
- } else {
- None
+
}
}
}
-
- 
-
{
- if is_show_default_icon {
+ move || {
+ let src = src.with_value(|s| s.get());
view! {
-
-
-
- }.into()
- } else {
- None
+
+ 
+
+ }
+ }
+ }
+ {
+ move || {
+ if is_show_default_icon.get() {
+ Either::Left(view! {
+
+
+
+ })
+ } else {
+ Either::Right(())
+ }
}
}
@@ -88,7 +115,11 @@ pub fn Avatar(
// TODO
fn initials_name(name: String) -> String {
- name.split_at(2).0.to_string().to_ascii_uppercase()
+ if name.len() < 2 {
+ name.to_ascii_uppercase()
+ } else {
+ name.split_at(2).0.to_string().to_ascii_uppercase()
+ }
}
#[derive(Default, Clone)]
diff --git a/demo_markdown/docs/back_top/mod.md b/thaw/src/back_top/docs/mod.md
similarity index 77%
rename from demo_markdown/docs/back_top/mod.md
rename to thaw/src/back_top/docs/mod.md
index 3778a9b..e82e374 100644
--- a/demo_markdown/docs/back_top/mod.md
+++ b/thaw/src/back_top/docs/mod.md
@@ -36,11 +36,11 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the back top element. |
+| class | `MaybeProp` | `Default::default()` | |
| right | `MaybeSignal` | `40` | The width of BackTop from the right side of the page. |
| bottom | `MaybeSignal` | `40` | The height of BackTop from the bottom of the page. |
-| bottom | `MaybeSignal` | `180` | BackTop's trigger scroll top. |
-| children | `Option` | `None` | BackTop's content. |
+| visibility_height | `MaybeSignal` | `180` | BackTop's trigger scroll top. |
+| children | `Option` | `None` | |
diff --git a/thaw/src/badge/badge.rs b/thaw/src/badge/badge.rs
index 9e7bb24..ab0383a 100644
--- a/thaw/src/badge/badge.rs
+++ b/thaw/src/badge/badge.rs
@@ -4,7 +4,7 @@ use thaw_utils::{class_list, mount_style};
#[component]
pub fn Badge(
#[prop(optional, into)] class: MaybeProp,
- /// A Badge can be filled, outline, ghost, inverted
+ /// A Badge can be filled, outline, ghost, inverted.
#[prop(optional, into)]
appearance: MaybeSignal,
/// A Badge can be on of several preset sizes.
diff --git a/demo_markdown/docs/badge/mod.md b/thaw/src/badge/docs/mod.md
similarity index 89%
rename from demo_markdown/docs/badge/mod.md
rename to thaw/src/badge/docs/mod.md
index a5a8111..e7d8908 100644
--- a/demo_markdown/docs/badge/mod.md
+++ b/thaw/src/badge/docs/mod.md
@@ -95,9 +95,8 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the badge element. |
-| value | `MaybeSignal` | `0` | Badge's value. |
-| max | `MaybeSignal` | `u32::MAX` | The maximum number of the badge when its value overflows. |
-| variant | `MaybeSignal` | `BadgeVariant::Error` | Badge variant. |
-| dot | `MaybeSignal` | `false` | Show badge as dot. |
-| children | `Children` | | Badge's content. |
+| class | `MaybeProp` | `Default::default()` | |
+| appearance | `MaybeSignal` | `Default::default()` | A Badge can be filled, outline, ghost, inverted. |
+| size | `MaybeSignal` | `Default::default()` | A Badge can be on of several preset sizes. |
+| color | `MaybeSignal` | `Default::default()` | A Badge can be one of preset colors. |
+| children | `Option` | `None` | |
diff --git a/thaw/src/breadcrumb/docs/mod.md b/thaw/src/breadcrumb/docs/mod.md
new file mode 100644
index 0000000..2ea4923
--- /dev/null
+++ b/thaw/src/breadcrumb/docs/mod.md
@@ -0,0 +1,47 @@
+# Breadcrumb
+
+```rust demo
+view! {
+
+
+ "Leptos"
+
+
+
+ "UI"
+
+
+
+ "Thaw"
+
+
+}
+```
+
+### Breadcrumb Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
+
+### BreadcrumbItem Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
+
+### BreadcrumbButton Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------------------------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| current | `MaybeSignal` | `false` | Defines current sate of BreadcrumbButton. |
+| children | `Children` | | |
+
+### BreadcrumbDivider Props
+
+| Name | Type | Default | Description |
+| ----- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
diff --git a/demo_markdown/docs/button/mod.md b/thaw/src/button/docs/mod.md
similarity index 73%
rename from demo_markdown/docs/button/mod.md
rename to thaw/src/button/docs/mod.md
index 23d4fe5..9ac20df 100644
--- a/demo_markdown/docs/button/mod.md
+++ b/thaw/src/button/docs/mod.md
@@ -165,24 +165,21 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
-| class | `OptionalProp>` | `Default::default()` | Additional classes for the button element. |
-| style | `Option>` | `Default::default()` | Button's style. |
-| appearance | `MaybeSignal` | `ButtonAppearance::Primary` | Button's variant. |
-| color | `MaybeSignal` | `ButtonColor::Primary` | Button's color. |
+| class | `MaybeProp` | `Default::default()` | |
+| appearance | `MaybeSignal` | `Default::default()` | A button can have its content and borders styled for greater emphasis or to be subtle. |
+| shape | `MaybeSignal` | `Default::default()` | A button can be rounded, circular, or square. |
+| size | `MaybeSignal` | `ButtonSize::Medium` | A button supports different sizes. |
| block | `MaybeSignal` | `false` | Whether the button is displayed as block. |
-| round | `MaybeSignal` | `false` | Whether the button shows rounded corners. |
-| circle | `MaybeSignal` | `false` | Whether the button is round. |
-| icon | `OptionalMaybeSignal` | `None` | The icon of the button. |
-| loading | `MaybeSignal` | `false` | Whether the button shows the loading status. |
+| icon | `MaybeProp` | `None` | The icon of the button. |
| disabled | `MaybeSignal` | `false` | Whether the button is disabled. |
-| size | `MaybeSignal` | `ButtonSize::Medium` | Button size. |
-| on_click | `Option>` | `None` | Listen for button click events. |
-| children | `Option` | | Button's content. |
+| disabled_focusable | `MaybeSignal` | `false` | When set, allows the button to be focusable even when it has been disabled. |
+| on_click | `Option>` | `None` | Listen for button click events. |
+| children | `Option` | | |
### ButtonGroup props
-| Name | Type | Default | Description |
-| -------- | ----------------------------------- | -------------------- | ----------------------------------------- |
-| class | `OptionalProp>` | `Default::default()` | Additional classes for the group element. |
-| vertical | `bool` | `false` | Directions of buttons in the group. |
-| children | `Children` | | ButtonGroup's content. |
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------------------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| vertical | `bool` | `false` | Directions of buttons in the group. |
+| children | `Children` | | |
diff --git a/thaw/src/button/mod.rs b/thaw/src/button/mod.rs
index 5794505..1690f8c 100644
--- a/thaw/src/button/mod.rs
+++ b/thaw/src/button/mod.rs
@@ -62,6 +62,8 @@ impl ButtonSize {
}
}
+//TODO loading prop
+
#[component]
pub fn Button(
#[prop(optional, into)] class: MaybeProp,
@@ -77,7 +79,9 @@ pub fn Button(
/// Whether the button is displayed as block.
#[prop(optional, into)]
block: MaybeSignal,
- #[prop(optional, into)] icon: MaybeProp,
+ /// The icon of the button.
+ #[prop(optional, into)]
+ icon: MaybeProp,
/// Whether the button is disabled.
#[prop(optional, into)]
disabled: MaybeSignal,
diff --git a/thaw/src/calendar/docs/mod.md b/thaw/src/calendar/docs/mod.md
new file mode 100644
index 0000000..358db27
--- /dev/null
+++ b/thaw/src/calendar/docs/mod.md
@@ -0,0 +1,21 @@
+# Calendar
+
+```rust demo
+use chrono::prelude::*;
+let value = RwSignal::new(Local::now().date_naive());
+let option_value = RwSignal::new(Some(Local::now().date_naive()));
+
+view! {
+
+
+
+
+}
+```
+
+### Calendar Props
+
+| Name | Type | Default | Desciption |
+| ----- | ------------------------ | -------------------- | -------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| value | `OptionModel` | `Default::default()` | selected date. |
diff --git a/thaw/src/calendar/mod.rs b/thaw/src/calendar/mod.rs
index fc87045..8775104 100644
--- a/thaw/src/calendar/mod.rs
+++ b/thaw/src/calendar/mod.rs
@@ -7,7 +7,7 @@ use thaw_utils::{class_list, mount_style, OptionModel};
#[component]
pub fn Calendar(
#[prop(optional, into)] class: MaybeProp,
- /// Default selected date.
+ /// selected date.
#[prop(optional, into)] value: OptionModel,
) -> impl IntoView {
mount_style("calendar", include_str!("./calendar.css"));
diff --git a/thaw/src/card/docs/mod.md b/thaw/src/card/docs/mod.md
new file mode 100644
index 0000000..03fd255
--- /dev/null
+++ b/thaw/src/card/docs/mod.md
@@ -0,0 +1,70 @@
+# Card
+
+```rust demo
+view! {
+
+
+
+ "Header"" 2022-02-22"
+
+
+ "Description"
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+}
+```
+
+### Card Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
+
+### CardHeader Props
+
+| Name | Type | Default | Description |
+| ----------------------- | ------------------------------------ | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| card_header_description | slot `Option` | `None` | |
+| card_header_action | slot `Option` | `None` | |
+| children | `Children` | | |
+
+### CardHeaderDescription Props
+
+| Name | Type | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` | | |
+
+### CardHeaderAction Props
+
+| Name | Type | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` | | |
+
+### CardPreview Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
+
+### CardFooter Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
diff --git a/thaw/src/checkbox/checkbox_group.rs b/thaw/src/checkbox/checkbox_group.rs
index 92f8a1a..b7f3ac6 100644
--- a/thaw/src/checkbox/checkbox_group.rs
+++ b/thaw/src/checkbox/checkbox_group.rs
@@ -5,7 +5,9 @@ use thaw_utils::{class_list, Model};
#[component]
pub fn CheckboxGroup(
#[prop(optional, into)] class: MaybeProp,
- #[prop(optional, into)] value: Model>,
+ /// Sets the value of the checkbox group.
+ #[prop(optional, into)]
+ value: Model>,
children: Children,
) -> impl IntoView {
view! {
diff --git a/thaw/src/checkbox/docs/mod.md b/thaw/src/checkbox/docs/mod.md
new file mode 100644
index 0000000..1945f29
--- /dev/null
+++ b/thaw/src/checkbox/docs/mod.md
@@ -0,0 +1,44 @@
+# Checkbox
+
+```rust demo
+let checked = RwSignal::new(false);
+
+view! {
+
+
+}
+```
+
+### Group
+
+```rust demo
+use std::collections::HashSet;
+
+let value = RwSignal::new(HashSet::new());
+
+view! {
+
+
+
+
+
+ "value: " {move || format!("{:?}", value.get())}
+}
+```
+
+### Checkbox Props
+
+| Name | Type | Default | Description |
+| ------- | ------------------- | -------------------- | --------------------------------------------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| checked | `Model` | `false` | The controlled value for the checkbox. |
+| value | `Option` | `None` | The value of the checkbox to be used in a checkbox group. |
+| label | `MaybeProp` | `Default::default()` | The Checkbox's label. |
+
+### CheckboxGroup Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------------ | -------------------- | ------------------------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| value | `Model>` | `Default::default()` | Sets the value of the checkbox group. |
+| children | `Children` | | |
diff --git a/thaw/src/checkbox/mod.rs b/thaw/src/checkbox/mod.rs
index b5b8771..b34ecf7 100644
--- a/thaw/src/checkbox/mod.rs
+++ b/thaw/src/checkbox/mod.rs
@@ -8,9 +8,9 @@ use thaw_utils::{class_list, mount_style, Model};
#[component]
pub fn Checkbox(
+ #[prop(optional, into)] class: MaybeProp,
/// The controlled value for the checkbox.
#[prop(optional, into)] checked: Model,
- #[prop(optional, into)] class: MaybeProp,
/// The value of the checkbox to be used in a checkbox group.
#[prop(optional, into)] value: Option,
/// The Checkbox's label.
diff --git a/thaw/src/code/mod.rs b/thaw/src/code/mod.rs
index d540e27..dc69690 100644
--- a/thaw/src/code/mod.rs
+++ b/thaw/src/code/mod.rs
@@ -1,4 +1,4 @@
-use leptos::prelude::*;
+use leptos::{either::EitherOf3, prelude::*};
use thaw_utils::{class_list, mount_style};
#[component]
@@ -12,11 +12,11 @@ pub fn Code(
{if let Some(inner_html) = inner_html {
- view! { }.into_any().into()
+ EitherOf3::A(view! { })
} else if let Some(text) = text {
- view! { {text} }.into_any().into()
+ EitherOf3::B(view! { {text} })
} else {
- None
+ EitherOf3::C(())
}}
diff --git a/demo_markdown/docs/color_picker/mod.md b/thaw/src/color_picker/docs/mod.md
similarity index 56%
rename from demo_markdown/docs/color_picker/mod.md
rename to thaw/src/color_picker/docs/mod.md
index 8f95396..1d71bab 100644
--- a/demo_markdown/docs/color_picker/mod.md
+++ b/thaw/src/color_picker/docs/mod.md
@@ -32,7 +32,7 @@ view! {
### ColorPicker Props
-| Name | Type | Default | Desciption |
-| ----- | ----------------------------------- | -------------------- | ----------------------------------------------- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the color picker element. |
-| value | `Model` | `Default::default()` | Value of the picker. |
+| Name | Type | Default | Desciption |
+| ----- | ------------------- | -------------------- | -------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| value | `Model` | `Default::default()` | Value of the picker. |
diff --git a/thaw/src/color_picker/mod.rs b/thaw/src/color_picker/mod.rs
index b8a8d05..e321ecb 100644
--- a/thaw/src/color_picker/mod.rs
+++ b/thaw/src/color_picker/mod.rs
@@ -11,8 +11,10 @@ use thaw_utils::{class_list, mount_style, Model};
#[component]
pub fn ColorPicker(
- #[prop(optional, into)] value: Model,
#[prop(optional, into)] class: MaybeProp,
+ /// Value of the picker.
+ #[prop(optional, into)]
+ value: Model,
) -> impl IntoView {
mount_style("color-picker", include_str!("./color-picker.css"));
let config_provider = ConfigInjection::expect_context();
diff --git a/thaw/src/combobox/combobox.rs b/thaw/src/combobox/combobox.rs
index fe2264a..a0e8637 100644
--- a/thaw/src/combobox/combobox.rs
+++ b/thaw/src/combobox/combobox.rs
@@ -9,9 +9,14 @@ use thaw_utils::{add_event_listener, class_list, mount_style, Model, VecModel};
pub fn Combobox(
#[prop(optional, into)] class: MaybeProp,
#[prop(optional, into)] value: Model,
+ /// Selected option.
#[prop(optional, into)] selected_options: VecModel,
- #[prop(optional, into)] disabled: MaybeSignal,
- #[prop(optional, into)] placeholder: MaybeProp,
+ /// Whether the input is disabled.
+ #[prop(optional, into)]
+ disabled: MaybeSignal,
+ /// Placeholder text for the input.
+ #[prop(optional, into)]
+ placeholder: MaybeProp,
/// If set, the combobox will show an icon to clear the current value.
#[prop(optional)]
clearable: bool,
diff --git a/thaw/src/combobox/combobox_option.rs b/thaw/src/combobox/combobox_option.rs
index 2c19016..552e4ba 100644
--- a/thaw/src/combobox/combobox_option.rs
+++ b/thaw/src/combobox/combobox_option.rs
@@ -14,7 +14,8 @@ pub fn ComboboxOption(
/// Defines a unique identifier for the option. Defaults to `text` if not provided.
#[prop(optional, into)]
value: Option,
- /// An optional override the string value of the Option's display text, defaulting to the Option's child content.
+ /// An optional override the string value of the Option's display text,
+ /// defaulting to the Option's child content.
#[prop(into)]
text: String,
#[prop(optional)] children: Option,
diff --git a/thaw/src/combobox/combobox_option_group.rs b/thaw/src/combobox/combobox_option_group.rs
index d3bb4fb..6188551 100644
--- a/thaw/src/combobox/combobox_option_group.rs
+++ b/thaw/src/combobox/combobox_option_group.rs
@@ -4,7 +4,8 @@ use thaw_utils::{class_list, mount_style};
#[component]
pub fn ComboboxOptionGroup(
#[prop(optional, into)] class: MaybeProp,
- #[prop(into)] label: String,
+ /// Label of the group.
+ #[prop(into)] label: String,
children: Children,
) -> impl IntoView {
mount_style(
diff --git a/thaw/src/combobox/docs/mod.md b/thaw/src/combobox/docs/mod.md
index 3ee27ea..81f814a 100644
--- a/thaw/src/combobox/docs/mod.md
+++ b/thaw/src/combobox/docs/mod.md
@@ -73,4 +73,34 @@ view! {
}
-```
\ No newline at end of file
+```
+
+### Combobox Props
+
+| Name | Type | Default | Desciption |
+| --- | --- | --- | --- |
+| class | `MaybeProp` | `Default::default()` | |
+| value | `Model` | `Default::default()` | |
+| selected_options | `VecModel` | `Default::default()` | Selected option. |
+| disabled | `MaybeSignal` | `false` | Whether the input is disabled. |
+| placeholder | `MaybeProp` | `Default::default()` | Placeholder text for the input. |
+| clearable | `bool` | `false` | If set, the combobox will show an icon to clear the current value. |
+| children | `Children` | | |
+
+### ComboboxOption Props
+
+| Name | Type | Default | Desciption |
+| --- | --- | --- | --- |
+| class | `MaybeProp` | `Default::default()` | |
+| disabled | `MaybeSignal` | `false` | Sets an option to the disabled state. Disabled options cannot be selected, but are still keyboard navigable. |
+| value | `Option` | `None` | Defines a unique identifier for the option. Defaults to `text` if not provided. |
+| text | `String` | | An optional override the string value of the Option's display text, defaulting to the Option's child content. |
+| children | `Children` | | |
+
+### ComboboxOptionGroup Props
+
+| Name | Type | Default | Desciption |
+| -------- | ------------------- | -------------------- | ------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| label | `String` | | Label of the group. |
+| children | `Children` | | |
diff --git a/demo_markdown/docs/config_provider/mod.md b/thaw/src/config_provider/docs/mod.md
similarity index 77%
rename from demo_markdown/docs/config_provider/mod.md
rename to thaw/src/config_provider/docs/mod.md
index 48040f7..ebacd84 100644
--- a/demo_markdown/docs/config_provider/mod.md
+++ b/thaw/src/config_provider/docs/mod.md
@@ -43,6 +43,9 @@ view! {
### ConfigProvider Props
-| Name | Type | Default | Description |
-| ----- | ------------------------- | -------------------- | ----------- |
-| theme | `Option>` | `Default::default()` | Theme. |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeProp` | `Default::default()` | |
+| theme | `Option>` | `None` | Sets the theme used in a scope. |
+| dir | `RwSignal>` | | Sets the direction of text & generated styles. |
+| children | `Children` | | |
diff --git a/thaw/src/date_picker/docs/mod.md b/thaw/src/date_picker/docs/mod.md
new file mode 100644
index 0000000..4e3e6f7
--- /dev/null
+++ b/thaw/src/date_picker/docs/mod.md
@@ -0,0 +1,21 @@
+# Date Picker
+
+```rust demo
+use chrono::prelude::*;
+let value = RwSignal::new(Local::now().date_naive());
+let option_value = RwSignal::new(Some(Local::now().date_naive()));
+
+view! {
+
+
+
+
+}
+```
+
+### DatePicker Props
+
+| Name | Type | Default | Desciption |
+| ----- | ------------------------ | -------------------- | -------------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| value | `OptionModel` | `Default::default()` | Set the date picker value. |
diff --git a/thaw/src/date_picker/mod.rs b/thaw/src/date_picker/mod.rs
index f3d9c70..39ee46f 100644
--- a/thaw/src/date_picker/mod.rs
+++ b/thaw/src/date_picker/mod.rs
@@ -8,8 +8,9 @@ use thaw_utils::{class_list, mount_style, now_date, ComponentRef, OptionModel};
#[component]
pub fn DatePicker(
- #[prop(optional, into)] value: OptionModel,
#[prop(optional, into)] class: MaybeProp,
+ /// Set the date picker value.
+ #[prop(optional, into)] value: OptionModel,
) -> impl IntoView {
mount_style("date-picker", include_str!("./date-picker.css"));
let date_picker_ref = NodeRef::::new();
diff --git a/thaw/src/dialog/dialog.rs b/thaw/src/dialog/dialog.rs
index 5cf01f3..6c25133 100644
--- a/thaw/src/dialog/dialog.rs
+++ b/thaw/src/dialog/dialog.rs
@@ -6,10 +6,15 @@ use thaw_utils::{class_list, mount_style, Model};
#[component]
pub fn Dialog(
#[prop(optional, into)] class: MaybeProp,
- /// Controls the open state of the dialog
- #[prop(into)] open: Model,
- #[prop(default = true.into(), into)] mask_closeable: MaybeSignal,
- #[prop(default = true, into)] close_on_esc: bool,
+ /// Controls the open state of the dialog.
+ #[prop(into)]
+ open: Model,
+ /// Whether to emit hide event when click mask.
+ #[prop(default = true.into(), into)]
+ mask_closeable: MaybeSignal,
+ /// Whether to close modal on Esc is pressed.
+ #[prop(default = true, into)]
+ close_on_esc: bool,
children: Children,
) -> impl IntoView {
mount_style("dialog", include_str!("./dialog.css"));
diff --git a/thaw/src/dialog/docs/mod.md b/thaw/src/dialog/docs/mod.md
new file mode 100644
index 0000000..6bf0803
--- /dev/null
+++ b/thaw/src/dialog/docs/mod.md
@@ -0,0 +1,67 @@
+# Dialog
+
+```rust demo
+let open = RwSignal::new(false);
+
+view! {
+
+
+}
+```
+
+### Dialog Props
+
+| Name | Type | Default | Description |
+| -------------- | ------------------- | -------------------- | ------------------------------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| open | `Model` | | Controls the open state of the dialog. |
+| mask_closeable | `MaybeSignal` | `true` | Whether to emit hide event when click mask. |
+| close_on_esc | `bool` | `true` | Whether to close modal on Esc is pressed. |
+| children | `Children` | | |
+
+### DialogSurface Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
+
+### DialogBody Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
+
+### DialogTitle Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
+
+### DialogContent Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
+
+### DialogActions Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
diff --git a/demo_markdown/docs/divider/mod.md b/thaw/src/divider/docs/mod.md
similarity index 57%
rename from demo_markdown/docs/divider/mod.md
rename to thaw/src/divider/docs/mod.md
index aeb3e9b..b7dc396 100644
--- a/demo_markdown/docs/divider/mod.md
+++ b/thaw/src/divider/docs/mod.md
@@ -30,6 +30,8 @@ view! {
### Divider Props
-| Name | Type | Default | Desciption |
-| ----- | ----------------------------------- | -------------------- | ------------------------------------------ |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the divider element. |
+| Name | Type | Default | Desciption |
+| -------- | ------------------- | -------------------- | -------------------------------------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| vertical | `MaybeSignal` | `false` | A divider can be horizontal (default) or vertical. |
+| children | `Option` | `None` | |
diff --git a/demo_markdown/docs/drawer/mod.md b/thaw/src/drawer/docs/mod.md
similarity index 69%
rename from demo_markdown/docs/drawer/mod.md
rename to thaw/src/drawer/docs/mod.md
index 2bc55ba..c541eb1 100644
--- a/demo_markdown/docs/drawer/mod.md
+++ b/thaw/src/drawer/docs/mod.md
@@ -141,18 +141,52 @@ view! {
}
```
-### Drawer Props
+### OverlayDrawer Props
| Name | Type | Default | Desciption |
| --- | --- | --- | --- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the drawer element. |
-| show | `Model` | | Whether to show drawer. |
+| class | `MaybeProp` | `Default::default()` | |
+| open | `Model` | | Controls the open state of the Drawer. |
| mask_closeable | `MaybeSignal` | `true` | Whether to emit hide event when click mask. |
-| close_on_esc | `bool` | `true` | Whether to close drawer on Esc is pressed. |
-| title | `OptionalProp>` | `Default::default()` | Drawer title. |
-| placement | `MaybeSignal` | `DrawerPlacement::Right` | Drawer placement. |
-| width | `MaybeSignal` | `520px` | Drawer width. |
-| height | `MaybeSignal` | `260px` | Drawer height. |
-| z_index | `MaybeSignal` | `2000` | z-index of the drawer. |
-| mount | `DrawerMount` | `DrawerMount::Body` | Container node of the drawer. |
-| children | `Children` | | Drawer content. |
+| close_on_esc | `bool` | `false` | Whether to close drawer on Esc is pressed. |
+| position | `MaybeSignal` | `DrawerPlacement::Left` | Position of the drawer. |
+| size | `MaybeSignal` | `DrawerSize::Small` | Size of the drawer. |
+| children | `Children` | | |
+
+### InlineDrawer Props
+
+| Name | Type | Default | Desciption |
+| -------- | ----------------------------- | ----------------------- | -------------------------------------- |
+| class | `MaybeProp` | `Default::default()` | |
+| open | `Model` | | Controls the open state of the Drawer. |
+| position | `MaybeSignal` | `DrawerPlacement::Left` | Position of the drawer. |
+| size | `MaybeSignal` | `DrawerSize::Small` | Size of the drawer. |
+| children | `Children` | | |
+
+### DrawerHeader Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
+
+### DrawerHeaderTitle Props
+
+| Name | Type | Default | Description |
+| -------------------------- | -------------------------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| drawer_header_title_action | slot `Option` | `None` | |
+| children | `Children` | | |
+
+### DrawerHeaderTitleAction Props
+
+| Name | Type | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` | | |
+
+### DrawerBody Props
+
+| Name | Type | Default | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp` | `Default::default()` | |
+| children | `Children` | | |
diff --git a/thaw/src/drawer/overlay_drawer.rs b/thaw/src/drawer/overlay_drawer.rs
index 2d31f81..cc8378f 100644
--- a/thaw/src/drawer/overlay_drawer.rs
+++ b/thaw/src/drawer/overlay_drawer.rs
@@ -8,13 +8,19 @@ use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};
pub fn OverlayDrawer(
#[prop(optional, into)] class: MaybeProp,
/// Controls the open state of the Drawer.
- #[prop(into)] open: Model,
- #[prop(default = true.into(), into)] mask_closeable: MaybeSignal,
+ #[prop(into)]
+ open: Model,
+ /// Whether to emit hide event when click mask.
+ #[prop(default = true.into(), into)]
+ mask_closeable: MaybeSignal,
+ /// Whether to close drawer on Esc is pressed.
#[prop(optional, into)] close_on_esc: bool,
/// Position of the drawer.
- #[prop(optional, into)] position: MaybeSignal,
+ #[prop(optional, into)]
+ position: MaybeSignal,
/// Size of the drawer.
- #[prop(optional, into)] size: MaybeSignal,
+ #[prop(optional, into)]
+ size: MaybeSignal,
children: Children,
) -> impl IntoView {
mount_style("drawer", include_str!("./drawer.css"));
diff --git a/demo_markdown/docs/grid/mod.md b/thaw/src/grid/docs/mod.md
similarity index 62%
rename from demo_markdown/docs/grid/mod.md
rename to thaw/src/grid/docs/mod.md
index 20d0e90..91b128a 100644
--- a/demo_markdown/docs/grid/mod.md
+++ b/thaw/src/grid/docs/mod.md
@@ -95,17 +95,19 @@ view! {
### Grid Props
-| Name | Type | Default | Desciption |
-| ----- | ----------------------------------- | -------------------- | --------------------------------------- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the grid element. |
-| cols | `MaybeSignal` | `1` | Number of grids displayed. |
-| x_gap | `MaybeSignal