From 1b1aed9aaa7607a48cb7eb86922cce38d2fa9df9 Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Tue, 9 Jan 2024 22:56:38 +0800
Subject: [PATCH] feat: collapse add theme (#74)

---
 demo_markdown/docs/collapse/mod.md |  5 ++++-
 thaw/src/collapse/collapse.css     |  7 +++++++
 thaw/src/collapse/collapse_item.rs |  5 +----
 thaw/src/collapse/mod.rs           | 24 +++++++++++++++++++++---
 thaw/src/collapse/theme.rs         | 20 ++++++++++++++++++++
 thaw/src/theme/mod.rs              |  9 ++++++---
 6 files changed, 59 insertions(+), 11 deletions(-)
 create mode 100644 thaw/src/collapse/theme.rs

diff --git a/demo_markdown/docs/collapse/mod.md b/demo_markdown/docs/collapse/mod.md
index b560dff..119410d 100644
--- a/demo_markdown/docs/collapse/mod.md
+++ b/demo_markdown/docs/collapse/mod.md
@@ -28,7 +28,10 @@ view! {
             "Build fast web applications with Rust."
         </CollapseItem>
         <CollapseItem title="Thaw" key="thaw">
-            "An easy to use leptos component library"
+            "An easy to use leptos component library."
+        </CollapseItem>
+        <CollapseItem title="Naive UI" key="naive-ui">
+            "A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast."
         </CollapseItem>
     </Collapse>
 }
diff --git a/thaw/src/collapse/collapse.css b/thaw/src/collapse/collapse.css
index 3bcb967..bfe6d1b 100644
--- a/thaw/src/collapse/collapse.css
+++ b/thaw/src/collapse/collapse.css
@@ -1,5 +1,6 @@
 .thaw-collapse .thaw-collapse-item:not(:first-child) {
     margin-top: 16px;
+    border-top: 1px solid var(--thaw-border-color);
 }
 
 .thaw-collapse-item__header {
@@ -8,6 +9,12 @@
     cursor: pointer;
 }
 
+.thaw-collapse
+    .thaw-collapse-item:not(:first-child)
+    .thaw-collapse-item__header {
+    padding-top: 16px;
+}
+
 .thaw-collapse-item-arrow {
     margin-right: 4px;
     transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/thaw/src/collapse/collapse_item.rs b/thaw/src/collapse/collapse_item.rs
index b1ff2a2..a73715e 100644
--- a/thaw/src/collapse/collapse_item.rs
+++ b/thaw/src/collapse/collapse_item.rs
@@ -44,10 +44,7 @@ pub fn CollapseItem(
             "thaw-collapse-item", ("thaw-collapse-item--active", move || is_show_content.get()),
             move || class.get()
         ]>
-            <div
-                class="thaw-collapse-item__header"
-                on:click=on_click
-            >
+            <div class="thaw-collapse-item__header" on:click=on_click>
                 <Icon icon=Icon::from(AiIcon::AiRightOutlined) class="thaw-collapse-item-arrow"/>
                 {move || title.get()}
             </div>
diff --git a/thaw/src/collapse/mod.rs b/thaw/src/collapse/mod.rs
index c883955..15c693f 100644
--- a/thaw/src/collapse/mod.rs
+++ b/thaw/src/collapse/mod.rs
@@ -1,8 +1,14 @@
 mod collapse_item;
+mod theme;
 
 pub use collapse_item::CollapseItem;
+pub use theme::CollapseTheme;
 
-use crate::utils::{class_list::class_list, mount_style};
+use crate::{
+    use_theme,
+    utils::{class_list::class_list, mount_style},
+    Theme,
+};
 use leptos::*;
 use std::collections::HashSet;
 
@@ -14,10 +20,22 @@ pub fn Collapse(
     children: Children,
 ) -> impl IntoView {
     mount_style("collapser", include_str!("./collapse.css"));
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        theme.with(|theme| format!("--thaw-border-color: {};", theme.collapse.border_color))
+    });
 
     view! {
-        <Provider value=CollapseInjection{ value, accordion }>
-            <div class=class_list!["thaw-collapse", move || class.get()]>{children()}</div>
+        <Provider value=CollapseInjection {
+            value,
+            accordion,
+        }>
+            <div
+                class=class_list!["thaw-collapse", move || class.get()]
+                style=move || css_vars.get()
+            >
+                {children()}
+            </div>
         </Provider>
     }
 }
diff --git a/thaw/src/collapse/theme.rs b/thaw/src/collapse/theme.rs
new file mode 100644
index 0000000..386bc22
--- /dev/null
+++ b/thaw/src/collapse/theme.rs
@@ -0,0 +1,20 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct CollapseTheme {
+    pub border_color: String,
+}
+
+impl ThemeMethod for CollapseTheme {
+    fn light() -> Self {
+        Self {
+            border_color: "#efeff5".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            border_color: "#ffffff17".into(),
+        }
+    }
+}
diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs
index e9605b0..9b07ff4 100644
--- a/thaw/src/theme/mod.rs
+++ b/thaw/src/theme/mod.rs
@@ -4,9 +4,9 @@ use self::common::CommonTheme;
 use crate::{
     mobile::{NavBarTheme, TabbarTheme},
     AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, CalendarTheme,
-    ColorPickerTheme, DatePickerTheme, InputTheme, MenuTheme, MessageTheme, PopoverTheme,
-    ProgressTheme, SelectTheme, SkeletionTheme, SliderTheme, SpinnerTheme, SwitchTheme, TableTheme,
-    TagTheme, TimePickerTheme, TypographyTheme, UploadTheme,
+    CollapseTheme, ColorPickerTheme, DatePickerTheme, InputTheme, MenuTheme, MessageTheme,
+    PopoverTheme, ProgressTheme, SelectTheme, SkeletionTheme, SliderTheme, SpinnerTheme,
+    SwitchTheme, TableTheme, TagTheme, TimePickerTheme, TypographyTheme, UploadTheme,
 };
 use leptos::*;
 
@@ -44,6 +44,7 @@ pub struct Theme {
     pub time_picker: TimePickerTheme,
     pub date_picker: DatePickerTheme,
     pub popover: PopoverTheme,
+    pub collapse: CollapseTheme,
 }
 
 impl Theme {
@@ -76,6 +77,7 @@ impl Theme {
             time_picker: TimePickerTheme::light(),
             date_picker: DatePickerTheme::light(),
             popover: PopoverTheme::light(),
+            collapse: CollapseTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -107,6 +109,7 @@ impl Theme {
             time_picker: TimePickerTheme::dark(),
             date_picker: DatePickerTheme::dark(),
             popover: PopoverTheme::dark(),
+            collapse: CollapseTheme::dark(),
         }
     }
 }