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: mount style

Browse source
This commit is contained in:
luoxiao 2023-03-30 17:12:58 +08:00
parent 693fc8c3bf
commit 0dd181cdbb
7 changed files with 47 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/button/mod.rs
View file

@ -1,13 +1,16 @@
use crate::utils::mount_style::mount_style;
use leptos::*;
use stylers::style_sheet;
use stylers::style_sheet_str;
#[component]
pub fn Button(cx: Scope, #[prop(default = false)] text: bool, children: Children) -> impl IntoView {
let class_name = style_sheet!("./src/button/button.css");
let class = move || if text {
"melt-button melt-button--text"
} else {
"melt-button"
let class_name = mount_style("button", || style_sheet_str!("./src/button/button.css"));
let class = move || {
if text {
"melt-button melt-button--text"
} else {
"melt-button"
}
};
view! {cx, class=class_name,
<button class=class>

5
src/card/mod.rs
View file

@ -1,5 +1,6 @@
use crate::utils::mount_style::mount_style;
use leptos::*;
use stylers::style_sheet;
use stylers::style_sheet_str;
#[component]
pub fn Card(
@ -10,7 +11,7 @@ pub fn Card(
children: Children,
#[prop(default = None)] footer: Option<Children>,
) -> impl IntoView {
let class_name = style_sheet!("./src/card/card.css");
let class_name = mount_style("card", || style_sheet_str!("./src/card/card.css"));
view! {
cx, class=class_name,
<div class="melt-card">

1
src/lib.rs
View file

@ -3,6 +3,7 @@ mod card;
mod modal;
mod table;
mod teleport;
mod utils;
pub use button::*;
pub use modal::*;

5
src/modal/mod.rs
View file

@ -1,7 +1,8 @@
use crate::card::*;
use crate::teleport::*;
use crate::utils::mount_style::mount_style;
use leptos::*;
use stylers::style_sheet;
use stylers::style_sheet_str;
#[component]
pub fn Modal(
@ -12,7 +13,7 @@ pub fn Modal(
open: ReadSignal<bool>,
#[prop(default = None)] on_cancel: Option<Box<dyn Fn() + 'static>>,
) -> impl IntoView {
let class_name = style_sheet!("./src/modal/modal.css");
let class_name = mount_style("modal", || style_sheet_str!("./src/modal/modal.css"));
let header = move |cx| {
view! {
cx, class=class_name,

7
src/table/mod.rs
View file

@ -1,12 +1,13 @@
use crate::utils::mount_style::mount_style;
use leptos::*;
use stylers::style_sheet;
use stylers::style_sheet_str;
#[component]
pub fn Table(cx: Scope, children: Children) -> impl IntoView {
let class_name = style_sheet!("./src/table/table.css");
let class_name = mount_style("table", || style_sheet_str!("./src/table/table.css"));
view! {cx, class=class_name,
<table class="melt-table">
{children(cx)}
</table>
}
}
}

1
src/utils/mod.rs Normal file
View file

@ -0,0 +1 @@
pub(crate) mod mount_style;

26
src/utils/mount_style.rs Normal file
View file

@ -0,0 +1,26 @@
use leptos::document;
pub fn mount_style<'a, F>(id: &'a str, f: F) -> &str
where
F: FnOnce() -> (&'a str, &'a str),
{
let head = document().head().expect("head no exist");
let style = head
.query_selector(&format!("style[csr-id=\"melt-{id}\"]"))
.expect("query style element error");
let (class_name, content) = f();
if style.is_some() {
return class_name;
}
let style = document()
.create_element("style")
.expect("create style element error");
_ = style.set_attribute("csr-id", &format!("melt-{id}"));
style.set_text_content(Some(content));
_ = head.append_child(&style);
class_name
}