From f996a3b4eaeab74e49977d744b0833a127cb730a Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Thu, 14 Mar 2024 22:43:00 +0800
Subject: [PATCH] feat: Tag adds closable and on_close prop (#137)

---
 demo_markdown/docs/tag/mod.md | 24 ++++++++++++++++++++++++
 thaw/src/tag/mod.rs           | 27 +++++++++++++++++++++++++--
 thaw/src/tag/tag.css          | 24 +++++++++++++++++++++++-
 3 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/demo_markdown/docs/tag/mod.md b/demo_markdown/docs/tag/mod.md
index b2eaf62..6d539c0 100644
--- a/demo_markdown/docs/tag/mod.md
+++ b/demo_markdown/docs/tag/mod.md
@@ -11,10 +11,34 @@ view! {
 }
 ```
 
+### Closable
+
+```rust demo
+let message = use_message();
+let success = move |_| {
+    message.create(
+        "tag close".into(),
+        MessageVariant::Success,
+        Default::default(),
+    );
+};
+
+view! {
+    <Space>
+        <Tag closable=true on_close=success>"Default"</Tag>
+        <Tag closable=true on_close=success variant=TagVariant::Success>"Success"</Tag>
+        <Tag closable=true on_close=success variant=TagVariant::Warning>"Warning"</Tag>
+        <Tag closable=true on_close=success variant=TagVariant::Error>"Error"</Tag>
+    </Space>
+}
+```
+
 ### Tag Props
 
 | Name     | Type                                | Default               | Description                            |
 | -------- | ----------------------------------- | --------------------- | -------------------------------------- |
 | class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()`  | Addtional classes for the tag element. |
 | variant  | `MaybeSignal<TagVariant>`           | `TagVariant::Default` | Tag's variant.                         |
+| closable | `MaybeSignal<bool>`                 | `false`               | Whether the tag shows a close button.  |
+| on_close | `Option<Callback<ev::MouseEvent>>`  | `None`                | Close clicked callback.                |
 | children | `Children`                          |                       | Tag's content.                         |
diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs
index 7e0e64f..7dfa065 100644
--- a/thaw/src/tag/mod.rs
+++ b/thaw/src/tag/mod.rs
@@ -1,12 +1,13 @@
 mod theme;
 
+pub use theme::TagTheme;
+
 use crate::{
     theme::use_theme,
     utils::{class_list::class_list, mount_style, OptionalProp},
-    Theme,
+    Icon, Theme,
 };
 use leptos::*;
-pub use theme::TagTheme;
 
 #[derive(Clone, Default)]
 pub enum TagVariant {
@@ -48,6 +49,8 @@ impl TagVariant {
 pub fn Tag(
     #[prop(optional, into)] variant: MaybeSignal<TagVariant>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] closable: MaybeSignal<bool>,
+    #[prop(optional, into)] on_close: Option<Callback<ev::MouseEvent>>,
     children: Children,
 ) -> impl IntoView {
     mount_style("tag", include_str!("./tag.css"));
@@ -72,12 +75,32 @@ pub fn Tag(
         css_vars
     });
 
+    let on_close = move |event| {
+        let Some(callback) = on_close.as_ref() else {
+            return;
+        };
+        callback.call(event);
+    };
+
     view! {
         <div
             class=class_list!["thaw-tag", class.map(| c | move || c.get())]
             style=move || css_vars.get()
         >
             <span class="thaw-tag__content">{children()}</span>
+            {
+                move || {
+                    if closable.get() {
+                        view! {
+                            <button class="thaw-tag__close" on:click=on_close>
+                                <Icon icon=icondata_ai::AiCloseOutlined style="font-size: 14px"/>
+                            </button>
+                        }.into()
+                    } else {
+                        None
+                    }
+                }
+            }
         </div>
     }
 }
diff --git a/thaw/src/tag/tag.css b/thaw/src/tag/tag.css
index 1cebfbc..08bf1a2 100644
--- a/thaw/src/tag/tag.css
+++ b/thaw/src/tag/tag.css
@@ -3,9 +3,31 @@
     height: 28px;
     align-items: center;
     font-size: 14px;
-    padding: 0 10px;
+    line-height: 1;
+    padding: 0 8px;
     background-color: var(--thaw-background-color);
     color: var(--thaw-font-color);
     border: 1px solid var(--thaw-border-color);
     border-radius: 3px;
 }
+
+.thaw-tag__close {
+    position: relative;
+    right: -3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    padding: 1px;
+    width: 16px;
+    height: 16px;
+    color: var(--thaw-font-color);
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.thaw-tag__close:hover {
+    background-color: var(--thaw-border-color);
+    border-radius: 3px;
+}