refactor(admin/components): 调整组件在禁用下的状态

issue9 · Sep 4, 2024 · 44673c4 · 44673c4
1 parent c0e64b7
commit 44673c4
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 11 deletions.
diff --git a/admin/src/components/button/style.css b/admin/src/components/button/style.css
@@ -45,7 +45,7 @@
 
     .c--button.link-disabled,
     .c--button:disabled {
-        @apply cursor-not-allowed bg-[var(--bg)] text-[var(--bg-high)];
+        @apply cursor-not-allowed bg-[var(--bg-high)] text-[var(--bg-low)];
     }
 
     /************************* button-group ******************************/
@@ -126,7 +126,7 @@
 
     .c--button.link-disabled *,
     .c--button-group:disabled * {
-        @apply cursor-not-allowed bg-[var(--bg)] text-[var(--bg-high)];
+        @apply cursor-not-allowed bg-[var(--bg-high)] text-[var(--bg-low)];
     }
 
     /************************* confirm-button ******************************/

diff --git a/admin/src/components/form/checkbox/style.css b/admin/src/components/form/checkbox/style.css
@@ -34,7 +34,7 @@
     }
 
     .c--checkbox:has(:disabled) {
-        cursor: not-allowed;
+        @apply cursor-not-allowed text-[var(--bg-low)];
     }
 
     .c--checkbox-group {

diff --git a/admin/src/components/form/choice/style.css b/admin/src/components/form/choice/style.css
@@ -15,8 +15,7 @@
             @apply has-[:focus:enabled]:border-[var(--fg-high)] has-[:hover:enabled]:border-[var(--fg-high)];
 
             .input {
-                @apply bg-transparent flex flex-wrap px-1 w-full gap-1 cursor-pointer items-center;
-                @apply peer-disabled:cursor-not-allowed peer-read-only:cursor-default;
+                @apply bg-transparent flex flex-wrap px-1 w-full gap-1 cursor-pointer items-center peer-read-only:cursor-default;
 
                 .chip {
                     @apply rounded-full bg-[var(--bg-high)] px-2 flex flex-col justify-center hover:bg-[var(--bg-low)];
@@ -32,6 +31,18 @@
             }
         }
 
+        .activator-container:has(:disabled) {
+            @apply cursor-not-allowed border-palette-bg-low;
+
+            .input {
+                @apply cursor-not-allowed text-palette-bg-low;
+            }
+
+            .expand {
+                @apply ml-auto items-center text-palette-bg-low;
+            }
+        }
+
         .activator-container:focus {
             @apply border-[var(--fg-high)];
         }

diff --git a/admin/src/components/form/radio/style.css b/admin/src/components/form/radio/style.css
@@ -43,10 +43,10 @@
     }
 
     .c--radio-group:disabled {
-        cursor: not-allowed;
+        @apply cursor-not-allowed;
 
         label {
-            cursor: not-allowed;
+            @apply cursor-not-allowed text-palette-bg-low;
 
             .radio-icon {
                 cursor: not-allowed;

diff --git a/admin/src/components/form/textarea/style.css b/admin/src/components/form/textarea/style.css
@@ -7,6 +7,11 @@
 @layer components {
     .c--textarea {
         @apply rounded-md outline-none bg-transparent border border-[var(--fg-low)] flex px-2 py-2 w-full text-left;
-        @apply focus:border-[var(--fg-high)] hover:enabled:border-[var(--fg-high)] disabled:cursor-not-allowed read-only:cursor-default;
+        @apply focus:border-[var(--fg-high)] hover:enabled:border-[var(--fg-high)] read-only:cursor-default;
+    }
+
+
+    .c--textarea:disabled {
+        @apply cursor-not-allowed text-[var(--bg-low)];
     }
 }
diff --git a/admin/src/components/form/textfield/style.css b/admin/src/components/form/textfield/style.css
@@ -44,14 +44,22 @@
 
         .btn {
             @apply outline-none border-0 c--icon-container justify-center;
-            @apply disabled:cursor-not-allowed focus:text-[var(--fg-high)] hover:enabled:text-[var(--fg-high)];
+            @apply focus:text-[var(--fg-high)] hover:enabled:text-[var(--fg-high)];
         }
 
         .btn:focus {
             @apply border-0 text-[var(--fg-high)];
         }
     }
 
+    .c--text-field:has(:disabled) {
+        @apply border-[var(--bg-low)] text-palette-bg-high;
+
+        .btn {
+            @apply disabled:cursor-not-allowed;
+        }
+    }
+
     .c--text-field.c--text-field-rounded {
         @apply rounded-full;
 

diff --git a/admin/src/pages/current/index.ts b/admin/src/pages/current/index.ts
@@ -0,0 +1,3 @@
+// SPDX-FileCopyrightText: 2024 caixw
+//
+// SPDX-License-Identifier: MIT
diff --git a/admin/src/pages/index.ts b/admin/src/pages/index.ts
@@ -2,8 +2,6 @@
 //
 // SPDX-License-Identifier: MIT
 
-// 只导出页面，其它功能由根目录的 index.ts 导出。
-
 export type { Pages } from './pages';
 
 export { Dashboard } from './dashboard';