From fecbf104a9631af253f2cb16fd4e4b36810337db Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Fri, 14 Apr 2023 17:28:32 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20checkbox=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Cargo.toml                          |  2 +-
 examples/basic/src/demo_checkbox.rs | 20 +++++++++++
 examples/basic/src/main.rs          |  4 +++
 src/checkbox/checkbox.css           | 31 ++++++++++++++++++
 src/checkbox/mod.rs                 | 51 +++++++++++++++++++++++++++++
 src/lib.rs                          |  2 ++
 6 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 examples/basic/src/demo_checkbox.rs
 create mode 100644 src/checkbox/checkbox.css
 create mode 100644 src/checkbox/mod.rs

diff --git a/Cargo.toml b/Cargo.toml
index 4f165c0..8529ed5 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -17,7 +17,7 @@ leptos = { version = "0.2.5", features = ["stable"] }
 stylers = "0.3.1"
 web-sys = "0.3.61"
 leptos_dom = { version = "0.2.5" }
-leptos-icons = { git = "https://github.com/Carlosted/leptos-icons.git", features = ["AiCloseOutlined"] }
+leptos-icons = { git = "https://github.com/Carlosted/leptos-icons.git", features = ["AiCloseOutlined", "AiCheckOutlined"] }
 
 [workspace]
 members = ["examples/basic"]
diff --git a/examples/basic/src/demo_checkbox.rs b/examples/basic/src/demo_checkbox.rs
new file mode 100644
index 0000000..02aa3e3
--- /dev/null
+++ b/examples/basic/src/demo_checkbox.rs
@@ -0,0 +1,20 @@
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn DemoCheckout(cx: Scope) -> impl IntoView {
+    let (checked, set_checked) = create_signal(cx, false);
+    view! {cx,
+        <div>
+            <Checkbox>
+                "A"
+            </Checkbox>
+            <Checkbox checked=true>
+                "B"
+            </Checkbox>
+            <Checkbox checked=checked on_checked=set_checked>
+                "Click"
+            </Checkbox>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
index ebdf6f7..19853e6 100644
--- a/examples/basic/src/main.rs
+++ b/examples/basic/src/main.rs
@@ -1,8 +1,10 @@
 use leptos::*;
 use melt_ui::*;
 mod demo_button;
+mod demo_checkbox;
 mod demo_modal;
 pub use demo_button::*;
+pub use demo_checkbox::*;
 pub use demo_modal::*;
 
 #[component]
@@ -45,6 +47,8 @@ pub fn App(cx: Scope) -> impl IntoView {
         <DemoButton />
         <hr />
         <DemoModal/>
+        <hr />
+        <DemoCheckout />
     }
 }
 
diff --git a/src/checkbox/checkbox.css b/src/checkbox/checkbox.css
new file mode 100644
index 0000000..c29a9b6
--- /dev/null
+++ b/src/checkbox/checkbox.css
@@ -0,0 +1,31 @@
+.melt-checkbox {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.melt-checkbox__input {
+    width: 0;
+    height: 0;
+}
+.melt-checkbox__dot {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 14px;
+    height: 14px;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+}
+.melt-checkbox:hover .melt-checkbox__dot,
+.melt-checkbox--checked .melt-checkbox__dot {
+    border-color: var(--background-color-checked);
+}
+.melt-checkbox--checked .melt-checkbox__dot {
+    background-color: var(--background-color-checked);
+}
+
+.melt-checkbox__label {
+    display: inline-block;
+    padding: 0 6px;
+}
diff --git a/src/checkbox/mod.rs b/src/checkbox/mod.rs
new file mode 100644
index 0000000..6475bc4
--- /dev/null
+++ b/src/checkbox/mod.rs
@@ -0,0 +1,51 @@
+use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
+use leptos::*;
+use stylers::style_sheet_str;
+use leptos_icons::*;
+
+#[component]
+pub fn Checkbox(
+    cx: Scope,
+    #[prop(optional, into)] checked: MaybeSignal<bool>,
+    #[prop(optional, into)] on_checked: Option<SignalSetter<bool>>,
+    children: Children,
+) -> impl IntoView {
+    let theme = use_theme(cx, Theme::light);
+    let class_name = mount_style("checkbox", || {
+        style_sheet_str!("./src/checkbox/checkbox.css")
+    });
+
+    let css_vars = create_memo(cx, move |_| {
+        let mut css_vars = String::new();
+        let theme = theme.get();
+        let bg_color = theme.common.color_primary;
+        css_vars.push_str(&format!("--background-color-checked: {bg_color};"));
+        css_vars
+    });
+    let on_click = move |_| {
+        if let Some(on_checked) = on_checked {
+            on_checked.set(!checked.get());
+        }
+    };
+    view! {cx, class=class_name,
+        <div class:melt-checkbox=true class=("melt-checkbox--checked", move || checked.get()) style=move || css_vars.get() on:click=on_click>
+            <input class="melt-checkbox__input" type="checkbox" />
+            <div class="melt-checkbox__dot">
+                {
+                    move || {
+                        if checked.get() {
+                            view! {cx,
+                                <LeptosIcon icon=AiIcon::AiCheckOutlined style="color: white"/>
+                            }.into()
+                        } else {
+                            None
+                        }
+                    }
+                }
+            </div>
+            <div class="melt-checkbox__label">
+                {children(cx)}
+            </div>
+        </div>
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index c4c7dd4..ce682b1 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,5 +1,6 @@
 mod button;
 mod card;
+mod checkbox;
 mod input;
 mod modal;
 mod progress;
@@ -10,6 +11,7 @@ mod theme;
 mod utils;
 
 pub use button::*;
+pub use checkbox::*;
 pub use input::*;
 pub use modal::*;
 pub use progress::*;