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

feat(docs): adds component prop

Browse source
This commit is contained in:
luoxiao 2024-08-12 17:38:43 +08:00 • committed by luoxiaozero
parent d99354f822
commit efc00d1699
52 changed files with 662 additions and 439 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.prettierrc.toml Normal file
View file

@ -0,0 +1,3 @@
[[overrides]]
files = "*.md"
options = { proseWrap = "never", printWidth = 120 }

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

@ -1,34 +0,0 @@
# Breadcrumb
```rust demo
view! {
<Breadcrumb>
<BreadcrumbItem>
<BreadcrumbButton>"Leptos"</BreadcrumbButton>
</BreadcrumbItem>
<BreadcrumbDivider />
<BreadcrumbItem>
<BreadcrumbButton>"UI"</BreadcrumbButton>
</BreadcrumbItem>
<BreadcrumbDivider />
<BreadcrumbItem>
<BreadcrumbButton current=true>"Thaw"</BreadcrumbButton>
</BreadcrumbItem>
</Breadcrumb>
}
```
### Breadcrumb Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the breadcrumb element. |
| separator | `MaybeSignal<String>` | `/` | Breadcrumb separator. |
| children | `Children` | | Breadcrumb's content. |
### BreadcrumbItem Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the breadcrumb link element. |
| children | `Children` | | BreadcrumbItem's content. |

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

@ -1,21 +0,0 @@
# Calendar
```rust demo
use chrono::prelude::*;
let value = RwSignal::new(Local::now().date_naive());
let option_value = RwSignal::new(Some(Local::now().date_naive()));
view! {
<Space vertical=true>
<Calendar value />
<Calendar value=option_value />
</Space>
}
```
### Calendar Props
| Name | Type | Default | Desciption |
| ----- | ----------------------------------- | -------------------- | ------------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the calendar element. |
| value | `Model<Option<NaiveDate>>` | `Default::default()` | Set the calendar value |

44
demo_markdown/docs/card/mod.md
View file

@ -1,44 +0,0 @@
# Card
```rust demo
view! {
<Card>
<CardHeader>
<Body1>
<b>"Header"</b>" 2022-02-22"
</Body1>
<CardHeaderDescription slot>
<Caption1>"Description"</Caption1>
</CardHeaderDescription>
<CardHeaderAction slot>
<Button appearance=ButtonAppearance::Transparent>
"..."
</Button>
</CardHeaderAction>
</CardHeader>
<CardPreview>
<img src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" style="width: 100%"/>
</CardPreview>
<CardFooter>
<Button>"Reply"</Button>
<Button>"Share"</Button>
</CardFooter>
</Card>
}
```
### Card Props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the card element. |
| title | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Card title. |
| children | `Children` | | Card's content. |
### Card Slots
| Name | Default | Description |
| --------------- | ------- | --------------------- |
| CardHeader | `None` | Header content. |
| CardHeaderExtra | `None` | Header extra content. |
| CardFooter | `None` | Footer content. |

50
demo_markdown/docs/checkbox/mod.md
View file

@ -1,50 +0,0 @@
# Checkbox
```rust demo
let checked = RwSignal::new(false);
view! {
<Checkbox checked label="Click"/>
<Checkbox />
}
```
### Group
```rust demo
use std::collections::HashSet;
let value = RwSignal::new(HashSet::new());
view! {
<CheckboxGroup value>
<Checkbox label="apple" value="a"/>
<Checkbox label="b" value="b"/>
<Checkbox label="c" value="c"/>
</CheckboxGroup>
<div style="margin-top: 1rem">"value: " {move || format!("{:?}", value.get())}</div>
}
```
### Checkbox Props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | ------------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the checkbox element. |
| value | `Model<bool>` | `false` | Whether the checkbox is being checked. |
| children | `Children` | | Checkbox's content. |
### CheckboxGroup Props
| Name | Type | Default | Description |
| -------- | ------------------------ | -------------------- | ------------------------------------- |
| value | `Model<HashSet<String>>` | `Default::default()` | Sets the value of the checkbox group. |
| children | `Children` | | CheckboxGroup's content. |
### CheckboxItem Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the checkbox element. |
| key | `String` | | The key of the checkbox to be used in a checkbox group. |
| label | `Option<String>` | `None` | Checkbox's label. |

22
demo_markdown/docs/date_picker/mod.md
View file

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

40
demo_markdown/docs/dialog/mod.md
View file

@ -1,40 +0,0 @@
# Dialog
```rust demo
let open = RwSignal::new(false);
view! {
<Button on_click=move |_| open.set(true)>"Open Dialog"</Button>
<Dialog open>
<DialogSurface>
<DialogBody>
<DialogTitle>"Dialog title"</DialogTitle>
<DialogContent>
"Dialog body"
</DialogContent>
<DialogActions>
<Button appearance=ButtonAppearance::Primary>"Do Something"</Button>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
}
```
### Modal Props
| Name | Type | Default | Description |
| -------------- | --------------------- | -------------------- | ------------------------------------------- |
| show | `Model<bool>` | | Whether to show modal. |
| title | `MaybeSignal<String>` | `Default::default()` | Modal title. |
| width | `MaybeSignal<String>` | `600px` | Modal width. |
| z_index | `MaybeSignal<i16>` | `2000` | z-index of the modal. |
| mask_closeable | `MaybeSignal<bool>` | `true` | Whether to emit hide event when click mask. |
| close_on_esc | `bool` | `true` | Whether to close modal on Esc is pressed. |
| children | `Children` | | Modal's content. |
### Modal Slots
| Name | Default | Description |
| ----------- | ------- | --------------- |
| ModalFooter | `None` | Footer content. |

20
demo_markdown/docs/icon/mod.md
View file

@ -1,20 +0,0 @@
# Icon
```rust demo
view! {
<Space>
<Icon icon=icondata::AiCloseOutlined/>
<Icon icon=icondata::AiCheckOutlined/>
</Space>
}
```
### Icon Props
| Name | Type | Default | Desciption |
| ------ | ----------------------------- | -------------------- | ----------------------- |
| class | `Option<MaybeSignal<String>>` | `Default::default()` | HTML class attribute. |
| style | `Option<MaybeSignal<String>>` | `Default::default()` | HTML style attribute. |
| icon | `MaybeSignal<Icon>` | | The icon to show. |
| width | `Option<MaybeSignal<String>>` | `1em` | The width of the icon. |
| height | `Option<MaybeSignal<String>>` | `1em` | The height of the icon. |

