mirror of
https://github.com/adoyle0/thaw.git
synced 2025-02-02 08:34:15 -05:00
cargo fmt & leptosfmt
This commit is contained in:
luoxiao
luoxiaozero
parent
f01b900252
commit
61284d57fc
82 changed files with 790 additions and 685 deletions
|
|
@ -50,23 +50,25 @@ pub fn AccordionItem(
|
|||
type="button"
|
||||
on:click=on_click
|
||||
>
|
||||
<span
|
||||
class="thaw-accordion-header__expand-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="thaw-accordion-header__expand-icon" aria-hidden="true">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
style=move || if is_show_panel.get() {
|
||||
style=move || {
|
||||
if is_show_panel.get() {
|
||||
"transform: rotate(90deg)"
|
||||
} else {
|
||||
"transform: rotate(0deg)"
|
||||
}
|
||||
}
|
||||
>
|
||||
<path d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z" fill="currentColor"></path>
|
||||
<path
|
||||
d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
{(accordion_header.children)()}
|
||||
|
|
|
|||
|
|
@ -24,11 +24,9 @@ pub fn Accordion(
|
|||
<Provider value=AccordionInjection {
|
||||
open_items,
|
||||
collapsible,
|
||||
multiple
|
||||
multiple,
|
||||
}>
|
||||
<div class=class_list!["thaw-accordion", class]>
|
||||
{children()}
|
||||
</div>
|
||||
<div class=class_list!["thaw-accordion", class]>{children()}</div>
|
||||
</Provider>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@ use thaw_utils::{class_list, StoredMaybeSignal};
|
|||
pub fn AnchorLink(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// The content of link.
|
||||
#[prop(into)] title: MaybeSignal<String>,
|
||||
#[prop(into)]
|
||||
title: MaybeSignal<String>,
|
||||
/// The target of link.
|
||||
#[prop(into)] href: String,
|
||||
#[prop(into)]
|
||||
href: String,
|
||||
#[prop(optional)] children: Option<Children>,
|
||||
) -> impl IntoView {
|
||||
let anchor = AnchorInjection::expect_context();
|
||||
|
|
@ -63,7 +65,10 @@ pub fn AnchorLink(
|
|||
|
||||
view! {
|
||||
<div class=class_list![
|
||||
"thaw-anchor-link", ("thaw-anchor-link--active", move || is_active.get()), class]>
|
||||
"thaw-anchor-link",
|
||||
("thaw-anchor-link--active", move || is_active.get()),
|
||||
class
|
||||
]>
|
||||
<a
|
||||
href=href
|
||||
class="thaw-anchor-link__title"
|
||||
|
|
|
|||
|
|
@ -107,10 +107,7 @@ pub fn Anchor(
|
|||
}
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=class_list!["thaw-anchor", class]
|
||||
node_ref=anchor_ref
|
||||
>
|
||||
<div class=class_list!["thaw-anchor", class] node_ref=anchor_ref>
|
||||
<div class="thaw-anchor-rail">
|
||||
<div
|
||||
class="thaw-anchor-rail__bar"
|
||||
|
|
|
|||
|
|
@ -26,17 +26,21 @@ pub struct AutoCompleteSuffix {
|
|||
pub fn AutoComplete(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Input of autocomplete.
|
||||
#[prop(optional, into)] value: Model<String>,
|
||||
#[prop(optional, into)]
|
||||
value: Model<String>,
|
||||
/// Autocomplete's placeholder.
|
||||
#[prop(optional, into)] placeholder: MaybeProp<String>,
|
||||
#[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>,
|
||||
#[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, into)]
|
||||
disabled: MaybeSignal<bool>,
|
||||
#[prop(optional)] auto_complete_prefix: Option<AutoCompletePrefix>,
|
||||
#[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>,
|
||||
#[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>,
|
||||
|
|
@ -147,15 +151,22 @@ pub fn AutoComplete(
|
|||
placement=FollowerPlacement::BottomStart
|
||||
width=FollowerWidth::Target
|
||||
>
|
||||
<Provider value=AutoCompleteInjection{value, select_option, options}>
|
||||
<Listbox open=open_listbox.read_only() set_listbox listbox_ref class="thaw-auto-complete__listbox">
|
||||
{
|
||||
if let Some(children) = children {
|
||||
<Provider value=AutoCompleteInjection {
|
||||
value,
|
||||
select_option,
|
||||
options,
|
||||
}>
|
||||
<Listbox
|
||||
open=open_listbox.read_only()
|
||||
set_listbox
|
||||
listbox_ref
|
||||
class="thaw-auto-complete__listbox"
|
||||
>
|
||||
{if let Some(children) = children {
|
||||
Either::Left(children())
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</Listbox>
|
||||
</Provider>
|
||||
</Follower>
|
||||
|
|
|
|||
|
|
@ -60,13 +60,16 @@ pub fn Avatar(
|
|||
|
||||
view! {
|
||||
<span
|
||||
class=class_list!["thaw-avatar", move || format!("thaw-avatar--{}", shape.get().as_str()), class]
|
||||
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.with_value(|n| n.get())
|
||||
>
|
||||
{
|
||||
move || {
|
||||
{move || {
|
||||
let mut initials = initials.with_value(|i| i.get());
|
||||
if initials.is_none() {
|
||||
name.with_value(|name| {
|
||||
|
|
@ -77,38 +80,42 @@ pub fn Avatar(
|
|||
}
|
||||
view! {
|
||||
<OptionComp value=initials let:initials>
|
||||
<span class="thaw-avatar__initials">
|
||||
{initials}
|
||||
</span>
|
||||
<span class="thaw-avatar__initials">{initials}</span>
|
||||
</OptionComp>
|
||||
}
|
||||
}
|
||||
}
|
||||
{
|
||||
move || {
|
||||
}}
|
||||
{move || {
|
||||
let src = src.with_value(|s| s.get());
|
||||
view! {
|
||||
<OptionComp value=src let:src>
|
||||
<img src=src class="thaw-avatar__image" />
|
||||
</OptionComp>
|
||||
}
|
||||
}
|
||||
}
|
||||
{
|
||||
move || {
|
||||
}}
|
||||
{move || {
|
||||
if is_show_default_icon.get() {
|
||||
Either::Left(view! {
|
||||
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
|
||||
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>
|
||||
})
|
||||
},
|
||||
)
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,17 +95,28 @@ pub fn BackTop(
|
|||
data-thaw-id=config_provider.id().clone()
|
||||
node_ref=back_top_ref
|
||||
style=move || {
|
||||
display.get().map_or_else(|| format!("right: {}px; bottom: {}px", right.get(), bottom.get()), |d| d.to_string())
|
||||
display
|
||||
.get()
|
||||
.map_or_else(
|
||||
|| {
|
||||
format!(
|
||||
"right: {}px; bottom: {}px",
|
||||
right.get(),
|
||||
bottom.get(),
|
||||
)
|
||||
},
|
||||
|d| d.to_string(),
|
||||
)
|
||||
}
|
||||
on:click=on_click
|
||||
>
|
||||
{
|
||||
if let Some(children) = children {
|
||||
{if let Some(children) = children {
|
||||
Either::Left(children())
|
||||
} else {
|
||||
Either::Right(view!{<Icon icon=icondata_ai::AiVerticalAlignTopOutlined/>})
|
||||
}
|
||||
}
|
||||
Either::Right(
|
||||
view! { <Icon icon=icondata_ai::AiVerticalAlignTopOutlined /> },
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</Teleport>
|
||||
|
|
|
|||
|
|
@ -25,13 +25,11 @@ pub fn Badge(
|
|||
move || format!("thaw-badge--{}", color.get().as_str()),
|
||||
class
|
||||
]>
|
||||
{
|
||||
if let Some(children) = children {
|
||||
{if let Some(children) = children {
|
||||
Either::Left(children())
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ pub fn Breadcrumb(
|
|||
mount_style("breadcrumb", include_str!("./breadcrumb.css"));
|
||||
|
||||
view! {
|
||||
<nav
|
||||
class=class_list!["thaw-breadcrumb", class]
|
||||
>
|
||||
<ol role="list" class="thaw-breadcrumb__list">{children()}</ol>
|
||||
<nav class=class_list!["thaw-breadcrumb", class]>
|
||||
<ol role="list" class="thaw-breadcrumb__list">
|
||||
{children()}
|
||||
</ol>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
|
|
@ -22,23 +22,24 @@ pub fn BreadcrumbItem(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<li class=class_list!["thaw-breadcrumb-item", class]>
|
||||
{children()}
|
||||
</li>
|
||||
}
|
||||
view! { <li class=class_list!["thaw-breadcrumb-item", class]>{children()}</li> }
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn BreadcrumbButton(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Defines current sate of BreadcrumbButton.
|
||||
#[prop(optional, into)] current: MaybeSignal<bool>,
|
||||
#[prop(optional, into)]
|
||||
current: MaybeSignal<bool>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<button
|
||||
class=class_list!["thaw-breadcrumb-button", ("thaw-breadcrumb-button--current", move || current.get()), class]
|
||||
class=class_list![
|
||||
"thaw-breadcrumb-button",
|
||||
("thaw-breadcrumb-button--current", move || current.get()),
|
||||
class
|
||||
]
|
||||
aria-disabled=move || current.get().then(|| "true")
|
||||
aria-current=move || current.get().then(|| "page")
|
||||
>
|
||||
|
|
@ -51,8 +52,17 @@ pub fn BreadcrumbButton(
|
|||
pub fn BreadcrumbDivider(#[prop(optional, into)] class: MaybeProp<String>) -> impl IntoView {
|
||||
view! {
|
||||
<li class=class_list!["thaw-breadcrumb-divider", class] aria-hidden="true">
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z" fill="currentColor"></path>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</li>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ use thaw_utils::{class_list, mount_style};
|
|||
pub fn ButtonGroup(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Directions of buttons in the group.
|
||||
#[prop(optional)] vertical: bool,
|
||||
#[prop(optional)]
|
||||
vertical: bool,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style("button-group", include_str!("./button-group.css"));
|
||||
|
|
|
|||
|
|
@ -125,24 +125,19 @@ pub fn Button(
|
|||
aria-disabled=move || disabled_focusable.get().then_some("true")
|
||||
on:click=on_click
|
||||
>
|
||||
{
|
||||
|
||||
move || {
|
||||
{move || {
|
||||
let icon = icon.get();
|
||||
if let Some(icon) = icon {
|
||||
Either::Left(view! { <Icon icon=icon class="thaw-button__icon" /> })
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}
|
||||
{
|
||||
if let Some(children) = children {
|
||||
}}
|
||||
{if let Some(children) = children {
|
||||
Either::Left(children())
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ use thaw_utils::{class_list, mount_style, OptionModel};
|
|||
pub fn Calendar(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// selected date.
|
||||
#[prop(optional, into)] value: OptionModel<NaiveDate>,
|
||||
#[prop(optional, into)]
|
||||
value: OptionModel<NaiveDate>,
|
||||
) -> impl IntoView {
|
||||
mount_style("calendar", include_str!("./calendar.css"));
|
||||
let show_date = RwSignal::new(value.get_untracked().unwrap_or(now_date()));
|
||||
|
|
@ -87,9 +88,7 @@ pub fn Calendar(
|
|||
};
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=class_list!["thaw-calendar", class]
|
||||
>
|
||||
<div class=class_list!["thaw-calendar", class]>
|
||||
<div class="thaw-calendar__header">
|
||||
<span class="thaw-calendar__header-title">
|
||||
|
||||
|
|
@ -106,17 +105,9 @@ pub fn Calendar(
|
|||
|
||||
</span>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
icon=icondata_ai::AiLeftOutlined
|
||||
on_click=previous_month
|
||||
/>
|
||||
<Button on_click=today>
|
||||
"Today"
|
||||
</Button>
|
||||
<Button
|
||||
icon=icondata_ai::AiRightOutlined
|
||||
on_click=next_month
|
||||
/>
|
||||
<Button icon=icondata_ai::AiLeftOutlined on_click=previous_month />
|
||||
<Button on_click=today>"Today"</Button>
|
||||
<Button icon=icondata_ai::AiRightOutlined on_click=next_month />
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div class="thaw-calendar__dates">
|
||||
|
|
|
|||
|
|
@ -7,9 +7,5 @@ pub fn CardFooter(
|
|||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style("card-footer", include_str!("./card-footer.css"));
|
||||
view! {
|
||||
<div class=class_list!["thaw-card-footer", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-card-footer", class]>{children()}</div> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,18 +12,12 @@ pub fn CardHeader(
|
|||
mount_style("card-header", include_str!("./card-header.css"));
|
||||
view! {
|
||||
<div class=class_list!["thaw-card-header", class]>
|
||||
<div class="thaw-card-header__header">
|
||||
{children()}
|
||||
</div>
|
||||
<div class="thaw-card-header__header">{children()}</div>
|
||||
<OptionComp value=card_header_description let:description>
|
||||
<div class="thaw-card-header__description">
|
||||
{(description.children)()}
|
||||
</div>
|
||||
<div class="thaw-card-header__description">{(description.children)()}</div>
|
||||
</OptionComp>
|
||||
<OptionComp value=card_header_action let:action>
|
||||
<div class="thaw-card-header__action">
|
||||
{(action.children)()}
|
||||
</div>
|
||||
<div class="thaw-card-header__action">{(action.children)()}</div>
|
||||
</OptionComp>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,7 @@ pub fn Card(#[prop(optional, into)] class: MaybeProp<String>, children: Children
|
|||
mount_style("card", include_str!("./card.css"));
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=class_list!["thaw-card", class]
|
||||
role="group"
|
||||
>
|
||||
<div class=class_list!["thaw-card", class] role="group">
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,14 @@ use thaw_utils::{class_list, mount_style, Model};
|
|||
pub fn Checkbox(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// The controlled value for the checkbox.
|
||||
#[prop(optional, into)] checked: Model<bool>,
|
||||
#[prop(optional, into)]
|
||||
checked: Model<bool>,
|
||||
/// The value of the checkbox to be used in a checkbox group.
|
||||
#[prop(optional, into)] value: Option<String>,
|
||||
#[prop(optional, into)]
|
||||
value: Option<String>,
|
||||
/// The Checkbox's label.
|
||||
#[prop(optional, into)] label: MaybeProp<String>,
|
||||
#[prop(optional, into)]
|
||||
label: MaybeProp<String>,
|
||||
) -> impl IntoView {
|
||||
mount_style("checkbox", include_str!("./checkbox.css"));
|
||||
|
||||
|
|
@ -59,12 +62,11 @@ pub fn Checkbox(
|
|||
let checked = move || group_checked.get().unwrap_or_else(|| checked.get());
|
||||
|
||||
view! {
|
||||
<span
|
||||
class=class_list![
|
||||
"thaw-checkbox", ("thaw-checkbox--checked", checked),
|
||||
<span class=class_list![
|
||||
"thaw-checkbox",
|
||||
("thaw-checkbox--checked", checked),
|
||||
class
|
||||
]
|
||||
>
|
||||
]>
|
||||
<input
|
||||
class="thaw-checkbox__input"
|
||||
type="checkbox"
|
||||
|
|
@ -74,27 +76,41 @@ pub fn Checkbox(
|
|||
on:change=on_change
|
||||
/>
|
||||
<div aria-hidden="true" class="thaw-checkbox__indicator">
|
||||
{
|
||||
move || if checked() {
|
||||
{move || {
|
||||
if checked() {
|
||||
view! {
|
||||
<svg fill="currentColor" aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" style="display: inline;line-height: 0">
|
||||
<path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
style="display: inline;line-height: 0"
|
||||
>
|
||||
<path
|
||||
d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
}.into()
|
||||
}
|
||||
.into()
|
||||
} else {
|
||||
None
|
||||
}
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
{
|
||||
move || if let Some(label) = label.get() {
|
||||
{move || {
|
||||
if let Some(label) = label.get() {
|
||||
view! {
|
||||
<label class="thaw-checkbox__label" for=id.clone()>{label}</label>
|
||||
}.into()
|
||||
<label class="thaw-checkbox__label" for=id.clone()>
|
||||
{label}
|
||||
</label>
|
||||
}
|
||||
.into()
|
||||
} else {
|
||||
None
|
||||
}
|
||||
}
|
||||
}}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,10 @@ pub fn Code(
|
|||
) -> impl IntoView {
|
||||
mount_style("code", include_str!("./code.css"));
|
||||
view! {
|
||||
<code class=class_list!["thaw-code", class]>
|
||||
<code class=class_list![
|
||||
"thaw-code",
|
||||
class
|
||||
]>
|
||||
|
||||
{if let Some(inner_html) = inner_html {
|
||||
EitherOf3::A(view! { <pre inner_html=inner_html></pre> })
|
||||
|
|
|
|||
|
|
@ -222,8 +222,7 @@ fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
|
|||
style:background-image=move || {
|
||||
format!("linear-gradient(90deg, white, hsl({}, 100%, 50%))", hue.get())
|
||||
}
|
||||
>
|
||||
</div>
|
||||
></div>
|
||||
<div class="thaw-color-picker-popover__layer--shadowed"></div>
|
||||
<div
|
||||
class="thaw-color-picker-popover__handle"
|
||||
|
|
@ -234,8 +233,7 @@ fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
|
|||
sv.get().1 * 100.0,
|
||||
)
|
||||
}
|
||||
>
|
||||
</div>
|
||||
></div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ 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)]
|
||||
selected_options: VecModel<String>,
|
||||
/// Whether the input is disabled.
|
||||
#[prop(optional, into)]
|
||||
disabled: MaybeSignal<bool>,
|
||||
|
|
@ -175,9 +176,7 @@ pub fn Combobox(
|
|||
aria-expanded="true"
|
||||
role="combobox"
|
||||
class="thaw-combobox__input"
|
||||
prop:value=move || {
|
||||
value.get()
|
||||
}
|
||||
prop:value=move || { value.get() }
|
||||
placeholder=move || placeholder.get()
|
||||
disabled=move || disabled.get()
|
||||
node_ref=input_ref
|
||||
|
|
@ -188,31 +187,45 @@ pub fn Combobox(
|
|||
is_show_listbox.update(|show| *show = !*show);
|
||||
}
|
||||
/>
|
||||
{
|
||||
if clearable {
|
||||
{if clearable {
|
||||
view! {
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="thaw-combobox__clear-icon"
|
||||
style=move || (!is_show_clear_icon.get()).then(|| "display: none").unwrap_or_default()
|
||||
style=move || {
|
||||
(!is_show_clear_icon.get())
|
||||
.then(|| "display: none")
|
||||
.unwrap_or_default()
|
||||
}
|
||||
node_ref=clear_icon_ref
|
||||
>
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z" fill="currentColor"></path>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
}.into()
|
||||
}
|
||||
.into()
|
||||
} else {
|
||||
None
|
||||
}
|
||||
}
|
||||
}}
|
||||
<span
|
||||
aria-disabled=move || if disabled.get() { "true" } else { "" }
|
||||
aria-expanded=move || is_show_listbox.get().to_string()
|
||||
role="button"
|
||||
aria-label="Open"
|
||||
class="thaw-combobox__expand-icon"
|
||||
style=move || is_show_clear_icon.get().then(|| "display: none").unwrap_or_default()
|
||||
style=move || {
|
||||
is_show_clear_icon.get().then(|| "display: none").unwrap_or_default()
|
||||
}
|
||||
on:click=move |_| {
|
||||
if disabled.get_untracked() {
|
||||
return;
|
||||
|
|
@ -223,9 +236,17 @@ pub fn Combobox(
|
|||
}
|
||||
}
|
||||
>
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor">
|
||||
</path>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -236,7 +257,12 @@ pub fn Combobox(
|
|||
width=FollowerWidth::MinTarget
|
||||
>
|
||||
<Provider value=combobox_injection>
|
||||
<Listbox open=is_show_listbox.read_only() set_listbox listbox_ref class="thaw-combobox__listbox">
|
||||
<Listbox
|
||||
open=is_show_listbox.read_only()
|
||||
set_listbox
|
||||
listbox_ref
|
||||
class="thaw-combobox__listbox"
|
||||
>
|
||||
{children()}
|
||||
</Listbox>
|
||||
</Provider>
|
||||
|
|
|
|||
|
|
@ -62,33 +62,49 @@ pub fn ComboboxOption(
|
|||
]
|
||||
on:click=on_click
|
||||
>
|
||||
{
|
||||
if combobox.multiselect {
|
||||
{if combobox.multiselect {
|
||||
view! {
|
||||
<span aria-hidden="true" class="thaw-combobox-option__check-icon--multiselect">
|
||||
<If cond=is_selected>
|
||||
<Then slot>
|
||||
<svg fill="currentColor" aria-hidden="true" width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
>
|
||||
<path
|
||||
d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</Then>
|
||||
</If>
|
||||
</span>
|
||||
}.into_any()
|
||||
}
|
||||
.into_any()
|
||||
} else {
|
||||
view! {
|
||||
<span aria-hidden="true" class="thaw-combobox-option__check-icon">
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z" fill="currentColor"></path>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
}.into_any()
|
||||
}
|
||||
}
|
||||
.into_any()
|
||||
}}
|
||||
<OptionComp value=children let:children>
|
||||
<Fallback slot>
|
||||
{text.get_value()}
|
||||
</Fallback>
|
||||
<Fallback slot>{text.get_value()}</Fallback>
|
||||
{children()}
|
||||
</OptionComp>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ use thaw_utils::{class_list, mount_style};
|
|||
pub fn ComboboxOptionGroup(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Label of the group.
|
||||
#[prop(into)] label: String,
|
||||
#[prop(into)]
|
||||
label: String,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style(
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ use thaw_utils::{class_list, mount_style, now_date, ComponentRef, OptionModel};
|
|||
pub fn DatePicker(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Set the date picker value.
|
||||
#[prop(optional, into)] value: OptionModel<NaiveDate>,
|
||||
#[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();
|
||||
|
|
|
|||
|
|
@ -83,14 +83,22 @@ pub fn Panel(
|
|||
PanelVariant::Date => {
|
||||
let close_panel = close_panel.clone();
|
||||
view! {
|
||||
<DatePanel value=selected_date show_date close_panel panel_variant/>
|
||||
}.into_any()
|
||||
<DatePanel
|
||||
value=selected_date
|
||||
show_date
|
||||
close_panel
|
||||
panel_variant
|
||||
/>
|
||||
}
|
||||
.into_any()
|
||||
}
|
||||
PanelVariant::Month => {
|
||||
view! { <MonthPanel date_panel_show_date=show_date panel_variant/> }.into_any()
|
||||
view! { <MonthPanel date_panel_show_date=show_date panel_variant /> }
|
||||
.into_any()
|
||||
}
|
||||
PanelVariant::Year => {
|
||||
view! { <YearPanel date_panel_show_date=show_date panel_variant/> }.into_any()
|
||||
view! { <YearPanel date_panel_show_date=show_date panel_variant /> }
|
||||
.into_any()
|
||||
}
|
||||
}
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -52,9 +52,7 @@ pub fn Dialog(
|
|||
aria-hidden="true"
|
||||
></div>
|
||||
</CSSTransition>
|
||||
<Provider value=DialogInjection{open}>
|
||||
{children()}
|
||||
</Provider>
|
||||
<Provider value=DialogInjection { open }>{children()}</Provider>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
</Teleport>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,5 @@ pub fn DialogActions(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class=class_list!["thaw-dialog-actions", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-dialog-actions", class]>{children()}</div> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,5 @@ pub fn DialogBody(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class=class_list!["thaw-dialog-body", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-dialog-body", class]>{children()}</div> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,5 @@ pub fn DialogContent(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<h2 class=class_list!["thaw-dialog-content", class]>
|
||||
{children()}
|
||||
</h2>
|
||||
}
|
||||
view! { <h2 class=class_list!["thaw-dialog-content", class]>{children()}</h2> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,5 @@ pub fn DialogTitle(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<h2 class=class_list!["thaw-dialog-title", class]>
|
||||
{children()}
|
||||
</h2>
|
||||
}
|
||||
view! { <h2 class=class_list!["thaw-dialog-title", class]>{children()}</h2> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,21 +6,24 @@ use thaw_utils::{class_list, mount_style};
|
|||
pub fn Divider(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// A divider can be horizontal (default) or vertical.
|
||||
#[prop(optional, into)] vertical: MaybeSignal<bool>,
|
||||
#[prop(optional, into)]
|
||||
vertical: MaybeSignal<bool>,
|
||||
#[prop(optional)] children: Option<Children>,
|
||||
) -> impl IntoView {
|
||||
mount_style("divider", include_str!("./divider.css"));
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=class_list!["thaw-divider", ("thaw-divider--vertical", move || vertical.get()), class]
|
||||
class=class_list![
|
||||
"thaw-divider",
|
||||
("thaw-divider--vertical", move || vertical.get()),
|
||||
class
|
||||
]
|
||||
aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
|
||||
role="separator"
|
||||
>
|
||||
<OptionComp value=children let:children>
|
||||
<div class="thaw-divider__wrapper">
|
||||
{children()}
|
||||
</div>
|
||||
<div class="thaw-divider__wrapper">{children()}</div>
|
||||
</OptionComp>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ pub fn DrawerBody(
|
|||
) -> impl IntoView {
|
||||
view! {
|
||||
<Scrollbar>
|
||||
<div class=class_list!["thaw-drawer-body", class]>
|
||||
{children()}
|
||||
</div>
|
||||
<div class=class_list!["thaw-drawer-body", class]>{children()}</div>
|
||||
</Scrollbar>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,5 @@ pub fn DrawerHeader(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<header class=class_list!["thaw-drawer-header", class]>
|
||||
{children()}
|
||||
</header>
|
||||
}
|
||||
view! { <header class=class_list!["thaw-drawer-header", class]>{children()}</header> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,9 @@ pub fn DrawerHeaderTitle(
|
|||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class=class_list!["thaw-drawer-header-title", class]>
|
||||
<h2 class="thaw-drawer-header-title__heading">
|
||||
{children()}
|
||||
</h2>
|
||||
<h2 class="thaw-drawer-header-title__heading">{children()}</h2>
|
||||
<OptionComp value=drawer_header_title_action let:action>
|
||||
<div class="thaw-drawer-header-title__action">
|
||||
{(action.children)()}
|
||||
</div>
|
||||
<div class="thaw-drawer-header-title__action">{(action.children)()}</div>
|
||||
</OptionComp>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,14 @@ use thaw_utils::{class_list, mount_style, Model};
|
|||
pub fn InlineDrawer(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Controls the open state of the Drawer.
|
||||
#[prop(into)] open: Model<bool>,
|
||||
#[prop(into)]
|
||||
open: Model<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"));
|
||||
|
|
@ -41,10 +44,10 @@ pub fn InlineDrawer(
|
|||
class
|
||||
]
|
||||
style=move || {
|
||||
let size = move || {format!("--thaw-drawer--size: {}", size.get().as_size_str(position))};
|
||||
display
|
||||
.get()
|
||||
.map_or_else(size, |d| d.to_string())
|
||||
let size = move || {
|
||||
format!("--thaw-drawer--size: {}", size.get().as_size_str(position))
|
||||
};
|
||||
display.get().map_or_else(size, |d| d.to_string())
|
||||
}
|
||||
node_ref=drawer_ref
|
||||
>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ pub fn OverlayDrawer(
|
|||
#[prop(default = true.into(), into)]
|
||||
mask_closeable: MaybeSignal<bool>,
|
||||
/// Whether to close drawer on Esc is pressed.
|
||||
#[prop(optional, into)] close_on_esc: bool,
|
||||
#[prop(optional, into)]
|
||||
close_on_esc: bool,
|
||||
/// Position of the drawer.
|
||||
#[prop(optional, into)]
|
||||
position: MaybeSignal<DrawerPosition>,
|
||||
|
|
@ -55,7 +56,10 @@ pub fn OverlayDrawer(
|
|||
view! {
|
||||
<Teleport immediate=open.signal()>
|
||||
<FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
|
||||
<div class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class] data-thaw-id=config_provider.id().clone()>
|
||||
<div
|
||||
class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class]
|
||||
data-thaw-id=config_provider.id().clone()
|
||||
>
|
||||
<CSSTransition
|
||||
node_ref=mask_ref
|
||||
appear=open.get_untracked()
|
||||
|
|
@ -88,10 +92,13 @@ pub fn OverlayDrawer(
|
|||
]
|
||||
|
||||
style=move || {
|
||||
let size = move || {format!("--thaw-drawer--size: {}", size.get().as_size_str(position))};
|
||||
display
|
||||
.get()
|
||||
.map_or_else(size, |d| d.to_string())
|
||||
let size = move || {
|
||||
format!(
|
||||
"--thaw-drawer--size: {}",
|
||||
size.get().as_size_str(position),
|
||||
)
|
||||
};
|
||||
display.get().map_or_else(size, |d| d.to_string())
|
||||
}
|
||||
node_ref=drawer_ref
|
||||
role="dialog"
|
||||
|
|
|
|||
|
|
@ -41,10 +41,7 @@ pub fn GridItem(
|
|||
});
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=class_list!["thaw-grid-item", class]
|
||||
style=move || style.get()
|
||||
>
|
||||
<div class=class_list!["thaw-grid-item", class] style=move || style.get()>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,10 +29,7 @@ pub fn Grid(
|
|||
|
||||
view! {
|
||||
<Provider value=GridInjection::new(x_gap)>
|
||||
<div
|
||||
class=class_list!["thaw-grid", class]
|
||||
style=move || style.get()
|
||||
>
|
||||
<div class=class_list!["thaw-grid", class] style=move || style.get()>
|
||||
{children()}
|
||||
</div>
|
||||
</Provider>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,11 @@ pub fn Image(
|
|||
#[prop(optional, into)]
|
||||
alt: MaybeProp<String>,
|
||||
/// Image width.
|
||||
#[prop(optional, into)] width: MaybeProp<String>,
|
||||
#[prop(optional, into)]
|
||||
width: MaybeProp<String>,
|
||||
/// Image height.
|
||||
#[prop(optional, into)] height: MaybeProp<String>,
|
||||
#[prop(optional, into)]
|
||||
height: MaybeProp<String>,
|
||||
/// An image can appear square, circular, or rounded.
|
||||
#[prop(optional, into)]
|
||||
shape: MaybeSignal<ImageShape>,
|
||||
|
|
|
|||
|
|
@ -6,9 +6,5 @@ pub fn LayoutHeader(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class=class_list!["thaw-layout-header", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-layout-header", class]>{children()}</div> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ use thaw_utils::{class_list, mount_style};
|
|||
pub fn LayoutSider(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Addtional classes for the scroll element.
|
||||
#[prop(optional, into)] content_class: MaybeProp<String>,
|
||||
#[prop(optional, into)]
|
||||
content_class: MaybeProp<String>,
|
||||
/// Style of scrollable content node.
|
||||
#[prop(optional, into)] content_style: MaybeProp<String>,
|
||||
#[prop(optional, into)]
|
||||
content_style: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style("layout-sider", include_str!("./layout-sider.css"));
|
||||
|
|
|
|||
|
|
@ -28,18 +28,22 @@ impl LayoutPosition {
|
|||
pub fn Layout(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Addtional classes for the layout element.
|
||||
#[prop(optional, into)] content_class: MaybeProp<String>,
|
||||
#[prop(optional, into)]
|
||||
content_class: MaybeProp<String>,
|
||||
/// Style of scrollable content node.
|
||||
#[prop(optional, into)] content_style: MaybeProp<String>,
|
||||
#[prop(optional, into)]
|
||||
content_style: MaybeProp<String>,
|
||||
/// static position will make it css position set to static.
|
||||
/// absolute position will make it css position set to absolute and left,
|
||||
/// right, top, bottom to 0. absolute position is very useful
|
||||
/// when you want to make content scroll in a fixed container or make
|
||||
/// the whole page's layout in a fixed position. You may need to change
|
||||
/// the style of the component to make it display as you expect.
|
||||
#[prop(optional)] position: LayoutPosition,
|
||||
#[prop(optional)]
|
||||
position: LayoutPosition,
|
||||
/// Whether the component has sider inside. If so it must be true.
|
||||
#[prop(optional, into)] has_sider: MaybeSignal<bool>,
|
||||
#[prop(optional, into)]
|
||||
has_sider: MaybeSignal<bool>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style("layout", include_str!("./layout.css"));
|
||||
|
|
|
|||
|
|
@ -24,33 +24,80 @@ pub fn MessageBar(
|
|||
role="group"
|
||||
>
|
||||
<div class="thaw-message-bar__icon">
|
||||
{
|
||||
move || match intent.get() {
|
||||
MessageBarIntent::Info => EitherOf4::A(view! {
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z" fill="currentColor"></path>
|
||||
{move || match intent.get() {
|
||||
MessageBarIntent::Info => {
|
||||
EitherOf4::A(
|
||||
view! {
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
}),
|
||||
MessageBarIntent::Success => EitherOf4::B(view! {
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm3.36 5.65a.5.5 0 0 0-.64-.06l-.07.06L9 11.3 7.35 9.65l-.07-.06a.5.5 0 0 0-.7.7l.07.07 2 2 .07.06c.17.11.4.11.56 0l.07-.06 4-4 .07-.08a.5.5 0 0 0-.06-.63Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
}),
|
||||
MessageBarIntent::Warning => EitherOf4::C(view! {
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="M8.68 2.79a1.5 1.5 0 0 1 2.64 0l6.5 12A1.5 1.5 0 0 1 16.5 17h-13a1.5 1.5 0 0 1-1.32-2.21l6.5-12ZM10.5 7.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 1 0v-4Zm.25 6.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
}),
|
||||
MessageBarIntent::Error => EitherOf4::D(view! {
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16ZM7.8 7.11a.5.5 0 0 0-.63.06l-.06.07a.5.5 0 0 0 .06.64L9.3 10l-2.12 2.12-.06.07a.5.5 0 0 0 .06.64l.07.06c.2.13.47.11.64-.06L10 10.7l2.12 2.12.07.06c.2.13.46.11.64-.06l.06-.07a.5.5 0 0 0-.06-.64L10.7 10l2.12-2.12.06-.07a.5.5 0 0 0-.06-.64l-.07-.06a.5.5 0 0 0-.64.06L10 9.3 7.88 7.17l-.07-.06Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
}),
|
||||
},
|
||||
)
|
||||
}
|
||||
MessageBarIntent::Success => {
|
||||
EitherOf4::B(
|
||||
view! {
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm3.36 5.65a.5.5 0 0 0-.64-.06l-.07.06L9 11.3 7.35 9.65l-.07-.06a.5.5 0 0 0-.7.7l.07.07 2 2 .07.06c.17.11.4.11.56 0l.07-.06 4-4 .07-.08a.5.5 0 0 0-.06-.63Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
},
|
||||
)
|
||||
}
|
||||
MessageBarIntent::Warning => {
|
||||
EitherOf4::C(
|
||||
view! {
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M8.68 2.79a1.5 1.5 0 0 1 2.64 0l6.5 12A1.5 1.5 0 0 1 16.5 17h-13a1.5 1.5 0 0 1-1.32-2.21l6.5-12ZM10.5 7.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 1 0v-4Zm.25 6.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
},
|
||||
)
|
||||
}
|
||||
MessageBarIntent::Error => {
|
||||
EitherOf4::D(
|
||||
view! {
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16ZM7.8 7.11a.5.5 0 0 0-.63.06l-.06.07a.5.5 0 0 0 .06.64L9.3 10l-2.12 2.12-.06.07a.5.5 0 0 0 .06.64l.07.06c.2.13.47.11.64-.06L10 10.7l2.12 2.12.07.06c.2.13.46.11.64-.06l.06-.07a.5.5 0 0 0-.06-.64L10.7 10l2.12-2.12.06-.07a.5.5 0 0 0-.06-.64l-.07-.06a.5.5 0 0 0-.64.06L10 9.3 7.88 7.17l-.07-.06Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
},
|
||||
)
|
||||
}
|
||||
}}
|
||||
|
||||
</div>
|
||||
{children()}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@ pub fn MessageBarActions(
|
|||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class="thaw-message-bar-actions">
|
||||
{children()}
|
||||
</div>
|
||||
<div class="thaw-message-bar-actions">{children()}</div>
|
||||
<div class="tha-message-bar-actions__container-action">
|
||||
{(message_bar_container_action.children)()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,5 @@ pub fn MessageBarBody(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class=class_list!["thaw-message-bar-body", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-message-bar-body", class]>{children()}</div> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,5 @@ pub fn MessageBarTitle(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<span class=class_list!["thaw-message-bar-title", class]>
|
||||
{children()}
|
||||
</span>
|
||||
}
|
||||
view! { <span class=class_list!["thaw-message-bar-title", class]>{children()}</span> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,17 +77,13 @@ pub fn NavCategory(
|
|||
on:click=on_click
|
||||
aria-expanded=move || is_show_group.get()
|
||||
>
|
||||
{
|
||||
move || {
|
||||
{move || {
|
||||
if let Some(icon) = item_icon.get() {
|
||||
Either::Left(view! {
|
||||
<Icon icon=icon style="font-size: 20px"/>
|
||||
})
|
||||
Either::Left(view! { <Icon icon=icon style="font-size: 20px" /> })
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
{item_children()}
|
||||
<span aria-hidden="true" class="thaw-nav-category-item__expand-icon">
|
||||
<svg
|
||||
|
|
@ -96,13 +92,18 @@ pub fn NavCategory(
|
|||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
style=move || if is_show_group.get() {
|
||||
style=move || {
|
||||
if is_show_group.get() {
|
||||
"transform: rotate(90deg)"
|
||||
} else {
|
||||
"transform: rotate(0deg)"
|
||||
}
|
||||
}
|
||||
>
|
||||
<path d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z" fill="currentColor"></path>
|
||||
<path
|
||||
d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -19,15 +19,16 @@ pub fn NavDrawer(
|
|||
mount_style("nav-drawer", include_str!("./nav-drawer.css"));
|
||||
|
||||
view! {
|
||||
<Provider value=NavDrawerInjection{ selected_value, selected_category_value }>
|
||||
<Provider value=NavDrawerInjection {
|
||||
selected_value,
|
||||
selected_category_value,
|
||||
}>
|
||||
<div class=class_list!["thaw-nav-drawer", class]>
|
||||
<OptionComp value=nav_drawer_header let:header>
|
||||
<header class="thaw-nav-drawer__header">{(header.children)()}</header>
|
||||
</OptionComp>
|
||||
<div class="thaw-nav-drawer__body">
|
||||
<Scrollbar>
|
||||
{children()}
|
||||
</Scrollbar>
|
||||
<Scrollbar>{children()}</Scrollbar>
|
||||
</div>
|
||||
<OptionComp value=nav_drawer_footer let:footer>
|
||||
<footer class="thaw-nav-drawer__footer">{(footer.children)()}</footer>
|
||||
|
|
|
|||
|
|
@ -25,17 +25,13 @@ pub fn NavItem(
|
|||
|
||||
let children = || {
|
||||
view! {
|
||||
{
|
||||
move || {
|
||||
{move || {
|
||||
if let Some(icon) = icon.get() {
|
||||
Either::Left(view! {
|
||||
<Icon icon=icon style="font-size: 20px"/>
|
||||
})
|
||||
Either::Left(view! { <Icon icon=icon style="font-size: 20px" /> })
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
{children()}
|
||||
}
|
||||
};
|
||||
|
|
@ -49,7 +45,11 @@ pub fn NavItem(
|
|||
if let Some(href) = href {
|
||||
Either::Left(view! {
|
||||
<a
|
||||
class=class_list!["thaw-nav-item", ("thaw-nav-item--selected", move || selected.get()), class]
|
||||
class=class_list![
|
||||
"thaw-nav-item",
|
||||
("thaw-nav-item--selected", move || selected.get()),
|
||||
class
|
||||
]
|
||||
href=move || href.get()
|
||||
on:click=on_click
|
||||
>
|
||||
|
|
@ -59,7 +59,11 @@ pub fn NavItem(
|
|||
} else {
|
||||
Either::Right(view! {
|
||||
<button
|
||||
class=class_list!["thaw-nav-item", ("thaw-nav-item--selected", move || selected.get()), class]
|
||||
class=class_list![
|
||||
"thaw-nav-item",
|
||||
("thaw-nav-item--selected", move || selected.get()),
|
||||
class
|
||||
]
|
||||
on:click=on_click
|
||||
>
|
||||
{children()}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,14 @@ use thaw_utils::{class_list, mount_style, Model};
|
|||
pub fn Pagination(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// The current page starts from 1.
|
||||
#[prop(default = 1.into(), into)] page: Model<usize>,
|
||||
#[prop(default = 1.into(), into)]
|
||||
page: Model<usize>,
|
||||
/// The total numbers of pages.
|
||||
#[prop(into)] page_count: MaybeSignal<usize>,
|
||||
#[prop(into)]
|
||||
page_count: MaybeSignal<usize>,
|
||||
/// Number of visible pages after and before the current page.
|
||||
#[prop(default = 1.into(), into)] sibling_count: MaybeSignal<usize>,
|
||||
#[prop(default = 1.into(), into)]
|
||||
sibling_count: MaybeSignal<usize>,
|
||||
) -> impl IntoView {
|
||||
mount_style("pagination", include_str!("./pagination.css"));
|
||||
|
||||
|
|
@ -34,17 +37,21 @@ pub fn Pagination(
|
|||
icon=icondata_ai::AiLeftOutlined
|
||||
disabled=no_previous
|
||||
/>
|
||||
{
|
||||
move || {
|
||||
use_pagination(page.get(), page_count.get(), sibling_count.get()).into_iter().map(|item| {
|
||||
{move || {
|
||||
use_pagination(page.get(), page_count.get(), sibling_count.get())
|
||||
.into_iter()
|
||||
.map(|item| {
|
||||
if let PaginationItem::Number(nb) = item {
|
||||
Either::Left(view! {
|
||||
Either::Left(
|
||||
view! {
|
||||
<Button
|
||||
class="thaw-pagination-item"
|
||||
appearance=Memo::new(move |_| if page.get() == nb {
|
||||
appearance=Memo::new(move |_| {
|
||||
if page.get() == nb {
|
||||
ButtonAppearance::Primary
|
||||
} else {
|
||||
ButtonAppearance::Secondary
|
||||
}
|
||||
})
|
||||
on_click=move |_| {
|
||||
if page.get() != nb {
|
||||
|
|
@ -54,15 +61,14 @@ pub fn Pagination(
|
|||
>
|
||||
{nb}
|
||||
</Button>
|
||||
})
|
||||
},
|
||||
)
|
||||
} else {
|
||||
Either::Right(view! {
|
||||
<div class="thaw-pagination-item">"..."</div>
|
||||
Either::Right(view! { <div class="thaw-pagination-item">"..."</div> })
|
||||
}
|
||||
})
|
||||
}
|
||||
}).collect_view()
|
||||
}
|
||||
}
|
||||
.collect_view()
|
||||
}}
|
||||
<Button
|
||||
class="thaw-pagination-item"
|
||||
on_click=on_click_next
|
||||
|
|
|
|||
|
|
@ -146,8 +146,7 @@ pub fn Popover(
|
|||
on:mouseleave=on_mouse_leave
|
||||
>
|
||||
{children()}
|
||||
<div class="thaw-popover-surface__angle">
|
||||
</div>
|
||||
<div class="thaw-popover-surface__angle"></div>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</Follower>
|
||||
|
|
|
|||
|
|
@ -36,8 +36,7 @@ pub fn ProgressBar(
|
|||
aria-valuemin="0"
|
||||
aria-valuenow=move || value.get()
|
||||
>
|
||||
<div class="thaw-progress-bar__bar" style=style>
|
||||
</div>
|
||||
<div class="thaw-progress-bar__bar" style=style></div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,7 +86,8 @@ pub fn ProgressCircle(
|
|||
<div class="thaw-progress-circle__content thaw-progress-circle__content--text">
|
||||
{move || value.get()} "%"
|
||||
</div>
|
||||
}.into_any()
|
||||
}
|
||||
.into_any()
|
||||
}}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,15 +46,18 @@ pub fn Radio(
|
|||
on:change=on_change
|
||||
/>
|
||||
<div aria-hidden="true" class="thaw-radio__indicator"></div>
|
||||
{
|
||||
move || if let Some(label) = label.get() {
|
||||
{move || {
|
||||
if let Some(label) = label.get() {
|
||||
view! {
|
||||
<label class="thaw-radio__label" for=id.clone()>{label}</label>
|
||||
}.into()
|
||||
<label class="thaw-radio__label" for=id.clone()>
|
||||
{label}
|
||||
</label>
|
||||
}
|
||||
.into()
|
||||
} else {
|
||||
None
|
||||
}
|
||||
}
|
||||
}}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ use thaw_utils::{class_list, OptionModel};
|
|||
pub fn RadioGroup(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// The selected Radio item in this group.
|
||||
#[prop(optional, into)] value: OptionModel<String>,
|
||||
#[prop(optional, into)]
|
||||
value: OptionModel<String>,
|
||||
/// The name of this radio group.
|
||||
#[prop(optional, into)]
|
||||
name: Option<String>,
|
||||
|
|
@ -15,7 +16,11 @@ pub fn RadioGroup(
|
|||
|
||||
view! {
|
||||
<Provider value=RadioGroupInjection { value, name }>
|
||||
<div class=class_list!["thaw-radio-group", class] role="radiogroup" style="display: flex;align-items: flex-start">
|
||||
<div
|
||||
class=class_list!["thaw-radio-group", class]
|
||||
role="radiogroup"
|
||||
style="display: flex;align-items: flex-start"
|
||||
>
|
||||
{children()}
|
||||
</div>
|
||||
</Provider>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,14 @@ pub fn Scrollbar(
|
|||
#[prop(optional, into)] class: MaybeProp<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>>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
|
|
@ -299,15 +302,10 @@ pub fn Scrollbar(
|
|||
|
||||
<div class="thaw-scrollbar__container" node_ref=container_ref on:scroll=on_scroll>
|
||||
<div
|
||||
class=class_list![
|
||||
"thaw-scrollbar__content", content_class
|
||||
]
|
||||
class=class_list!["thaw-scrollbar__content", content_class]
|
||||
|
||||
style=move || {
|
||||
format!(
|
||||
"width: fit-content; {}",
|
||||
content_style.get().unwrap_or_default(),
|
||||
)
|
||||
format!("width: fit-content; {}", content_style.get().unwrap_or_default())
|
||||
}
|
||||
|
||||
node_ref=content_ref
|
||||
|
|
@ -318,7 +316,9 @@ pub fn Scrollbar(
|
|||
<div class="thaw-scrollbar__track--vertical" node_ref=y_track_ref>
|
||||
<div
|
||||
class="thaw-scrollabr__thumb"
|
||||
style:display=move || (!is_show_y_thumb.get()).then_some("none").unwrap_or_default()
|
||||
style:display=move || {
|
||||
(!is_show_y_thumb.get()).then_some("none").unwrap_or_default()
|
||||
}
|
||||
style:height=move || format!("{}px", y_thumb_height.get())
|
||||
style:top=move || format!("{}px", y_thumb_top.get())
|
||||
on:mousedown=on_y_thumb_mousedown
|
||||
|
|
@ -327,7 +327,9 @@ pub fn Scrollbar(
|
|||
<div class="thaw-scrollbar__track--horizontal" node_ref=x_track_ref>
|
||||
<div
|
||||
class="thaw-scrollabr__thumb"
|
||||
style:display=move || (!is_show_x_thumb.get()).then_some("none").unwrap_or_default()
|
||||
style:display=move || {
|
||||
(!is_show_x_thumb.get()).then_some("none").unwrap_or_default()
|
||||
}
|
||||
style:width=move || format!("{}px", x_thumb_width.get())
|
||||
style:left=move || format!("{}px", x_thumb_left.get())
|
||||
on:mousedown=on_x_thumb_mousedown
|
||||
|
|
|
|||
|
|
@ -7,11 +7,7 @@ pub fn Skeleton(
|
|||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div
|
||||
role="progressbar"
|
||||
aria-busy="true"
|
||||
class=class_list!["thaw-skeleton", class]
|
||||
>
|
||||
<div role="progressbar" aria-busy="true" class=class_list!["thaw-skeleton", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,5 @@ use thaw_utils::{class_list, mount_style};
|
|||
pub fn SkeletonItem(#[prop(optional, into)] class: MaybeProp<String>) -> impl IntoView {
|
||||
mount_style("skeleton-item", include_str!("./skeleton-item.css"));
|
||||
|
||||
view! {
|
||||
<div class=class_list!["thaw-skeleton-item", class]>
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-skeleton-item", class]></div> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,10 +76,7 @@ pub fn Slider(
|
|||
|
||||
view! {
|
||||
<Provider value=SliderInjection { max, min }>
|
||||
<div
|
||||
class=class_list!["thaw-slider", class]
|
||||
style=css_vars
|
||||
>
|
||||
<div class=class_list!["thaw-slider", class] style=css_vars>
|
||||
<input
|
||||
min=move || min.get()
|
||||
max=move || max.get()
|
||||
|
|
@ -91,10 +88,8 @@ pub fn Slider(
|
|||
prop:value=move || current_value.get()
|
||||
list=list_id.clone()
|
||||
/>
|
||||
<div class="thaw-slider__rail">
|
||||
</div>
|
||||
<div class="thaw-slider__thumb">
|
||||
</div>
|
||||
<div class="thaw-slider__rail"></div>
|
||||
<div class="thaw-slider__thumb"></div>
|
||||
<OptionComp value=children let:children>
|
||||
<datalist id=list_id class="thaw-slider__datalist">
|
||||
{children()}
|
||||
|
|
|
|||
|
|
@ -20,11 +20,7 @@ pub fn SliderLabel(
|
|||
};
|
||||
|
||||
view! {
|
||||
<option
|
||||
class=class_list!["thaw-slider-label", class]
|
||||
style=style
|
||||
value=move || value.get()
|
||||
>
|
||||
<option class=class_list!["thaw-slider-label", class] style=style value=move || value.get()>
|
||||
|
||||
{children()}
|
||||
</option>
|
||||
|
|
|
|||
|
|
@ -16,13 +16,17 @@ pub enum SpaceGap {
|
|||
pub fn Space(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Space's gap.
|
||||
#[prop(optional)] gap: SpaceGap,
|
||||
#[prop(optional)]
|
||||
gap: SpaceGap,
|
||||
/// Whether to lay out vertically.
|
||||
#[prop(optional)] vertical: bool,
|
||||
#[prop(optional)]
|
||||
vertical: bool,
|
||||
/// Vertical arrangement.
|
||||
#[prop(optional, into)] align: MaybeProp<SpaceAlign>,
|
||||
#[prop(optional, into)]
|
||||
align: MaybeProp<SpaceAlign>,
|
||||
/// Horizontal arrangement.
|
||||
#[prop(optional, into)] justify: MaybeProp<SpaceJustify>,
|
||||
#[prop(optional, into)]
|
||||
justify: MaybeProp<SpaceJustify>,
|
||||
children: ChildrenFragment,
|
||||
) -> impl IntoView {
|
||||
mount_style("space", include_str!("./space.css"));
|
||||
|
|
|
|||
|
|
@ -78,9 +78,11 @@ where
|
|||
};
|
||||
|
||||
view! {
|
||||
<span
|
||||
class=class_list!["thaw-spin-button", ("thaw-spin-button--disabled", move || disabled.get()), class]
|
||||
>
|
||||
<span class=class_list![
|
||||
"thaw-spin-button",
|
||||
("thaw-spin-button--disabled", move || disabled.get()),
|
||||
class
|
||||
]>
|
||||
<input
|
||||
autocomplete="off"
|
||||
role="spinbutton"
|
||||
|
|
@ -105,7 +107,10 @@ where
|
|||
aria-label="Increment value"
|
||||
type="button"
|
||||
class="thaw-spin-button__increment-button"
|
||||
class=("thaw-spin-button__increment-button--disabled", move || increment_disabled.get())
|
||||
class=(
|
||||
"thaw-spin-button__increment-button--disabled",
|
||||
move || increment_disabled.get(),
|
||||
)
|
||||
disabled=move || disabled.get()
|
||||
on:click=move |_| {
|
||||
if !increment_disabled.get_untracked() {
|
||||
|
|
@ -113,8 +118,17 @@ where
|
|||
}
|
||||
}
|
||||
>
|
||||
<svg fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path d="M3.15 10.35c.2.2.5.2.7 0L8 6.21l4.15 4.14a.5.5 0 0 0 .7-.7l-4.5-4.5a.5.5 0 0 0-.7 0l-4.5 4.5a.5.5 0 0 0 0 .7Z" fill="currentColor"></path>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M3.15 10.35c.2.2.5.2.7 0L8 6.21l4.15 4.14a.5.5 0 0 0 .7-.7l-4.5-4.5a.5.5 0 0 0-.7 0l-4.5 4.5a.5.5 0 0 0 0 .7Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -123,15 +137,27 @@ where
|
|||
type="button"
|
||||
class="thaw-spin-button__decrement-button"
|
||||
disabled=move || disabled.get()
|
||||
class=("thaw-spin-button__decrement-button--disabled", move || decrement_disabled.get())
|
||||
class=(
|
||||
"thaw-spin-button__decrement-button--disabled",
|
||||
move || decrement_disabled.get(),
|
||||
)
|
||||
on:click=move |_| {
|
||||
if !decrement_disabled.get_untracked() {
|
||||
update_value(value.get_untracked() - step_page.get_untracked());
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path d="M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z" fill="currentColor"></path>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -55,26 +55,29 @@ pub fn Spinner(
|
|||
|
||||
view! {
|
||||
<div
|
||||
class=class_list!["thaw-spinner", move || format!("thaw-spinner--{}", size.get().as_str()), class]
|
||||
class=class_list![
|
||||
"thaw-spinner",
|
||||
move || format!("thaw-spinner--{}", size.get().as_str()),
|
||||
class
|
||||
]
|
||||
role="progressbar"
|
||||
aria-labelledby=labelledby
|
||||
>
|
||||
<span class="thaw-spinner__spinner">
|
||||
<span class="thaw-spinner__spinner-tail"></span>
|
||||
</span>
|
||||
{
|
||||
move || {
|
||||
{move || {
|
||||
if let Some(label) = label.get() {
|
||||
view! {
|
||||
<label class="thaw-spinner__label" id=id.get_value()>
|
||||
{label}
|
||||
</label>
|
||||
}.into()
|
||||
}
|
||||
.into()
|
||||
} else {
|
||||
None
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,11 @@ use thaw_utils::{class_list, mount_style, Model};
|
|||
pub fn Switch(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// Defines the controlled checked state of the Switch.
|
||||
#[prop(optional, into)] checked: Model<bool>,
|
||||
#[prop(optional, into)]
|
||||
checked: Model<bool>,
|
||||
/// The Switch's label.
|
||||
#[prop(optional, into)] label: MaybeProp<String>,
|
||||
#[prop(optional, into)]
|
||||
label: MaybeProp<String>,
|
||||
) -> impl IntoView {
|
||||
mount_style("switch", include_str!("./switch.css"));
|
||||
|
||||
|
|
@ -30,19 +32,28 @@ pub fn Switch(
|
|||
on:change=on_change
|
||||
/>
|
||||
<div aria-hidden="true" class="thaw-switch__indicator thaw-switch__button">
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
{
|
||||
move || if let Some(label) = label.get() {
|
||||
{move || {
|
||||
if let Some(label) = label.get() {
|
||||
view! {
|
||||
<label class="thaw-switch__label" for=id.clone()>{label}</label>
|
||||
}.into()
|
||||
<label class="thaw-switch__label" for=id.clone()>
|
||||
{label}
|
||||
</label>
|
||||
}
|
||||
.into()
|
||||
} else {
|
||||
None
|
||||
}
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,10 +24,7 @@ pub fn TabList(
|
|||
selected_value,
|
||||
registered_tabs,
|
||||
}>
|
||||
<div
|
||||
class=class_list!["thaw-tab-list", class]
|
||||
role="tablist"
|
||||
>
|
||||
<div class=class_list!["thaw-tab-list", class] role="tablist">
|
||||
{children()}
|
||||
</div>
|
||||
</Provider>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ use thaw_utils::{class_list, mount_style};
|
|||
pub fn Tab(
|
||||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
/// The indentifier of the tab.
|
||||
#[prop(into)] value: String,
|
||||
#[prop(into)]
|
||||
value: String,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style("tab", include_str!("./tab.css"));
|
||||
|
|
@ -62,17 +63,13 @@ pub fn Tab(
|
|||
|
||||
view! {
|
||||
<button
|
||||
class=class_list![
|
||||
"thaw-tab", ("thaw-tab--selected", move || selected.get()), class
|
||||
]
|
||||
class=class_list!["thaw-tab", ("thaw-tab--selected", move || selected.get()), class]
|
||||
role="tab"
|
||||
aria-selected=move || if selected.get() { "true" } else { "false" }
|
||||
node_ref=tab_ref
|
||||
on:click=on_select
|
||||
>
|
||||
<span class="thaw-tab__content">
|
||||
{children()}
|
||||
</span>
|
||||
<span class="thaw-tab__content">{children()}</span>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,7 @@ pub fn Table(
|
|||
) -> impl IntoView {
|
||||
mount_style("table", include_str!("./table.css"));
|
||||
|
||||
view! {
|
||||
<table class=class_list!["thaw-table", class]>
|
||||
{children()}
|
||||
</table>
|
||||
}
|
||||
view! { <table class=class_list!["thaw-table", class]>{children()}</table> }
|
||||
}
|
||||
|
||||
#[component]
|
||||
|
|
@ -20,11 +16,7 @@ pub fn TableHeader(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<thead class=class_list!["thaw-table-header", class]>
|
||||
{children()}
|
||||
</thead>
|
||||
}
|
||||
view! { <thead class=class_list!["thaw-table-header", class]>{children()}</thead> }
|
||||
}
|
||||
|
||||
#[component]
|
||||
|
|
@ -35,13 +27,11 @@ pub fn TableHeaderCell(
|
|||
view! {
|
||||
<th class=class_list!["thaw-table-header-cell", class]>
|
||||
<button class="thaw-table-header-cell__button" role="presentation">
|
||||
{
|
||||
if let Some(children) = children {
|
||||
{if let Some(children) = children {
|
||||
Either::Left(children())
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</button>
|
||||
</th>
|
||||
}
|
||||
|
|
@ -52,11 +42,7 @@ pub fn TableBody(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<tbody class=class_list!["thaw-table-body", class]>
|
||||
{children()}
|
||||
</tbody>
|
||||
}
|
||||
view! { <tbody class=class_list!["thaw-table-body", class]>{children()}</tbody> }
|
||||
}
|
||||
|
||||
#[component]
|
||||
|
|
@ -64,11 +50,7 @@ pub fn TableRow(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<tr class=class_list!["thaw-table-row", class]>
|
||||
{children()}
|
||||
</tr>
|
||||
}
|
||||
view! { <tr class=class_list!["thaw-table-row", class]>{children()}</tr> }
|
||||
}
|
||||
|
||||
#[component]
|
||||
|
|
@ -77,14 +59,14 @@ pub fn TableCell(
|
|||
#[prop(optional)] children: Option<Children>,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<td class=class_list!["thaw-table-cell", class]>
|
||||
{
|
||||
if let Some(children) = children {
|
||||
<td class=class_list![
|
||||
"thaw-table-cell", class
|
||||
]>
|
||||
{if let Some(children) = children {
|
||||
Either::Left(children())
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</td>
|
||||
}
|
||||
}
|
||||
|
|
@ -94,9 +76,5 @@ pub fn TableCellLayout(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class=class_list!["thaw-table-cell-layout", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-table-cell-layout", class]>{children()}</div> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,10 +15,8 @@ pub fn Tag(
|
|||
mount_style("tag", include_str!("./tag.css"));
|
||||
|
||||
view! {
|
||||
<span
|
||||
class=class_list!["thaw-tag", ("thaw-tag--closable", move || closable.get()), class]
|
||||
<span class=class_list!["thaw-tag", ("thaw-tag--closable", move || closable.get()), class]>
|
||||
|
||||
>
|
||||
<span class="thaw-tag__primary-text">{children()}</span>
|
||||
|
||||
{move || {
|
||||
|
|
@ -30,13 +28,24 @@ pub fn Tag(
|
|||
on_close(event);
|
||||
};
|
||||
if closable.get() {
|
||||
Either::Left(view! {
|
||||
Either::Left(
|
||||
view! {
|
||||
<button class="thaw-tag__close" on:click=on_close>
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z" fill="currentColor"></path>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
})
|
||||
},
|
||||
)
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@ pub fn Caption1(
|
|||
let class =
|
||||
Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default()));
|
||||
|
||||
view! {
|
||||
<Text tag children class style/>
|
||||
}
|
||||
view! { <Text tag children class style /> }
|
||||
}
|
||||
|
||||
#[component]
|
||||
|
|
@ -27,9 +25,7 @@ pub fn Caption1Strong(
|
|||
format!("thaw-caption-1-strong {}", class.get().unwrap_or_default())
|
||||
});
|
||||
|
||||
view! {
|
||||
<Text tag children class style/>
|
||||
}
|
||||
view! { <Text tag children class style /> }
|
||||
}
|
||||
|
||||
#[component]
|
||||
|
|
@ -41,9 +37,7 @@ pub fn Body1(
|
|||
) -> impl IntoView {
|
||||
let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default()));
|
||||
|
||||
view! {
|
||||
<Text tag children class style/>
|
||||
}
|
||||
view! { <Text tag children class style /> }
|
||||
}
|
||||
|
||||
#[component]
|
||||
|
|
|
|||
|
|
@ -72,14 +72,12 @@ pub fn Textarea(
|
|||
// }
|
||||
|
||||
view! {
|
||||
<span
|
||||
class=class_list![
|
||||
<span class=class_list![
|
||||
"thaw-textarea",
|
||||
("thaw-textarea--disabled", move || disabled.get()),
|
||||
move || format!("thaw-textarea--resize-{}", resize.get().as_str()),
|
||||
class
|
||||
]
|
||||
>
|
||||
]>
|
||||
<textarea
|
||||
prop:value=move || {
|
||||
value_trigger.track();
|
||||
|
|
|
|||
|
|
@ -7,11 +7,7 @@ pub fn Toast(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class=class_list!["thaw-toast", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-toast", class]>{children()}</div> }
|
||||
}
|
||||
|
||||
#[derive(Default, Clone, Copy)]
|
||||
|
|
|
|||
|
|
@ -7,13 +7,9 @@ pub fn ToastBody(
|
|||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class="thaw-toast-body">
|
||||
{children()}
|
||||
</div>
|
||||
<div class="thaw-toast-body">{children()}</div>
|
||||
<OptionComp value=toast_body_subtitle let:subtitle>
|
||||
<div class="thaw-toast-body__subtitle">
|
||||
{(subtitle.children)()}
|
||||
</div>
|
||||
<div class="thaw-toast-body__subtitle">{(subtitle.children)()}</div>
|
||||
</OptionComp>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,5 @@ pub fn ToastFooter(
|
|||
#[prop(optional, into)] class: MaybeProp<String>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class=class_list!["thaw-toast-footer", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-toast-footer", class]>{children()}</div> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,25 +9,30 @@ pub fn ToastTitle(
|
|||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class="thaw-toast-title__media">
|
||||
{
|
||||
if let Some(media) = toast_title_media {
|
||||
{if let Some(media) = toast_title_media {
|
||||
Either::Left((media.children)())
|
||||
} else {
|
||||
Either::Right(view! {
|
||||
<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z" fill="currentColor"></path>
|
||||
Either::Right(
|
||||
view! {
|
||||
<svg
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div class="thaw-toast-title">
|
||||
{children()}
|
||||
},
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<div class="thaw-toast-title">{children()}</div>
|
||||
<OptionComp value=toast_title_action let:action>
|
||||
<div class="thaw-toast-title__action">
|
||||
{(action.children)()}
|
||||
</div>
|
||||
<div class="thaw-toast-title__action">{(action.children)()}</div>
|
||||
</OptionComp>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,93 +71,87 @@ pub fn Toaster(
|
|||
data-thaw-id=config_provider.id().clone()
|
||||
>
|
||||
<div class="thaw-toaster thaw-toaster--top">
|
||||
<For
|
||||
each=move || top_id_list.get()
|
||||
key=|id| id.clone()
|
||||
let:id
|
||||
>
|
||||
<For each=move || top_id_list.get() key=|id| id.clone() let:id>
|
||||
{if let Some((view, options)) = toasts
|
||||
.try_update_value(|map| { map.remove(&id) })
|
||||
.flatten()
|
||||
{
|
||||
if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
|
||||
Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
|
||||
Either::Left(
|
||||
view! { <ToasterContainer on_close view=view.take() options /> },
|
||||
)
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
<div class="thaw-toaster thaw-toaster--top-start">
|
||||
<For
|
||||
each=move || top_start_id_list.get()
|
||||
key=|id| id.clone()
|
||||
let:id
|
||||
>
|
||||
<For each=move || top_start_id_list.get() key=|id| id.clone() let:id>
|
||||
{if let Some((view, options)) = toasts
|
||||
.try_update_value(|map| { map.remove(&id) })
|
||||
.flatten()
|
||||
{
|
||||
if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
|
||||
Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
|
||||
Either::Left(
|
||||
view! { <ToasterContainer on_close view=view.take() options /> },
|
||||
)
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
<div class="thaw-toaster thaw-toaster--top-end">
|
||||
<For
|
||||
each=move || top_end_id_list.get()
|
||||
key=|id| id.clone()
|
||||
let:id
|
||||
>
|
||||
<For each=move || top_end_id_list.get() key=|id| id.clone() let:id>
|
||||
{if let Some((view, options)) = toasts
|
||||
.try_update_value(|map| { map.remove(&id) })
|
||||
.flatten()
|
||||
{
|
||||
if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
|
||||
Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
|
||||
Either::Left(
|
||||
view! { <ToasterContainer on_close view=view.take() options /> },
|
||||
)
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
<div class="thaw-toaster thaw-toaster--bottom">
|
||||
<For
|
||||
each=move || bottom_id_list.get()
|
||||
key=|id| id.clone()
|
||||
let:id
|
||||
>
|
||||
<For each=move || bottom_id_list.get() key=|id| id.clone() let:id>
|
||||
{if let Some((view, options)) = toasts
|
||||
.try_update_value(|map| { map.remove(&id) })
|
||||
.flatten()
|
||||
{
|
||||
if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
|
||||
Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
|
||||
Either::Left(
|
||||
view! { <ToasterContainer on_close view=view.take() options /> },
|
||||
)
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
<div class="thaw-toaster thaw-toaster--bottom-start">
|
||||
<For
|
||||
each=move || bottom_start_id_list.get()
|
||||
key=|id| id.clone()
|
||||
let:id
|
||||
>
|
||||
<For each=move || bottom_start_id_list.get() key=|id| id.clone() let:id>
|
||||
{if let Some((view, options)) = toasts
|
||||
.try_update_value(|map| { map.remove(&id) })
|
||||
.flatten()
|
||||
{
|
||||
if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
|
||||
Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
|
||||
Either::Left(
|
||||
view! { <ToasterContainer on_close view=view.take() options /> },
|
||||
)
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
<div class="thaw-toaster thaw-toaster--bottom-end">
|
||||
<For
|
||||
each=move || bottom_end_id_list.get()
|
||||
key=|id| id.clone()
|
||||
let:id
|
||||
>
|
||||
<For each=move || bottom_end_id_list.get() key=|id| id.clone() let:id>
|
||||
{if let Some((view, options)) = toasts
|
||||
.try_update_value(|map| { map.remove(&id) })
|
||||
.flatten()
|
||||
{
|
||||
if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
|
||||
Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
|
||||
Either::Left(
|
||||
view! { <ToasterContainer on_close view=view.take() options /> },
|
||||
)
|
||||
} else {
|
||||
Either::Right(())
|
||||
}
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,13 @@ use leptos::{context::Provider, prelude::*};
|
|||
#[component]
|
||||
pub fn ToasterProvider(
|
||||
/// The position the toast should render.
|
||||
#[prop(optional)] position: ToastPosition,
|
||||
#[prop(optional)]
|
||||
position: ToastPosition,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
let (injection, receiver) = ToasterInjection::channel();
|
||||
view! {
|
||||
<Toaster receiver position />
|
||||
<Provider value=injection>
|
||||
{children()}
|
||||
</Provider>
|
||||
<Provider value=injection>{children()}</Provider>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,12 +80,11 @@ pub fn Upload(
|
|||
};
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=class_list!["thaw-upload",
|
||||
<div class=class_list![
|
||||
"thaw-upload",
|
||||
("thaw-upload--drag-over", move || is_trigger_dragover.get()),
|
||||
class
|
||||
]
|
||||
>
|
||||
]>
|
||||
<input
|
||||
class="thaw-upload__input"
|
||||
node_ref=input_ref
|
||||
|
|
|
|||
|
|
@ -8,9 +8,5 @@ pub fn UploadDragger(
|
|||
) -> impl IntoView {
|
||||
mount_style("upload-dragger", include_str!("./upload-dragger.css"));
|
||||
|
||||
view! {
|
||||
<div class=class_list!["thaw-upload-dragger", class]>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
view! { <div class=class_list!["thaw-upload-dragger", class]>{children()}</div> }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue