refactor(admin/components): 尽量减少 CSS 类名冲突

issue9 · Aug 2, 2024 · a264d75 · a264d75
1 parent 5e4c20d
commit a264d75
Show file tree

Hide file tree

Showing 13 changed files with 32 additions and 32 deletions.
diff --git a/admin/src/components/button/button.tsx b/admin/src/components/button/button.tsx
@@ -24,7 +24,7 @@ export default function(props: Props) {
     return <button accessKey={props.accessKey} autofocus={props.autofocus} disabled={props.disabled}
         type={props.type} title={props.title} onClick={props.onClick} classList={{
             'c--button': true,
-            [`button-style--${props.style}`]: true,
+            [`c--button-${props.style}`]: true,
             [`palette--${props.palette}`]: !!props.palette,
             'rounded-full': props.rounded,
         }}>

diff --git a/admin/src/components/button/group.tsx b/admin/src/components/button/group.tsx
@@ -18,9 +18,9 @@ export default function (props: Props) {
 
     return <fieldset role="group" disabled={props.disabled} classList={{
         'c--button-group': true,
-        'rounded': props.rounded,
-        [`palette--${props.palette}`]: !!props.palette,
-        [`button-style--${props.style}`]: true
+        'c--button-group-rounded': props.rounded,
+        [`c--button-group-${props.style}`]: true,
+        [`palette--${props.palette}`]: !!props.palette
     }}>
         {props.children}
     </fieldset >;

diff --git a/admin/src/components/button/style.css b/admin/src/components/button/style.css
@@ -9,34 +9,34 @@
         @apply border flex justify-around border-transparent text-center rounded-md text-sm py-2 px-4 text-nowrap text-[var(--fg)] outline-none;
     }
 
-    .c--button.icon {
+    .c--button.c--button-icon {
         @apply p-2;
     }
 
-    .c--button.button-style--fill {
+    .c--button.c--button-fill {
         @apply text-[var(--fg)] bg-[var(--bg)] border-[var(--bg)];
     }
 
-    .c--button.button-style--fill:enabled:hover,
-    .c--button.button-style--fill:focus {
+    .c--button.c--button-fill:enabled:hover,
+    .c--button.c--button-fill:focus {
         @apply bg-[var(--bg-high)];
     }
 
-    .c--button.button-style--border {
+    .c--button.c--button-border {
         @apply text-[var(--fg)] bg-transparent border-[var(--fg)];
     }
 
-    .c--button.button-style--border:enabled:hover,
-    .c--button.button-style--border:focus {
+    .c--button.c--button-border:enabled:hover,
+    .c--button.c--button-border:focus {
         @apply bg-[var(--bg)];
     }
 
-    .c--button.button-style--flat {
+    .c--button.c--button-flat {
         @apply bg-transparent;
     }
 
-    .c--button.button-style--flat:enabled:hover,
-    .c--button.button-style--flat:focus {
+    .c--button.c--button-flat:enabled:hover,
+    .c--button.c--button-flat:focus {
         @apply bg-[var(--bg-high)] border-[var(--bg-high)];
     }
 
@@ -62,7 +62,7 @@
         }
     }
 
-    .c--button-group.rounded {
+    .c--button-group.c--button-group-rounded {
         @apply rounded-l-full rounded-r-full;
 
         :first-child {
@@ -74,7 +74,7 @@
         }
     }
 
-    .c--button-group.button-style--fill {
+    .c--button-group.c--button-group-fill {
         @apply bg-[var(--bg-low)];
 
         .c--button {
@@ -87,7 +87,7 @@
         }
     }
 
-    .c--button-group.button-style--border {
+    .c--button-group.c--button-group-border {
         @apply text-[var(--bg)] bg-transparent border border-[var(--bg)];
 
         .c--button {
@@ -100,7 +100,7 @@
         }
     }
 
-    .c--button-group.button-style--flat {
+    .c--button-group.c--button-group-flat {
         @apply bg-transparent text-[var(--bg)];
 
         .c--button {

diff --git a/admin/src/components/drawer/drawer.tsx b/admin/src/components/drawer/drawer.tsx
@@ -69,7 +69,7 @@ export default function(props: Props) {
         {props.children}
     </aside>;
 
-    return <div ref={(el)=>conRef=el} classList={{ 'c--drawer': true, 'floating': props.floating && props.visible }}>
+    return <div ref={(el)=>conRef=el} classList={{ 'c--drawer': true, 'c--drawer-floating': props.floating && props.visible }}>
         <Switch>
             <Match when={props.pos === 'left'}>
                 <Aside />

diff --git a/admin/src/components/drawer/style.css b/admin/src/components/drawer/style.css
@@ -19,15 +19,15 @@
 
 
 
-    .c--drawer.floating {
+    .c--drawer.c--drawer-floating {
         position: relative;
 
         >aside {
             position: absolute;
         }
     }
 
-    .c--drawer.floating::after {
+    .c--drawer.c--drawer-floating::after {
         content: '';
         position: absolute;
         top: 0;

diff --git a/admin/src/components/form/checkbox/checkbox.tsx b/admin/src/components/form/checkbox/checkbox.tsx
@@ -38,8 +38,8 @@ export default function(props: Props) {
 
     return <label title={props.title} classList={{
         'c--checkbox': true,
-        [`palette--${props.palette}`]: !!props.palette,
-        'border': !props.icon
+        'c--checkbox-border': !props.icon,
+        [`palette--${props.palette}`]: !!props.palette
     }}>
         <input type="checkbox"
             accessKey={props.accessKey}

diff --git a/admin/src/components/form/checkbox/style.css b/admin/src/components/form/checkbox/style.css
@@ -14,7 +14,7 @@
         }
     }
 
-    .c--checkbox.border {
+    .c--checkbox.c--checkbox-border {
         @apply border-[var(--fg-low)] rounded-sm has-[:checked]:border-[var(--bg)];
     }
 
@@ -30,7 +30,7 @@
         }
     }
 
-    .c--checkbox.border:has(:enabled):hover {
+    .c--checkbox.c--checkbox-border:has(:enabled):hover {
         @apply border-[var(--bg-high)];
     }
 

diff --git a/admin/src/components/form/date/panel.tsx b/admin/src/components/form/date/panel.tsx
@@ -123,7 +123,7 @@ export default function (props: Props) {
 
     return <div classList={{
         'c--date-panel': true,
-        'disabled': props.disabled
+        'c--date-panel-disabled': props.disabled
     }}>
         <Panel dt={new Date(ac.getValue())} ha={ha} ma={ma} />
     </div>;

diff --git a/admin/src/components/form/date/style.css b/admin/src/components/form/date/style.css
@@ -70,8 +70,8 @@
     }
 }
 
-.date-panel.disabled,
-.date-panel.disabled * {
+.c--date-panel.c--date-panel-disabled,
+.c--date-panel.c--date-panel-disabled * {
     cursor: not-allowed;
     color: var(--fg-low);
 }
diff --git a/admin/src/components/form/textfield/number.tsx b/admin/src/components/form/textfield/number.tsx
@@ -61,7 +61,7 @@ export default function(props: Props): JSX.Element {
 
             <div classList={{
                 'c--text-field': true,
-                'rounded': props.rounded,
+                'c--text-field-rounded': props.rounded,
             }}>
                 <Show when={props.icon}>
                     <span role="none" class="prefix flex items-center pl-1 material-symbols-outlined">{props.icon}</span>

diff --git a/admin/src/components/form/textfield/password.tsx b/admin/src/components/form/textfield/password.tsx
@@ -28,7 +28,7 @@ export default function(props: Props): JSX.Element {
 
             <div classList={{
                 'c--text-field': true,
-                'rounded': props.rounded,
+                'c--text-field-rounded': props.rounded,
             }}>
                 <Show when={props.icon}>
                     <span role="none" class="prefix flex items-center pl-1 material-symbols-outlined">{props.icon}</span>

diff --git a/admin/src/components/form/textfield/style.css b/admin/src/components/form/textfield/style.css
@@ -53,7 +53,7 @@
         }
     }
 
-    .c--text-field.rounded {
+    .c--text-field.c--text-field-rounded {
         @apply rounded-full;
 
         >:first-child {

diff --git a/admin/src/components/form/textfield/textfiled.tsx b/admin/src/components/form/textfield/textfiled.tsx
@@ -31,7 +31,7 @@ export default function<T extends Value>(props: Props<T>):JSX.Element {
             </Show>
             <div classList={{
                 'c--text-field': true,
-                'rounded': props.rounded,
+                'c--text-field-rounded': props.rounded,
             }}>
                 <Show when={props.prefix}>
                     <div class="prefix">{renderElementProp(props.prefix)}</div>