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

pref: nav

Browse source
This commit is contained in:
luoxiao 2024-06-26 22:12:28 +08:00
parent 4bda29d741
commit 75a926e6b2
7 changed files with 92 additions and 259 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -139,10 +139,26 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/accordion".into(), value: "/components/accordion".into(),
label: "Accordion".into(), label: "Accordion".into(),
}, },
MenuItemOption {
value: "/components/alert".into(),
label: "Alert".into(),
},
MenuItemOption {
value: "/components/anchor".into(),
label: "Anchor".into(),
},
MenuItemOption {
value: "/components/auto-complete".into(),
label: "Auto Complete".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/avatar".into(), value: "/components/avatar".into(),
label: "Avatar".into(), label: "Avatar".into(),
}, },
MenuItemOption {
value: "/components/back-top".into(),
label: "Back Top".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/badge".into(), value: "/components/badge".into(),
label: "Badge".into(), label: "Badge".into(),
@ -155,10 +171,22 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/button".into(), value: "/components/button".into(),
label: "Button".into(), label: "Button".into(),
}, },
MenuItemOption {
value: "/components/calendar".into(),
label: "Calendar".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/card".into(), value: "/components/card".into(),
label: "Card".into(), label: "Card".into(),
}, },
MenuItemOption {
value: "/components/checkbox".into(),
label: "Checkbox".into(),
},
MenuItemOption {
value: "/components/color-picker".into(),
label: "Color Picker".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/config-provider".into(), value: "/components/config-provider".into(),
label: "Config Provider".into(), label: "Config Provider".into(),
@ -171,14 +199,74 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/divider".into(), value: "/components/divider".into(),
label: "Divider".into(), label: "Divider".into(),
}, },
MenuItemOption {
value: "/components/drawer".into(),
label: "Drawer".into(),
},
MenuItemOption {
value: "/components/grid".into(),
label: "Grid".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/icon".into(), value: "/components/icon".into(),
label: "Icon".into(), label: "Icon".into(),
}, },
MenuItemOption {
value: "/components/image".into(),
label: "Image".into(),
},
MenuItemOption {
value: "/components/input".into(),
label: "Input".into(),
},
MenuItemOption {
value: "/components/layout".into(),
label: "Layout".into(),
},
MenuItemOption {
value: "/components/loading-bar".into(),
label: "Loading Bar".into(),
},
MenuItemOption {
value: "/components/message".into(),
label: "Message".into(),
},
MenuItemOption {
value: "/components/modal".into(),
label: "Modal".into(),
},
MenuItemOption {
value: "/components/popover".into(),
label: "Popover".into(),
},
MenuItemOption {
value: "/components/progress".into(),
label: "Progress".into(),
},
MenuItemOption {
value: "/components/radio".into(),
label: "Radio".into(),
},
MenuItemOption {
value: "/components/scrollbar".into(),
label: "Scrollbar".into(),
},
MenuItemOption {
value: "/components/select".into(),
label: "Select".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/skeleton".into(), value: "/components/skeleton".into(),
label: "Skeleton".into(), label: "Skeleton".into(),
}, },
MenuItemOption {
value: "/components/slider".into(),
label: "Slider".into(),
},
MenuItemOption {
value: "/components/space".into(),
label: "Space".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/spin-button".into(), value: "/components/spin-button".into(),
label: "Spin Button".into(), label: "Spin Button".into(),
@ -187,6 +275,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/spinner".into(), value: "/components/spinner".into(),
label: "Spinner".into(), label: "Spinner".into(),
}, },
MenuItemOption {
value: "/components/switch".into(),
label: "Switch".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/tab-list".into(), value: "/components/tab-list".into(),
label: "Tab List".into(), label: "Tab List".into(),
@ -211,102 +303,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/time-picker".into(), value: "/components/time-picker".into(),
label: "Time Picker".into(), label: "Time Picker".into(),
}, },
MenuItemOption {
value: "/components/auto-complete".into(),
label: "Auto Complete".into(),
},
MenuItemOption {
value: "/components/color-picker".into(),
label: "Color Picker".into(),
},
MenuItemOption {
value: "/components/checkbox".into(),
label: "Checkbox".into(),
},
MenuItemOption {
value: "/components/input".into(),
label: "Input".into(),
},
MenuItemOption {
value: "/components/radio".into(),
label: "Radio".into(),
},
MenuItemOption {
value: "/components/select".into(),
label: "Select".into(),
},
MenuItemOption {
value: "/components/slider".into(),
label: "Slider".into(),
},
MenuItemOption {
value: "/components/switch".into(),
label: "Switch".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/upload".into(), value: "/components/upload".into(),
label: "Upload".into(), label: "Upload".into(),
}, },
MenuItemOption {
value: "/components/calendar".into(),
label: "Calendar".into(),
},
MenuItemOption {
value: "/components/image".into(),
label: "Image".into(),
},
MenuItemOption {
value: "/components/anchor".into(),
label: "Anchor".into(),
},
MenuItemOption {
value: "/components/back-top".into(),
label: "Back Top".into(),
},
MenuItemOption {
value: "/components/loading-bar".into(),
label: "Loading Bar".into(),
},
MenuItemOption {
value: "/components/alert".into(),
label: "Alert".into(),
},
MenuItemOption {
value: "/components/drawer".into(),
label: "Drawer".into(),
},
MenuItemOption {
value: "/components/message".into(),
label: "Message".into(),
},
MenuItemOption {
value: "/components/modal".into(),
label: "Modal".into(),
},
MenuItemOption {
value: "/components/popover".into(),
label: "Popover".into(),
},
MenuItemOption {
value: "/components/progress".into(),
label: "Progress".into(),
},
MenuItemOption {
value: "/components/layout".into(),
label: "Layout".into(),
},
MenuItemOption {
value: "/components/grid".into(),
label: "Grid".into(),
},
MenuItemOption {
value: "/components/space".into(),
label: "Space".into(),
},
MenuItemOption {
value: "/components/scrollbar".into(),
label: "Scrollbar".into(),
},
], ],
}, },
MenuGroupOption { MenuGroupOption {

6
thaw/src/menu/menu-group.css
View file

@ -1,6 +0,0 @@
.thaw-menu-group {
padding: 0.85rem 1.15em 0.1rem;
font-size: 0.86rem;
font-weight: bold;
color: var(--thaw-font-color);
}

22
thaw/src/menu/menu-item.css
View file

@ -1,22 +0,0 @@
.thaw-menu-item__content {
margin: 0.3rem 0.4rem;
padding: 0.5rem 0.75rem;
color: var(--thaw-font-color);
cursor: pointer;
border-radius: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
transition-property: color, background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
.thaw-menu-item__content:hover:not(.thaw-menu-item__content--selected) {
background-color: var(--thaw-background-color-hover);
}
.thaw-menu-item__content--selected {
color: var(--thaw-font-color-active);
background-color: var(--thaw-background-color);
}

30
thaw/src/menu/menu_group.rs
View file

@ -1,30 +0,0 @@
use crate::{theme::use_theme, Theme};
use leptos::*;
use thaw_utils::{class_list, mount_style, OptionalProp};
#[component]
pub fn MenuGroup(
#[prop(into)] label: String,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
children: Children,
) -> impl IntoView {
mount_style("menu-group", include_str!("./menu-group.css"));
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!("--thaw-font-color: {};", theme.menu.group_color));
});
css_vars
});
view! {
<div
class=class_list!["thaw-menu-group", class.map(| c | move || c.get())]
style=move || css_vars.get()
>
{label}
</div>
{children()}
}
}

