30 lines
813 B
Vue
Executable file
30 lines
813 B
Vue
Executable file
<template>
|
|
<div class="TextField">
|
|
<div class="wrapper">
|
|
<input v-model="text" :type="type" :id="id" :placeholder="placeholder" @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
|
|
<label :for="id">
|
|
<Icon v-if="icon" class="icon" :name="icon" mode="svg" />
|
|
<span>{{ label }}</span>
|
|
</label>
|
|
</div>
|
|
<span v-if="message">{{ message }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Props = {
|
|
type?: 'text' | 'number'
|
|
message?: string
|
|
icon?: string
|
|
label: string
|
|
placeholder: string
|
|
id: string
|
|
mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal'
|
|
};
|
|
|
|
const { type = "text", mode = "text" } = defineProps<Props>();
|
|
|
|
const emit = defineEmits(['blur', 'input']);
|
|
|
|
const text = defineModel();
|
|
</script>
|