evui 3.3.4 → 3.3.7

package/src/components/datePicker/DatePicker.vue

@@ -7,114 +7,121 @@
       disabled : $props.disabled,
     }"
   >
-    <template v-if="$props.mode === 'date' || $props.mode === 'dateTime'">
-      <span class="ev-date-picker-prefix-icon">
-        <i class="ev-icon-calendar" />
-      </span>
-      <input
-        v-model.trim="currentValue"
-        type="text"
-        class="ev-input"
-        :placeholder="$props.placeholder"
-        :disabled="$props.disabled"
-        @click="clickSelectInput"
-        @keydown.enter.prevent="validateValue(currentValue)"
-        @change="validateValue(currentValue)"
-      />
-    </template>
-    <template v-else>
-      <div
-          class="ev-date-picker-tag-wrapper"
-          @click="clickSelectInput"
-      >
+    <div
+      ref="datePickerWrapper"
+      class="ev-date-picker__wrapper"
+    >
+      <template v-if="$props.mode === 'date' || $props.mode === 'dateTime'">
         <span class="ev-date-picker-prefix-icon">
           <i class="ev-icon-calendar" />
         </span>
         <input
+          v-model.trim="currentValue"
           type="text"
-          class="ev-input readonly"
-          readonly
+          class="ev-input"
           :placeholder="$props.placeholder"
           :disabled="$props.disabled"
+          @click="clickSelectInput"
+          @keydown.enter.prevent="validateValue(currentValue)"
+          @change="validateValue(currentValue)"
         />
-        <template
-          v-if="$props.mode === 'dateMulti'
-          && ($props.options.multiType === 'date' || !$props.options.tagShorten)"
+      </template>
+      <template v-else>
+        <div
+          class="ev-date-picker-tag-wrapper"
+          @click="clickSelectInput"
         >
-          <div
-            v-for="(item, idx) in mv"
-            :key="`${item}_${idx}`"
-            class="ev-select-tag"
-            :class="{ num: $props.options.multiType !== 'date' }"
-          >
-            <span class="ev-tag-name"> {{ item }} </span>
-            <span
-              v-if="$props.options.multiType === 'date'"
-              class="ev-tag-suffix"
-              @click.stop="[removeMv(item), changeDropboxPosition()]"
-            >
-            <i class="ev-tag-suffix-close ev-icon-error" />
+          <span class="ev-date-picker-prefix-icon">
+            <i class="ev-icon-calendar" />
           </span>
-          </div>
-        </template>
-        <template v-else-if="mv[0] && mv[mv.length - 1]">
-          <div class="ev-select-tag num">
-            <span class="ev-tag-name"> {{ mv[0] }} </span>
-          </div>
-          <div class="ev-select-tag num">
-            <span class="ev-tag-name"> ~ </span>
-          </div>
-          <div class="ev-select-tag num">
-            <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
-          </div>
-        </template>
-      </div>
-    </template>
-    <template v-if="$props.clearable">
-      <span
-        v-show="isClearableIcon"
-        class="ev-input-suffix"
-        @click.stop="[removeAllMv(), clickOutsideDropbox()]"
-      >
-        <i class="ev-icon-error" />
-      </span>
-    </template>
-    <div class="ev-date-picker-dropbox-wrapper">
-      <div
-        v-if="isDropbox"
-        ref="dropbox"
-        class="ev-date-picker-dropdown"
-        :class="$props.mode"
-        :style="dropboxPosition"
-      >
-        <div
-            v-if="usedShortcuts.length"
-            class="ev-date-picker-dropbox__button-layout">
-          <ev-button-group>
-            <ev-button
-               v-for="button in usedShortcuts"
-               :key="button.key"
-               :type="button.isActive ? 'primary' : 'default'"
-               @click="clickShortcut(button.key)"
+          <input
+            type="text"
+            class="ev-input readonly"
+            readonly
+            :placeholder="$props.placeholder"
+            :disabled="$props.disabled"
+          />
+          <template
+            v-if="$props.mode === 'dateMulti'
+            && ($props.options.multiType === 'date' || !$props.options.tagShorten)"
+          >
+            <div
+              v-for="(item, idx) in mv"
+              :key="`${item}_${idx}`"
+              class="ev-select-tag"
+              :class="{ num: $props.options.multiType !== 'date' }"
             >
-              {{ button.label }}
-            </ev-button>
-          </ev-button-group>
+              <span class="ev-tag-name"> {{ item }} </span>
+              <span
+                v-if="$props.options.multiType === 'date'"
+                class="ev-tag-suffix"
+                @click.stop="[removeMv(item), changeDropboxPosition()]"
+              >
+              <i class="ev-tag-suffix-close ev-icon-error" />
+            </span>
+            </div>
+          </template>
+          <template v-else-if="mv[0] && mv[mv.length - 1]">
+            <div class="ev-select-tag num">
+              <span class="ev-tag-name"> {{ mv[0] }} </span>
+            </div>
+            <div class="ev-select-tag num">
+              <span class="ev-tag-name"> ~ </span>
+            </div>
+            <div class="ev-select-tag num">
+              <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
+            </div>
+          </template>
         </div>
+      </template>
+      <template v-if="$props.clearable">
+        <span
+          v-show="isClearableIcon"
+          class="ev-input-suffix"
+          @click.stop="[removeAllMv(), clickOutsideDropbox()]"
+        >
+          <i class="ev-icon-error" />
+        </span>
+      </template>
+      <div class="ev-date-picker-dropbox-wrapper">
         <div
+          v-if="isDropbox"
+          ref="dropbox"
+          class="ev-date-picker-dropdown"
+          :class="$props.mode"
+          :style="dropboxPosition"
+        >
+          <div
+            v-if="usedShortcuts.length"
+            class="ev-date-picker-dropbox__button-layout"
+          >
+            <ev-button-group>
+              <ev-button
+                v-for="button in usedShortcuts"
+                :key="button.key"
+                :type="button.isActive ? 'primary' : 'default'"
+                @click="clickShortcut(button.key)"
+              >
+                {{ button.label }}
+              </ev-button>
+            </ev-button-group>
+          </div>
+          <div
             v-if="usedShortcuts.length"
             class="ev-date-picker-dropbox__divider"
-        />
-        <div
-            :class="{ 'ev-date-picker-dropbox__calendar':usedShortcuts.length }">
-          <ev-calendar
-            key="fromCalendar"
-            v-model="mv"
-            :mode="$props.mode"
-            :month-notation="$props.monthNotation"
-            :day-of-the-week-notation="$props.dayOfTheWeekNotation"
-            :options="$props.options"
           />
