refs #6907 updates

src/components/common/VnInput.vue

@@ -41,8 +41,8 @@ const onEnterPress = () => {
     emit('keyup.enter');
 };
 
-const focus = () => {
-    vnInputRef.value.focus();
+const handleValue = (val = null) => {
+    value.value = val;
 };
 
 defineExpose({
@@ -63,7 +63,7 @@ defineExpose({
             :type="$attrs.type"
             :class="{ required: $attrs.required }"
             @keyup.enter="onEnterPress()"
-            :clearable="focus"
+            :clearable="false"
         >
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />
@@ -71,6 +71,12 @@ defineExpose({
 
             <template #append>
                 <slot name="append" v-if="$slots.append" />
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="focus && value"
+                    @click="handleValue(null)"
+                ></QIcon>
             </template>
         </QInput>
     </div>

src/components/common/VnInputDate.vue

@@ -46,7 +46,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');

src/components/common/VnInputTime.vue

@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
-import VnInput from "components/common/VnInput.vue";
+import VnInput from 'components/common/VnInput.vue';
 
 const props = defineProps({
     modelValue: {
@@ -20,6 +20,8 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
+const focus = ref(false);
+
 const value = computed({
     get() {
         return props.modelValue;
@@ -27,12 +29,7 @@ const value = computed({
     set(value) {
         const [hours, minutes] = value.split(':');
         const date = new Date(props.modelValue);
-        date.setHours(
-            Number.parseInt(hours) || 0,
-            Number.parseInt(minutes) || 0,
-            0,
-            0
-        );
+        date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
         emit('update:modelValue', value ? date.toISOString() : null);
     },
 });
@@ -71,14 +68,22 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <VnInput
+    <!-- <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">
                 <QPopupProxy
                     v-model="isPopupOpen"
@@ -111,7 +116,8 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </VnInput>
+    </QInput>
+    <!-- </div> -->
 </template>
 
 <style lang="scss">