From 2e55686e70ffc08b9c01c5db4b4b74ac76f3cea5 Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Wed, 16 Jul 2025 16:28:29 +0300
Subject: [PATCH] Updated BallpitDemo and OrbDemo to use the latest changes.

---
 src/demo/Backgrounds/BallpitDemo.vue | 54 +++-------------------------
 src/demo/Backgrounds/OrbDemo.vue     | 33 +++--------------
 2 files changed, 9 insertions(+), 78 deletions(-)

diff --git a/src/demo/Backgrounds/BallpitDemo.vue b/src/demo/Backgrounds/BallpitDemo.vue
index ed8ec1f..bf93e23 100644
--- a/src/demo/Backgrounds/BallpitDemo.vue
+++ b/src/demo/Backgrounds/BallpitDemo.vue
@@ -17,59 +17,15 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Display Cursor" v-model="followCursor" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Display Cursor" v-model="followCursor" />
 
-        <PreviewSlider
-          title="Ball Count"
-          :min="50"
-          :max="500"
-          :step="10"
-          v-model="count"
-          @onChange="
-            (val: number) => {
-              count = val;
-            }
-          "
-        />
+        <PreviewSlider title="Ball Count" :min="50" :max="500" :step="10" v-model="count" />
 
-        <PreviewSlider
-          title="Gravity"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-          v-model="gravity"
-          @onChange="
-            (val: number) => {
-              gravity = val;
-            }
-          "
-        />
+        <PreviewSlider title="Gravity" :min="0.1" :max="1" :step="0.1" v-model="gravity" />
 
-        <PreviewSlider
-          title="Friction"
-          :min="0.9"
-          :max="1"
-          :step="0.001"
-          v-model="friction"
-          @onChange="
-            (val: number) => {
-              friction = val;
-            }
-          "
-        />
+        <PreviewSlider title="Friction" :min="0.9" :max="1" :step="0.001" v-model="friction" />
 
-        <PreviewSlider
-          title="Wall Bounce"
-          :min="0.1"
-          :max="1"
-          :step="0.05"
-          v-model="wallBounce"
-          @onChange="
-            (val: number) => {
-              wallBounce = val;
-            }
-          "
-        />
+        <PreviewSlider title="Wall Bounce" :min="0.1" :max="1" :step="0.05" v-model="wallBounce" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/Backgrounds/OrbDemo.vue b/src/demo/Backgrounds/OrbDemo.vue
index 30a1513..11dbf88 100644
--- a/src/demo/Backgrounds/OrbDemo.vue
+++ b/src/demo/Backgrounds/OrbDemo.vue
@@ -12,35 +12,13 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Hue Shift"
-          :min="0"
-          :max="360"
-          :step="1"
-          v-model="hue"
-          @onChange="
-            (val: number) => {
-              hue = val;
-            }
-          "
-        />
+        <PreviewSlider title="Hue Shift" :min="0" :max="360" :step="1" v-model="hue" />
 
-        <PreviewSlider
-          title="Hover Intensity"
-          :min="0"
-          :max="5"
-          :step="0.01"
-          v-model="hoverIntensity"
-          @onChange="
-            (val: number) => {
-              hoverIntensity = val;
-            }
-          "
-        />
+        <PreviewSlider title="Hover Intensity" :min="0" :max="5" :step="0.01" v-model="hoverIntensity" />
 
-        <PreviewSwitch title="Rotate on Hover" v-model="rotateOnHover" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Rotate on Hover" v-model="rotateOnHover" />
 
-        <PreviewSwitch title="Force Hover State" v-model="forceHoverState" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Force Hover State" v-model="forceHoverState" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -58,7 +36,6 @@
 </template>
 
 <script setup lang="ts">
-import { useForceRerender } from '@/composables/useForceRerender';
 import { ref, watch } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
@@ -71,8 +48,6 @@ import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import { orb } from '../../constants/code/Backgrounds/orbCode';
 import Orb from '../../content/Backgrounds/Orb/Orb.vue';
 
-const { forceRerender } = useForceRerender();
-
 const hue = ref(100);
 const hoverIntensity = ref(0.5);
 const rotateOnHover = ref(true);