42 lines
815 B
Vue
42 lines
815 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = withDefaults(defineProps<{
|
|
modelValue: string;
|
|
maxlength?: number;
|
|
disabled?: boolean;
|
|
autofocus?: boolean;
|
|
id?: string;
|
|
}>(), {
|
|
modelValue: '',
|
|
maxlength: 6,
|
|
disabled: false,
|
|
autofocus: false,
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void;
|
|
}>();
|
|
|
|
const value = computed({
|
|
get: () => props.modelValue,
|
|
set: (v: string) => emit('update:modelValue', v.slice(0, props.maxlength)),
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex justify-center">
|
|
<input
|
|
:id="id"
|
|
v-model="value"
|
|
type="text"
|
|
inputmode="numeric"
|
|
:maxlength="maxlength"
|
|
:disabled="disabled"
|
|
:autofocus="autofocus"
|
|
class="sr-only"
|
|
/>
|
|
<slot />
|
|
</div>
|
|
</template>
|