adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -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-13 10:54:29 +08:00 • committed by luoxiaozero
parent 8fb236358a
commit e123aec560
48 changed files with 763 additions and 578 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
demo_markdown/docs/progress_bar/mod.md
View file

@ -1,56 +0,0 @@
# ProgressBar
```rust demo
let value = RwSignal::new(0.0);
view! {
<Space vertical=true>
<ProgressBar value/>
<ProgressBar value color=ProgressBarColor::Success/>
<ProgressBar value color=ProgressBarColor::Warning/>
<ProgressBar value color=ProgressBarColor::Error/>
<Space>
<Button on_click=move |_| value.update(|v| *v -= 0.1)>"-10%"</Button>
<Button on_click=move |_| value.update(|v| *v += 0.1)>"+10%"</Button>
</Space>
</Space>
}
```
### Circle
```rust demo
let value = RwSignal::new(0.0);
view! {
<Space>
<ProgressCircle value/>
<ProgressCircle value color=ProgressCircleColor::Success/>
<ProgressCircle value color=ProgressCircleColor::Warning/>
<ProgressCircle value color=ProgressCircleColor::Error/>
</Space>
<Space>
<Button on_click=move |_| value.update(|v| *v -= 10.0)>"-10%"</Button>
<Button on_click=move |_| value.update(|v| *v += 10.0)>"+10%"</Button>
</Space>
}
```
### Progress Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| percentage | `MaybeSignal<f32>` | `Default::default()` | Percentage value. |
| color | `MaybeSignal<ProgressColor>` | `ProgressColor::Primary` | Progress color. |
| show_indicator | `MaybeSignal<bool>` | `true` | Whether to display indicators. |
| indicator_placement | `MaybeSignal<ProgressIndicatorPlacement>` | `ProgressIndicatorPlacement::Outside` | Indicator placement. |
### ProgressCircle Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the progress element. |
| percentage | `MaybeSignal<f32>` | `Default::default()` | Percentage value. |
| color | `MaybeSignal<ProgressColor>` | `ProgressColor::Primary` | ProgressCircle color. |
| size | `MaybeSignal<Stringr>` | `120px` | ProgressCircle size. |
| children | `Option<Children>` | `None` | ProgressCircle's content. |

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

@ -1,48 +0,0 @@
# Radio
```rust demo
let value = RwSignal::new(String::new());
let option_value = RwSignal::new(None);
view! {
<Space vertical=true>
<RadioGroup value>
<Radio value="a" label="Apple"/>
<Radio value="o" label="Orange"/>
</RadioGroup>
<RadioGroup value=option_value>
<Radio value="a" label="Apple"/>
<Radio value="o" label="Orange"/>
</RadioGroup>
</Space>
<div style="margin-top: 1rem">
"value: " {move || format!("{}", value.get())}
</div>
<div style="margin-top: 1rem">
"option_value: " {move || format!("{:?}", option_value.get())}
</div>
}
```
### Radio Props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | ---------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the radio element. |
| value | `Model<bool>` | `false` | Checked value. |
| children | `Option<Children>` | `None` | Radio's content. |
### RadioGroup Props
| Name | Type | Default | Description |
| -------- | ----------------------- | -------------------- | ---------------------------------- |
| value | `Model<Option<String>>` | `Default::default()` | Sets the value of the radio group. |
| children | `Children` | | RadioGroup's content. |
### RadioItem Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the radio element. |
| key | `String` | | The key of the radio to be used in a radio group. |
| children | `Option<Children>` | `None` | Radio's content. |

18
demo_markdown/docs/skeleton/mod.md
View file

@ -1,18 +0,0 @@
# Skeleton
```rust demo
view! {
<Skeleton>
<SkeletonItem/>
</Skeleton>
}
```
### Skeleton Props
| Name | Type | Default | Description |
| ------ | ----------------------------- | ------- | ----------------- |
| repeat | `MaybeSignal<u32>` | `1` | Repeat frequency. |
| text | `MaybeSignal<bool>` | `false` | Text skeleton. |
| width | `Option<MaybeSignal<String>>` | `None` | Skeleton width. |
| height | `Option<MaybeSignal<String>>` | `None` | Skeleton height. |

56
demo_markdown/docs/slider/mod.md
View file

@ -1,56 +0,0 @@
# Slider
```rust demo
let value = RwSignal::new(0.0);
view! {
<Slider value/>
}
```
### Step
```rust demo
let value = RwSignal::new(0.0);
view! {
<Slider step=25.0 value/>
}
```
## Slider Label
```rust demo
let value = RwSignal::new(0.0);
view! {
<Slider value max=10.0 step=5.0>
<SliderLabel value=0.0>
"0"
</SliderLabel>
<SliderLabel value=5.0>
"5"
</SliderLabel>
<SliderLabel value=10.0>
"10"
</SliderLabel>
</Slider>
}
```
### Slider Props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | ----------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the slider element. |
| value | `MaybeSignal<f64>` | `Default::default()` | Value of the slider. |
| max | `MaybeSignal<f64>` | `100` | Max value of the slider. |
| step | `MaybeSignal<f64>` | `Default::default()` | The step in which value is incremented. |
| children | `Option<Children>` | `None` | Slider's content. |
### SliderLabel props
| Name | Type | Default | Description |
| -------- | ------------------ | ------- | ------------------------------------ |
| value | `MaybeSignal<f64>` | | Value at which label will be placed. |
| children | `Children` | | Content of the lable. |

16
demo_markdown/docs/switch/mod.md
View file

@ -1,16 +0,0 @@
# Switch
```rust demo
let checked = RwSignal::new(false);
view! {
<Switch checked />
}
```
### Switch Props
| Name | Type | Default | Description |
| ----- | ----------------------------------- | -------------------- | ----------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the switch element. |
| value | `Model<bool>` | `false` | Switch's value. |

45
demo_markdown/docs/tab_list/mod.md
View file

@ -1,45 +0,0 @@
# Tabs
```rust demo
let selected_value = RwSignal::new(String::new());
view! {
<TabList selected_value>
<Tab value="apple">
"Apple"
</Tab>
<Tab value="pear">
"Pear"
</Tab>
<Tab value="item1">
"Item 1"
</Tab>
<Tab value="item2">
"Item 2"
</Tab>
</TabList>
}
```
### Tabs Props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the tabs element. |
| value | `Model<String>` | `Default::default()` | Tabs value. |
| children | `Children` | | Tabs content. |
### Tab Props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | -------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the tab element. |
| key | `String` | | The indentifier of the tab. |
| label | `String` | `Default::default()` | The label of the tab. |
| children | `Children` | | Tabs content. |
### Tab Slots
| Name | Default | Description |
| -------- | ------- | -------------- |
| TabLabel | `None` | label content. |

