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