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

@@ -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 }"
   >

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"

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>