mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 06:19:22 -05:00
feat: leptos-v0.7
This commit is contained in:
parent
3153f2c0cb
commit
5e56d33f34
24 changed files with 158 additions and 77 deletions
|
@ -1,7 +1,7 @@
|
||||||
use crate::AccordionInjection;
|
use crate::AccordionInjection;
|
||||||
use leptos::{prelude::*, html};
|
use leptos::{prelude::*, html};
|
||||||
use thaw_components::CSSTransition;
|
use thaw_components::CSSTransition;
|
||||||
use thaw_utils::{mount_style, StoredMaybeSignal};
|
use thaw_utils::{mount_style, update, with, StoredMaybeSignal};
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn AccordionItem(
|
pub fn AccordionItem(
|
||||||
|
@ -59,7 +59,7 @@ pub fn AccordionItem(
|
||||||
<div
|
<div
|
||||||
class="thaw-accordion-panel"
|
class="thaw-accordion-panel"
|
||||||
node_ref=panel_ref
|
node_ref=panel_ref
|
||||||
style=move || display.get().map(|d| d.to_string())
|
style=("display: none", display.with(|d| d.is_none()))
|
||||||
>
|
>
|
||||||
{children()}
|
{children()}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -33,7 +33,6 @@ pub fn AutoComplete(
|
||||||
#[prop(optional)] auto_complete_prefix: Option<AutoCompletePrefix>,
|
#[prop(optional)] auto_complete_prefix: Option<AutoCompletePrefix>,
|
||||||
#[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>,
|
#[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>,
|
||||||
#[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>,
|
#[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>,
|
||||||
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
|
|
||||||
#[prop(optional)] children: Option<Children>,
|
#[prop(optional)] children: Option<Children>,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
mount_style("auto-complete", include_str!("./auto-complete.css"));
|
mount_style("auto-complete", include_str!("./auto-complete.css"));
|
||||||
|
@ -145,7 +144,6 @@ pub fn AutoComplete(
|
||||||
// on:keydown=on_keydown
|
// on:keydown=on_keydown
|
||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
attrs
|
|
||||||
value
|
value
|
||||||
placeholder
|
placeholder
|
||||||
disabled
|
disabled
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
use crate::{ConfigInjection, Icon};
|
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_components::{CSSTransition, Fallback, OptionComp, Teleport};
|
||||||
use thaw_utils::{
|
use thaw_utils::{
|
||||||
add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle,
|
add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle,
|
||||||
|
|
|
@ -114,8 +114,8 @@ pub fn ColorPicker(
|
||||||
if current_el == *body {
|
if current_el == *body {
|
||||||
break;
|
break;
|
||||||
};
|
};
|
||||||
if current_el == popover_ref.get().unwrap()
|
if current_el == **popover_ref.get().unwrap()
|
||||||
|| current_el == trigger_ref.get().unwrap()
|
|| current_el == **trigger_ref.get().unwrap()
|
||||||
{
|
{
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
@ -55,10 +55,10 @@ pub fn Combobox(
|
||||||
if current_el == *body {
|
if current_el == *body {
|
||||||
break;
|
break;
|
||||||
};
|
};
|
||||||
if current_el == listbox_el {
|
if current_el == **listbox_el {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if current_el == trigger_el {
|
if current_el == **trigger_el {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
el = current_el.parent_element();
|
el = current_el.parent_element();
|
||||||
|
|
|
@ -42,7 +42,7 @@ pub fn ComboboxOption(
|
||||||
</Then>
|
</Then>
|
||||||
</If>
|
</If>
|
||||||
</span>
|
</span>
|
||||||
}
|
}.into_any()
|
||||||
} else {
|
} else {
|
||||||
view! {
|
view! {
|
||||||
<span aria-hidden="true" class="thaw-combobox-option__check-icon">
|
<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>
|
<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>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
}
|
}.into_any()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<OptionComp value=children let:children>
|
<OptionComp value=children let:children>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
mod panel;
|
mod panel;
|
||||||
use crate::{Icon, Input, InputSuffix, SignalWatch};
|
use crate::{Icon, Input, InputSuffix, SignalWatch};
|
||||||
use chrono::NaiveDate;
|
use chrono::NaiveDate;
|
||||||
use leptos::{prelude::*, html};
|
use leptos::{html, prelude::*};
|
||||||
use panel::{Panel, PanelRef};
|
use panel::{Panel, PanelRef};
|
||||||
use thaw_components::{Binder, Follower, FollowerPlacement};
|
use thaw_components::{Binder, Follower, FollowerPlacement};
|
||||||
use thaw_utils::{mount_style, now_date, ComponentRef, Model, OptionalProp};
|
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(
|
pub fn DatePicker(
|
||||||
#[prop(optional, into)] value: Model<Option<NaiveDate>>,
|
#[prop(optional, into)] value: Model<Option<NaiveDate>>,
|
||||||
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
||||||
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
|
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
mount_style("date-picker", include_str!("./date-picker.css"));
|
mount_style("date-picker", include_str!("./date-picker.css"));
|
||||||
let date_picker_ref = NodeRef::<html::Div>::new();
|
let date_picker_ref = NodeRef::<html::Div>::new();
|
||||||
|
@ -69,7 +68,7 @@ pub fn DatePicker(
|
||||||
view! {
|
view! {
|
||||||
<Binder target_ref=date_picker_ref>
|
<Binder target_ref=date_picker_ref>
|
||||||
<div node_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>
|
<InputSuffix slot>
|
||||||
<Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px"/>
|
<Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px"/>
|
||||||
</InputSuffix>
|
</InputSuffix>
|
||||||
|
|
|
@ -39,9 +39,9 @@ pub fn Panel(
|
||||||
if panel_ref.get().is_none() {
|
if panel_ref.get().is_none() {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if current_el == ***panel_ref.get_untracked().unwrap()
|
let panel_el = panel_ref.get_untracked().unwrap();
|
||||||
|| current_el == ***date_picker_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;
|
return;
|
||||||
}
|
}
|
||||||
el = current_el.parent_element();
|
el = current_el.parent_element();
|
||||||
|
|
|
@ -10,7 +10,7 @@ pub use drawer_header_title::*;
|
||||||
pub use inline_drawer::*;
|
pub use inline_drawer::*;
|
||||||
pub use overlay_drawer::*;
|
pub use overlay_drawer::*;
|
||||||
|
|
||||||
use leptos::prelude::MaybeSignal;
|
use leptos::prelude::{MaybeSignal, With};
|
||||||
|
|
||||||
#[derive(Clone, Default, Copy)]
|
#[derive(Clone, Default, Copy)]
|
||||||
pub enum DrawerPosition {
|
pub enum DrawerPosition {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
use super::{DrawerPosition, DrawerSize};
|
use super::{DrawerPosition, DrawerSize};
|
||||||
use crate::ConfigInjection;
|
use crate::ConfigInjection;
|
||||||
use leptos::prelude::*;
|
use leptos::{ev, html, prelude::*};
|
||||||
use thaw_components::{CSSTransition, FocusTrap, Teleport};
|
use thaw_components::{CSSTransition, FocusTrap, Teleport};
|
||||||
use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};
|
use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};
|
||||||
|
|
||||||
|
|
|
@ -4,13 +4,11 @@ use thaw_utils::{class_list, OptionalProp};
|
||||||
#[component]
|
#[component]
|
||||||
pub fn LayoutHeader(
|
pub fn LayoutHeader(
|
||||||
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
||||||
#[prop(optional, into)] style: OptionalProp<MaybeSignal<String>>,
|
|
||||||
children: Children,
|
children: Children,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
view! {
|
view! {
|
||||||
<div
|
<div
|
||||||
class=class_list!["thaw-layout-header", class.map(| c | move || c.get())]
|
class=class_list!["thaw-layout-header", class.map(| c | move || c.get())]
|
||||||
style=style.map(|s| move || s.get())
|
|
||||||
>
|
>
|
||||||
{children()}
|
{children()}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,6 @@ use thaw_utils::{class_list, mount_style, OptionalProp};
|
||||||
#[component]
|
#[component]
|
||||||
pub fn LayoutSider(
|
pub fn LayoutSider(
|
||||||
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
#[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_class: OptionalProp<MaybeSignal<String>>,
|
||||||
#[prop(optional, into)] content_style: OptionalProp<MaybeSignal<String>>,
|
#[prop(optional, into)] content_style: OptionalProp<MaybeSignal<String>>,
|
||||||
children: Children,
|
children: Children,
|
||||||
|
@ -14,7 +13,6 @@ pub fn LayoutSider(
|
||||||
view! {
|
view! {
|
||||||
<div
|
<div
|
||||||
class=class_list!["thaw-layout-sider", class.map(| c | move || c.get())]
|
class=class_list!["thaw-layout-sider", class.map(| c | move || c.get())]
|
||||||
style=style.map(|s| move || s.get())
|
|
||||||
>
|
>
|
||||||
<Scrollbar content_class content_style>
|
<Scrollbar content_class content_style>
|
||||||
{children()}
|
{children()}
|
||||||
|
|
|
@ -77,7 +77,7 @@ pub fn Popover(
|
||||||
let Some(popover_el) = popover_ref.get_untracked() else {
|
let Some(popover_el) = popover_ref.get_untracked() else {
|
||||||
break;
|
break;
|
||||||
};
|
};
|
||||||
if current_el == popover_el {
|
if current_el == **popover_el {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
el = current_el.parent_element();
|
el = current_el.parent_element();
|
||||||
|
@ -87,8 +87,11 @@ pub fn Popover(
|
||||||
on_cleanup(move || handle.remove());
|
on_cleanup(move || handle.remove());
|
||||||
}
|
}
|
||||||
|
|
||||||
target_ref.on_load(move |target_el| {
|
Effect::new(move |_| {
|
||||||
add_event_listener(target_el.into_any(), ev::click, move |event| {
|
let Some(target_el) = target_ref.get() else {
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
add_event_listener(target_el.into(), ev::click, move |event| {
|
||||||
if trigger_type != PopoverTriggerType::Click {
|
if trigger_type != PopoverTriggerType::Click {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -96,6 +99,7 @@ pub fn Popover(
|
||||||
is_show_popover.update(|show| *show = !*show);
|
is_show_popover.update(|show| *show = !*show);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
let PopoverTrigger {
|
let PopoverTrigger {
|
||||||
class: trigger_class,
|
class: trigger_class,
|
||||||
children: trigger_children,
|
children: trigger_children,
|
||||||
|
|
|
@ -22,7 +22,7 @@ pub fn ProgressBar(
|
||||||
move || format!("thaw-progress-bar--{}", color.get().as_str())
|
move || format!("thaw-progress-bar--{}", color.get().as_str())
|
||||||
]
|
]
|
||||||
role="progressbar"
|
role="progressbar"
|
||||||
aria-valuemax=move || max.get()
|
aria_valuemax=move || max.get()
|
||||||
aria-valuemin="0"
|
aria-valuemin="0"
|
||||||
aria-valuenow=move || value.get()
|
aria-valuenow=move || value.get()
|
||||||
>
|
>
|
||||||
|
|
|
@ -11,10 +11,7 @@ pub fn Table(
|
||||||
mount_style("table", include_str!("./table.css"));
|
mount_style("table", include_str!("./table.css"));
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<table
|
<table class=class_list!["thaw-table", class]>
|
||||||
class=class_list!["thaw-table", class]
|
|
||||||
style=move || style.get()
|
|
||||||
>
|
|
||||||
{children()}
|
{children()}
|
||||||
</table>
|
</table>
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,6 @@ use thaw_utils::{class_list, mount_style};
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Caption1(
|
pub fn Caption1(
|
||||||
#[prop(optional, into)] class: MaybeProp<String>,
|
#[prop(optional, into)] class: MaybeProp<String>,
|
||||||
#[prop(optional, into)] style: MaybeProp<String>,
|
|
||||||
#[prop(optional)] tag: TextTag,
|
#[prop(optional)] tag: TextTag,
|
||||||
children: Children,
|
children: Children,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
|
@ -12,14 +11,13 @@ pub fn Caption1(
|
||||||
Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default()));
|
Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default()));
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<Text tag children class style/>
|
<Text tag children class/>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Caption1Strong(
|
pub fn Caption1Strong(
|
||||||
#[prop(optional, into)] class: MaybeProp<String>,
|
#[prop(optional, into)] class: MaybeProp<String>,
|
||||||
#[prop(optional, into)] style: MaybeProp<String>,
|
|
||||||
#[prop(optional)] tag: TextTag,
|
#[prop(optional)] tag: TextTag,
|
||||||
children: Children,
|
children: Children,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
|
@ -28,28 +26,26 @@ pub fn Caption1Strong(
|
||||||
});
|
});
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<Text tag children class style/>
|
<Text tag children class/>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Body1(
|
pub fn Body1(
|
||||||
#[prop(optional, into)] class: MaybeProp<String>,
|
#[prop(optional, into)] class: MaybeProp<String>,
|
||||||
#[prop(optional, into)] style: MaybeProp<String>,
|
|
||||||
#[prop(optional)] tag: TextTag,
|
#[prop(optional)] tag: TextTag,
|
||||||
children: Children,
|
children: Children,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default()));
|
let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default()));
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<Text tag children class style/>
|
<Text tag children class/>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Text(
|
pub fn Text(
|
||||||
#[prop(optional, into)] class: MaybeProp<String>,
|
#[prop(optional, into)] class: MaybeProp<String>,
|
||||||
#[prop(optional, into)] style: MaybeProp<String>,
|
|
||||||
#[prop(optional)] tag: TextTag,
|
#[prop(optional)] tag: TextTag,
|
||||||
#[prop(optional)] code: bool,
|
#[prop(optional)] code: bool,
|
||||||
children: Children,
|
children: Children,
|
||||||
|
@ -58,79 +54,79 @@ pub fn Text(
|
||||||
|
|
||||||
match tag {
|
match tag {
|
||||||
TextTag::B => view! {
|
TextTag::B => view! {
|
||||||
<b class=class_list!["thaw-text", class] style=move || style.get()>
|
<b class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</b>
|
</b>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::Em => view! {
|
TextTag::Em => view! {
|
||||||
<em class=class_list!["thaw-text", class] style=move || style.get()>
|
<em class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</em>
|
</em>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::H1 => view! {
|
TextTag::H1 => view! {
|
||||||
<h1 class=class_list!["thaw-text", class] style=move || style.get()>
|
<h1 class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</h1>
|
</h1>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::H2 => view! {
|
TextTag::H2 => view! {
|
||||||
<h2 class=class_list!["thaw-text", class] style=move || style.get()>
|
<h2 class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</h2>
|
</h2>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::H3 => view! {
|
TextTag::H3 => view! {
|
||||||
<h3 class=class_list!["thaw-text", class] style=move || style.get()>
|
<h3 class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</h3>
|
</h3>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::H4 => view! {
|
TextTag::H4 => view! {
|
||||||
<h4 class=class_list!["thaw-text", class] style=move || style.get()>
|
<h4 class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</h4>
|
</h4>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::H5 => view! {
|
TextTag::H5 => view! {
|
||||||
<h5 class=class_list!["thaw-text", class] style=move || style.get()>
|
<h5 class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</h5>
|
</h5>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::H6 => view! {
|
TextTag::H6 => view! {
|
||||||
<h6 class=class_list!["thaw-text", class] style=move || style.get()>
|
<h6 class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</h6>
|
</h6>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::I => view! {
|
TextTag::I => view! {
|
||||||
<i class=class_list!["thaw-text", class] style=move || style.get()>
|
<i class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</i>
|
</i>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::P => view! {
|
TextTag::P => view! {
|
||||||
<p class=class_list!["thaw-text", class] style=move || style.get()>
|
<p class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</p>
|
</p>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::Pre => view! {
|
TextTag::Pre => view! {
|
||||||
<pre class=class_list!["thaw-text", class] style=move || style.get()>
|
<pre class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</pre>
|
</pre>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::Span => view! {
|
TextTag::Span => view! {
|
||||||
<span class=class_list!["thaw-text", class] style=move || style.get()>
|
<span class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
.into_any(),
|
.into_any(),
|
||||||
TextTag::Strong => view! {
|
TextTag::Strong => view! {
|
||||||
<strong class=class_list!["thaw-text", class] style=move || style.get()>
|
<strong class=class_list!["thaw-text", class]>
|
||||||
{children()}
|
{children()}
|
||||||
</strong>
|
</strong>
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,7 +19,9 @@ pub fn Textarea(
|
||||||
mount_style("textarea", include_str!("./textarea.css"));
|
mount_style("textarea", include_str!("./textarea.css"));
|
||||||
|
|
||||||
let value_trigger = ArcTrigger::new();
|
let value_trigger = ArcTrigger::new();
|
||||||
let on_input = move |ev| {
|
let on_input = {
|
||||||
|
let value_trigger = value_trigger.clone();
|
||||||
|
move |ev| {
|
||||||
let input_value = event_target_value(&ev);
|
let input_value = event_target_value(&ev);
|
||||||
if let Some(allow_value) = allow_value.as_ref() {
|
if let Some(allow_value) = allow_value.as_ref() {
|
||||||
if !allow_value.call(input_value.clone()) {
|
if !allow_value.call(input_value.clone()) {
|
||||||
|
@ -28,6 +30,7 @@ pub fn Textarea(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
value.set(input_value);
|
value.set(input_value);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
let on_internal_focus = move |ev| {
|
let on_internal_focus = move |ev| {
|
||||||
if let Some(on_focus) = on_focus.as_ref() {
|
if let Some(on_focus) = on_focus.as_ref() {
|
||||||
|
|
|
@ -119,12 +119,11 @@ fn Panel(
|
||||||
if current_el == *body {
|
if current_el == *body {
|
||||||
break;
|
break;
|
||||||
};
|
};
|
||||||
if panel_ref.get().is_none() {
|
let Some(panel_el) = panel_ref.get() else {
|
||||||
return;
|
return;
|
||||||
}
|
};
|
||||||
if current_el == ***panel_ref.get_untracked().unwrap()
|
let time_picker_el = time_picker_ref.get().unwrap();
|
||||||
|| current_el == ***time_picker_ref.get_untracked().unwrap()
|
if current_el == **panel_el || current_el == **time_picker_el {
|
||||||
{
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
el = current_el.parent_element();
|
el = current_el.parent_element();
|
||||||
|
|
|
@ -29,7 +29,10 @@ impl ToasterInjection {
|
||||||
let trigger = ArcTrigger::new();
|
let trigger = ArcTrigger::new();
|
||||||
|
|
||||||
(
|
(
|
||||||
Self { sender, trigger },
|
Self {
|
||||||
|
sender,
|
||||||
|
trigger: trigger.clone(),
|
||||||
|
},
|
||||||
ToasterReceiver::new(receiver, trigger),
|
ToasterReceiver::new(receiver, trigger),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,15 +21,15 @@ pub fn Toaster(
|
||||||
view! {
|
view! {
|
||||||
<Teleport>
|
<Teleport>
|
||||||
<div class="thaw-config-provider thaw-toaster-container">
|
<div class="thaw-config-provider thaw-toaster-container">
|
||||||
<For
|
// <For
|
||||||
each=move || toast_list.get()
|
// each=move || toast_list.get()
|
||||||
key=|toast| toast.1.id
|
// key=|toast| toast.1.id
|
||||||
let:toast
|
// let:toast
|
||||||
>
|
// >
|
||||||
<div class=class_list!["thaw-toaster", "thaw-toaster"]>
|
// <div class=class_list!["thaw-toaster", "thaw-toaster"]>
|
||||||
{toast.0}
|
// {toast.0}
|
||||||
</div>
|
// </div>
|
||||||
</For>
|
// </For>
|
||||||
</div>
|
</div>
|
||||||
</Teleport>
|
</Teleport>
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,8 +18,11 @@ pub fn Upload(
|
||||||
let input_ref = NodeRef::<html::Input>::new();
|
let input_ref = NodeRef::<html::Input>::new();
|
||||||
let trigger_ref = NodeRef::<html::Div>::new();
|
let trigger_ref = NodeRef::<html::Div>::new();
|
||||||
|
|
||||||
trigger_ref.on_load(move |trigger_ref| {
|
Effect::new(move |_| {
|
||||||
let handle = add_event_listener(trigger_ref.into_any(), ev::click, 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() {
|
if let Some(input_ref) = input_ref.get_untracked() {
|
||||||
input_ref.click();
|
input_ref.click();
|
||||||
}
|
}
|
||||||
|
|
|
@ -71,7 +71,7 @@ pub fn Binder<E>(
|
||||||
) -> 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,
|
||||||
{
|
{
|
||||||
mount_style("binder", include_str!("./binder.css"));
|
mount_style("binder", include_str!("./binder.css"));
|
||||||
let Follower {
|
let Follower {
|
||||||
|
@ -186,7 +186,7 @@ fn FollowerContainer<E>(
|
||||||
) -> 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,
|
||||||
{
|
{
|
||||||
let content_ref = NodeRef::<html::Div>::new();
|
let content_ref = NodeRef::<html::Div>::new();
|
||||||
let content_style = RwSignal::new(String::new());
|
let content_style = RwSignal::new(String::new());
|
||||||
|
|
|
@ -2,6 +2,7 @@ pub mod class_list;
|
||||||
mod dom;
|
mod dom;
|
||||||
mod event_listener;
|
mod event_listener;
|
||||||
mod hooks;
|
mod hooks;
|
||||||
|
pub mod macros;
|
||||||
mod optional_prop;
|
mod optional_prop;
|
||||||
mod signals;
|
mod signals;
|
||||||
mod throttle;
|
mod throttle;
|
||||||
|
|
82
thaw_utils/src/macros.rs
Normal file
82
thaw_utils/src/macros.rs
Normal 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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue