Added defineModel support for PreviewSelect component

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';

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>

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" />

src/demo/Components/MasonryDemo.vue

@@ -37,7 +37,6 @@
             { label: 'Center', value: 'center' },
             { label: 'Random', value: 'random' }
           ]"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider

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' },

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" />

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"