Added 'defineModel' macro for v-model support in Preview components

src/components/common/PreviewColor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="preview-color">
     <span class="color-label">{{ title }}</span>
-    <input :value="modelValue" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
+    <input :value="color" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
   </div>
 </template>
 
@@ -12,13 +12,10 @@ defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string];
-}>();
+const color = defineModel<string>();
 
 const handleColorChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  emit('update:modelValue', target.value);
+  color.value = (event.target as HTMLInputElement).value;
 };
 </script>
 

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,21 +24,14 @@ interface Option {
 
 const props = defineProps<{
   title: string;
-  modelValue: string | number;
   options: Option[] | string[] | number[];
   optionLabel?: string;
   optionValue?: string;
   placeholder?: string;
   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/components/common/PreviewSlider.vue

@@ -2,15 +2,7 @@
   <div class="preview-slider">
     <span class="slider-label">{{ title }}</span>
 
-    <Slider
-      :model-value="modelValue"
-      @update:model-value="handleSliderChange"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disabled="disabled"
-      class="custom-slider"
-    />
+    <Slider v-model="model" :min="min" :max="max" :step="step" :disabled="disabled" class="custom-slider" />
 
     <span class="slider-value">{{ modelValue }}{{ valueUnit }}</span>
   </div>
@@ -21,22 +13,14 @@ import Slider from 'primevue/slider';
 
 defineProps<{
   title: string;
-  modelValue: number;
   min?: number;
   max?: number;
   step?: number;
   valueUnit?: string;
   disabled?: boolean;
 }>();
 
-const emit = defineEmits<{
-  'update:modelValue': [value: number];
-}>();
-
-const handleSliderChange = (value: number | number[]) => {
-  const numValue = Array.isArray(value) ? value[0] : value;
-  emit('update:modelValue', numValue);
-};
+const model = defineModel<number>();
 </script>
 
 <style scoped>

src/components/common/PreviewSwitch.vue

@@ -2,11 +2,7 @@
   <div class="preview-switch">
     <span class="switch-label">{{ title }}</span>
 
-    <ToggleSwitch
-      :model-value="modelValue"
-      @update:model-value="$emit('update:modelValue', $event)"
-      :disabled="disabled"
-    />
+    <ToggleSwitch v-model="model" :disabled="disabled" />
   </div>
 </template>
 
@@ -15,13 +11,10 @@ import ToggleSwitch from 'primevue/toggleswitch';
 
 defineProps<{
   title: string;
-  modelValue: boolean;
   disabled?: boolean;
 }>();
 
-defineEmits<{
-  'update:modelValue': [value: boolean];
-}>();
+const model = defineModel<boolean>();
 </script>
 
 <style scoped>

src/components/common/PreviewText.vue

@@ -3,24 +3,18 @@
     <span class="text-label">{{ title }}</span>
 
     <input
-      :value="modelValue"
-      @input="handleChange"
+      v-model="model"
       class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-const emit = defineEmits(['update:modelValue']);
 defineProps<{
   title: string;
-  modelValue: string;
 }>();
 
-const handleChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  emit('update:modelValue', target.value);
-};
+const model = defineModel<string>();
 </script>
 
 <style scoped>

src/content/TextAnimations/TrueFocus/TrueFocus.vue

@@ -32,7 +32,7 @@ const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
 let interval: number | null = null;
 
 watch(
-  [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, words],
+  [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, () => words.value],
   () => {
     if (interval) {
       clearInterval(interval);
@@ -52,7 +52,7 @@ watch(
 );
 
 watch(
-  [currentIndex, words.value.length],
+  [currentIndex, () => words.value.length],
   async () => {
     if (currentIndex.value === null || currentIndex.value === -1) return;
     if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;

src/demo/Animations/AnimatedContentDemo.vue

@@ -25,89 +25,25 @@
       </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"
-          v-model="distance"
-          :min="50"
-          :max="300"
-          :step="10"
-          @update:model-value="forceRerender"
-        />
+        <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"
-          @update:model-value="forceRerender"
-        />
+        <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"
-          @update:model-value="forceRerender"
-        />
+        <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"
-          @update:model-value="forceRerender"
-        />
+        <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"
-          @update:model-value="forceRerender"
-        />
+        <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"
-          @update:model-value="forceRerender"
-        />
+        <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" />
@@ -126,7 +62,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 +169,10 @@ const propData = [
     description: 'Additional CSS classes for styling.'
   }
 ];
+
+watch([direction, ease], () => {
+  forceRerender();
+});
 </script>
 
 <style scoped>