0
0
Fork 0

feat: imrpove VnInputTime to set cursor at start

This commit is contained in:
Javier Segarra 2024-07-04 17:42:28 +02:00
parent 3a73c6b908
commit 5d6cdd4e2e
1 changed files with 10 additions and 1 deletions

View File

@ -2,6 +2,7 @@
import { watch, computed, ref } from 'vue'; import { watch, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { date } from 'quasar'; import { date } from 'quasar';
import { nextTick } from 'vue';
const model = defineModel({ type: String }); const model = defineModel({ type: String });
const props = defineProps({ const props = defineProps({
@ -55,17 +56,24 @@ const formattedTime = computed({
function dateToTime(newDate) { function dateToTime(newDate) {
return date.formatDate(new Date(newDate), dateFormat); return date.formatDate(new Date(newDate), dateFormat);
} }
const timeField = ref();
watch( watch(
() => model.value, () => model.value,
(val) => (formattedTime.value = val), (val) => (formattedTime.value = val),
{ immediate: true } { immediate: true }
); );
const focusField = () => {
nextTick(() => {
const input = timeField.value.$el.querySelector('input');
input.setSelectionRange(0, 0);
});
};
</script> </script>
<template> <template>
<div @mouseover="hover = true" @mouseleave="hover = false"> <div @mouseover="hover = true" @mouseleave="hover = false">
<QInput <QInput
ref="timeField"
class="vn-input-time" class="vn-input-time"
mask="##:##" mask="##:##"
placeholder="--:--" placeholder="--:--"
@ -74,6 +82,7 @@ watch(
:class="{ required: $attrs.required }" :class="{ required: $attrs.required }"
style="min-width: 100px" style="min-width: 100px"
:rules="$attrs.required ? [requiredFieldRule] : null" :rules="$attrs.required ? [requiredFieldRule] : null"
@focus="focusField"
> >
<template #append> <template #append>
<QIcon <QIcon