update input props schema
This commit is contained in:
@@ -25,9 +25,12 @@ On this page you will find all of the input types based on multiple variants, st
|
|||||||
```vue
|
```vue
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Input } from 'flowbite-vue'
|
import { Input } from 'flowbite-vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const name = ref('')
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Input placeholder="enter your first name" label="First name" />
|
<Input v-modal="name" placeholder="enter your first name" label="First name" />
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,11 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { Input } from '../../../../src/index'
|
import { Input } from '../../../../src/index'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const name = ref('')
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -23,33 +23,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { PropType } from 'vue'
|
|
||||||
import type { InputSize } from '@/components/Input/types'
|
import type { InputSize } from '@/components/Input/types'
|
||||||
import { useInputClasses } from '@/components/Input/composables/useInputClasses'
|
import { useInputClasses } from '@/components/Input/composables/useInputClasses'
|
||||||
import { toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
import { useVModel } from '@vueuse/core'
|
import { useVModel } from '@vueuse/core'
|
||||||
|
|
||||||
const props = defineProps({
|
interface InputProps {
|
||||||
label: {
|
label?: string;
|
||||||
type: String,
|
disabled?: boolean;
|
||||||
default: '',
|
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;
|
||||||
disabled: {
|
modelValue: string;
|
||||||
type: Boolean,
|
}
|
||||||
default: false,
|
|
||||||
},
|
const props = withDefaults(defineProps<InputProps>(), {
|
||||||
type: {
|
label: '',
|
||||||
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'>,
|
disabled: false,
|
||||||
default: 'text',
|
type: 'text',
|
||||||
},
|
size: 'md',
|
||||||
size: {
|
modelValue: '',
|
||||||
type: String as PropType<InputSize>,
|
|
||||||
default: 'md',
|
|
||||||
},
|
|
||||||
modelValue: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const model = useVModel(props, 'modelValue')
|
const model = useVModel(props, 'modelValue')
|
||||||
|
|||||||
Reference in New Issue
Block a user