Added defineModel support for PreviewSwitch component and fixed small bug in ScrollRevealDemo component.

src/demo/Animations/AnimatedContentDemo.vue

@@ -29,59 +29,21 @@
 
         <PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
 
-        <PreviewSlider
-          title="Distance"
-          v-model="distance"
-          :min="50"
-          :max="300"
-          :step="10"
-        />
+        <PreviewSlider title="Distance" v-model="distance" :min="50" :max="300" :step="10" />
 
-        <PreviewSlider
-          title="Duration"
-          v-model="duration"
-          :min="0.1"
-          :max="3"
-          :step="0.1"
-          value-unit="s"
-        />
+        <PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="3" :step="0.1" value-unit="s" />
 
-        <PreviewSlider
-          title="Delay"
-          v-model="delay"
-          :min="0"
-          :max="2"
-          :step="0.1"
-          value-unit="s"
-        />
+        <PreviewSlider title="Delay" v-model="delay" :min="0" :max="2" :step="0.1" value-unit="s" />
 
-        <PreviewSlider
-          title="Initial Opacity"
-          v-model="initialOpacity"
-          :min="0"
-          :max="1"
-          :step="0.1"
-        />
+        <PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1" />
 
-        <PreviewSlider
-          title="Initial Scale"
-          v-model="scale"
-          :min="0.1"
-          :max="2"
-          :step="0.1"
-        />
+        <PreviewSlider title="Initial Scale" v-model="scale" :min="0.1" :max="2" :step="0.1" />
 
-        <PreviewSlider
-          title="Threshold"
-          v-model="threshold"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-        />
+        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
 
-        <PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Reverse Direction" v-model="reverse" />
 
-        <PreviewSwitch title="Animate Opacity" v-model="animateOpacity" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Animate Opacity" v-model="animateOpacity" />
       </Customize>
 
       <PropTable :data="propData" />

src/demo/Animations/FadeContentDemo.vue

@@ -23,39 +23,15 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Enable Blur Effect" v-model="blur" />
 
-        <PreviewSlider
-          title="Duration (ms)"
-          v-model="duration"
-          :min="100"
-          :max="3000"
-          :step="100"
-        />
+        <PreviewSlider title="Duration (ms)" v-model="duration" :min="100" :max="3000" :step="100" />
 
-        <PreviewSlider
-          title="Delay (ms)"
-          v-model="delay"
-          :min="0"
-          :max="1000"
-          :step="50"
-        />
+        <PreviewSlider title="Delay (ms)" v-model="delay" :min="0" :max="1000" :step="50" />
 
-        <PreviewSlider
-          title="Threshold"
-          v-model="threshold"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-        />
+        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
 
-        <PreviewSlider
-          title="Initial Opacity"
-          v-model="initialOpacity"
-          :min="0"
-          :max="1"
-          :step="0.1"
-        />
+        <PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -72,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import RefreshButton from '../../components/common/RefreshButton.vue';
 import PropTable from '../../components/common/PropTable.vue';
@@ -107,6 +83,10 @@ const propData = [
   { name: 'initialOpacity', type: 'number', default: '0', description: 'Initial opacity before animation (0-1).' },
   { name: 'className', type: 'string', default: '""', description: 'Additional CSS classes for styling.' }
 ];
+
+watch(blur, () => {
+  forceRerender();
+});
 </script>
 
 <style scoped>

src/demo/Animations/MagnetDemo.vue

@@ -27,24 +27,11 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Disabled" v-model="disabled" />
 
-        <PreviewSlider
-          title="Padding"
-          v-model="padding"
-          :min="0"
-          :max="300"
-          :step="10"
-          value-unit="px"
-        />
+        <PreviewSlider title="Padding" v-model="padding" :min="0" :max="300" :step="10" value-unit="px" />
 
-        <PreviewSlider
-          title="Strength"
-          v-model="magnetStrength"
-          :min="1"
-          :max="10"
-          :step="1"
-        />
+        <PreviewSlider title="Strength" v-model="magnetStrength" :min="1" :max="10" :step="1" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -76,7 +63,7 @@ import { useForceRerender } from '@/composables/useForceRerender';
 const disabled = ref(false);
 const padding = ref(100);
 const magnetStrength = ref(2);
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const propData = [
   {

src/demo/Animations/MetaBallsDemo.vue

@@ -19,55 +19,19 @@
       <Customize>
         <PreviewColor title="Color" v-model="color" />
 
-        <PreviewSlider
-          title="Ball Count"
-          :min="2"
-          :max="30"
-          :step="1"
-          v-model="ballCount"
-        />
+        <PreviewSlider title="Ball Count" :min="2" :max="30" :step="1" v-model="ballCount" />
 
-        <PreviewSlider
-          title="Speed"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-          v-model="speed"
-        />
+        <PreviewSlider title="Speed" :min="0.1" :max="1" :step="0.1" v-model="speed" />
 
-        <PreviewSlider
-          title="Size"
-          :min="10"
-          :max="50"
-          :step="1"
-          v-model="animationSize"
-        />
+        <PreviewSlider title="Size" :min="10" :max="50" :step="1" v-model="animationSize" />
 
-        <PreviewSlider
-          title="Clump Factor"
-          :min="0.1"
-          :max="2"
-          :step="0.1"
-          v-model="clumpFactor"
-        />
+        <PreviewSlider title="Clump Factor" :min="0.1" :max="2" :step="0.1" v-model="clumpFactor" />
 
-        <PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" />
 
-        <PreviewSlider
-          title="Cursor Smoothing"
-          :min="0.001"
-          :max="0.25"
-          :step="0.001"
-          v-model="hoverSmoothness"
-        />
+        <PreviewSlider title="Cursor Smoothing" :min="0.001" :max="0.25" :step="0.001" v-model="hoverSmoothness" />
 
-        <PreviewSlider
-          title="Cursor Size"
-          :min="1"
-          :max="5"
-          :step="1"
-          v-model="cursorBallSize"
-        />
+        <PreviewSlider title="Cursor Size" :min="1" :max="5" :step="1" v-model="cursorBallSize" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -85,7 +49,6 @@
 </template>
 
 <script setup lang="ts">
-import { useForceRerender } from '@/composables/useForceRerender';
 import { ref } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
@@ -99,8 +62,6 @@ import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import { metaBalls } from '../../constants/code/Animations/metaBallsCode';
 import MetaBalls from '../../content/Animations/MetaBalls/MetaBalls.vue';
 
-const { forceRerender } = useForceRerender();
-
 const color = ref('#27FF64');
 const speed = ref(0.3);
 const animationSize = ref(30);