34
demo_markdown/docs/tag/mod.md
View file

@ -1,34 +0,0 @@
# Tag
```rust demo
view! {
<Tag>"default"</Tag>
}
```
### Closable
```rust demo
// let message = use_message();
let success = move |_: ev::MouseEvent| {
// message.create(
// "tag close".into(),
// MessageVariant::Success,
// Default::default(),
// );
};
view! {
<Tag closable=true on_close=success>"Default"</Tag>
}
```
### Tag Props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | --------------------- | -------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the tag element. |
| variant | `MaybeSignal<TagVariant>` | `TagVariant::Default` | Tag's variant. |
| closable | `MaybeSignal<bool>` | `false` | Whether the tag shows a close button. |
| on_close | `Option<Callback<ev::MouseEvent>>` | `None` | Close clicked callback. |
| children | `Children` | | Tag's content. |

21
demo_markdown/docs/text/mod.md
View file

@ -1,21 +0,0 @@
# Typography
```rust demo
view! {
<Space>
<Text>"text"</Text>
<Text tag=TextTag::Code>"code"</Text>
<Caption1>"Caption1"</Caption1>
<Caption1Strong>"Caption1Strong"</Caption1Strong>
<Body1>"Body1"</Body1>
</Space>
}
```
## Text Props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the text element. |
| code | `bool` | `false` | Use the code tag and style. |
| children | `Children` | | Text's content. |

35
demo_markdown/docs/textarea/mod.md
View file

@ -1,35 +0,0 @@
# Input
```rust demo
let value = RwSignal::new(String::from("o"));
view! {
<Textarea value placeholder="Textarea"/>
}
```
### Disabled
```rust demo
let value = RwSignal::new(String::from("o"));
view! {
<Textarea value disabled=true/>
}
```
### Resize
```rust demo
view! {
<Space vertical=true>
<Textarea placeholder=r#"Textarea with resize set to "none""#/>
<Textarea placeholder=r#"Textarea with resize set to "vertical""# resize=TextareaResize::Vertical/>
<Textarea placeholder=r#"Textarea with resize set to "horizontal""# resize=TextareaResize::Horizontal/>
<Textarea placeholder=r#"Textarea with resize set to "both""# resize=TextareaResize::Both/>
</Space>
}
```
### Textarea Props

23
demo_markdown/docs/time_picker/mod.md
View file

@ -1,23 +0,0 @@
# Time Picker
```rust demo
use chrono::prelude::*;
let value = RwSignal::new(Local::now().time());
let option_value = RwSignal::new(Local::now().time());
view! {
<Space vertical=true>
<TimePicker value />
<TimePicker value=option_value />
</Space>
}
```
## TimePicker Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the time picker element. |
| value | `Model<Option<NaiveTime>>` | `Default::default()` | Set the TimePicker value. |
| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |

64
demo_markdown/docs/toast/mod.md
View file

@ -1,64 +0,0 @@
# Toast
```rust demo
let toaster = ToasterInjection::expect_context();
let on_click = move |_| {
toaster.dispatch_toast(view! {
<Toast>
<ToastTitle>"Email sent"</ToastTitle>
<ToastBody>
"This is a toast body"
<ToastBodySubtitle slot>
"Subtitle"
</ToastBodySubtitle>
</ToastBody>
<ToastFooter>
"Footer"
// <Link>Action</Link>
// <Link>Action</Link>
</ToastFooter>
</Toast>
}.into_any(), Default::default());
};
view! {
<Button on_click=on_click>"Make toast"</Button>
}
```
### Toast Positions
```rust demo
let toaster = ToasterInjection::expect_context();
fn dispatch_toast(toaster: ToasterInjection, position: ToastPosition) {
toaster.dispatch_toast(view! {
<Toast>
<ToastTitle>"Email sent"</ToastTitle>
<ToastBody>
"This is a toast body"
<ToastBodySubtitle slot>
"Subtitle"
</ToastBodySubtitle>
</ToastBody>
<ToastFooter>
"Footer"
// <Link>Action</Link>
// <Link>Action</Link>
</ToastFooter>
</Toast>
}.into_any(), ToastOptions::default().with_position(position));
};
view! {
<Space>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::Bottom)>"Bottom"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::BottomStart)>"BottomStart"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::BottomEnd)>"BottomEnd"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::Top)>"Top"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::TopStart)>"Topstart"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::TopEnd)>"TopEnd"</Button>
</Space>
}
```

57
demo_markdown/docs/upload/mod.md
View file

@ -1,57 +0,0 @@
# Upload
```rust demo
use send_wrapper::SendWrapper;
// let message = use_message();
let custom_request = move |file_list: SendWrapper<FileList>| {
// message.create(
// format!("Number of uploaded files: {}", file_list.length()),
// MessageVariant::Success,
// Default::default(),
// );
};
view!{
<Upload>
<Button>
"upload"
</Button>
</Upload>
}
```
### Drag to upload
```rust demo
// 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 custom_request>
<UploadDragger>"Click or drag a file to this area to upload"</UploadDragger>
</Upload>
}
```
### Upload Props
| Name | Type | Default | Description |
| -------------- | -------------------------------- | -------------------- | ------------------------------------ |
| accept | `MaybeSignal<String>` | `Default::default()` | The accept type of upload. |
| multiple | `MaybeSignal<bool>` | `false` | Allow multiple files to be selected. |
| custom_request | `Option<Callback<FileList, ()>>` | `Default::default()` | Customize upload request. |
| children | `Children` | | Upload's content. |
### UploadDragger Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ------------------------ |
| children | `Children` | | UploadDragger's content. |

36
demo_markdown/src/lib.rs
View file

