Input.vue
2.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<template>
<div :class="['w-full', className]">
<label v-if="label" :for="inputId" class="block text-sm font-medium text-gray-700 mb-1">
{{ label }}
<span v-if="required" class="text-red-500 ml-1">*</span>
</label>
<div class="relative rounded-md shadow-sm">
<div v-if="leftIcon" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm">
<slot name="leftIcon">
{{ leftIcon }}
</slot>
</span>
</div>
<input
:id="inputId"
:type="type"
:name="name"
:placeholder="placeholder"
:value="modelValue"
:required="required"
:disabled="disabled"
@input="$emit('update:modelValue', $event.target.value)"
@blur="$emit('blur', $event)"
:class="[
'block w-full border-gray-300 rounded-md shadow-sm',
'focus:ring-green-500 focus:border-green-500 sm:text-sm',
'disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed',
sizeClass,
error ? 'border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500' : '',
leftIcon ? 'pl-10' : '',
rightIcon ? 'pr-10' : ''
]"
v-bind="$attrs"
/>
<div v-if="rightIcon" class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm">
<slot name="rightIcon">
{{ rightIcon }}
</slot>
</span>
</div>
</div>
<p v-if="error || helperText" :class="['mt-1 text-sm', error ? 'text-red-600' : 'text-gray-500']">
{{ error || helperText }}
</p>
</div>
</template>
<script setup>
import { computed } from 'vue'
const inputSizes = {
sm: 'px-2 py-1 text-sm',
md: 'px-3 py-2',
lg: 'px-4 py-3 text-lg'
}
const props = defineProps({
modelValue: {
type: [String, Number],
default: ''
},
label: {
type: String,
default: ''
},
name: {
type: String,
required: true
},
type: {
type: String,
default: 'text'
},
placeholder: {
type: String,
default: ''
},
error: {
type: String,
default: ''
},
size: {
type: String,
default: 'md',
validator: (value) => Object.keys(inputSizes).includes(value)
},
required: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
className: {
type: String,
default: ''
},
helperText: {
type: String,
default: ''
},
leftIcon: {
type: [String, Object],
default: null
},
rightIcon: {
type: [String, Object],
default: null
}
})
defineEmits(['update:modelValue', 'blur'])
const inputId = computed(() => `input-${props.name}`)
const sizeClass = computed(() => inputSizes[props.size] || inputSizes.md)
</script>