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-05 11:15:37 +08:00 • committed by luoxiaozero
parent 3153f2c0cb
commit 5e56d33f34
24 changed files with 158 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
thaw/src/accordion/accordion_item.rs
View file

@ -1,7 +1,7 @@
use crate::AccordionInjection;
use leptos::{prelude::*, html};
use thaw_components::CSSTransition;
use thaw_utils::{mount_style, StoredMaybeSignal};
use thaw_utils::{mount_style, update, with, StoredMaybeSignal};
#[component]
pub fn AccordionItem(
@ -59,7 +59,7 @@ pub fn AccordionItem(
<div
class="thaw-accordion-panel"
node_ref=panel_ref
style=move || display.get().map(|d| d.to_string())
style=("display: none", display.with(|d| d.is_none()))
>
{children()}
</div>

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

@ -33,7 +33,6 @@ pub fn AutoComplete(
#[prop(optional)] auto_complete_prefix: Option<AutoCompletePrefix>,
#[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>,
#[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>,
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
mount_style("auto-complete", include_str!("./auto-complete.css"));
@ -145,7 +144,6 @@ pub fn AutoComplete(
// on:keydown=on_keydown
>
<Input
attrs
value
placeholder
disabled

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

@ -1,5 +1,5 @@
use crate::{ConfigInjection, Icon};
use leptos::{ev, html, html::ToHtmlElement, prelude::*};
use leptos::{ev, html, prelude::*};
use thaw_components::{CSSTransition, Fallback, OptionComp, Teleport};
use thaw_utils::{
add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle,

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

@ -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;
}

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

@ -55,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();

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

@ -42,7 +42,7 @@ pub fn ComboboxOption(
</Then>
</If>
</span>
}
}.into_any()
} else {
view! {
<span aria-hidden="true" class="thaw-combobox-option__check-icon">
@ -50,7 +50,7 @@ pub fn ComboboxOption(
<path d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z" fill="currentColor"></path>
</svg>
</span>
}
}.into_any()
}
}
<OptionComp value=children let:children>

5
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::{prelude::*, html};
use leptos::{html, prelude::*};
use panel::{Panel, PanelRef};
use thaw_components::{Binder, Follower, FollowerPlacement};
use thaw_utils::{mount_style, now_date, ComponentRef, Model, OptionalProp};
@ -10,7 +10,6 @@ use thaw_utils::{mount_style, now_date, ComponentRef, Model, OptionalProp};
pub fn DatePicker(
#[prop(optional, into)] value: Model<Option<NaiveDate>>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
) -> impl IntoView {
mount_style("date-picker", include_str!("./date-picker.css"));
let date_picker_ref = NodeRef::<html::Div>::new();
@ -69,7 +68,7 @@ pub fn DatePicker(
view! {
<Binder target_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 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"/>
</InputSuffix>

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

@ -39,9 +39,9 @@ pub fn Panel(
if panel_ref.get().is_none() {
return;
}
if current_el == ***panel_ref.get_untracked().unwrap()
|| current_el == ***date_picker_ref.get_untracked().unwrap()
{
let panel_el = panel_ref.get_untracked().unwrap();
let date_picker_el = date_picker_ref.get_untracked().unwrap();
if current_el == **panel_el || current_el == **date_picker_el {
return;
}
el = current_el.parent_element();

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::prelude::MaybeSignal;
use leptos::prelude::{MaybeSignal, With};
#[derive(Clone, Default, Copy)]
pub enum DrawerPosition {

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

@ -1,6 +1,6 @@
use super::{DrawerPosition, DrawerSize};
use crate::ConfigInjection;
use leptos::prelude::*;
use leptos::{ev, html, prelude::*};
use thaw_components::{CSSTransition, FocusTrap, Teleport};
use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};

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

@ -4,13 +4,11 @@ use thaw_utils::{class_list, OptionalProp};
#[component]
pub fn LayoutHeader(
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] style: OptionalProp<MaybeSignal<String>>,
children: Children,
) -> impl IntoView {
view! {
<div
class=class_list!["thaw-layout-header", class.map(| c | move || c.get())]
style=style.map(|s| move || s.get())
>
{children()}
</div>

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

@ -5,7 +5,6 @@ use thaw_utils::{class_list, mount_style, OptionalProp};
#[component]
pub fn LayoutSider(
#[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>>,
children: Children,
@ -14,7 +13,6 @@ pub fn LayoutSider(
view! {
<div
class=class_list!["thaw-layout-sider", class.map(| c | move || c.get())]
style=style.map(|s| move || s.get())
>
<Scrollbar content_class content_style>
{children()}

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

@ -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();
@ -87,8 +87,11 @@ pub fn Popover(
on_cleanup(move || handle.remove());
}
target_ref.on_load(move |target_el| {
add_event_listener(target_el.into_any(), ev::click, move |event| {
Effect::new(move |_| {
let Some(target_el) = target_ref.get() else {
return;
};
add_event_listener(target_el.into(), ev::click, move |event| {
if trigger_type != PopoverTriggerType::Click {
return;
}
@ -96,6 +99,7 @@ pub fn Popover(
is_show_popover.update(|show| *show = !*show);
});
});
let PopoverTrigger {
class: trigger_class,
children: trigger_children,

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

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

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

@ -11,10 +11,7 @@ pub fn Table(
mount_style("table", include_str!("./table.css"));
view! {
<table
class=class_list!["thaw-table", class]
style=move || style.get()
>
<table class=class_list!["thaw-table", class]>
{children()}
</table>
}

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

@ -4,7 +4,6 @@ use thaw_utils::{class_list, mount_style};
#[component]
pub fn Caption1(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag,
children: Children,
) -> impl IntoView {
@ -12,14 +11,13 @@ pub fn Caption1(
Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default()));
view! {
<Text tag children class style/>
<Text tag children class/>
}
}
#[component]
pub fn Caption1Strong(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag,
children: Children,
) -> impl IntoView {
@ -28,28 +26,26 @@ pub fn Caption1Strong(
});
view! {
<Text tag children class style/>
<Text tag children class/>
}
}
#[component]
pub fn Body1(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag,
children: Children,
) -> impl IntoView {
let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default()));
view! {
<Text tag children class style/>
<Text tag children class/>
}
}
#[component]
pub fn Text(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag,
#[prop(optional)] code: bool,
children: Children,
@ -58,79 +54,79 @@ pub fn Text(
match tag {
TextTag::B => view! {
<b class=class_list!["thaw-text", class] style=move || style.get()>
<b class=class_list!["thaw-text", class]>
{children()}
</b>
}
.into_any(),
TextTag::Em => view! {
<em class=class_list!["thaw-text", class] style=move || style.get()>
<em class=class_list!["thaw-text", class]>
{children()}
</em>
}
.into_any(),
TextTag::H1 => view! {
<h1 class=class_list!["thaw-text", class] style=move || style.get()>
<h1 class=class_list!["thaw-text", class]>
{children()}
</h1>
}
.into_any(),
TextTag::H2 => view! {
<h2 class=class_list!["thaw-text", class] style=move || style.get()>
<h2 class=class_list!["thaw-text", class]>
{children()}
</h2>
}
.into_any(),
TextTag::H3 => view! {
<h3 class=class_list!["thaw-text", class] style=move || style.get()>
<h3 class=class_list!["thaw-text", class]>
{children()}
</h3>
}
.into_any(),
TextTag::H4 => view! {
<h4 class=class_list!["thaw-text", class] style=move || style.get()>
<h4 class=class_list!["thaw-text", class]>
{children()}
</h4>
}
.into_any(),
TextTag::H5 => view! {
<h5 class=class_list!["thaw-text", class] style=move || style.get()>
<h5 class=class_list!["thaw-text", class]>
{children()}
</h5>
}
.into_any(),
TextTag::H6 => view! {
<h6 class=class_list!["thaw-text", class] style=move || style.get()>
<h6 class=class_list!["thaw-text", class]>
{children()}
</h6>
}
.into_any(),
TextTag::I => view! {
<i class=class_list!["thaw-text", class] style=move || style.get()>
<i class=class_list!["thaw-text", class]>
{children()}
</i>
}
.into_any(),
TextTag::P => view! {
<p class=class_list!["thaw-text", class] style=move || style.get()>
<p class=class_list!["thaw-text", class]>
{children()}
</p>
}
.into_any(),
TextTag::Pre => view! {
<pre class=class_list!["thaw-text", class] style=move || style.get()>
<pre class=class_list!["thaw-text", class]>
{children()}
</pre>
}
.into_any(),
TextTag::Span => view! {
<span class=class_list!["thaw-text", class] style=move || style.get()>
<span class=class_list!["thaw-text", class]>
{children()}
</span>
}
.into_any(),
TextTag::Strong => view! {
<strong class=class_list!["thaw-text", class] style=move || style.get()>
<strong class=class_list!["thaw-text", class]>
{children()}
</strong>
}

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

@ -19,15 +19,18 @@ pub fn Textarea(
mount_style("textarea", include_str!("./textarea.css"));
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.trigger();
return;
let on_input = {
let value_trigger = value_trigger.clone();
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.trigger();
return;
}
}
value.set(input_value);
}
value.set(input_value);
};
let on_internal_focus = move |ev| {
if let Some(on_focus) = on_focus.as_ref() {

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

@ -119,12 +119,11 @@ fn Panel(
if current_el == *body {
break;
};
if panel_ref.get().is_none() {
let Some(panel_el) = panel_ref.get() else {
return;
}
if current_el == ***panel_ref.get_untracked().unwrap()
|| current_el == ***time_picker_ref.get_untracked().unwrap()
{
};
let time_picker_el = time_picker_ref.get().unwrap();
if current_el == **panel_el || current_el == **time_picker_el {
return;
}
el = current_el.parent_element();

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

@ -29,7 +29,10 @@ impl ToasterInjection {
let trigger = ArcTrigger::new();
(
Self { sender, trigger },
Self {
sender,
trigger: trigger.clone(),
},
ToasterReceiver::new(receiver, trigger),
)
}

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

@ -21,15 +21,15 @@ pub fn Toaster(
view! {
<Teleport>
<div class="thaw-config-provider thaw-toaster-container">
<For
each=move || toast_list.get()
key=|toast| toast.1.id
let:toast
>
<div class=class_list!["thaw-toaster", "thaw-toaster"]>
{toast.0}
</div>
</For>
// <For
// each=move || toast_list.get()
// key=|toast| toast.1.id
// let:toast
// >
// <div class=class_list!["thaw-toaster", "thaw-toaster"]>
// {toast.0}
// </div>
// </For>
</div>
</Teleport>
}

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

@ -18,8 +18,11 @@ pub fn Upload(
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 |_| {
Effect::new(move |_| {
let Some(trigger_el) = trigger_ref.get() else {
return;
};
let handle = add_event_listener(trigger_el.into(), ev::click, move |_| {
if let Some(input_ref) = input_ref.get_untracked() {
input_ref.click();
}

4
thaw_components/src/binder/mod.rs
View file

@ -71,7 +71,7 @@ pub fn Binder<E>(
) -> impl IntoView
where
E: ElementType + 'static,
E::Output: JsCast + Clone + Deref<Target = web_sys::Element> + 'static,
E::Output: JsCast + Clone + Deref<Target = web_sys::HtmlElement> + 'static,
{
mount_style("binder", include_str!("./binder.css"));
let Follower {
@ -186,7 +186,7 @@ fn FollowerContainer<E>(
) -> impl IntoView
where
E: ElementType + 'static,
E::Output: JsCast + Clone + Deref<Target = web_sys::Element> + 'static,
E::Output: JsCast + Clone + Deref<Target = web_sys::HtmlElement> + 'static,
{
let content_ref = NodeRef::<html::Div>::new();
let content_style = RwSignal::new(String::new());

1
thaw_utils/src/lib.rs
View file

@ -2,6 +2,7 @@ pub mod class_list;
mod dom;
mod event_listener;
mod hooks;
pub mod macros;
mod optional_prop;
mod signals;
mod throttle;

82
thaw_utils/src/macros.rs Normal file
View file

@ -0,0 +1,82 @@
#[macro_export]
macro_rules! with {
(|$ident:ident $(,)?| $body:expr) => {
$crate::macros::__private::Withable::call_with(&$ident, |$ident| $body)
};
(move |$ident:ident $(,)?| $body:expr) => {
$crate::macros::__private::Withable::call_with(&$ident, move |$ident| $body)
};
(|$first:ident, $($rest:ident),+ $(,)? | $body:expr) => {
$crate::macros::__private::Withable::call_with(
&$first,
|$first| with!(|$($rest),+| $body)
)
};
(move |$first:ident, $($rest:ident),+ $(,)? | $body:expr) => {
$crate::macros::__private::Withable::call_with(
&$first,
move |$first| with!(|$($rest),+| $body)
)
};
}
#[macro_export]
macro_rules! update {
(|$ident:ident $(,)?| $body:expr) => {
$crate::macros::__private::Updatable::call_update(&$ident, |$ident| $body)
};
(move |$ident:ident $(,)?| $body:expr) => {
$crate::macros::__private::Updatable::call_update(&$ident, move |$ident| $body)
};
(|$first:ident, $($rest:ident),+ $(,)? | $body:expr) => {
$crate::macros::__private::Updatable::call_update(
&$first,
|$first| update!(|$($rest),+| $body)
)
};
(move |$first:ident, $($rest:ident),+ $(,)? | $body:expr) => {
$crate::macros::__private::Updatable::call_update(
&$first,
move |$first| update!(|$($rest),+| $body)
)
};
}
pub mod __private {
use leptos::prelude::{Update, With};
pub trait Withable {
type Value;
#[track_caller]
fn call_with<O>(item: &Self, f: impl FnOnce(&Self::Value) -> O) -> O;
}
impl<S: With> Withable for S
where
<S as With>::Value: Sized,
{
type Value = S::Value;
#[inline(always)]
fn call_with<O>(item: &Self, f: impl FnOnce(&Self::Value) -> O) -> O {
item.with(f)
}
}
pub trait Updatable {
type Value;
#[track_caller]
fn call_update(item: &Self, f: impl FnOnce(&mut Self::Value));
}
impl<S: Update> Updatable for S {
type Value = S::Value;
#[inline(always)]
fn call_update(item: &Self, f: impl FnOnce(&mut Self::Value)) {
item.update(f)
}
}
}