+          <div
+            :class="{ 'ev-date-picker-dropbox__calendar':usedShortcuts.length }"
+          >
+            <ev-calendar
+              key="fromCalendar"
+              v-model="mv"
+              :mode="$props.mode"
+              :month-notation="$props.monthNotation"
+              :day-of-the-week-notation="$props.dayOfTheWeekNotation"
+              :options="$props.options"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -230,6 +237,7 @@ export default {
     const {
       isDropbox,
       datePicker,
+      datePickerWrapper,
       dropbox,
       itemWrapper,
       dropboxPosition,
@@ -261,6 +269,7 @@ export default {
 
       isDropbox,
       datePicker,
+      datePickerWrapper,
       dropbox,
       itemWrapper,
       dropboxPosition,
@@ -279,13 +288,18 @@ export default {
 @import '../../style/index.scss';
 
 .ev-date-picker {
-  $select-height: 35px;
+  $select-height: $input-default-height;
   display: block;
   position: relative;
   width: 100%;
-  min-height: $select-height;
 
   @import '../../style/components/input.scss';
+
+  &__wrapper {
+    position: relative;
+    min-height: $select-height;
+  }
+
   .ev-input {
     $calendar-icon-width: 30px;
     position: absolute;
@@ -312,15 +326,12 @@ export default {
     height: 100%;
     align-items: center;
     cursor: pointer;
-
-
     &:hover {
       color: #409EFF;
     }
   }
 
   .ev-date-picker-tag-wrapper {
-    $select-height: 35px;
     display: flex;
     width: 100%;
     height: 100%;

package/src/components/datePicker/uses.js

@@ -125,6 +125,7 @@ export const useDropdown = () => {
 
   const isDropbox = ref(false);
   const datePicker = ref(null);
+  const datePickerWrapper = ref(null);
   const dropbox = ref(null);
   const itemWrapper = ref(null);
   const dropboxPosition = reactive({
@@ -138,7 +139,7 @@ export const useDropdown = () => {
    */
   const changeDropboxPosition = async () => {
     await nextTick();
-    const datePickerRect = datePicker.value?.getBoundingClientRect();
+    const datePickerRect = datePickerWrapper.value?.getBoundingClientRect();
     const dropboxRect = dropbox.value?.getBoundingClientRect();
     const datePickerHeight = datePickerRect.height;
     const datePickerY = datePickerRect.y;
@@ -195,6 +196,7 @@ export const useDropdown = () => {
   return {
     isDropbox,
     datePicker,
+    datePickerWrapper,
     dropbox,
     itemWrapper,
     dropboxPosition,

package/src/components/grid/Grid.vue

@@ -341,19 +341,14 @@ export default {
         items: [],
       },
       isSearch: false,
-      searchValue: computed(() => (props.option.searchValue || '')),
+      searchWord: '',
     });
     const stores = reactive({
       viewStore: [],
       originStore: [],
       filterStore: [],
       store: computed(() => {
-        let store;
-        if (filterInfo.isFiltering) {
-          store = stores.filterStore;
-        } else {
-          store = stores.originStore;
-        }
+        const store = filterInfo.isFiltering ? stores.filterStore : stores.originStore;
         return filterInfo.isSearch ? stores.searchStore : store;
       }),
       orderedColumns: computed(() =>
@@ -512,9 +507,9 @@ export default {
       (value) => {
         setStore(value);
         if (filterInfo.isSearch) {
-          onSearch(filterInfo.searchValue);
+          onSearch(filterInfo.searchWord);
         }
-      },
+      }, { deep: true },
     );
     watch(
       () => props.checked,
@@ -582,13 +577,12 @@ export default {
       },
     );
     watch(
-      () => filterInfo.searchValue,
+      () => props.option.searchValue,
       (value) => {
-        const searchValue = value?.value ?? value;
-        if (searchValue) {
-          onSearch(searchValue);
+        if (value !== undefined) {
+          onSearch(value?.value ?? value);
         }
-      }, { immediate: true },
+      }, { immediate: true, deep: true },
     );
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     return {

package/src/components/grid/uses.js

@@ -725,6 +725,7 @@ export const filterEvent = (params) => {
     }
     timer = setTimeout(() => {
       filterInfo.isSearch = false;
+      filterInfo.searchWord = searchWord;
       if (searchWord) {
         stores.searchStore = stores.store.filter((row) => {
           let isShow = false;

package/src/components/inputNumber/InputNumber.vue

@@ -6,28 +6,30 @@
       readonly,
     }"
   >
-    <span
-      v-for="type in ['up', 'down']"
-      :key="`step-arrow-${type}`"
-      :class="['ev-input-number-icon', `step-${type}`]"
-      @click="stepValue(type)"
-    >
-      <i :class="`ev-icon-s-arrow-${type}`" />
-    </span>
-    <input
-      v-model.trim="currentValue"
-      class="ev-input"
-      type="text"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      @focus="focusInput"
-      @blur="blurInput"
-      @change="changeMv"
-      @keydown.up.prevent="stepValue('up')"
-      @keydown.down.prevent="stepValue('down')"
-      @keydown.enter.prevent="validateValue(currentValue)"
-    />
+    <div class="ev-input-number__wrapper">
+      <span
+        v-for="type in ['up', 'down']"
+        :key="`step-arrow-${type}`"
+        :class="['ev-input-number-icon', `step-${type}`]"
+        @click="stepValue(type)"
+      >
+        <i :class="`ev-icon-s-arrow-${type}`" />
+      </span>
+      <input
+        v-model.trim="currentValue"
+        class="ev-input"
+        type="text"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        @focus="focusInput"
+        @blur="blurInput"
+        @change="changeMv"
+        @keydown.up.prevent="stepValue('up')"
+        @keydown.down.prevent="stepValue('down')"
+        @keydown.enter.prevent="validateValue(currentValue)"
+      />
+    </div>
   </div>
 </template>
 
@@ -136,6 +138,9 @@ export default {
       }
     }
   }
+  &__wrapper {
+    position: relative;
+  }
   .ev-input {
     $number-arrow-btn-width: 30px;
     padding: 0 #{$number-arrow-btn-width + $input-default-padding} 0 $input-default-padding;

package/src/components/message/Message.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, onMounted, onUnmounted } from 'vue';
+import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 
 export default {
   name: 'EvMessage',
@@ -125,8 +125,9 @@ export default {
       startTimer();
       document.addEventListener('keydown', keydown);
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       document.removeEventListener('keydown', keydown);
+      clearTimer();
     });
     return {
       startTimer,

package/src/components/messageBox/MessageBox.vue

@@ -83,7 +83,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, watch, onMounted, ref } from 'vue';
+import { reactive, toRefs, watch, onMounted, ref, onBeforeUnmount } from 'vue';
 import EvButton from '@/components/button/Button.vue';
 
 export default {
@@ -226,6 +226,9 @@ export default {
         document.removeEventListener('keydown', keydown);
       }
     });
+    onBeforeUnmount(() => {
+      document.removeEventListener('keydown', keydown);
+    });
     return {
       closeMsg,
       ...toRefs(state),

package/src/components/notification/Notification.vue

@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, onMounted, onUnmounted } from 'vue';
+import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 
 export default {
   name: 'EvNotification',
@@ -153,8 +153,9 @@ export default {
       startTimer();
       document.addEventListener('keydown', keydown);
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       document.removeEventListener('keydown', keydown);
+      clearTimer();
     });
     return {
       startTimer,