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: update leptos

Browse source
This commit is contained in:
luoxiao 2023-06-30 22:25:41 +08:00
parent 405de6a2d9
commit dc6df4439e
14 changed files with 125 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Cargo.toml
View file

@ -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"]

14
examples/basic/Cargo.toml
View file

@ -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"
icondata = { version = "0.0.7", features = [
"AiCloseOutlined",
"AiCheckOutlined",
] }
leptos_router = { version = "0.4.0", features = ["csr"] }
regex = "1.8.2"

4
examples/basic/src/pages/button/mod.rs
View file

@ -29,10 +29,10 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView {
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
</Space>
<div style="padding-top: 12px">

2
examples/basic/src/pages/tabbar/mod.rs
View file

@ -14,7 +14,7 @@ pub fn TabbarPage(cx: Scope) -> impl IntoView {
<TabbarItem name="i">
"if"
</TabbarItem>
<TabbarItem name="o" icon=leptos_icons::AiIcon::AiCloseOutlined>
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
"or"
</TabbarItem>
</Tabbar>

10
gh-pages/Cargo.toml
View file

@ -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"

6
gh-pages/src/pages/button/mod.rs
View file

@ -29,10 +29,10 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView {
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
</Space>
<div style="padding-top: 12px">
@ -40,4 +40,4 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView {
<Button style="width: 40px; height: 20px">"size"</Button>
</div>
}
}
}

2
gh-pages/src/pages/tabbar/mod.rs
View file

@ -14,7 +14,7 @@ pub fn TabbarPage(cx: Scope) -> impl IntoView {
<TabbarItem name="i">
"if"
</TabbarItem>
<TabbarItem name="o" icon=leptos_icons::AiIcon::AiCloseOutlined>
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
"or"
</TabbarItem>
</Tabbar>

3
src/button/mod.rs
View file

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

6
src/checkbox/mod.rs
View file

@ -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(
<div class="melt-checkbox__dot">
<If cond=checked>
<Then slot>
<Icon icon=AiIcon::AiCheckOutlined style="color: white"/>
<Icon icon=Icon::from(AiIcon::AiCheckOutlined) style="color: white"/>
</Then>
</If>
</div>

83
src/icon/mod.rs Normal file
View file

@ -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<Icon>,
/// The width of the icon (horizontal side length of the square surrounding the icon). Defaults to "1em".
#[prop(into, optional)]
width: Option<leptos::MaybeSignal<String>>,
/// The height of the icon (vertical side length of the square surrounding the icon). Defaults to "1em".
#[prop(into, optional)]
height: Option<leptos::MaybeSignal<String>>,
/// HTML class attribute.
#[prop(into, optional)]
class: Option<leptos::MaybeSignal<String>>,
/// HTML style attribute.
#[prop(into, optional)]
style: Option<leptos::MaybeSignal<String>>,
) -> 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)
}

2
src/lib.rs
View file

@ -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::*;

14
src/mobile/nav_bar/mod.rs
View file

@ -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<SignalSetter<MouseEvent>>,
#[prop(optional, into)] right_text: MaybeSignal<&'static str>,
#[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
) -> 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(
<div class="melt-nav-bar__left" on:click=onclick_left>
<If cond=left_arrow>
<Then slot>
<Icon icon=AiIcon::AiLeftOutlined/>
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
</Then>
</If>
{ left_text.get() }
@ -51,7 +51,7 @@ pub fn NavBar(
{ right_text.get() }
</div>
</Then>
</If>
</If>
</div>
}
}
}

9
src/mobile/tabbar/tabbar_item.rs
View file

@ -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<Icon>,
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 |_| {

4
src/modal/mod.rs
View file

@ -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(
</CardHeader>
<CardHeaderExtra slot>
<span style="cursor: pointer;" on:click=move |_| show.set(false)>
<Icon icon=AiIcon::AiCloseOutlined/>
<Icon icon=Icon::from(AiIcon::AiCloseOutlined)/>
</span>
</CardHeaderExtra>
{ children(cx) }