refactor(admin/components): 调整组件样式

issue9 · Oct 6, 2024 · 21a2f4e · 21a2f4e
1 parent f36abb2
commit 21a2f4e
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 63 deletions.
diff --git a/admin/src/components/form/checkbox/checkbox.tsx b/admin/src/components/form/checkbox/checkbox.tsx
@@ -25,6 +25,7 @@ export interface Props extends FieldBaseProps {
 }
 
 const presetProps: Partial<Props> = {
+    tabindex: 0,
     checkedIcon: 'check_box',
     uncheckedIcon: 'check_box_outline_blank',
     indeterminateIcon: 'indeterminate_check_box'
@@ -34,18 +35,16 @@ export default function(props: Props) {
     props = mergeProps(presetProps, props);
     const [chk, setChk] = createSignal(props.checked);
 
-    return <label title={props.title} classList={{
+    return <label tabIndex={props.tabindex} accessKey={props.accessKey} title={props.title} classList={{
         'c--checkbox': true,
         'c--checkbox-border': props.block,
         [`palette--${props.palette}`]: !!props.palette
     }}>
         <input type="checkbox"
-            accessKey={props.accessKey}
-            tabIndex={props.tabindex}
             readOnly={props.readonly}
             disabled={props.disabled}
             checked={chk()}
-            class="appearance-none"
+            class="appearance-none hidden"
             onChange={() => {
                 if (!props.readonly && !props.disabled) {
                     setChk(!chk());

diff --git a/admin/src/components/form/checkbox/style.css b/admin/src/components/form/checkbox/style.css
@@ -17,8 +17,11 @@
         @apply border-[var(--fg-low)] rounded-sm has-[:checked]:border-[var(--bg)];
     }
 
-    .c--checkbox:focus-within .checkbox-icon {
-        color: var(--fg-high);
+    .c--checkbox:focus-visible {
+        outline: none;
+        .checkbox-icon {
+            color: var(--fg-high);
+        }
     }
 
     .c--checkbox:has(:enabled):hover {

diff --git a/admin/src/components/form/radio/radio.tsx b/admin/src/components/form/radio/radio.tsx
@@ -22,6 +22,7 @@ export interface Props<T> extends FieldBaseProps {
 
 export default function Group<T extends string | number | undefined> (props: Props<T>) {
     props = mergeProps({
+        tabindex: 0,
         checkedIcon: 'radio_button_checked',
         uncheckedIcon: 'radio_button_unchecked'
     }, props);
@@ -42,10 +43,9 @@ export default function Group<T extends string | number | undefined> (props: Pro
         }}>
             <For each={props.options}>
                 {(item) =>
-                    <label classList={{'border': props.block}}>
+                    <label classList={{'border': props.block}} tabIndex={props.tabindex} accessKey={props.accessKey}>
                         <input type="radio" class="appearance-none"
                             readOnly={props.readonly}
-                            tabIndex={props.tabindex}
                             checked={item[0] === access.getValue()}
                             name={props.accessor.name()}
                             value={item[0]}

diff --git a/admin/src/components/form/radio/style.css b/admin/src/components/form/radio/style.css
@@ -30,8 +30,12 @@
             cursor: pointer;
         }
 
-        label:focus-within .radio-icon {
-            color: var(--bg-low);
+        label:focus-visible {
+            outline: none;
+
+            .radio-icon {
+                color: var(--fg-high);
+            }
         }
 
         label.border {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,8 +24,8 @@
         "lint": "eslint"
     },
     "devDependencies": {
-        "@stylistic/eslint-plugin-ts": "^2.8.0",
-        "eslint": "^9.11.1",
+        "@stylistic/eslint-plugin-ts": "^2.9.0",
+        "eslint": "^9.12.0",
         "globals": "^15.10.0",
         "typescript-eslint": "^8.8.0"
     }