adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-08 19:03:09 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(docs): adds component prop

Browse source
This commit is contained in:
luoxiao 2024-08-12 22:58:43 +08:00 • committed by luoxiaozero
parent efc00d1699
commit 8fb236358a
20 changed files with 371 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
demo_markdown/docs/image/mod.md
View file

@ -1,31 +0,0 @@
# Image
```rust demo
view! {
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
}
```
### Shape
```rust demo
view! {
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="200px" height="200px"/>
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="200px" height="200px" shape=ImageShape::Circular/>
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="200px" height="200px" shape=ImageShape::Rounded/>
}
```
### Image Props
| Name | Type | Default | Desciption |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the image element. |
| src | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Image source. |
| alt | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Image alt information. |
| width | `MaybeSignal<String>` | `Default::default()` | Image width. |
| height | `MaybeSignal<String>` | `Default::default()` | Image height. |
| border_radius | `MaybeSignal<String>` | `Default::default()` | Image border radius. |
| object_fit | `MaybeSignal<String>` | `Default::default()` | Object-fit type of the image in the container. |

48
demo_markdown/docs/nav/mod.md
View file

@ -1,48 +0,0 @@
# Nav
```rust demo
view! {
<NavDrawer>
<NavCategory value="area">
<NavCategoryItem slot icon=icondata::AiAreaChartOutlined>
"Area Chart"
</NavCategoryItem>
<NavSubItem value="target">
"Target"
</NavSubItem>
<NavSubItem value="above">
"Above"
</NavSubItem>
<NavSubItem value="below">
"Below"
</NavSubItem>
</NavCategory>
<NavCategory value="pie">
<NavCategoryItem slot icon=icondata::AiPieChartOutlined>
"Pie Chart"
</NavCategoryItem>
<NavSubItem value="pie-target">
"Pie Target"
</NavSubItem>
<NavSubItem value="pin-above">
"Pin Above"
</NavSubItem>
<NavSubItem value="pin-below">
"Pin Below"
</NavSubItem>
</NavCategory>
<NavItem
icon=icondata::AiGithubOutlined
value="github"
href="https://github.com/thaw-ui/thaw"
attr:target="_blank"
>
"Github"
</NavItem>
<NavItem icon=icondata::AiChromeOutlined value="chrome">
"Chrome"
</NavItem>
</NavDrawer>
}
```

14
demo_markdown/src/lib.rs
View file

@ -44,13 +44,13 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"DrawerMdPage" => "../../thaw/src/drawer/docs/mod.md", "DrawerMdPage" => "../../thaw/src/drawer/docs/mod.md",
"GridMdPage" => "../../thaw/src/grid/docs/mod.md", "GridMdPage" => "../../thaw/src/grid/docs/mod.md",
"IconMdPage" => "../../thaw/src/icon/docs/mod.md", "IconMdPage" => "../../thaw/src/icon/docs/mod.md",
"ImageMdPage" => "../docs/image/mod.md", "ImageMdPage" => "../../thaw/src/image/docs/mod.md",
"InputMdPage" => "../docs/input/mod.md", "InputMdPage" => "../../thaw/src/input/docs/mod.md",
"LayoutMdPage" => "../docs/layout/mod.md", "LayoutMdPage" => "../../thaw/src/layout/docs/mod.md",
"LoadingBarMdPage" => "../docs/loading_bar/mod.md", "LoadingBarMdPage" => "../../thaw/src/loading_bar/docs/mod.md",
"MenuMdPage" => "../docs/menu/mod.md", "MenuMdPage" => "../../thaw/src/menu/docs/mod.md",
"MessageBarMdPage" => "../docs/message_bar/mod.md", "MessageBarMdPage" => "../../thaw/src/message_bar/docs/mod.md",
"NavMdPage" => "../docs/nav/mod.md", "NavMdPage" => "../../thaw/src/nav/docs/mod.md",
"PaginationMdPage" => "../../thaw/src/pagination/docs/mod.md", "PaginationMdPage" => "../../thaw/src/pagination/docs/mod.md",
"PopoverMdPage" => "../docs/popover/mod.md", "PopoverMdPage" => "../docs/popover/mod.md",
"ProgressBarMdPage" => "../docs/progress_bar/mod.md", "ProgressBarMdPage" => "../docs/progress_bar/mod.md",

