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

Merge branch 'thaw'

Browse source
This commit is contained in:
luoxiao 2023-11-05 16:18:07 +08:00
commit b8030abb9c
121 changed files with 487 additions and 487 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
.github/workflows/get-melt-changed.yml vendored
View file

@ -1,18 +1,18 @@
name: Get Melt Changed Call
name: Get Thaw Changed Call
on:
workflow_call:
outputs:
melt_changed:
description: "Melt Changed"
value: ${{ jobs.create.outputs.melt_changed }}
thaw_changed:
description: "Thaw Changed"
value: ${{ jobs.create.outputs.thaw_changed }}
jobs:
create:
name: Detect Source Change
runs-on: ubuntu-latest
outputs:
melt_changed: ${{ steps.set-source-changed.outputs.melt_changed }}
thaw_changed: ${{ steps.set-source-changed.outputs.thaw_changed }}
steps:
- name: Checkout
uses: actions/checkout@v4
@ -29,7 +29,7 @@ jobs:
- name: List source files that changed
run: echo '${{ steps.changed-source.outputs.all_changed_files }}'
- name: Set melt_changed
- name: Set thaw_changed
id: set-source-changed
run: |
echo "melt_changed=${{ steps.changed-source.outputs.any_changed }}" >> "$GITHUB_OUTPUT"
echo "thaw_changed=${{ steps.changed-source.outputs.any_changed }}" >> "$GITHUB_OUTPUT"

8
.github/workflows/gh-pages.yml vendored
View file

@ -5,12 +5,12 @@ on:
- cron: "0 23 * * *"
jobs:
get-melt-changed:
uses: ./.github/workflows/get-melt-changed.yml
get-thaw-changed:
uses: ./.github/workflows/get-thaw-changed.yml
deploy:
runs-on: ubuntu-latest
needs: [get-melt-changed]
if: needs.get-melt-changed.outputs.melt_changed == 'true'
needs: [get-thaw-changed]
if: needs.get-thaw-changed.outputs.thaw_changed == 'true'
permissions:
contents: write # To push a branch
pull-requests: write # To create a PR from that branch

10
Cargo.toml
View file

@ -1,13 +1,13 @@
[package]
name = "melt-ui"
name = "thaw"
version = "0.0.6"
edition = "2021"
keywords = ["web", "leptos", "ui", "melt-ui"]
keywords = ["web", "leptos", "ui", "thaw"]
authors = ["luoxiaozero <luoxiaozero@163.com>"]
authors = ["luoxiaozero"]
description = "An easy to use leptos component library"
homepage = "https://github.com/luoxiaozero/melt-ui"
repository = "https://github.com/luoxiaozero/melt-ui"
homepage = "https://github.com/thaw-ui/thaw"
repository = "https://github.com/thaw-ui/thaw"
license = "MIT"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

4
README.md
View file

