From 97263ec80ddf8a336e8a40d6de08109bf57923f9 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Wed, 22 May 2024 23:17:27 +0800
Subject: [PATCH] feat: SpinButton disabled

---
 demo_markdown/docs/spin_button/mod.md | 22 +++++++++++++++++++-
 thaw/src/spin_button/mod.rs           |  7 +++++--
 thaw/src/spin_button/spin-button.css  | 30 +++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/demo_markdown/docs/spin_button/mod.md b/demo_markdown/docs/spin_button/mod.md
index 8204702..1374443 100644
--- a/demo_markdown/docs/spin_button/mod.md
+++ b/demo_markdown/docs/spin_button/mod.md
@@ -7,7 +7,27 @@ let value_f64 = RwSignal::new(0.0);
 view! {
     <Space vertical=true>
         <SpinButton value step_page=1/>
-        <SpinButton value=value_f64 step_page=1.0/>
+        <SpinButton value=value_f64 step_page=1.2/>
     </Space>
 }
+```
+
+### Min / Max
+
+```rust demo
+let value = RwSignal::new(0);
+
+view! {
+    <SpinButton value step_page=1 min=-1 max=2/>
+}
+```
+
+### Disabled
+
+```rust demo
+let value = RwSignal::new(0);
+
+view! {
+    <SpinButton value step_page=1 disabled=true/>
+}
 ```
\ No newline at end of file
diff --git a/thaw/src/spin_button/mod.rs b/thaw/src/spin_button/mod.rs
index e6aa277..41d068d 100644
--- a/thaw/src/spin_button/mod.rs
+++ b/thaw/src/spin_button/mod.rs
@@ -48,12 +48,13 @@ where
         }
     };
 
-    let increment_disabled = Memo::new(move |_| disabled.get() || value.get() <= min.get());
-    let decrement_disabled = Memo::new(move |_| disabled.get() || value.get() >= max.get());
+    let increment_disabled = Memo::new(move |_| disabled.get() || value.get() >= max.get());
+    let decrement_disabled = Memo::new(move |_| disabled.get() || value.get() <= min.get());
 
     view! {
         <span
             class="thaw-spin-button"
+            class=("thaw-spin-button--disabled", move || disabled.get())
         >
             <input
                 autocomplete="off"
@@ -79,6 +80,7 @@ where
                 type="button"
                 class="thaw-spin-button__increment-button"
                 class=("thaw-spin-button__increment-button--disabled", move || increment_disabled.get())
+                disabled=move || disabled.get()
                 on:click=move |_| {
                     if !increment_disabled.get_untracked() {
                         update_value(value.get_untracked() + step_page.get_untracked());
@@ -94,6 +96,7 @@ where
                 aria-label="Decrement value"
                 type="button"
                 class="thaw-spin-button__decrement-button"
+                disabled=move || disabled.get()
                 class=("thaw-spin-button__decrement-button--disabled", move || decrement_disabled.get())
                 on:click=move |_| {
                     if !decrement_disabled.get_untracked() {
diff --git a/thaw/src/spin_button/spin-button.css b/thaw/src/spin_button/spin-button.css
index 190ed33..f4aa93b 100644
--- a/thaw/src/spin_button/spin-button.css
+++ b/thaw/src/spin_button/spin-button.css
@@ -73,6 +73,12 @@
     width: 100%;
 }
 
+.thaw-spin-button__input:disabled {
+    color: var(--colorNeutralForegroundDisabled);
+    background-color: var(--colorTransparentBackground);
+    cursor: not-allowed;
+}
+
 .thaw-spin-button__increment-button,
 .thaw-spin-button__decrement-button {
     display: inline-flex;
@@ -121,3 +127,27 @@
     grid-row-start: 2;
     border-bottom-right-radius: var(--borderRadiusMedium);
 }
+
+.thaw-spin-button__increment-button:disabled,
+.thaw-spin-button__decrement-button:disabled {
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+}
+
+.thaw-spin-button__increment-button--disabled:enabled:hover,
+.thaw-spin-button__decrement-button--disabled:enabled:hover,
+.thaw-spin-button__increment-button--disabled:enabled:active,
+.thaw-spin-button__decrement-button--disabled:enabled:active {
+    background-color: transparent;
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+}
+
+.thaw-spin-button--disabled,
+.thaw-spin-button--disabled:hover {
+    background-color: var(--colorTransparentBackground);
+    border-color: var(--colorNeutralStrokeDisabled);
+    border-bottom-color: var(--colorNeutralStrokeDisabled);
+
+    cursor: not-allowed;
+}