fix: absoluteStrokeWidth not resetting with Reset button (#3261)

- Fix Switch component to properly handle v-model binding
- Add absoluteStrokeWidth to customizingActive computed property
- Ensure absoluteStrokeWidth resets correctly in both Home and Sidebar customizers

Resolves issue where absoluteStrokeWidth toggle remained enabled
after clicking Reset button, causing confusion with bold icons.

Fixes #2984

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

docs/.vitepress/theme/components/base/Switch.vue

@@ -1,15 +1,22 @@
 <script setup>
-  import { ref } from 'vue'
   import { Switch } from '@headlessui/vue'
 
-  const enabled = ref(false)
+  defineProps({
+    modelValue: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const emit = defineEmits(['update:modelValue'])
 </script>
 
 <template>
   <Switch
-    v-model="enabled"
+    :model-value="modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
     class="switch"
-    :class="{ enabled }"
+    :class="{ enabled: modelValue }"
   >
     <span class="thumb" />
   </Switch>

docs/.vitepress/theme/components/home/HomeIconCustomizer.vue

@@ -48,6 +48,7 @@ function resetStyle () {
   color.value = 'currentColor'
   strokeWidth.value = 2
   size.value = 24
+  absoluteStrokeWidth.value = false
 }
 
 watch(absoluteStrokeWidth, (enabled) => {

docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue

@@ -47,6 +47,7 @@ function resetStyle () {
   color.value = STYLE_DEFAULTS.color
   strokeWidth.value = STYLE_DEFAULTS.strokeWidth
   size.value = STYLE_DEFAULTS.size
+  absoluteStrokeWidth.value = STYLE_DEFAULTS.absoluteStrokeWidth
 }
 
 watch(absoluteStrokeWidth, (enabled) => {
@@ -59,9 +60,8 @@ const customizingActive = computed(() => {
   return color.value !== STYLE_DEFAULTS.color
     || strokeWidth.value !== STYLE_DEFAULTS.strokeWidth
     || size.value !== STYLE_DEFAULTS.size
+    || absoluteStrokeWidth.value !== STYLE_DEFAULTS.absoluteStrokeWidth
 })
-
-
 </script>
 
 <template>
@@ -120,8 +120,8 @@ const customizingActive = computed(() => {
       label="Absolute Stroke width"
     >
       <Switch
-        id="size"
-        name="size"
+        id="absolute-stroke-width"
+        name="absolute-stroke-width"
         v-model="absoluteStrokeWidth"
       />
     </InputField>