fix

JerryWu1234 · Jan 5, 2025 · 0fa6cfe · 0fa6cfe
1 parent d499152
commit 0fa6cfe
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 51 deletions.
diff --git a/apps/website/src/routes/docs/headless/switch/snippets/switch.css b/apps/website/src/routes/docs/headless/switch/snippets/switch.css
@@ -8,60 +8,75 @@
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
-  & > input {
+
+  [data-switch-track] {
     --thumb-position: 0%;
     --thumb-transition-duration: 0.25s;
-    padding: 4px;
-    background: hsla(var(--switch-track-color-inactive));
-    inline-size: 4rem;
-    block-size: 2rem;
+    position: relative;
+    padding: 2px;
     border-radius: 4rem;
-    appearance: none;
-    pointer-events: none;
-    touch-action: pan-y;
-    border: none;
-    outline-offset: 5px;
-    box-sizing: content-box;
-    flex-shrink: 0;
-    display: grid;
-    align-items: center;
-    grid: [track] 1fr / [track] 1fr;
-    transition: background-color 0.25s ease;
+    background: hsla(var(--switch-track-color-inactive));
 
-    &::before {
-      content: '';
-      cursor: pointer;
-      pointer-events: auto;
-      inline-size: 2rem;
+    & > input {
+      inline-size: 4rem;
       block-size: 2rem;
-      background: hsla(var(--background));
-      box-shadow: 0 0 0 0 hsla(var(--switch-thumb-color-highlight));
-      border-radius: 50%;
-      transform: translateX(0%);
+      border-radius: 4rem;
+      appearance: none;
+      pointer-events: none;
+      touch-action: pan-y;
+      border: none;
+      outline-offset: 5px;
+      box-sizing: content-box;
+      flex-shrink: 0;
+      display: grid;
+      align-items: center;
+      grid: [track] 1fr / [track] 1fr;
+      transition: background-color 0.25s ease;
+
+    }
+    & > input:checked {
+      background: hsla(var(--primary));
+    }
+    &:has(> input:checked) {
+      background: hsla(var(--primary));
     }
 
-    &:not(:disabled):hover::before {
+
+    &:not(:disabled):hover > [data-switch-thumb] {
       box-shadow: 0 0 0 0.5rem hsla(var(--switch-thumb-color-highlight));
     }
 
-    &:checked {
-      background: hsla(var(--primary));
-      &::before {
-        transform: translateX(100%);
-      }
+    & > input:checked ~ [data-switch-thumb] {
+      transform: translateX(100%);
     }
-    &:disabled {
+
+    &:has(> input:disabled) {
       cursor: not-allowed;
       opacity: 0.35;
-      &::before {
-        cursor: not-allowed;
-        box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 10%);
-      }
+    }
+    & > input:disabled ~ [data-switch-thumb] {
+      cursor: not-allowed;
+      box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 10%) !important;
     }
 
     &:focus {
       outline: 2px solid hsl(var(--primary));
       outline-offset: 2px;
     }
+
+    & > [data-switch-thumb] {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      display: inline-block;
+      cursor: pointer;
+      pointer-events: auto;
+      inline-size: 2rem;
+      block-size: 2rem;
+      background: hsla(var(--background));
+      box-shadow: 0 0 0 0 hsla(var(--switch-thumb-color-highlight));
+      border-radius: 50%;
+      transform: translateX(0%);
+    }
   }
 }
diff --git a/packages/kit-headless/src/components/switch/switch-input.tsx b/packages/kit-headless/src/components/switch/switch-input.tsx
@@ -1,7 +1,8 @@
-import { component$, PropsOf, sync$, useContext, useId, $ } from '@builder.io/qwik';
+import { component$, PropsOf, sync$, useContext, useId, $, useSignal } from '@builder.io/qwik';
 import { SwitchContext } from './switch-context';
 export const SwitchInput = component$<PropsOf<'input'>>((rest) => {
   const context = useContext(SwitchContext);
+  const switchRef = useSignal<HTMLInputElement | undefined>();
   const id = useId();
   if (context.defaultChecked && context.bindChecked && !context.bindChecked.value) {
     context.bindChecked.value = !context.bindChecked.value;
@@ -12,6 +13,9 @@ export const SwitchInput = component$<PropsOf<'input'>>((rest) => {
   }
 
   const handleClick$ = $((e: MouseEvent | KeyboardEvent) => {
+    if (context.disabled) {
+      return;
+    }
     const keys = ['Enter', ' '];
     if (
       (e as KeyboardEvent)?.key !== undefined &&
@@ -43,21 +47,26 @@ export const SwitchInput = component$<PropsOf<'input'>>((rest) => {
   });
 
   return (
-    <input
-      {...rest}
-      data-checked={context.bindChecked?.value ? 'true' : 'false'}
-      data-disabled={context.disabled ? 'true' : 'false'}
-      ref={context.switchRef}
-      aria-describedby={`${id}-switch`}
-      disabled={context.disabled}
-      aria-checked={context.bindChecked ? 'true' : 'false'}
-      type="checkbox"
-      role="switch"
-      data-value
-      onClick$={[handleClickSync$, handleClick$]}
-      checked={context.bindChecked?.value}
+    <div
+      data-switch-track
       onChange$={[handleClickSync$, handleClick$]}
       onKeyPress$={[handleClick$, handleKeyPressSync$]}
-    />
+      onClick$={[handleClickSync$, handleClick$]}
+    >
+      <input
+        {...rest}
+        data-checked={context.bindChecked?.value ? 'true' : 'false'}
+        data-disabled={context.disabled ? 'true' : 'false'}
+        ref={context.switchRef || switchRef}
+        aria-describedby={`${id}-switch`}
+        disabled={context.disabled}
+        checked={context.bindChecked?.value}
+        aria-checked={context.bindChecked ? 'true' : 'false'}
+        type="checkbox"
+        role="switch"
+        data-value
+        />
+      <span data-switch-thumb></span>
+    </div>
   );
 });