diff --git a/demo/src/app.rs b/demo/src/app.rs index 0348a58..35ea743 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -43,7 +43,6 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { - @@ -56,12 +55,13 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { - - + + + diff --git a/demo/src/pages/input/mod.rs b/demo/src/pages/input/mod.rs deleted file mode 100644 index c7dca67..0000000 --- a/demo/src/pages/input/mod.rs +++ /dev/null @@ -1,300 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn InputPage() -> impl IntoView { - let value = create_rw_signal(String::from("o")); - let input_ref = create_component_ref::(); - view! { -
-

"Input"

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

disabled

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

invalid

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

"Imperative handle"

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

"Input attrs"

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

"Prefix & Suffix"

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

"Input Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value""RwSignal""Default::default()""Set the input value"
"variant""MaybeSignal""InputVariant::Text""Input's variant."
"placeholder""MaybeSignal""Default::default()""Placeholder of 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."
"class""MaybeSignal""Default::default()""Addtional classes for the input element."
"attr:""Vec<(&'static str, Attribute)>""Default::default()""The dom attrs of the input element inside the component."
-

"Input Slots"

- - - - - - - - - - - - - - - - - - - - -
"Name""Default""Description"
"InputPrefix""None""InputPrefix content."
"InputSuffix""None""InputSuffix content."
-

"Input Ref"

- - - - - - - - - - - - - - - - - - - - -
"Name""Type""Description"
"focus" - "Fn(&self)" - "Focus the input element."
"blur" - "Fn(&self)" - "Blur the input element."
-
- } -} diff --git a/demo/src/pages/input_number/mod.rs b/demo/src/pages/input_number/mod.rs deleted file mode 100644 index 008db8c..0000000 --- a/demo/src/pages/input_number/mod.rs +++ /dev/null @@ -1,131 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn InputNumberPage() -> impl IntoView { - let value = create_rw_signal(0); - let value_f64 = create_rw_signal(0.0); - view! { -
-

"InputNumber"

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

"disabled"

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

"invalid"

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

"InputNumber Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"value""RwSignal""T::default()""Set the input value."
"placeholder""MaybeSignal""Default::default()""Placeholder of input number."
"step""MaybeSignal" - "The number which the current value is increased or decreased on key or button press." -
"disabled""MaybeSignal""false""Whether the input is disabled."
"invalid""MaybeSignal""false""Whether the input is invalid."
"class""MaybeSignal""Default::default()""Addtional classes for the input element."
"attr:""Vec<(&'static str, Attribute)>""Default::default()""The dom attrs of the input element inside the component."
-

"T impl"

-

- "T: Add + Sub + Default + Clone + FromStr + ToString + 'static" -

-
- } -} diff --git a/demo/src/pages/layout/mod.rs b/demo/src/pages/layout/mod.rs deleted file mode 100644 index 198f9c4..0000000 --- a/demo/src/pages/layout/mod.rs +++ /dev/null @@ -1,170 +0,0 @@ -use crate::components::{Demo, DemoCode}; -use leptos::*; -use prisms::highlight_str; -use thaw::*; - -#[component] -pub fn LayoutPage() -> impl IntoView { - view! { -
-

"Layout"

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

"sider"

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

"Layout Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"style" - "MaybeSignal" - - "Default::default()" - "Layout's style."
"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."
"class" - "MaybeSignal" - - "Default::default()" - "Addtional classes for the layout element."
"children" - "Children" - "Layout's content."
-

"LayoutHeader, LayoutSider Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"style" - "MaybeSignal" - - "Default::default()" - "LayoutHeader's style."
"class" - "MaybeSignal" - - "Default::default()" - "Addtional classes for the layout header element."
"children" - "Children" - "LayoutHeader's content."
-
- } -} diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs index b34ac97..82481ca 100644 --- a/demo/src/pages/mod.rs +++ b/demo/src/pages/mod.rs @@ -16,9 +16,6 @@ mod guide; mod home; mod icon; mod image; -mod input; -mod input_number; -mod layout; mod markdown; mod mobile; mod nav_bar; @@ -43,9 +40,6 @@ pub use guide::*; pub use home::*; pub use icon::*; pub use image::*; -pub use input::*; -pub use input_number::*; -pub use layout::*; pub use markdown::*; pub use mobile::*; pub use nav_bar::*; diff --git a/demo_markdown/.prettierrc.toml b/demo_markdown/.prettierrc.toml new file mode 100644 index 0000000..a8b8f32 --- /dev/null +++ b/demo_markdown/.prettierrc.toml @@ -0,0 +1,3 @@ +[[overrides]] +files = "*.md" +options = { proseWrap = "never", printWidth = 120 } diff --git a/demo_markdown/docs/input/mod.md b/demo_markdown/docs/input/mod.md new file mode 100644 index 0000000..a9b3356 --- /dev/null +++ b/demo_markdown/docs/input/mod.md @@ -0,0 +1,121 @@ +# Input + +```rust demo +let value = create_rw_signal(String::from("o")); + +view! { + + + + +} +``` + +### Disabled + +```rust demo +let value = create_rw_signal(String::from("o")); + +view! { + + + +} +``` + +### Invalid + +```rust demo +let value = create_rw_signal(String::from("o")); + +view! { + + + +} +``` + +### Imperative handle + +```rust demo +let value = create_rw_signal(String::from("o")); +let input_ref = create_component_ref::(); + +view! { + + + + + + + +} +``` + +### Input attrs + +```rust demo +view! { + + + + +} +``` + +## Prefix & Suffix + +```rust demo +let value = create_rw_signal(String::from("o")); + +view! { + + + + + + + + "$" + + + + + + + +} +``` + +### Input Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the input element. | +| value | `RwSignal` | `Default::default()` | Set the input value. | +| variant | `MaybeSignal` | `InputVariant::Text` | Input's variant. | +| placeholder | `MaybeSignal` | `Default::default()` | Placeholder of 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. | + +### Input Slots + +| Name | Default | Description | +| ----------- | ------- | -------------------- | +| InputPrefix | `None` | InputPrefix content. | +| InputSuffix | `None` | InputSuffix content. | + +### Input Ref + +| Name | Type | Description | +| ----- | ----------- | ------------------------ | +| focus | `Fn(&self)` | Focus the input element. | +| blur | `Fn(&self)` | Blur the input element. | diff --git a/demo_markdown/docs/input_number/mod.md b/demo_markdown/docs/input_number/mod.md new file mode 100644 index 0000000..2bcf3fe --- /dev/null +++ b/demo_markdown/docs/input_number/mod.md @@ -0,0 +1,49 @@ +# Input Number + +```rust demo +let value = create_rw_signal(0); +let value_f64 = create_rw_signal(0.0); + +view! { + + + + +} +``` + +### Disabled + +```rust demo +let value = create_rw_signal(0); + +view! { + +} +``` + +### Invalid + +```rust demo +let value = create_rw_signal(0); + +view! { + +} +``` + +### InputNumber Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the input element. | +| value | `RwSignal` | `T::default()` | Set the input value. | +| placeholder | `MaybeSignal` | `Default::default()` | Placeholder of input number. | +| step | `MaybeSignal` | | The number which the current value is increased or decreased on key or button press. | +| disabled | `MaybeSignal` | `false` | Whether the input is disabled. | +| invalid | `MaybeSignal` | `false` | Whether the input is invalid. | +| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. | + +#### T impl + +`T: Add + Sub + Default + Clone + FromStr + ToString + 'static` diff --git a/demo_markdown/docs/layout/mod.md b/demo_markdown/docs/layout/mod.md new file mode 100644 index 0000000..55e2e06 --- /dev/null +++ b/demo_markdown/docs/layout/mod.md @@ -0,0 +1,49 @@ +# Layout + +```rust demo +view! { + + + "Header" + + "Content" + +} +``` + +### Sider + +```rust demo +view! { + + + "Sider" + + + + "Header" + + + "Content" + + + +} +``` + +### Layout Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the layout element. | +| style | `MaybeSignal` | `Default::default()` | Layout's style. | +| 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. | +| children | `Children` | | Layout's content. | + +### LayoutHeader, LayoutSider Props + +| Name | Type | Default | Description | +| -------- | --------------------- | -------------------- | ------------------------------------------------ | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the layout header element. | +| style | `MaybeSignal` | `Default::default()` | LayoutHeader's style. | +| children | `Children` | | LayoutHeader's content. | diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index ed299f1..5ee0318 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -8,6 +8,9 @@ use syn::ItemFn; #[proc_macro] pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenStream { let file_list = vec![ + ("InputMdPage", include_str!("../docs/input/mod.md")), + ("InputNumberMdPage", include_str!("../docs/input_number/mod.md")), + ("LayoutMdPage", include_str!("../docs/layout/mod.md")), ("LoadingBarMdPage", include_str!("../docs/loading_bar/mod.md")), ("MenuMdPage", include_str!("../docs/menu/mod.md")), ("MessageMdPage", include_str!("../docs/message/mod.md")),