34
demo_markdown/src/lib.rs
View file

@ -26,24 +26,24 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"AccordionMdPage" => "../../thaw/src/accordion/docs/mod.md",
// "AlertMdPage" => "../docs/alert/mod.md",
"AnchorMdPage" => "../../thaw/src/anchor/docs/mod.md",
"AutoCompleteMdPage" => "../docs/auto_complete/mod.md",
"AvatarMdPage" => "../docs/avatar/mod.md",
"BackTopMdPage" => "../docs/back_top/mod.md",
"BadgeMdPage" => "../docs/badge/mod.md",
"BreadcrumbMdPage" => "../docs/breadcrumb/mod.md",
"ButtonMdPage" => "../docs/button/mod.md",
"CalendarMdPage" => "../docs/calendar/mod.md",
"CardMdPage" => "../docs/card/mod.md",
"CheckboxMdPage" => "../docs/checkbox/mod.md",
"ColorPickerMdPage" => "../docs/color_picker/mod.md",
"AutoCompleteMdPage" => "../../thaw/src/auto_complete/docs/mod.md",
"AvatarMdPage" => "../../thaw/src/avatar/docs/mod.md",
"BackTopMdPage" => "../../thaw/src/back_top/docs/mod.md",
"BadgeMdPage" => "../../thaw/src/badge/docs/mod.md",
"BreadcrumbMdPage" => "../../thaw/src/breadcrumb/docs/mod.md",
"ButtonMdPage" => "../../thaw/src/button/docs/mod.md",
"CalendarMdPage" => "../../thaw/src/calendar/docs/mod.md",
"CardMdPage" => "../../thaw/src/card/docs/mod.md",
"CheckboxMdPage" => "../../thaw/src/checkbox/docs/mod.md",
"ColorPickerMdPage" => "../../thaw/src/color_picker/docs/mod.md",
"ComboboxMdPage" => "../../thaw/src/combobox/docs/mod.md",
"ConfigProviderMdPage" => "../docs/config_provider/mod.md",
"DatePickerMdPage" => "../docs/date_picker/mod.md",
"DialogMdPage" => "../docs/dialog/mod.md",
"DividerMdPage" => "../docs/divider/mod.md",
"DrawerMdPage" => "../docs/drawer/mod.md",
"GridMdPage" => "../docs/grid/mod.md",
"IconMdPage" => "../docs/icon/mod.md",
"ConfigProviderMdPage" => "../../thaw/src/config_provider/docs/mod.md",
"DatePickerMdPage" => "../../thaw/src/date_picker/docs/mod.md",
"DialogMdPage" => "../../thaw/src/dialog/docs/mod.md",
"DividerMdPage" => "../../thaw/src/divider/docs/mod.md",
"DrawerMdPage" => "../../thaw/src/drawer/docs/mod.md",
"GridMdPage" => "../../thaw/src/grid/docs/mod.md",
"IconMdPage" => "../../thaw/src/icon/docs/mod.md",
"ImageMdPage" => "../docs/image/mod.md",
"InputMdPage" => "../docs/input/mod.md",
"LayoutMdPage" => "../docs/layout/mod.md",

8
thaw/src/accordion/accordion_item.rs
View file

@ -95,7 +95,7 @@ pub struct AccordionHeader {
children: Children,
}
#[slot]
pub struct AccordionPanel {
children: Children,
}
// #[slot]
// pub struct AccordionPanel {
// children: Children,
// }

25
thaw/src/accordion/docs/mod.md
View file

