From 14f6d2d18b02d9e0554665a647969bbe11f0ba66 Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Wed, 16 Jul 2025 16:17:28 +0300
Subject: [PATCH] Added defineModel support for PreviewText and added missing
 Customize component in GlitchTextDemo.

---
 src/components/common/PreviewText.vue      | 10 ++-------
 src/demo/TextAnimations/AsciiTextDemo.vue  | 26 ++++------------------
 src/demo/TextAnimations/GlitchTextDemo.vue |  1 +
 3 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/src/components/common/PreviewText.vue b/src/components/common/PreviewText.vue
index f62cdf4..7cf8f2d 100644
--- a/src/components/common/PreviewText.vue
+++ b/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>
diff --git a/src/demo/TextAnimations/AsciiTextDemo.vue b/src/demo/TextAnimations/AsciiTextDemo.vue
index 571e7f6..fa187f2 100644
--- a/src/demo/TextAnimations/AsciiTextDemo.vue
+++ b/src/demo/TextAnimations/AsciiTextDemo.vue
@@ -14,31 +14,13 @@
       </div>
 
       <Customize>
-        <PreviewText title="Text" v-model="text" @update:model-value="forceRerender" />
+        <PreviewText title="Text" v-model="text" />
 
-        <PreviewSlider
-          title="ASCII Font Size"
-          v-model="asciiFontSize"
-          :min="2"
-          :max="20"
-          :step="1"
-        />
+        <PreviewSlider title="ASCII Font Size" v-model="asciiFontSize" :min="2" :max="20" :step="1" />
 
-        <PreviewSlider
-          title="Text Font Size"
-          v-model="textFontSize"
-          :min="100"
-          :max="400"
-          :step="25"
-        />
+        <PreviewSlider title="Text Font Size" v-model="textFontSize" :min="100" :max="400" :step="25" />
 
-        <PreviewSlider
-          title="Base Height"
-          v-model="planeBaseHeight"
-          :min="4"
-          :max="16"
-          :step="1"
-        />
+        <PreviewSlider title="Base Height" v-model="planeBaseHeight" :min="4" :max="16" :step="1" />
 
         <PreviewSwitch title="Enable Waves" v-model="enableWaves" />
 
diff --git a/src/demo/TextAnimations/GlitchTextDemo.vue b/src/demo/TextAnimations/GlitchTextDemo.vue
index 2c9d0b7..33fabb3 100644
--- a/src/demo/TextAnimations/GlitchTextDemo.vue
+++ b/src/demo/TextAnimations/GlitchTextDemo.vue
@@ -46,6 +46,7 @@ import PropTable from '../../components/common/PropTable.vue';
 import PreviewText from '../../components/common/PreviewText.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import Customize from '@/components/common/Customize.vue';
 import { glitchText } from '@/constants/code/TextAnimations/glitchTextCode';
 
 const text = ref('Vue Bits');