32
thaw/src/image/docs/mod.md Normal file
View file

@ -0,0 +1,32 @@
# Image
```rust demo
view! {
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
}
```
### Shape
```rust demo
view! {
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="200px" height="200px"/>
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="200px" height="200px" shape=ImageShape::Circular/>
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="200px" height="200px" shape=ImageShape::Rounded/>
}
```
### Image Props
| Name | Type | Default | Desciption |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| src | `MaybeProp<String>` | `Default::default()` | path to the image you want to display. |
| alt | `MaybeProp<String>` | `Default::default()` | description of the image, which isn't mandatory but is incredibly useful for accessibility. |
| width | `MaybeProp<String>` | `Default::default()` | Image width. |
| height | `MaybeProp<String>` | `Default::default()` | Image height. |
| shape | `MaybeSignal<ImageShape>` | `ImageShape::Square` | An image can appear square, circular, or rounded. |
| block | `MaybeSignal<bool>` | `Default::default()` | An image can take up the width of its container. |
| shadow | `MaybeSignal<bool>` | `Default::default()` | An image can appear elevated with shadow. |
| fit | `MaybeSignal<ImageFit>` | `ImageFit::Fill` | An image can set how it should be resized to fit its container. |

10
thaw/src/image/mod.rs
View file

@ -3,18 +3,21 @@ use thaw_utils::{class_list, mount_style};
#[component] #[component]
pub fn Image( pub fn Image(
/// path to the image you want to display #[prop(optional, into)] class: MaybeProp<String>,
/// path to the image you want to display.
#[prop(optional, into)] #[prop(optional, into)]
src: MaybeProp<String>, src: MaybeProp<String>,
/// description of the image, which isn't mandatory but is incredibly useful for accessibility /// description of the image, which isn't mandatory but is incredibly useful for accessibility.
#[prop(optional, into)] #[prop(optional, into)]
alt: MaybeProp<String>, alt: MaybeProp<String>,
/// Image width.
#[prop(optional, into)] width: MaybeProp<String>, #[prop(optional, into)] width: MaybeProp<String>,
/// Image height.
#[prop(optional, into)] height: MaybeProp<String>, #[prop(optional, into)] height: MaybeProp<String>,
/// An image can appear square, circular, or rounded. /// An image can appear square, circular, or rounded.
#[prop(optional, into)] #[prop(optional, into)]
shape: MaybeSignal<ImageShape>, shape: MaybeSignal<ImageShape>,
/// An image can set how it should be resized to fit its container. /// An image can take up the width of its container.
#[prop(optional, into)] #[prop(optional, into)]
block: MaybeSignal<bool>, block: MaybeSignal<bool>,
/// An image can appear elevated with shadow. /// An image can appear elevated with shadow.
@ -23,7 +26,6 @@ pub fn Image(
/// An image can set how it should be resized to fit its container. /// An image can set how it should be resized to fit its container.
#[prop(optional, into)] #[prop(optional, into)]
fit: MaybeSignal<ImageFit>, fit: MaybeSignal<ImageFit>,
#[prop(optional, into)] class: MaybeProp<String>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("image", include_str!("./image.css")); mount_style("image", include_str!("./image.css"));

40
demo_markdown/docs/input/mod.md → thaw/src/input/docs/mod.md
View file

@ -105,31 +105,35 @@ view! {
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the input element. | | class | `MaybeProp<String>` | `Default::default()` | |
| value | `Model<String>` | `Default::default()` | Set the input value. | | value | `Model<String>` | `Default::default()` | Set the input value. |
| variant | `MaybeSignal<InputVariant>` | `InputVariant::Text` | Input's variant. | | allow_value | `Option<ArcOneCallback<String, bool>>` | `None` | Check the incoming value, if it returns false, input will not be accepted. |
| placeholder | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Placeholder of input. | | input_type | `MaybeSignal<InputType>` | `InputType::Text` | An input can have different text-based types based on the type of value the user will enter. |
| placeholder | `MaybeProp<String>` | `Default::default()` | Placeholder text for the input. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. | | disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
| invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. | | on_focus | `Option<BoxOneCallback<ev::FocusEvent>>` | `None` | Callback triggered when the input is focussed on. |
| allow_value | `Option<Callback<String, bool>>` | `None` | Check the incoming value, if it returns false, input will not be accepted. | | on_blur | `Option<BoxOneCallback<ev::FocusEvent>>` | `None` | Callback triggered when the input is blurred. |
| on_focus | `Option<Callback<ev::FocusEvent>>` | `None` | Callback triggered when the input is focussed on. | | parser | `OptionalProp<BoxOneCallback<String, Option<String>>>` | `None` | Modifies the user input before assigning it to the value. |
| on_blur | `Option<Callback<ev::FocusEvent>>` | `None` | Callback triggered when the input is blurred. | | format | `OptionalProp<BoxOneCallback<String, String>>` | `None` | Formats the value to be shown to the user |
| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. | | input_prefix | slot `Option<InputPrefix>` | `None` | |
| input_suffix | slot `Option<InputSuffix>` | `None` | |
| comp_ref | ref `ComponentRef<InputRef>` | `Default::default()` | |
### Input Slots ### InputPrefix Props
| Name | Default | Description | | Name | Type | Default | Description |
| ----------- | ------- | -------------------- | | -------- | ---------- | ------- | ----------- |
| InputPrefix | `None` | InputPrefix content. | | children | `Children` | | |
| InputSuffix | `None` | InputSuffix content. |
### Input Ref ### InputSuffix Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### InputRef Props
| Name | Type | Description | | Name | Type | Description |
| ----- | ----------- | ------------------------ | | ----- | ----------- | ------------------------ |
| focus | `Fn(&self)` | Focus the input element. | | focus | `Fn(&self)` | Focus the input element. |
| blur | `Fn(&self)` | Blur the input element. | | blur | `Fn(&self)` | Blur the input element. |
### TextArea Props
Removes variant and slot from Input component.

32
thaw/src/input/mod.rs
View file

@ -19,23 +19,37 @@ pub struct InputSuffix {
#[component] #[component]
pub fn Input( pub fn Input(
#[prop(optional, into)] value: Model<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] allow_value: Option<ArcOneCallback<String, bool>>, /// Set the input value.
#[prop(optional, into)] input_type: MaybeSignal<InputType>, #[prop(optional, into)]
value: Model<String>,
/// Check the incoming value, if it returns false, input will not be accepted.
#[prop(optional, into)]
allow_value: Option<ArcOneCallback<String, bool>>,
/// An input can have different text-based types based on the type of value the user will enter.
#[prop(optional, into)]
input_type: MaybeSignal<InputType>,
/// Placeholder text for the input. /// Placeholder text for the input.
#[prop(optional, into)] #[prop(optional, into)]
placeholder: MaybeProp<String>, placeholder: MaybeProp<String>,
#[prop(optional, into)] on_focus: Option<BoxOneCallback<ev::FocusEvent>>, /// Callback triggered when the input is focussed on.
#[prop(optional, into)] on_blur: Option<BoxOneCallback<ev::FocusEvent>>, #[prop(optional, into)]
on_focus: Option<BoxOneCallback<ev::FocusEvent>>,
/// Callback triggered when the input is blurred.
#[prop(optional, into)]
on_blur: Option<BoxOneCallback<ev::FocusEvent>>,
/// Whether the input is disabled. /// Whether the input is disabled.
#[prop(optional, into)] #[prop(optional, into)]
disabled: MaybeSignal<bool>, disabled: MaybeSignal<bool>,
#[prop(optional)] input_prefix: Option<InputPrefix>, #[prop(optional)] input_prefix: Option<InputPrefix>,
#[prop(optional)] input_suffix: Option<InputSuffix>, #[prop(optional)] input_suffix: Option<InputSuffix>,
#[prop(optional)] comp_ref: ComponentRef<InputRef>, #[prop(optional)] comp_ref: ComponentRef<InputRef>,
#[prop(optional, into)] class: MaybeProp<String>, /// Modifies the user input before assigning it to the value.
#[prop(optional, into)] parser: OptionalProp<BoxOneCallback<String, Option<String>>>, #[prop(optional, into)]
#[prop(optional, into)] format: OptionalProp<BoxOneCallback<String, String>>, parser: OptionalProp<BoxOneCallback<String, Option<String>>>,
/// Formats the value to be shown to the user.
#[prop(optional, into)]
format: OptionalProp<BoxOneCallback<String, String>>,
// #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("input", include_str!("./input.css")); mount_style("input", include_str!("./input.css"));
@ -219,12 +233,14 @@ pub struct InputRef {
} }
impl InputRef { impl InputRef {
/// Focus the input element.
pub fn focus(&self) { pub fn focus(&self) {
if let Some(input_el) = self.input_ref.get_untracked() { if let Some(input_el) = self.input_ref.get_untracked() {
_ = input_el.focus(); _ = input_el.focus();
} }
} }
/// Blur the input element.
pub fn blur(&self) { pub fn blur(&self) {
if let Some(input_el) = self.input_ref.get_untracked() { if let Some(input_el) = self.input_ref.get_untracked() {
_ = input_el.blur(); _ = input_el.blur();

29
demo_markdown/docs/layout/mod.md → thaw/src/layout/docs/mod.md
View file

@ -35,18 +35,25 @@ view! {
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Class of scrollable content node. | | class | `MaybeProp<String>` | `Default::default()` | |
| style | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Layout's style. | | content_class | `MaybeProp<String>` | `Default::default()` | Addtional classes for the layout element. |
| content_class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the layout element. | | content_style | `MaybeProp<String>` | `Default::default()` | Style of scrollable content node. |
| content_style | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Style of scrollable content node. |
| position | `LayoutPosition` | `LayoutPosition::Static` | static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. | | position | `LayoutPosition` | `LayoutPosition::Static` | static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. |
| has_sider | `MaybeSignal<bool>` | `false` | Whether the component has sider inside. If so it must be true. | | has_sider | `MaybeSignal<bool>` | `false` | Whether the component has sider inside. If so it must be true. |
| children | `Children` | | Layout's content. | | children | `Children` | | |
### LayoutHeader, LayoutSider Props ### LayoutHeader Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | -------- | ------------------- | -------------------- | ----------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the layout header element. | | class | `MaybeProp<String>` | `Default::default()` | |
| style | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | LayoutHeader's style. | | children | `Children` | | |
| children | `Children` | | LayoutHeader's content. |
### LayoutSider Props
| Name | Type | Default | Description |
| ------------- | ------------------- | -------------------- | ----------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| content_class | `MaybeProp<String>` | `Default::default()` | Addtional classes for the layout element. |
| content_style | `MaybeProp<String>` | `Default::default()` | Style of scrollable content node. |
| children | `Children` | | |

2
thaw/src/layout/layout_sider.rs
View file

@ -5,7 +5,9 @@ use thaw_utils::{class_list, mount_style};
#[component] #[component]
pub fn LayoutSider( pub fn LayoutSider(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// Addtional classes for the scroll element.
#[prop(optional, into)] content_class: MaybeProp<String>, #[prop(optional, into)] content_class: MaybeProp<String>,
/// Style of scrollable content node.
#[prop(optional, into)] content_style: MaybeProp<String>, #[prop(optional, into)] content_style: MaybeProp<String>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {

8
thaw/src/layout/mod.rs
View file

@ -27,8 +27,16 @@ impl LayoutPosition {
#[component] #[component]
pub fn Layout( pub fn Layout(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// Addtional classes for the layout element.
#[prop(optional, into)] content_class: MaybeProp<String>, #[prop(optional, into)] content_class: MaybeProp<String>,
/// Style of scrollable content node.
#[prop(optional, into)] content_style: MaybeProp<String>, #[prop(optional, into)] content_style: MaybeProp<String>,
/// static position will make it css position set to static.
/// absolute position will make it css position set to absolute and left,
/// right, top, bottom to 0. absolute position is very useful
/// when you want to make content scroll in a fixed container or make
/// the whole page's layout in a fixed position. You may need to change
/// the style of the component to make it display as you expect.
#[prop(optional)] position: LayoutPosition, #[prop(optional)] position: LayoutPosition,
/// Whether the component has sider inside. If so it must be true. /// Whether the component has sider inside. If so it must be true.
#[prop(optional, into)] has_sider: MaybeSignal<bool>, #[prop(optional, into)] has_sider: MaybeSignal<bool>,

0
demo_markdown/docs/loading_bar/mod.md → thaw/src/loading_bar/docs/mod.md
View file

3
thaw/src/loading_bar/loading_bar_provider.rs
View file

@ -30,18 +30,21 @@ impl LoadingBarInjection {
expect_context::<Self>() expect_context::<Self>()
} }
/// Callback function for loading bar to start loading.
pub fn start(&self) { pub fn start(&self) {
if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() { if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() {
loading_bar_ref.start(); loading_bar_ref.start();
} }
} }
/// The callback function when the loading bar finishes loading.
pub fn finish(&self) { pub fn finish(&self) {
if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() { if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() {
loading_bar_ref.finish(); loading_bar_ref.finish();
} }
} }
/// Callback function for loading bar error.
pub fn error(&self) { pub fn error(&self) {
if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() { if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() {
loading_bar_ref.error(); loading_bar_ref.error();

50
demo_markdown/docs/menu/mod.md → thaw/src/menu/docs/mod.md
View file

@ -150,33 +150,29 @@ view! {
### Menu Props ### Menu Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ------------ | --------------------------- | ------------------------ | -------------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu element. | | class | `MaybeProp<String>,` | `Default::default()` | |
| on_select | `Callback<String>` | | Called when item is selected. | | on_select | `BoxOneCallback<String>` | | Called when item is selected. |
| trigger_type | `MenuTriggerType` | `MenuTriggerType::Click` | Action that displays the menu. | | trigger_type | `MenuTriggerType` | `MenuTriggerType::Click` | Action that displays the menu. |
| position | `MenuPosition` | `MenuPosition::Bottom` | Menu position. | | position | `MenuPosition` | `MenuPosition::Bottom` | Menu position. |
| children | `Children` | | The content inside menu. | | appearance | `MaybeProp<MenuAppearance>` | `Default::default()` | |
| menu_trigger | slot `MenuTrigger` | | The element or component that triggers menu. |
### MenuItem Props | children | `Children` | | |
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu item element. |
| value | `MaybeSignal<String>` | `Default::default()` | The value of the menu item. |
| label | `MaybeSignal<String>` | `Default::default()` | The label of the menu item. |
| icon | `OptionalMaybeSignal<icondata_core::Icon>` | `None` | The icon of the menu item. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the menu item is disabled. |
### Menu Slots
| Name | Default | Description |
| ----------- | ------- | -------------------------------------------- |
| MenuTrigger | `None` | The element or component that triggers menu. |
### MenuTriger Props ### MenuTriger Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | -------- | ------------------- | -------------------- | ----------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu trigger element. | | class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | The content inside menu trigger. | | children | `Children` | | |
### MenuItem Props
| Name | Type | Default | Description |
| -------- | -------------------------------- | -------------------- | ---------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `MaybeSignal<String>` | `Default::default()` | The value of the menu item. |
| icon | `MaybeProp<icondata_core::Icon>` | `None` | The icon of the menu item. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the menu item is disabled. |
| children | `Children` | | |

31
thaw/src/menu/menu_item.rs
View file

@ -1,34 +1,39 @@
use crate::{ use crate::{Icon, MenuInjection};
menu::{HasIcon, OnSelect},
Icon,
};
use leptos::prelude::*; use leptos::prelude::*;
use thaw_components::{Fallback, If, OptionComp, Then}; use thaw_components::{Fallback, If, OptionComp, Then};
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
#[component] #[component]
pub fn MenuItem( pub fn MenuItem(
#[prop(optional, into)] icon: MaybeProp<icondata_core::Icon>,
#[prop(into)] value: MaybeSignal<String>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// The icon of the menu item.
#[prop(optional, into)]
icon: MaybeProp<icondata_core::Icon>,
/// The value of the menu item.
#[prop(into)]
value: MaybeSignal<String>,
/// Whether the menu item is disabled.
#[prop(optional, into)]
disabled: MaybeSignal<bool>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("menu-item", include_str!("./menu-item.css")); mount_style("menu-item", include_str!("./menu-item.css"));
let has_icon = use_context::<HasIcon>().expect("HasIcon not provided").0; let MenuInjection {
has_icon,
on_select,
} = MenuInjection::expect_context();
if icon.get().is_some() { if icon.with_untracked(|i| i.is_some()) {
has_icon.set(true); has_icon.set(true);
} }
let on_select = use_context::<OnSelect>().expect("OnSelect not provided").0;
let on_click = move |_| { let on_click = move |_| {
if disabled.get() { if disabled.get_untracked() {
return; return;
} }
on_select(value.get());
on_select(value.get_untracked());
}; };
view! { view! {

92
thaw/src/menu/mod.rs
View file

@ -3,11 +3,12 @@ mod menu_item;
pub use menu_item::*; pub use menu_item::*;
use crate::ConfigInjection; use crate::ConfigInjection;
use leptos::{ev, html::Div, leptos_dom::helpers::TimeoutHandle, prelude::*}; use leptos::{context::Provider, ev, html::Div, leptos_dom::helpers::TimeoutHandle, prelude::*};
use std::time::Duration; use std::time::Duration;
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement}; use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
use thaw_utils::{ use thaw_utils::{
add_event_listener, call_on_click_outside, class_list, mount_style, ArcOneCallback, BoxCallback, add_event_listener, call_on_click_outside, class_list, mount_style, ArcOneCallback,
BoxCallback, BoxOneCallback,
}; };
#[slot] #[slot]
@ -17,20 +18,21 @@ pub struct MenuTrigger {
children: Children, children: Children,
} }
#[derive(Copy, Clone)]
struct HasIcon(RwSignal<bool>);
#[derive(Clone)]
struct OnSelect(ArcOneCallback<String>);
#[component] #[component]
pub fn Menu( pub fn Menu(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// The element or component that triggers menu.
menu_trigger: MenuTrigger, menu_trigger: MenuTrigger,
#[prop(optional)] trigger_type: MenuTriggerType, /// Action that displays the menu.
#[prop(optional)] position: MenuPosition, #[prop(optional)]
#[prop(into)] on_select: ArcOneCallback<String>, trigger_type: MenuTriggerType,
#[prop(optional, into)] appearance: Option<MaybeSignal<MenuAppearance>>, /// Menu position.
#[prop(optional)]
position: MenuPosition,
/// Called when item is selected.
#[prop(into)]
on_select: BoxOneCallback<String>,
#[prop(optional, into)] appearance: MaybeProp<MenuAppearance>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("menu", include_str!("./menu.css")); mount_style("menu", include_str!("./menu.css"));
@ -93,11 +95,13 @@ pub fn Menu(
children: trigger_children, children: trigger_children,
} = menu_trigger; } = menu_trigger;
provide_context(HasIcon(RwSignal::new(false))); let menu_injection = MenuInjection {
provide_context(OnSelect(ArcOneCallback::<String>::new(move |key| { has_icon: RwSignal::new(false),
is_show_menu.set(false); on_select: ArcOneCallback::new(move |value| {
on_select(key); is_show_menu.set(false);
}))); on_select(value);
}),
};
view! { view! {
<Binder target_ref> <Binder target_ref>
@ -110,33 +114,47 @@ pub fn Menu(
{trigger_children()} {trigger_children()}
</div> </div>
<Follower slot show=is_show_menu placement=position> <Follower slot show=is_show_menu placement=position>
<CSSTransition <Provider value=menu_injection>
node_ref=menu_ref <CSSTransition
name="menu-transition"
appear=is_show_menu.get_untracked()
show=is_show_menu
let:display
>
<div
class=class_list![
"thaw-config-provider thaw-menu",
appearance.map(|appearance| move || format!("thaw-menu--{}", appearance.get().as_str())),
class
]
data-thaw-id=config_provider.id().clone()
style=move || display.get().unwrap_or_default()
node_ref=menu_ref node_ref=menu_ref
on:mouseenter=on_mouse_enter name="menu-transition"
on:mouseleave=on_mouse_leave appear=is_show_menu.get_untracked()
show=is_show_menu
let:display
> >
{children()} <div
</div> class=class_list![
</CSSTransition> "thaw-config-provider thaw-menu",
move || appearance.get().map(|a| format!("thaw-menu--{}", a.as_str())),
class
]
data-thaw-id=config_provider.id().clone()
style=move || display.get().unwrap_or_default()
node_ref=menu_ref
on:mouseenter=on_mouse_enter
on:mouseleave=on_mouse_leave
>
{children()}
</div>
</CSSTransition>
</Provider>
</Follower> </Follower>
</Binder> </Binder>
} }
} }
#[derive(Clone)]
pub(crate) struct MenuInjection {
has_icon: RwSignal<bool>,
on_select: ArcOneCallback<String>,
}
impl MenuInjection {
pub fn expect_context() -> Self {
expect_context()
}
}
#[derive(Default, PartialEq, Clone)] #[derive(Default, PartialEq, Clone)]
pub enum MenuTriggerType { pub enum MenuTriggerType {
Hover, Hover,

35
demo_markdown/docs/message_bar/mod.md → thaw/src/message_bar/docs/mod.md
View file

@ -65,3 +65,38 @@ view! {
</MessageBar> </MessageBar>
} }
``` ```
### MessageBar Props
| Name | Type | Default | Description |
| -------- | ------------------------------- | ------------------------------ | ------------------------------------- |
| class | `MaybeProp<String>,` | `Default::default()` | |
| layout | `MaybeSignal<MessageBarLayout>` | `MessageBarLayout::Singleline` | |
| intent | `MaybeSignal<MessageBarIntent>` | `MessageBarIntent::Info` | Default designs announcement presets. |
| children | `Children` | | |
### MessageBarTitle Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### MessageBarBody Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### MessageBarActions Props
| Name | Type | Default | Description |
| ---------------------------- | -------------------------------- | ------- | ----------- |
| message_bar_container_action | slot `MessageBarContainerAction` | | |
| children | `Children` | | |
### MessageBarContainerAction Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |

97
thaw/src/nav/docs/mod.md Normal file
View file

@ -0,0 +1,97 @@
# Nav
```rust demo
view! {
<NavDrawer>
<NavCategory value="area">
<NavCategoryItem slot icon=icondata::AiAreaChartOutlined>
"Area Chart"
</NavCategoryItem>
<NavSubItem value="target">
"Target"
</NavSubItem>
<NavSubItem value="above">
"Above"
</NavSubItem>
<NavSubItem value="below">
"Below"
</NavSubItem>
</NavCategory>
<NavCategory value="pie">
<NavCategoryItem slot icon=icondata::AiPieChartOutlined>
"Pie Chart"
</NavCategoryItem>
<NavSubItem value="pie-target">
"Pie Target"
</NavSubItem>
<NavSubItem value="pin-above">
"Pin Above"
</NavSubItem>
<NavSubItem value="pin-below">
"Pin Below"
</NavSubItem>
</NavCategory>
<NavItem
icon=icondata::AiGithubOutlined
value="github"
href="https://github.com/thaw-ui/thaw"
attr:target="_blank"
>
"Github"
</NavItem>
<NavItem icon=icondata::AiChromeOutlined value="chrome">
"Chrome"
</NavItem>
</NavDrawer>
}
```
### NavDrawer Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `MaybeProp<String>,` | `Default::default()` | |
| selected_value | `OptionModel<String>` | `Default::default()` | The value of the currently selected navItem. |
| selected_category_value | `VecModel<String>` | `vec![]` | Indicates a category that has a selected child Will show the category as selected if it is closed. |
| nav_drawer_header | slot `Option<NavDrawerHeader>` | `None` | |
| nav_drawer_footer | slot `Option<NavDrawerFooter>` | `None` | |
| children | `Children` | | |
### NavDrawerHeader Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### NavDrawerFooter Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### NavCategory Props
| Name | Type | Default | Description |
| ----------------- | ---------------------- | ------- | ----------- |
| value | `MaybeSignal<String>` | | |
| nav_category_item | slot `NavCategoryItem` | | |
| children | `Children` | | |
### NavCategoryItem Props
| Name | Type | Default | Description |
| -------- | ------------------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>,` | `Default::default()` | |
| icon | `MaybeProp<icondata_core::Icon` | `None` | |
| children | `Children` | | |
### NavItem Props
| Name | Type | Default | Description |
| -------- | ------------------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>,` | `Default::default()` | |
| icon | `MaybeProp<icondata_core::Icon` | `None` | |
| value | `MaybeSignal<String>` | | |
| href | `Option<MaybeSignal<String>>` | `None` | |
| children | `Children` | | |

8
thaw/src/nav/nav_drawer.rs
View file

@ -6,8 +6,12 @@ use thaw_utils::{class_list, mount_style, OptionModel, VecModel};
#[component] #[component]
pub fn NavDrawer( pub fn NavDrawer(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] selected_value: OptionModel<String>, /// The value of the currently selected navItem.
#[prop(default = vec![].into(), into)] selected_category_value: VecModel<String>, #[prop(optional, into)]
selected_value: OptionModel<String>,
/// Indicates a category that has a selected child Will show the category as selected if it is closed.
#[prop(default = vec![].into(), into)]
selected_category_value: VecModel<String>,
children: Children, children: Children,
#[prop(optional)] nav_drawer_header: Option<NavDrawerHeader>, #[prop(optional)] nav_drawer_header: Option<NavDrawerHeader>,
#[prop(optional)] nav_drawer_footer: Option<NavDrawerFooter>, #[prop(optional)] nav_drawer_footer: Option<NavDrawerFooter>,

9
thaw/src/pagination/docs/mod.md
View file

@ -23,3 +23,12 @@ view! {
</Space> </Space>
} }
``` ```
### Pagination Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| page | `Model<usize>` | `1` | The current page starts from 1. |
| page_count | `MaybeSignal<usize>` | | The total numbers of pages. |
| sibling_count | `MaybeSignal<usize>` | `1` | Number of visible pages after and before the current page. |

9
thaw/src/pagination/mod.rs
View file

@ -5,10 +5,13 @@ use thaw_utils::{class_list, mount_style, Model};
#[component] #[component]
pub fn Pagination( pub fn Pagination(
#[prop(default = 1.into(), into)] page: Model<usize>,
#[prop(into)] page_count: MaybeSignal<usize>,
#[prop(default = 1.into(), into)] sibling_count: MaybeSignal<usize>,
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// The current page starts from 1.
#[prop(default = 1.into(), into)] page: Model<usize>,
/// The total numbers of pages.
#[prop(into)] page_count: MaybeSignal<usize>,
/// Number of visible pages after and before the current page.
#[prop(default = 1.into(), into)] sibling_count: MaybeSignal<usize>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("pagination", include_str!("./pagination.css")); mount_style("pagination", include_str!("./pagination.css"));