feat(lepots-v0.7): thaw_components

This commit is contained in:
luoxiao 2024-07-03 23:01:57 +08:00 committed by luoxiaozero
parent 3bfdac9e44
commit 5f74f5914e
7 changed files with 28 additions and 23 deletions

View file

@ -13,7 +13,7 @@ license = "MIT"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies] [dependencies]
leptos = { version = "0.6.10" } leptos = { workspace = true }
thaw_components = { workspace = true } thaw_components = { workspace = true }
thaw_macro = { workspace = true } thaw_macro = { workspace = true }
thaw_utils = { workspace = true } thaw_utils = { workspace = true }

View file

@ -1,5 +1,5 @@
use crate::AccordionInjection; use crate::AccordionInjection;
use leptos::*; use leptos::{prelude::*, html};
use thaw_components::CSSTransition; use thaw_components::CSSTransition;
use thaw_utils::{mount_style, StoredMaybeSignal}; use thaw_utils::{mount_style, StoredMaybeSignal};
@ -43,7 +43,7 @@ pub fn AccordionItem(
<div class="thaw-accordion-header"> <div class="thaw-accordion-header">
<button <button
class="thaw-accordion-header__button" class="thaw-accordion-header__button"
aria-expanded=move || is_show_panel.get().to_string() // aria_expanded=move || is_show_panel.get().to_string() #TODO
type="button" type="button"
on:click=on_click on:click=on_click
> >
@ -58,8 +58,8 @@ pub fn AccordionItem(
> >
<div <div
class="thaw-accordion-panel" class="thaw-accordion-panel"
ref=panel_ref node_ref=panel_ref
style=move || display.get() style=move || display.get().map(|d| d.to_string())
> >
{children()} {children()}
</div> </div>

View file

@ -2,7 +2,7 @@ mod accordion_item;
pub use accordion_item::*; pub use accordion_item::*;
use leptos::*; use leptos::{context::Provider, prelude::*};
use std::collections::HashSet; use std::collections::HashSet;
use thaw_utils::Model; use thaw_utils::Model;

View file

@ -185,7 +185,7 @@ fn FollowerContainer<E>(
children: Children, children: Children,
) -> impl IntoView ) -> impl IntoView
where where
E: ElementType, E: ElementType + 'static,
E::Output: JsCast + Clone + Deref<Target = web_sys::Element> + 'static, E::Output: JsCast + Clone + Deref<Target = web_sys::Element> + 'static,
{ {
let content_ref = NodeRef::<html::Div>::new(); let content_ref = NodeRef::<html::Div>::new();
@ -239,11 +239,14 @@ where
return; return;
} }
if show.get() { if show.get() {
request_animation_frame(move || { request_animation_frame({
sync_position.call(()); let sync_position = sync_position.clone();
move || {
sync_position.call(());
}
}); });
add_scroll_listener.call(sync_position); add_scroll_listener.call(sync_position.clone());
add_resize_listener.call(sync_position); add_resize_listener.call(sync_position.clone());
} else { } else {
remove_scroll_listener.call(()); remove_scroll_listener.call(());
remove_resize_listener.call(()); remove_resize_listener.call(());
@ -261,5 +264,5 @@ where
) )
}); });
view! { <Teleport element=children immediate=show/> } view! { <Teleport element=children.into_any() immediate=show/> }
} }

View file

@ -1,5 +1,6 @@
use leptos::{ev, html::ElementType, prelude::*}; use leptos::{ev, html::ElementType, prelude::*};
use std::{ops::Deref, time::Duration}; use std::{ops::Deref, time::Duration};
use tachys::view::any_view::AnyView;
use thaw_utils::{add_event_listener, EventListenerHandle, NextFrame}; use thaw_utils::{add_event_listener, EventListenerHandle, NextFrame};
use web_sys::wasm_bindgen::JsCast; use web_sys::wasm_bindgen::JsCast;
@ -22,9 +23,9 @@ pub fn CSSTransition<E, CF, IV>(
) -> impl IntoView ) -> impl IntoView
where where
E: ElementType + 'static, E: ElementType + 'static,
E::Output: JsCast + Clone + Deref<Target = web_sys::Element> + 'static, E::Output: JsCast + Clone + Deref<Target = web_sys::HtmlElement> + 'static,
CF: FnOnce(ReadSignal<Option<&'static str>>) -> IV + 'static, CF: FnOnce(ReadSignal<Option<&'static str>>) -> IV + Send + 'static,
IV: IntoView, IV: IntoView + 'static,
{ {
let display = RwSignal::new((!show.get_untracked()).then_some("display: none;")); let display = RwSignal::new((!show.get_untracked()).then_some("display: none;"));
@ -92,13 +93,13 @@ where
} }
}; };
let handle = match types { let handle = match types {
AnimationTypes::Transition => { AnimationTypes::Transition => add_event_listener(
add_event_listener(el.deref().clone(), ev::transitionend, move |_| { el.deref().clone().into(),
event_listener() ev::transitionend,
}) move |_| event_listener(),
} ),
AnimationTypes::Animation => { AnimationTypes::Animation => {
add_event_listener(el.deref().clone(), ev::animationend, move |_| { add_event_listener(el.deref().clone().into(), ev::animationend, move |_| {
event_listener() event_listener()
}) })
} }

View file

@ -32,6 +32,7 @@ pub fn FocusTrap(
Effect::new(move |prev| { Effect::new(move |prev| {
let is_active = active.get(); let is_active = active.get();
if is_active && !prev.unwrap_or(false) { if is_active && !prev.unwrap_or(false) {
let on_esc = on_esc.clone();
let handle = window_event_listener(ev::keydown, move |e| { let handle = window_event_listener(ev::keydown, move |e| {
if &e.code() == "Escape" { if &e.code() == "Escape" {
if is_current_active() { if is_current_active() {

View file

@ -1,5 +1,5 @@
use cfg_if::cfg_if; use cfg_if::cfg_if;
use leptos::{html::{AnyElement, HtmlElement}, prelude::*}; use leptos::prelude::*;
use tachys::view::any_view::AnyView; use tachys::view::any_view::AnyView;
/// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56 /// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
@ -7,7 +7,7 @@ use tachys::view::any_view::AnyView;
pub fn Teleport( pub fn Teleport(
#[prop(default = true.into(), into)] immediate: MaybeSignal<bool>, #[prop(default = true.into(), into)] immediate: MaybeSignal<bool>,
#[prop(into, optional)] mount: Option<web_sys::Element>, #[prop(into, optional)] mount: Option<web_sys::Element>,
#[prop(optional, into)] element: Option<HtmlElement<AnyElement>>, #[prop(optional, into)] element: Option<AnyView<Dom>>,
#[prop(optional)] children: Option<Children>, #[prop(optional)] children: Option<Children>,
) -> impl IntoView { ) -> impl IntoView {
cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] { cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] {