From dc6df4439e0e37e3ae0239f64495adca0c444902 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Fri, 30 Jun 2023 22:25:41 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20update=20leptos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Cargo.toml | 12 ++-- examples/basic/Cargo.toml | 14 ++--- examples/basic/src/pages/button/mod.rs | 4 +- examples/basic/src/pages/tabbar/mod.rs | 2 +- gh-pages/Cargo.toml | 10 +--- gh-pages/src/pages/button/mod.rs | 6 +- gh-pages/src/pages/tabbar/mod.rs | 2 +- src/button/mod.rs | 3 +- src/checkbox/mod.rs | 6 +- src/icon/mod.rs | 83 ++++++++++++++++++++++++++ src/lib.rs | 2 + src/mobile/nav_bar/mod.rs | 14 ++--- src/mobile/tabbar/tabbar_item.rs | 9 +-- src/modal/mod.rs | 4 +- 14 files changed, 125 insertions(+), 46 deletions(-) create mode 100644 src/icon/mod.rs diff --git a/Cargo.toml b/Cargo.toml index 2c41732..5b3e2c8 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -13,18 +13,16 @@ license = "MIT" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [ - "stable", -] } +leptos = { version = "0.4.0", features = ["csr"] } stylers = "0.3.1" web-sys = { version = "0.3.62", features = ["DomRect"] } -leptos_dom = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc" } -leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = [ +leptos_dom = { version = "0.4.0" } +wasm-bindgen = "0.2.85" +icondata = { version = "0.0.7", features = [ "AiCloseOutlined", "AiCheckOutlined", "AiLeftOutlined", ] } -wasm-bindgen = "0.2.85" [workspace] -members = ["examples/basic", "gh-pages"] +members = ["examples/basic", "examples/min", "gh-pages"] diff --git a/examples/basic/Cargo.toml b/examples/basic/Cargo.toml index 25f8959..003b630 100644 --- a/examples/basic/Cargo.toml +++ b/examples/basic/Cargo.toml @@ -6,11 +6,11 @@ edition = "2021" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [ - "stable", -] } +leptos = { version = "0.4.0", features = ["csr"] } melt-ui = { path = "../../" } -leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = ["AiCloseOutlined", "AiCheckOutlined"] } -leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = ["csr"] } - -regex = "1.8.2" \ No newline at end of file +icondata = { version = "0.0.7", features = [ + "AiCloseOutlined", + "AiCheckOutlined", +] } +leptos_router = { version = "0.4.0", features = ["csr"] } +regex = "1.8.2" diff --git a/examples/basic/src/pages/button/mod.rs b/examples/basic/src/pages/button/mod.rs index 5c4f2d7..a181112 100644 --- a/examples/basic/src/pages/button/mod.rs +++ b/examples/basic/src/pages/button/mod.rs @@ -29,10 +29,10 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView { - -
diff --git a/examples/basic/src/pages/tabbar/mod.rs b/examples/basic/src/pages/tabbar/mod.rs index 4c94bc4..2be5b9e 100644 --- a/examples/basic/src/pages/tabbar/mod.rs +++ b/examples/basic/src/pages/tabbar/mod.rs @@ -14,7 +14,7 @@ pub fn TabbarPage(cx: Scope) -> impl IntoView { "if" - + "or" diff --git a/gh-pages/Cargo.toml b/gh-pages/Cargo.toml index c3e5018..c88ffad 100644 --- a/gh-pages/Cargo.toml +++ b/gh-pages/Cargo.toml @@ -6,16 +6,12 @@ edition = "2021" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [ - "stable", -] } +leptos = { version = "0.4.0", features = ["csr"] } melt-ui = { path = "../" } -leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = [ +icondata = { version = "0.0.7", features = [ "AiCloseOutlined", "AiCheckOutlined", ] } -leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [ - "csr", -] } +leptos_router = { version = "0.4.0", features = ["csr"] } indoc = "2.0.1" regex = "1.8.2" diff --git a/gh-pages/src/pages/button/mod.rs b/gh-pages/src/pages/button/mod.rs index 5c4f2d7..703b334 100644 --- a/gh-pages/src/pages/button/mod.rs +++ b/gh-pages/src/pages/button/mod.rs @@ -29,10 +29,10 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView { - -
@@ -40,4 +40,4 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView {
} -} \ No newline at end of file +} diff --git a/gh-pages/src/pages/tabbar/mod.rs b/gh-pages/src/pages/tabbar/mod.rs index 4c94bc4..2be5b9e 100644 --- a/gh-pages/src/pages/tabbar/mod.rs +++ b/gh-pages/src/pages/tabbar/mod.rs @@ -14,7 +14,7 @@ pub fn TabbarPage(cx: Scope) -> impl IntoView { "if" - + "or" diff --git a/src/button/mod.rs b/src/button/mod.rs index 5dbf5cf..4a76249 100644 --- a/src/button/mod.rs +++ b/src/button/mod.rs @@ -1,7 +1,6 @@ mod theme; -use crate::{components::*, theme::*, utils::mount_style::mount_style}; +use crate::{components::*, icon::*, theme::*, utils::mount_style::mount_style}; use leptos::*; -use leptos_icons::*; use stylers::style_sheet_str; pub use theme::ButtonTheme; diff --git a/src/checkbox/mod.rs b/src/checkbox/mod.rs index c43ad87..b5b8744 100644 --- a/src/checkbox/mod.rs +++ b/src/checkbox/mod.rs @@ -1,6 +1,6 @@ -use crate::{theme::use_theme, utils::mount_style::mount_style, Theme, components::*}; +use crate::{components::*, icon::*, theme::use_theme, utils::mount_style::mount_style, Theme}; +use icondata::AiIcon; use leptos::*; -use leptos_icons::*; use stylers::style_sheet_str; #[component] @@ -29,7 +29,7 @@ pub fn Checkbox(
- +
diff --git a/src/icon/mod.rs b/src/icon/mod.rs new file mode 100644 index 0000000..798aa87 --- /dev/null +++ b/src/icon/mod.rs @@ -0,0 +1,83 @@ +// copy https://github.com/Carlosted/leptos-icons +// leptos updated version causes leptos_icons error +pub use icondata::*; +use leptos::SignalGet; + +/// The Icon component. +#[leptos::component] +pub fn Icon( + cx: leptos::Scope, + /// The icon to show. + #[prop(into)] + icon: leptos::MaybeSignal, + /// The width of the icon (horizontal side length of the square surrounding the icon). Defaults to "1em". + #[prop(into, optional)] + width: Option>, + /// The height of the icon (vertical side length of the square surrounding the icon). Defaults to "1em". + #[prop(into, optional)] + height: Option>, + /// HTML class attribute. + #[prop(into, optional)] + class: Option>, + /// HTML style attribute. + #[prop(into, optional)] + style: Option>, +) -> impl leptos::IntoView { + let icon: IconData = icon.get().into(); + + let mut svg = leptos::svg::svg(cx); + if let Some(classes) = class { + svg = svg.classes(classes.get()); + } + // The style set by the user overrides the style set by the icon. + svg = match (style, icon.style) { + (Some(a), Some(b)) => svg.attr("style", format!("{b} {}", a.get())), + (Some(a), None) => svg.attr("style", a.get()), + (None, Some(b)) => svg.attr("style", b), + (None, None) => svg, + }; + if let Some(x) = icon.x { + svg = svg.attr("x", x); + } + if let Some(y) = icon.y { + svg = svg.attr("x", y); + } + // We ignore the width and height attributes of the icon, even if the user hasn't specified any. + svg = svg.attr( + "width", + leptos::Attribute::String(match (width, icon.width) { + (Some(a), Some(_b)) => std::borrow::Cow::from(a.get()), + (Some(a), None) => std::borrow::Cow::from(a.get()), + (None, Some(_b)) => std::borrow::Cow::from("1em"), + (None, None) => std::borrow::Cow::from("1em"), + }), + ); + svg = svg.attr( + "height", + leptos::Attribute::String(match (height, icon.height) { + (Some(a), Some(_b)) => std::borrow::Cow::from(a.get()), + (Some(a), None) => std::borrow::Cow::from(a.get()), + (None, Some(_b)) => std::borrow::Cow::from("1em"), + (None, None) => std::borrow::Cow::from("1em"), + }), + ); + if let Some(view_box) = icon.view_box { + svg = svg.attr("viewBox", view_box); + } + if let Some(stroke_linecap) = icon.stroke_linecap { + svg = svg.attr("stroke-linecap", stroke_linecap); + } + if let Some(stroke_linejoin) = icon.stroke_linejoin { + svg = svg.attr("stroke-linejoin", stroke_linejoin); + } + if let Some(stroke_width) = icon.stroke_width { + svg = svg.attr("stroke-width", stroke_width); + } + if let Some(stroke) = icon.stroke { + svg = svg.attr("stroke", stroke); + } + svg = svg.attr("fill", icon.fill.unwrap_or("currentColor")); + svg = svg.attr("role", "graphics-symbol"); + svg = svg.inner_html(icon.data); + leptos::IntoView::into_view(svg, cx) +} diff --git a/src/lib.rs b/src/lib.rs index 3905dc1..e59b885 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -3,6 +3,7 @@ mod card; mod checkbox; mod code; mod components; +mod icon; mod image; mod input; mod layout; @@ -24,6 +25,7 @@ pub use button::*; pub use card::*; pub use checkbox::*; pub use code::*; +pub use icon::*; pub use image::*; pub use input::*; pub use layout::*; diff --git a/src/mobile/nav_bar/mod.rs b/src/mobile/nav_bar/mod.rs index f6a6f42..d9b2a86 100644 --- a/src/mobile/nav_bar/mod.rs +++ b/src/mobile/nav_bar/mod.rs @@ -1,6 +1,5 @@ -use crate::{utils::mount_style::mount_style, components::*}; +use crate::{components::*, icon::*, utils::mount_style::mount_style}; use leptos::*; -use leptos_icons::*; use stylers::style_sheet_str; use web_sys::MouseEvent; @@ -13,9 +12,10 @@ pub fn NavBar( #[prop(optional, into)] click_left: Option>, #[prop(optional, into)] right_text: MaybeSignal<&'static str>, #[prop(optional, into)] click_right: Option>, - ) -> impl IntoView { - let class_name = mount_style("nav-bar", || style_sheet_str!("./src/mobile/nav_bar/nav-bar.css")); + let class_name = mount_style("nav-bar", || { + style_sheet_str!("./src/mobile/nav_bar/nav-bar.css") + }); let onclick_left = move |ev| { if let Some(click_left) = click_left { @@ -35,7 +35,7 @@ pub fn NavBar(
- + { left_text.get() } @@ -51,7 +51,7 @@ pub fn NavBar( { right_text.get() }
- +
} -} \ No newline at end of file +} diff --git a/src/mobile/tabbar/tabbar_item.rs b/src/mobile/tabbar/tabbar_item.rs index 0d2ea88..2a79301 100644 --- a/src/mobile/tabbar/tabbar_item.rs +++ b/src/mobile/tabbar/tabbar_item.rs @@ -1,9 +1,8 @@ use super::{use_tabbar, TabbarInjectionKey}; -use crate::{theme::use_theme, utils::mount_style::mount_style, Theme}; +use crate::components::*; +use crate::{icon::*, theme::use_theme, utils::mount_style::mount_style, Theme}; use leptos::*; use stylers::style_sheet_str; -use crate::components::*; -use leptos_icons::*; #[component] pub fn TabbarItem( @@ -12,7 +11,9 @@ pub fn TabbarItem( #[prop(optional, into)] icon: Option, children: Children, ) -> impl IntoView { - let class_name = mount_style("tabbar-item", || style_sheet_str!("./src/mobile/tabbar/tabbar-item.css")); + let class_name = mount_style("tabbar-item", || { + style_sheet_str!("./src/mobile/tabbar/tabbar-item.css") + }); let theme = use_theme(cx, Theme::light); let tabbar = use_tabbar(cx); let onclick_select = move |_| { diff --git a/src/modal/mod.rs b/src/modal/mod.rs index a60c106..db5d3c9 100644 --- a/src/modal/mod.rs +++ b/src/modal/mod.rs @@ -1,10 +1,10 @@ use crate::card::*; use crate::components::OptionComp; +use crate::icon::*; use crate::teleport::*; use crate::utils::mount_style::mount_style; use leptos::*; use stylers::style_sheet_str; -use leptos_icons::*; #[slot] pub struct ModalFooter { @@ -35,7 +35,7 @@ pub fn Modal( - + { children(cx) }