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

feat: 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 leptos::*;
use leptos::{html, prelude::*};
use thaw_components::OptionComp;
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(
move || is_active.get(),
move |is_active, _, _| {
@ -70,7 +73,7 @@ pub fn AnchorLink(
href=href
class="thaw-anchor-link__title"
on:click=on_click
ref=title_ref
node_ref=title_ref
title=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;
use leptos::*;
use leptos::{context::Provider, ev, html, prelude::*};
use std::cmp::Ordering;
use thaw_utils::{add_event_listener_with_bool, class_list, mount_style, throttle, OptionalProp};
use web_sys::{DomRect, Element};
@ -87,7 +87,7 @@ pub fn Anchor(
view! {
<div
class=class_list!["thaw-anchor", class.map(| c | move || c.get())]
ref=anchor_ref
node_ref=anchor_ref
>
<div class="thaw-anchor-rail">
<div
@ -97,7 +97,7 @@ pub fn Anchor(
move || active_id.with(|id| id.is_some()),
)
ref=bar_ref
node_ref=bar_ref
></div>
</div>
<Provider value=AnchorInjection::new(
@ -164,9 +164,8 @@ impl AnchorInjection {
let offset_top = title_rect.top() - anchor_rect.top();
// let offset_left = title_rect.left() - anchor_rect.left();
let _ = bar_el
.style("top", format!("{}px", offset_top))
.style("height", format!("{}px", title_rect.height()));
bar_el.style(("top", format!("{}px", offset_top)));
bar_el.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 leptos::*;
use leptos::prelude::*;
#[component]
pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
@ -11,7 +11,7 @@ pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
<div
class="thaw-auto-complete-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())
>
{children()}

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

@ -3,7 +3,7 @@ mod auto_complete_option;
pub use auto_complete_option::AutoCompleteOption;
use crate::{ComponentRef, ConfigInjection, Input, InputPrefix, InputRef, InputSuffix};
use leptos::*;
use leptos::{prelude::*, html};
use thaw_components::{
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 select_option_index = create_rw_signal::<Option<usize>>(default_index);
let menu_ref = create_node_ref::<html::Div>();
let is_show_menu = create_rw_signal(false);
let auto_complete_ref = create_node_ref::<html::Div>();
let select_option_index = RwSignal::<Option<usize>>::new(default_index);
let menu_ref = NodeRef::<html::Div>::new();
let is_show_menu = RwSignal::new(false);
let auto_complete_ref = NodeRef::<html::Div>::new();
let open_menu = move || {
select_option_index.set(default_index);
is_show_menu.set(true);
@ -141,7 +141,7 @@ pub fn AutoComplete(
<Binder target_ref=auto_complete_ref>
<div
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
>
<Input
@ -193,7 +193,7 @@ pub fn AutoComplete(
class="thaw-config-provider thaw-auto-complete__listbox"
style=move || display.get()
data-thaw-id=config_provider.id().clone()
ref=menu_ref
node_ref=menu_ref
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_utils::{class_list, mount_style, OptionalProp, StoredMaybeSignal};
@ -49,7 +49,7 @@ pub fn Avatar(
view! {
<span
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"
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 leptos::{html::ToHtmlElement, *};
use leptos::{ev, html, html::ToHtmlElement, prelude::*};
use thaw_components::{CSSTransition, Fallback, OptionComp, Teleport};
use thaw_utils::{
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_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 || {
let scroll_el = get_scroll_parent(&el.into_any())
.unwrap_or_else(|| document().document_element().unwrap().to_leptos_element());
let scroll_el = get_scroll_parent(&placeholder_el)
.unwrap_or_else(|| document().document_element().unwrap());
{
let scroll_el = scroll_el.clone();
@ -72,7 +76,7 @@ pub fn BackTop(
};
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>
<CSSTransition
node_ref=back_top_ref
@ -84,7 +88,7 @@ pub fn BackTop(
<div
class=class_list!["thaw-config-provider thaw-back-top", class.map(| c | move || c.get())]
data-thaw-id=config_provider.id().clone()
ref=back_top_ref
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())
}

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

@ -1,4 +1,4 @@
use leptos::*;
use leptos::prelude::*;
use thaw_components::OptionComp;
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};
#[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};
#[component]

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

@ -3,7 +3,7 @@ mod button_group;
pub use button_group::ButtonGroup;
use crate::icon::Icon;
use leptos::*;
use leptos::{ev, prelude::*};
use thaw_components::OptionComp;
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 chrono::{Datelike, Days, Local, Month, Months, NaiveDate};
use leptos::*;
use leptos::prelude::*;
use std::ops::Deref;
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;
#[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_utils::mount_style;

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

@ -1,4 +1,4 @@
use leptos::*;
use leptos::prelude::*;
#[component]
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_preview::*;
use leptos::*;
use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalProp};
#[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 thaw_utils::Model;

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

@ -3,7 +3,7 @@ mod checkbox_group;
pub use checkbox_group::CheckboxGroup;
use checkbox_group::CheckboxGroupInjection;
use leptos::*;
use leptos::{html, prelude::*};
use thaw_utils::{class_list, mount_style, Model, OptionalProp};
#[component]
@ -67,7 +67,7 @@ pub fn Checkbox(
type="checkbox"
id=id.clone()
checked=checked
ref=input_ref
node_ref=input_ref
on:change=on_change
/>
<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};
#[component]
@ -14,9 +14,9 @@ pub fn Code(
]>
{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 {
view! { <pre>{text}</pre> }.into()
view! { <pre>{text}</pre> }.into_any().into()
} else {
None
}}

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

@ -4,7 +4,7 @@ pub use color::*;
use crate::ConfigInjection;
use leptos::leptos_dom::helpers::WindowListenerHandle;
use leptos::*;
use leptos::{ev, html, prelude::*};
use palette::{Hsv, IntoColor, Srgb};
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
use thaw_utils::{class_list, mount_style, Model, OptionalProp};
@ -114,8 +114,8 @@ pub fn ColorPicker(
if current_el == *body {
break;
};
if current_el == ***popover_ref.get().unwrap()
|| current_el == ***trigger_ref.get().unwrap()
if current_el == popover_ref.get().unwrap()
|| current_el == trigger_ref.get().unwrap()
{
return;
}
@ -131,7 +131,7 @@ pub fn ColorPicker(
<div
class=class_list!["thaw-color-picker-trigger", class.map(| c | move || c.get())]
on:click=show_popover
ref=trigger_ref
node_ref=trigger_ref
>
<div class="thaw-color-picker-trigger__content" style=move || style.get()>
{move || label.get()}
@ -147,7 +147,7 @@ pub fn ColorPicker(
>
<div
class="thaw-config-provider thaw-color-picker-popover"
ref=popover_ref
node_ref=popover_ref
style=move || display.get()
data-thaw-id=config_provider.id().clone()
>
@ -210,7 +210,7 @@ fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
};
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
class="thaw-color-picker-popover__layer"
style:background-image=move || {
@ -271,7 +271,7 @@ fn HueSlider(hue: RwSignal<f32>) -> impl IntoView {
});
};
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
class="thaw-color-picker-slider__handle"
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 leptos::*;
use leptos::{context::Provider, ev, html, prelude::*};
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth};
use thaw_utils::{add_event_listener, mount_style, Model};
@ -26,8 +26,11 @@ pub fn Combobox(
}
});
if clearable {
clear_icon_ref.on_load(move |clear_icon_el| {
let handler = add_event_listener(clear_icon_el.into_any(), ev::click, move |e| {
Effect::new(move |_| {
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();
selected_options.set(vec![]);
});
@ -52,10 +55,10 @@ pub fn Combobox(
if current_el == *body {
break;
};
if current_el == ***listbox_el {
if current_el == listbox_el {
return;
}
if current_el == ***trigger_el {
if current_el == trigger_el {
return;
}
el = current_el.parent_element();
@ -97,7 +100,7 @@ pub fn Combobox(
<Binder target_ref=trigger_ref>
<div
class="thaw-combobox"
ref=trigger_ref
node_ref=trigger_ref
on:click=move |_| {
is_show_listbox.update(|show| *show = !*show);
}
@ -120,7 +123,7 @@ pub fn Combobox(
aria-hidden="true"
class="thaw-combobox__clear-icon"
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">
<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"
style=move || display.get()
data-thaw-id=config_provider.id().clone()
ref=listbox_ref
node_ref=listbox_ref
role="listbox"
>
{children()}

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

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

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

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

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

@ -1,7 +1,7 @@
mod panel;
use crate::{Icon, Input, InputSuffix, SignalWatch};
use chrono::NaiveDate;
use leptos::*;
use leptos::{prelude::*, html};
use panel::{Panel, PanelRef};
use thaw_components::{Binder, Follower, FollowerPlacement};
use thaw_utils::{mount_style, now_date, ComponentRef, Model, OptionalProp};
@ -68,7 +68,7 @@ pub fn DatePicker(
view! {
<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>
<InputSuffix slot>
<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 crate::{Button, ButtonAppearance, ButtonSize, CalendarItemDate};
use chrono::{Datelike, Days, Month, Months, NaiveDate};
use leptos::*;
use leptos::prelude::*;
use std::ops::Deref;
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 chrono::NaiveDate;
use date_panel::DatePanel;
use leptos::*;
use leptos::{ev, html, prelude::*};
use month_panel::MonthPanel;
use thaw_components::CSSTransition;
use thaw_utils::{now_date, ComponentRef};
@ -74,7 +74,7 @@ pub fn Panel(
class="thaw-config-provider thaw-date-picker-panel"
data-thaw-id=config_provider.id().clone()
style=move || display.get()
ref=panel_ref
node_ref=panel_ref
>
{move || {

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

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

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

@ -1,7 +1,7 @@
use super::PanelVariant;
use crate::{Button, ButtonAppearance, ButtonSize};
use chrono::{Datelike, NaiveDate};
use leptos::*;
use leptos::prelude::*;
const MAX_YEAR: i32 = (i32::MAX >> 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>,
panel_variant: RwSignal<PanelVariant>,
) -> 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 |_| {
show_min_year.update(|year| {
if *year > MIN_YEAR {
@ -74,7 +74,7 @@ pub fn YearPanel(
#[component]
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! {
<div

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

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

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

@ -1,4 +1,4 @@
use leptos::*;
use leptos::prelude::*;
#[component]
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]
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]
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 leptos::*;
use leptos::{html, prelude::*};
use thaw_components::CSSTransition;
#[component]
@ -17,7 +17,7 @@ pub fn DialogSurface(children: Children) -> impl IntoView {
>
<div
class="thaw-dialog-surface"
ref=surface_ref
node_ref=surface_ref
role="dialog"
aria-modal="true"
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]
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_utils::{class_list, mount_style, OptionalProp};

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

@ -1,5 +1,5 @@
use crate::Scrollbar;
use leptos::*;
use leptos::prelude::*;
#[component]
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]
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;
#[component]

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

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

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
mod grid_item;
pub use grid_item::*;
use leptos::*;
use leptos::{context::Provider, prelude::*};
use thaw_utils::{class_list, OptionalProp};
#[component]
@ -12,7 +12,7 @@ pub fn Grid(
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
children: Children,
) -> impl IntoView {
let style = create_memo(move |_| {
let style = Memo::new(move |_| {
let mut style = String::from("display: grid;");
style.push_str(&format!(
"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
// leptos updated version causes leptos_icons error
use leptos::*;
use leptos::{ev, prelude::*};
use thaw_utils::{class_list, mount_style};
/// The Icon component.
@ -45,7 +45,7 @@ pub fn Icon(
}
};
create_isomorphic_effect(move |_| {
Effect::new_isomorphic(move |_| {
let icon = icon.get();
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};
#[component]

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

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

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

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

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

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

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

2
thaw/src/lib.rs
View file

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

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

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

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

@ -1,5 +1,5 @@
use super::{Message, MessageVariant};
use leptos::*;
use leptos::{context::Provider, prelude::*};
use std::time::Duration;
use thaw_components::Teleport;
use thaw_utils::{class_list, mount_style};
@ -36,7 +36,7 @@ pub fn MessageProvider(
) -> impl IntoView {
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| {
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::*;
use crate::{Icon, Theme};
use leptos::*;
use leptos::{html, prelude::*};
use thaw_components::{CSSTransition, If, Then};
use uuid::Uuid;
@ -48,7 +48,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
}
// let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let css_vars = Memo::new(move |_| {
let mut css_vars = String::new();
// theme.with(|theme| {
// 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 on_before_leave = Callback::new(move |_| {
let Some(node_el) = message_ref.get() else {
return;
};
use std::ops::Deref;
let any_el = node_el.into_any();
let el = any_el.deref();
let style = el.style();
let _ = style.set_property("max-height", &format!("{}px", el.offset_height()));
// let Some(node_el) = message_ref.get() else {
// return;
// };
// use std::ops::Deref;
// let any_el = node_el.into_any();
// let el = any_el.deref();
// let style = el.style();
// let _ = style.set_property("max-height", &format!("{}px", el.offset_height()));
});
let on_after_leave = Callback::new(move |_| {
queue_microtask(move || on_close.call(id));
// queue_microtask(move || on_close.call(id));
});
view! {
@ -84,7 +84,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
on_after_leave=on_after_leave
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__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};
#[component]

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

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

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

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

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

@ -1,5 +1,5 @@
use crate::Scrollbar;
use leptos::*;
use leptos::{context::Provider, prelude::*};
use thaw_components::OptionComp;
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 leptos::*;
use leptos::prelude::*;
use thaw_utils::{class_list, StoredMaybeSignal};
#[component]

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

@ -1,5 +1,5 @@
use crate::ConfigInjection;
use leptos::{leptos_dom::helpers::TimeoutHandle, *};
use leptos::{ev, html, leptos_dom::helpers::TimeoutHandle, prelude::*};
use std::time::Duration;
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
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 {
break;
};
if current_el == ***popover_el {
if current_el == popover_el {
return;
}
el = current_el.parent_element();
@ -105,7 +105,7 @@ pub fn Popover(
<Binder target_ref>
<div
class=class_list!["thaw-popover-trigger", trigger_class]
ref=target_ref
node_ref=target_ref
on:mouseenter=on_mouse_enter
on:mouseleave=on_mouse_leave
>
@ -128,7 +128,7 @@ pub fn Popover(
data-thaw-id=config_provider.id().clone()
style=move || display.get()
ref=popover_ref
node_ref=popover_ref
on:mouseenter=on_mouse_enter
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};
#[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};
#[component]
@ -29,11 +29,7 @@ pub fn ProgressCircle(
let fill_stroke_dasharray = Memo::new(move |_| {
let percentage = value.get().max(0.0).min(100.0);
format!(
"{}px {}px",
percentage / 100.0 * len,
view_box_width * 8
)
format!("{}px {}px", percentage / 100.0 * len, view_box_width * 8)
});
let fill_stroke_color = move || match color.get() {
ProgressCircleColor::Brand => "var(--colorCompoundBrandBackground)",
@ -78,13 +74,13 @@ pub fn ProgressCircle(
</svg>
{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 {
view! {
<div class="thaw-progress-circle__content thaw-progress-circle__content--text">
{move || value.get()} "%"
</div>
}
}.into_any()
}}
</div>

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

@ -2,7 +2,7 @@ mod radio_group;
pub use radio_group::RadioGroup;
use leptos::*;
use leptos::prelude::*;
use radio_group::RadioGroupInjection;
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;
#[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};
#[component]
@ -266,7 +266,7 @@ pub fn Scrollbar(
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
class=class_list![
"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()}
</div>
</div>
<div class="thaw-scrollbar__track--vertical" ref=y_track_ref>
<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")
@ -293,7 +293,7 @@ pub fn Scrollbar(
on:mousedown=on_y_thumb_mousedown
></div>
</div>
<div class="thaw-scrollbar__track--horizontal" ref=x_track_ref>
<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")

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

@ -1,4 +1,4 @@
use leptos::*;
use leptos::prelude::*;
#[component]
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;
#[component]

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

@ -2,7 +2,7 @@ mod slider_label;
pub use slider_label::SliderLabel;
use leptos::*;
use leptos::{context::Provider, ev, prelude::*};
use thaw_components::OptionComp;
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 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};
#[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 std::ops::{Add, Sub};
use std::str::FromStr;
@ -13,6 +13,7 @@ pub fn SpinButton<T>(
#[prop(optional, into)] disabled: MaybeSignal<bool>,
) -> impl IntoView
where
T: Send + Sync,
T: Add<Output = T> + Sub<Output = T> + PartialOrd + Bounded,
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};
#[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};
#[component]
@ -29,7 +29,7 @@ pub fn Switch(
type="checkbox"
id=id.clone()
checked=checked.get_untracked()
ref=input_ref
node_ref=input_ref
on:change=on_change
/>
<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::*;
use leptos::*;
use leptos::{context::Provider, html, prelude::*};
use std::collections::HashMap;
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 leptos::*;
use leptos::{html, prelude::*};
use std::ops::Deref;
use thaw_utils::{class_list, mount_style};
@ -66,7 +66,7 @@ pub fn Tab(
]
role="tab"
aria-selected=move || if selected.get() { "true" } else { "false" }
ref=tab_ref
node_ref=tab_ref
on:click=on_select
>
<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_utils::{class_list, mount_style};

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

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

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

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

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

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

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

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

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

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

@ -1,4 +1,4 @@
use leptos::*;
use leptos::prelude::*;
#[component]
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;
#[component]

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

@ -1,4 +1,4 @@
use leptos::*;
use leptos::prelude::*;
#[component]
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;
#[component]

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

@ -1,5 +1,5 @@
use super::{ToastPosition, ToasterReceiver};
use leptos::*;
use leptos::prelude::*;
use thaw_components::Teleport;
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 leptos::*;
use leptos::{context::Provider, prelude::*};
#[component]
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 web_sys::FileList;
use leptos::*;
use leptos::{ev, html, prelude::*};
use thaw_utils::{add_event_listener, mount_style};
#[component]
@ -15,8 +15,8 @@ pub fn Upload(
) -> impl IntoView {
mount_style("upload", include_str!("./upload.css"));
let input_ref = create_node_ref::<html::Input>();
let trigger_ref = create_node_ref::<html::Div>();
let input_ref = NodeRef::<html::Input>::new();
let trigger_ref = NodeRef::<html::Div>::new();
trigger_ref.on_load(move |trigger_ref| {
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| {
event.prevent_default();
if let Some(data) = event.data_transfer() {
@ -73,7 +73,7 @@ pub fn Upload(
>
<input
class="thaw-upload__input"
ref=input_ref
node_ref=input_ref
type="file"
accept=move || accept.get()
multiple=move || multiple.get()
@ -81,7 +81,7 @@ pub fn Upload(
/>
<div
class="thaw-upload__trigger"
ref=trigger_ref
node_ref=trigger_ref
on:drop=on_trigger_drop
on:dragover=on_trigger_dragover
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;
#[component]