@ -52,24 +52,24 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"MessageBarMdPage" => "../../thaw/src/message_bar/docs/mod.md", "MessageBarMdPage" => "../../thaw/src/message_bar/docs/mod.md",
"NavMdPage" => "../../thaw/src/nav/docs/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" => "../../thaw/src/popover/docs/mod.md",
"ProgressBarMdPage" => "../docs/progress_bar/mod.md", "ProgressBarMdPage" => "../../thaw/src/progress_bar/docs/mod.md",
"RadioMdPage" => "../docs/radio/mod.md", "RadioMdPage" => "../../thaw/src/radio/docs/mod.md",
"ScrollbarMdPage" => "../docs/scrollbar/mod.md", "ScrollbarMdPage" => "../../thaw/src/scrollbar/docs/mod.md",
"SkeletonMdPage" => "../docs/skeleton/mod.md", "SkeletonMdPage" => "../../thaw/src/skeleton/docs/mod.md",
"SliderMdPage" => "../docs/slider/mod.md", "SliderMdPage" => "../../thaw/src/slider/docs/mod.md",
"SpaceMdPage" => "../docs/space/mod.md", "SpaceMdPage" => "../../thaw/src/space/docs/mod.md",
"SpinButtonMdPage" => "../docs/spin_button/mod.md", "SpinButtonMdPage" => "../../thaw/src/spin_button/docs/mod.md",
"SpinnerMdPage" => "../docs/spinner/mod.md", "SpinnerMdPage" => "../../thaw/src/spinner/docs/mod.md",
"SwitchMdPage" => "../docs/switch/mod.md", "SwitchMdPage" => "../../thaw/src/switch/docs/mod.md",
"TabListMdPage" => "../docs/tab_list/mod.md", "TabListMdPage" => "../../thaw/src/tab_list/docs/mod.md",
"TableMdPage" => "../docs/table/mod.md", "TableMdPage" => "../../thaw/src/table/docs/mod.md",
"TagMdPage" => "../docs/tag/mod.md", "TagMdPage" => "../../thaw/src/tag/docs/mod.md",
"TextMdPage" => "../docs/text/mod.md", "TextMdPage" => "../../thaw/src/text/docs/mod.md",
"TextareaMdPage" => "../docs/textarea/mod.md", "TextareaMdPage" => "../../thaw/src/textarea/docs/mod.md",
"TimePickerMdPage" => "../docs/time_picker/mod.md", "TimePickerMdPage" => "../../thaw/src/time_picker/docs/mod.md",
"ToastMdPage" => "../docs/toast/mod.md", "ToastMdPage" => "../../thaw/src/toast/docs/mod.md",
"UploadMdPage" => "../docs/upload/mod.md" "UploadMdPage" => "../../thaw/src/upload/docs/mod.md"
}; };
let mut fn_list = vec![]; let mut fn_list = vec![];

23
demo_markdown/docs/popover/mod.md → thaw/src/popover/docs/mod.md
View file

