53 lines
994 B
Vue
53 lines
994 B
Vue
<template>
|
|
<fieldset class="fieldset mb-0">
|
|
<input
|
|
:type="type"
|
|
:inputmode="inputMode"
|
|
class="input input-lg w-full"
|
|
:class="error ? 'input-error' : ''"
|
|
:placeholder="placeholder"
|
|
v-model="model"
|
|
@input="$emit('clearError')"
|
|
:maxlength="maxlength"
|
|
/>
|
|
<p v-if="error" class="label">{{ error }}</p>
|
|
</fieldset>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed} from "vue";
|
|
|
|
const model = defineModel();
|
|
const props = defineProps({
|
|
error: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
|
|
placeholder: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
|
|
maxlength: {
|
|
type: Number,
|
|
default: 1000,
|
|
}
|
|
});
|
|
const emits = defineEmits(['clearError']);
|
|
|
|
const inputMode = computed(() => {
|
|
switch (props.type) {
|
|
case 'email': return 'email';
|
|
case 'tel': return 'tel';
|
|
case 'number': return 'numeric';
|
|
default: return 'text';
|
|
}
|
|
});
|
|
</script>
|