feat: leptos-v0.7

This commit is contained in:
luoxiao 2024-07-05 16:48:41 +08:00 committed by luoxiaozero
parent 5e56d33f34
commit d90ee99367
15 changed files with 39 additions and 47 deletions

View file

@ -33,6 +33,7 @@ cfg-if = "1.0.0"
chrono = "0.4.35"
palette = "0.7.5"
num-traits = "0.2.18"
send_wrapper = "0.6"
[features]
csr = ["leptos/csr", "thaw_components/csr", "thaw_utils/csr"]

View file

@ -59,7 +59,7 @@ pub fn AccordionItem(
<div
class="thaw-accordion-panel"
node_ref=panel_ref
style=("display: none", display.with(|d| d.is_none()))
// style=("display: none", display.with(|d| d.is_none()))
>
{children()}
</div>

View file

@ -1,4 +1,4 @@
use crate::use_anchor;
use super::AnchorInjection;
use leptos::{html, prelude::*};
use thaw_components::OptionComp;
use thaw_utils::{class_list, OptionalProp, StoredMaybeSignal};
@ -10,7 +10,7 @@ pub fn AnchorLink(
#[prop(into)] href: String,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
let anchor = use_anchor();
let anchor = AnchorInjection::use_();
let title: StoredMaybeSignal<_> = title.into();
let title_ref = NodeRef::<html::A>::new();
@ -39,20 +39,15 @@ pub fn AnchorLink(
});
});
Effect::new(|_| {
Effect::new(move |_| {
let Some(title_el) = title_ref.get() else {
return;
};
let _ = watch(
move || is_active.get(),
move |is_active, _, _| {
if *is_active {
if is_active.get() {
let title_rect = title_el.get_bounding_client_rect();
anchor.update_background_position(title_rect);
}
},
true,
);
});
}
}

View file

@ -121,6 +121,10 @@ pub(crate) struct AnchorInjection {
impl Copy for AnchorInjection {}
impl AnchorInjection {
pub fn use_() -> Self {
expect_context()
}
fn new(
anchor_ref: NodeRef<html::Div>,
bar_ref: NodeRef<html::Div>,
@ -170,10 +174,6 @@ impl AnchorInjection {
}
}
pub(crate) fn use_anchor() -> AnchorInjection {
expect_context()
}
struct LinkInfo {
top: f64,
id: String,

View file

@ -21,13 +21,12 @@ pub fn BackTop(
let is_show_back_top = RwSignal::new(false);
let scroll_top = RwSignal::new(0);
let _ = watch(
move || scroll_top.get(),
move |scroll_top, _, _| {
is_show_back_top.set(scroll_top > &visibility_height.get());
},
false,
);
Effect::new(move |prev| {
scroll_top.track();
if prev.is_some() {
is_show_back_top.set(scroll_top.get() > visibility_height.get_untracked());
}
});
let scroll_to_top = StoredValue::new(None::<Callback<()>>);
let scroll_handle = StoredValue::new(None::<EventListenerHandle>);
@ -42,7 +41,7 @@ pub fn BackTop(
.unwrap_or_else(|| document().document_element().unwrap());
{
let scroll_el = scroll_el.clone();
let scroll_el = send_wrapper::SendWrapper::new(scroll_el.clone());
scroll_to_top.set_value(Some(Callback::new(move |_| {
scroll_el.scroll_to_with_scroll_to_options(
web_sys::ScrollToOptions::new()

View file

@ -4,6 +4,7 @@ pub use button_group::ButtonGroup;
use crate::icon::Icon;
use leptos::{ev, prelude::*};
use send_wrapper::SendWrapper;
use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
@ -65,7 +66,6 @@ impl ButtonSize {
#[component]
pub fn Button(
#[prop(optional, into)] style: Option<MaybeSignal<String>>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] appearance: MaybeSignal<ButtonAppearance>,
#[prop(optional, into)] shape: MaybeSignal<ButtonShape>,
@ -74,7 +74,7 @@ pub fn Button(
#[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] disabled_focusable: MaybeSignal<bool>,
#[prop(optional, into)] on_click: Option<Callback<ev::MouseEvent>>,
#[prop(optional, into)] on_click: Option<Callback<SendWrapper<ev::MouseEvent>>>,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
mount_style("button", include_str!("./button.css"));
@ -91,7 +91,7 @@ pub fn Button(
let Some(callback) = on_click.as_ref() else {
return;
};
callback.call(e);
callback.call(SendWrapper::new(e));
};
view! {
@ -107,7 +107,6 @@ pub fn Button(
class.map(| c | move || c.get())
]
style=move || style.as_ref().map(|s| s.get())
disabled=move || disabled.get().then_some("")
aria-disabled=move || disabled_focusable.get().then_some("true")
on:click=on_click

View file

@ -23,7 +23,7 @@ pub fn ComboboxOption(
view! {
<div
role="option"
aria-selected="true"
// aria_selected="true"
class=class_list![
"thaw-combobox-option",
("thaw-combobox-option--selected", move || value.with_value(|value| combobox.is_selected(&value)))

View file

@ -82,13 +82,13 @@ pub fn Panel(
PanelVariant::Date => {
view! {
<DatePanel value=selected_date show_date close_panel panel_variant/>
}
}.into_any()
}
PanelVariant::Month => {
view! { <MonthPanel date_panel_show_date=show_date panel_variant/> }
view! { <MonthPanel date_panel_show_date=show_date panel_variant/> }.into_any()
}
PanelVariant::Year => {
view! { <YearPanel date_panel_show_date=show_date panel_variant/> }
view! { <YearPanel date_panel_show_date=show_date panel_variant/> }.into_any()
}
}
}}

View file

@ -19,7 +19,7 @@ pub fn DialogSurface(children: Children) -> impl IntoView {
class="thaw-dialog-surface"
node_ref=surface_ref
role="dialog"
aria-modal="true"
// aria-modal="true"
style:display=move || display.get().map(|_| "none")
>
{children()}

View file

@ -13,7 +13,7 @@ pub fn Divider(
view! {
<div
class=class_list!["thaw-divider", ("thaw-divider--vertical", move || vertical.get()), class.map(| c | move || c.get())]
aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
// aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
role="separator"
>
<OptionComp value=children let:children>

View file

@ -104,7 +104,7 @@ pub fn OverlayDrawer(
}
node_ref=drawer_ref
role="dialog"
aria-modal="true"
// aria-modal="true"
>
{children()}
</div>

View file

@ -27,7 +27,6 @@ impl LayoutPosition {
#[component]
pub fn Layout(
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] style: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] content_class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] content_style: OptionalProp<MaybeSignal<String>>,
#[prop(optional)] position: LayoutPosition,
@ -46,7 +45,6 @@ pub fn Layout(
view! {
<div
class=class_list![gen_class(position), class.map(| c | move || c.get())]
style=move || style.as_ref().map(|s| s.get())
>
<Scrollbar
content_class

View file

@ -22,9 +22,9 @@ pub fn ProgressBar(
move || format!("thaw-progress-bar--{}", color.get().as_str())
]
role="progressbar"
aria_valuemax=move || max.get()
aria-valuemin="0"
aria-valuenow=move || value.get()
// aria_valuemax=move || max.get()
// aria-valuemin="0"
// aria-valuenow=move || value.get()
>
<div class="thaw-progress-bar__bar" style=style>
</div>

View file

@ -42,9 +42,9 @@ pub fn ProgressCircle(
<div
class=class_list!["thaw-progress-circle", class.map(| c | move || c.get())]
role="progressbar"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow=move || value.get()
// aria-valuemax="100"
// aria-valuemin="0"
// aria-valuenow=move || value.get()
style=("--thaw-size", move || size.get())
>

View file

@ -2,7 +2,7 @@ use leptos::prelude::*;
use num_traits::Bounded;
use std::ops::{Add, Sub};
use std::str::FromStr;
use thaw_utils::{mount_style, Model, StoredMaybeSignal};
use thaw_utils::{mount_style, with, Model, StoredMaybeSignal};
#[component]
pub fn SpinButton<T>(
@ -60,7 +60,7 @@ where
<input
autocomplete="off"
role="spinbutton"
aria-valuenow=move || value.get().to_string()
// aria-valuenow=move || value.get().to_string()
type="text"
disabled=move || disabled.get()
value=initialization_value