mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
✨ feat: update leptos
This commit is contained in:
parent
405de6a2d9
commit
dc6df4439e
14 changed files with 125 additions and 46 deletions
12
Cargo.toml
12
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"]
|
||||
|
|
|
@ -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"] }
|
||||
|
||||
icondata = { version = "0.0.7", features = [
|
||||
"AiCloseOutlined",
|
||||
"AiCheckOutlined",
|
||||
] }
|
||||
leptos_router = { version = "0.4.0", features = ["csr"] }
|
||||
regex = "1.8.2"
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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
83
src/icon/mod.rs
Normal 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)
|
||||
}
|
|
@ -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::*;
|
||||
|
|
|
@ -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() }
|
||||
|
|
|
@ -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 |_| {
|
||||
|
|
|
@ -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) }
|
||||
|
|
Loading…
Add table
Reference in a new issue