From 9c83640b66a9bae90d9a4d7cf1db6a14afceb7f1 Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Wed, 21 Jun 2023 21:30:47 +0530
Subject: [PATCH] update input props schema

---
 docs/components/input.md                      |  5 ++-
 .../input/examples/InputExample.vue           |  7 +++-
 src/components/Input/Input.vue                | 36 ++++++++-----------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/docs/components/input.md b/docs/components/input.md
index 3519590..8443c91 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -25,9 +25,12 @@ On this page you will find all of the input types based on multiple variants, st
 ```vue
 <script setup>
 import { Input } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const name = ref('')
 </script>
 <template>
-    <Input placeholder="enter your first name" label="First name" />
+    <Input v-modal="name" placeholder="enter your first name" label="First name" />
 </template>
 ```
 
diff --git a/docs/components/input/examples/InputExample.vue b/docs/components/input/examples/InputExample.vue
index 0a58e72..c96ddd2 100644
--- a/docs/components/input/examples/InputExample.vue
+++ b/docs/components/input/examples/InputExample.vue
@@ -1,6 +1,11 @@
 <template>
-  <Input placeholder="enter your first name" label="First name" />
+  <div>
+  <Input v-model="name" placeholder="enter your first name" label="First name" />
+</div>
 </template>
 <script lang="ts" setup>
 import { Input } from '../../../../src/index'
+import { ref } from 'vue'
+
+const name = ref('')
 </script>
diff --git a/src/components/Input/Input.vue b/src/components/Input/Input.vue
index 4871feb..45cf5b5 100644
--- a/src/components/Input/Input.vue
+++ b/src/components/Input/Input.vue
@@ -23,33 +23,25 @@
   </div>
 </template>
 <script lang="ts" setup>
-import type { PropType } from 'vue'
 import type { InputSize } from '@/components/Input/types'
 import { useInputClasses } from '@/components/Input/composables/useInputClasses'
 import { toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 
-const props = defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String as PropType<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'>,
-    default: 'text',
-  },
-  size: {
-    type: String as PropType<InputSize>,
-    default: 'md',
-  },
-  modelValue: {
-    type: String,
-    default: '',
-  },
+interface InputProps {
+  label?: string;
+  disabled?: boolean;
+  type?: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+  size?: InputSize;
+  modelValue: string;
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  label: '',
+  disabled: false,
+  type: 'text',
+  size: 'md',
+  modelValue: '',
 })
 
 const model = useVModel(props, 'modelValue')