@ -64,3 +64,28 @@ view! {
</Accordion>
}
```
### Accordion Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| open_items | `Model<HashSet<String>>` | `Default::default()` | Controls the state of the panel. |
| multiple | `bool` | `Default::default()` | Indicates if Accordion support multiple Panels opened at the same time. |
| collapsible | `bool` | `Default::default()` | Indicates if Accordion support multiple Panels closed at the same time. |
| children | `Children` | | |
### AccordionItem Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `MaybeSignal<String>` | | Required value that identifies this item inside an Accordion component. |
| accordion_header | slot `AccordionHeader` | | |
| children | `Children` | | |
### AccordionHeader Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |

10
thaw/src/anchor/docs/mod.md
View file

@ -29,15 +29,15 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the anchor element. |
| class | `MaybeProp<String>` | `Default::default()` | |
| offset_target | `Option<OffsetTarget>` | `None` | The element or selector used to calc offset of link elements. If you are not scrolling the entire document but only a part of it, you may need to set this. |
| children | `Children` | | Anchor's children. |
| children | `Children` | | |
### AnchorLink Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the anchor link element. |
| -------- | --------------------- | -------------------- | -------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| title | `MaybeSignal<String>` | | The content of link. |
| href | `String` | | The target of link. |
| children | `Option<Children>` | `None` | AnchorLink's children. |
| children | `Option<Children>` | `None` | |

3
thaw/src/anchor/mod.rs
View file

@ -10,7 +10,8 @@ use web_sys::{DomRect, Element};
pub fn Anchor(
#[prop(optional, into)] class: MaybeProp<String>,
/// The element or selector used to calc offset of link elements.
/// If you are not scrolling the entire document but only a part of it, you may need to set this.
/// If you are not scrolling the entire document but only a part of it,
/// you may need to set this.
#[prop(into, optional)]
offset_target: Option<OffsetTarget>,
children: Children,

1
thaw/src/auto_complete/auto_complete_option.rs
View file

@ -6,6 +6,7 @@ use thaw_utils::class_list;
#[component]
pub fn AutoCompleteOption(
#[prop(optional, into)] class: MaybeProp<String>,
/// Option ID.
value: String,
children: Children,
) -> impl IntoView {

41
demo_markdown/docs/auto_complete/mod.md → thaw/src/auto_complete/docs/mod.md
View file

@ -59,33 +59,38 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the autocomplete element. |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `Model<String>` | `Default::default()` | Input of autocomplete. |
| placeholder | `OptionalProp<RwSignal<String>>` | `Default::default()` | Autocomplete's placeholder. |
| options | `MaybeSignal<Vec<AutoCompleteOption>>` | `Default::default()` | Options to autocomplete from. |
| placeholder | `MaybeProp<String>` | `Default::default()` | Autocomplete's placeholder. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
| allow_free_input | `bool` | `false` | Whether free text input is allowed. |
| invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. |
| clear_after_select | `MaybeSignal<bool>` | `false` | Whether to clear after selection. |
| blur_after_select | `MaybeSignal<bool>` | `false` | Whether to blur after selection. |
| on_select | `Option<Callback<String>>` | `None` | On select callback function. |
| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
| auto_complete_prefix | slot `Option<AutoCompletePrefix>` | `None` | |
| auto_complete_suffix | slot `Option<AutoCompleteSuffix>` | `None` | |
| comp_ref | ref `ComponentRef<AutoCompleteRef>` | `Default::default()` | |
| children | `Option<Children>` | `None` | |
### AutoCompleteOption Properties
### AutoCompleteOption Props
| Name | Type | Description |
| ----- | -------- | ------------------- |
| value | `String` | Option ID. |
| label | `String` | Option label value. |
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `String` | | Option ID. |
| children | `Children` | | |
### AutoCompleteOption Slots
### AutoCompletePrefix Props
| Name | Default | Description |
| ------------------ | ------- | --------------------------- |
| AutoCompletePrefix | `None` | AutoCompletePrefix content. |
| AutoCompleteSuffix | `None` | AutoCompleteSuffix content. |
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### AutoComplete Ref
### AutoCompleteSuffix Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### AutoCompleteRef Props
| Name | Type | Description |
| ----- | ----------- | ------------------------ |

20
thaw/src/auto_complete/mod.rs
View file

@ -24,13 +24,19 @@ pub struct AutoCompleteSuffix {
#[component]
pub fn AutoComplete(
#[prop(optional, into)] value: Model<String>,
#[prop(optional, into)] placeholder: MaybeProp<String>,
#[prop(optional, into)] clear_after_select: MaybeSignal<bool>,
#[prop(optional, into)] blur_after_select: MaybeSignal<bool>,
#[prop(optional, into)] on_select: Option<BoxOneCallback<String>>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] class: MaybeProp<String>,
/// Input of autocomplete.
#[prop(optional, into)] value: Model<String>,
/// Autocomplete's placeholder.
#[prop(optional, into)] placeholder: MaybeProp<String>,
// Whether to clear after selection.
#[prop(optional, into)] clear_after_select: MaybeSignal<bool>,
/// Whether to blur after selection.
#[prop(optional, into)] blur_after_select: MaybeSignal<bool>,
// On select callback function.
#[prop(optional, into)] on_select: Option<BoxOneCallback<String>>,
/// Whether the input is disabled.
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional)] auto_complete_prefix: Option<AutoCompletePrefix>,
#[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>,
#[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>,
@ -193,12 +199,14 @@ pub struct AutoCompleteRef {
}
impl AutoCompleteRef {
/// Focus the input element.
pub fn focus(&self) {
if let Some(input_ref) = self.input_ref.get_untracked() {
input_ref.focus();
}
}
/// Blur the input element.
pub fn blur(&self) {
if let Some(input_ref) = self.input_ref.get_untracked() {
input_ref.blur();

12
demo_markdown/docs/avatar/mod.md → thaw/src/avatar/docs/mod.md
View file

@ -56,8 +56,10 @@ view! {
### Avatar Props
| Name | Type | Default | Description |
| ----- | ----------------------------------- | -------------------- | ----------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the avatar element. |
| src | `Option<MaybeSignal<String>>` | `Default::default()` | Avatar's image source. |
| round | `MaybeSignal<bool>` | `false` | Whether to display a rounded avatar. |
| size | `MaybeSignal<u16>` | `30` | Avatar's size. |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| src | `MaybeProp<String>` | `Default::default()` | The Avatar's image. |
| name | `MaybeProp<String>` | `Default::default()` | The name of the person or entity represented by this Avatar. |
| initials | `MaybeProp<String>` | `Default::default()` | Custom initials. |
| shape | `MaybeSignal<AvatarShape>` | `Default::default()` | The avatar can have a circular or square shape. |
| size | `MaybeProp<u8>` | `Default::default()` | Size of the avatar in pixels. |

77
thaw/src/avatar/mod.rs
View file

@ -1,30 +1,30 @@
use leptos::prelude::*;
use leptos::{either::Either, prelude::*};
use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style, StoredMaybeSignal};
use thaw_utils::{class_list, mount_style};
#[component]
pub fn Avatar(
#[prop(optional, into)] class: MaybeProp<String>,
/// The Avatar's image.
#[prop(optional, into)]
src: Option<MaybeSignal<String>>,
src: MaybeProp<String>,
/// The name of the person or entity represented by this Avatar.
#[prop(optional, into)]
name: Option<MaybeSignal<String>>,
name: MaybeProp<String>,
/// Custom initials.
#[prop(optional, into)]
initials: Option<MaybeSignal<String>>,
initials: MaybeProp<String>,
/// The avatar can have a circular or square shape.
#[prop(optional, into)]
shape: MaybeSignal<AvatarShape>,
/// Size of the avatar in pixels.
#[prop(optional, into)]
size: Option<MaybeSignal<u8>>,
#[prop(optional, into)] class: MaybeProp<String>,
size: MaybeProp<u8>,
) -> impl IntoView {
mount_style("avatar", include_str!("./avatar.css"));
let style = move || {
let size = size?.get();
let size = size.get()?;
let mut style = format!("width: {0}px; height: {0}px;", size);
@ -43,43 +43,70 @@ pub fn Avatar(
Some(style)
};
let is_show_default_icon = src.is_none() && initials.is_none() && name.is_none();
let name: Option<StoredMaybeSignal<_>> = name.map(|n| n.into());
let name = StoredValue::new(name);
let src = StoredValue::new(src);
let initials = StoredValue::new(initials);
let is_show_default_icon = Memo::new(move |_| {
if name.with_value(|n| n.with(|n| n.is_some())) {
false
} else if src.with_value(|s| s.with(|s| s.is_some())) {
false
} else if initials.with_value(|i| i.with(|i| i.is_some())) {
false
} else {
true
}
});
view! {
<span
class=class_list!["thaw-avatar", move || format!("thaw-avatar--{}", shape.get().as_str()), class]
style=move || style().unwrap_or_default()
role="img"
aria-label=move || name.as_ref().map(|n| n.get())
aria-label=move || name.with_value(|n| n.get())
>
{
move || {
if let Some(initials) = initials.as_ref().map_or_else(|| name.as_ref().map(|n| initials_name(n.get())), |i| Some(i.get())) {
let mut initials = initials.with_value(|i| i.get());
if initials.is_none() {
name.with_value(|name| {
if let Some(name) = name.get() {
initials = Some(initials_name(name));
}
});
}
view! {
<OptionComp value=initials let:initials>
<span class="thaw-avatar__initials">
{initials}
</span>
}.into()
} else {
None
}
}
}
<OptionComp value=src let:src>
<img src=move || src.get() class="thaw-avatar__image"/>
</OptionComp>
}
}
}
{
if is_show_default_icon {
move || {
let src = src.with_value(|s| s.get());
view! {
<OptionComp value=src let:src>
<img src=src class="thaw-avatar__image"/>
</OptionComp>
}
}
}
{
move || {
if is_show_default_icon.get() {
Either::Left(view! {
<span aria-hidden="true" class="thaw-avatar__icon">
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
<path d="M10 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM7 6a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-2 5a2 2 0 0 0-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0 0 10 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0 0 17 13a2 2 0 0 0-2-2H5Zm-1 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0 1 10 17a8.16 8.16 0 0 1-4.33-1.05A3.36 3.36 0 0 1 4 13Z" fill="currentColor"></path>
</svg>
</span>
}.into()
})
} else {
None
Either::Right(())
}
}
}
</span>
@ -88,7 +115,11 @@ pub fn Avatar(
// TODO
fn initials_name(name: String) -> String {
if name.len() < 2 {
name.to_ascii_uppercase()
} else {
name.split_at(2).0.to_string().to_ascii_uppercase()
}
}
#[derive(Default, Clone)]

6
demo_markdown/docs/back_top/mod.md → thaw/src/back_top/docs/mod.md
View file

@ -36,11 +36,11 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the back top element. |
| class | `MaybeProp<String>` | `Default::default()` | |
| right | `MaybeSignal<i32>` | `40` | The width of BackTop from the right side of the page. |
| bottom | `MaybeSignal<i32>` | `40` | The height of BackTop from the bottom of the page. |
| bottom | `MaybeSignal<i32>` | `180` | BackTop's trigger scroll top. |
| children | `Option<Children>` | `None` | BackTop's content. |
| visibility_height | `MaybeSignal<i32>` | `180` | BackTop's trigger scroll top. |
| children | `Option<Children>` | `None` | |
<div style="height: 600px">
</div>

2
thaw/src/badge/badge.rs
View file

@ -4,7 +4,7 @@ use thaw_utils::{class_list, mount_style};
#[component]
pub fn Badge(
#[prop(optional, into)] class: MaybeProp<String>,
/// A Badge can be filled, outline, ghost, inverted
/// A Badge can be filled, outline, ghost, inverted.
#[prop(optional, into)]
appearance: MaybeSignal<BadgeAppearance>,
/// A Badge can be on of several preset sizes.

11
demo_markdown/docs/badge/mod.md → thaw/src/badge/docs/mod.md
View file

@ -95,9 +95,8 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the badge element. |
| value | `MaybeSignal<u32>` | `0` | Badge's value. |
| max | `MaybeSignal<u32>` | `u32::MAX` | The maximum number of the badge when its value overflows. |
| variant | `MaybeSignal<BadgeVariant>` | `BadgeVariant::Error` | Badge variant. |
| dot | `MaybeSignal<bool>` | `false` | Show badge as dot. |
| children | `Children` | | Badge's content. |
| class | `MaybeProp<String>` | `Default::default()` | |
| appearance | `MaybeSignal<BadgeAppearance>` | `Default::default()` | A Badge can be filled, outline, ghost, inverted. |
| size | `MaybeSignal<BadgeSize>` | `Default::default()` | A Badge can be on of several preset sizes. |
| color | `MaybeSignal<BadgeColor>` | `Default::default()` | A Badge can be one of preset colors. |
| children | `Option<Children>` | `None` | |

47
thaw/src/breadcrumb/docs/mod.md Normal file
View file

@ -0,0 +1,47 @@
# Breadcrumb
```rust demo
view! {
<Breadcrumb>
<BreadcrumbItem>
<BreadcrumbButton>"Leptos"</BreadcrumbButton>
</BreadcrumbItem>
<BreadcrumbDivider />
<BreadcrumbItem>
<BreadcrumbButton>"UI"</BreadcrumbButton>
</BreadcrumbItem>
<BreadcrumbDivider />
<BreadcrumbItem>
<BreadcrumbButton current=true>"Thaw"</BreadcrumbButton>
</BreadcrumbItem>
</Breadcrumb>
}
```
### Breadcrumb Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### BreadcrumbItem Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### BreadcrumbButton Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| current | `MaybeSignal<bool>` | `false` | Defines current sate of BreadcrumbButton. |
| children | `Children` | | |
### BreadcrumbDivider Props
| Name | Type | Default | Description |
| ----- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |

25
demo_markdown/docs/button/mod.md → thaw/src/button/docs/mod.md
View file

@ -165,24 +165,21 @@ view! {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the button element. |
| style | `Option<MaybeSignal<String>>` | `Default::default()` | Button's style. |
| appearance | `MaybeSignal<ButtonAppearance>` | `ButtonAppearance::Primary` | Button's variant. |
| color | `MaybeSignal<ButtonColor>` | `ButtonColor::Primary` | Button's color. |
| class | `MaybeProp<String>` | `Default::default()` | |
| appearance | `MaybeSignal<ButtonAppearance>` | `Default::default()` | A button can have its content and borders styled for greater emphasis or to be subtle. |
| shape | `MaybeSignal<ButtonShape>` | `Default::default()` | A button can be rounded, circular, or square. |
| size | `MaybeSignal<ButtonSize>` | `ButtonSize::Medium` | A button supports different sizes. |
| block | `MaybeSignal<bool>` | `false` | Whether the button is displayed as block. |
| round | `MaybeSignal<bool>` | `false` | Whether the button shows rounded corners. |
| circle | `MaybeSignal<bool>` | `false` | Whether the button is round. |
| icon | `OptionalMaybeSignal<icondata_core::Icon>` | `None` | The icon of the button. |
| loading | `MaybeSignal<bool>` | `false` | Whether the button shows the loading status. |
| icon | `MaybeProp<icondata_core::Icon>` | `None` | The icon of the button. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the button is disabled. |
| size | `MaybeSignal<ButtonSize>` | `ButtonSize::Medium` | Button size. |
| on_click | `Option<Callback<ev::MouseEvent>>` | `None` | Listen for button click events. |
| children | `Option<Children>` | | Button's content. |
| disabled_focusable | `MaybeSignal<bool>` | `false` | When set, allows the button to be focusable even when it has been disabled. |
| on_click | `Option<BoxOneCallback<ev::MouseEvent>>` | `None` | Listen for button click events. |
| children | `Option<Children>` | | |
### ButtonGroup props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | ----------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the group element. |
| -------- | ------------------- | -------------------- | ----------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| vertical | `bool` | `false` | Directions of buttons in the group. |
| children | `Children` | | ButtonGroup's content. |
| children | `Children` | | |

6
thaw/src/button/mod.rs
View file

@ -62,6 +62,8 @@ impl ButtonSize {
}
}
//TODO loading prop
#[component]
pub fn Button(
#[prop(optional, into)] class: MaybeProp<String>,
@ -77,7 +79,9 @@ pub fn Button(
/// Whether the button is displayed as block.
#[prop(optional, into)]
block: MaybeSignal<bool>,
#[prop(optional, into)] icon: MaybeProp<icondata_core::Icon>,
/// The icon of the button.
#[prop(optional, into)]
icon: MaybeProp<icondata_core::Icon>,
/// Whether the button is disabled.
#[prop(optional, into)]
disabled: MaybeSignal<bool>,

21
thaw/src/calendar/docs/mod.md Normal file
View file

@ -0,0 +1,21 @@
# Calendar
```rust demo
use chrono::prelude::*;
let value = RwSignal::new(Local::now().date_naive());
let option_value = RwSignal::new(Some(Local::now().date_naive()));
view! {
<Space vertical=true>
<Calendar value />
<Calendar value=option_value />
</Space>
}
```
### Calendar Props
| Name | Type | Default | Desciption |
| ----- | ------------------------ | -------------------- | -------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `OptionModel<NaiveDate>` | `Default::default()` | selected date. |

2
thaw/src/calendar/mod.rs
View file

@ -7,7 +7,7 @@ use thaw_utils::{class_list, mount_style, OptionModel};
#[component]
pub fn Calendar(
#[prop(optional, into)] class: MaybeProp<String>,
/// Default selected date.
/// selected date.
#[prop(optional, into)] value: OptionModel<NaiveDate>,
) -> impl IntoView {
mount_style("calendar", include_str!("./calendar.css"));

70
thaw/src/card/docs/mod.md Normal file
View file

@ -0,0 +1,70 @@
# Card
```rust demo
view! {
<Card>
<CardHeader>
<Body1>
<b>"Header"</b>" 2022-02-22"
</Body1>
<CardHeaderDescription slot>
<Caption1>"Description"</Caption1>
</CardHeaderDescription>
<CardHeaderAction slot>
<Button appearance=ButtonAppearance::Transparent>
"..."
</Button>
</CardHeaderAction>
</CardHeader>
<CardPreview>
<img src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" style="width: 100%"/>
</CardPreview>
<CardFooter>
<Button>"Reply"</Button>
<Button>"Share"</Button>
</CardFooter>
</Card>
}
```
### Card Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### CardHeader Props
| Name | Type | Default | Description |
| ----------------------- | ------------------------------------ | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| card_header_description | slot `Option<CardHeaderDescription>` | `None` | |
| card_header_action | slot `Option<CardHeaderAction>` | `None` | |
| children | `Children` | | |
### CardHeaderDescription Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### CardHeaderAction Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### CardPreview Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### CardFooter Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |

4
thaw/src/checkbox/checkbox_group.rs
View file

@ -5,7 +5,9 @@ use thaw_utils::{class_list, Model};
#[component]
pub fn CheckboxGroup(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] value: Model<HashSet<String>>,
/// Sets the value of the checkbox group.
#[prop(optional, into)]
value: Model<HashSet<String>>,
children: Children,
) -> impl IntoView {
view! {

44
thaw/src/checkbox/docs/mod.md Normal file
View file

@ -0,0 +1,44 @@
# Checkbox
```rust demo
let checked = RwSignal::new(false);
view! {
<Checkbox checked label="Click"/>
<Checkbox />
}
```
### Group
```rust demo
use std::collections::HashSet;
let value = RwSignal::new(HashSet::new());
view! {
<CheckboxGroup value>
<Checkbox label="apple" value="a"/>
<Checkbox label="b" value="b"/>
<Checkbox label="c" value="c"/>
</CheckboxGroup>
<div style="margin-top: 1rem">"value: " {move || format!("{:?}", value.get())}</div>
}
```
### Checkbox Props
| Name | Type | Default | Description |
| ------- | ------------------- | -------------------- | --------------------------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| checked | `Model<bool>` | `false` | The controlled value for the checkbox. |
| value | `Option<String>` | `None` | The value of the checkbox to be used in a checkbox group. |
| label | `MaybeProp<String>` | `Default::default()` | The Checkbox's label. |
### CheckboxGroup Props
| Name | Type | Default | Description |
| -------- | ------------------------ | -------------------- | ------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `Model<HashSet<String>>` | `Default::default()` | Sets the value of the checkbox group. |
| children | `Children` | | |

2
thaw/src/checkbox/mod.rs
View file

@ -8,9 +8,9 @@ use thaw_utils::{class_list, mount_style, Model};
#[component]
pub fn Checkbox(
#[prop(optional, into)] class: MaybeProp<String>,
/// The controlled value for the checkbox.
#[prop(optional, into)] checked: Model<bool>,
#[prop(optional, into)] class: MaybeProp<String>,
/// The value of the checkbox to be used in a checkbox group.
#[prop(optional, into)] value: Option<String>,
/// The Checkbox's label.

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

@ -1,4 +1,4 @@
use leptos::prelude::*;
use leptos::{either::EitherOf3, prelude::*};
use thaw_utils::{class_list, mount_style};
#[component]
@ -12,11 +12,11 @@ pub fn Code(
<code class=class_list!["thaw-code", class]>
{if let Some(inner_html) = inner_html {
view! { <pre inner_html=inner_html></pre> }.into_any().into()
EitherOf3::A(view! { <pre inner_html=inner_html></pre> })
} else if let Some(text) = text {
view! { <pre>{text}</pre> }.into_any().into()
EitherOf3::B(view! { <pre>{text}</pre> })
} else {
None
EitherOf3::C(())
}}
</code>

4
demo_markdown/docs/color_picker/mod.md → thaw/src/color_picker/docs/mod.md
View file

@ -33,6 +33,6 @@ view! {
### ColorPicker Props
| Name | Type | Default | Desciption |
| ----- | ----------------------------------- | -------------------- | ----------------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the color picker element. |
| ----- | ------------------- | -------------------- | -------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `Model<Color>` | `Default::default()` | Value of the picker. |

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

@ -11,8 +11,10 @@ use thaw_utils::{class_list, mount_style, Model};
#[component]
pub fn ColorPicker(
#[prop(optional, into)] value: Model<Color>,
#[prop(optional, into)] class: MaybeProp<String>,
/// Value of the picker.
#[prop(optional, into)]
value: Model<Color>,
) -> impl IntoView {
mount_style("color-picker", include_str!("./color-picker.css"));
let config_provider = ConfigInjection::expect_context();

9
thaw/src/combobox/combobox.rs
View file

@ -9,9 +9,14 @@ use thaw_utils::{add_event_listener, class_list, mount_style, Model, VecModel};
pub fn Combobox(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] value: Model<String>,
/// Selected option.
#[prop(optional, into)] selected_options: VecModel<String>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] placeholder: MaybeProp<String>,
/// Whether the input is disabled.
#[prop(optional, into)]
disabled: MaybeSignal<bool>,
/// Placeholder text for the input.
#[prop(optional, into)]
placeholder: MaybeProp<String>,
/// If set, the combobox will show an icon to clear the current value.
#[prop(optional)]
clearable: bool,

3
thaw/src/combobox/combobox_option.rs
View file

@ -14,7 +14,8 @@ pub fn ComboboxOption(
/// Defines a unique identifier for the option. Defaults to `text` if not provided.
#[prop(optional, into)]
value: Option<String>,
/// An optional override the string value of the Option's display text, defaulting to the Option's child content.
/// An optional override the string value of the Option's display text,
/// defaulting to the Option's child content.
#[prop(into)]
text: String,
#[prop(optional)] children: Option<Children>,

1
thaw/src/combobox/combobox_option_group.rs
View file

@ -4,6 +4,7 @@ use thaw_utils::{class_list, mount_style};
#[component]
pub fn ComboboxOptionGroup(
#[prop(optional, into)] class: MaybeProp<String>,
/// Label of the group.
#[prop(into)] label: String,
children: Children,
) -> impl IntoView {

30
thaw/src/combobox/docs/mod.md
View file

@ -74,3 +74,33 @@ view! {
</Combobox>
}
```
### Combobox Props
| Name | Type | Default | Desciption |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `Model<String>` | `Default::default()` | |
| selected_options | `VecModel<String>` | `Default::default()` | Selected option. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
| placeholder | `MaybeProp<String>` | `Default::default()` | Placeholder text for the input. |
| clearable | `bool` | `false` | If set, the combobox will show an icon to clear the current value. |
| children | `Children` | | |
### ComboboxOption Props
| Name | Type | Default | Desciption |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| disabled | `MaybeSignal<bool>` | `false` | Sets an option to the disabled state. Disabled options cannot be selected, but are still keyboard navigable. |
| value | `Option<String>` | `None` | Defines a unique identifier for the option. Defaults to `text` if not provided. |
| text | `String` | | An optional override the string value of the Option's display text, defaulting to the Option's child content. |
| children | `Children` | | |
### ComboboxOptionGroup Props
| Name | Type | Default | Desciption |
| -------- | ------------------- | -------------------- | ------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| label | `String` | | Label of the group. |
| children | `Children` | | |

