From 183a81ae884d6c0ecd66061875390eb3dae42b5b Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Tue, 15 Jul 2025 16:07:55 +0300
Subject: [PATCH] Added defineModel support for PreviewSelect component

---
 src/components/common/PreviewSelect.vue       | 12 ++------
 src/demo/Animations/AnimatedContentDemo.vue   | 30 +++++--------------
 src/demo/Components/CircularGalleryDemo.vue   |  2 +-
 src/demo/Components/MasonryDemo.vue           |  1 -
 src/demo/Components/PixelCardDemo.vue         |  9 ++----
 src/demo/TextAnimations/DecryptedTextDemo.vue | 24 ++-------------
 src/demo/TextAnimations/FallingTextDemo.vue   |  7 +----
 7 files changed, 15 insertions(+), 70 deletions(-)

diff --git a/src/components/common/PreviewSelect.vue b/src/components/common/PreviewSelect.vue
index b28d086..506a704 100644
--- a/src/components/common/PreviewSelect.vue
+++ b/src/components/common/PreviewSelect.vue
@@ -3,8 +3,7 @@
     <span class="select-label">{{ title }}</span>
 
     <Select
-      :model-value="modelValue"
-      @update:model-value="handleSelectChange"
+      v-model="model"
       :options="options"
       v-bind="selectAttributes"
       :placeholder="placeholder"
@@ -25,7 +24,6 @@ interface Option {
 
 const props = defineProps<{
   title: string;
-  modelValue: string | number;
   options: Option[] | string[] | number[];
   optionLabel?: string;
   optionValue?: string;
@@ -33,13 +31,7 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number];
-}>();
-
-const handleSelectChange = (value: string | number) => {
-  emit('update:modelValue', value);
-};
+const model = defineModel<string | number>();
 
 const isObjectArray = computed(() => {
   return props.options.length > 0 && typeof props.options[0] === 'object';
diff --git a/src/demo/Animations/AnimatedContentDemo.vue b/src/demo/Animations/AnimatedContentDemo.vue
index bf827ef..b59d078 100644
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -25,29 +25,9 @@
       </div>
 
       <Customize>
-        <PreviewSelect
-          title="Animation Direction"
-          v-model="direction"
-          :options="directionOptions"
-          @update:model-value="
-            val => {
-              direction = val as 'vertical' | 'horizontal';
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSelect title="Animation Direction" v-model="direction" :options="directionOptions" />
 
-        <PreviewSelect
-          title="Easing Function"
-          v-model="ease"
-          :options="easeOptions"
-          @update:model-value="
-            val => {
-              ease = val as string;
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
 
         <PreviewSlider
           title="Distance"
@@ -126,7 +106,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import PropTable from '../../components/common/PropTable.vue';
 import Dependencies from '../../components/code/Dependencies.vue';
@@ -233,6 +213,10 @@ const propData = [
     description: 'Additional CSS classes for styling.'
   }
 ];
+
+watch([direction, ease], () => {
+  forceRerender();
+});
 </script>
 
 <style scoped>
diff --git a/src/demo/Components/CircularGalleryDemo.vue b/src/demo/Components/CircularGalleryDemo.vue
index 6dde412..1f2ea1f 100644
--- a/src/demo/Components/CircularGalleryDemo.vue
+++ b/src/demo/Components/CircularGalleryDemo.vue
@@ -52,7 +52,7 @@
 
         <PreviewColor title="Text Color" v-model="textColor" />
 
-        <PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" />
+        <PreviewSelect title="Font" v-model="font" :options="fontOptions" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/Components/MasonryDemo.vue b/src/demo/Components/MasonryDemo.vue
index ccd2290..b1bdbc4 100644
--- a/src/demo/Components/MasonryDemo.vue
+++ b/src/demo/Components/MasonryDemo.vue
@@ -37,7 +37,6 @@
             { label: 'Center', value: 'center' },
             { label: 'Random', value: 'random' }
           ]"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
diff --git a/src/demo/Components/PixelCardDemo.vue b/src/demo/Components/PixelCardDemo.vue
index 3dc0d51..5eb80c9 100644
--- a/src/demo/Components/PixelCardDemo.vue
+++ b/src/demo/Components/PixelCardDemo.vue
@@ -10,12 +10,7 @@
       </div>
 
       <Customize>
-        <PreviewSelect
-          title="Animation Variant"
-          :options="variantOptions"
-          v-model="selectedVariant"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSelect title="Animation Variant" :options="variantOptions" v-model="selectedVariant" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -44,7 +39,7 @@ import { pixelCard } from '@/constants/code/Components/pixelCardCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
 const selectedVariant = ref<'default' | 'blue' | 'yellow' | 'pink'>('default');
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const variantOptions = [
   { value: 'default', label: 'Default' },
diff --git a/src/demo/TextAnimations/DecryptedTextDemo.vue b/src/demo/TextAnimations/DecryptedTextDemo.vue
index d5c7eb2..753ff55 100644
--- a/src/demo/TextAnimations/DecryptedTextDemo.vue
+++ b/src/demo/TextAnimations/DecryptedTextDemo.vue
@@ -76,29 +76,9 @@
           @update:model-value="forceRerender"
         />
 
-        <PreviewSelect
-          title="Animation Trigger"
-          v-model="animateOn"
-          :options="animateOptions"
-          @update:model-value="
-            val => {
-              animateOn = val as 'view' | 'hover';
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSelect title="Animation Trigger" v-model="animateOn" :options="animateOptions" />
 
-        <PreviewSelect
-          title="Animation Direction"
-          v-model="revealDirection"
-          :options="directionOptions"
-          @update:model-value="
-            val => {
-              revealDirection = val as 'start' | 'end' | 'center';
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSelect title="Animation Direction" v-model="revealDirection" :options="directionOptions" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/TextAnimations/FallingTextDemo.vue b/src/demo/TextAnimations/FallingTextDemo.vue
index 2dfb07f..0436b56 100644
--- a/src/demo/TextAnimations/FallingTextDemo.vue
+++ b/src/demo/TextAnimations/FallingTextDemo.vue
@@ -18,12 +18,7 @@
       </div>
 
       <Customize>
-        <PreviewSelect
-          title="Animation Trigger"
-          v-model="trigger"
-          :options="triggerOptions"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSelect title="Animation Trigger" v-model="trigger" :options="triggerOptions" />
 
         <PreviewSlider
           title="Gravity"