From 8fb236358aaa8fd3fe1e8c991b57eda805083cae Mon Sep 17 00:00:00 2001 From: luoxiao Date: Mon, 12 Aug 2024 22:58:43 +0800 Subject: [PATCH] feat(docs): adds component prop --- demo_markdown/docs/image/mod.md | 31 ------ demo_markdown/docs/nav/mod.md | 48 --------- demo_markdown/src/lib.rs | 14 +-- thaw/src/image/docs/mod.md | 32 ++++++ thaw/src/image/mod.rs | 10 +- .../docs/input => thaw/src/input/docs}/mod.md | 40 ++++---- thaw/src/input/mod.rs | 32 ++++-- .../layout => thaw/src/layout/docs}/mod.md | 29 +++--- thaw/src/layout/layout_sider.rs | 2 + thaw/src/layout/mod.rs | 8 ++ .../src/loading_bar/docs}/mod.md | 0 thaw/src/loading_bar/loading_bar_provider.rs | 3 + .../docs/menu => thaw/src/menu/docs}/mod.md | 50 +++++----- thaw/src/menu/menu_item.rs | 31 +++--- thaw/src/menu/mod.rs | 92 +++++++++++------- .../src/message_bar/docs}/mod.md | 35 +++++++ thaw/src/nav/docs/mod.md | 97 +++++++++++++++++++ thaw/src/nav/nav_drawer.rs | 8 +- thaw/src/pagination/docs/mod.md | 9 ++ thaw/src/pagination/mod.rs | 9 +- 20 files changed, 371 insertions(+), 209 deletions(-) delete mode 100644 demo_markdown/docs/image/mod.md delete mode 100644 demo_markdown/docs/nav/mod.md create mode 100644 thaw/src/image/docs/mod.md rename {demo_markdown/docs/input => thaw/src/input/docs}/mod.md (61%) rename {demo_markdown/docs/layout => thaw/src/layout/docs}/mod.md (52%) rename {demo_markdown/docs/loading_bar => thaw/src/loading_bar/docs}/mod.md (100%) rename {demo_markdown/docs/menu => thaw/src/menu/docs}/mod.md (70%) rename {demo_markdown/docs/message_bar => thaw/src/message_bar/docs}/mod.md (54%) create mode 100644 thaw/src/nav/docs/mod.md diff --git a/demo_markdown/docs/image/mod.md b/demo_markdown/docs/image/mod.md deleted file mode 100644 index 6540b3f..0000000 --- a/demo_markdown/docs/image/mod.md +++ /dev/null @@ -1,31 +0,0 @@ -# Image - -```rust demo -view! { - - -} -``` - -### Shape - -```rust demo -view! { - - - -} -``` - - -### Image Props - -| Name | Type | Default | Desciption | -| --- | --- | --- | --- | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the image element. | -| src | `OptionalProp>` | `Default::default()` | Image source. | -| alt | `OptionalProp>` | `Default::default()` | Image alt information. | -| width | `MaybeSignal` | `Default::default()` | Image width. | -| height | `MaybeSignal` | `Default::default()` | Image height. | -| border_radius | `MaybeSignal` | `Default::default()` | Image border radius. | -| object_fit | `MaybeSignal` | `Default::default()` | Object-fit type of the image in the container. | diff --git a/demo_markdown/docs/nav/mod.md b/demo_markdown/docs/nav/mod.md deleted file mode 100644 index 028504e..0000000 --- a/demo_markdown/docs/nav/mod.md +++ /dev/null @@ -1,48 +0,0 @@ -# Nav - -```rust demo - -view! { - - - - "Area Chart" - - - "Target" - - - "Above" - - - "Below" - - - - - "Pie Chart" - - - "Pie Target" - - - "Pin Above" - - - "Pin Below" - - - - "Github" - - - "Chrome" - - -} -``` diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index 25d1550..c448e2d 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -44,13 +44,13 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt "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", - "LoadingBarMdPage" => "../docs/loading_bar/mod.md", - "MenuMdPage" => "../docs/menu/mod.md", - "MessageBarMdPage" => "../docs/message_bar/mod.md", - "NavMdPage" => "../docs/nav/mod.md", + "ImageMdPage" => "../../thaw/src/image/docs/mod.md", + "InputMdPage" => "../../thaw/src/input/docs/mod.md", + "LayoutMdPage" => "../../thaw/src/layout/docs/mod.md", + "LoadingBarMdPage" => "../../thaw/src/loading_bar/docs/mod.md", + "MenuMdPage" => "../../thaw/src/menu/docs/mod.md", + "MessageBarMdPage" => "../../thaw/src/message_bar/docs/mod.md", + "NavMdPage" => "../../thaw/src/nav/docs/mod.md", "PaginationMdPage" => "../../thaw/src/pagination/docs/mod.md", "PopoverMdPage" => "../docs/popover/mod.md", "ProgressBarMdPage" => "../docs/progress_bar/mod.md", diff --git a/thaw/src/image/docs/mod.md b/thaw/src/image/docs/mod.md new file mode 100644 index 0000000..1c6bce3 --- /dev/null +++ b/thaw/src/image/docs/mod.md @@ -0,0 +1,32 @@ +# Image + +```rust demo +view! { + + +} +``` + +### Shape + +```rust demo +view! { + + + +} +``` + +### Image Props + +| Name | Type | Default | Desciption | +| --- | --- | --- | --- | +| class | `MaybeProp` | `Default::default()` | | +| src | `MaybeProp` | `Default::default()` | path to the image you want to display. | +| alt | `MaybeProp` | `Default::default()` | description of the image, which isn't mandatory but is incredibly useful for accessibility. | +| width | `MaybeProp` | `Default::default()` | Image width. | +| height | `MaybeProp` | `Default::default()` | Image height. | +| shape | `MaybeSignal` | `ImageShape::Square` | An image can appear square, circular, or rounded. | +| block | `MaybeSignal` | `Default::default()` | An image can take up the width of its container. | +| shadow | `MaybeSignal` | `Default::default()` | An image can appear elevated with shadow. | +| fit | `MaybeSignal` | `ImageFit::Fill` | An image can set how it should be resized to fit its container. | diff --git a/thaw/src/image/mod.rs b/thaw/src/image/mod.rs index 9a6c58b..9612659 100644 --- a/thaw/src/image/mod.rs +++ b/thaw/src/image/mod.rs @@ -3,18 +3,21 @@ use thaw_utils::{class_list, mount_style}; #[component] pub fn Image( - /// path to the image you want to display + #[prop(optional, into)] class: MaybeProp, + /// path to the image you want to display. #[prop(optional, into)] src: MaybeProp, - /// 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)] alt: MaybeProp, + /// Image width. #[prop(optional, into)] width: MaybeProp, + /// Image height. #[prop(optional, into)] height: MaybeProp, /// An image can appear square, circular, or rounded. #[prop(optional, into)] shape: MaybeSignal, - /// 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)] block: MaybeSignal, /// 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. #[prop(optional, into)] fit: MaybeSignal, - #[prop(optional, into)] class: MaybeProp, ) -> impl IntoView { mount_style("image", include_str!("./image.css")); diff --git a/demo_markdown/docs/input/mod.md b/thaw/src/input/docs/mod.md similarity index 61% rename from demo_markdown/docs/input/mod.md rename to thaw/src/input/docs/mod.md index e1410fa..d410903 100644 --- a/demo_markdown/docs/input/mod.md +++ b/thaw/src/input/docs/mod.md @@ -105,31 +105,35 @@ view! { | Name | Type | Default | Description | | --- | --- | --- | --- | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the input element. | +| class | `MaybeProp` | `Default::default()` | | | value | `Model` | `Default::default()` | Set the input value. | -| variant | `MaybeSignal` | `InputVariant::Text` | Input's variant. | -| placeholder | `OptionalProp>` | `Default::default()` | Placeholder of input. | +| allow_value | `Option>` | `None` | Check the incoming value, if it returns false, input will not be accepted. | +| input_type | `MaybeSignal` | `InputType::Text` | An input can have different text-based types based on the type of value the user will enter. | +| placeholder | `MaybeProp` | `Default::default()` | Placeholder text for the input. | | disabled | `MaybeSignal` | `false` | Whether the input is disabled. | -| invalid | `MaybeSignal` | `false` | Whether the input is invalid. | -| allow_value | `Option>` | `None` | Check the incoming value, if it returns false, input will not be accepted. | -| on_focus | `Option>` | `None` | Callback triggered when the input is focussed on. | -| on_blur | `Option>` | `None` | Callback triggered when the input is blurred. | -| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. | +| on_focus | `Option>` | `None` | Callback triggered when the input is focussed on. | +| on_blur | `Option>` | `None` | Callback triggered when the input is blurred. | +| parser | `OptionalProp>>` | `None` | Modifies the user input before assigning it to the value. | +| format | `OptionalProp>` | `None` | Formats the value to be shown to the user | +| input_prefix | slot `Option` | `None` | | +| input_suffix | slot `Option` | `None` | | +| comp_ref | ref `ComponentRef` | `Default::default()` | | -### Input Slots +### InputPrefix Props -| Name | Default | Description | -| ----------- | ------- | -------------------- | -| InputPrefix | `None` | InputPrefix content. | -| InputSuffix | `None` | InputSuffix content. | +| Name | Type | Default | Description | +| -------- | ---------- | ------- | ----------- | +| children | `Children` | | | -### Input Ref +### InputSuffix Props + +| Name | Type | Default | Description | +| -------- | ---------- | ------- | ----------- | +| children | `Children` | | | + +### InputRef Props | Name | Type | Description | | ----- | ----------- | ------------------------ | | focus | `Fn(&self)` | Focus the input element. | | blur | `Fn(&self)` | Blur the input element. | - -### TextArea Props - -Removes variant and slot from Input component. diff --git a/thaw/src/input/mod.rs b/thaw/src/input/mod.rs index f6d71ad..0689107 100644 --- a/thaw/src/input/mod.rs +++ b/thaw/src/input/mod.rs @@ -19,23 +19,37 @@ pub struct InputSuffix { #[component] pub fn Input( - #[prop(optional, into)] value: Model, - #[prop(optional, into)] allow_value: Option>, - #[prop(optional, into)] input_type: MaybeSignal, + #[prop(optional, into)] class: MaybeProp, + /// Set the input value. + #[prop(optional, into)] + value: Model, + /// Check the incoming value, if it returns false, input will not be accepted. + #[prop(optional, into)] + allow_value: Option>, + /// An input can have different text-based types based on the type of value the user will enter. + #[prop(optional, into)] + input_type: MaybeSignal, /// Placeholder text for the input. #[prop(optional, into)] placeholder: MaybeProp, - #[prop(optional, into)] on_focus: Option>, - #[prop(optional, into)] on_blur: Option>, + /// Callback triggered when the input is focussed on. + #[prop(optional, into)] + on_focus: Option>, + /// Callback triggered when the input is blurred. + #[prop(optional, into)] + on_blur: Option>, /// Whether the input is disabled. #[prop(optional, into)] disabled: MaybeSignal, #[prop(optional)] input_prefix: Option, #[prop(optional)] input_suffix: Option, #[prop(optional)] comp_ref: ComponentRef, - #[prop(optional, into)] class: MaybeProp, - #[prop(optional, into)] parser: OptionalProp>>, - #[prop(optional, into)] format: OptionalProp>, + /// Modifies the user input before assigning it to the value. + #[prop(optional, into)] + parser: OptionalProp>>, + /// Formats the value to be shown to the user. + #[prop(optional, into)] + format: OptionalProp>, // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, ) -> impl IntoView { mount_style("input", include_str!("./input.css")); @@ -219,12 +233,14 @@ pub struct InputRef { } impl InputRef { + /// Focus the input element. pub fn focus(&self) { if let Some(input_el) = self.input_ref.get_untracked() { _ = input_el.focus(); } } + /// Blur the input element. pub fn blur(&self) { if let Some(input_el) = self.input_ref.get_untracked() { _ = input_el.blur(); diff --git a/demo_markdown/docs/layout/mod.md b/thaw/src/layout/docs/mod.md similarity index 52% rename from demo_markdown/docs/layout/mod.md rename to thaw/src/layout/docs/mod.md index 32424fb..702c31c 100644 --- a/demo_markdown/docs/layout/mod.md +++ b/thaw/src/layout/docs/mod.md @@ -35,18 +35,25 @@ view! { | Name | Type | Default | Description | | --- | --- | --- | --- | -| class | `OptionalProp>` | `Default::default()` | Class of scrollable content node. | -| style | `OptionalProp>` | `Default::default()` | Layout's style. | -| content_class | `OptionalProp>` | `Default::default()` | Addtional classes for the layout element. | -| content_style | `OptionalProp>` | `Default::default()` | Style of scrollable content node. | +| class | `MaybeProp` | `Default::default()` | | +| content_class | `MaybeProp` | `Default::default()` | Addtional classes for the layout element. | +| content_style | `MaybeProp` | `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. | | has_sider | `MaybeSignal` | `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 | -| --- | --- | --- | --- | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the layout header element. | -| style | `OptionalProp>` | `Default::default()` | LayoutHeader's style. | -| children | `Children` | | LayoutHeader's content. | +| Name | Type | Default | Description | +| -------- | ------------------- | -------------------- | ----------- | +| class | `MaybeProp` | `Default::default()` | | +| children | `Children` | | | + +### LayoutSider Props + +| Name | Type | Default | Description | +| ------------- | ------------------- | -------------------- | ----------------------------------------- | +| class | `MaybeProp` | `Default::default()` | | +| content_class | `MaybeProp` | `Default::default()` | Addtional classes for the layout element. | +| content_style | `MaybeProp` | `Default::default()` | Style of scrollable content node. | +| children | `Children` | | | diff --git a/thaw/src/layout/layout_sider.rs b/thaw/src/layout/layout_sider.rs index 3d09614..4716349 100644 --- a/thaw/src/layout/layout_sider.rs +++ b/thaw/src/layout/layout_sider.rs @@ -5,7 +5,9 @@ use thaw_utils::{class_list, mount_style}; #[component] pub fn LayoutSider( #[prop(optional, into)] class: MaybeProp, + /// Addtional classes for the scroll element. #[prop(optional, into)] content_class: MaybeProp, + /// Style of scrollable content node. #[prop(optional, into)] content_style: MaybeProp, children: Children, ) -> impl IntoView { diff --git a/thaw/src/layout/mod.rs b/thaw/src/layout/mod.rs index e7ff9e2..8573f41 100644 --- a/thaw/src/layout/mod.rs +++ b/thaw/src/layout/mod.rs @@ -27,8 +27,16 @@ impl LayoutPosition { #[component] pub fn Layout( #[prop(optional, into)] class: MaybeProp, + /// Addtional classes for the layout element. #[prop(optional, into)] content_class: MaybeProp, + /// Style of scrollable content node. #[prop(optional, into)] content_style: MaybeProp, + /// 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, /// Whether the component has sider inside. If so it must be true. #[prop(optional, into)] has_sider: MaybeSignal, diff --git a/demo_markdown/docs/loading_bar/mod.md b/thaw/src/loading_bar/docs/mod.md similarity index 100% rename from demo_markdown/docs/loading_bar/mod.md rename to thaw/src/loading_bar/docs/mod.md diff --git a/thaw/src/loading_bar/loading_bar_provider.rs b/thaw/src/loading_bar/loading_bar_provider.rs index d01b7a4..1e76097 100644 --- a/thaw/src/loading_bar/loading_bar_provider.rs +++ b/thaw/src/loading_bar/loading_bar_provider.rs @@ -30,18 +30,21 @@ impl LoadingBarInjection { expect_context::() } + /// Callback function for loading bar to start loading. pub fn start(&self) { if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() { loading_bar_ref.start(); } } + /// The callback function when the loading bar finishes loading. pub fn finish(&self) { if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() { loading_bar_ref.finish(); } } + /// Callback function for loading bar error. pub fn error(&self) { if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() { loading_bar_ref.error(); diff --git a/demo_markdown/docs/menu/mod.md b/thaw/src/menu/docs/mod.md similarity index 70% rename from demo_markdown/docs/menu/mod.md rename to thaw/src/menu/docs/mod.md index c6dc31b..4bd2e24 100644 --- a/demo_markdown/docs/menu/mod.md +++ b/thaw/src/menu/docs/mod.md @@ -150,33 +150,29 @@ view! { ### Menu Props -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu element. | -| on_select | `Callback` | | Called when item is selected. | -| trigger_type | `MenuTriggerType` | `MenuTriggerType::Click` | Action that displays the menu. | -| position | `MenuPosition` | `MenuPosition::Bottom` | Menu position. | -| children | `Children` | | The content inside menu. | - -### MenuItem Props - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu item element. | -| value | `MaybeSignal` | `Default::default()` | The value of the menu item. | -| label | `MaybeSignal` | `Default::default()` | The label of the menu item. | -| icon | `OptionalMaybeSignal` | `None` | The icon of the menu item. | -| disabled | `MaybeSignal` | `false` | Whether the menu item is disabled. | - -### Menu Slots - -| Name | Default | Description | -| ----------- | ------- | -------------------------------------------- | -| MenuTrigger | `None` | The element or component that triggers menu. | +| Name | Type | Default | Description | +| ------------ | --------------------------- | ------------------------ | -------------------------------------------- | +| class | `MaybeProp,` | `Default::default()` | | +| on_select | `BoxOneCallback` | | Called when item is selected. | +| trigger_type | `MenuTriggerType` | `MenuTriggerType::Click` | Action that displays the menu. | +| position | `MenuPosition` | `MenuPosition::Bottom` | Menu position. | +| appearance | `MaybeProp` | `Default::default()` | | +| menu_trigger | slot `MenuTrigger` | | The element or component that triggers menu. | +| children | `Children` | | | ### MenuTriger Props -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu trigger element. | -| children | `Children` | | The content inside menu trigger. | +| Name | Type | Default | Description | +| -------- | ------------------- | -------------------- | ----------- | +| class | `MaybeProp` | `Default::default()` | | +| children | `Children` | | | + +### MenuItem Props + +| Name | Type | Default | Description | +| -------- | -------------------------------- | -------------------- | ---------------------------------- | +| class | `MaybeProp` | `Default::default()` | | +| value | `MaybeSignal` | `Default::default()` | The value of the menu item. | +| icon | `MaybeProp` | `None` | The icon of the menu item. | +| disabled | `MaybeSignal` | `false` | Whether the menu item is disabled. | +| children | `Children` | | | diff --git a/thaw/src/menu/menu_item.rs b/thaw/src/menu/menu_item.rs index ebb2f7f..0dbca2f 100644 --- a/thaw/src/menu/menu_item.rs +++ b/thaw/src/menu/menu_item.rs @@ -1,34 +1,39 @@ -use crate::{ - menu::{HasIcon, OnSelect}, - Icon, -}; +use crate::{Icon, MenuInjection}; use leptos::prelude::*; use thaw_components::{Fallback, If, OptionComp, Then}; use thaw_utils::{class_list, mount_style}; #[component] pub fn MenuItem( - #[prop(optional, into)] icon: MaybeProp, - #[prop(into)] value: MaybeSignal, - #[prop(optional, into)] disabled: MaybeSignal, #[prop(optional, into)] class: MaybeProp, + /// The icon of the menu item. + #[prop(optional, into)] + icon: MaybeProp, + /// The value of the menu item. + #[prop(into)] + value: MaybeSignal, + /// Whether the menu item is disabled. + #[prop(optional, into)] + disabled: MaybeSignal, children: Children, ) -> impl IntoView { mount_style("menu-item", include_str!("./menu-item.css")); - let has_icon = use_context::().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); } - let on_select = use_context::().expect("OnSelect not provided").0; - let on_click = move |_| { - if disabled.get() { + if disabled.get_untracked() { return; } - on_select(value.get()); + + on_select(value.get_untracked()); }; view! { diff --git a/thaw/src/menu/mod.rs b/thaw/src/menu/mod.rs index 4c637ed..411093d 100644 --- a/thaw/src/menu/mod.rs +++ b/thaw/src/menu/mod.rs @@ -3,11 +3,12 @@ mod menu_item; pub use menu_item::*; 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 thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement}; 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] @@ -17,20 +18,21 @@ pub struct MenuTrigger { children: Children, } -#[derive(Copy, Clone)] -struct HasIcon(RwSignal); - -#[derive(Clone)] -struct OnSelect(ArcOneCallback); - #[component] pub fn Menu( #[prop(optional, into)] class: MaybeProp, + /// The element or component that triggers menu. menu_trigger: MenuTrigger, - #[prop(optional)] trigger_type: MenuTriggerType, - #[prop(optional)] position: MenuPosition, - #[prop(into)] on_select: ArcOneCallback, - #[prop(optional, into)] appearance: Option>, + /// Action that displays the menu. + #[prop(optional)] + trigger_type: MenuTriggerType, + /// Menu position. + #[prop(optional)] + position: MenuPosition, + /// Called when item is selected. + #[prop(into)] + on_select: BoxOneCallback, + #[prop(optional, into)] appearance: MaybeProp, children: Children, ) -> impl IntoView { mount_style("menu", include_str!("./menu.css")); @@ -93,11 +95,13 @@ pub fn Menu( children: trigger_children, } = menu_trigger; - provide_context(HasIcon(RwSignal::new(false))); - provide_context(OnSelect(ArcOneCallback::::new(move |key| { - is_show_menu.set(false); - on_select(key); - }))); + let menu_injection = MenuInjection { + has_icon: RwSignal::new(false), + on_select: ArcOneCallback::new(move |value| { + is_show_menu.set(false); + on_select(value); + }), + }; view! { @@ -110,33 +114,47 @@ pub fn Menu( {trigger_children()} - -
+ - {children()} -
- +
+ {children()} +
+ + } } +#[derive(Clone)] +pub(crate) struct MenuInjection { + has_icon: RwSignal, + on_select: ArcOneCallback, +} + +impl MenuInjection { + pub fn expect_context() -> Self { + expect_context() + } +} + #[derive(Default, PartialEq, Clone)] pub enum MenuTriggerType { Hover, diff --git a/demo_markdown/docs/message_bar/mod.md b/thaw/src/message_bar/docs/mod.md similarity index 54% rename from demo_markdown/docs/message_bar/mod.md rename to thaw/src/message_bar/docs/mod.md index d4c7848..9002261 100644 --- a/demo_markdown/docs/message_bar/mod.md +++ b/thaw/src/message_bar/docs/mod.md @@ -65,3 +65,38 @@ view! { } ``` + +### MessageBar Props + +| Name | Type | Default | Description | +| -------- | ------------------------------- | ------------------------------ | ------------------------------------- | +| class | `MaybeProp,` | `Default::default()` | | +| layout | `MaybeSignal` | `MessageBarLayout::Singleline` | | +| intent | `MaybeSignal` | `MessageBarIntent::Info` | Default designs announcement presets. | +| children | `Children` | | | + +### MessageBarTitle Props + +| Name | Type | Default | Description | +| -------- | ------------------- | -------------------- | ----------- | +| class | `MaybeProp` | `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` | | | diff --git a/thaw/src/nav/docs/mod.md b/thaw/src/nav/docs/mod.md new file mode 100644 index 0000000..cf219b5 --- /dev/null +++ b/thaw/src/nav/docs/mod.md @@ -0,0 +1,97 @@ +# Nav + +```rust demo + +view! { + + + + "Area Chart" + + + "Target" + + + "Above" + + + "Below" + + + + + "Pie Chart" + + + "Pie Target" + + + "Pin Above" + + + "Pin Below" + + + + "Github" + + + "Chrome" + + +} +``` + +### NavDrawer Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| class | `MaybeProp,` | `Default::default()` | | +| selected_value | `OptionModel` | `Default::default()` | The value of the currently selected navItem. | +| selected_category_value | `VecModel` | `vec![]` | Indicates a category that has a selected child Will show the category as selected if it is closed. | +| nav_drawer_header | slot `Option` | `None` | | +| nav_drawer_footer | slot `Option` | `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` | | | +| nav_category_item | slot `NavCategoryItem` | | | +| children | `Children` | | | + +### NavCategoryItem Props + +| Name | Type | Default | Description | +| -------- | ------------------------------- | -------------------- | ----------- | +| class | `MaybeProp,` | `Default::default()` | | +| icon | `MaybeProp,` | `Default::default()` | | +| icon | `MaybeProp` | | | +| href | `Option>` | `None` | | +| children | `Children` | | | diff --git a/thaw/src/nav/nav_drawer.rs b/thaw/src/nav/nav_drawer.rs index ad2c409..d14a20e 100644 --- a/thaw/src/nav/nav_drawer.rs +++ b/thaw/src/nav/nav_drawer.rs @@ -6,8 +6,12 @@ use thaw_utils::{class_list, mount_style, OptionModel, VecModel}; #[component] pub fn NavDrawer( #[prop(optional, into)] class: MaybeProp, - #[prop(optional, into)] selected_value: OptionModel, - #[prop(default = vec![].into(), into)] selected_category_value: VecModel, + /// The value of the currently selected navItem. + #[prop(optional, into)] + selected_value: OptionModel, + /// 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, children: Children, #[prop(optional)] nav_drawer_header: Option, #[prop(optional)] nav_drawer_footer: Option, diff --git a/thaw/src/pagination/docs/mod.md b/thaw/src/pagination/docs/mod.md index 30974db..b7b3c6d 100644 --- a/thaw/src/pagination/docs/mod.md +++ b/thaw/src/pagination/docs/mod.md @@ -23,3 +23,12 @@ view! { } ``` + +### Pagination Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| class | `MaybeProp` | `Default::default()` | | +| page | `Model` | `1` | The current page starts from 1. | +| page_count | `MaybeSignal` | | The total numbers of pages. | +| sibling_count | `MaybeSignal` | `1` | Number of visible pages after and before the current page. | diff --git a/thaw/src/pagination/mod.rs b/thaw/src/pagination/mod.rs index 812e236..8a392bf 100644 --- a/thaw/src/pagination/mod.rs +++ b/thaw/src/pagination/mod.rs @@ -5,10 +5,13 @@ use thaw_utils::{class_list, mount_style, Model}; #[component] pub fn Pagination( - #[prop(default = 1.into(), into)] page: Model, - #[prop(into)] page_count: MaybeSignal, - #[prop(default = 1.into(), into)] sibling_count: MaybeSignal, #[prop(optional, into)] class: MaybeProp, + /// The current page starts from 1. + #[prop(default = 1.into(), into)] page: Model, + /// The total numbers of pages. + #[prop(into)] page_count: MaybeSignal, + /// Number of visible pages after and before the current page. + #[prop(default = 1.into(), into)] sibling_count: MaybeSignal, ) -> impl IntoView { mount_style("pagination", include_str!("./pagination.css"));