Przeglądaj źródła

fix: :bug: DefaultInputDatePicker mask initializing before component

Denis 1 rok temu
rodzic
commit
dc68c80473
1 zmienionych plików z 22 dodań i 4 usunięć
  1. 22 4
      src/components/defaults/DefaultInputDatePicker.vue

+ 22 - 4
src/components/defaults/DefaultInputDatePicker.vue

@@ -1,10 +1,12 @@
 <template>
   <div v-bind="$attrs">
     <q-input
+      ref="inputRef"
       v-model="treatedDate"
-      :mask="time ? masks.Brasil.datetime : masks.Brasil.date"
+      :mask="inputMask"
       :label="label"
       :rules="rules"
+      :dense="dense"
       clearable
     >
       <template #append>
@@ -50,11 +52,11 @@
 </template>
 
 <script setup>
-import { watch, ref } from "vue";
+import { watch, ref, computed, useTemplateRef } from "vue";
 import { useI18n } from "vue-i18n";
 import masks from "src/helpers/masks";
 
-const { label, rules, time } = defineProps({
+const { label, rules, time, dense } = defineProps({
   label: {
     type: String,
     default: () => useI18n().t("common.terms.date"),
@@ -63,16 +65,23 @@ const { label, rules, time } = defineProps({
     type: Array,
     default: () => [],
   },
+  dense: {
+    type: Boolean,
+    default: false,
+  },
   time: {
     type: Boolean,
     default: false,
   },
 });
 
-const date = ref();
+const qInputRef = useTemplateRef("inputRef");
+
 const treatedDate = defineModel();
 const untreatedDate = defineModel("untreatedDate");
+
 const activePanel = ref("date");
+const date = ref();
 
 const handleDateSelection = () => {
   if (time) {
@@ -98,6 +107,15 @@ const unformatDate = (value) => {
   return time && timePart ? `${formattedDate} ${timePart}` : formattedDate;
 };
 
+const inputMask = computed(() => {
+  if (!qInputRef.value) return "";
+
+  if (time) {
+    return masks.Brasil.datetime;
+  }
+  return masks.Brasil.date;
+});
+
 watch(date, (value) => {
   if (!value) return;