mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
feat: leptos-v0.7
This commit is contained in:
parent
5e56d33f34
commit
d90ee99367
15 changed files with 39 additions and 47 deletions
|
@ -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"]
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
let title_rect = title_el.get_bounding_client_rect();
|
||||
anchor.update_background_position(title_rect);
|
||||
}
|
||||
},
|
||||
true,
|
||||
);
|
||||
|
||||
if is_active.get() {
|
||||
let title_rect = title_el.get_bounding_client_rect();
|
||||
anchor.update_background_position(title_rect);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)))
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}}
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -104,7 +104,7 @@ pub fn OverlayDrawer(
|
|||
}
|
||||
node_ref=drawer_ref
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
// aria-modal="true"
|
||||
>
|
||||
{children()}
|
||||
</div>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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())
|
||||
>
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue