refactor: card

demo_markdown/docs/card/mod.md

@@ -2,32 +2,26 @@
 
 ```rust demo
 view! {
-    <Space vertical=true>
+    <Card>
-        <Card title="title">"content"</Card>
+        <CardHeader>
-        <Card title="title">
+            "Header"
-            <CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
+            <CardHeaderDescription slot>
-            "content"
+                "Description"
-        </Card>
+            </CardHeaderDescription>
-        <Card title="title">
+            <CardHeaderAction slot>
-            <CardHeader>
+                <Button appearance=ButtonAppearance::Transparent>
-                "Header"
+                    "..."
-                <CardHeaderDescription slot>
+                </Button>
-                    "Description"
+            </CardHeaderAction>
-                </CardHeaderDescription>
+        </CardHeader>
-                <CardHeaderAction slot>
+        <CardPreview>
-                    <Button appearance=ButtonAppearance::Transparent>
+            <img src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" style="width: 100%"/>
-                        "..."
+        </CardPreview>
-                    </Button>
+        <CardFooter>
-                </CardHeaderAction>
+            <Button>"Reply"</Button>
-            </CardHeader>
+            <Button>"Share"</Button>
-            "content"
+        </CardFooter>
-        </Card>
+    </Card>
-        <Card title="title">
-            <CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
-            "content"
-            <CardFooter slot>"footer"</CardFooter>
-        </Card>
-    </Space>
 }
 ```
 

thaw/src/card/card-footer.css

@@ -0,0 +1,6 @@
+.thaw-card-footer {
+    display: flex;
+    flex-direction: row;
+    column-gap: 12px;
+    row-gap: 12px;
+}

thaw/src/card/card.css

@@ -19,11 +19,10 @@
     --thaw-card--size: 12px;
 }
 
-.thaw-card__header {
+.thaw-card > .thaw-card-preview {
-    font-weight: 600;
+    margin: 0 calc(var(--thaw-card--size)* -1);
-    display: flex;
-    align-items: center;
 }
+
 .thaw-card__header-extra {
     display: flex;
     align-items: center;

thaw/src/card/card_footer.rs

@@ -0,0 +1,12 @@
+use leptos::*;
+use thaw_utils::mount_style;
+
+#[component]
+pub fn CardFooter(children: Children) -> impl IntoView {
+    mount_style("card-footer", include_str!("./card-footer.css"));
+    view! {
+        <div class="thaw-card-footer">
+            {children()}
+        </div>
+    }
+}

thaw/src/card/card_preview.rs

@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn CardPreview(children: Children) -> impl IntoView {
+    view! {
+        <div class="thaw-card-preview" style="position: relative">
+            {children()}
+        </div>
+    }
+}

thaw/src/card/mod.rs

@@ -1,15 +1,13 @@
+mod card_footer;
 mod card_header;
+mod card_preview;
 
+pub use card_footer::*;
 pub use card_header::*;
+pub use card_preview::*;
 
-use crate::{use_theme, Theme};
 use leptos::*;
-use thaw_components::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
-// #[slot]
-// pub struct CardHeader {
-//     children: Children,
-// }
 
 #[slot]
 pub struct CardHeaderExtra {
@@ -26,69 +24,19 @@ pub struct CardFooter {
 #[component]
 pub fn Card(
     #[prop(optional, into)] title: OptionalProp<MaybeSignal<String>>,
-    // #[prop(optional)] card_header: Option<CardHeader>,
     #[prop(optional)] card_header_extra: Option<CardHeaderExtra>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
     children: Children,
     #[prop(optional)] card_footer: Option<CardFooter>,
 ) -> impl IntoView {
     mount_style("card", include_str!("./card.css"));
-    let theme = use_theme(Theme::light);
-    let css_vars = create_memo(move |_| {
-        let mut css_vars = String::new();
-        theme.with(|theme| {
-            // TODO
-            css_vars.push_str(&format!(
-                "--thaw-background-color: ;",
-                // theme.common.background_color
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-border-color: {};",
-                theme.common.border_color
-            ));
-        });
-        css_vars
-    });
 
     view! {
         <div
             class=class_list!["thaw-card", class.map(| c | move || c.get())]
-            style=move || css_vars.get()
             role="group"
         >
-
+            {children()}
-            // {if card_header.is_some() || title.is_some() {
-            //     view! {
-            //         <div class="thaw-card__header">
-            //             <div class="thaw-card__header-content">
-
-            //                 {if let Some(header) = card_header {
-            //                     (header.children)().into_view()
-            //                 } else if let Some(title) = title.into_option() {
-            //                     (move || title.get()).into_view()
-            //                 } else {
-            //                     unreachable!()
-            //                 }}
-
-            //             </div>
-            //             <OptionComp value=card_header_extra let:header_extra>
-            //                 <div class="thaw-card__header-extra">{(header_extra.children)()}</div>
-            //             </OptionComp>
-            //         </div>
-            //     }
-            //         .into()
-            // } else {
-            //     None
-            // }}
-
-            <div class="thaw-card__content">{children()}</div>
-            <OptionComp value=card_footer let:footer>
-                <If cond=footer.if_>
-                    <Then slot>
-                        <div class="thaw-card__footer">{(footer.children)()}</div>
-                    </Then>
-                </If>
-            </OptionComp>
         </div>
     }
 }