From 25d0b81c0756ddd949616bb61a0c76d4341cf1b1 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Tue, 6 Aug 2024 17:31:33 +0800
Subject: [PATCH] feat: adds ComboboxOptionGroup

---
 demo_markdown/docs/combobox/mod.md          | 38 ------------
 demo_markdown/src/lib.rs                    |  2 +-
 thaw/src/combobox/combobox-option-group.css | 23 +++++++
 thaw/src/combobox/combobox_option_group.rs  | 23 +++++++
 thaw/src/combobox/docs/mod.md               | 69 +++++++++++++++++++++
 thaw/src/combobox/mod.rs                    |  2 +
 6 files changed, 118 insertions(+), 39 deletions(-)
 delete mode 100644 demo_markdown/docs/combobox/mod.md
 create mode 100644 thaw/src/combobox/combobox-option-group.css
 create mode 100644 thaw/src/combobox/combobox_option_group.rs
 create mode 100644 thaw/src/combobox/docs/mod.md

diff --git a/demo_markdown/docs/combobox/mod.md b/demo_markdown/docs/combobox/mod.md
deleted file mode 100644
index a143efd..0000000
--- a/demo_markdown/docs/combobox/mod.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# Combobox
-
-```rust demo
-let selected_options = RwSignal::new(None::<String>);
-
-view! {
-    <Combobox selected_options>
-        <ComboboxOption value="cat" text="Car" />
-        <ComboboxOption value="dog" text="Dog" />
-    </Combobox>
-}
-```
-
-### Clearable
-
-```rust demo
-let selected_options = RwSignal::new(vec![]);
-
-view! {
-    <Combobox selected_options clearable=true>
-        <ComboboxOption value="cat" text="Car" />
-        <ComboboxOption value="dog" text="Dog" />
-    </Combobox>
-}
-```
-
-### Multiselect
-
-```rust demo
-let selected_options = RwSignal::new(vec![]);
-
-view! {
-    <Combobox selected_options>
-        <ComboboxOption value="cat" text="Car" />
-        <ComboboxOption value="dog" text="Dog" />
-    </Combobox>
-}
-```
diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs
index a319ad7..154f3cb 100644
--- a/demo_markdown/src/lib.rs
+++ b/demo_markdown/src/lib.rs
@@ -39,7 +39,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "CardMdPage" => "../docs/card/mod.md",
         "CheckboxMdPage" => "../docs/checkbox/mod.md",
         "ColorPickerMdPage" => "../docs/color_picker/mod.md",
-        "ComboboxMdPage" => "../docs/combobox/mod.md",
+        "ComboboxMdPage" => "../../thaw/src/combobox/docs/mod.md",
         "ConfigProviderMdPage" => "../docs/config_provider/mod.md",
         "DatePickerMdPage" => "../docs/date_picker/mod.md",
         "DialogMdPage" => "../docs/dialog/mod.md",
diff --git a/thaw/src/combobox/combobox-option-group.css b/thaw/src/combobox/combobox-option-group.css
new file mode 100644
index 0000000..f03491e
--- /dev/null
+++ b/thaw/src/combobox/combobox-option-group.css
@@ -0,0 +1,23 @@
+.thaw-combobox-option-group {
+    display: flex;
+    row-gap: var(--spacingHorizontalXXS);
+    flex-direction: column;
+}
+
+.thaw-combobox-option-group__label {
+    display: block;
+    color: var(--colorNeutralForeground3);
+    font-weight: var(--fontWeightSemibold);
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    padding: var(--spacingHorizontalS) var(--spacingHorizontalSNudge);
+    border-radius: var(--borderRadiusMedium);
+}
+
+.thaw-combobox-option-group:not(:last-child)::after {
+    content: "";
+    display: block;
+    margin: 0 calc(var(--spacingHorizontalXS) * -1) var(--spacingVerticalXS);
+    padding-bottom: var(--spacingHorizontalXS);
+    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
+}
diff --git a/thaw/src/combobox/combobox_option_group.rs b/thaw/src/combobox/combobox_option_group.rs
new file mode 100644
index 0000000..d3bb4fb
--- /dev/null
+++ b/thaw/src/combobox/combobox_option_group.rs
@@ -0,0 +1,23 @@
+use leptos::prelude::*;
+use thaw_utils::{class_list, mount_style};
+
+#[component]
+pub fn ComboboxOptionGroup(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(into)]  label: String,
+    children: Children,
+) -> impl IntoView {
+    mount_style(
+        "combobox-option-group",
+        include_str!("./combobox-option-group.css"),
+    );
+
+    view! {
+        <div role="group" class=class_list!["thaw-combobox-option-group", class]>
+            <span role="presentation" class="thaw-combobox-option-group__label">
+                {label}
+            </span>
+            {children()}
+        </div>
+    }
+}
diff --git a/thaw/src/combobox/docs/mod.md b/thaw/src/combobox/docs/mod.md
new file mode 100644
index 0000000..0374ab0
--- /dev/null
+++ b/thaw/src/combobox/docs/mod.md
@@ -0,0 +1,69 @@
+# Combobox
+
+```rust demo
+let selected_options = RwSignal::new(None::<String>);
+
+view! {
+    <Combobox selected_options>
+        <ComboboxOption value="cat" text="Car" />
+        <ComboboxOption value="dog" text="Dog" />
+    </Combobox>
+}
+```
+
+### Clearable
+
+```rust demo
+let selected_options = RwSignal::new(vec![]);
+
+view! {
+    <Combobox selected_options clearable=true>
+        <ComboboxOption value="cat" text="Car" />
+        <ComboboxOption value="dog" text="Dog" />
+    </Combobox>
+}
+```
+
+### Multiselect
+
+```rust demo
+let selected_options = RwSignal::new(vec![]);
+
+view! {
+    <Combobox selected_options>
+        <ComboboxOption value="cat" text="Car" />
+        <ComboboxOption value="dog" text="Dog" />
+    </Combobox>
+}
+```
+
+### Grouped
+
+```rust demo
+
+let land = vec!["Cat".to_string(), "Dog".to_string(), "Ferret".to_string(), "Hamster".to_string()];
+let water = vec!["Fish".to_string(), "Jellyfish".to_string(), "Octopus".to_string(), "Seal".to_string()];
+
+view! {
+    <Combobox>
+        <ComboboxOptionGroup label="Land">
+            {
+                land.into_iter().map(|option| view!{
+                    <ComboboxOption value={option.clone()}>
+                        {option}
+                    </ComboboxOption>
+                }).collect_view()
+            }
+        </ComboboxOptionGroup>
+        <OptionGroup label="Sea">
+            {
+                water.into_iter().map(|option| view!{
+                    <ComboboxOption value={option.clone()}>
+                        {option}
+                    </ComboboxOption>
+                }).collect_view()
+            }
+        </OptionGroup>
+    </Combobox>
+}
+```
diff --git a/thaw/src/combobox/mod.rs b/thaw/src/combobox/mod.rs
index a69f1a5..993d458 100644
--- a/thaw/src/combobox/mod.rs
+++ b/thaw/src/combobox/mod.rs
@@ -1,7 +1,9 @@
 mod combobox;
 mod combobox_option;
+mod combobox_option_group;
 pub(crate) mod listbox;
 mod utils;
 
 pub use combobox::*;
 pub use combobox_option::*;
+pub use combobox_option_group::*;