From dcdc0b8bb31b79dffdc5bd2674aba5ea02f7e0f8 Mon Sep 17 00:00:00 2001
From: Brizen Britt <92282724+briz123@users.noreply.github.com>
Date: Fri, 2 May 2025 04:52:59 -0400
Subject: [PATCH] fix(dev): resets Absolute Stroke Width (#3005)

* Changed resetStyle to reflect changes of button on absolutestrokewidth

* removed nextTick

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
---
 docs/.vitepress/theme/components/base/Switch.vue       |  2 ++
 .../theme/components/home/HomeIconCustomizer.vue       |  5 +++++
 .../theme/components/icons/SidebarIconCustomizer.vue   | 10 ++++++++--
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/theme/components/base/Switch.vue b/docs/.vitepress/theme/components/base/Switch.vue
index c327fcf9a..2af40f7a4 100644
--- a/docs/.vitepress/theme/components/base/Switch.vue
+++ b/docs/.vitepress/theme/components/base/Switch.vue
@@ -3,11 +3,13 @@
   import { Switch } from '@headlessui/vue'
 
   const enabled = ref(false)
+  
 </script>
 
 <template>
   <Switch
     v-model="enabled"
+    :key="enabled"
     class="switch"
     :class="{ enabled }"
   >
diff --git a/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue b/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue
index 976541366..42cb900ce 100644
--- a/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue
+++ b/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue
@@ -48,10 +48,12 @@ function resetStyle () {
   color.value = 'currentColor'
   strokeWidth.value = 2
   size.value = 24
+  absoluteStrokeWidth.value = false;
 }
 
 watch(absoluteStrokeWidth, (enabled) => {
   iconContainer.value?.classList.toggle('absolute-stroke-width', enabled)
+  
 })
 </script>
 
@@ -121,6 +123,9 @@ watch(absoluteStrokeWidth, (enabled) => {
           >
             <template #display>
               <Switch
+                :key="absoluteStrokeWidth"
+                class="switch"
+                :class="{ enabled: absoluteStrokeWidth }"
                 id="absolute-stroke-width"
                 name="absolute-stroke-width"
                 v-model="absoluteStrokeWidth"
diff --git a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue b/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
index 566a1d67e..0dd0d64bb 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) => {
@@ -119,11 +120,16 @@ const customizingActive = computed(() => {
       id="absolute-stroke-width"
       label="Absolute Stroke width"
     >
+    
       <Switch
-        id="size"
-        name="size"
+        id="absolute-stroke-width"
+        name="absolute-stroke-width"
+        :key="absoluteStrokeWidth"
+        class="switch"
+        :class="{ enabled: absoluteStrokeWidth }"
         v-model="absoluteStrokeWidth"
       />
+     
     </InputField>
   </div>
 </template>