59 lines
1.4 KiB
Vue
Executable File
59 lines
1.4 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: '1 Menit'
|
|
},
|
|
class: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const handleInput = (e: any) => {
|
|
e.target.value = e.target.value.replace(/[^0-9.]/g, '')
|
|
}
|
|
|
|
const handleBlur = (e: any) => {
|
|
e.target.value = e.target.value ? e.target.value + ' Menit' : ''
|
|
}
|
|
|
|
const handleFocus = (e: any) => {
|
|
e.target.value = e.target.value.replace(/[^0-9.]/g, '')
|
|
}
|
|
|
|
const emit = defineEmits(['update:text'])
|
|
const text = ref(props.value)
|
|
|
|
watch(text, (val) => {
|
|
const validatedText = val.replace(/[^0-9.]/g, '')
|
|
|
|
if (parseInt(validatedText)) {
|
|
emit('update:text', validatedText)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative w-full overflow-hidden bg-gray-200 rounded-lg" :class="[props.class]">
|
|
<input v-model="text" autocomplete="off" type="text" :placeholder="placeholder" :readonly="readonly"
|
|
inputmode="numeric" pattern="[0-9.]*" :disabled="disabled" @input="handleInput($event)" @blur="handleBlur($event)"
|
|
@focus="handleFocus($event)"
|
|
class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0" />
|
|
</div>
|
|
</template>
|