@ -1,7 +1,7 @@
<p align="center" >
<img src="https://raw.githubusercontent.com/luoxiaozero/melt-ui/main/logo.svg" alt="Melt Logo" width="160px"/>
<img src="https://raw.githubusercontent.com/thaw-ui/thaw/main/logo.svg" alt="Thaw Logo" width="160px"/>
</p>
<h1 align="center">Melt UI</h1>
<h1 align="center">Thaw UI</h1>
<p align="center">An easy to use leptos component library</p>
**melt was renamed [thaw](https://github.com/thaw-ui/thaw)**

2
demo/Cargo.toml
View file

@ -8,7 +8,7 @@ edition = "2021"
[dependencies]
leptos = { version = "0.5.1", features = ["csr"] }
melt-ui = { path = "../" }
thaw = { path = "../" }
icondata = { version = "0.1.0", features = [
"AiCloseOutlined",
"AiCheckOutlined",

2
demo/README.md
View file

@ -1,3 +1,3 @@
## Used
Run the `trunk serve` command and then open the `http://127.0.0.1:6421/melt-ui` URL
Run the `trunk serve` command and then open the `http://127.0.0.1:6421/thaw` URL

2
demo/Trunk.toml
View file

@ -1,6 +1,6 @@
[build]
target = "index.html"
public_url = "/melt-ui/"
public_url = "/thaw/"
# release = true
[watch]

4
demo/index.html
View file

@ -4,10 +4,10 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Melt UI</title>
<title>Thaw UI</title>
<link
rel="shortcut icon"
href="/melt-ui/favicon.ico"
href="/thaw/favicon.ico"
type="image/x-icon"
/>
<link data-trunk rel="css" href="./src/assets/css/index.css" />

6
demo/src/app.rs
View file

@ -1,7 +1,7 @@
use crate::pages::*;
use leptos::*;
use leptos_router::*;
use melt_ui::*;
use thaw::*;
#[component]
pub fn App() -> impl IntoView {
@ -24,8 +24,8 @@ pub fn App() -> impl IntoView {
provide_context(theme);
view! {
<Provider theme>
<Router base="/melt-ui">
<Routes base="/melt-ui".to_string()>
<Router base="/thaw">
<Routes base="/thaw".to_string()>
<Route path="/" view=Home/>
<Route path="/components" view=ComponentsPage>
<Route path="/menu" view=MenuPage/>

4
demo/src/components/demo.rs
View file

@ -1,5 +1,5 @@
use leptos::*;
use melt_ui::*;
use thaw::*;
#[slot]
pub struct DemoCode {
@ -13,7 +13,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
mount_style("demo", prisms::prism_css!());
let theme = use_theme(Theme::light);
let style = create_memo(move |_| {
let mut style = String::from("background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;");
let mut style = String::from("background-image: url(/thaw/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;");
theme.with(|theme| {
if theme.common.color_scheme == "dark" {
style.push_str("border: 1px solid #383f52;");

8
demo/src/components/site_header.rs
View file

@ -1,6 +1,6 @@
use leptos::*;
use leptos_router::use_navigate;
use melt_ui::*;
use thaw::*;
#[component]
pub fn SiteHeader() -> impl IntoView {
@ -29,7 +29,7 @@ pub fn SiteHeader() -> impl IntoView {
view! {
<LayoutHeader style>
<Space>
<img src="/melt-ui/logo.svg" style="width: 36px"/>
<img src="/thaw/logo.svg" style="width: 36px"/>
<div
style="cursor: pointer; display: flex; align-items: center; height: 100%; font-weight: 600; font-size: 20px"
on:click=move |_| {
@ -38,7 +38,7 @@ pub fn SiteHeader() -> impl IntoView {
}
>
"Melt UI"
"Thaw UI"
</div>
</Space>
<Space>
@ -51,7 +51,7 @@ pub fn SiteHeader() -> impl IntoView {
<Button
variant=ButtonVariant::Text
on:click=move |_| {
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
>

2
demo/src/pages/alert/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/auto_complete/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/avatar/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/badge/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/button/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/card/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/checkbox/mod.rs
View file

@ -2,7 +2,7 @@ use std::collections::HashSet;
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/color_picker/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

4
demo/src/pages/components.rs
View file

@ -1,7 +1,7 @@
use crate::components::SiteHeader;
use leptos::*;
use leptos_router::{use_location, use_navigate, Outlet};
use melt_ui::*;
use thaw::*;
#[component]
pub fn ComponentsPage() -> impl IntoView {
@ -10,7 +10,7 @@ pub fn ComponentsPage() -> impl IntoView {
let loaction = use_location();
let mut pathname = loaction.pathname.get_untracked();
if pathname.starts_with("/melt-ui/components/") {
if pathname.starts_with("/thaw/components/") {
pathname.drain(20..).collect()
} else {
String::new()

2
demo/src/pages/divider/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

8
demo/src/pages/grid/mod.rs
View file

@ -1,22 +1,22 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]
pub fn GridPage() -> impl IntoView {
mount_style(
"grid-demo",
r#".melt-grid-item {
r#".thaw-grid-item {
height: 60px;
color: white;
text-align: center;
line-height: 60px;
}
.melt-grid-item:nth-child(odd) {
.thaw-grid-item:nth-child(odd) {
background-color: #3d8ae5dd;
}
.melt-grid-item:nth-child(even) {
.thaw-grid-item:nth-child(even) {
background-color: #3d8ae5aa;
}"#,
);

6
demo/src/pages/home.rs
View file

@ -1,6 +1,6 @@
use leptos::*;
use leptos_router::{use_navigate, use_query_map};
use melt_ui::*;
use thaw::*;
#[component]
pub fn Home() -> impl IntoView {
@ -15,7 +15,7 @@ pub fn Home() -> impl IntoView {
position=LayoutPosition::Absolute
style="display: flex; align-items: center; justify-content: center; flex-direction: column;"
>
<h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">"Melt UI"</h1>
<h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">"Thaw UI"</h1>
<p>"An easy to use leptos component library"</p>
<Space>
<Button on_click=move |_| {
@ -25,7 +25,7 @@ pub fn Home() -> impl IntoView {
<Button
variant=ButtonVariant::Text
on:click=move |_| {
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
>

2
demo/src/pages/icon/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/image/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/input/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/input_number/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/menu/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/message/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/mobile.rs
View file

@ -1,5 +1,5 @@
use leptos::*;
use melt_ui::{use_theme, Theme};
use thaw::{use_theme, Theme};
#[component]
pub fn MobilePage(path: &'static str) -> impl IntoView {

2
demo/src/pages/modal/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

4
demo/src/pages/nav_bar/mod.rs
View file

@ -3,7 +3,7 @@ use crate::{
pages::MobilePage,
};
use leptos::*;
use melt_ui::mobile::NavBar;
use thaw::mobile::NavBar;
use prisms::highlight_str;
#[component]
@ -45,7 +45,7 @@ pub fn NavBarPage() -> impl IntoView {
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/nav-bar"/>
<MobilePage path="/thaw?path=/mobile/nav-bar"/>
</div>
</div>
}

2
demo/src/pages/radio/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/select/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/skeleton/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/slider/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/space/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/switch/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

4
demo/src/pages/tabbar/mod.rs
View file

@ -3,7 +3,7 @@ use crate::{
pages::MobilePage,
};
use leptos::*;
use melt_ui::mobile::*;
use thaw::mobile::*;
use prisms::highlight_str;
#[component]
@ -41,7 +41,7 @@ pub fn TabbarPage() -> impl IntoView {
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/tabbar"/>
<MobilePage path="/thaw?path=/mobile/tabbar"/>
</div>
</div>
}

2
demo/src/pages/table/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/tabs/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

2
demo/src/pages/tag/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

6
demo/src/pages/toast/mod.rs
View file

@ -3,8 +3,8 @@ use crate::{
pages::MobilePage,
};
use leptos::*;
use melt_ui::mobile::*;
use melt_ui::*;
use thaw::mobile::*;
use thaw::*;
use prisms::highlight_str;
use std::time::Duration;
@ -38,7 +38,7 @@ pub fn ToastPage() -> impl IntoView {
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/toast"/>
<MobilePage path="/thaw?path=/mobile/toast"/>
</div>
</div>
}

2
demo/src/pages/upload/mod.rs
View file

@ -1,6 +1,6 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use thaw::*;
use prisms::highlight_str;
#[component]

14
src/alert/alert.css
View file

@ -1,27 +1,27 @@
.melt-alert {
.thaw-alert {
position: relative;
padding: 14px 20px 14px 42px;
background-color: var(--melt-background-color);
border: 1px solid var(--melt-border-color);
background-color: var(--thaw-background-color);
border: 1px solid var(--thaw-border-color);
border-radius: 3px;
line-height: 1.6;
}
.melt-alert__icon {
.thaw-alert__icon {
position: absolute;
top: 12px;
left: 10px;
font-size: 24px;
color: var(--melt-icon-color);
color: var(--thaw-icon-color);
}
.melt-alert__header {
.thaw-alert__header {
font-size: 16px;
line-height: 19px;
font-weight: 500;
}
.melt-alert__header + .melt-alert__content {
.thaw-alert__header + .thaw-alert__content {
margin-top: 8px;
font-size: 14px;
}

14
src/alert/mod.rs
View file

@ -54,15 +54,15 @@ pub fn Alert(
theme.with(|theme| {
let variant = variant.get();
css_vars.push_str(&format!(
"--melt-icon-color: {};",
"--thaw-icon-color: {};",
variant.theme_icon_color(theme)
));
css_vars.push_str(&format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
variant.theme_background_color(theme)
));
css_vars.push_str(&format!(
"--melt-border-color: {};",
"--thaw-border-color: {};",
variant.theme_border_color(theme)
));
});
@ -79,8 +79,8 @@ pub fn Alert(
.into()
});
view! {
<div class="melt-alert" style=move || css_vars.get()>
<Icon icon class="melt-alert__icon"/>
<div class="thaw-alert" style=move || css_vars.get()>
<Icon icon class="thaw-alert__icon"/>
<div>
{move || {
@ -88,10 +88,10 @@ pub fn Alert(
if title.is_empty() {
None
} else {
view! { <div class="melt-alert__header">{title}</div> }.into()
view! { <div class="thaw-alert__header">{title}</div> }.into()
}
}}
<div class="melt-alert__content">{children()}</div>
<div class="thaw-alert__content">{children()}</div>
</div>
</div>
}

10
src/auto_complete/auto-complete.css
View file

@ -1,20 +1,20 @@
.melt-auto-complete__menu {
.thaw-auto-complete__menu {
position: relative;
display: inline-block;
max-height: 200px;
padding: 5px;
background-color: var(--melt-background-color);
background-color: var(--thaw-background-color);
border-radius: 3px;
box-sizing: border-box;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
z-index: 2000;
}
.melt-auto-complete__menu-item {
.thaw-auto-complete__menu-item {
padding: 6px 5px;
border-radius: 2px;
cursor: pointer;
}
.melt-auto-complete__menu-item:hover {
background-color: var(--melt-background-color-hover);
.thaw-auto-complete__menu-item:hover {
background-color: var(--thaw-background-color-hover);
}

10
src/auto_complete/mod.rs
View file

@ -24,11 +24,11 @@ pub fn AutoComplete(
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
theme.select.menu_background_color
));
css_vars.push_str(&format!(
"--melt-background-color-hover: {};",
"--thaw-background-color-hover: {};",
theme.select.menu_background_color_hover
));
});
@ -66,7 +66,7 @@ pub fn AutoComplete(
};
view! {
<div class="melt-auto-complete" ref=auto_complete_ref>
<div class="thaw-auto-complete" ref=auto_complete_ref>
<Input
value
placeholder
@ -77,7 +77,7 @@ pub fn AutoComplete(
</div>
<Teleport>
<div
class="melt-auto-complete__menu"
class="thaw-auto-complete__menu"
style=move || {
if is_show_menu.get() {
menu_css_vars.get()
@ -104,7 +104,7 @@ pub fn AutoComplete(
};
view! {
<div
class="melt-auto-complete__menu-item"
class="thaw-auto-complete__menu-item"
on:click=on_click
on:mousedown=on_mousedown
>

14
src/avatar/avatar.css
View file

@ -1,13 +1,13 @@
.melt-avatar {
.thaw-avatar {
display: inline-block;
width: var(--melt-size);
height: var(--melt-size);
background-color: var(--melt-background-color);
border-radius: var(--melt-border-radius);
width: var(--thaw-size);
height: var(--thaw-size);
background-color: var(--thaw-background-color);
border-radius: var(--thaw-border-radius);
}
.melt-avatar img {
.thaw-avatar img {
width: 100%;
height: 100%;
border-radius: var(--melt-border-radius);
border-radius: var(--thaw-border-radius);
}

8
src/avatar/mod.rs
View file

@ -13,14 +13,14 @@ pub fn Avatar(
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
css_vars.push_str(&format!("--melt-size: {}px;", size.get()));
css_vars.push_str(&format!("--thaw-size: {}px;", size.get()));
css_vars.push_str(&format!(
"--melt-border-radius: {};",
"--thaw-border-radius: {};",
if circle.get() { "50%" } else { "3px" }
));
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color: {}",
"--thaw-background-color: {}",
theme.avatar.background_color
));
});
@ -28,7 +28,7 @@ pub fn Avatar(
});
mount_style("avatar", include_str!("./avatar.css"));
view! {
<span class="melt-avatar" style=move || css_vars.get()>
<span class="thaw-avatar" style=move || css_vars.get()>
{move || {
let src = src.get();
(!src.is_empty()).then(|| view! { <img src=src/> })

12
src/badge/badge.css
View file

@ -1,13 +1,13 @@
.melt-badge {
.thaw-badge {
position: relative;
display: inline-block;
}
.melt-badge__sup {
.thaw-badge__sup {
position: absolute;
color: var(--melt-font-color);
background-color: var(--melt-background-color);
color: var(--thaw-font-color);
background-color: var(--thaw-background-color);
}
.melt-badge__sup--value {
.thaw-badge__sup--value {
top: -9px;
right: -9px;
font-size: 12px;
@ -18,7 +18,7 @@
text-align: center;
}
.melt-badge__sup--dot {
.thaw-badge__sup--dot {
top: -5px;
right: -5px;
height: 10px;

12
src/badge/mod.rs
View file

@ -31,10 +31,10 @@ pub fn Badge(
mount_style("badge", include_str!("./badge.css"));
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
css_vars.push_str("--melt-font-color: #fff;");
css_vars.push_str("--thaw-font-color: #fff;");
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
color.get().theme_color(theme)
));
});
@ -52,11 +52,11 @@ pub fn Badge(
}
});
view! {
<div class="melt-badge" style=move || css_vars.get()>
<div class="thaw-badge" style=move || css_vars.get()>
<div
class="melt-badge__sup"
class=("melt-badge__sup--value", move || !dot.get() && !value.get().is_empty())
class=("melt-badge__sup--dot", move || dot.get())
class="thaw-badge__sup"
class=("thaw-badge__sup--value", move || !dot.get() && !value.get().is_empty())
class=("thaw-badge__sup--dot", move || dot.get())
>
{move || value.get()}
</div>

52
src/button/button.css
View file

@ -1,9 +1,9 @@
.melt-button {
.thaw-button {
height: 34px;
padding: 0 16px;
background-color: var(--melt-background-color);
color: var(--melt-font-color);
border: 1px solid var(--melt-border-color);
background-color: var(--thaw-background-color);
color: var(--thaw-font-color);
border: 1px solid var(--thaw-border-color);
border-radius: 5px;
position: relative;
display: inline-flex;
@ -12,50 +12,50 @@
user-select: none;
}
.melt-button:hover {
border-color: var(--melt-border-color-hover);
background-color: var(--melt-background-color-hover);
.thaw-button:hover {
border-color: var(--thaw-border-color-hover);
background-color: var(--thaw-background-color-hover);
cursor: pointer;
transition: all 0.3s;
}
.melt-button:active:not(.melt-button--disabled) {
.thaw-button:active:not(.thaw-button--disabled) {
transition: all 0.3s;
border-color: var(--melt-border-color-hover);
background-color: var(--melt-background-color-active);
border-color: var(--thaw-border-color-hover);
background-color: var(--thaw-background-color-active);
}
.melt-button--text,
.melt-button--link {
.thaw-button--text,
.thaw-button--link {
border: none;
}
.melt-button--text:hover {
color: var(--melt-font-color-hover);
.thaw-button--text:hover {
color: var(--thaw-font-color-hover);
}
.melt-button--link {
.thaw-button--link {
height: auto;
padding: inherit;
}
.melt-button--link:hover {
color: var(--melt-font-color-hover);
.thaw-button--link:hover {
color: var(--thaw-font-color-hover);
}
.melt-button--round {
.thaw-button--round {
padding: 0 10px;
border-radius: 50%;
}
@keyframes meltLoadingCircle {
@keyframes thawLoadingCircle {
100% {
transform: rotate(360deg);
}
}
.melt-button .melt-wave {
.thaw-button .thaw-wave {
pointer-events: none;
animation-iteration-count: 1;
animation-duration: 0.6s;
@ -63,21 +63,21 @@
cubic-bezier(0, 0, 0.2, 1);
}
.melt-button .melt-wave.melt-wave--active {
.thaw-button .thaw-wave.thaw-wave--active {
z-index: 1;
animation-name: meltButtonWaveSpread, meltButtonWaveOpacity;
animation-name: thawButtonWaveSpread, thawButtonWaveOpacity;
}
@keyframes meltButtonWaveSpread {
@keyframes thawButtonWaveSpread {
from {
box-shadow: 0 0 0.5px 0 var(--melt-ripple-color);
box-shadow: 0 0 0.5px 0 var(--thaw-ripple-color);
}
to {
box-shadow: 0 0 0.5px 6px var(--melt-ripple-color);
box-shadow: 0 0 0.5px 6px var(--thaw-ripple-color);
}
}
@keyframes meltButtonWaveOpacity {
@keyframes thawButtonWaveOpacity {
from {
opacity: 0.6;
}

42
src/button/mod.rs
View file

@ -76,31 +76,31 @@ pub fn Button(
if variant.get() == ButtonVariant::Primary {
let bg_color_hover = color.get().theme_color_hover(theme);
let bg_color_active = color.get().theme_color_active(theme);
css_vars.push_str(&format!("--melt-background-color: {bg_color};"));
css_vars.push_str(&format!("--melt-background-color-hover: {bg_color_hover};"));
css_vars.push_str(&format!("--thaw-background-color: {bg_color};"));
css_vars.push_str(&format!("--thaw-background-color-hover: {bg_color_hover};"));
css_vars.push_str(&format!(
"--melt-background-color-active: {bg_color_active};"
"--thaw-background-color-active: {bg_color_active};"
));
css_vars.push_str("--melt-font-color: #fff;");
css_vars.push_str(&format!("--melt-border-color: {bg_color};"));
css_vars.push_str(&format!("--melt-border-color-hover: {bg_color};"));
css_vars.push_str(&format!("--melt-melt-ripple-color: {bg_color};"));
css_vars.push_str("--thaw-font-color: #fff;");
css_vars.push_str(&format!("--thaw-border-color: {bg_color};"));
css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
} else if variant.get() == ButtonVariant::Text {
css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};"));
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
css_vars.push_str(&format!(
"--melt-background-color-hover: {};",
"--thaw-background-color-hover: {};",
theme.button.color_text_hover
));
css_vars.push_str(&format!(
"--melt-background-color-active: {};",
"--thaw-background-color-active: {};",
theme.button.color_text_active
));
css_vars.push_str(&format!("--melt-ripple-color: #0000;"));
css_vars.push_str(&format!("--thaw-ripple-color: #0000;"));
} else {
css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};"));
css_vars.push_str("--melt-border-color: #555a;");
css_vars.push_str("--melt-border-color-hover: #555;");
css_vars.push_str(&format!("--melt-ripple-color: #0000;"));
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
css_vars.push_str("--thaw-border-color: #555a;");
css_vars.push_str("--thaw-border-color-hover: #555;");
css_vars.push_str(&format!("--thaw-ripple-color: #0000;"));
}
});
@ -139,11 +139,11 @@ pub fn Button(
view! {
<button
class:melt-button=true
class=("melt-button--text", move || variant.get() == ButtonVariant::Text)
class=("melt-button--link", move || variant.get() == ButtonVariant::Link)
class=("melt-button--round", move || round.get())
class=("melt-button--disabled", move || disabled.get())
class:thaw-button=true
class=("thaw-button--text", move || variant.get() == ButtonVariant::Text)
class=("thaw-button--link", move || variant.get() == ButtonVariant::Link)
class=("thaw-button--round", move || round.get())
class=("thaw-button--disabled", move || disabled.get())
style=move || format!("{}{}", css_vars.get(), style.get())
on:click=on_click
>
@ -154,7 +154,7 @@ pub fn Button(
<Icon
icon=Icon::from(AiIcon::AiLoadingOutlined)
style=format!(
"animation: meltLoadingCircle 1s infinite linear;{icon_style}",
"animation: thawLoadingCircle 1s infinite linear;{icon_style}",
)
/>
}

24
src/card/card.css
View file

@ -1,32 +1,32 @@
.melt-card {
.thaw-card {
display: flex;
flex-direction: column;
border: 1px solid var(--melt-border-color);
border: 1px solid var(--thaw-border-color);
border-radius: 3px;
overflow: hidden;
}
.melt-card__header {
.thaw-card__header {
font-weight: 600;
display: flex;
align-items: center;
}
.melt-card__header-extra {
.thaw-card__header-extra {
display: flex;
align-items: center;
}
.melt-card__header-content {
.thaw-card__header-content {
flex: 1;
}
.melt-card__header,
.melt-card__content,
.melt-card__footer {
.thaw-card__header,
.thaw-card__content,
.thaw-card__footer {
padding: 12px 28px;
background-color: var(--melt-background-color);
background-color: var(--thaw-background-color);
}
.melt-card__header {
.thaw-card__header {
padding: 20px 28px;
}
.melt-card__header + .melt-card__content,
.melt-card__footer {
.thaw-card__header + .thaw-card__content,
.thaw-card__footer {
padding: 0 28px 20px;
}

16
src/card/mod.rs
View file

@ -34,11 +34,11 @@ pub fn Card(
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
theme.common.background_color
));
css_vars.push_str(&format!(
"--melt-border-color: {};",
"--thaw-border-color: {};",
theme.common.border_color
));
});
@ -52,27 +52,27 @@ pub fn Card(
let header_extra = store_value(card_header_extra);
view! {
<div class="melt-card" style=move || css_vars.get()>
<div class="thaw-card" style=move || css_vars.get()>
<If cond=is_header>
<Then slot>
<div class="melt-card__header">
<div class="melt-card__header-content">
<div class="thaw-card__header">
<div class="thaw-card__header-content">
<OptionComp value=header.get_value() let:header>
<Fallback slot>{move || title.get_value().get()}</Fallback>
{(header.children)()}
</OptionComp>
</div>
<OptionComp value=header_extra.get_value() let:header_extra>
<div class="melt-card__header-extra">{(header_extra.children)()}</div>
<div class="thaw-card__header-extra">{(header_extra.children)()}</div>
</OptionComp>
</div>
</Then>
</If>
<div class="melt-card__content">{children()}</div>
<div class="thaw-card__content">{children()}</div>
<OptionComp value=card_footer let:footer>
<If cond=footer.if_>
<Then slot>
<div class="melt-card__footer">{(footer.children)()}</div>
<div class="thaw-card__footer">{(footer.children)()}</div>
</Then>
</If>
</OptionComp>

18
src/checkbox/checkbox.css
View file

@ -1,15 +1,15 @@
.melt-checkbox {
.thaw-checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.melt-checkbox__input {
.thaw-checkbox__input {
width: 0;
height: 0;
opacity: 0;
}
.melt-checkbox__dot {
.thaw-checkbox__dot {
display: inline-flex;
justify-content: center;
align-items: center;
@ -18,15 +18,15 @@
border: 1px solid #ddd;
border-radius: 2px;
}
.melt-checkbox:hover .melt-checkbox__dot,
.melt-checkbox--checked .melt-checkbox__dot {
border-color: var(--melt-background-color-checked);
.thaw-checkbox:hover .thaw-checkbox__dot,
.thaw-checkbox--checked .thaw-checkbox__dot {
border-color: var(--thaw-background-color-checked);
}
.melt-checkbox--checked .melt-checkbox__dot {
background-color: var(--melt-background-color-checked);
.thaw-checkbox--checked .thaw-checkbox__dot {
background-color: var(--thaw-background-color-checked);
}
.melt-checkbox__label {
.thaw-checkbox__label {
display: inline-block;
padding: 0 6px;
user-select: none;

12
src/checkbox/mod.rs
View file

@ -25,7 +25,7 @@ pub fn Checkbox(
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color-checked: {};",
"--thaw-background-color-checked: {};",
theme.common.color_primary
));
});
@ -34,20 +34,20 @@ pub fn Checkbox(
view! {
<div
class:melt-checkbox=true
class=("melt-checkbox--checked", move || value.get())
class:thaw-checkbox=true
class=("thaw-checkbox--checked", move || value.get())
style=move || css_vars.get()
on:click=move |_| value.set(!value.get_untracked())
>
<input class="melt-checkbox__input" type="checkbox"/>
<div class="melt-checkbox__dot">
<input class="thaw-checkbox__input" type="checkbox"/>
<div class="thaw-checkbox__dot">
<If cond=value.clone_into()>
<Then slot>
<Icon icon=Icon::from(AiIcon::AiCheckOutlined) style="color: white"/>
</Then>
</If>
</div>
<div class="melt-checkbox__label">{children()}</div>
<div class="thaw-checkbox__label">{children()}</div>
</div>
}
}

2
src/code/code.css
View file

@ -1,3 +1,3 @@
.melt-code {
.thaw-code {
font-size: 14px;
}

2
src/code/mod.rs
View file

@ -4,5 +4,5 @@ use leptos::*;
#[component]
pub fn Code(children: Children) -> impl IntoView {
mount_style("code", include_str!("./code.css"));
view! { <code class="melt-code">{children()}</code> }
view! { <code class="thaw-code">{children()}</code> }
}

20
src/color_picker/color-picker.css
View file

@ -1,4 +1,4 @@
.melt-color-picker-trigger {
.thaw-color-picker-trigger {
display: inline-block;
padding: 4px;
width: 100%;
@ -9,7 +9,7 @@
cursor: pointer;
}
.melt-color-picker-trigger__content {
.thaw-color-picker-trigger__content {
display: flex;
justify-content: center;
align-items: center;
@ -17,14 +17,14 @@
font-size: 14px;
}
.melt-color-picker-popover {
.thaw-color-picker-popover {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 240px;
padding: 12px;
background-color: var(--melt-background-color);
background-color: var(--thaw-background-color);
border-radius: 3px;
box-sizing: border-box;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
@ -32,14 +32,14 @@
z-index: 1000;
}
.melt-color-picker-popover__panel {
.thaw-color-picker-popover__panel {
position: relative;
height: 180px;
margin-bottom: 8px;
cursor: crosshair;
}
.melt-color-picker-popover__layer {
.thaw-color-picker-popover__layer {
position: absolute;
left: 0;
right: 0;
@ -47,7 +47,7 @@
bottom: 0;
}
.melt-color-picker-popover__layer--shadowed {
.thaw-color-picker-popover__layer--shadowed {
position: absolute;
left: 0;
right: 0;
@ -56,7 +56,7 @@
background-image: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
}
.melt-color-picker-popover__handle {
.thaw-color-picker-popover__handle {
position: absolute;
left: -6px;
bottom: -6px;
@ -68,7 +68,7 @@
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.45);
}
.melt-color-picker-slider {
.thaw-color-picker-slider {
height: 12px;
padding: 0 6px;
background-image: linear-gradient(
@ -84,7 +84,7 @@
border-radius: 6px;
}
.melt-color-picker-slider__handle {
.thaw-color-picker-slider__handle {
position: relative;
left: 0;
width: 12px;

20
src/color_picker/mod.rs
View file

@ -16,7 +16,7 @@ pub fn ColorPicker(#[prop(optional, into)] value: MaybeRwSignal<RGBA>) -> impl I
let popover_css_vars = create_memo(move |_| {
theme.with(|theme| {
format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
theme.color_picker.popover_background_color
)
})
@ -98,14 +98,14 @@ pub fn ColorPicker(#[prop(optional, into)] value: MaybeRwSignal<RGBA>) -> impl I
on_cleanup(move || timer.remove());
view! {
<div class="melt-color-picker-trigger" on:click=show_popover ref=trigger_ref>
<div class="melt-color-picker-trigger__content" style=move || style.get()>
<div class="thaw-color-picker-trigger" on:click=show_popover ref=trigger_ref>
<div class="thaw-color-picker-trigger__content" style=move || style.get()>
{move || label.get()}
</div>
</div>
<Teleport>
<div
class="melt-color-picker-popover"
class="thaw-color-picker-popover"
ref=popover_ref
style=move || {
if is_show_popover.get() {
@ -172,17 +172,17 @@ fn ColorPanel(hue: ReadSignal<u16>, sv: RwSignal<(f64, f64)>) -> impl IntoView {
};
view! {
<div class="melt-color-picker-popover__panel" ref=panel_ref on:mousedown=on_mouse_down>
<div class="thaw-color-picker-popover__panel" ref=panel_ref on:mousedown=on_mouse_down>
<div
class="melt-color-picker-popover__layer"
class="thaw-color-picker-popover__layer"
style:background-image=move || {
format!("linear-gradient(90deg, white, hsl({}, 100%, 50%))", hue.get())
}
>
</div>
<div class="melt-color-picker-popover__layer--shadowed"></div>
<div class="thaw-color-picker-popover__layer--shadowed"></div>
<div
class="melt-color-picker-popover__handle"
class="thaw-color-picker-popover__handle"
style=move || {
format!(
"left: calc({}% - 6px); bottom: calc({}% - 6px)",
@ -233,9 +233,9 @@ fn HueSlider(hue: RwSignal<u16>) -> impl IntoView {
});
};
view! {
<div class="melt-color-picker-slider" ref=rail_ref on:mousedown=on_mouse_down>
<div class="thaw-color-picker-slider" ref=rail_ref on:mousedown=on_mouse_down>
<div
class="melt-color-picker-slider__handle"
class="thaw-color-picker-slider__handle"
style=move || format!("left: calc({}% - 6px)", f32::from(hue.get()) / 359.0 * 100.0)
></div>
</div>

4
src/divider/divider.css
View file

@ -1,12 +1,12 @@
.melt-divider {
.thaw-divider {
position: relative;
display: flex;
width: 100%;
margin: 1.5rem 0;
}
.melt-divider__line {
.thaw-divider__line {
background-color: #efeff5;
height: 1px;
width: 100%;

4
src/divider/mod.rs
View file

@ -6,8 +6,8 @@ use crate::mount_style;
pub fn Divider() -> impl IntoView {
mount_style("divider", include_str!("./divider.css"));
view! {
<div class="melt-divider">
<div class="melt-divider__line"></div>
<div class="thaw-divider">
<div class="thaw-divider__line"></div>
</div>
}
}

2
src/grid/grid_item.rs
View file

@ -33,7 +33,7 @@ pub fn GridItem(
style
});
view! {
<div class="melt-grid-item" style=move || style.get()>
<div class="thaw-grid-item" style=move || style.get()>
{children()}
</div>
}

2
src/grid/mod.rs
View file

@ -24,7 +24,7 @@ pub fn Grid(
});
view! {
<div class="melt-grid" style=move || style.get()>
<div class="thaw-grid" style=move || style.get()>
{children()}
</div>
}

30
src/input/input.css
View file

@ -1,42 +1,42 @@
.melt-input {
.thaw-input {
display: inline-flex;
width: 100%;
box-sizing: border-box;
padding: 0 10px;
background-color: var(--melt-background-color);
background-color: var(--thaw-background-color);
font-size: 14px;
color: var(--melt-font-color);
border: 1px solid var(--melt-border-color);
border-radius: var(--melt-border-radius);
color: var(--thaw-font-color);
border: 1px solid var(--thaw-border-color);
border-radius: var(--thaw-border-radius);
cursor: text;
transition: all 0.3s;
}
.melt-input--focus,
.melt-input:hover {
border-color: var(--melt-border-color-hover);
.thaw-input--focus,
.thaw-input:hover {
border-color: var(--thaw-border-color-hover);
}
.melt-input--focus {
box-shadow: 0 0 0 2px var(--melt-box-shadow-color);
.thaw-input--focus {
box-shadow: 0 0 0 2px var(--thaw-box-shadow-color);
}
.melt-input__input-el {
.thaw-input__input-el {
width: 100%;
height: 30px;
background-color: transparent;
color: var(--melt-font-color);
color: var(--thaw-font-color);
line-height: 30px;
font-size: inherit;
border: none;
outline: none;
}
.melt-input__input-el::placeholder {
color: var(--melt-placeholder-color);
.thaw-input__input-el::placeholder {
color: var(--thaw-placeholder-color);
}
.melt-input__suffix {
.thaw-input__suffix {
display: inline-flex;
align-items: center;
justify-content: center;

20
src/input/mod.rs
View file

@ -70,28 +70,28 @@ pub fn Input(
let mut css_vars = String::new();
theme.with(|theme| {
let border_color_hover = theme.common.color_primary.clone();
css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};"));
css_vars.push_str(&format!("--melt-box-shadow-color: {border_color_hover}33;"));
css_vars.push_str(&format!("--thaw-border-color-hover: {border_color_hover};"));
css_vars.push_str(&format!("--thaw-box-shadow-color: {border_color_hover}33;"));
let border_radius = theme.common.border_radius.clone();
css_vars.push_str(&format!("--melt-border-radius: {border_radius};"));
css_vars.push_str(&format!("--thaw-border-radius: {border_radius};"));
css_vars.push_str(&format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
theme.input.background_color
));
css_vars.push_str(&format!("--melt-font-color: {};", theme.input.font_color));
css_vars.push_str(&format!("--thaw-font-color: {};", theme.input.font_color));
css_vars.push_str(&format!(
"--melt-border-color: {};",
"--thaw-border-color: {};",
theme.input.border_color
));
css_vars.push_str(&format!(
"--melt-placeholder-color: {};",
"--thaw-placeholder-color: {};",
theme.input.placeholder_color
));
});
css_vars
});
view! {
<div class="melt-input" class=("melt-input--focus", move || is_focus.get()) style=move || css_vars.get()>
<div class="thaw-input" class=("thaw-input--focus", move || is_focus.get()) style=move || css_vars.get()>
<input
type=move || variant.get().as_str()
prop:value=move || {
@ -102,12 +102,12 @@ pub fn Input(
on:input=on_input
on:focus=on_internal_focus
on:blur=on_internal_blur
class="melt-input__input-el"
class="thaw-input__input-el"
placeholder=move || placeholder.get()
/>
{if let Some(suffix) = input_suffix {
view! { <div class="melt-input__suffix">{(suffix.children)()}</div> }.into()
view! { <div class="thaw-input__suffix">{(suffix.children)()}</div> }.into()
} else {
None
}}

2
src/layout/layout-sider.css
View file

@ -1,4 +1,4 @@
.melt-layout-sider {
.thaw-layout-sider {
position: relative;
min-width: 240px;
overflow: auto;

4
src/layout/layout.css
View file

@ -1,8 +1,8 @@
.melt-layout {
.thaw-layout {
flex: auto;
}
.melt-layout--absolute-positioned {
.thaw-layout--absolute-positioned {
position: absolute;
top: 0;
right: 0;

2
src/layout/layout_header.rs
View file

@ -6,7 +6,7 @@ pub fn LayoutHeader(
children: Children,
) -> impl IntoView {
view! {
<div class="melt-layout-header" style=move || style.get()>
<div class="thaw-layout-header" style=move || style.get()>
{children()}
</div>
}

2
src/layout/layout_sider.rs
View file

@ -8,7 +8,7 @@ pub fn LayoutSider(
) -> impl IntoView {
mount_style("layout-sider", include_str!("./layout-sider.css"));
view! {
<div class="melt-layout-sider" style=move || style.get()>
<div class="thaw-layout-sider" style=move || style.get()>
{children()}
</div>
}

4
src/layout/mod.rs
View file

@ -40,8 +40,8 @@ pub fn Layout(
});
view! {
<div
class="melt-layout"
class=("melt-layout--absolute-positioned", position == LayoutPosition::Absolute)
class="thaw-layout"
class=("thaw-layout--absolute-positioned", position == LayoutPosition::Absolute)
style=move || style.get()
>
{children()}

4
src/menu/menu-group.css
View file

@ -1,6 +1,6 @@
.melt-menu-group {
.thaw-menu-group {
padding: 0.85rem 1.15em 0.1rem;
font-size: 0.86rem;
font-weight: bold;
color: var(--melt-font-color);
color: var(--thaw-font-color);
}

14
src/menu/menu-item.css
View file

@ -1,7 +1,7 @@
.melt-menu-item__content {
.thaw-menu-item__content {
margin: 0.3rem 0.4rem;
padding: 0.5rem 0.75rem;
color: var(--melt-font-color);
color: var(--thaw-font-color);
cursor: pointer;
border-radius: 0.25rem;
font-size: 0.875rem;
@ -11,11 +11,11 @@
transition-duration: 0.15s;
}
.melt-menu-item__content:hover:not(.melt-menu-item__content--selected) {
background-color: var(--melt-background-color-hover);
.thaw-menu-item__content:hover:not(.thaw-menu-item__content--selected) {
background-color: var(--thaw-background-color-hover);
}
.melt-menu-item__content--selected {
color: var(--melt-font-color-active);
background-color: var(--melt-background-color);
.thaw-menu-item__content--selected {
color: var(--thaw-font-color-active);
background-color: var(--thaw-background-color);
}

4
src/menu/menu_group.rs
View file

@ -8,12 +8,12 @@ pub fn MenuGroup(#[prop(into)] label: String, children: Children) -> impl IntoVi
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.group_color));
css_vars.push_str(&format!("--thaw-font-color: {};", theme.menu.group_color));
});
css_vars
});
view! {
<div class="melt-menu-group" style=move || css_vars.get()>
<div class="thaw-menu-group" style=move || css_vars.get()>
{label}
</div>
{children()}

14
src/menu/menu_item.rs
View file

@ -19,21 +19,21 @@ pub fn MenuItem(
let mut css_vars = String::new();
theme.with(|theme| {
let font_color = theme.common.color_primary.clone();
css_vars.push_str(&format!("--melt-font-color-active: {font_color};"));
css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.color));
css_vars.push_str(&format!("--melt-background-color: {font_color}1a;"));
css_vars.push_str(&format!("--thaw-font-color-active: {font_color};"));
css_vars.push_str(&format!("--thaw-font-color: {};", theme.menu.color));
css_vars.push_str(&format!("--thaw-background-color: {font_color}1a;"));
css_vars.push_str(&format!(
"--melt-background-color-hover: {};",
"--thaw-background-color-hover: {};",
theme.menu.item_color_hover
));
});
css_vars
});
view! {
<div class="melt-menu-item">
<div class="thaw-menu-item">
<div
class="melt-menu-item__content"
class=("melt-menu-item__content--selected", move || menu.get().value == key.get())
class="thaw-menu-item__content"
class=("thaw-menu-item__content--selected", move || menu.get().value == key.get())
on:click=on_click
style=move || css_vars.get()
>

2
src/menu/mod.rs
View file

@ -30,7 +30,7 @@ pub fn Menu(
}
});
provide_context(menu_injection_key);
view! { <div class="melt-menu">{children()}</div> }
view! { <div class="thaw-menu">{children()}</div> }
}
#[derive(Clone)]

12
src/message/message.css
View file

@ -1,4 +1,4 @@
.melt-message-container {
.thaw-message-container {
z-index: 6000;
position: fixed;
top: 12px;
@ -11,11 +11,11 @@
align-items: center;
}
.melt-message-wrapper {
.thaw-message-wrapper {
margin-bottom: 8px;
}
.melt-message {
.thaw-message {
box-sizing: border-box;
display: flex;
align-items: center;
@ -24,7 +24,7 @@
padding: 10px 20px;
max-width: 75vh;
background: var(--melt-background-color);
background: var(--thaw-background-color);
font-size: 14px;
border-radius: 3px;
@ -32,13 +32,13 @@
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
.melt-message__icon {
.thaw-message__icon {
width: 20px;
height: 20px;
margin-right: 10px;
font-size: 20px;
}
.melt-message__content {
.thaw-message__content {
line-height: 1.6;
}

10
src/message/message.rs
View file

@ -34,7 +34,7 @@ pub(crate) fn Message(variant: MessageVariant, content: String) -> impl IntoView
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color: {}",
"--thaw-background-color: {}",
theme.message.background_color
))
});
@ -42,12 +42,12 @@ pub(crate) fn Message(variant: MessageVariant, content: String) -> impl IntoView
});
let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
view! {
<div class="melt-message-wrapper">
<div class="melt-message" style=move || css_vars.get()>
<div class="melt-message__icon">
<div class="thaw-message-wrapper">
<div class="thaw-message" style=move || css_vars.get()>
<div class="thaw-message__icon">
<Icon icon=variant.icon() style/>
</div>
<div class="melt-message__content">{content}</div>
<div class="thaw-message__content">{content}</div>
</div>
</div>
}

2
src/message/message_provider.rs
View file

@ -24,7 +24,7 @@ pub fn MessageProvider(children: Children) -> impl IntoView {
view! {
{children()}
<Teleport>
<div class="melt-message-container">
<div class="thaw-message-container">
<For
each=move || message_list.get()
key=|message| message.0

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

@ -24,7 +24,7 @@ pub fn NavBar(
let css_vars = create_memo(move |_| {
theme.with(|theme| {
format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
theme.nav_bar.background_color
)
})
@ -46,10 +46,10 @@ pub fn NavBar(
};
view! {
<div class="melt-nav-bar" style=move || css_vars.get()>
<div class="thaw-nav-bar" style=move || css_vars.get()>
<If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
<Then slot>
<div class="melt-nav-bar__left" on:click=on_click_left>
<div class="thaw-nav-bar__left" on:click=on_click_left>
<If cond=left_arrow>
<Then slot>
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
@ -59,10 +59,10 @@ pub fn NavBar(
</div>
</Then>
</If>
<div class="melt-nav-bar__center">{move || title.get()}</div>
<div class="thaw-nav-bar__center">{move || title.get()}</div>
<If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
<Then slot>
<div class="melt-nav-bar__right" on:click=on_click_right>
<div class="thaw-nav-bar__right" on:click=on_click_right>
{move || right_text.get()}
</div>
</Then>

10
src/mobile/nav_bar/nav-bar.css
View file

@ -1,21 +1,21 @@
.melt-nav-bar {
.thaw-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 46px;
line-height: 46px;
background-color: var(--melt-background-color);
background-color: var(--thaw-background-color);
}
.melt-nav-bar__center {
.thaw-nav-bar__center {
max-width: 60%;
font-weight: 600;
text-align: center;
margin: 0 auto;
}
.melt-nav-bar__left {
.thaw-nav-bar__left {
position: absolute;
top: 0;
bottom: 0;
@ -27,7 +27,7 @@
align-items: center;
}
.melt-nav-bar__right {
.thaw-nav-bar__right {
position: absolute;
top: 0;
bottom: 0;

4
src/mobile/tabbar/mod.rs
View file

@ -20,7 +20,7 @@ pub fn Tabbar(
let css_vars = create_memo(move |_| {
theme.with(|theme| {
format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
theme.tabbar.background_color
)
})
@ -44,7 +44,7 @@ pub fn Tabbar(
});
provide_context(tabbar_injection_key);
view! {
<div class="melt-tabbar" style=move || css_vars.get()>
<div class="thaw-tabbar" style=move || css_vars.get()>
{children()}
</div>
}

8
src/mobile/tabbar/tabbar-item.css
View file

@ -1,4 +1,4 @@
.melt-tabbar-item {
.thaw-tabbar-item {
flex: 1;
display: flex;
flex-direction: column;
@ -7,11 +7,11 @@
cursor: pointer;
}
.melt-tabbar-item--selected {
color: var(--melt-font-color-selected)
.thaw-tabbar-item--selected {
color: var(--thaw-font-color-selected)
}
.melt-tabbar-item__content {
.thaw-tabbar-item__content {
font-size: 12px;
line-height: 16px;
}

4
src/mobile/tabbar/tabbar.css
View file

@ -1,5 +1,5 @@
.melt-tabbar {
background-color: var(--melt-background-color);
.thaw-tabbar {
background-color: var(--thaw-background-color);
position: fixed;
left: 0;
right: 0;

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

@ -22,22 +22,22 @@ pub fn TabbarItem(
let mut css_vars = String::new();
theme.with(|theme| {
let font_color = theme.common.color_primary.clone();
css_vars.push_str(&format!("--melt-font-color-selected: {font_color};"));
css_vars.push_str(&format!("--thaw-font-color-selected: {font_color};"));
});
css_vars
});
view! {
<div
class="melt-tabbar-item"
class=("melt-tabbar-item--selected", move || tabbar.get().value == key.get())
class="thaw-tabbar-item"
class=("thaw-tabbar-item--selected", move || tabbar.get().value == key.get())
on:click=on_click
style=move || css_vars.get()
>
<OptionComp value=icon let:icon>
<Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
<Icon icon=icon width="22px" height="22px" class="thaw-tabbar-item__icon"/>
</OptionComp>
<div class="melt-tabbar-item__content">{children()}</div>
<div class="thaw-tabbar-item__content">{children()}</div>
</div>
}
}

2
src/mobile/toast/mod.rs
View file

@ -12,7 +12,7 @@ pub fn show_toast(options: ToastOptions) {
mount_style("toast", include_str!("./toast.css"));
let parent = Element::from(document().body().expect("body element not to exist"));
let children = view! { <div class="melt-toast">{options.message}</div> };
let children = view! { <div class="thaw-toast">{options.message}</div> };
let node = children.into_view();
#[cfg(target_arch = "wasm32")]

2
src/mobile/toast/toast.css
View file

@ -1,4 +1,4 @@
.melt-toast {
.thaw-toast {
white-space: pre-wrap;
word-break: break-all;
max-width: 80%;

8
src/modal/mod.rs
View file

@ -24,14 +24,14 @@ pub fn Modal(
view! {
<Teleport>
<div
class="melt-modal-container"
class="thaw-modal-container"
style=move || if show.get() { "" } else { "display: none" }
>
<div class="melt-modal-mask"></div>
<div class="melt-modal-body">
<div class="thaw-modal-mask"></div>
<div class="thaw-modal-body">
<Card>
<CardHeader slot>
<span class="melt-model-title">{move || title.get()}</span>
<span class="thaw-model-title">{move || title.get()}</span>
</CardHeader>
<CardHeaderExtra slot>
<span style="cursor: pointer;" on:click=move |_| show.set(false)>

10
src/modal/modal.css
View file

@ -1,7 +1,7 @@
.melt-modal-container {
.thaw-modal-container {
z-index: 2001;
}
.melt-modal-mask {
.thaw-modal-mask {
position: fixed;
top: 0;
right: 0;
@ -10,7 +10,7 @@
background-color: #0007;
z-index: 2000;
}
.melt-modal-body {
.thaw-modal-body {
position: fixed;
top: 0;
right: 0;
@ -21,11 +21,11 @@
z-index: 2002;
}
.melt-modal-body .melt-card {
.thaw-modal-body .thaw-card {
width: 600px;
margin: auto;
}
.melt-model-title {
.thaw-model-title {
font-size: 16px;
}

12
src/progress/mod.rs
View file

@ -13,16 +13,16 @@ pub fn Progress(
let right_tip: StoredMaybeSignal<_> = right_tip.into();
view! {
<div class="melt-progress">
<span class="melt-progress__tip-left">
<div class="thaw-progress">
<span class="thaw-progress__tip-left">
<Show when=move || left_tip.with(|v| !v.is_empty())>{move || left_tip.get()}</Show>
</span>
<span class="melt-progress__progress">
<span class="melt-progress__progress-inner" style=style>
<span class="melt-progress__progress-circle"></span>
<span class="thaw-progress__progress">
<span class="thaw-progress__progress-inner" style=style>
<span class="thaw-progress__progress-circle"></span>
</span>
</span>
<span class="melt-progress__tip-right">
<span class="thaw-progress__tip-right">
<Show when=move || {
right_tip.with(|v| !v.is_empty())
}>{move || right_tip.get()}</Show>

12
src/progress/progress.css
View file

@ -1,4 +1,4 @@
.melt-progress {
.thaw-progress {
width: 100%;
display: flex;
justify-content: center;
@ -7,8 +7,8 @@
padding: 0 8px;
}
.melt-progress__tip-right,
.melt-progress__tip-left {
.thaw-progress__tip-right,
.thaw-progress__tip-left {
display: inline-block;
margin: 0 10px;
width: 48px;
@ -17,7 +17,7 @@
color: #777;
}
.melt-progress__progress {
.thaw-progress__progress {
flex: 1;
height: 3px;
background: #f2f2f2;
@ -25,7 +25,7 @@
/* cursor: pointer; */
}
.melt-progress__progress-inner {
.thaw-progress__progress-inner {
position: relative;
top: -14px;
display: inline-block;
@ -34,7 +34,7 @@
transition: width 0.1s;
}
.melt-progress__progress-circle {
.thaw-progress__progress-circle {
display: inline-block;
position: absolute;
right: -3px;

12
src/radio/mod.rs
View file

@ -17,7 +17,7 @@ pub fn Radio(
let mut css_vars = String::new();
theme.with(|theme| {
let bg_color = theme.common.color_primary.clone();
css_vars.push_str(&format!("--melt-background-color-checked: {bg_color};"));
css_vars.push_str(&format!("--thaw-background-color-checked: {bg_color};"));
});
css_vars
@ -25,14 +25,14 @@ pub fn Radio(
view! {
<div
class="melt-radio"
class=("melt-radio--checked", move || value.get())
class="thaw-radio"
class=("thaw-radio--checked", move || value.get())
style=move || css_vars.get()
on:click=move |_| value.set(!value.get_untracked())
>
<input class="melt-radio__input" type="radio" prop:value=move || value.get()/>
<div class="melt-radio__dot"></div>
<div class="melt-radio__label">{children()}</div>
<input class="thaw-radio__input" type="radio" prop:value=move || value.get()/>
<div class="thaw-radio__dot"></div>
<div class="thaw-radio__label">{children()}</div>
</div>
}
}

18
src/radio/radio.css
View file

@ -1,16 +1,16 @@
.melt-radio {
.thaw-radio {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.melt-radio__input {
.thaw-radio__input {
width: 0;
height: 0;
opacity: 0;
}
.melt-radio__dot {
.thaw-radio__dot {
display: inline-block;
position: relative;
width: 14px;
@ -19,23 +19,23 @@
border-radius: 50%;
}
.melt-radio:hover .melt-radio__dot,
.melt-radio--checked .melt-radio__dot {
border-color: var(--melt-background-color-checked);
.thaw-radio:hover .thaw-radio__dot,
.thaw-radio--checked .thaw-radio__dot {
border-color: var(--thaw-background-color-checked);
}
.melt-radio--checked .melt-radio__dot::before {
.thaw-radio--checked .thaw-radio__dot::before {
content: "";
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
background-color: var(--melt-background-color-checked);
background-color: var(--thaw-background-color-checked);
border-radius: 50%;
}
.melt-radio__label {
.thaw-radio__label {
display: inline-block;
padding: 0 6px;
user-select: none;

24
src/select/mod.rs
View file

@ -32,14 +32,14 @@ where
let mut css_vars = String::new();
theme.with(|theme| {
let border_color_hover = theme.common.color_primary.clone();
css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};"));
css_vars.push_str(&format!("--thaw-border-color-hover: {border_color_hover};"));
css_vars.push_str(&format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
theme.select.background_color
));
css_vars.push_str(&format!("--melt-font-color: {};", theme.select.font_color));
css_vars.push_str(&format!("--thaw-font-color: {};", theme.select.font_color));
css_vars.push_str(&format!(
"--melt-border-color: {};",
"--thaw-border-color: {};",
theme.select.border_color
));
});
@ -51,16 +51,16 @@ where
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
theme.select.menu_background_color
));
css_vars.push_str(&format!(
"--melt-background-color-hover: {};",
"--thaw-background-color-hover: {};",
theme.select.menu_background_color_hover
));
css_vars.push_str(&format!("--melt-font-color: {};", theme.select.font_color));
css_vars.push_str(&format!("--thaw-font-color: {};", theme.select.font_color));
css_vars.push_str(&format!(
"--melt-font-color-selected: {};",
"--thaw-font-color-selected: {};",
theme.common.color_primary
));
});
@ -116,14 +116,14 @@ where
None => String::new(),
});
view! {
<div class="melt-select" ref=trigger_ref on:click=show_menu style=move || css_vars.get()>
<div class="thaw-select" ref=trigger_ref on:click=show_menu style=move || css_vars.get()>
{move || select_option_label.get()}
</div>
<Teleport>
<div
class="melt-select-menu"
class="thaw-select-menu"
style=move || {
if is_show_menu.get() { menu_css_vars.get() } else { "display: none;".into() }
}
@ -142,9 +142,9 @@ where
};
view! {
<div
class="melt-select-menu__item"
class="thaw-select-menu__item"
class=(
"melt-select-menu__item-selected",
"thaw-select-menu__item-selected",
move || value.get() == Some(item.get_value().value),
)

28
src/select/select.css
View file

@ -1,24 +1,24 @@
.melt-select {
.thaw-select {
position: relative;
padding: 0 10px;
height: 30px;
line-height: 30px;
background-color: var(--melt-background-color);
color: var(--melt-font-color);
border: 1px solid var(--melt-border-color);
background-color: var(--thaw-background-color);
color: var(--thaw-font-color);
border: 1px solid var(--thaw-border-color);
border-radius: 3px;
transition: all 0.3s;
cursor: pointer;
box-sizing: border-box;
}
.melt-select:hover {
border-color: var(--melt-border-color-hover);
.thaw-select:hover {
border-color: var(--thaw-border-color-hover);
}
.melt-select-menu {
color: var(--melt-font-color);
background-color: var(--melt-background-color);
.thaw-select-menu {
color: var(--thaw-font-color);
background-color: var(--thaw-background-color);
box-sizing: border-box;
padding: 5px;
position: absolute;
@ -32,16 +32,16 @@
z-index: 1000;
}
.melt-select-menu__item {
.thaw-select-menu__item {
padding: 6px 5px;
border-radius: 2px;
cursor: pointer;
}
.melt-select-menu__item:hover {
background-color: var(--melt-background-color-hover);
.thaw-select-menu__item:hover {
background-color: var(--thaw-background-color-hover);
}
.melt-select-menu__item-selected {
color: var(--melt-font-color-selected);
.thaw-select-menu__item-selected {
color: var(--thaw-font-color-selected);
}

6
src/skeleton/mod.rs
View file

@ -28,11 +28,11 @@ pub fn Skeleton(
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color-start: {};",
"--thaw-background-color-start: {};",
theme.skeletion.background_color_start
));
css_vars.push_str(&format!(
"--melt-background-color-end: {};",
"--thaw-background-color-end: {};",
theme.skeletion.background_color_end
));
});
@ -41,7 +41,7 @@ pub fn Skeleton(
});
(0..repeat.get())
.map(|_| {
view! { <div class="melt-skeleton" style=move || css_vars.get()></div> }
view! { <div class="thaw-skeleton" style=move || css_vars.get()></div> }
})
.collect_view()
}

14
src/skeleton/skeleton.css vendored
View file

@ -1,19 +1,19 @@
.melt-skeleton {
.thaw-skeleton {
width: 100%;
height: 1em;
background-color: var(--melt-background-color-start);
background-color: var(--thaw-background-color-start);
background: linear-gradient(
90deg,
var(--melt-background-color-start) 25%,
var(--melt-background-color-end) 37%,
var(--melt-background-color-start) 63%
var(--thaw-background-color-start) 25%,
var(--thaw-background-color-end) 37%,
var(--thaw-background-color-start) 63%
);
animation: meltSkeletonLoading 1.4s ease infinite;
animation: thawSkeletonLoading 1.4s ease infinite;
background-size: 400% 100%;
}
@keyframes meltSkeletonLoading {
@keyframes thawSkeletonLoading {
from {
background-position: 100% 50%;
}

12
src/slider/mod.rs
View file

@ -19,11 +19,11 @@ pub fn Slider(
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color: {};",
"--thaw-background-color: {};",
&theme.slider.background_color
));
css_vars.push_str(&format!(
"--melt-background-color-fill: {};",
"--thaw-background-color-fill: {};",
&theme.common.color_primary
));
});
@ -78,16 +78,16 @@ pub fn Slider(
on_cleanup(move || on_mouse_move.remove());
view! {
<div class="melt-slider" style=move || css_vars.get()>
<div class="melt-slider-rail" ref=rail_ref>
<div class="thaw-slider" style=move || css_vars.get()>
<div class="thaw-slider-rail" ref=rail_ref>
<div
class="melt-slider-rail__fill"
class="thaw-slider-rail__fill"
style=move || format!("width: {}%", percentage.get())
></div>
</div>
<div
on:mousedown=on_mouse_down
class="melt-slider-handle"
class="thaw-slider-handle"
style=move || {
format!(
"left: {}%; transform: translateX(-{}%)",

Some files were not shown because too many files have changed in this diff Show more