From 1e4832a6d06aab1ee1e02b9597926781cbf2ea50 Mon Sep 17 00:00:00 2001 From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com> Date: Sun, 31 Dec 2023 23:33:05 +0800 Subject: [PATCH] refactor demo docs (#64) * demo: refactor docs * demo: refactor docs * demo: refactor docs * demo: refactor docs --- demo/src/app.rs | 41 ++-- demo/src/components/demo.rs | 2 +- demo/src/components/syntect-css.css | 4 + demo/src/pages/loading_bar/mod.rs | 86 ------- demo/src/pages/menu/mod.rs | 126 ---------- demo/src/pages/message/mod.rs | 94 -------- demo/src/pages/mod.rs | 40 ---- demo/src/pages/modal/mod.rs | 86 ------- demo/src/pages/popover/mod.rs | 316 -------------------------- demo/src/pages/progress/mod.rs | 94 -------- demo/src/pages/radio/mod.rs | 64 ------ demo/src/pages/select/mod.rs | 69 ------ demo/src/pages/skeleton/mod.rs | 65 ------ demo/src/pages/slider/mod.rs | 152 ------------- demo/src/pages/space/mod.rs | 125 ---------- demo/src/pages/spinner/mod.rs | 83 ------- demo/src/pages/switch/mod.rs | 55 ----- demo/src/pages/table/mod.rs | 109 --------- demo/src/pages/tabs/mod.rs | 125 ---------- demo/src/pages/tag/mod.rs | 75 ------ demo/src/pages/theme/mod.rs | 136 ----------- demo/src/pages/time_picker/mod.rs | 60 ----- demo/src/pages/typography/mod.rs | 73 ------ demo/src/pages/upload/mod.rs | 136 ----------- demo_markdown/docs/loading_bar/mod.md | 34 +++ demo_markdown/docs/menu/mod.md | 36 +++ demo_markdown/docs/message/mod.md | 40 ++++ demo_markdown/docs/modal/mod.md | 26 +++ demo_markdown/docs/popover/mod.md | 144 ++++++++++++ demo_markdown/docs/progress/mod.md | 29 +++ demo_markdown/docs/radio/mod.md | 17 ++ demo_markdown/docs/select/mod.md | 28 +++ demo_markdown/docs/skeleton/mod.md | 17 ++ demo_markdown/docs/slider/mod.md | 56 +++++ demo_markdown/docs/space/mod.md | 49 ++++ demo_markdown/docs/spinner/mod.md | 27 +++ demo_markdown/docs/switch/mod.md | 16 ++ demo_markdown/docs/table/mod.md | 37 +++ demo_markdown/docs/tabs/mod.md | 33 +++ demo_markdown/docs/tag/mod.md | 20 ++ demo_markdown/docs/theme/mod.md | 63 +++++ demo_markdown/docs/time_picker/mod.md | 18 ++ demo_markdown/docs/typography/mod.md | 18 ++ demo_markdown/src/lib.rs | 34 ++- demo_markdown/src/markdown/mod.rs | 15 +- 45 files changed, 779 insertions(+), 2194 deletions(-) delete mode 100644 demo/src/pages/loading_bar/mod.rs delete mode 100644 demo/src/pages/menu/mod.rs delete mode 100644 demo/src/pages/message/mod.rs delete mode 100644 demo/src/pages/modal/mod.rs delete mode 100644 demo/src/pages/popover/mod.rs delete mode 100644 demo/src/pages/progress/mod.rs delete mode 100644 demo/src/pages/radio/mod.rs delete mode 100644 demo/src/pages/select/mod.rs delete mode 100644 demo/src/pages/skeleton/mod.rs delete mode 100644 demo/src/pages/slider/mod.rs delete mode 100644 demo/src/pages/space/mod.rs delete mode 100644 demo/src/pages/spinner/mod.rs delete mode 100644 demo/src/pages/switch/mod.rs delete mode 100644 demo/src/pages/table/mod.rs delete mode 100644 demo/src/pages/tabs/mod.rs delete mode 100644 demo/src/pages/tag/mod.rs delete mode 100644 demo/src/pages/theme/mod.rs delete mode 100644 demo/src/pages/time_picker/mod.rs delete mode 100644 demo/src/pages/typography/mod.rs delete mode 100644 demo/src/pages/upload/mod.rs create mode 100644 demo_markdown/docs/loading_bar/mod.md create mode 100644 demo_markdown/docs/menu/mod.md create mode 100644 demo_markdown/docs/message/mod.md create mode 100644 demo_markdown/docs/modal/mod.md create mode 100644 demo_markdown/docs/popover/mod.md create mode 100644 demo_markdown/docs/progress/mod.md create mode 100644 demo_markdown/docs/radio/mod.md create mode 100644 demo_markdown/docs/select/mod.md create mode 100644 demo_markdown/docs/skeleton/mod.md create mode 100644 demo_markdown/docs/slider/mod.md create mode 100644 demo_markdown/docs/space/mod.md create mode 100644 demo_markdown/docs/spinner/mod.md create mode 100644 demo_markdown/docs/switch/mod.md create mode 100644 demo_markdown/docs/table/mod.md create mode 100644 demo_markdown/docs/tabs/mod.md create mode 100644 demo_markdown/docs/tag/mod.md create mode 100644 demo_markdown/docs/theme/mod.md create mode 100644 demo_markdown/docs/time_picker/mod.md create mode 100644 demo_markdown/docs/typography/mod.md diff --git a/demo/src/app.rs b/demo/src/app.rs index 4d6063c..0348a58 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -41,21 +41,13 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { - - - - - - - - @@ -66,23 +58,30 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs index 7b58782..309475a 100644 --- a/demo/src/components/demo.rs +++ b/demo/src/components/demo.rs @@ -24,7 +24,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView { style }); let code_style = create_memo(move |_| { - let mut style = String::from("font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;"); + let mut style = String::from("font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; overflow: auto;"); theme.with(|theme| { if theme.common.color_scheme == "dark" { style.push_str("border: 1px solid #383f52; border-top-width: 0;"); diff --git a/demo/src/components/syntect-css.css b/demo/src/components/syntect-css.css index 847cc9d..c529b26 100644 --- a/demo/src/components/syntect-css.css +++ b/demo/src/components/syntect-css.css @@ -7,6 +7,7 @@ /** light */ +.color-scheme--light .syntect-keyword, .color-scheme--light .syntect-storage { color: hsl(301, 63%, 40%); } @@ -28,12 +29,14 @@ color: hsl(119, 34%, 47%); } +.color-scheme--light .syntect-constant, .color-scheme--light .syntect-placeholder { color: hsl(41, 99%, 30%); } /** dark */ +.color-scheme--dark .syntect-keyword, .color-scheme--dark .syntect-storage { color: hsl(286, 60%, 67%); } @@ -55,6 +58,7 @@ color: hsl(95, 38%, 62%); } +.color-scheme--dark .syntect-constant, .color-scheme--dark .syntect-placeholder { color: hsl(29, 54%, 61%); } diff --git a/demo/src/pages/loading_bar/mod.rs b/demo/src/pages/loading_bar/mod.rs deleted file mode 100644 index aac0f04..0000000 --- a/demo/src/pages/loading_bar/mod.rs +++ /dev/null @@ -1,86 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn LoadingBarPage() -> impl IntoView { - let loading_bar = use_loading_bar(); - let start = Callback::new(move |_| { - loading_bar.start(); - }); - let finish = Callback::new(move |_| { - loading_bar.finish(); - }); - let error = Callback::new(move |_| { - loading_bar.error(); - }); - view! { -
-

"Loading Bar"

- - "If you want to use loading bar, you need to wrap the component where you call related methods inside LoadingBarProvider and use use_loading_bar to get the API." - - - - - - - - - - {highlight_str!( - r#" - let loading_bar = use_loading_bar(); - let start = move |_| { - loading_bar.start(); - }; - let finish = move |_| { - loading_bar.finish(); - }; - let error = move |_| { - loading_bar.error(); - }; - view! { - - - - - - } - "#, - "rust" - )} - - - -

"LoadingBar Injection Methods"

- - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Description"
"start""fn(&self)""Callback function for loading bar to start loading."
"finish""fn(&self)""The callback function when the loading bar finishes loading."
"error""fn(&self)""Callback function for loading bar error."
-
- } -} diff --git a/demo/src/pages/menu/mod.rs b/demo/src/pages/menu/mod.rs deleted file mode 100644 index 30f2387..0000000 --- a/demo/src/pages/menu/mod.rs +++ /dev/null @@ -1,126 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn MenuPage() -> impl IntoView { - let value = create_rw_signal(String::from("o")); - view! { -
-

"Menu"

- - - - - - -{highlight_str!( r#" - let value = create_rw_signal(String::from("o")); - - - - - - "#, - "rust" - )} - - - -

"Menu Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value""MaybeSignal""Default::default()""The selected item key of the menu."
"children""Children""Menu's content."
"class""MaybeSignal""Default::default()""Addtional classes for the menu element."
-

"MenuGroup Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"label""String""The label of the menu group."
"children""Children""MenuGroup's content."
"class""MaybeSignal""Default::default()""Addtional classes for the menu group element."
-

"MenuItem Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"label""MaybeSignal""Default::default()""The label of the menu item."
"key""MaybeSignal""Default::default()""The indentifier of the menu item."
"class""MaybeSignal""Default::default()""Addtional classes for the menu item element."
-
- } -} diff --git a/demo/src/pages/message/mod.rs b/demo/src/pages/message/mod.rs deleted file mode 100644 index 6d440ef..0000000 --- a/demo/src/pages/message/mod.rs +++ /dev/null @@ -1,94 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn MessagePage() -> impl IntoView { - let message = use_message(); - let success = move |_| { - message.create( - "Success".into(), - MessageVariant::Success, - Default::default(), - ); - }; - let warning = move |_| { - message.create( - "Warning".into(), - MessageVariant::Warning, - Default::default(), - ); - }; - let error = move |_| { - message.create("Error".into(), MessageVariant::Error, Default::default()); - }; - view! { -
-

"Message"

- - "If you want to use message, you need to wrap the component where you call related methods inside MessageProvider and use use_message to get the API." - - - - - - - - - - {highlight_str!( - r#" - let message = use_message(); - let success = move |_| { - message.create( - "Success".into(), - MessageVariant::Success, - Default::default(), - ); - }; - let warning = move |_| { - message.create( - "Warning".into(), - MessageVariant::Warning, - Default::default(), - ); - }; - let error = move |_| { - message.create("Error".into(), MessageVariant::Error, Default::default()); - }; - view! { - - - - - - } - "#, - "rust" - )} - - - -

"MessageProvider Injection Methods"

- - - - - - - - - - - - - - - -
"Name""Type""Description"
"create" - "fn(&self, content: String, variant: MessageVariant, options: MessageOptions)" - "The label of the menu item."
-
- } -} diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs index f935e25..b34ac97 100644 --- a/demo/src/pages/mod.rs +++ b/demo/src/pages/mod.rs @@ -19,31 +19,11 @@ mod image; mod input; mod input_number; mod layout; -mod loading_bar; mod markdown; -mod menu; -mod message; mod mobile; -mod modal; mod nav_bar; -mod popover; -mod progress; -mod radio; -mod select; -mod skeleton; -mod slider; -mod space; -mod spinner; -mod switch; mod tabbar; -mod table; -mod tabs; -mod tag; -mod theme; -mod time_picker; mod toast; -mod typography; -mod upload; pub use alert::*; pub use auto_complete::*; @@ -66,28 +46,8 @@ pub use image::*; pub use input::*; pub use input_number::*; pub use layout::*; -pub use loading_bar::*; pub use markdown::*; -pub use menu::*; -pub use message::*; pub use mobile::*; -pub use modal::*; pub use nav_bar::*; -pub use popover::*; -pub use progress::*; -pub use radio::*; -pub use select::*; -pub use skeleton::*; -pub use slider::*; -pub use space::*; -pub use spinner::*; -pub use switch::*; pub use tabbar::*; -pub use table::*; -pub use tabs::*; -pub use tag::*; -pub use theme::*; -pub use time_picker::*; pub use toast::*; -pub use typography::*; -pub use upload::*; diff --git a/demo/src/pages/modal/mod.rs b/demo/src/pages/modal/mod.rs deleted file mode 100644 index c51287e..0000000 --- a/demo/src/pages/modal/mod.rs +++ /dev/null @@ -1,86 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn ModalPage() -> impl IntoView { - let show = create_rw_signal(false); - view! { -
-

"Modal"

- - - - "hello" - - - - {highlight_str!( - r#" - let show = create_rw_signal(false); - - - - "hello" - - "#, - "rust" - )} - - - -

"Modal Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"show""MaybeSignal""Whether to show modal."
"title""MaybeSignal""Default::default()""Modal title."
"children""Children""Modal's content."
-

"Modal Slots"

- - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"ModalFooter""None""Footer content."
-
- } -} diff --git a/demo/src/pages/popover/mod.rs b/demo/src/pages/popover/mod.rs deleted file mode 100644 index 55e06b6..0000000 --- a/demo/src/pages/popover/mod.rs +++ /dev/null @@ -1,316 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use leptos_meta::Style; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn PopoverPage() -> impl IntoView { - view! { -
-

"Popover"

- - - - - - - "Content" - - - - - - "Content" - - - - - {highlight_str!( - r#" - - - - - - "Content" - - - "#, - "rust" - )} - - - -

"Placement"

- - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - {highlight_str!( - r#" - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - - - - - "Content" - - - - "#, - "rust" - )} - - - -

"Popover Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"class" - "MaybeSignal" - - "Default::default()" - "Content class of the popover."
"placement" - "PopoverPlacement" - - "PopoverPlacement::Top" - "Popover placement."
"children" - "Children" - "The content inside popover."
-

"Popover Slots"

- - - - - - - - - - - - - - - -
"Name""Default""Description"
"PopoverTrigger""The element or component that triggers popover."
-
- } -} diff --git a/demo/src/pages/progress/mod.rs b/demo/src/pages/progress/mod.rs deleted file mode 100644 index 59a8e25..0000000 --- a/demo/src/pages/progress/mod.rs +++ /dev/null @@ -1,94 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn ProgressPage() -> impl IntoView { - let percentage = create_rw_signal(0.0f32); - view! { -
-

"Progress"

- - - - - - - - - - - - - - - - {highlight_str!( - r#" - let percentage = create_rw_signal(0.0f32); - - view! { - - - - - - - - - - - - - } - "#, - "rust" - )} - - - -

"Progress Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"percentage""MaybeSignal""0""Percentage value."
"color""MaybeSignal""ProgressColor::Primary""Progress color."
"show_indicator""MaybeSignal""true""Whether to display indicators."
"indicator_placement""MaybeSignal""ProgressIndicatorPlacement::Outside""Indicator placement."
-
- } -} diff --git a/demo/src/pages/radio/mod.rs b/demo/src/pages/radio/mod.rs deleted file mode 100644 index e8711ff..0000000 --- a/demo/src/pages/radio/mod.rs +++ /dev/null @@ -1,64 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn RadioPage() -> impl IntoView { - let checked = create_rw_signal(false); - view! { -
-

"Radio"

- - "Click" - - - {highlight_str!( - r#" - let value = create_rw_signal(false); - - view! { - - "Click" - - } - "#, - "rust" - )} - - - -

"Radio Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value""RwSignal""false""Checked value."
"children""Children""Radio's content."
"class""MaybeSignal""Default::default()""Addtional classes for the radio element."
-
- } -} diff --git a/demo/src/pages/select/mod.rs b/demo/src/pages/select/mod.rs deleted file mode 100644 index cfce1bf..0000000 --- a/demo/src/pages/select/mod.rs +++ /dev/null @@ -1,69 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn SelectPage() -> impl IntoView { - let selected_value = create_rw_signal(Some(String::from("apple"))); - - let options = vec![SelectOption { - label: String::from("apple"), - value: String::from("apple"), - }]; - view! { -
-

"Select"

- - - "#, - "rust" - )} - - - -

"Select Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value""RwSignal>""None""Checked value."
"options""MaybeSignal>>""vec![]""Options that can be selected."
"class""MaybeSignal""Default::default()""Addtional classes for the select element."
-
- } -} diff --git a/demo/src/pages/skeleton/mod.rs b/demo/src/pages/skeleton/mod.rs deleted file mode 100644 index 0938194..0000000 --- a/demo/src/pages/skeleton/mod.rs +++ /dev/null @@ -1,65 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn SkeletonPage() -> impl IntoView { - view! { -
-

"Skeleton"

- - - - - - {highlight_str!( - r#" - - - "#, - "rust" - )} - - - -

"Skeleton Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"repeat""MaybeSignal""1""Repeat frequency."
"text""MaybeSignal""false""Text skeleton."
"width""Option>""None""Skeleton width."
"height""Option>""None""Text skeleton."
-
- } -} diff --git a/demo/src/pages/slider/mod.rs b/demo/src/pages/slider/mod.rs deleted file mode 100644 index 91835f9..0000000 --- a/demo/src/pages/slider/mod.rs +++ /dev/null @@ -1,152 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn SliderPage() -> impl IntoView { - let value = create_rw_signal(0.0); - let stepped_value = create_rw_signal(0.0); - let labeled_value = create_rw_signal(0.0); - - view! { -
-

"Slider"

- - - - - {highlight_str!( - r#" - let value = create_rw_signal(0.0); - - - "#, - "rust" - )} - - - -

"step"

- - - - - {highlight_str!( - r#" - let value = create_rw_signal(0.0); - - - "#, - "rust" - )} - - - -

"SliderLabel"

- - - - "0" - - - "5" - - - "10" - - - - - {highlight_str!( - r#" - let value = create_rw_signal(0.0); - - - - "0" - - - "5" - - - "10" - - - "#, - "rust" - )} - - - -

"Slider Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value""RwSignal""0""Value of the slider."
"max""MaybeSignal""100""Max value of the slider."
"step""MaybeSignal""The step in which value is incremented."
"children""Option""Slider labels."
"class""MaybeSignal""Default::default()""Addtional classes for the slider element."
-

"SliderLabel Props"

- - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value""ReadSignal""Value at which label will be placed."
"children""Children""Content of the lable."
-
- } -} diff --git a/demo/src/pages/space/mod.rs b/demo/src/pages/space/mod.rs deleted file mode 100644 index da07c37..0000000 --- a/demo/src/pages/space/mod.rs +++ /dev/null @@ -1,125 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn SpacePage() -> impl IntoView { - view! { -
-

"Space"

- - - - - - - - - {highlight_str!( - r#" - - - - - - "#, - "rust" - )} - - - -

"vertical"

- - - - - - - - - {highlight_str!( - r#" - - - - - - "#, - "rust" - )} - - - -

"gap"

- - - - - - - - - - - - - - {highlight_str!( - r#" - - - - - - - - - - - "#, - "rust" - )} - - - -

"Space Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"gap""SpaceGap""SpaceGap::Medium""Space's gap."
"vertical""MaybeSignal""false""Whether to lay out vertically."
"children""Children""Space's content."
"class""MaybeSignal""Default::default()""Addtional classes for the space element."
-
- } -} diff --git a/demo/src/pages/spinner/mod.rs b/demo/src/pages/spinner/mod.rs deleted file mode 100644 index 06d18b5..0000000 --- a/demo/src/pages/spinner/mod.rs +++ /dev/null @@ -1,83 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn SpinnerPage() -> impl IntoView { - view! { -
-

"Spinner"

- - - - - - - {highlight_str!( - r#" - - "#, - "rust" - )} - - - -

"size"

- - - - - - - - - - {highlight_str!( - r#" - - - - - "#, - "rust" - )} - - - -

"Spinner Props"

- - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"class" - "MaybeSignal" - - "Default::default()" - "Additional classes for the spinner element."
"size" - "MaybeSignal" - - "SpinnerSize::Medium" - "Spinner size."
-
- } -} diff --git a/demo/src/pages/switch/mod.rs b/demo/src/pages/switch/mod.rs deleted file mode 100644 index 6829192..0000000 --- a/demo/src/pages/switch/mod.rs +++ /dev/null @@ -1,55 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn SwitchPage() -> impl IntoView { - let value = create_rw_signal(false); - view! { -
-

"Switch"

- - - - - {highlight_str!( - r#" - let value = create_rw_signal(false); - view! { - - } - "#, - "rust" - )} - - - -

"Swith Props"

- - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value""RwSignal""false""Swith's value."
"class""MaybeSignal""Default::default()""Addtional classes for the switch element."
-
- } -} diff --git a/demo/src/pages/table/mod.rs b/demo/src/pages/table/mod.rs deleted file mode 100644 index d335184..0000000 --- a/demo/src/pages/table/mod.rs +++ /dev/null @@ -1,109 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn TablePage() -> impl IntoView { - view! { -
-

"Table"

- - - - - - - - - - - - - - - - - - - - - -
"tag""count""date"
"div""2""2023-10-08"
"span""2""2023-10-08"
- - - {highlight_str!( - r#" - - - - - - - - - - - - - - - - - - - - -
"tag""count""date"
"div""2""2023-10-08"
"span""2""2023-10-08"
- "#, - "rust" - )} - - - -

"Table Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"single_row""MaybeSignal""true""Default::default()"
"single_column""MaybeSignal""false""Default::default()"
"style""MaybeSignal""Default::default()""Table's style."
"children""Children""Table's content."
"class""MaybeSignal""Default::default()""Addtional classes for the table element."
-
- } -} diff --git a/demo/src/pages/tabs/mod.rs b/demo/src/pages/tabs/mod.rs deleted file mode 100644 index d6a36e5..0000000 --- a/demo/src/pages/tabs/mod.rs +++ /dev/null @@ -1,125 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn TabsPage() -> impl IntoView { - let value = create_rw_signal(String::from("apple")); - view! { -
-

"Tabs"

- - - - "apple" - - - "pear" - - - - - {highlight_str!( - r#" - let value = create_rw_signal(String::from("apple")); - - view! { - - - "apple" - - - "pear" - - - } - "#, - "rust" - )} - - - -

"Tabs Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value" - "RwSignal" - - "Default::default()" - "Tabs value."
"children" - "Children" - "Tabs content."
"class""MaybeSignal""Default::default()""Addtional classes for the tabs element."
-

"Tab Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"key" - "String" - "The indentifier of the tab."
"label" - "String" - "The label of the tab."
"children" - "Children" - "Tab's content."
"class""MaybeSignal""Default::default()""Addtional classes for the tab element."
-
- } -} diff --git a/demo/src/pages/tag/mod.rs b/demo/src/pages/tag/mod.rs deleted file mode 100644 index f3b7fb2..0000000 --- a/demo/src/pages/tag/mod.rs +++ /dev/null @@ -1,75 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn TagPage() -> impl IntoView { - view! { -
-

"Tag"

- - - "default" - "success" - "warning" - "error" - - - - {highlight_str!( - r#" - - - "default" - - - "success" - - - "warning" - - - "error" - - - "#, - "rust" - )} - - - -

"Tag Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"variant""MaybeSignal""TagVariant::Default""Tag's variant."
"children""Children""Tag's content."
"class""MaybeSignal""Default::default()""Addtional classes for the tag element."
-
- } -} diff --git a/demo/src/pages/theme/mod.rs b/demo/src/pages/theme/mod.rs deleted file mode 100644 index 6a28a61..0000000 --- a/demo/src/pages/theme/mod.rs +++ /dev/null @@ -1,136 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn ThemePage() -> impl IntoView { - let theme = create_rw_signal(Theme::light()); - let customize_theme = create_rw_signal(Theme::light()); - let on_customize_theme = move |_| { - customize_theme.update(|theme| { - theme.common.color_primary = "#f5222d".to_string(); - theme.common.color_primary_hover = "#ff4d4f".to_string(); - theme.common.color_primary_active = "#cf1322".to_string(); - }); - }; - view! { -
-

"Theme"

-

"ThemeProvider"

- - - - - - - - - - - - {highlight_str!( - r#" - let theme = create_rw_signal(Theme::light()); - - view! { - - - - - - - - - } - "#, - "rust" - )} - - - -

"GlobalStyle"

-

"You can use GlobalStyle to sync common global style to the body element."

- - "" - - - {highlight_str!( - r#" - let theme = create_rw_signal(Theme::light()); - - view! { - - - "..." - - } - "#, - "rust" - )} - - - -

"CustomizeTheme"

- - - - - - - - - - - - {highlight_str!( - r##" - let customize_theme = create_rw_signal(Theme::light()); - let on_customize_theme = move |_| { - customize_theme.update(|theme| { - theme.common.color_primary = "#f5222d".to_string(); - theme.common.color_primary_hover = "#ff4d4f".to_string(); - theme.common.color_primary_active = "#cf1322".to_string(); - }); - }; - - view! { - - - - - - - - - } - "##, - "rust" - )} - - - -

"ThemeProvider Props"

- - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"theme""RwSignal""Theme."
-
- } -} diff --git a/demo/src/pages/time_picker/mod.rs b/demo/src/pages/time_picker/mod.rs deleted file mode 100644 index 96a7866..0000000 --- a/demo/src/pages/time_picker/mod.rs +++ /dev/null @@ -1,60 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::chrono::prelude::*; -use thaw::*; - -#[component] -pub fn TimePickerPage() -> impl IntoView { - let value = create_rw_signal(Some(Local::now().time())); - view! { -
-

"Time Picker"

- - - - - {highlight_str!( - r#" - use thaw::chrono::prelude::*; - - let value = create_rw_signal(Local::now().time()); - view! { - - } - "#, - "rust" - )} - - - -

"TimePicker Props"

- - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value" - "RwSignal -
"class""MaybeSignal""Default::default()""Addtional classes for the time picker element."
-
- } -} diff --git a/demo/src/pages/typography/mod.rs b/demo/src/pages/typography/mod.rs deleted file mode 100644 index 01f2816..0000000 --- a/demo/src/pages/typography/mod.rs +++ /dev/null @@ -1,73 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn TypographyPage() -> impl IntoView { - view! { -
-

"Typography"

- - - "text" - "code" - - - - {highlight_str!( - r#" - - - "text" - - - "code" - - - "#, - "rust" - )} - - - -

"Text Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"code" - "bool" - - "false" - "Use the code tag and style."
"children" - "Children" - "Text's content."
"class""MaybeSignal""Default::default()""Addtional classes for the text element."
-
- } -} diff --git a/demo/src/pages/upload/mod.rs b/demo/src/pages/upload/mod.rs deleted file mode 100644 index 2e42bc2..0000000 --- a/demo/src/pages/upload/mod.rs +++ /dev/null @@ -1,136 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn UploadPage() -> impl IntoView { - let message = use_message(); - let custom_request = move |file_list: FileList| { - message.create( - format!("Number of uploaded files: {}", file_list.length()), - MessageVariant::Success, - Default::default(), - ); - }; - view! { -
-

"Upload"

- - - - - - - {highlight_str!( - r#" - let message = use_message(); - let custom_request = move |file_list: FileList| { - message.create( - format!("Number of uploaded files: {}", file_list.length()), - MessageVariant::Success, - Default::default(), - ); - }; - view!{ - - - - } - "#, - "rust" - )} - - - -

"Drag to upload"

- - - "Click or drag a file to this area to upload" - - - - {highlight_str!( - r#" - let message = use_message(); - let custom_request = move |file_list: FileList| { - message.create( - format!("Number of uploaded files: {}", file_list.length()), - MessageVariant::Success, - Default::default(), - ); - }; - view! { - - - "Click or drag a file to this area to upload" - - - } - "#, - "rust" - )} - - - -

"Upload Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"accept""MaybeSignal""Default::default()""The accept type of upload."
"multiple""MaybeSignal""false""Allow multiple files to be selected."
"custom_request""Option>""Default::default()""Customize upload request."
"children""Children""Upload's content."
-

"UploadDragger Props"

- - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"children""Children""UploadDragger's content."
-
- } -} diff --git a/demo_markdown/docs/loading_bar/mod.md b/demo_markdown/docs/loading_bar/mod.md new file mode 100644 index 0000000..f637aa2 --- /dev/null +++ b/demo_markdown/docs/loading_bar/mod.md @@ -0,0 +1,34 @@ +# Loading Bar + + + "If you want to use loading bar, you need to wrap the component where you call related methods inside LoadingBarProvider and use use_loading_bar to get the API." + + +```rust demo +let loading_bar = use_loading_bar(); +let start = Callback::new(move |_| { + loading_bar.start(); +}); +let finish = Callback::new(move |_| { + loading_bar.finish(); +}); +let error = Callback::new(move |_| { + loading_bar.error(); +}); + +view! { + + + + + +} +``` + +### LoadingBarProvider Injection Methods + +| Name | Type | Description | +| ------ | ----------- | ------------------------------------------------------------ | +| start | `fn(&self)` | Callback function for loading bar to start loading. | +| finish | `fn(&self)` | The callback function when the loading bar finishes loading. | +| error | `fn(&self)` | Callback function for loading bar error. | diff --git a/demo_markdown/docs/menu/mod.md b/demo_markdown/docs/menu/mod.md new file mode 100644 index 0000000..ad9555c --- /dev/null +++ b/demo_markdown/docs/menu/mod.md @@ -0,0 +1,36 @@ +# Menu + +```rust demo +let value = create_rw_signal(String::from("o")); + +view! { + + + + +} +``` + +### Menu Props + +| Name | Type | Default | Description | +| -------- | --------------------- | -------------------- | --------------------------------------- | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the menu element. | +| value | `MaybeSignal` | `Default::default()` | The selected item key of the menu. | +| children | `Children` | | Menu's content. | + +### MenuGroup Props + +| Name | Type | Default | Description | +| -------- | --------------------- | -------------------- | --------------------------------------------- | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the menu group element. | +| label | `String` | | The label of the menu group. | +| children | `Children` | | MenuGroup's content. | + +### MenuItem Props + +| Name | Type | Default | Description | +| ----- | --------------------- | -------------------- | -------------------------------------------- | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the menu item element. | +| label | `MaybeSignal` | `Default::default()` | The label of the menu item. | +| key | `MaybeSignal` | `Default::default()` | The indentifier of the menu item. | diff --git a/demo_markdown/docs/message/mod.md b/demo_markdown/docs/message/mod.md new file mode 100644 index 0000000..5097663 --- /dev/null +++ b/demo_markdown/docs/message/mod.md @@ -0,0 +1,40 @@ +# Message + + + "If you want to use message, you need to wrap the component where you call related methods inside MessageProvider and use use_message to get the API." + + +```rust demo +let message = use_message(); +let success = move |_| { + message.create( + "Success".into(), + MessageVariant::Success, + Default::default(), + ); +}; +let warning = move |_| { + message.create( + "Warning".into(), + MessageVariant::Warning, + Default::default(), + ); +}; +let error = move |_| { + message.create("Error".into(), MessageVariant::Error, Default::default()); +}; + +view! { + + + + + +} +``` + +### MessageProvider Injection Methods + +| Name | Type | Description | +| ------ | ------------------------------------------------------------------------------ | ------------------------ | +| create | `fn(&self, content: String, variant: MessageVariant, options: MessageOptions)` | Use create type message. | diff --git a/demo_markdown/docs/modal/mod.md b/demo_markdown/docs/modal/mod.md new file mode 100644 index 0000000..db64149 --- /dev/null +++ b/demo_markdown/docs/modal/mod.md @@ -0,0 +1,26 @@ +# Modal + +```rust demo +let show = create_rw_signal(false); + +view! { + + + "hello" + +} +``` + +### Modal Props + +| Name | Type | Default | Description | +| -------- | --------------------- | -------------------- | ---------------------- | +| show | `MaybeSignal` | | Whether to show modal. | +| title | `MaybeSignal` | `Default::default()` | Modal title. | +| children | `Children` | | Modal's content. | + +### Modal Slots + +| Name | Default | Description | +| ----------- | ------- | --------------- | +| ModalFooter | `None` | Footer content. | diff --git a/demo_markdown/docs/popover/mod.md b/demo_markdown/docs/popover/mod.md new file mode 100644 index 0000000..b76d6f3 --- /dev/null +++ b/demo_markdown/docs/popover/mod.md @@ -0,0 +1,144 @@ +# Popover + +```rust demo +view! { + + + + + + "Content" + + + + + + "Content" + + +} +``` + +### Placement + +```rust demo +use leptos_meta::Style; + +view! { + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + + + + + + "Content" + + + +} +``` + +### Popover Props + +| Name | Type | Default | Description | +| --------- | --------------------- | ----------------------- | ----------------------------- | +| class | `MaybeSignal` | `Default::default()` | Content class of the popover. | +| placement | `PopoverPlacement` | `PopoverPlacement::Top` | Popover placement. | +| children | `Children` | | The content inside popover. | + +### Popover Slots + +| Name | Default | Description | +| -------------- | ------- | ----------------------------------------------- | +| PopoverTrigger | | The element or component that triggers popover. | diff --git a/demo_markdown/docs/progress/mod.md b/demo_markdown/docs/progress/mod.md new file mode 100644 index 0000000..90a82f5 --- /dev/null +++ b/demo_markdown/docs/progress/mod.md @@ -0,0 +1,29 @@ +# Progress + +```rust demo +let percentage = create_rw_signal(0.0f32); + +view! { + + + + + + + + + + + + +} +``` + +### Progress Props + +| Name | Type | Default | Description | +| ------------------- | ----------------------------------------- | ------------------------------------- | ------------------------------ | +| percentage | `MaybeSignal` | `Default::default()` | Percentage value. | +| color | `MaybeSignal` | `ProgressColor::Primary` | Progress color. | +| show_indicator | `MaybeSignal` | `true` | Whether to display indicators. | +| indicator_placement | `MaybeSignal` | `ProgressIndicatorPlacement::Outside` | Indicator placement. | diff --git a/demo_markdown/docs/radio/mod.md b/demo_markdown/docs/radio/mod.md new file mode 100644 index 0000000..9a12180 --- /dev/null +++ b/demo_markdown/docs/radio/mod.md @@ -0,0 +1,17 @@ +# Radio + +```rust demo +let value = create_rw_signal(false); + +view! { + "Click" +} +``` + +### Radio Props + +| Name | Type | Default | Description | +| -------- | --------------------- | -------------------- | ---------------------------------------- | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the radio element. | +| value | `RwSignal` | `false` | Checked value. | +| children | `Children` | | Radio's content. | diff --git a/demo_markdown/docs/select/mod.md b/demo_markdown/docs/select/mod.md new file mode 100644 index 0000000..93b5d4f --- /dev/null +++ b/demo_markdown/docs/select/mod.md @@ -0,0 +1,28 @@ +# Select + +```rust demo +let value = create_rw_signal(None::); + +let options = vec![ + SelectOption { + label: String::from("RwSignal"), + value: String::from("rw_signal"), + }, + SelectOption { + label: String::from("Memo"), + value: String::from("memo"), + }, +]; + +view! { +