From 3614b6b46e2d50269fa5160b1600809f3cd3f083 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Epif=C3=A2nio=20Francisco?= <epifaniofrancisco03@gmail.com>
Date: Tue, 10 Jun 2025 18:50:23 +0100
Subject: [PATCH] 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  | 15 +++++++++++----
 .../theme/components/home/HomeIconCustomizer.vue  |  1 +
 .../components/icons/SidebarIconCustomizer.vue    |  8 ++++----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/docs/.vitepress/theme/components/base/Switch.vue b/docs/.vitepress/theme/components/base/Switch.vue
index c327fcf9a..7902ef396 100644
--- a/docs/.vitepress/theme/components/base/Switch.vue
+++ b/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>
diff --git a/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue b/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue
index 976541366..699c3242c 100644
--- a/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue
+++ b/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) => {
diff --git a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue b/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
index 566a1d67e..20c284dcb 100644
--- a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
+++ b/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>