Merge pull request #164 from hongquan/feature/required-prop

feat(input): Allow to set "required" attribute

docs/components/input.md

@@ -5,6 +5,7 @@ import InputDisabledExample from './input/examples/InputDisabledExample.vue';
 import InputHelperExample from './input/examples/InputHelperExample.vue';
 import InputPrefixExample from './input/examples/InputPrefixExample.vue';
 import InputSuffixExample from './input/examples/InputSuffixExample.vue'
+import InputRequiredExample from './input/examples/InputRequiredExample.vue'
 </script>
 
 # Vue Input - Flowbite
@@ -30,7 +31,7 @@ import { ref } from 'vue'
 const name = ref('')
 </script>
 <template>
-    <Input v-modal="name" placeholder="enter your first name" label="First name" />
+    <Input v-model="name" placeholder="enter your first name" label="First name" />
 </template>
 ```
 
@@ -60,7 +61,18 @@ import { Input } from 'flowbite-vue'
 </template>
 ```
 
-<InputDisabledExample />
+## Required
+
+```vue
+<script setup>
+import { Input } from 'flowbite-vue'
+</script>
+<template>
+  <Input required placeholder="enter your first name" label="First name" />
+</template>
+```
+
+<InputRequiredExample />
 
 ## Slot - Helper
 ```vue
@@ -112,4 +124,3 @@ import { Input, Button } from 'flowbite-vue'
 ```
 
 <InputSuffixExample />
-

docs/components/input/examples/InputRequiredExample.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="vp-raw">
+      <Input v-model='name' required placeholder="enter your first name" label="First name">
+      </Input>
+    </div>
+  </template>
+  <script lang="ts" setup>
+  import { ref } from 'vue'
+  import { Input } from '../../../../src/index'
+
+  const name = ref('')
+  </script>

src/components/Input/Input.vue

@@ -10,6 +10,7 @@
           v-model="model"
           :disabled="disabled"
           :type="type"
+          :required='required'
 
           :class="[inputClasses, $slots.prefix ? 'pl-10' : '']"
       />
@@ -33,6 +34,7 @@ interface InputProps {
   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;
+  required?: boolean;
   modelValue: string;
 }
 
@@ -41,6 +43,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   disabled: false,
   type: 'text',
   size: 'md',
+  required: false,
   modelValue: '',
 })