From 5b41931754a290cea9eb4dcbec5938c41541b5ec Mon Sep 17 00:00:00 2001
From: LemonNeko <self@lemonneko.moe>
Date: Fri, 31 Oct 2025 15:06:07 +0800
Subject: [PATCH] fix(ui): migrate checkbox component from attributify to 
 class names (#689)

---
 .../src/components/Form/Checkbox/Checkbox.vue | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/Form/Checkbox/Checkbox.vue b/packages/ui/src/components/Form/Checkbox/Checkbox.vue
index 87b4b92bc..6ada38ba7 100644
--- a/packages/ui/src/components/Form/Checkbox/Checkbox.vue
+++ b/packages/ui/src/components/Form/Checkbox/Checkbox.vue
@@ -7,21 +7,25 @@ const modelValue = defineModel<boolean>({ required: true })
 <template>
   <SwitchRoot
     v-model="modelValue"
-    transition="background duration-250 ease-in-out"
-    outline="focus-within:none"
-    flex="~"
-    border="neutral-300 dark:neutral-700 data-[state=checked]:primary-200 data-[state=unchecked]:neutral-300 focus-within:neutral-800"
-    bg="data-[state=checked]:primary-400 data-[state=unchecked]:neutral-300 data-[state=checked]:dark:primary-400/80 dark:data-[state=unchecked]:neutral-800"
-    relative h-7 w="12.5" rounded-full
-    shadow="sm focus-within:shadow-neutral-800 focus-within:[0_0_0_1px] "
+    :class="[
+      'duration-250 ease-in-out',
+      'focus-within:outline-none',
+      'flex',
+      'border-neutral-300 dark:border-neutral-700 data-[state=checked]:border-primary-200 data-[state=unchecked]:border-neutral-300 focus-within:border-neutral-800',
+      'data-[state=checked]:bg-primary-400 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:dark:bg-primary-400/80 dark:data-[state=unchecked]:bg-neutral-800',
+      'relative h-7 w-12.5 rounded-full',
+      'shadow-sm focus-within:shadow-none',
+    ]"
   >
     <SwitchThumb
-      my-auto size-6
-      flex items-center justify-center
-      translate-x="0.5 data-[state=checked]:full"
-      rounded-full bg-white text-xs shadow-xl
-      transition="transform duration-250 ease-in-out"
-      will-change-transform
+      :class="[
+        'my-auto size-6',
+        'flex items-center justify-center',
+        'translate-x-0.5 data-[state=checked]:translate-x-full',
+        'rounded-full bg-white text-xs',
+        'transition-transform duration-250 ease-in-out',
+        'will-change-transform',
+      ]"
     />
   </SwitchRoot>
 </template>