7
demo_markdown/docs/config_provider/mod.md → thaw/src/config_provider/docs/mod.md
View file

@ -44,5 +44,8 @@ view! {
### ConfigProvider Props
| Name | Type | Default | Description |
| ----- | ------------------------- | -------------------- | ----------- |
| theme | `Option<RwSignal<Theme>>` | `Default::default()` | Theme. |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| theme | `Option<RwSignal<Theme>>` | `None` | Sets the theme used in a scope. |
| dir | `RwSignal<Option<ConfigDirection>>` | | Sets the direction of text & generated styles. |
| children | `Children` | | |

21
thaw/src/date_picker/docs/mod.md Normal file
View file

@ -0,0 +1,21 @@
# Date Picker
```rust demo
use chrono::prelude::*;
let value = RwSignal::new(Local::now().date_naive());
let option_value = RwSignal::new(Some(Local::now().date_naive()));
view! {
<Space vertical=true>
<DatePicker value/>
<DatePicker value=option_value/>
</Space>
}
```
### DatePicker Props
| Name | Type | Default | Desciption |
| ----- | ------------------------ | -------------------- | -------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| value | `OptionModel<NaiveDate>` | `Default::default()` | Set the date picker value. |

3
thaw/src/date_picker/mod.rs
View file

@ -8,8 +8,9 @@ use thaw_utils::{class_list, mount_style, now_date, ComponentRef, OptionModel};
#[component]
pub fn DatePicker(
#[prop(optional, into)] value: OptionModel<NaiveDate>,
#[prop(optional, into)] class: MaybeProp<String>,
/// Set the date picker value.
#[prop(optional, into)] value: OptionModel<NaiveDate>,
) -> impl IntoView {
mount_style("date-picker", include_str!("./date-picker.css"));
let date_picker_ref = NodeRef::<html::Div>::new();

13
thaw/src/dialog/dialog.rs
View file

@ -6,10 +6,15 @@ use thaw_utils::{class_list, mount_style, Model};
#[component]
pub fn Dialog(
#[prop(optional, into)] class: MaybeProp<String>,
/// Controls the open state of the dialog
#[prop(into)] open: Model<bool>,
#[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>,
#[prop(default = true, into)] close_on_esc: bool,
/// Controls the open state of the dialog.
#[prop(into)]
open: Model<bool>,
/// Whether to emit hide event when click mask.
#[prop(default = true.into(), into)]
mask_closeable: MaybeSignal<bool>,
/// Whether to close modal on Esc is pressed.
#[prop(default = true, into)]
close_on_esc: bool,
children: Children,
) -> impl IntoView {
mount_style("dialog", include_str!("./dialog.css"));

67
thaw/src/dialog/docs/mod.md Normal file
View file

@ -0,0 +1,67 @@
# Dialog
```rust demo
let open = RwSignal::new(false);
view! {
<Button on_click=move |_| open.set(true)>"Open Dialog"</Button>
<Dialog open>
<DialogSurface>
<DialogBody>
<DialogTitle>"Dialog title"</DialogTitle>
<DialogContent>
"Dialog body"
</DialogContent>
<DialogActions>
<Button appearance=ButtonAppearance::Primary>"Do Something"</Button>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
}
```
### Dialog Props
| Name | Type | Default | Description |
| -------------- | ------------------- | -------------------- | ------------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| open | `Model<bool>` | | Controls the open state of the dialog. |
| mask_closeable | `MaybeSignal<bool>` | `true` | Whether to emit hide event when click mask. |
| close_on_esc | `bool` | `true` | Whether to close modal on Esc is pressed. |
| children | `Children` | | |
### DialogSurface Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### DialogBody Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### DialogTitle Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### DialogContent Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### DialogActions Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |

6
demo_markdown/docs/divider/mod.md → thaw/src/divider/docs/mod.md
View file

@ -31,5 +31,7 @@ view! {
### Divider Props
| Name | Type | Default | Desciption |
| ----- | ----------------------------------- | -------------------- | ------------------------------------------ |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the divider element. |
| -------- | ------------------- | -------------------- | -------------------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| vertical | `MaybeSignal<bool>` | `false` | A divider can be horizontal (default) or vertical. |
| children | `Option<Children>` | `None` | |

56
demo_markdown/docs/drawer/mod.md → thaw/src/drawer/docs/mod.md
View file

@ -141,18 +141,52 @@ view! {
}
```
### Drawer Props
### OverlayDrawer Props
| Name | Type | Default | Desciption |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the drawer element. |
| show | `Model<bool>` | | Whether to show drawer. |
| class | `MaybeProp<String>` | `Default::default()` | |
| open | `Model<bool>` | | Controls the open state of the Drawer. |
| mask_closeable | `MaybeSignal<bool>` | `true` | Whether to emit hide event when click mask. |
| close_on_esc | `bool` | `true` | Whether to close drawer on Esc is pressed. |
| title | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Drawer title. |
| placement | `MaybeSignal<DrawerPlacement>` | `DrawerPlacement::Right` | Drawer placement. |
| width | `MaybeSignal<String>` | `520px` | Drawer width. |
| height | `MaybeSignal<String>` | `260px` | Drawer height. |
| z_index | `MaybeSignal<i16>` | `2000` | z-index of the drawer. |
| mount | `DrawerMount` | `DrawerMount::Body` | Container node of the drawer. |
| children | `Children` | | Drawer content. |
| close_on_esc | `bool` | `false` | Whether to close drawer on Esc is pressed. |
| position | `MaybeSignal<DrawerPosition>` | `DrawerPlacement::Left` | Position of the drawer. |
| size | `MaybeSignal<DrawerSize>` | `DrawerSize::Small` | Size of the drawer. |
| children | `Children` | | |
### InlineDrawer Props
| Name | Type | Default | Desciption |
| -------- | ----------------------------- | ----------------------- | -------------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| open | `Model<bool>` | | Controls the open state of the Drawer. |
| position | `MaybeSignal<DrawerPosition>` | `DrawerPlacement::Left` | Position of the drawer. |
| size | `MaybeSignal<DrawerSize>` | `DrawerSize::Small` | Size of the drawer. |
| children | `Children` | | |
### DrawerHeader Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |
### DrawerHeaderTitle Props
| Name | Type | Default | Description |
| -------------------------- | -------------------------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| drawer_header_title_action | slot `Option<DrawerHeaderTitleAction>` | `None` | |
| children | `Children` | | |
### DrawerHeaderTitleAction Props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------- |
| children | `Children` | | |
### DrawerBody Props
| Name | Type | Default | Description |
| -------- | ------------------- | -------------------- | ----------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| children | `Children` | | |

14
thaw/src/drawer/overlay_drawer.rs
View file

@ -8,13 +8,19 @@ use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};
pub fn OverlayDrawer(
#[prop(optional, into)] class: MaybeProp<String>,
/// Controls the open state of the Drawer.
#[prop(into)] open: Model<bool>,
#[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>,
#[prop(into)]
open: Model<bool>,
/// Whether to emit hide event when click mask.
#[prop(default = true.into(), into)]
mask_closeable: MaybeSignal<bool>,
/// Whether to close drawer on Esc is pressed.
#[prop(optional, into)] close_on_esc: bool,
/// Position of the drawer.
#[prop(optional, into)] position: MaybeSignal<DrawerPosition>,
#[prop(optional, into)]
position: MaybeSignal<DrawerPosition>,
/// Size of the drawer.
#[prop(optional, into)] size: MaybeSignal<DrawerSize>,
#[prop(optional, into)]
size: MaybeSignal<DrawerSize>,
children: Children,
) -> impl IntoView {
mount_style("drawer", include_str!("./drawer.css"));

14
demo_markdown/docs/grid/mod.md → thaw/src/grid/docs/mod.md
View file

@ -96,16 +96,18 @@ view! {
### Grid Props
| Name | Type | Default | Desciption |
| ----- | ----------------------------------- | -------------------- | --------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the grid element. |
| -------- | ------------------- | -------------------- | -------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| cols | `MaybeSignal<u16>` | `1` | Number of grids displayed. |
| x_gap | `MaybeSignal<u16>` | `0` | Horizontal gap. |
| y_gap | `MaybeSignal<u16>` | `0` | Vertical gap. |
| children | `Children` | | |
### GridItem Props
| Name | Type | Default | Desciption |
| ------ | ----------------------------------- | -------------------- | --------------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the grid item element. |
| column | `MaybeSignal<u16>` | `1` | Number of columns this grid item will occupy. |
| offset | `MaybeSignal<u16>` | `0` | Horizontal offset. |
| --- | --- | --- | --- |
| class | `MaybeProp<String>` | `Default::default()` | |
| column | `MaybeSignal<u16>` | `1` | The number of columns occupied by the grid. The grid item would be hidden if it's 0. |
| offset | `MaybeSignal<u16>` | `0` | The number of intervals to the left of the grid. |
| children | `Children` | | |

11
thaw/src/grid/grid_item.rs
View file

@ -4,11 +4,14 @@ use thaw_utils::class_list;
#[component]
pub fn GridItem(
/// The number of columns occupied by the grid. The grid item would be hidden if it's 0.
#[prop(default = MaybeSignal::Static(1u16), into)] column: MaybeSignal<u16>,
/// The number of intervals to the left of the grid.
#[prop(optional, into)] offset: MaybeSignal<u16>,
#[prop(optional, into)] class: MaybeProp<String>,
/// The number of columns occupied by the grid.
/// The grid item would be hidden if it's 0.
#[prop(default = MaybeSignal::Static(1u16), into)]
column: MaybeSignal<u16>,
/// The number of intervals to the left of the grid.
#[prop(optional, into)]
offset: MaybeSignal<u16>,
children: Children,
) -> impl IntoView {
let grid = use_grid();

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

@ -6,13 +6,15 @@ use thaw_utils::class_list;
#[component]
pub fn Grid(
#[prop(optional, into)] class: MaybeProp<String>,
/// Number of grids displayed.
#[prop(default = MaybeSignal::Static(1u16), into)] cols: MaybeSignal<u16>,
#[prop(default = MaybeSignal::Static(1u16), into)]
cols: MaybeSignal<u16>,
// Horizontal gap.
#[prop(optional, into)] x_gap: MaybeSignal<u16>,
/// Vertical gap.
#[prop(optional, into)] y_gap: MaybeSignal<u16>,
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)]
y_gap: MaybeSignal<u16>,
children: Children,
) -> impl IntoView {
let style = Memo::new(move |_| {

21
thaw/src/icon/docs/mod.md Normal file
View file

@ -0,0 +1,21 @@
# Icon
```rust demo
view! {
<Space>
<Icon icon=icondata::AiCloseOutlined/>
<Icon icon=icondata::AiCheckOutlined/>
</Space>
}
```
### Icon Props
| Name | Type | Default | Desciption |
| -------- | ---------------------------------------- | -------------------- | ----------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | HTML class attribute. |
| style | `Option<MaybeSignal<String>>` | `Default::default()` | HTML style attribute. |
| icon | `MaybeSignal<icondata_core::Icon>` | | The icon to show. |
| width | `MaybeProp<String>` | `1em` | The width of the icon. |
| height | `MaybeProp<String>` | `1em` | The height of the icon. |
| on_click | `Option<BoxOneCallback<ev::MouseEvent>>` | `None` | Callback when clicking on the icon. |

38
thaw/src/icon/mod.rs
View file

@ -9,15 +9,17 @@ pub fn Icon(
/// The icon to render.
#[prop(into)]
icon: MaybeSignal<icondata_core::Icon>,
/// The width of the icon (horizontal side length of the square surrounding the icon). Defaults to "1em".
#[prop(into, optional)]
width: Option<MaybeSignal<String>>,
/// The height of the icon (vertical side length of the square surrounding the icon). Defaults to "1em".
#[prop(into, optional)]
height: Option<MaybeSignal<String>>,
/// The width of the icon (horizontal side length of the square surrounding the icon).
/// Defaults to "1em".
#[prop(into, default = "1em".into())]
width: MaybeProp<String>,
/// The height of the icon (vertical side length of the square surrounding the icon).
/// Defaults to "1em".
#[prop(into, default = "1em".into())]
height: MaybeProp<String>,
/// HTML class attribute.
#[prop(into, optional)]
class: Option<MaybeSignal<String>>,
class: MaybeProp<String>,
/// HTML style attribute.
#[prop(into, optional)]
style: Option<MaybeSignal<String>>,
@ -30,8 +32,6 @@ pub fn Icon(
let icon_style = RwSignal::new(None);
let icon_x = RwSignal::new(None);
let icon_y = RwSignal::new(None);
let icon_width = RwSignal::new(None);
let icon_height = RwSignal::new(None);
let icon_view_box = RwSignal::new(None);
let icon_stroke_linecap = RwSignal::new(None);
let icon_stroke_linejoin = RwSignal::new(None);
@ -49,7 +49,7 @@ pub fn Icon(
let icon = icon.get();
let style = match (style.clone(), icon.style) {
(Some(a), Some(b)) => Some(Memo::new(move |_| format!("{b} {}", a.get())).into()),
(Some(a), Some(b)) => Some(ArcMemo::new(move |_| format!("{b} {}", a.get())).into()),
(Some(a), None) => Some(a),
(None, Some(b)) => Some(b.into()),
(None, None) => None,
@ -59,18 +59,6 @@ pub fn Icon(
icon_x.set(icon.x.map(|x| x.to_string()));
icon_y.set(icon.y.map(|y| y.to_string()));
let width = match (width.clone(), icon.width) {
(Some(a), _) => a,
_ => "1em".into(),
};
icon_width.set(Some(width));
let height = match (height.clone(), icon.height) {
(Some(a), _) => a,
_ => "1em".into(),
};
icon_height.set(Some(height));
icon_view_box.set(icon.view_box.map(|view_box| view_box.to_string()));
icon_stroke_linecap.set(icon.stroke_linecap.map(|a| a.to_string()));
icon_stroke_linejoin.set(icon.stroke_linejoin.map(|a| a.to_string()));
@ -82,12 +70,12 @@ pub fn Icon(
view! {
<svg
class=class_list!["thaw-icon", class.map(|c| move || c.get())]
class=class_list!["thaw-icon", class]
style=move || take_signal(icon_style).unwrap_or_default()
x=move || take(icon_x)
y=move || take(icon_y)
width=move || take_signal(icon_width)
height=move || take_signal(icon_height)
width=move || width.get()
height=move || height.get()
viewBox=move || take(icon_view_box)
stroke-linecap=move || take(icon_stroke_linecap)
stroke-linejoin=move || take(icon_stroke_linejoin)

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

@ -27,7 +27,7 @@ pub fn Input(
placeholder: MaybeProp<String>,
#[prop(optional, into)] on_focus: Option<BoxOneCallback<ev::FocusEvent>>,
#[prop(optional, into)] on_blur: Option<BoxOneCallback<ev::FocusEvent>>,
/// Whether the input is disabled
/// Whether the input is disabled.
#[prop(optional, into)]
disabled: MaybeSignal<bool>,
#[prop(optional)] input_prefix: Option<InputPrefix>,

8
thaw_components/src/option_comp.rs
View file

@ -1,5 +1,5 @@
use super::Fallback;
use leptos::{prelude::*, tachys::view::any_view::IntoAny};
use leptos::{either::EitherOf3, prelude::*};
#[component]
pub fn OptionComp<T, CF, IV>(
@ -12,10 +12,10 @@ where
IV: IntoView + 'static,
{
if let Some(value) = value {
children(value).into_any()
EitherOf3::A(children(value))
} else if let Some(fallback) = fallback {
(fallback.children)().into_any()
EitherOf3::B((fallback.children)())
} else {
().into_any()
EitherOf3::C(())
}
}