mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 06:19: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
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [
|
leptos = { version = "0.4.0", features = ["csr"] }
|
||||||
"stable",
|
|
||||||
] }
|
|
||||||
stylers = "0.3.1"
|
stylers = "0.3.1"
|
||||||
web-sys = { version = "0.3.62", features = ["DomRect"] }
|
web-sys = { version = "0.3.62", features = ["DomRect"] }
|
||||||
leptos_dom = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc" }
|
leptos_dom = { version = "0.4.0" }
|
||||||
leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = [
|
wasm-bindgen = "0.2.85"
|
||||||
|
icondata = { version = "0.0.7", features = [
|
||||||
"AiCloseOutlined",
|
"AiCloseOutlined",
|
||||||
"AiCheckOutlined",
|
"AiCheckOutlined",
|
||||||
"AiLeftOutlined",
|
"AiLeftOutlined",
|
||||||
] }
|
] }
|
||||||
wasm-bindgen = "0.2.85"
|
|
||||||
|
|
||||||
[workspace]
|
[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
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [
|
leptos = { version = "0.4.0", features = ["csr"] }
|
||||||
"stable",
|
|
||||||
] }
|
|
||||||
melt-ui = { path = "../../" }
|
melt-ui = { path = "../../" }
|
||||||
leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = ["AiCloseOutlined", "AiCheckOutlined"] }
|
icondata = { version = "0.0.7", features = [
|
||||||
leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = ["csr"] }
|
"AiCloseOutlined",
|
||||||
|
"AiCheckOutlined",
|
||||||
|
] }
|
||||||
|
leptos_router = { version = "0.4.0", features = ["csr"] }
|
||||||
regex = "1.8.2"
|
regex = "1.8.2"
|
|
@ -29,10 +29,10 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView {
|
||||||
<Button color=ButtonColor::ERROR>
|
<Button color=ButtonColor::ERROR>
|
||||||
"ERROR Color"
|
"ERROR Color"
|
||||||
</Button>
|
</Button>
|
||||||
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
|
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
|
||||||
"ERROR Color Icon"
|
"ERROR Color Icon"
|
||||||
</Button>
|
</Button>
|
||||||
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
|
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
<div style="padding-top: 12px">
|
<div style="padding-top: 12px">
|
||||||
|
|
|
@ -14,7 +14,7 @@ pub fn TabbarPage(cx: Scope) -> impl IntoView {
|
||||||
<TabbarItem name="i">
|
<TabbarItem name="i">
|
||||||
"if"
|
"if"
|
||||||
</TabbarItem>
|
</TabbarItem>
|
||||||
<TabbarItem name="o" icon=leptos_icons::AiIcon::AiCloseOutlined>
|
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
|
||||||
"or"
|
"or"
|
||||||
</TabbarItem>
|
</TabbarItem>
|
||||||
</Tabbar>
|
</Tabbar>
|
||||||
|
|
|
@ -6,16 +6,12 @@ edition = "2021"
|
||||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [
|
leptos = { version = "0.4.0", features = ["csr"] }
|
||||||
"stable",
|
|
||||||
] }
|
|
||||||
melt-ui = { path = "../" }
|
melt-ui = { path = "../" }
|
||||||
leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = [
|
icondata = { version = "0.0.7", features = [
|
||||||
"AiCloseOutlined",
|
"AiCloseOutlined",
|
||||||
"AiCheckOutlined",
|
"AiCheckOutlined",
|
||||||
] }
|
] }
|
||||||
leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [
|
leptos_router = { version = "0.4.0", features = ["csr"] }
|
||||||
"csr",
|
|
||||||
] }
|
|
||||||
indoc = "2.0.1"
|
indoc = "2.0.1"
|
||||||
regex = "1.8.2"
|
regex = "1.8.2"
|
||||||
|
|
|
@ -29,10 +29,10 @@ pub fn ButtonPage(cx: Scope) -> impl IntoView {
|
||||||
<Button color=ButtonColor::ERROR>
|
<Button color=ButtonColor::ERROR>
|
||||||
"ERROR Color"
|
"ERROR Color"
|
||||||
</Button>
|
</Button>
|
||||||
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
|
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
|
||||||
"ERROR Color Icon"
|
"ERROR Color Icon"
|
||||||
</Button>
|
</Button>
|
||||||
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
|
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
<div style="padding-top: 12px">
|
<div style="padding-top: 12px">
|
||||||
|
|
|
@ -14,7 +14,7 @@ pub fn TabbarPage(cx: Scope) -> impl IntoView {
|
||||||
<TabbarItem name="i">
|
<TabbarItem name="i">
|
||||||
"if"
|
"if"
|
||||||
</TabbarItem>
|
</TabbarItem>
|
||||||
<TabbarItem name="o" icon=leptos_icons::AiIcon::AiCloseOutlined>
|
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
|
||||||
"or"
|
"or"
|
||||||
</TabbarItem>
|
</TabbarItem>
|
||||||
</Tabbar>
|
</Tabbar>
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
mod theme;
|
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::*;
|
||||||
use leptos_icons::*;
|
|
||||||
use stylers::style_sheet_str;
|
use stylers::style_sheet_str;
|
||||||
pub use theme::ButtonTheme;
|
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::*;
|
||||||
use leptos_icons::*;
|
|
||||||
use stylers::style_sheet_str;
|
use stylers::style_sheet_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
|
@ -29,7 +29,7 @@ pub fn Checkbox(
|
||||||
<div class="melt-checkbox__dot">
|
<div class="melt-checkbox__dot">
|
||||||
<If cond=checked>
|
<If cond=checked>
|
||||||
<Then slot>
|
<Then slot>
|
||||||
<Icon icon=AiIcon::AiCheckOutlined style="color: white"/>
|
<Icon icon=Icon::from(AiIcon::AiCheckOutlined) style="color: white"/>
|
||||||
</Then>
|
</Then>
|
||||||
</If>
|
</If>
|
||||||
</div>
|
</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 checkbox;
|
||||||
mod code;
|
mod code;
|
||||||
mod components;
|
mod components;
|
||||||
|
mod icon;
|
||||||
mod image;
|
mod image;
|
||||||
mod input;
|
mod input;
|
||||||
mod layout;
|
mod layout;
|
||||||
|
@ -24,6 +25,7 @@ pub use button::*;
|
||||||
pub use card::*;
|
pub use card::*;
|
||||||
pub use checkbox::*;
|
pub use checkbox::*;
|
||||||
pub use code::*;
|
pub use code::*;
|
||||||
|
pub use icon::*;
|
||||||
pub use image::*;
|
pub use image::*;
|
||||||
pub use input::*;
|
pub use input::*;
|
||||||
pub use layout::*;
|
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::*;
|
||||||
use leptos_icons::*;
|
|
||||||
use stylers::style_sheet_str;
|
use stylers::style_sheet_str;
|
||||||
use web_sys::MouseEvent;
|
use web_sys::MouseEvent;
|
||||||
|
|
||||||
|
@ -13,9 +12,10 @@ pub fn NavBar(
|
||||||
#[prop(optional, into)] click_left: Option<SignalSetter<MouseEvent>>,
|
#[prop(optional, into)] click_left: Option<SignalSetter<MouseEvent>>,
|
||||||
#[prop(optional, into)] right_text: MaybeSignal<&'static str>,
|
#[prop(optional, into)] right_text: MaybeSignal<&'static str>,
|
||||||
#[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
|
#[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
|
||||||
|
|
||||||
) -> impl IntoView {
|
) -> 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| {
|
let onclick_left = move |ev| {
|
||||||
if let Some(click_left) = click_left {
|
if let Some(click_left) = click_left {
|
||||||
|
@ -35,7 +35,7 @@ pub fn NavBar(
|
||||||
<div class="melt-nav-bar__left" on:click=onclick_left>
|
<div class="melt-nav-bar__left" on:click=onclick_left>
|
||||||
<If cond=left_arrow>
|
<If cond=left_arrow>
|
||||||
<Then slot>
|
<Then slot>
|
||||||
<Icon icon=AiIcon::AiLeftOutlined/>
|
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
|
||||||
</Then>
|
</Then>
|
||||||
</If>
|
</If>
|
||||||
{ left_text.get() }
|
{ left_text.get() }
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
use super::{use_tabbar, TabbarInjectionKey};
|
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 leptos::*;
|
||||||
use stylers::style_sheet_str;
|
use stylers::style_sheet_str;
|
||||||
use crate::components::*;
|
|
||||||
use leptos_icons::*;
|
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn TabbarItem(
|
pub fn TabbarItem(
|
||||||
|
@ -12,7 +11,9 @@ pub fn TabbarItem(
|
||||||
#[prop(optional, into)] icon: Option<Icon>,
|
#[prop(optional, into)] icon: Option<Icon>,
|
||||||
children: Children,
|
children: Children,
|
||||||
) -> impl IntoView {
|
) -> 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 theme = use_theme(cx, Theme::light);
|
||||||
let tabbar = use_tabbar(cx);
|
let tabbar = use_tabbar(cx);
|
||||||
let onclick_select = move |_| {
|
let onclick_select = move |_| {
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
use crate::card::*;
|
use crate::card::*;
|
||||||
use crate::components::OptionComp;
|
use crate::components::OptionComp;
|
||||||
|
use crate::icon::*;
|
||||||
use crate::teleport::*;
|
use crate::teleport::*;
|
||||||
use crate::utils::mount_style::mount_style;
|
use crate::utils::mount_style::mount_style;
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use stylers::style_sheet_str;
|
use stylers::style_sheet_str;
|
||||||
use leptos_icons::*;
|
|
||||||
|
|
||||||
#[slot]
|
#[slot]
|
||||||
pub struct ModalFooter {
|
pub struct ModalFooter {
|
||||||
|
@ -35,7 +35,7 @@ pub fn Modal(
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardHeaderExtra slot>
|
<CardHeaderExtra slot>
|
||||||
<span style="cursor: pointer;" on:click=move |_| show.set(false)>
|
<span style="cursor: pointer;" on:click=move |_| show.set(false)>
|
||||||
<Icon icon=AiIcon::AiCloseOutlined/>
|
<Icon icon=Icon::from(AiIcon::AiCloseOutlined)/>
|
||||||
</span>
|
</span>
|
||||||
</CardHeaderExtra>
|
</CardHeaderExtra>
|
||||||
{ children(cx) }
|
{ children(cx) }
|
||||||
|
|
Loading…
Add table
Reference in a new issue