@ -152,15 +152,18 @@ view! {
### Popover Props ### Popover Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| -------- | ----------------------------------- | ---------------------- | ----------------------------- | | --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Content class of the popover. | | class | `MaybeProp<String>` | `Default::default()` | |
| position | `PopoverPosition` | `PopoverPosition::Top` | Popover position. | | position | `PopoverPosition` | `PopoverPosition::Top` | Configures the position of the Popover. |
| tooltip | `bool` | `false` | Tooltip. | | appearance | `MaybeProp<PopoverAppearance>` | `Default::default()` | A popover can appear styled with brand or inverted. When not specified, the default style is used. |
| children | `Children` | | The content inside popover. | | trigger_type | `PopoverTriggerType` | `PopoverTriggerType::Hover` | Action that displays the popover. |
| popover_trigger | slot `PopoverTrigger` | | The element or component that triggers popover. |
| children | `Children` | | |
### Popover Slots ### PopoverTrigger Props
| Name | Default | Description | | Name | Type | Default | Description |
| -------------- | ------- | ----------------------------------------------- | | -------- | ------------------- | -------------------- | ----------- |
| PopoverTrigger | | The element or component that triggers popover. | | class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |

12
thaw/src/popover/mod.rs
View file

@ -14,14 +14,18 @@ pub struct PopoverTrigger {
#[component] #[component]
pub fn Popover( pub fn Popover(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional)] trigger_type: PopoverTriggerType, /// Action that displays the popover.
#[prop(optional)]
trigger_type: PopoverTriggerType,
/// The element or component that triggers popover.
popover_trigger: PopoverTrigger, popover_trigger: PopoverTrigger,
/// Configures the position of the Popover. /// Configures the position of the Popover.
#[prop(optional)] #[prop(optional)]
position: PopoverPosition, position: PopoverPosition,
/// A popover can appear styled with brand or inverted. When not specified, the default style is used. /// A popover can appear styled with brand or inverted.
/// When not specified, the default style is used.
#[prop(optional, into)] #[prop(optional, into)]
appearance: Option<MaybeSignal<PopoverAppearance>>, appearance: MaybeProp<PopoverAppearance>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("popover", include_str!("./popover.css")); mount_style("popover", include_str!("./popover.css"));
@ -131,7 +135,7 @@ pub fn Popover(
<div <div
class=class_list![ class=class_list![
"thaw-config-provider thaw-popover-surface", "thaw-config-provider thaw-popover-surface",
appearance.map(|appearance| move || format!("thaw-popover-surface--{}", appearance.get().as_str())), move || appearance.get().map(|a| format!("thaw-popover-surface--{}", a.as_str())),
class class
] ]
data-thaw-id=config_provider.id().clone() data-thaw-id=config_provider.id().clone()

56
thaw/src/progress_bar/docs/mod.md Normal file
View file

@ -0,0 +1,56 @@
# ProgressBar
```rust demo
let value = RwSignal::new(0.0);
view! {
<Space vertical=true>
<ProgressBar value/>
<ProgressBar value color=ProgressBarColor::Success/>
<ProgressBar value color=ProgressBarColor::Warning/>
<ProgressBar value color=ProgressBarColor::Error/>
<Space>
<Button on_click=move |_| value.update(|v| *v -= 0.1)>"-10%"</Button>
<Button on_click=move |_| value.update(|v| *v += 0.1)>"+10%"</Button>
</Space>
</Space>
}
```
### Circle
```rust demo
let value = RwSignal::new(0.0);
view! {
<Space>
<ProgressCircle value/>
<ProgressCircle value color=ProgressCircleColor::Success/>
<ProgressCircle value color=ProgressCircleColor::Warning/>
<ProgressCircle value color=ProgressCircleColor::Error/>
</Space>
<Space>
<Button on_click=move |_| value.update(|v| *v -= 10.0)>"-10%"</Button>
<Button on_click=move |_| value.update(|v| *v += 10.0)>"+10%"</Button>
</Space>
}
```
### ProgressBar Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `MaybeSignal<f64>` | `Default::default()` | A decimal number between 0 and 1 (or between 0 and max if given), which specifies how much of the task has been completed. |
| max | `MaybeSignal<f64>` | `1.0` | The maximum value, which indicates the task is complete. The ProgressBar bar will be full when value equals max. |
| color | `MaybeSignal<ProgressColor>` | `ProgressColor::Brand` | ProgressBar color. |
### ProgressCircle Props
| Name | Type | Default | Description |
| -------- | ---------------------------------- | ---------------------------- | --------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `MaybeSignal<f64>` | `Default::default()` | Percentage value. |
| color | `MaybeSignal<ProgressCircleColor>` | `ProgressCircleColor::Brand` | ProgressCircle color. |
| size | `MaybeSignal<String>` | `120px` | ProgressCircle size. |
| children | `Option<Children>` | `None` | |

12
thaw/src/progress_bar/progress_bar.rs
View file

@ -4,11 +4,17 @@ use thaw_utils::{class_list, mount_style};
#[component] #[component]
pub fn ProgressBar( pub fn ProgressBar(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(into, optional)] value: MaybeSignal<f64>, /// A decimal number between 0 and 1 (or between 0 and max if given),
/// which specifies how much of the task has been completed.
#[prop(into, optional)]
value: MaybeSignal<f64>,
/// The maximum value, which indicates the task is complete. /// The maximum value, which indicates the task is complete.
/// The ProgressBar bar will be full when value equals max. /// The ProgressBar bar will be full when value equals max.
#[prop(default = 1.0.into(), optional)] max: MaybeSignal<f64>, #[prop(default = 1.0.into(), optional)]
#[prop(into, optional)] color: MaybeSignal<ProgressBarColor>, max: MaybeSignal<f64>,
/// ProgressBar color.
#[prop(into, optional)]
color: MaybeSignal<ProgressBarColor>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("progress-bar", include_str!("./progress-bar.css")); mount_style("progress-bar", include_str!("./progress-bar.css"));

12
thaw/src/progress_bar/progress_circle.rs
View file

@ -4,9 +4,15 @@ use thaw_utils::{class_list, mount_style};
#[component] #[component]
pub fn ProgressCircle( pub fn ProgressCircle(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(into, optional)] value: MaybeSignal<f64>, /// Percentage value.
#[prop(into, optional)] color: MaybeSignal<ProgressCircleColor>, #[prop(into, optional)]
#[prop(into, default = "120px".into())] size: MaybeSignal<String>, value: MaybeSignal<f64>,
/// ProgressCircle color.
#[prop(into, optional)]
color: MaybeSignal<ProgressCircleColor>,
/// ProgressCircle size.
#[prop(into, default = "120px".into())]
size: MaybeSignal<String>,
#[prop(optional)] children: Option<Children>, #[prop(optional)] children: Option<Children>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("progress-circle", include_str!("./progress-circle.css")); mount_style("progress-circle", include_str!("./progress-circle.css"));

42
thaw/src/radio/docs/mod.md Normal file
View file

@ -0,0 +1,42 @@
# Radio
```rust demo
let value = RwSignal::new(String::new());
let option_value = RwSignal::new(None);
view! {
<Space vertical=true>
<RadioGroup value>
<Radio value="a" label="Apple"/>
<Radio value="o" label="Orange"/>
</RadioGroup>
<RadioGroup value=option_value>
<Radio value="a" label="Apple"/>
<Radio value="o" label="Orange"/>
</RadioGroup>
</Space>
<div style="margin-top: 1rem">
"value: " {move || format!("{}", value.get())}
</div>
<div style="margin-top: 1rem">
"option_value: " {move || format!("{:?}", option_value.get())}
</div>
}
```
### Radio Props
| Name | Type | Default | Description |
| ----- | ------------------- | -------------------- | --------------------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `String` | `Default::default()` | The value of the radio to be used in a radio group. |
| label | `MaybeProp<String>` | `None` | The Radio's label. |
### RadioGroup Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | -------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `OptionModel<String>` | `Default::default()` | The selected Radio item in this group. |
| name | `Option<String>` | `None` | The name of this radio group. |
| children | `Children` | | |

7
thaw/src/radio/mod.rs
View file

@ -9,9 +9,12 @@ use thaw_utils::{class_list, mount_style};
#[component] #[component]
pub fn Radio( pub fn Radio(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] value: String, /// The value of the radio to be used in a radio group.
#[prop(optional, into)]
value: String,
/// The Radio's label. /// The Radio's label.
#[prop(optional, into)] label: MaybeProp<String>, #[prop(optional, into)]
label: MaybeProp<String>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("radio", include_str!("./radio.css")); mount_style("radio", include_str!("./radio.css"));

23
demo_markdown/docs/scrollbar/mod.md → thaw/src/scrollbar/docs/mod.md
View file

@ -24,11 +24,18 @@ view! {
### Scrollbar Props ### Scrollbar Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ------------- | ---------------------------------------- | -------------------- | -------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the scrollbar element. | | class | `MaybeProp<String>` | `Default::default()` | |
| style | `Option<MaybeSignal<String>>` | `Default::default()` | Scrollbar's style. | | style | `MaybeProp<String>` | `Default::default()` | |
| content_class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the layout element. | | content_class | `MaybeProp<String>` | `Default::default()` | Class name of content div. |
| content_style | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Style of scrollable content node. | | content_style | `MaybeProp<String>` | `Default::default()` | Style of content div. |
| size | `u8` | `8` | Size of scrollbar. | | size | `u8` | `8` | Size of scrollbar. |
| children | `Children` | | Scrollbar's content. | | comp_ref | ref `Option<ComponentRef<ScrollbarRef>>` | `None` | |
| children | `Children` | | |
### ScrollbarRef Props
| Name | Type | Description |
| -------------------------------- | ----------------------------------------------- | --------------- |
| scroll_to_with_scroll_to_options | `Fn(&self, options: &web_sys::ScrollToOptions)` | Scroll content. |

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

@ -4,9 +4,12 @@ use thaw_utils::{class_list, mount_style, ComponentRef};
#[component] #[component]
pub fn Scrollbar( pub fn Scrollbar(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: Option<MaybeSignal<String>>, #[prop(optional, into)] style: MaybeProp<String>,
/// Class name of content div.
#[prop(optional, into)] content_class: MaybeProp<String>, #[prop(optional, into)] content_class: MaybeProp<String>,
/// Style of content div.
#[prop(optional, into)] content_style: MaybeProp<String>, #[prop(optional, into)] content_style: MaybeProp<String>,
/// Size of scrollbar.
#[prop(default = 8)] size: u8, #[prop(default = 8)] size: u8,
#[prop(optional)] comp_ref: Option<ComponentRef<ScrollbarRef>>, #[prop(optional)] comp_ref: Option<ComponentRef<ScrollbarRef>>,
children: Children, children: Children,
@ -287,7 +290,7 @@ pub fn Scrollbar(
<div <div
class=class_list!["thaw-scrollbar", class] class=class_list!["thaw-scrollbar", class]
style=move || { style=move || {
format!("--thaw-scrollbar-size: {}px;{}", size, style.as_ref().map(|s| s.get()).unwrap_or_default()) format!("--thaw-scrollbar-size: {}px;{}", size, style.get().unwrap_or_default())
} }
on:mouseenter=on_mouseenter on:mouseenter=on_mouseenter
@ -352,6 +355,7 @@ impl ScrollbarRef {
self.container_scroll_top.get_untracked() self.container_scroll_top.get_untracked()
} }
/// Scroll content.
pub fn scroll_to_with_scroll_to_options(&self, options: &web_sys::ScrollToOptions) { pub fn scroll_to_with_scroll_to_options(&self, options: &web_sys::ScrollToOptions) {
if let Some(el) = self.container_ref.get_untracked() { if let Some(el) = self.container_ref.get_untracked() {
el.scroll_to_with_scroll_to_options(options); el.scroll_to_with_scroll_to_options(options);

22
thaw/src/skeleton/docs/mod.md Normal file
View file

@ -0,0 +1,22 @@
# Skeleton
```rust demo
view! {
<Skeleton>
<SkeletonItem/>
</Skeleton>
}
```
### Skeleton Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### SkeletonItem Props
| Name | Type | Default | Description |
| ----- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |

58
thaw/src/slider/docs/mod.md Normal file
View file

@ -0,0 +1,58 @@
# Slider
```rust demo
let value = RwSignal::new(0.0);
view! {
<Slider value/>
}
```
### Step
```rust demo
let value = RwSignal::new(0.0);
view! {
<Slider step=25.0 value/>
}
```
## Slider Label
```rust demo
let value = RwSignal::new(0.0);
view! {
<Slider value max=10.0 step=5.0>
<SliderLabel value=0.0>
"0"
</SliderLabel>
<SliderLabel value=5.0>
"5"
</SliderLabel>
<SliderLabel value=10.0>
"10"
</SliderLabel>
</Slider>
}
```
### Slider Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ------------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `MaybeSignal<f64>` | `0` | The current value of the controlled Slider. |
| min | `MaybeSignal<f64>` | `0` | Min value of the slider. |
| max | `MaybeSignal<f64>` | `100` | Max value of the slider. |
| step | `MaybeSignal<f64>` | `0` | The step in which value is incremented. |
| children | `Option<Children>` | `None` | |
### SliderLabel props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ------------------------------------ |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `MaybeSignal<f64>` | | Value at which label will be placed. |
| children | `Children` | | |

16
thaw/src/slider/mod.rs
View file

@ -8,11 +8,19 @@ use thaw_utils::{class_list, mount_style, Model};
#[component] #[component]
pub fn Slider( pub fn Slider(
#[prop(optional, into)] value: Model<f64>,
#[prop(default = 0f64.into(), into)] min: MaybeSignal<f64>,
#[prop(default = 100f64.into(), into)] max: MaybeSignal<f64>,
#[prop(optional, into)] step: MaybeProp<f64>,
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// The current value of the controlled Slider.
#[prop(optional, into)]
value: Model<f64>,
/// Min value of the slider.
#[prop(default = 0f64.into(), into)]
min: MaybeSignal<f64>,
/// Max value of the slider.
#[prop(default = 100f64.into(), into)]
max: MaybeSignal<f64>,
/// The step in which value is incremented.
#[prop(optional, into)]
step: MaybeProp<f64>,
#[prop(optional)] children: Option<Children>, #[prop(optional)] children: Option<Children>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("slider", include_str!("./slider.css")); mount_style("slider", include_str!("./slider.css"));

4
thaw/src/slider/slider_label.rs
View file

@ -5,7 +5,9 @@ use thaw_utils::{class_list, mount_style};
#[component] #[component]
pub fn SliderLabel( pub fn SliderLabel(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(into)] value: MaybeSignal<f64>, /// Value at which label will be placed.
#[prop(into)]
value: MaybeSignal<f64>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("slider-label", include_str!("./slider_label.css")); mount_style("slider-label", include_str!("./slider_label.css"));

16
demo_markdown/docs/space/mod.md → thaw/src/space/docs/mod.md
View file

@ -89,11 +89,11 @@ view! {
### Space Props ### Space Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | ---------------------------------------- | | -------- | ------------------------- | -------------------- | ------------------------------ |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the space element. | | class | `MaybeProp<String>` | `Default::default()` | |
| vertical | `bool` | `false` | Whether to lay out vertically. | | vertical | `bool` | `false` | Whether to lay out vertically. |
| gap | `SpaceGap` | `SpaceGap::Medium` | Space's gap. | | gap | `SpaceGap` | `SpaceGap::Medium` | Space's gap. |
| align | `OptionalMaybeSignal<SpaceAlign>` | `None` | Vertical arrangement. | | align | `MaybeProp<SpaceAlign>` | `None` | Vertical arrangement. |
| justify | `OptionalMaybeSignal<SpaceJustify>` | `None` | Horizontal arrangement. | | justify | `MaybeProp<SpaceJustify>` | `None` | Horizontal arrangement. |
| children | `Children` | | Space's content. | | children | `ChildrenFragment` | | |

12
thaw/src/space/mod.rs
View file

@ -14,11 +14,15 @@ pub enum SpaceGap {
#[component] #[component]
pub fn Space( pub fn Space(
#[prop(optional)] gap: SpaceGap,
#[prop(optional)] vertical: bool,
#[prop(optional, into)] align: MaybeProp<SpaceAlign>,
#[prop(optional, into)] justify: MaybeProp<SpaceJustify>,
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// Space's gap.
#[prop(optional)] gap: SpaceGap,
/// Whether to lay out vertically.
#[prop(optional)] vertical: bool,
/// Vertical arrangement.
#[prop(optional, into)] align: MaybeProp<SpaceAlign>,
/// Horizontal arrangement.
#[prop(optional, into)] justify: MaybeProp<SpaceJustify>,
children: ChildrenFragment, children: ChildrenFragment,
) -> impl IntoView { ) -> impl IntoView {
mount_style("space", include_str!("./space.css")); mount_style("space", include_str!("./space.css"));

23
demo_markdown/docs/spin_button/mod.md → thaw/src/spin_button/docs/mod.md
View file

@ -75,3 +75,26 @@ view! {
<p>"Underlying value: "{ value }</p> <p>"Underlying value: "{ value }</p>
} }
``` ```
### SpinButton Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `Model<T>` | `T::default()` | Current value of the control. |
| placeholder | `MaybeProp<String>` | `Default::default()` | Placeholder of input number. |
| step_page | `MaybeSignal<T>` | | Large difference between two values. This should be greater than step and is used when users hit the Page Up or Page Down keys. |
| min | `MaybeSignal<T>` | `T::min_value()` | The minimum number that the input value can take. |
| max | `MaybeSignal<T>` | `T::max_value()` | The maximum number that the input value can take. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
| parser | `OptionalProp<BoxOneCallback<String, Option<T>>>` | `None` | Modifies the user input before assigning it to the value. |
| format | `OptionalProp<BoxOneCallback<T, String>>` | `None` | Formats the value to be shown to the user. |
#### T impl
```rust
where
T: Send + Sync,
T: Add<Output = T> + Sub<Output = T> + PartialOrd + Bounded,
T: Default + Clone + FromStr + ToString + 'static,
```

33
thaw/src/spin_button/mod.rs
View file

@ -9,13 +9,31 @@ use thaw_utils::{
#[component] #[component]
pub fn SpinButton<T>( pub fn SpinButton<T>(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] value: Model<T>, /// Current value of the control.
#[prop(into)] step_page: MaybeSignal<T>, #[prop(optional, into)]
#[prop(default = T::min_value().into(), into)] min: MaybeSignal<T>, value: Model<T>,
#[prop(default = T::max_value().into(), into)] max: MaybeSignal<T>, /// Large difference between two values. This should be greater
#[prop(optional, into)] disabled: MaybeSignal<bool>, /// than step and is used when users hit the Page Up or Page Down keys.
#[prop(optional, into)] parser: OptionalProp<BoxOneCallback<String, Option<T>>>, #[prop(into)]
#[prop(optional, into)] format: OptionalProp<BoxOneCallback<T, String>>, step_page: MaybeSignal<T>,
/// The minimum number that the input value can take.
#[prop(default = T::min_value().into(), into)]
min: MaybeSignal<T>,
/// The maximum number that the input value can take.
#[prop(default = T::max_value().into(), into)]
max: MaybeSignal<T>,
/// Placeholder of input number.
#[prop(optional, into)]
placeholder: MaybeProp<String>,
/// Whether the input is disabled.
#[prop(optional, into)]
disabled: MaybeSignal<bool>,
/// Modifies the user input before assigning it to the value.
#[prop(optional, into)]
parser: OptionalProp<BoxOneCallback<String, Option<T>>>,
/// Formats the value to be shown to the user.
#[prop(optional, into)]
format: OptionalProp<BoxOneCallback<T, String>>,
) -> impl IntoView ) -> impl IntoView
where where
T: Send + Sync, T: Send + Sync,
@ -69,6 +87,7 @@ where
aria-valuenow=move || value.get().to_string() aria-valuenow=move || value.get().to_string()
type="text" type="text"
disabled=move || disabled.get() disabled=move || disabled.get()
placeholder=move || placeholder.get()
value=initialization_value value=initialization_value
prop:value=move || { prop:value=move || {
let value = value.get(); let value = value.get();

9
demo_markdown/docs/spinner/mod.md → thaw/src/spinner/docs/mod.md
View file

@ -25,7 +25,8 @@ view! {
### Spinner Props ### Spinner Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| ----- | ----------------------------------- | --------------------- | ------------------------------------------- | | ----- | -------------------------- | --------------------- | ---------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the spinner element. | | class | `MaybeProp<String>` | `Default::default()` | |
| size | `MaybeSignal<SpinnerSize>` | `SpinnerSize::Medium` | Spinner size. | | label | `MaybeProp<String>` | `Default::default()` | An optional label for the Spinner. |
| size | `MaybeSignal<SpinnerSize>` | `SpinnerSize::Medium` | The size of the spinner. |

17
thaw/src/switch/docs/mod.md Normal file
View file

@ -0,0 +1,17 @@
# Switch
```rust demo
let checked = RwSignal::new(false);
view! {
<Switch checked />
}
```
### Switch Props
| Name | Type | Default | Description |
| ------- | ------------------- | -------------------- | --------------------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| checked | `Model<bool>` | `false` | Defines the controlled checked state of the Switch. |
| label | `MaybeProp<String>` | `Default::default()` | The Switch's label. |

4
thaw/src/switch/mod.rs
View file

@ -3,8 +3,10 @@ use thaw_utils::{class_list, mount_style, Model};
#[component] #[component]
pub fn Switch( pub fn Switch(
#[prop(optional, into)] checked: Model<bool>,
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// Defines the controlled checked state of the Switch.
#[prop(optional, into)] checked: Model<bool>,
/// The Switch's label.
#[prop(optional, into)] label: MaybeProp<String>, #[prop(optional, into)] label: MaybeProp<String>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("switch", include_str!("./switch.css")); mount_style("switch", include_str!("./switch.css"));

38
thaw/src/tab_list/docs/mod.md Normal file
View file

@ -0,0 +1,38 @@
# Tabs
```rust demo
let selected_value = RwSignal::new(String::new());
view! {
<TabList selected_value>
<Tab value="apple">
"Apple"
</Tab>
<Tab value="pear">
"Pear"
</Tab>
<Tab value="item1">
"Item 1"
</Tab>
<Tab value="item2">
"Item 2"
</Tab>
</TabList>
}
```
### Tabs Props
| Name | Type | Default | Description |
| -------------- | ------------------- | -------------------- | ---------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| selected_value | `Model<String>` | `Default::default()` | The value of the currently selected tab. |
| children | `Children` | | |
### Tab Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | --------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `String` | | The indentifier of the tab. |
| children | `Children` | | |

1
thaw/src/tab_list/tab.rs
View file

@ -6,6 +6,7 @@ use thaw_utils::{class_list, mount_style};
#[component] #[component]
pub fn Tab( pub fn Tab(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// The indentifier of the tab.
#[prop(into)] value: String, #[prop(into)] value: String,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {

13
demo_markdown/docs/table/mod.md → thaw/src/table/docs/mod.md
View file

@ -38,12 +38,9 @@ view! {
} }
``` ```
### Table Props ### Table & TableHeader & TableHeaderCell & TableBody & TableRow & TableCell & TableCellLayout Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | -------- | ------------------- | -------------------- | ----------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the table element. | | class | `MaybeProp<String>` | `Default::default()` | |
| style | `MaybeSignal<String>` | `Default::default()` | Table's style. | | children | `Children` | | |
| single_row | `MaybeSignal<bool>` | `true` | Whether columns are not divided. If the prop is true, table cell has no border-right. |
| single_column | `MaybeSignal<bool>` | `false` | Whether rows are not divided. If the prop is true, table cell has no border-bottom. |
| children | `Children` | | Table's content. |

33
thaw/src/tag/docs/mod.md Normal file
View file

@ -0,0 +1,33 @@
# Tag
```rust demo
view! {
<Tag>"default"</Tag>
}
```
### Closable
```rust demo
// let message = use_message();
let success = move |_: ev::MouseEvent| {
// message.create(
// "tag close".into(),
// MessageVariant::Success,
// Default::default(),
// );
};
view! {
<Tag closable=true on_close=success>"Default"</Tag>
}
```
### Tag Props
| Name | Type | Default | Description |
| -------- | ---------------------------------------- | -------------------- | ------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| closable | `MaybeSignal<bool>` | `false` | Whether the tag shows a close button. |
| on_close | `Option<ArcOneCallback<ev::MouseEvent>>` | `None` | Close clicked callback. |
| children | `Children` | | |

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

@ -4,8 +4,12 @@ use thaw_utils::{class_list, mount_style, ArcOneCallback};
#[component] #[component]
pub fn Tag( pub fn Tag(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] closable: MaybeSignal<bool>, /// Whether the tag shows a close button.
#[prop(optional, into)] on_close: Option<ArcOneCallback<ev::MouseEvent>>, #[prop(optional, into)]
closable: MaybeSignal<bool>,
/// Close clicked callback.
#[prop(optional, into)]
on_close: Option<ArcOneCallback<ev::MouseEvent>>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("tag", include_str!("./tag.css")); mount_style("tag", include_str!("./tag.css"));

22
thaw/src/text/docs/mod.md Normal file
View file

@ -0,0 +1,22 @@
# Typography
```rust demo
view! {
<Space>
<Text>"text"</Text>
<Text tag=TextTag::Code>"code"</Text>
<Caption1>"Caption1"</Caption1>
<Caption1Strong>"Caption1Strong"</Caption1Strong>
<Body1>"Body1"</Body1>
</Space>
}
```
## Text & Caption1 & Caption1Strong & Body1 & Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| style | `MaybeProp<String>` | `Default::default()` | |
| tag | `TextTag` | `TextTag::Span` | |
| children | `Children` | | |

53
thaw/src/textarea/docs/mod.md Normal file
View file

@ -0,0 +1,53 @@
# Input
```rust demo
let value = RwSignal::new(String::from("o"));
view! {
<Textarea value placeholder="Textarea"/>
}
```
### Disabled
```rust demo
let value = RwSignal::new(String::from("o"));
view! {
<Textarea value disabled=true/>
}
```
### Resize
```rust demo
view! {
<Space vertical=true>
<Textarea placeholder=r#"Textarea with resize set to "none""#/>
<Textarea placeholder=r#"Textarea with resize set to "vertical""# resize=TextareaResize::Vertical/>
<Textarea placeholder=r#"Textarea with resize set to "horizontal""# resize=TextareaResize::Horizontal/>
<Textarea placeholder=r#"Textarea with resize set to "both""# resize=TextareaResize::Both/>
</Space>
}
```
### Textarea Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `Model<String>` | `Default::default()` | The value of the Textarea. |
| allow_value | `Option<BoxOneCallback<String, bool>>` | `None` | Check the incoming value, if it returns false, input will not be accepted. |
| placeholder | `MaybeProp<String>` | `Default::default()` | Placeholder text for the input. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
| on_focus | `Option<BoxOneCallback<ev::FocusEvent>>` | `None` | Callback triggered when the input is focussed on. |
| on_blur | `Option<BoxOneCallback<ev::FocusEvent>>` | `None` | Callback triggered when the input is blurred. |
| resize | `MaybeSignal<TextareaResize>` | `TextareaResize::None` | Which direction the Textarea is allowed to be resized. |
| comp_ref | ref `ComponentRef<TextareaRef>` | `Default::default()` | |
### TextareaRef Props
| Name | Type | Description |
| ----- | ----------- | ------------------------ |
| focus | `Fn(&self)` | Focus the input element. |
| blur | `Fn(&self)` | Blur the input element. |

28
thaw/src/textarea/mod.rs
View file

@ -3,17 +3,29 @@ use thaw_utils::{class_list, mount_style, BoxOneCallback, ComponentRef, Model};
#[component] #[component]
pub fn Textarea( pub fn Textarea(
#[prop(optional, into)] value: Model<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] allow_value: Option<BoxOneCallback<String, bool>>, /// The value of the Textarea.
#[prop(optional, into)] placeholder: MaybeProp<String>, #[prop(optional, into)]
#[prop(optional, into)] on_focus: Option<BoxOneCallback<ev::FocusEvent>>, value: Model<String>,
#[prop(optional, into)] on_blur: Option<BoxOneCallback<ev::FocusEvent>>, /// Check the incoming value, if it returns false, input will not be accepted.
#[prop(optional, into)] disabled: MaybeSignal<bool>, #[prop(optional, into)]
allow_value: Option<BoxOneCallback<String, bool>>,
/// Placeholder text for the input.
#[prop(optional, into)]
placeholder: MaybeProp<String>,
/// Callback triggered when the input is focussed on.
#[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.
#[prop(optional, into)]
disabled: MaybeSignal<bool>,
/// Which direction the Textarea is allowed to be resized. /// Which direction the Textarea is allowed to be resized.
#[prop(optional, into)] #[prop(optional, into)]
resize: MaybeSignal<TextareaResize>, resize: MaybeSignal<TextareaResize>,
#[prop(optional)] comp_ref: ComponentRef<TextareaRef>, #[prop(optional)] comp_ref: ComponentRef<TextareaRef>,
#[prop(optional, into)] class: MaybeProp<String>,
// #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("textarea", include_str!("./textarea.css")); mount_style("textarea", include_str!("./textarea.css"));
@ -92,12 +104,14 @@ pub struct TextareaRef {
} }
impl TextareaRef { impl TextareaRef {
/// Focus the input element.
pub fn focus(&self) { pub fn focus(&self) {
if let Some(textarea_el) = self.textarea_ref.get_untracked() { if let Some(textarea_el) = self.textarea_ref.get_untracked() {
_ = textarea_el.focus(); _ = textarea_el.focus();
} }
} }
/// Blur the input element.
pub fn blur(&self) { pub fn blur(&self) {
if let Some(textarea_el) = self.textarea_ref.get_untracked() { if let Some(textarea_el) = self.textarea_ref.get_untracked() {
_ = textarea_el.blur(); _ = textarea_el.blur();

22
thaw/src/time_picker/docs/mod.md Normal file
View file

@ -0,0 +1,22 @@
# Time Picker
```rust demo
use chrono::prelude::*;
let value = RwSignal::new(Local::now().time());
let option_value = RwSignal::new(Local::now().time());
view! {
<Space vertical=true>
<TimePicker value />
<TimePicker value=option_value />
</Space>
}
```
## TimePicker Props
| Name | Type | Default | Description |
| ----- | ------------------------ | -------------------- | ------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `OptionModel<NaiveTime>` | `Default::default()` | Set the TimePicker value. |

4
thaw/src/time_picker/mod.rs
View file

@ -9,8 +9,10 @@ use thaw_utils::{class_list, mount_style, ArcOneCallback, ComponentRef, OptionMo
#[component] #[component]
pub fn TimePicker( pub fn TimePicker(
#[prop(optional, into)] value: OptionModel<NaiveTime>,
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
/// Set the TimePicker value.
#[prop(optional, into)]
value: OptionModel<NaiveTime>,
// #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("time-picker", include_str!("./time-picker.css")); mount_style("time-picker", include_str!("./time-picker.css"));

113
thaw/src/toast/docs/mod.md Normal file
View file

@ -0,0 +1,113 @@
# Toast
```rust demo
let toaster = ToasterInjection::expect_context();
let on_click = move |_| {
toaster.dispatch_toast(view! {
<Toast>
<ToastTitle>"Email sent"</ToastTitle>
<ToastBody>
"This is a toast body"
<ToastBodySubtitle slot>
"Subtitle"
</ToastBodySubtitle>
</ToastBody>
<ToastFooter>
"Footer"
// <Link>Action</Link>
// <Link>Action</Link>
</ToastFooter>
</Toast>
}.into_any(), Default::default());
};
view! {
<Button on_click=on_click>"Make toast"</Button>
}
```
### Toast Positions
```rust demo
let toaster = ToasterInjection::expect_context();
fn dispatch_toast(toaster: ToasterInjection, position: ToastPosition) {
toaster.dispatch_toast(view! {
<Toast>
<ToastTitle>"Email sent"</ToastTitle>
<ToastBody>
"This is a toast body"
<ToastBodySubtitle slot>
"Subtitle"
</ToastBodySubtitle>
</ToastBody>
<ToastFooter>
"Footer"
// <Link>Action</Link>
// <Link>Action</Link>
</ToastFooter>
</Toast>
}.into_any(), ToastOptions::default().with_position(position));
};
view! {
<Space>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::Bottom)>"Bottom"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::BottomStart)>"BottomStart"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::BottomEnd)>"BottomEnd"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::Top)>"Top"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::TopStart)>"Topstart"</Button>
<Button on_click=move |_| dispatch_toast(toaster, ToastPosition::TopEnd)>"TopEnd"</Button>
</Space>
}
```
### ToasterProvider Props
| Name | Type | Default | Description |
| -------- | --------------- | -------------------------- | ------------------------------------- |
| position | `ToastPosition` | `ToastPosition::BottomEnd` | The position the toast should render. |
| children | `Children` | | |
### ToastOptions Props
| Name | Type | Description |
| ------------- | --------------------------------------- | ------------------------------------- |
| with_position | `Fn(mut self, position: ToastPosition)` | The position the toast should render. |
| with_timeout | `Fn(mut self, timeout: Duration)` | Auto dismiss timeout in milliseconds. |
| with_intent | `Fn(mut self, intent: ToastIntent)` | Intent. |
### Toast & ToastFooter Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### ToastTitle Props
| Name | Type | Default | Description |
| ------------------ | ------------------------------- | ------- | ----------- |
| toast_title_media | slot `Option<ToastTitleMedia>` | `None` | |
| toast_title_action | slot `Option<ToastTitleAction>` | `None` | |
| children | `Children` | | |
### ToastTitleMedia & ToastTitleAction Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### ToastBody Props
| Name | Type | Default | Description |
| ------------------- | -------------------------------- | ------- | ----------- |
| toast_body_subtitle | slot `Option<ToastBodySubtitle>` | `None` | |
| children | `Children` | | |
### ToastBodySubtitle Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |

3
thaw/src/toast/toast.rs
View file

@ -66,16 +66,19 @@ impl Default for ToastOptions {
} }
impl ToastOptions { impl ToastOptions {
/// The position the toast should render.
pub fn with_position(mut self, position: ToastPosition) -> Self { pub fn with_position(mut self, position: ToastPosition) -> Self {
self.position = Some(position); self.position = Some(position);
self self
} }
/// Auto dismiss timeout in milliseconds.
pub fn with_timeout(mut self, timeout: Duration) -> Self { pub fn with_timeout(mut self, timeout: Duration) -> Self {
self.timeout = Some(timeout); self.timeout = Some(timeout);
self self
} }
/// Intent.
pub fn with_intent(mut self, intent: ToastIntent) -> Self { pub fn with_intent(mut self, intent: ToastIntent) -> Self {
self.intent = Some(intent); self.intent = Some(intent);
self self

1
thaw/src/toast/toaster_provider.rs
View file

@ -3,6 +3,7 @@ use leptos::{context::Provider, prelude::*};
#[component] #[component]
pub fn ToasterProvider( pub fn ToasterProvider(
/// The position the toast should render.
#[prop(optional)] position: ToastPosition, #[prop(optional)] position: ToastPosition,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {

62
thaw/src/upload/docs/mod.md Normal file
View file

@ -0,0 +1,62 @@
# Upload
```rust demo
use send_wrapper::SendWrapper;
// let message = use_message();
let custom_request = move |file_list: SendWrapper<FileList>| {
// message.create(
// format!("Number of uploaded files: {}", file_list.length()),
// MessageVariant::Success,
// Default::default(),
// );
};
view!{
<Upload>
<Button>
"upload"
</Button>
</Upload>
}
```
### Drag to upload
```rust demo
let toaster = ToasterInjection::expect_context();
let custom_request = move |file_list: FileList| {
let len = file_list.length();
toaster.dispatch_toast(view! {
<Toast>
<ToastBody>
{format!("Number of uploaded files: {len}")}
</ToastBody>
</Toast>
}.into_any(), Default::default());
};
view! {
<Upload custom_request>
<UploadDragger>"Click or drag a file to this area to upload"</UploadDragger>
</Upload>
}
```
### Upload Props
| Name | Type | Default | Description |
| -------------- | ---------------------------------- | -------------------- | ------------------------------------ |
| class | `MaybeProp<String>` | `Default::default()` | |
| accept | `MaybeSignal<String>` | `Default::default()` | The accept type of upload. |
| multiple | `MaybeSignal<bool>` | `false` | Allow multiple files to be selected. |
| custom_request | `Option<ArcOneCallback<FileList>>` | `None` | Customize upload request. |
| children | `Children` | | |
### UploadDragger Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |

12
thaw/src/upload/mod.rs
View file

@ -9,9 +9,15 @@ use thaw_utils::{add_event_listener, class_list, mount_style, ArcOneCallback};
#[component] #[component]
pub fn Upload( pub fn Upload(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] accept: MaybeSignal<String>, /// The accept type of upload.
#[prop(optional, into)] multiple: MaybeSignal<bool>, #[prop(optional, into)]
#[prop(optional, into)] custom_request: Option<ArcOneCallback<FileList>>, accept: MaybeSignal<String>,
/// Allow multiple files to be selected.
#[prop(optional, into)]
multiple: MaybeSignal<bool>,
/// Customize upload request.
#[prop(optional, into)]
custom_request: Option<ArcOneCallback<FileList>>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("upload", include_str!("./upload.css")); mount_style("upload", include_str!("./upload.css"));