refs #6907 feat: merge changes

src/components/common/VnInputDate.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed, ref } from 'vue';
-import VnInput from 'components/common/VnInput.vue';
 import isValidDate from 'filters/isValidDate';
 
 const props = defineProps({
@@ -17,7 +16,7 @@ const props = defineProps({
         default: false,
     },
 });
-const focus = ref(false);
+const hover = ref(false);
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -46,7 +45,7 @@ const isPopupOpen = ref(false);
 
 const onDateUpdate = (date) => {
     value.value = date;
-    // isPopupOpen.value = false;
+    isPopupOpen.value = false;
 };
 
 const padDate = (value) => value.toString().padStart(2, '0');
@@ -79,19 +78,19 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <div @mouseover="focus = true" @mouseleave="focus = false">
+    <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
             class="vn-input-date"
-            rounded
             readonly
             :model-value="displayDate(value)"
             v-bind="{ ...$attrs, ...styleAttrs }"
+            @click="isPopupOpen = true"
         >
             <template #append>
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="focus && value"
+                    v-if="hover && value"
                     @click="onDateUpdate(null)"
                 ></QIcon>
                 <QIcon name="event" class="cursor-pointer">

src/components/common/VnInputTime.vue

@@ -2,7 +2,6 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
-import VnInput from 'components/common/VnInput.vue';
 
 const props = defineProps({
     modelValue: {
@@ -20,7 +19,6 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
-const focus = ref(false);
 
 const value = computed({
     get() {
@@ -68,23 +66,15 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <!-- <div @mouseover="focus = true" @mouseleave="focus = false"> -->
     <QInput
         class="vn-input-time"
         readonly
         :model-value="formatTime(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
         @click="isPopupOpen = true"
-        :clearable="false"
     >
         <template #append>
-            <!-- <QIcon
-                    name="close"
-                    size="xs"
-                    v-if="focus && value"
-                    @click="value = null"
-                ></QIcon> -->
-            <QIcon name="event" class="cursor-pointer">
+            <QIcon name="schedule" class="cursor-pointer">
                 <QPopupProxy
                     v-model="isPopupOpen"
                     cover
@@ -117,7 +107,6 @@ const styleAttrs = computed(() => {
             </QIcon>
         </template>
     </QInput>
-    <!-- </div> -->
 </template>
 
 <style lang="scss">