From c1537409a7078f1368053ead911b3de83f6b6edc Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Sun, 18 Jun 2023 22:13:32 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20perfect=20tabs=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gh-pages/src/app.rs              |  3 ++
 gh-pages/src/pages/components.rs |  3 +-
 gh-pages/src/pages/mod.rs        |  2 ++
 gh-pages/src/pages/tabs/mod.rs   | 17 +++++++++
 src/tabs/mod.rs                  | 59 +++++++++++++++++++++++++++-----
 src/tabs/tab.css                 |  4 +++
 src/tabs/tabs.css                |  4 +--
 7 files changed, 81 insertions(+), 11 deletions(-)
 create mode 100644 gh-pages/src/pages/tabs/mod.rs

diff --git a/gh-pages/src/app.rs b/gh-pages/src/app.rs
index 96f653c..ba5860f 100644
--- a/gh-pages/src/app.rs
+++ b/gh-pages/src/app.rs
@@ -49,6 +49,9 @@ pub fn App(cx: Scope) -> impl IntoView {
                     <Route path="/toast" view=move |cx| view! {cx,
                         <MobilePage path="/melt-ui?path=/mobile/toast" />
                     } />
+                    <Route path="/tabs" view=move |cx| view! {cx,
+                        <TabsPage />
+                    } />
                 </Route>
             </Routes>
             <Routes base="/melt-ui/mobile".to_string()>
diff --git a/gh-pages/src/pages/components.rs b/gh-pages/src/pages/components.rs
index 066ca97..09bc608 100644
--- a/gh-pages/src/pages/components.rs
+++ b/gh-pages/src/pages/components.rs
@@ -12,7 +12,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
     create_effect(cx, move |_| {
         let pathname = loaction.pathname.get();
 
-        let re = Regex::new(r"^/components/(.+)$").unwrap();
+        let re = Regex::new(r"^/melt-ui/components/(.+)$").unwrap();
         let Some(caps) = re.captures(&pathname) else {
             return;
         };
@@ -46,6 +46,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                         <MenuItem key="button" label="button" />
                         <MenuItem key="checkbox" label="checkbox" />
                         <MenuItem key="toast" label="toast" />
+                        <MenuItem key="tabs" label="tabs" />
                     </Menu>
                 </LayoutSider>
                 <Layout>
diff --git a/gh-pages/src/pages/mod.rs b/gh-pages/src/pages/mod.rs
index 8f587ec..53aa7d7 100644
--- a/gh-pages/src/pages/mod.rs
+++ b/gh-pages/src/pages/mod.rs
@@ -10,6 +10,7 @@ mod modal;
 mod nav_bar;
 mod slider;
 mod tabbar;
+mod tabs;
 mod toast;
 
 pub use button::*;
@@ -24,4 +25,5 @@ pub use modal::*;
 pub use nav_bar::*;
 pub use slider::*;
 pub use tabbar::*;
+pub use tabs::*;
 pub use toast::*;
diff --git a/gh-pages/src/pages/tabs/mod.rs b/gh-pages/src/pages/tabs/mod.rs
new file mode 100644
index 0000000..925fbaf
--- /dev/null
+++ b/gh-pages/src/pages/tabs/mod.rs
@@ -0,0 +1,17 @@
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn TabsPage(cx: Scope) -> impl IntoView {
+    let active_key = create_rw_signal(cx, "apple");
+    view! { cx,
+        <Tabs active_key>
+            <Tab key="apple" label="Apple">
+                "apple"
+            </Tab>
+            <Tab key="pear" label="Pear">
+                "pear"
+            </Tab>
+        </Tabs>
+    }
+}
diff --git a/src/tabs/mod.rs b/src/tabs/mod.rs
index 2953299..4bbf60b 100644
--- a/src/tabs/mod.rs
+++ b/src/tabs/mod.rs
@@ -1,5 +1,5 @@
 mod tab;
-use crate::{utils::mount_style::mount_style, theme::use_theme, Theme};
+use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
 use stylers::style_sheet_str;
 pub use tab::*;
@@ -20,19 +20,56 @@ pub fn Tabs(cx: Scope, active_key: RwSignal<&'static str>, children: Children) -
         let mut css_vars = String::new();
         let theme = theme.get();
         let color_primary = theme.common.color_primary.clone();
-        css_vars.push_str(&format!("--label-active-background-color: {color_primary};"));
+        css_vars.push_str(&format!(
+            "--label-active-background-color: {color_primary};"
+        ));
         css_vars
     });
+
+    let label_line = create_rw_signal::<Option<TabsLabelLine>>(cx, None);
+    let label_line_style = create_memo(cx, move |_| {
+        let mut style = String::new();
+        if let Some(line) = label_line.get() {
+            style.push_str(&format!("width: {}px; left: {}px", line.width, line.left))
+        }
+        style
+    });
+    let label_list_ref = create_node_ref::<html::Div>(cx);
+
     view! { cx, class=class_name,
         <div class="melt-tabs" style=move || css_vars.get()>
-            <div class="melt-tabs__label-list">
-                <For each=move || tab_options_vec.get() key=move |v| v.key.clone() view=move |cx, options| view! {cx, class=class_name,
-                    <span class="melt-tabs__label" class=("melt-tabs__label--active", move || options.key == active_key.get()) on:click=move |_| active_key.set(options.key)>
-                        { options.label }
-                    </span>
+            <div class="melt-tabs__label-list" ref=label_list_ref>
+                <For each=move || tab_options_vec.get() key=move |v| v.key.clone() view=move |cx, options| {
+                    let label_ref = create_node_ref::<html::Span>(cx);
+                    create_effect(cx, move |_| {
+                        let Some(label) = label_ref.get() else {
+                            return;
+                        };
+                        let Some(label_list) = label_list_ref.get() else {
+                            return;
+                        };
+                        if options.key == active_key.get() {
+                            request_animation_frame(move || {
+                                let list_rect = label_list.get_bounding_client_rect();
+                                let rect = label.get_bounding_client_rect();
+                                label_line.set(Some(TabsLabelLine {
+                                    width: rect.width(),
+                                    left: rect.left() - list_rect.left(),
+                                }));
+                            });
+                        }
+                    });
+                    view! {cx, class=class_name,
+                        <span class="melt-tabs__label" class=("melt-tabs__label--active", move || options.key == active_key.get())
+                            on:click=move |_| active_key.set(options.key)
+                            ref=label_ref
+                        >
+                            { options.label }
+                        </span>
+                    }
                 }>
                 </For>
-                <span class="melt-tabs-label__active"></span>
+                <span class="melt-tabs-label__line" style=move || label_line_style.get()></span>
             </div>
             <div>
                 { children(cx) }
@@ -41,6 +78,12 @@ pub fn Tabs(cx: Scope, active_key: RwSignal<&'static str>, children: Children) -
     }
 }
 
+#[derive(Clone)]
+pub(crate) struct TabsLabelLine {
+    width: f64,
+    left: f64,
+}
+
 #[derive(Clone)]
 pub struct TabsInjectionKey {
     active_key: RwSignal<&'static str>,
diff --git a/src/tabs/tab.css b/src/tabs/tab.css
index d28c3f8..75b3261 100644
--- a/src/tabs/tab.css
+++ b/src/tabs/tab.css
@@ -1,3 +1,7 @@
+.melt-tab {
+    padding-top: 12px;
+}
+
 .melt-tab--hidden {
     display: none;
 }
diff --git a/src/tabs/tabs.css b/src/tabs/tabs.css
index 59e62ca..6e46bc2 100644
--- a/src/tabs/tabs.css
+++ b/src/tabs/tabs.css
@@ -10,11 +10,11 @@
     cursor: pointer;
 }
 
-.melt-tabs-label__active {
+.melt-tabs-label__line {
     position: absolute;
     height: 3px;
     background-color: var(--label-active-background-color);
     border-radius: 3px;
     bottom: 0;
     left: 0;
-}
\ No newline at end of file
+}