fix: toggle horizontal movement isnt relative to size

aminnausin · aminnausin · commit cd35aaf7cdfb · 2025-11-20T16:45:43.000-05:00
diff --git a/resources/js/components/inputs/ToggleBase.vue b/resources/js/components/inputs/ToggleBase.vue
@@ -6,31 +6,35 @@ export interface ToggleProps {
     title?: string;
     knobStyle?: string;
     class?: string;
+    knobHorizontalMargin?: number;
 }
 
 const model = defineModel<boolean>();
-const props = withDefaults(defineProps<ToggleProps>(), { name: 'toggle' });
+const props = withDefaults(defineProps<ToggleProps>(), { name: 'toggle', knobHorizontalMargin: 1 });
 </script>
 
 <template>
     <label
         :class="
             cn(
-                'group hover:bg-primary-dark-600 hover:has-[input:checked]:bg-primary-800 relative inline-flex h-8 w-16 cursor-pointer items-center rounded-lg border-2 border-zinc-800 bg-zinc-800 transition-colors duration-300 has-checked:bg-white',
+                'group hover:bg-primary-dark-600 hover:has-[input:checked]:bg-primary-800 @container relative inline-flex h-8 w-16 cursor-pointer items-center rounded-lg border-2 border-zinc-800 bg-zinc-800 transition-colors duration-300 has-checked:bg-white',
                 props.class,
             )
         "
         :title="title ?? name"
         :for="name"
+        :style="{
+            '--knob-margin': knobHorizontalMargin,
+        }"
     >
-        <input type="checkbox" :id="name" :name="name" v-model="model" class="peer sr-only" />
+        <input type="checkbox" :id="name" :name="name" v-model="model" class="peer sr-only absolute" />
 
         <span
             :class="
                 cn(
-                    'group-hover:bg-primary-dark-600 absolute top-1/4 left-1/8 aspect-square h-1/2 rounded-full bg-zinc-800 shadow-[inset_16px_0_0_0_#fff]',
+                    'group-hover:bg-primary-dark-600 absolute top-1/4 left-[calc(var(--spacing)*var(--knob-margin))] aspect-square h-1/2 rounded-full bg-zinc-800 shadow-[inset_16px_0_0_0_#fff]',
                     'transition-all duration-300',
-                    'peer-checked:translate-x-8 peer-checked:overflow-hidden peer-checked:shadow-none',
+                    'peer-checked:translate-x-[calc(100cqw-100%-var(--spacing)*var(--knob-margin)*2)] peer-checked:overflow-hidden peer-checked:shadow-none',
                     knobStyle,
                 )
             "
