feat: collapse add theme (#74)

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>
 }

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);

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>

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>
     }
 }

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(),
+        }
+    }
+}

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(),
         }
     }
 }