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

feat: leptos-v0.7

Browse source
This commit is contained in:
luoxiao 2024-07-04 17:37:15 +08:00 • committed by luoxiaozero
parent 5f74f5914e
commit 3153f2c0cb
90 changed files with 260 additions and 267 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
thaw/src/anchor/anchor_link.rs
View file

@ -1,5 +1,5 @@
use crate::use_anchor; use crate::use_anchor;
use leptos::*; use leptos::{html, prelude::*};
use thaw_components::OptionComp; use thaw_components::OptionComp;
use thaw_utils::{class_list, OptionalProp, StoredMaybeSignal}; use thaw_utils::{class_list, OptionalProp, StoredMaybeSignal};
@ -39,7 +39,10 @@ pub fn AnchorLink(
}); });
}); });
title_ref.on_load(move |title_el| { Effect::new(|_| {
let Some(title_el) = title_ref.get() else {
return;
};
let _ = watch( let _ = watch(
move || is_active.get(), move || is_active.get(),
move |is_active, _, _| { move |is_active, _, _| {
@ -70,7 +73,7 @@ pub fn AnchorLink(
href=href href=href
class="thaw-anchor-link__title" class="thaw-anchor-link__title"
on:click=on_click on:click=on_click
ref=title_ref node_ref=title_ref
title=move || title.get() title=move || title.get()
> >
{move || title.get()} {move || title.get()}

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

@ -2,7 +2,7 @@ mod anchor_link;
pub use anchor_link::AnchorLink; pub use anchor_link::AnchorLink;
use leptos::*; use leptos::{context::Provider, ev, html, prelude::*};
use std::cmp::Ordering; use std::cmp::Ordering;
use thaw_utils::{add_event_listener_with_bool, class_list, mount_style, throttle, OptionalProp}; use thaw_utils::{add_event_listener_with_bool, class_list, mount_style, throttle, OptionalProp};
use web_sys::{DomRect, Element}; use web_sys::{DomRect, Element};
@ -87,7 +87,7 @@ pub fn Anchor(
view! { view! {
<div <div
class=class_list!["thaw-anchor", class.map(| c | move || c.get())] class=class_list!["thaw-anchor", class.map(| c | move || c.get())]
ref=anchor_ref node_ref=anchor_ref
> >
<div class="thaw-anchor-rail"> <div class="thaw-anchor-rail">
<div <div
@ -97,7 +97,7 @@ pub fn Anchor(
move || active_id.with(|id| id.is_some()), move || active_id.with(|id| id.is_some()),
) )
ref=bar_ref node_ref=bar_ref
></div> ></div>
</div> </div>
<Provider value=AnchorInjection::new( <Provider value=AnchorInjection::new(
@ -164,9 +164,8 @@ impl AnchorInjection {
let offset_top = title_rect.top() - anchor_rect.top(); let offset_top = title_rect.top() - anchor_rect.top();
// let offset_left = title_rect.left() - anchor_rect.left(); // let offset_left = title_rect.left() - anchor_rect.left();
let _ = bar_el bar_el.style(("top", format!("{}px", offset_top)));
.style("top", format!("{}px", offset_top)) bar_el.style(("height", format!("{}px", title_rect.height())));
.style("height", format!("{}px", title_rect.height()));
} }
} }
} }

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

@ -1,5 +1,5 @@
use super::AutoCompleteInjection; use super::AutoCompleteInjection;
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView { pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
@ -11,7 +11,7 @@ pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
<div <div
class="thaw-auto-complete-option" class="thaw-auto-complete-option"
role="option" role="option"
aria-selected=move || if is_selected.get() { "true" } else { "false" } // aria-selected=move || if is_selected.get() { "true" } else { "false" }
on:click=move |_| auto_complete.select_value(value.clone()) on:click=move |_| auto_complete.select_value(value.clone())
> >
{children()} {children()}

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

@ -3,7 +3,7 @@ mod auto_complete_option;
pub use auto_complete_option::AutoCompleteOption; pub use auto_complete_option::AutoCompleteOption;
use crate::{ComponentRef, ConfigInjection, Input, InputPrefix, InputRef, InputSuffix}; use crate::{ComponentRef, ConfigInjection, Input, InputPrefix, InputRef, InputSuffix};
use leptos::*; use leptos::{prelude::*, html};
use thaw_components::{ use thaw_components::{
Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth, OptionComp, Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth, OptionComp,
}; };
@ -42,10 +42,10 @@ pub fn AutoComplete(
let default_index = if allow_free_input { None } else { Some(0) }; let default_index = if allow_free_input { None } else { Some(0) };
let select_option_index = create_rw_signal::<Option<usize>>(default_index); let select_option_index = RwSignal::<Option<usize>>::new(default_index);
let menu_ref = create_node_ref::<html::Div>(); let menu_ref = NodeRef::<html::Div>::new();
let is_show_menu = create_rw_signal(false); let is_show_menu = RwSignal::new(false);
let auto_complete_ref = create_node_ref::<html::Div>(); let auto_complete_ref = NodeRef::<html::Div>::new();
let open_menu = move || { let open_menu = move || {
select_option_index.set(default_index); select_option_index.set(default_index);
is_show_menu.set(true); is_show_menu.set(true);
@ -141,7 +141,7 @@ pub fn AutoComplete(
<Binder target_ref=auto_complete_ref> <Binder target_ref=auto_complete_ref>
<div <div
class=class_list!["thaw-auto-complete", class.map(| c | move || c.get())] class=class_list!["thaw-auto-complete", class.map(| c | move || c.get())]
ref=auto_complete_ref node_ref=auto_complete_ref
// on:keydown=on_keydown // on:keydown=on_keydown
> >
<Input <Input
@ -193,7 +193,7 @@ pub fn AutoComplete(
class="thaw-config-provider thaw-auto-complete__listbox" class="thaw-config-provider thaw-auto-complete__listbox"
style=move || display.get() style=move || display.get()
data-thaw-id=config_provider.id().clone() data-thaw-id=config_provider.id().clone()
ref=menu_ref node_ref=menu_ref
role="listbox" role="listbox"
> >

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_components::OptionComp; use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style, OptionalProp, StoredMaybeSignal}; use thaw_utils::{class_list, mount_style, OptionalProp, StoredMaybeSignal};
@ -49,7 +49,7 @@ pub fn Avatar(
view! { view! {
<span <span
class=class_list!["thaw-avatar", move || format!("thaw-avatar--{}", shape.get().as_str()), class.map(| c | move || c.get())] class=class_list!["thaw-avatar", move || format!("thaw-avatar--{}", shape.get().as_str()), class.map(| c | move || c.get())]
style=style style=move || style().unwrap_or_default()
role="img" role="img"
aria-label=move || name.as_ref().map(|n| n.get()) aria-label=move || name.as_ref().map(|n| n.get())
> >

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

@ -1,5 +1,5 @@
use crate::{ConfigInjection, Icon}; use crate::{ConfigInjection, Icon};
use leptos::{html::ToHtmlElement, *}; use leptos::{ev, html, html::ToHtmlElement, prelude::*};
use thaw_components::{CSSTransition, Fallback, OptionComp, Teleport}; use thaw_components::{CSSTransition, Fallback, OptionComp, Teleport};
use thaw_utils::{ use thaw_utils::{
add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle, add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle,
@ -32,10 +32,14 @@ pub fn BackTop(
let scroll_to_top = StoredValue::new(None::<Callback<()>>); let scroll_to_top = StoredValue::new(None::<Callback<()>>);
let scroll_handle = StoredValue::new(None::<EventListenerHandle>); let scroll_handle = StoredValue::new(None::<EventListenerHandle>);
placeholder_ref.on_load(move |el| { Effect::new(move |_| {
let Some(placeholder_el) = placeholder_ref.get() else {
return;
};
request_animation_frame(move || { request_animation_frame(move || {
let scroll_el = get_scroll_parent(&el.into_any()) let scroll_el = get_scroll_parent(&placeholder_el)
.unwrap_or_else(|| document().document_element().unwrap().to_leptos_element()); .unwrap_or_else(|| document().document_element().unwrap());
{ {
let scroll_el = scroll_el.clone(); let scroll_el = scroll_el.clone();
@ -72,7 +76,7 @@ pub fn BackTop(
}; };
view! { view! {
<div style="display: none" class="thaw-back-top-placeholder" ref=placeholder_ref> <div style="display: none" class="thaw-back-top-placeholder" node_ref=placeholder_ref>
<Teleport immediate=is_show_back_top> <Teleport immediate=is_show_back_top>
<CSSTransition <CSSTransition
node_ref=back_top_ref node_ref=back_top_ref
@ -84,7 +88,7 @@ pub fn BackTop(
<div <div
class=class_list!["thaw-config-provider thaw-back-top", class.map(| c | move || c.get())] class=class_list!["thaw-config-provider thaw-back-top", class.map(| c | move || c.get())]
data-thaw-id=config_provider.id().clone() data-thaw-id=config_provider.id().clone()
ref=back_top_ref node_ref=back_top_ref
style=move || { 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())
} }

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_components::OptionComp; use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
#[component] #[component]

2
thaw/src/button/button_group.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};
#[component] #[component]

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

@ -3,7 +3,7 @@ mod button_group;
pub use button_group::ButtonGroup; pub use button_group::ButtonGroup;
use crate::icon::Icon; use crate::icon::Icon;
use leptos::*; use leptos::{ev, prelude::*};
use thaw_components::OptionComp; use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};

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

@ -1,6 +1,6 @@
use crate::{Button, ButtonGroup}; use crate::{Button, ButtonGroup};
use chrono::{Datelike, Days, Local, Month, Months, NaiveDate}; use chrono::{Datelike, Days, Local, Month, Months, NaiveDate};
use leptos::*; use leptos::prelude::*;
use std::ops::Deref; use std::ops::Deref;
use thaw_utils::{class_list, mount_style, Model, OptionalProp}; use thaw_utils::{class_list, mount_style, Model, OptionalProp};

2
thaw/src/card/card_footer.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::mount_style; use thaw_utils::mount_style;
#[component] #[component]

2
thaw/src/card/card_header.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_components::OptionComp; use thaw_components::OptionComp;
use thaw_utils::mount_style; use thaw_utils::mount_style;

2
thaw/src/card/card_preview.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn CardPreview(children: Children) -> impl IntoView { pub fn CardPreview(children: Children) -> impl IntoView {

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

@ -6,7 +6,7 @@ pub use card_footer::*;
pub use card_header::*; pub use card_header::*;
pub use card_preview::*; pub use card_preview::*;
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};
#[component] #[component]

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::{context::Provider, prelude::*};
use std::collections::HashSet; use std::collections::HashSet;
use thaw_utils::Model; use thaw_utils::Model;

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

@ -3,7 +3,7 @@ mod checkbox_group;
pub use checkbox_group::CheckboxGroup; pub use checkbox_group::CheckboxGroup;
use checkbox_group::CheckboxGroupInjection; use checkbox_group::CheckboxGroupInjection;
use leptos::*; use leptos::{html, prelude::*};
use thaw_utils::{class_list, mount_style, Model, OptionalProp}; use thaw_utils::{class_list, mount_style, Model, OptionalProp};
#[component] #[component]
@ -67,7 +67,7 @@ pub fn Checkbox(
type="checkbox" type="checkbox"
id=id.clone() id=id.clone()
checked=checked checked=checked
ref=input_ref node_ref=input_ref
on:change=on_change on:change=on_change
/> />
<div aria-hidden="true" class="thaw-checkbox__indicator"> <div aria-hidden="true" class="thaw-checkbox__indicator">

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};
#[component] #[component]
@ -14,9 +14,9 @@ pub fn Code(
]> ]>
{if let Some(inner_html) = inner_html { {if let Some(inner_html) = inner_html {
view! { <pre inner_html=inner_html></pre> }.into() view! { <pre inner_html=inner_html></pre> }.into_any().into()
} else if let Some(text) = text { } else if let Some(text) = text {
view! { <pre>{text}</pre> }.into() view! { <pre>{text}</pre> }.into_any().into()
} else { } else {
None None
}} }}

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

@ -4,7 +4,7 @@ pub use color::*;
use crate::ConfigInjection; use crate::ConfigInjection;
use leptos::leptos_dom::helpers::WindowListenerHandle; use leptos::leptos_dom::helpers::WindowListenerHandle;
use leptos::*; use leptos::{ev, html, prelude::*};
use palette::{Hsv, IntoColor, Srgb}; use palette::{Hsv, IntoColor, Srgb};
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement}; use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
use thaw_utils::{class_list, mount_style, Model, OptionalProp}; use thaw_utils::{class_list, mount_style, Model, OptionalProp};
@ -114,8 +114,8 @@ pub fn ColorPicker(
if current_el == *body { if current_el == *body {
break; break;
}; };
if current_el == ***popover_ref.get().unwrap() if current_el == popover_ref.get().unwrap()
|| current_el == ***trigger_ref.get().unwrap() || current_el == trigger_ref.get().unwrap()
{ {
return; return;
} }
@ -131,7 +131,7 @@ pub fn ColorPicker(
<div <div
class=class_list!["thaw-color-picker-trigger", class.map(| c | move || c.get())] class=class_list!["thaw-color-picker-trigger", class.map(| c | move || c.get())]
on:click=show_popover on:click=show_popover
ref=trigger_ref node_ref=trigger_ref
> >
<div class="thaw-color-picker-trigger__content" style=move || style.get()> <div class="thaw-color-picker-trigger__content" style=move || style.get()>
{move || label.get()} {move || label.get()}
@ -147,7 +147,7 @@ pub fn ColorPicker(
> >
<div <div
class="thaw-config-provider thaw-color-picker-popover" class="thaw-config-provider thaw-color-picker-popover"
ref=popover_ref node_ref=popover_ref
style=move || display.get() style=move || display.get()
data-thaw-id=config_provider.id().clone() data-thaw-id=config_provider.id().clone()
> >
@ -210,7 +210,7 @@ fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
}; };
view! { view! {
<div class="thaw-color-picker-popover__panel" ref=panel_ref on:mousedown=on_mouse_down> <div class="thaw-color-picker-popover__panel" node_ref=panel_ref on:mousedown=on_mouse_down>
<div <div
class="thaw-color-picker-popover__layer" class="thaw-color-picker-popover__layer"
style:background-image=move || { style:background-image=move || {
@ -271,7 +271,7 @@ fn HueSlider(hue: RwSignal<f32>) -> impl IntoView {
}); });
}; };
view! { view! {
<div class="thaw-color-picker-slider" ref=rail_ref on:mousedown=on_mouse_down> <div class="thaw-color-picker-slider" node_ref=rail_ref on:mousedown=on_mouse_down>
<div <div
class="thaw-color-picker-slider__handle" class="thaw-color-picker-slider__handle"
style=move || format!("left: calc({}% - 6px)", f32::from(hue.get()) / 359.0 * 100.0) style=move || format!("left: calc({}% - 6px)", f32::from(hue.get()) / 359.0 * 100.0)

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

@ -1,5 +1,5 @@
use crate::ConfigInjection; use crate::ConfigInjection;
use leptos::*; use leptos::{context::Provider, ev, html, prelude::*};
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth}; use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth};
use thaw_utils::{add_event_listener, mount_style, Model}; use thaw_utils::{add_event_listener, mount_style, Model};
@ -26,8 +26,11 @@ pub fn Combobox(
} }
}); });
if clearable { if clearable {
clear_icon_ref.on_load(move |clear_icon_el| { Effect::new(move |_| {
let handler = add_event_listener(clear_icon_el.into_any(), ev::click, move |e| { let Some(clear_icon_el) = clear_icon_ref.get() else {
return;
};
let handler = add_event_listener(clear_icon_el.into(), ev::click, move |e| {
e.stop_propagation(); e.stop_propagation();
selected_options.set(vec![]); selected_options.set(vec![]);
}); });
@ -52,10 +55,10 @@ pub fn Combobox(
if current_el == *body { if current_el == *body {
break; break;
}; };
if current_el == ***listbox_el { if current_el == listbox_el {
return; return;
} }
if current_el == ***trigger_el { if current_el == trigger_el {
return; return;
} }
el = current_el.parent_element(); el = current_el.parent_element();
@ -97,7 +100,7 @@ pub fn Combobox(
<Binder target_ref=trigger_ref> <Binder target_ref=trigger_ref>
<div <div
class="thaw-combobox" class="thaw-combobox"
ref=trigger_ref node_ref=trigger_ref
on:click=move |_| { on:click=move |_| {
is_show_listbox.update(|show| *show = !*show); is_show_listbox.update(|show| *show = !*show);
} }
@ -120,7 +123,7 @@ pub fn Combobox(
aria-hidden="true" aria-hidden="true"
class="thaw-combobox__clear-icon" class="thaw-combobox__clear-icon"
style=move || (!is_show_clear_icon.get()).then(|| "display: none") style=move || (!is_show_clear_icon.get()).then(|| "display: none")
ref=clear_icon_ref node_ref=clear_icon_ref
> >
<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="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> <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>
@ -162,7 +165,7 @@ pub fn Combobox(
class="thaw-config-provider thaw-combobox__listbox" class="thaw-config-provider thaw-combobox__listbox"
style=move || display.get() style=move || display.get()
data-thaw-id=config_provider.id().clone() data-thaw-id=config_provider.id().clone()
ref=listbox_ref node_ref=listbox_ref
role="listbox" role="listbox"
> >
{children()} {children()}

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

@ -1,5 +1,5 @@
use crate::ComboboxInjection; use crate::ComboboxInjection;
use leptos::*; use leptos::prelude::*;
use thaw_components::{Fallback, If, OptionComp, Then}; use thaw_components::{Fallback, If, OptionComp, Then};
use thaw_utils::class_list; use thaw_utils::class_list;

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

@ -1,5 +1,5 @@
use crate::Theme; use crate::Theme;
use leptos::*; use leptos::{context::Provider, prelude::*};
use thaw_utils::{mount_dynamic_style, mount_style}; use thaw_utils::{mount_dynamic_style, mount_style};
#[component] #[component]

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

@ -1,7 +1,7 @@
mod panel; mod panel;
use crate::{Icon, Input, InputSuffix, SignalWatch}; use crate::{Icon, Input, InputSuffix, SignalWatch};
use chrono::NaiveDate; use chrono::NaiveDate;
use leptos::*; use leptos::{prelude::*, html};
use panel::{Panel, PanelRef}; use panel::{Panel, PanelRef};
use thaw_components::{Binder, Follower, FollowerPlacement}; use thaw_components::{Binder, Follower, FollowerPlacement};
use thaw_utils::{mount_style, now_date, ComponentRef, Model, OptionalProp}; use thaw_utils::{mount_style, now_date, ComponentRef, Model, OptionalProp};
@ -68,7 +68,7 @@ pub fn DatePicker(
view! { view! {
<Binder target_ref=date_picker_ref> <Binder target_ref=date_picker_ref>
<div ref=date_picker_ref> <div node_ref=date_picker_ref>
<Input attrs class value=show_date_text on_focus=open_panel on_blur=on_input_blur> <Input attrs class value=show_date_text on_focus=open_panel on_blur=on_input_blur>
<InputSuffix slot> <InputSuffix slot>
<Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px"/> <Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px"/>

2
thaw/src/date_picker/panel/date_panel.rs
View file

@ -1,7 +1,7 @@
use super::PanelVariant; use super::PanelVariant;
use crate::{Button, ButtonAppearance, ButtonSize, CalendarItemDate}; use crate::{Button, ButtonAppearance, ButtonSize, CalendarItemDate};
use chrono::{Datelike, Days, Month, Months, NaiveDate}; use chrono::{Datelike, Days, Month, Months, NaiveDate};
use leptos::*; use leptos::prelude::*;
use std::ops::Deref; use std::ops::Deref;
use thaw_utils::now_date; use thaw_utils::now_date;

4
thaw/src/date_picker/panel/mod.rs
View file

@ -5,7 +5,7 @@ mod year_panel;
use crate::ConfigInjection; use crate::ConfigInjection;
use chrono::NaiveDate; use chrono::NaiveDate;
use date_panel::DatePanel; use date_panel::DatePanel;
use leptos::*; use leptos::{ev, html, prelude::*};
use month_panel::MonthPanel; use month_panel::MonthPanel;
use thaw_components::CSSTransition; use thaw_components::CSSTransition;
use thaw_utils::{now_date, ComponentRef}; use thaw_utils::{now_date, ComponentRef};
@ -74,7 +74,7 @@ pub fn Panel(
class="thaw-config-provider thaw-date-picker-panel" class="thaw-config-provider thaw-date-picker-panel"
data-thaw-id=config_provider.id().clone() data-thaw-id=config_provider.id().clone()
style=move || display.get() style=move || display.get()
ref=panel_ref node_ref=panel_ref
> >
{move || { {move || {

2
thaw/src/date_picker/panel/month_panel.rs
View file

@ -1,7 +1,7 @@
use super::PanelVariant; use super::PanelVariant;
use crate::{Button, ButtonAppearance, ButtonSize}; use crate::{Button, ButtonAppearance, ButtonSize};
use chrono::{Datelike, Month, Months, NaiveDate}; use chrono::{Datelike, Month, Months, NaiveDate};
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn MonthPanel( pub fn MonthPanel(

6
thaw/src/date_picker/panel/year_panel.rs
View file

@ -1,7 +1,7 @@
use super::PanelVariant; use super::PanelVariant;
use crate::{Button, ButtonAppearance, ButtonSize}; use crate::{Button, ButtonAppearance, ButtonSize};
use chrono::{Datelike, NaiveDate}; use chrono::{Datelike, NaiveDate};
use leptos::*; use leptos::prelude::*;
const MAX_YEAR: i32 = (i32::MAX >> 13) / 10 - 1; const MAX_YEAR: i32 = (i32::MAX >> 13) / 10 - 1;
const MIN_YEAR: i32 = (i32::MIN >> 13) / 10 + 1; const MIN_YEAR: i32 = (i32::MIN >> 13) / 10 + 1;
@ -11,7 +11,7 @@ pub fn YearPanel(
date_panel_show_date: RwSignal<NaiveDate>, date_panel_show_date: RwSignal<NaiveDate>,
panel_variant: RwSignal<PanelVariant>, panel_variant: RwSignal<PanelVariant>,
) -> impl IntoView { ) -> impl IntoView {
let show_min_year = create_rw_signal(date_panel_show_date.get_untracked().year() / 10); let show_min_year = RwSignal::new(date_panel_show_date.get_untracked().year() / 10);
let previous_year_range = move |_| { let previous_year_range = move |_| {
show_min_year.update(|year| { show_min_year.update(|year| {
if *year > MIN_YEAR { if *year > MIN_YEAR {
@ -74,7 +74,7 @@ pub fn YearPanel(
#[component] #[component]
fn YearPanelItem(date_panel_show_date: RwSignal<NaiveDate>, year: i32) -> impl IntoView { fn YearPanelItem(date_panel_show_date: RwSignal<NaiveDate>, year: i32) -> impl IntoView {
let is_selected = create_memo(move |_| date_panel_show_date.with(|date| date.year() == year)); let is_selected = Memo::new(move |_| date_panel_show_date.with(|date| date.year() == year));
view! { view! {
<div <div

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

@ -1,5 +1,5 @@
use crate::ConfigInjection; use crate::ConfigInjection;
use leptos::*; use leptos::{context::Provider, ev, html, prelude::*};
use thaw_components::{CSSTransition, FocusTrap, Teleport}; use thaw_components::{CSSTransition, FocusTrap, Teleport};
use thaw_utils::{mount_style, Model}; use thaw_utils::{mount_style, Model};
@ -41,7 +41,7 @@ pub fn Dialog(
class="thaw-dialog-surface__backdrop" class="thaw-dialog-surface__backdrop"
style=move || display.get() style=move || display.get()
on:click=on_mask_click on:click=on_mask_click
ref=mask_ref node_ref=mask_ref
aria-hidden="true" aria-hidden="true"
></div> ></div>
</CSSTransition> </CSSTransition>

2
thaw/src/dialog/dialog_actions.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn DialogActions(children: Children) -> impl IntoView { pub fn DialogActions(children: Children) -> impl IntoView {

2
thaw/src/dialog/dialog_body.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn DialogBody(children: Children) -> impl IntoView { pub fn DialogBody(children: Children) -> impl IntoView {

2
thaw/src/dialog/dialog_content.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn DialogContent(children: Children) -> impl IntoView { pub fn DialogContent(children: Children) -> impl IntoView {

4
thaw/src/dialog/dialog_surface.rs
View file

@ -1,5 +1,5 @@
use super::dialog::DialogInjection; use super::dialog::DialogInjection;
use leptos::*; use leptos::{html, prelude::*};
use thaw_components::CSSTransition; use thaw_components::CSSTransition;
#[component] #[component]
@ -17,7 +17,7 @@ pub fn DialogSurface(children: Children) -> impl IntoView {
> >
<div <div
class="thaw-dialog-surface" class="thaw-dialog-surface"
ref=surface_ref node_ref=surface_ref
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
style:display=move || display.get().map(|_| "none") style:display=move || display.get().map(|_| "none")

2
thaw/src/dialog/dialog_title.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn DialogTitle(children: Children) -> impl IntoView { pub fn DialogTitle(children: Children) -> impl IntoView {

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_components::OptionComp; use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};

2
thaw/src/drawer/drawer_body.rs
View file

@ -1,5 +1,5 @@
use crate::Scrollbar; use crate::Scrollbar;
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn DrawerBody(children: Children) -> impl IntoView { pub fn DrawerBody(children: Children) -> impl IntoView {

2
thaw/src/drawer/drawer_header.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn DrawerHeader(children: Children) -> impl IntoView { pub fn DrawerHeader(children: Children) -> impl IntoView {

2
thaw/src/drawer/drawer_header_title.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_components::OptionComp; use thaw_components::OptionComp;
#[component] #[component]

4
thaw/src/drawer/inline_drawer.rs
View file

@ -1,5 +1,5 @@
use super::{DrawerPosition, DrawerSize}; use super::{DrawerPosition, DrawerSize};
use leptos::*; use leptos::{html, prelude::*};
use thaw_components::CSSTransition; use thaw_components::CSSTransition;
use thaw_utils::{class_list, mount_style, Model}; use thaw_utils::{class_list, mount_style, Model};
@ -62,7 +62,7 @@ pub fn InlineDrawer(
.get() .get()
.map_or_else(size, |d| d.to_string()) .map_or_else(size, |d| d.to_string())
} }
ref=drawer_ref node_ref=drawer_ref
> >
{children()} {children()}
</div> </div>

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

@ -10,7 +10,7 @@ pub use drawer_header_title::*;
pub use inline_drawer::*; pub use inline_drawer::*;
pub use overlay_drawer::*; pub use overlay_drawer::*;
use leptos::{MaybeSignal, SignalWith}; use leptos::prelude::MaybeSignal;
#[derive(Clone, Default, Copy)] #[derive(Clone, Default, Copy)]
pub enum DrawerPosition { pub enum DrawerPosition {

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

@ -1,6 +1,6 @@
use super::{DrawerPosition, DrawerSize}; use super::{DrawerPosition, DrawerSize};
use crate::ConfigInjection; use crate::ConfigInjection;
use leptos::*; use leptos::prelude::*;
use thaw_components::{CSSTransition, FocusTrap, Teleport}; use thaw_components::{CSSTransition, FocusTrap, Teleport};
use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model}; use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};
@ -75,7 +75,7 @@ pub fn OverlayDrawer(
class="thaw-overlay-drawer__backdrop" class="thaw-overlay-drawer__backdrop"
style=move || display.get() style=move || display.get()
on:click=on_mask_click on:click=on_mask_click
ref=mask_ref node_ref=mask_ref
></div> ></div>
</CSSTransition> </CSSTransition>
<CSSTransition <CSSTransition
@ -102,7 +102,7 @@ pub fn OverlayDrawer(
.get() .get()
.map_or_else(size, |d| d.to_string()) .map_or_else(size, |d| d.to_string())
} }
ref=drawer_ref node_ref=drawer_ref
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
> >

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

@ -1,5 +1,5 @@
use super::use_grid; use super::use_grid;
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, OptionalProp}; use thaw_utils::{class_list, OptionalProp};
#[component] #[component]
@ -11,7 +11,7 @@ pub fn GridItem(
) -> impl IntoView { ) -> impl IntoView {
let grid = use_grid(); let grid = use_grid();
let style = create_memo(move |_| { let style = Memo::new(move |_| {
let mut style = String::new(); let mut style = String::new();
let offset = offset.get(); let offset = offset.get();
let column = column.get(); let column = column.get();

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

@ -1,7 +1,7 @@
mod grid_item; mod grid_item;
pub use grid_item::*; pub use grid_item::*;
use leptos::*; use leptos::{context::Provider, prelude::*};
use thaw_utils::{class_list, OptionalProp}; use thaw_utils::{class_list, OptionalProp};
#[component] #[component]
@ -12,7 +12,7 @@ pub fn Grid(
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>, #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
let style = create_memo(move |_| { let style = Memo::new(move |_| {
let mut style = String::from("display: grid;"); let mut style = String::from("display: grid;");
style.push_str(&format!( style.push_str(&format!(
"grid-template-columns: repeat({}, minmax(0px, 1fr));", "grid-template-columns: repeat({}, minmax(0px, 1fr));",

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

@ -1,6 +1,6 @@
// copy https://github.com/Carlosted/leptos-icons // copy https://github.com/Carlosted/leptos-icons
// leptos updated version causes leptos_icons error // leptos updated version causes leptos_icons error
use leptos::*; use leptos::{ev, prelude::*};
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
/// The Icon component. /// The Icon component.
@ -45,7 +45,7 @@ pub fn Icon(
} }
}; };
create_isomorphic_effect(move |_| { Effect::new_isomorphic(move |_| {
let icon = icon.get(); let icon = icon.get();
let style = match (style.clone(), icon.style) { let style = match (style.clone(), icon.style) {

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
#[component] #[component]

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::{ev, html, prelude::*};
use thaw_utils::{class_list, mount_style, ComponentRef, Model, OptionalProp}; use thaw_utils::{class_list, mount_style, ComponentRef, Model, OptionalProp};
#[derive(Default, Clone)] #[derive(Default, Clone)]
@ -45,16 +45,16 @@ pub fn Input(
#[prop(optional)] input_suffix: Option<InputSuffix>, #[prop(optional)] input_suffix: Option<InputSuffix>,
#[prop(optional)] comp_ref: ComponentRef<InputRef>, #[prop(optional)] comp_ref: ComponentRef<InputRef>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>, #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("input", include_str!("./input.css")); mount_style("input", include_str!("./input.css"));
let value_trigger = Trigger::new(); let value_trigger = ArcTrigger::new();
let on_input = move |ev| { let on_input = move |ev| {
let input_value = event_target_value(&ev); let input_value = event_target_value(&ev);
if let Some(allow_value) = allow_value.as_ref() { if let Some(allow_value) = allow_value.as_ref() {
if !allow_value.call(input_value.clone()) { if !allow_value.call(input_value.clone()) {
value_trigger.notify(); value_trigger.trigger();
return; return;
} }
} }
@ -75,9 +75,7 @@ pub fn Input(
}; };
let input_ref = NodeRef::<html::Input>::new(); let input_ref = NodeRef::<html::Input>::new();
input_ref.on_load(move |_| { comp_ref.load(InputRef { input_ref });
comp_ref.load(InputRef { input_ref });
});
let on_mousedown = move |event: ev::MouseEvent| { let on_mousedown = move |event: ev::MouseEvent| {
let el: web_sys::HtmlElement = event_target(&event); let el: web_sys::HtmlElement = event_target(&event);
@ -102,18 +100,18 @@ pub fn Input(
input_value = None; input_value = None;
} }
#[cfg(debug_assertions)] // #[cfg(debug_assertions)]
{ // {
const INNER_ATTRS: [&str; 4] = ["type", "class", "disabled", "placeholder"]; // const INNER_ATTRS: [&str; 4] = ["type", "class", "disabled", "placeholder"];
attrs.iter().for_each(|attr| { // attrs.iter().for_each(|attr| {
if INNER_ATTRS.contains(&attr.0) { // if INNER_ATTRS.contains(&attr.0) {
logging::warn!( // logging::warn!(
"Thaw: The '{}' attribute already exists on elements inside the Input component, which may cause conflicts.", // "Thaw: The '{}' attribute already exists on elements inside the Input component, which may cause conflicts.",
attr.0 // attr.0
); // );
} // }
}); // });
} // }
view! { view! {
<span <span
@ -134,7 +132,6 @@ pub fn Input(
}} }}
<input <input
{..attrs}
type=move || variant.get().as_str() type=move || variant.get().as_str()
value=input_value value=input_value
prop:value=move || { prop:value=move || {
@ -148,7 +145,7 @@ pub fn Input(
class="thaw-input__input" class="thaw-input__input"
disabled=move || disabled.get() disabled=move || disabled.get()
placeholder=placeholder.map(|p| move || p.get()) placeholder=placeholder.map(|p| move || p.get())
ref=input_ref node_ref=input_ref
/> />
{if let Some(suffix) = input_suffix.and_then(|suffix| suffix.if_.then_some(suffix)) { {if let Some(suffix) = input_suffix.and_then(|suffix| suffix.if_.then_some(suffix)) {

2
thaw/src/layout/layout_header.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, OptionalProp}; use thaw_utils::{class_list, OptionalProp};
#[component] #[component]

2
thaw/src/layout/layout_sider.rs
View file

@ -1,5 +1,5 @@
use crate::Scrollbar; use crate::Scrollbar;
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};
#[component] #[component]

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

@ -5,7 +5,7 @@ pub use layout_header::*;
pub use layout_sider::*; pub use layout_sider::*;
use crate::Scrollbar; use crate::Scrollbar;
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};
#[derive(Default, PartialEq)] #[derive(Default, PartialEq)]
@ -36,7 +36,7 @@ pub fn Layout(
) -> impl IntoView { ) -> impl IntoView {
mount_style("layout", include_str!("./layout.css")); mount_style("layout", include_str!("./layout.css"));
let sider_style = create_memo(move |_| { let sider_style = Memo::new(move |_| {
if has_sider.get() { if has_sider.get() {
Some("display: flex; flex-wrap: nowrap; flex-direction: row; width: 100%;") Some("display: flex; flex-wrap: nowrap; flex-direction: row; width: 100%;")
} else { } else {

2
thaw/src/lib.rs
View file

@ -89,7 +89,7 @@ pub use table::*;
pub use tag::*; pub use tag::*;
pub use text::*; pub use text::*;
pub use textarea::*; pub use textarea::*;
pub use thaw_utils::{create_component_ref, ComponentRef, SignalWatch}; pub use thaw_utils::{ComponentRef, SignalWatch};
pub use theme::*; pub use theme::*;
pub use time_picker::*; pub use time_picker::*;
pub use toast::*; pub use toast::*;

2
thaw/src/loading_bar/loading_bar_provider.rs
View file

@ -1,5 +1,5 @@
use super::{LoadingBar, LoadingBarRef}; use super::{LoadingBar, LoadingBarRef};
use leptos::*; use leptos::{context::Provider, prelude::*};
use thaw_components::Teleport; use thaw_components::Teleport;
use thaw_utils::ComponentRef; use thaw_utils::ComponentRef;

37
thaw/src/loading_bar/mod.rs
View file

@ -3,7 +3,7 @@ mod loading_bar_provider;
pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider}; pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider};
use crate::ConfigInjection; use crate::ConfigInjection;
use leptos::*; use leptos::{html, prelude::*};
use thaw_utils::{mount_style, ComponentRef}; use thaw_utils::{mount_style, ComponentRef};
#[derive(Clone)] #[derive(Clone)]
@ -35,17 +35,15 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
let start = Callback::new(move |_| { let start = Callback::new(move |_| {
loading.set(true); loading.set(true);
if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() { if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
let loading_bar_ref = loading_bar_ref loading_bar_ref.style(("background-color", "var(--colorStatusSuccessForeground1)"));
.style("background-color", "var(--colorStatusSuccessForeground1)") loading_bar_ref.style(("transition", "none"));
.style("transition", "none") loading_bar_ref.style(("max-width", "0"));
.style("max-width", "0");
_ = loading_bar_ref.offset_width(); _ = loading_bar_ref.offset_width();
_ = loading_bar_ref loading_bar_ref.style(("transition", "max-width 4s linear"));
.style("transition", "max-width 4s linear") loading_bar_ref.style(("max-width", "80%"));
.style("max-width", "80%");
} }
}); });
let is_on_transitionend = store_value(false); let is_on_transitionend = StoredValue::new(false);
let on_transitionend = move |_| { let on_transitionend = move |_| {
if is_on_transitionend.get_value() { if is_on_transitionend.get_value() {
is_on_transitionend.set_value(false); is_on_transitionend.set_value(false);
@ -54,10 +52,9 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
}; };
let finish = Callback::new(move |_| { let finish = Callback::new(move |_| {
if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() { if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
_ = loading_bar_ref loading_bar_ref.style(("background-color", "var(--colorStatusSuccessForeground1)"));
.style("background-color", "var(--colorStatusSuccessForeground1)") loading_bar_ref.style(("transition", "max-width 0.5s linear"));
.style("transition", "max-width 0.5s linear") loading_bar_ref.style(("max-width", "100%"));
.style("max-width", "100%");
is_on_transitionend.set_value(true); is_on_transitionend.set_value(true);
} }
}); });
@ -66,15 +63,13 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
if !loading.get() { if !loading.get() {
loading.set(true); loading.set(true);
let loading_bar_ref = loading_bar_ref.clone(); let loading_bar_ref = loading_bar_ref.clone();
let loading_bar_ref = loading_bar_ref loading_bar_ref.style(("transition", "none"));
.style("transition", "none") loading_bar_ref.style(("max-width", "0"));
.style("max-width", "0");
_ = loading_bar_ref.offset_width(); _ = loading_bar_ref.offset_width();
} }
_ = loading_bar_ref loading_bar_ref.style(("background-color", "var(--colorStatusDangerForeground1)"));
.style("background-color", "var(--colorStatusDangerForeground1)") loading_bar_ref.style(("transition", "max-width 0.5s linear"));
.style("transition", "max-width 0.5s linear") loading_bar_ref.style(("max-width", "100%"));
.style("max-width", "100%");
is_on_transitionend.set_value(true); is_on_transitionend.set_value(true);
} }
}); });
@ -92,7 +87,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
> >
<div <div
class="thaw-loading-bar" class="thaw-loading-bar"
ref=loading_bar_ref node_ref=loading_bar_ref
on:transitionend=on_transitionend on:transitionend=on_transitionend
></div> ></div>
</div> </div>

4
thaw/src/message/message_provider.rs
View file

@ -1,5 +1,5 @@
use super::{Message, MessageVariant}; use super::{Message, MessageVariant};
use leptos::*; use leptos::{context::Provider, prelude::*};
use std::time::Duration; use std::time::Duration;
use thaw_components::Teleport; use thaw_components::Teleport;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
@ -36,7 +36,7 @@ pub fn MessageProvider(
) -> impl IntoView { ) -> impl IntoView {
mount_style("message", include_str!("./message.css")); mount_style("message", include_str!("./message.css"));
let message_list = create_rw_signal::<Vec<MessageType>>(vec![]); let message_list = RwSignal::<Vec<MessageType>>::new(vec![]);
let handle_after_leave = move |id| { let handle_after_leave = move |id| {
message_list.update(move |message_list| { message_list.update(move |message_list| {

24
thaw/src/message/mod.rs
View file

@ -3,7 +3,7 @@ mod message_provider;
pub use message_provider::*; pub use message_provider::*;
use crate::{Icon, Theme}; use crate::{Icon, Theme};
use leptos::*; use leptos::{html, prelude::*};
use thaw_components::{CSSTransition, If, Then}; use thaw_components::{CSSTransition, If, Then};
use uuid::Uuid; use uuid::Uuid;
@ -48,7 +48,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
} }
// let theme = use_theme(Theme::light); // let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| { let css_vars = Memo::new(move |_| {
let mut css_vars = String::new(); let mut css_vars = String::new();
// theme.with(|theme| { // theme.with(|theme| {
// css_vars.push_str(&format!( // css_vars.push_str(&format!(
@ -61,17 +61,17 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
// let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme))); // let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
let on_before_leave = Callback::new(move |_| { let on_before_leave = Callback::new(move |_| {
let Some(node_el) = message_ref.get() else { // let Some(node_el) = message_ref.get() else {
return; // return;
}; // };
use std::ops::Deref; // use std::ops::Deref;
let any_el = node_el.into_any(); // let any_el = node_el.into_any();
let el = any_el.deref(); // let el = any_el.deref();
let style = el.style(); // let style = el.style();
let _ = style.set_property("max-height", &format!("{}px", el.offset_height())); // let _ = style.set_property("max-height", &format!("{}px", el.offset_height()));
}); });
let on_after_leave = Callback::new(move |_| { let on_after_leave = Callback::new(move |_| {
queue_microtask(move || on_close.call(id)); // queue_microtask(move || on_close.call(id));
}); });
view! { view! {
@ -84,7 +84,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
on_after_leave=on_after_leave on_after_leave=on_after_leave
let:_ let:_
> >
<div class="thaw-message-wrapper" ref=message_ref> <div class="thaw-message-wrapper" node_ref=message_ref>
<div class="thaw-message" style=move || css_vars.get()> <div class="thaw-message" style=move || css_vars.get()>
<div class="thaw-message__icon"> <div class="thaw-message__icon">
<Icon icon=variant.icon()/> <Icon icon=variant.icon()/>

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, StoredMaybeSignal}; use thaw_utils::{class_list, mount_style, StoredMaybeSignal};
#[component] #[component]

2
thaw/src/message_bar/message_bar_actions.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn MessageBarActions( pub fn MessageBarActions(

2
thaw/src/message_bar/message_bar_body.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn MessageBarBody(children: Children) -> impl IntoView { pub fn MessageBarBody(children: Children) -> impl IntoView {

2
thaw/src/message_bar/message_bar_title.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn MessageBarTitle(children: Children) -> impl IntoView { pub fn MessageBarTitle(children: Children) -> impl IntoView {

2
thaw/src/nav/nav_drawer.rs
View file

@ -1,5 +1,5 @@
use crate::Scrollbar; use crate::Scrollbar;
use leptos::*; use leptos::{context::Provider, prelude::*};
use thaw_components::OptionComp; use thaw_components::OptionComp;
use thaw_utils::{mount_style, Model}; use thaw_utils::{mount_style, Model};

2
thaw/src/nav/nav_item.rs
View file

@ -1,5 +1,5 @@
use crate::use_nav_drawer; use crate::use_nav_drawer;
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, StoredMaybeSignal}; use thaw_utils::{class_list, StoredMaybeSignal};
#[component] #[component]

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

@ -1,5 +1,5 @@
use crate::ConfigInjection; use crate::ConfigInjection;
use leptos::{leptos_dom::helpers::TimeoutHandle, *}; use leptos::{ev, html, leptos_dom::helpers::TimeoutHandle, prelude::*};
use std::time::Duration; use std::time::Duration;
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement}; use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
use thaw_utils::{add_event_listener, class_list, mount_style}; use thaw_utils::{add_event_listener, class_list, mount_style};
@ -77,7 +77,7 @@ pub fn Popover(
let Some(popover_el) = popover_ref.get_untracked() else { let Some(popover_el) = popover_ref.get_untracked() else {
break; break;
}; };
if current_el == ***popover_el { if current_el == popover_el {
return; return;
} }
el = current_el.parent_element(); el = current_el.parent_element();
@ -105,7 +105,7 @@ pub fn Popover(
<Binder target_ref> <Binder target_ref>
<div <div
class=class_list!["thaw-popover-trigger", trigger_class] class=class_list!["thaw-popover-trigger", trigger_class]
ref=target_ref node_ref=target_ref
on:mouseenter=on_mouse_enter on:mouseenter=on_mouse_enter
on:mouseleave=on_mouse_leave on:mouseleave=on_mouse_leave
> >
@ -128,7 +128,7 @@ pub fn Popover(
data-thaw-id=config_provider.id().clone() data-thaw-id=config_provider.id().clone()
style=move || display.get() style=move || display.get()
ref=popover_ref node_ref=popover_ref
on:mouseenter=on_mouse_enter on:mouseenter=on_mouse_enter
on:mouseleave=on_mouse_leave on:mouseleave=on_mouse_leave
> >

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
#[component] #[component]

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};
#[component] #[component]
@ -29,11 +29,7 @@ pub fn ProgressCircle(
let fill_stroke_dasharray = Memo::new(move |_| { let fill_stroke_dasharray = Memo::new(move |_| {
let percentage = value.get().max(0.0).min(100.0); let percentage = value.get().max(0.0).min(100.0);
format!( format!("{}px {}px", percentage / 100.0 * len, view_box_width * 8)
"{}px {}px",
percentage / 100.0 * len,
view_box_width * 8
)
}); });
let fill_stroke_color = move || match color.get() { let fill_stroke_color = move || match color.get() {
ProgressCircleColor::Brand => "var(--colorCompoundBrandBackground)", ProgressCircleColor::Brand => "var(--colorCompoundBrandBackground)",
@ -78,13 +74,13 @@ pub fn ProgressCircle(
</svg> </svg>
{if let Some(children) = children { {if let Some(children) = children {
view! { <div class="thaw-progress-circle__content">{children()}</div> } view! { <div class="thaw-progress-circle__content">{children()}</div> }.into_any()
} else { } else {
view! { view! {
<div class="thaw-progress-circle__content thaw-progress-circle__content--text"> <div class="thaw-progress-circle__content thaw-progress-circle__content--text">
{move || value.get()} "%" {move || value.get()} "%"
</div> </div>
} }.into_any()
}} }}
</div> </div>

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

@ -2,7 +2,7 @@ mod radio_group;
pub use radio_group::RadioGroup; pub use radio_group::RadioGroup;
use leptos::*; use leptos::prelude::*;
use radio_group::RadioGroupInjection; use radio_group::RadioGroupInjection;
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};

2
thaw/src/radio/radio_group.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::{context::Provider, prelude::*};
use thaw_utils::Model; use thaw_utils::Model;
#[component] #[component]

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

@ -1,4 +1,4 @@
use leptos::{leptos_dom::helpers::WindowListenerHandle, *}; use leptos::{ev, html, leptos_dom::helpers::WindowListenerHandle, prelude::*};
use thaw_utils::{class_list, mount_style, ComponentRef, OptionalProp}; use thaw_utils::{class_list, mount_style, ComponentRef, OptionalProp};
#[component] #[component]
@ -266,7 +266,7 @@ pub fn Scrollbar(
on:mouseleave=on_mouseleave on:mouseleave=on_mouseleave
> >
<div class="thaw-scrollbar__container" ref=container_ref on:scroll=on_scroll> <div class="thaw-scrollbar__container" node_ref=container_ref on:scroll=on_scroll>
<div <div
class=class_list![ class=class_list![
"thaw-scrollbar__content", content_class.map(| c | move || c.get()) "thaw-scrollbar__content", content_class.map(| c | move || c.get())
@ -279,12 +279,12 @@ pub fn Scrollbar(
) )
} }
ref=content_ref node_ref=content_ref
> >
{children()} {children()}
</div> </div>
</div> </div>
<div class="thaw-scrollbar__track--vertical" ref=y_track_ref> <div class="thaw-scrollbar__track--vertical" node_ref=y_track_ref>
<div <div
class="thaw-scrollabr__thumb" class="thaw-scrollabr__thumb"
style:display=move || (!is_show_y_thumb.get()).then_some("none") style:display=move || (!is_show_y_thumb.get()).then_some("none")
@ -293,7 +293,7 @@ pub fn Scrollbar(
on:mousedown=on_y_thumb_mousedown on:mousedown=on_y_thumb_mousedown
></div> ></div>
</div> </div>
<div class="thaw-scrollbar__track--horizontal" ref=x_track_ref> <div class="thaw-scrollbar__track--horizontal" node_ref=x_track_ref>
<div <div
class="thaw-scrollabr__thumb" class="thaw-scrollabr__thumb"
style:display=move || (!is_show_x_thumb.get()).then_some("none") style:display=move || (!is_show_x_thumb.get()).then_some("none")

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn Skeleton(children: Children) -> impl IntoView { pub fn Skeleton(children: Children) -> impl IntoView {

2
thaw/src/skeleton/skeleton_item.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::mount_style; use thaw_utils::mount_style;
#[component] #[component]

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

@ -2,7 +2,7 @@ mod slider_label;
pub use slider_label::SliderLabel; pub use slider_label::SliderLabel;
use leptos::*; use leptos::{context::Provider, ev, prelude::*};
use thaw_components::OptionComp; use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style, Model, OptionalProp}; use thaw_utils::{class_list, mount_style, Model, OptionalProp};

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::mount_style; use thaw_utils::mount_style;
use crate::SliderInjection; use crate::SliderInjection;

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
#[derive(Default)] #[derive(Default)]

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use num_traits::Bounded; use num_traits::Bounded;
use std::ops::{Add, Sub}; use std::ops::{Add, Sub};
use std::str::FromStr; use std::str::FromStr;
@ -13,6 +13,7 @@ pub fn SpinButton<T>(
#[prop(optional, into)] disabled: MaybeSignal<bool>, #[prop(optional, into)] disabled: MaybeSignal<bool>,
) -> impl IntoView ) -> impl IntoView
where where
T: Send + Sync,
T: Add<Output = T> + Sub<Output = T> + PartialOrd + Bounded, T: Add<Output = T> + Sub<Output = T> + PartialOrd + Bounded,
T: Default + Clone + FromStr + ToString + 'static, T: Default + Clone + FromStr + ToString + 'static,
{ {

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
#[derive(Default, Clone)] #[derive(Default, Clone)]

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::{html, prelude::*};
use thaw_utils::{class_list, mount_style, Model, OptionalProp}; use thaw_utils::{class_list, mount_style, Model, OptionalProp};
#[component] #[component]
@ -29,7 +29,7 @@ pub fn Switch(
type="checkbox" type="checkbox"
id=id.clone() id=id.clone()
checked=checked.get_untracked() checked=checked.get_untracked()
ref=input_ref node_ref=input_ref
on:change=on_change on:change=on_change
/> />
<div aria-hidden="true" class="thaw-switch__indicator thaw-switch__button"> <div aria-hidden="true" class="thaw-switch__indicator thaw-switch__button">

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

@ -2,7 +2,7 @@ mod tab;
pub use tab::*; pub use tab::*;
use leptos::*; use leptos::{context::Provider, html, prelude::*};
use std::collections::HashMap; use std::collections::HashMap;
use thaw_utils::{class_list, mount_style, Model}; use thaw_utils::{class_list, mount_style, Model};

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

@ -1,5 +1,5 @@
use super::{TabListInjection, TabRegisterData}; use super::{TabListInjection, TabRegisterData};
use leptos::*; use leptos::{html, prelude::*};
use std::ops::Deref; use std::ops::Deref;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
@ -66,7 +66,7 @@ pub fn Tab(
] ]
role="tab" role="tab"
aria-selected=move || if selected.get() { "true" } else { "false" } aria-selected=move || if selected.get() { "true" } else { "false" }
ref=tab_ref node_ref=tab_ref
on:click=on_select on:click=on_select
> >
<span class="thaw-tab__content"> <span class="thaw-tab__content">

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_components::OptionComp; use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};

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

@ -1,5 +1,5 @@
use crate::Icon; use crate::Icon;
use leptos::*; use leptos::{ev, prelude::*};
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};
#[derive(Clone, Copy, Default, PartialEq, Eq, Hash)] #[derive(Clone, Copy, Default, PartialEq, Eq, Hash)]

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::{prelude::*, tachys::view::any_view::IntoAny};
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
#[component] #[component]
@ -62,79 +62,79 @@ pub fn Text(
{children()} {children()}
</b> </b>
} }
.into_view(), .into_any(),
TextTag::Em => view! { TextTag::Em => view! {
<em class=class_list!["thaw-text", class] style=move || style.get()> <em class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</em> </em>
} }
.into_view(), .into_any(),
TextTag::H1 => view! { TextTag::H1 => view! {
<h1 class=class_list!["thaw-text", class] style=move || style.get()> <h1 class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</h1> </h1>
} }
.into_view(), .into_any(),
TextTag::H2 => view! { TextTag::H2 => view! {
<h2 class=class_list!["thaw-text", class] style=move || style.get()> <h2 class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</h2> </h2>
} }
.into_view(), .into_any(),
TextTag::H3 => view! { TextTag::H3 => view! {
<h3 class=class_list!["thaw-text", class] style=move || style.get()> <h3 class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</h3> </h3>
} }
.into_view(), .into_any(),
TextTag::H4 => view! { TextTag::H4 => view! {
<h4 class=class_list!["thaw-text", class] style=move || style.get()> <h4 class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</h4> </h4>
} }
.into_view(), .into_any(),
TextTag::H5 => view! { TextTag::H5 => view! {
<h5 class=class_list!["thaw-text", class] style=move || style.get()> <h5 class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</h5> </h5>
} }
.into_view(), .into_any(),
TextTag::H6 => view! { TextTag::H6 => view! {
<h6 class=class_list!["thaw-text", class] style=move || style.get()> <h6 class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</h6> </h6>
} }
.into_view(), .into_any(),
TextTag::I => view! { TextTag::I => view! {
<i class=class_list!["thaw-text", class] style=move || style.get()> <i class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</i> </i>
} }
.into_view(), .into_any(),
TextTag::P => view! { TextTag::P => view! {
<p class=class_list!["thaw-text", class] style=move || style.get()> <p class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</p> </p>
} }
.into_view(), .into_any(),
TextTag::Pre => view! { TextTag::Pre => view! {
<pre class=class_list!["thaw-text", class] style=move || style.get()> <pre class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</pre> </pre>
} }
.into_view(), .into_any(),
TextTag::Span => view! { TextTag::Span => view! {
<span class=class_list!["thaw-text", class] style=move || style.get()> <span class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</span> </span>
} }
.into_view(), .into_any(),
TextTag::Strong => view! { TextTag::Strong => view! {
<strong class=class_list!["thaw-text", class] style=move || style.get()> <strong class=class_list!["thaw-text", class] style=move || style.get()>
{children()} {children()}
</strong> </strong>
} }
.into_view(), .into_any(),
} }
} }

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::{ev, html, prelude::*};
use thaw_utils::{class_list, mount_style, ComponentRef, Model}; use thaw_utils::{class_list, mount_style, ComponentRef, Model};
#[component] #[component]
@ -14,16 +14,16 @@ pub fn Textarea(
resize: MaybeSignal<TextareaResize>, resize: MaybeSignal<TextareaResize>,
#[prop(optional)] comp_ref: ComponentRef<TextareaRef>, #[prop(optional)] comp_ref: ComponentRef<TextareaRef>,
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("textarea", include_str!("./textarea.css")); mount_style("textarea", include_str!("./textarea.css"));
let value_trigger = Trigger::new(); let value_trigger = ArcTrigger::new();
let on_input = move |ev| { let on_input = move |ev| {
let input_value = event_target_value(&ev); let input_value = event_target_value(&ev);
if let Some(allow_value) = allow_value.as_ref() { if let Some(allow_value) = allow_value.as_ref() {
if !allow_value.call(input_value.clone()) { if !allow_value.call(input_value.clone()) {
value_trigger.notify(); value_trigger.trigger();
return; return;
} }
} }
@ -41,22 +41,20 @@ pub fn Textarea(
}; };
let textarea_ref = NodeRef::<html::Textarea>::new(); let textarea_ref = NodeRef::<html::Textarea>::new();
textarea_ref.on_load(move |_| { comp_ref.load(TextareaRef { textarea_ref });
comp_ref.load(TextareaRef { textarea_ref });
});
#[cfg(debug_assertions)] // #[cfg(debug_assertions)]
{ // {
const INNER_ATTRS: [&str; 3] = ["class", "disabled", "placeholder"]; // const INNER_ATTRS: [&str; 3] = ["class", "disabled", "placeholder"];
attrs.iter().for_each(|attr| { // attrs.iter().for_each(|attr| {
if INNER_ATTRS.contains(&attr.0) { // if INNER_ATTRS.contains(&attr.0) {
logging::warn!( // logging::warn!(
"Thaw: The '{}' attribute already exists on elements inside the TextArea component, which may cause conflicts.", // "Thaw: The '{}' attribute already exists on elements inside the TextArea component, which may cause conflicts.",
attr.0 // attr.0
); // );
} // }
}); // });
} // }
view! { view! {
<span <span
@ -68,7 +66,6 @@ pub fn Textarea(
] ]
> >
<textarea <textarea
{..attrs}
prop:value=move || { prop:value=move || {
value_trigger.track(); value_trigger.track();
value.get() value.get()
@ -80,7 +77,7 @@ pub fn Textarea(
class="thaw-textarea__textarea" class="thaw-textarea__textarea"
disabled=move || disabled.get() disabled=move || disabled.get()
placeholder=move || placeholder.get() placeholder=move || placeholder.get()
ref=textarea_ref node_ref=textarea_ref
></textarea> ></textarea>
</span> </span>
} }

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

@ -4,7 +4,7 @@ mod common;
use crate::ConfigInjection; use crate::ConfigInjection;
pub use color::ColorTheme; pub use color::ColorTheme;
pub use common::CommonTheme; pub use common::CommonTheme;
use leptos::*; use leptos::prelude::*;
#[derive(Clone)] #[derive(Clone)]
pub struct Theme { pub struct Theme {

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

@ -3,7 +3,7 @@ use crate::{
SignalWatch, SignalWatch,
}; };
use chrono::{Local, NaiveTime, Timelike}; use chrono::{Local, NaiveTime, Timelike};
use leptos::*; use leptos::{ev, html, prelude::*};
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement}; use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
use thaw_utils::{mount_style, ComponentRef, Model, OptionalProp}; use thaw_utils::{mount_style, ComponentRef, Model, OptionalProp};
@ -11,7 +11,7 @@ use thaw_utils::{mount_style, ComponentRef, Model, OptionalProp};
pub fn TimePicker( pub fn TimePicker(
#[prop(optional, into)] value: Model<Option<NaiveTime>>, #[prop(optional, into)] value: Model<Option<NaiveTime>>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>, #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("time-picker", include_str!("./time-picker.css")); mount_style("time-picker", include_str!("./time-picker.css"));
let time_picker_ref = NodeRef::<html::Div>::new(); let time_picker_ref = NodeRef::<html::Div>::new();
@ -70,8 +70,8 @@ pub fn TimePicker(
view! { view! {
<Binder target_ref=time_picker_ref> <Binder target_ref=time_picker_ref>
<div ref=time_picker_ref> <div node_ref=time_picker_ref>
<Input attrs class value=show_time_text on_focus=open_panel on_blur=on_input_blur> <Input class value=show_time_text on_focus=open_panel on_blur=on_input_blur>
<InputSuffix slot> <InputSuffix slot>
<Icon icon=icondata_ai::AiClockCircleOutlined style="font-size: 18px"/> <Icon icon=icondata_ai::AiClockCircleOutlined style="font-size: 18px"/>
</InputSuffix> </InputSuffix>
@ -160,7 +160,7 @@ fn Panel(
class="thaw-config-provider thaw-time-picker-panel" class="thaw-config-provider thaw-time-picker-panel"
data-thaw-id=config_provider.id().clone() data-thaw-id=config_provider.id().clone()
style=move || display.get() style=move || display.get()
ref=panel_ref node_ref=panel_ref
> >
<div class="thaw-time-picker-panel__time"> <div class="thaw-time-picker-panel__time">
<div class="thaw-time-picker-panel__time-hour"> <div class="thaw-time-picker-panel__time-hour">
@ -317,7 +317,7 @@ fn PanelTimeItem(
is_selected: Memo<bool>, is_selected: Memo<bool>,
comp_ref: ComponentRef<PanelTimeItemRef>, comp_ref: ComponentRef<PanelTimeItemRef>,
) -> impl IntoView { ) -> impl IntoView {
let item_ref = create_node_ref(); let item_ref = NodeRef::new();
item_ref.on_load(move |_| { item_ref.on_load(move |_| {
let item_ref = PanelTimeItemRef { item_ref }; let item_ref = PanelTimeItemRef { item_ref };
comp_ref.load(item_ref); comp_ref.load(item_ref);
@ -326,7 +326,7 @@ fn PanelTimeItem(
<div <div
class="thaw-time-picker-panel__time-item" class="thaw-time-picker-panel__time-item"
class=("thaw-time-picker-panel__time-item--slected", move || is_selected.get()) class=("thaw-time-picker-panel__time-item--slected", move || is_selected.get())
ref=item_ref node_ref=item_ref
> >
{format!("{value:02}")} {format!("{value:02}")}

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

@ -5,17 +5,18 @@ mod toast_title;
mod toaster; mod toaster;
mod toaster_provider; mod toaster_provider;
use tachys::view::any_view::AnyView;
pub use toast::*; pub use toast::*;
pub use toast_title::*; pub use toast_title::*;
pub use toaster_provider::*; pub use toaster_provider::*;
use leptos::{html::AnyElement, *}; use leptos::prelude::*;
use std::sync::mpsc::{channel, Receiver, Sender, TryIter}; use std::sync::mpsc::{channel, Receiver, Sender, TryIter};
#[derive(Clone)] #[derive(Clone)]
pub struct ToasterInjection { pub struct ToasterInjection {
sender: Sender<(HtmlElement<AnyElement>, ToastOptions)>, sender: Sender<(AnyView<Dom>, ToastOptions)>,
trigger: Trigger, trigger: ArcTrigger,
} }
impl ToasterInjection { impl ToasterInjection {
@ -24,8 +25,8 @@ impl ToasterInjection {
} }
pub fn channel() -> (Self, ToasterReceiver) { pub fn channel() -> (Self, ToasterReceiver) {
let (sender, receiver) = channel::<(HtmlElement<AnyElement>, ToastOptions)>(); let (sender, receiver) = channel::<(AnyView<Dom>, ToastOptions)>();
let trigger = Trigger::new(); let trigger = ArcTrigger::new();
( (
Self { sender, trigger }, Self { sender, trigger },
@ -33,26 +34,23 @@ impl ToasterInjection {
) )
} }
pub fn dispatch_toast(&self, any_element: HtmlElement<AnyElement>, options: ToastOptions) { pub fn dispatch_toast(&self, any_view: AnyView<Dom>, options: ToastOptions) {
self.sender.send((any_element, options)).unwrap(); self.sender.send((any_view, options)).unwrap();
self.trigger.notify(); self.trigger.trigger();
} }
} }
pub struct ToasterReceiver { pub struct ToasterReceiver {
receiver: Receiver<(HtmlElement<AnyElement>, ToastOptions)>, receiver: Receiver<(AnyView<Dom>, ToastOptions)>,
trigger: Trigger, trigger: ArcTrigger,
} }
impl ToasterReceiver { impl ToasterReceiver {
pub fn new( pub fn new(receiver: Receiver<(AnyView<Dom>, ToastOptions)>, trigger: ArcTrigger) -> Self {
receiver: Receiver<(HtmlElement<AnyElement>, ToastOptions)>,
trigger: Trigger,
) -> Self {
Self { receiver, trigger } Self { receiver, trigger }
} }
pub fn try_recv(&self) -> TryIter<'_, (HtmlElement<AnyElement>, ToastOptions)> { pub fn try_recv(&self) -> TryIter<'_, (AnyView<Dom>, ToastOptions)> {
self.trigger.track(); self.trigger.track();
self.receiver.try_iter() self.receiver.try_iter()
} }

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

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn Toast(children: Children) -> impl IntoView { pub fn Toast(children: Children) -> impl IntoView {

2
thaw/src/toast/toast_body.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_components::OptionComp; use thaw_components::OptionComp;
#[component] #[component]

2
thaw/src/toast/toast_footer.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
#[component] #[component]
pub fn ToastFooter(children: Children) -> impl IntoView { pub fn ToastFooter(children: Children) -> impl IntoView {

2
thaw/src/toast/toast_title.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_components::OptionComp; use thaw_components::OptionComp;
#[component] #[component]

2
thaw/src/toast/toaster.rs
View file

@ -1,5 +1,5 @@
use super::{ToastPosition, ToasterReceiver}; use super::{ToastPosition, ToasterReceiver};
use leptos::*; use leptos::prelude::*;
use thaw_components::Teleport; use thaw_components::Teleport;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};

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

@ -1,5 +1,5 @@
use super::{toaster::Toaster, ToastPosition, ToasterInjection}; use super::{toaster::Toaster, ToastPosition, ToasterInjection};
use leptos::*; use leptos::{context::Provider, prelude::*};
#[component] #[component]
pub fn ToasterProvider( pub fn ToasterProvider(

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

@ -3,7 +3,7 @@ mod upload_dragger;
pub use upload_dragger::UploadDragger; pub use upload_dragger::UploadDragger;
pub use web_sys::FileList; pub use web_sys::FileList;
use leptos::*; use leptos::{ev, html, prelude::*};
use thaw_utils::{add_event_listener, mount_style}; use thaw_utils::{add_event_listener, mount_style};
#[component] #[component]
@ -15,8 +15,8 @@ pub fn Upload(
) -> impl IntoView { ) -> impl IntoView {
mount_style("upload", include_str!("./upload.css")); mount_style("upload", include_str!("./upload.css"));
let input_ref = create_node_ref::<html::Input>(); let input_ref = NodeRef::<html::Input>::new();
let trigger_ref = create_node_ref::<html::Div>(); let trigger_ref = NodeRef::<html::Div>::new();
trigger_ref.on_load(move |trigger_ref| { trigger_ref.on_load(move |trigger_ref| {
let handle = add_event_listener(trigger_ref.into_any(), ev::click, move |_| { let handle = add_event_listener(trigger_ref.into_any(), ev::click, move |_| {
@ -44,7 +44,7 @@ pub fn Upload(
} }
}; };
let is_trigger_dragover = create_rw_signal(false); let is_trigger_dragover = RwSignal::new(false);
let on_trigger_drop = move |event: ev::DragEvent| { let on_trigger_drop = move |event: ev::DragEvent| {
event.prevent_default(); event.prevent_default();
if let Some(data) = event.data_transfer() { if let Some(data) = event.data_transfer() {
@ -73,7 +73,7 @@ pub fn Upload(
> >
<input <input
class="thaw-upload__input" class="thaw-upload__input"
ref=input_ref node_ref=input_ref
type="file" type="file"
accept=move || accept.get() accept=move || accept.get()
multiple=move || multiple.get() multiple=move || multiple.get()
@ -81,7 +81,7 @@ pub fn Upload(
/> />
<div <div
class="thaw-upload__trigger" class="thaw-upload__trigger"
ref=trigger_ref node_ref=trigger_ref
on:drop=on_trigger_drop on:drop=on_trigger_drop
on:dragover=on_trigger_dragover on:dragover=on_trigger_dragover
on:dragenter=on_trigger_dragenter on:dragenter=on_trigger_dragenter

2
thaw/src/upload/upload_dragger.rs
View file

@ -1,4 +1,4 @@
use leptos::*; use leptos::prelude::*;
use thaw_utils::mount_style; use thaw_utils::mount_style;
#[component] #[component]