adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: change prop

Browse source
This commit is contained in:
luoxiao 2023-10-11 21:25:11 +08:00
parent 17f909d861
commit 219312a6f0
9 changed files with 51 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/src/pages/components.rs
View file

@ -29,7 +29,7 @@ pub fn ComponentsPage() -> impl IntoView {
<SiteHeader/>
<Layout has_sider=true position=LayoutPosition::ABSOLUTE style="top: 54px;">
<LayoutSider>
<Menu selected>
<Menu value=selected>
<MenuGroup label="Common Components">
<MenuItem key="menu" label="Menu"/>
<MenuItem key="slider" label="Slider"/>

8
demo/src/pages/menu/mod.rs
View file

@ -5,12 +5,12 @@ use prisms::highlight_str;
#[component]
pub fn MenuPage() -> impl IntoView {
let selected = create_rw_signal(String::from("o"));
let value = create_rw_signal(String::from("o"));
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Menu"</h1>
<Demo>
<Menu selected>
<Menu value>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
@ -18,9 +18,9 @@ pub fn MenuPage() -> impl IntoView {
slot
html=highlight_str!(
r#"
let selected = create_rw_signal(String::from("o"));
let value = create_rw_signal(String::from("o"));
<Menu selected>
<Menu value>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>

8
demo/src/pages/tabbar/mod.rs
View file

@ -18,9 +18,9 @@ pub fn TabbarPage() -> impl IntoView {
slot
html=highlight_str!(
r#"
let selected = create_rw_signal(String::from("o"));
let value = create_rw_signal(String::from("o"));
<Tabbar selected>
<Tabbar value>
<TabbarItem name="a">
"and"
</TabbarItem>
@ -49,10 +49,10 @@ pub fn TabbarPage() -> impl IntoView {
#[component]
pub fn TabbarDemoPage() -> impl IntoView {
let selected = create_rw_signal(String::from("o"));
let value = create_rw_signal(String::from("o"));
view! {
<div style="height: 100vh; background: #f5f5f5">
{move || selected.get()} <Tabbar selected>
{move || value.get()} <Tabbar value>
<TabbarItem name="a">"and"</TabbarItem>
<TabbarItem name="i">"if"</TabbarItem>
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>

10
demo/src/pages/tabs/mod.rs
View file

@ -5,12 +5,12 @@ use prisms::highlight_str;
#[component]
pub fn TabsPage() -> impl IntoView {
let active_key = create_rw_signal("apple");
let value = create_rw_signal("apple");
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Tabs"</h1>
<h1>"Tabs2"</h1>
<Demo>
<Tabs active_key>
<Tabs value>
<Tab key="apple" label="Apple">
"apple"
</Tab>
@ -22,8 +22,8 @@ pub fn TabsPage() -> impl IntoView {
slot
html=highlight_str!(
r#"
let active_key = create_rw_signal("apple");
<Tabs active_key>
let value = create_rw_signal("apple");
<Tabs value>
<Tab key="apple" label="Apple">
"apple"
</Tab>

4
src/input/mod.rs
View file

@ -2,7 +2,7 @@ mod theme;
use crate::{
theme::{use_theme, Theme},
utils::mount_style::mount_style,
utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
};
use leptos::*;
pub use theme::InputTheme;
@ -25,7 +25,7 @@ impl InputVariant {
#[component]
pub fn Input(
#[prop(into)] value: RwSignal<String>,
#[prop(optional, into)] value: MaybeRwSignal<String>,
#[prop(optional, into)] variant: MaybeSignal<InputVariant>,
) -> impl IntoView {
let theme = use_theme(Theme::light);

10
src/menu/mod.rs
View file

@ -10,12 +10,12 @@ pub use theme::MenuTheme;
#[component]
pub fn Menu(
#[prop(optional, into)] selected: MaybeRwSignal<String>,
#[prop(optional, into)] value: MaybeRwSignal<String>,
children: Children,
) -> impl IntoView {
let menu_injection_key = create_rw_signal(MenuInjectionKey::new(selected.get_untracked()));
let menu_injection_key = create_rw_signal(MenuInjectionKey::new(value.get_untracked()));
create_effect(move |_| {
let selected_key = selected.get();
let selected_key = value.get();
let key = menu_injection_key.get_untracked();
if selected_key != key.value {
menu_injection_key.set(MenuInjectionKey::new(selected_key));
@ -23,10 +23,10 @@ pub fn Menu(
});
create_effect(move |_| {
let selected_key = selected.get_untracked();
let selected_key = value.get_untracked();
let key = menu_injection_key.get();
if selected_key != key.value {
selected.set(key.value);
value.set(key.value);
}
});
provide_context(menu_injection_key);

15
src/mobile/tabbar/mod.rs
View file

@ -1,17 +1,20 @@
mod tabbar_item;
use crate::utils::mount_style::mount_style;
use crate::utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style};
use leptos::*;
pub use tabbar_item::*;
#[component]
pub fn Tabbar(#[prop(into)] selected: RwSignal<String>, children: Children) -> impl IntoView {
pub fn Tabbar(
#[prop(optional, into)] value: MaybeRwSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("tabbar", include_str!("./tabbar.css"));
let tabbar_injection_key = create_rw_signal(TabbarInjectionKey::new(selected.get()));
let tabbar_injection_key = create_rw_signal(TabbarInjectionKey::new(value.get()));
create_effect(move |_| {
let selected_key = selected.get();
let selected_key = value.get();
let key = tabbar_injection_key.get_untracked();
if selected_key != key.value {
tabbar_injection_key.set(TabbarInjectionKey::new(selected_key));
@ -19,10 +22,10 @@ pub fn Tabbar(#[prop(into)] selected: RwSignal<String>, children: Children) -> i
});
create_effect(move |_| {
let selected_key = selected.get_untracked();
let selected_key = value.get_untracked();
let key = tabbar_injection_key.get();
if selected_key != key.value {
selected.set(key.value);
value.set(key.value);
}
});
provide_context(tabbar_injection_key);

8
src/slider/mod.rs
View file

@ -1,10 +1,14 @@
use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
use crate::{
theme::use_theme,
utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
Theme,
};
use leptos::*;
use wasm_bindgen::JsCast;
#[component]
pub fn Slider(
#[prop(into)] value: RwSignal<f64>,
#[prop(optional, into)] value: MaybeRwSignal<f64>,
#[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal<f64>,
) -> impl IntoView {
let theme = use_theme(Theme::light);

21
src/tabs/mod.rs
View file

@ -1,15 +1,24 @@
mod tab;
use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
use std::ops::Deref;
use crate::{
theme::use_theme,
utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
Theme,
};
use leptos::*;
pub use tab::*;
#[component]
pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl IntoView {
pub fn Tabs(
#[prop(optional, into)] value: MaybeRwSignal<&'static str>,
children: Children,
) -> impl IntoView {
mount_style("tabs", include_str!("./tabs.css"));
let tab_options_vec = create_rw_signal(vec![]);
provide_context(TabsInjectionKey {
active_key: active_key.clone(),
active_key: value.deref().clone(),
tab_options_vec: tab_options_vec.clone(),
});
let theme = use_theme(Theme::light);
@ -48,7 +57,7 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
let Some(label_list) = label_list_ref.get() else {
return;
};
if options.key == active_key.get() {
if options.key == value.get() {
request_animation_frame(move || {
let list_rect = label_list.get_bounding_client_rect();
let rect = label.get_bounding_client_rect();
@ -67,10 +76,10 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
class="melt-tabs__label"
class=(
"melt-tabs__label--active",
move || options.key == active_key.get(),
move || options.key == value.get(),
)
on:click=move |_| active_key.set(options.key)
on:click=move |_| value.set(options.key)
ref=label_ref
>
{options.label}