53
thaw/src/menu/menu_item.rs
View file

@ -1,53 +0,0 @@
use super::use_menu;
use crate::{theme::use_theme, Theme};
use leptos::*;
use thaw_utils::{class_list, mount_style, OptionalProp};
#[component]
pub fn MenuItem(
#[prop(into)] key: MaybeSignal<String>,
#[prop(into)] label: MaybeSignal<String>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
) -> impl IntoView {
mount_style("menu-item", include_str!("./menu-item.css"));
let theme = use_theme(Theme::light);
let menu = use_menu();
let click_key = key.clone();
let on_click = move |_| {
let click_key = click_key.get();
if menu.0.with(|key| key != &click_key) {
menu.0.set(click_key);
}
};
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
let font_color = theme.common.color_primary.clone();
css_vars.push_str(&format!("--thaw-font-color-active: {font_color};"));
css_vars.push_str(&format!("--thaw-font-color: {};", theme.menu.color));
css_vars.push_str(&format!("--thaw-background-color: {font_color}1a;"));
css_vars.push_str(&format!(
"--thaw-background-color-hover: {};",
theme.menu.item_color_hover
));
});
css_vars
});
view! {
<div class="thaw-menu-item">
<div
class=class_list![
"thaw-menu-item__content", ("thaw-menu-item__content--selected", move || menu.0
.get() == key.get()), class.map(| c | move || c.get())
]
on:click=on_click
style=move || css_vars.get()
>
{move || label.get()}
</div>
</div>
}
}

30
thaw/src/menu/mod.rs
View file

@ -1,30 +0,0 @@
mod menu_group;
mod menu_item;
mod theme;
pub use menu_group::MenuGroup;
pub use menu_item::*;
pub use theme::MenuTheme;
use leptos::*;
use thaw_utils::{class_list, Model, OptionalProp};
#[component]
pub fn Menu(
#[prop(optional, into)] value: Model<String>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
children: Children,
) -> impl IntoView {
view! {
<Provider value=MenuInjection(value)>
<div class=class_list!["thaw-menu", class.map(| c | move || c.get())]>{children()}</div>
</Provider>
}
}
#[derive(Clone)]
pub(crate) struct MenuInjection(pub Model<String>);
pub(crate) fn use_menu() -> MenuInjection {
expect_context()
}

26
thaw/src/menu/theme.rs
View file

@ -1,26 +0,0 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct MenuTheme {
pub color: String,
pub item_color_hover: String,
pub group_color: String,
}
impl ThemeMethod for MenuTheme {
fn light() -> Self {
Self {
color: "#4b5263".into(),
item_color_hover: "#f3f5f6".into(),
group_color: "#111727".into(),
}
}
fn dark() -> Self {
Self {
color: "#9ca5b0".into(),
item_color_hover: "#383f5233".into(),
group_color: "#ffffffe6".into(),
}
}
}