evui 3.4.57 → 3.4.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.57",
+  "version": "3.4.59",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/Chart.vue

@@ -95,6 +95,7 @@
       const injectIsChartGroup = inject('isChartGroup', false);
       const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
       const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
+      const injectGroupHoveredLabel = inject('groupHoveredLabel', null);
       const injectBrushIdx = inject('brushIdx', { start: 0, end: -1 });
       const injectEvChartPropsInGroup = inject('evChartPropsInGroup', []);
 
@@ -105,7 +106,7 @@
         selectSeriesInfo,
         getNormalizedData,
         getNormalizedOptions,
-      } = useModel(injectGroupSelectedLabel);
+      } = useModel(injectGroupSelectedLabel, injectGroupHoveredLabel);
 
       const normalizedData = getNormalizedData(props.data);
       const normalizedOptions = getNormalizedOptions(props.options);
@@ -278,6 +279,19 @@
         });
       });
 
+      watch(() => injectGroupHoveredLabel?.value, (newHoveredLabel) => {
+        if (!newHoveredLabel) {
+          return;
+        }
+        if (props.options.syncHover !== false) {
+          if (newHoveredLabel.label == null) {
+            evChart.overlayClear();
+          } else {
+            evChart.drawSyncedIndicator(newHoveredLabel);
+          }
+        }
+      }, { deep: true, flush: 'post' });
+
       onMounted(async () => {
         if (injectEvChartPropsInGroup?.value) {
           injectEvChartPropsInGroup.value.push(props);

package/src/components/chart/chart.core.js

@@ -170,6 +170,10 @@ class EvChart {
     this.chartRect = this.getChartRect();
   }
 
+  drawSyncedIndicator({ horizontal, label, mousePosition }) {
+    this.drawSyncedIndicator({ horizontal, label, mousePosition });
+  }
+
   /**
    * To draw canvas chart, it processes several sequential jobs
    * @param {any} [hitInfo=undefined]    from mousemove callback (object or object[] of undefined)

package/src/components/chart/plugins/plugins.interaction.js

@@ -61,6 +61,12 @@ const modules = {
 
       if (indicator.use && type !== 'pie' && type !== 'scatter' && type !== 'heatMap') {
         this.drawIndicator(offset, indicator.color);
+        const label = this.getTimeLabel(offset);
+        args.hoveredLabel = {
+          horizontal: this.options.horizontal,
+          label,
+          mousePosition: [e.clientX, e.clientY],
+        };
       }
 
       if (typeof this.listeners['mouse-move'] === 'function') {
@@ -92,6 +98,7 @@ const modules = {
       if (tooltip.use) {
         this.tooltipClear();
       }
+      this.listeners['mouse-leave']();
     };
 
     /**

package/src/components/chart/plugins/plugins.tooltip.js

@@ -1,5 +1,6 @@
 import { convertToPercent } from '@/common/utils';
 import debounce from '@/common/utils.debounce';
+import { inRange } from 'lodash-es';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
 
@@ -778,6 +779,94 @@ const modules = {
       ctx.closePath();
     }
   },
+  /**
+   * Get hovered axis label with mousemove
+   * @param {object} offset   mousemove callback
+   *
+   * @returns {number | null} hovered axis label
+   */
+  getTimeLabel(offset) {
+    const options = this.options;
+
+    if (
+      options.syncHover === false
+      || (!options.horizontal && !options.axesX.every(({ type }) => type === 'time'))
+      || (options.horizontal && !options.axesY.every(({ type }) => type === 'time'))) {
+      return null;
+    }
+
+    const fromTime = +this.data.labels?.[0];
+    const toTime = +this.data.labels?.[this.data.labels.length - 1];
+    if (fromTime == null || toTime == null) {
+      return null;
+    }
+
+    const [offsetX, offsetY] = offset;
+    const graphPos = {
+      x1: this.chartRect.x1 + this.labelOffset.left,
+      x2: this.chartRect.x2 - this.labelOffset.right,
+      y1: this.chartRect.y1 + this.labelOffset.top,
+      y2: this.chartRect.y2 - this.labelOffset.bottom,
+    };
+
+    if (options.horizontal) {
+      const chartHeight = graphPos.y2 - graphPos.y1;
+      const hoverYAxis = offsetY - graphPos.y1;
+      const hoverTime = ((hoverYAxis * (toTime - fromTime)) / chartHeight) + fromTime;
+      return Math.round(hoverTime);
+    }
+      const chartWidth = graphPos.x2 - graphPos.x1;
+      const hoverXAxis = offsetX - graphPos.x1;
+      const hoverTime = ((hoverXAxis * (toTime - fromTime)) / chartWidth) + fromTime;
+      return Math.round(hoverTime);
+  },
+  /**
+   * Draw chart indicator with other grouped chart's mousemove
+   * @param {object} hoveredLabel   chart direction and hovered axis label
+   *
+   * @returns {undefined}
+   */
+  drawSyncedIndicator({ horizontal, label, mousePosition }) {
+    if (!mousePosition || !!horizontal !== !!this.options.horizontal) {
+      return;
+    }
+    if (
+      this.options.syncHover === false
+      || (!horizontal && !this.options.axesX.every(({ type }) => type === 'time'))
+      || (horizontal && !this.options.axesY.every(({ type }) => type === 'time'))) {
+      return;
+    }
+    const fromTime = +this.data.labels?.[0];
+    const toTime = +this.data.labels?.[this.data.labels.length - 1];
+    if (fromTime == null || toTime == null) {
+      return;
+    }
+    const [clientX, clientY] = mousePosition;
+    const { top, bottom, left, right } = this.chartDOM.getBoundingClientRect();
+
+    const isHoveredChart = inRange(clientX, left, right) && inRange(clientY, bottom, top);
+    if (isHoveredChart) {
+      return;
+    }
+
+    this.overlayClear();
+    const graphPos = {
+      x1: this.chartRect.x1 + this.labelOffset.left,
+      x2: this.chartRect.x2 - this.labelOffset.right,
+      y1: this.chartRect.y1 + this.labelOffset.top,
+      y2: this.chartRect.y2 - this.labelOffset.bottom,
+    };
+
+    if (horizontal) {
+      const chartHeight = graphPos.y2 - graphPos.y1;
+      const offsetY = (chartHeight * (label - fromTime)) / (toTime - fromTime) + graphPos.y1;
+      this.drawIndicator([graphPos.x2, offsetY], this.options.indicator.color);
+    } else {
+      const chartWidth = graphPos.x2 - graphPos.x1;
+      const offsetX = (chartWidth * (label - fromTime)) / (toTime - fromTime) + graphPos.x1;
+      this.drawIndicator([offsetX, graphPos.y2], this.options.indicator.color);
+    }
+  },
 
   /**
    * Clear tooltip canvas

package/src/components/chart/uses.js

@@ -253,7 +253,7 @@ const DEFAULT_DATA = {
   data: {},
 };
 
-export const useModel = (injectGroupSelectedLabel) => {
+export const useModel = (injectGroupSelectedLabel, injectGroupHoveredLabel) => {
   const { props, emit } = getCurrentInstance();
 
   const getNormalizedOptions = (options) => {
@@ -338,9 +338,17 @@ export const useModel = (injectGroupSelectedLabel) => {
       emit('drag-select', e);
     },
     'mouse-move': async (e) => {
+      if (injectGroupHoveredLabel?.value) {
+        injectGroupHoveredLabel.value = e.hoveredLabel;
+      }
       await nextTick();
       emit('mouse-move', e);
     },
+    'mouse-leave': () => {
+      if (injectGroupHoveredLabel?.value) {
+        injectGroupHoveredLabel.value.label = null;
+      }
+    },
   };
 
   return {

package/src/components/chartGroup/ChartGroup.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { onMounted, watch, provide, toRef, computed } from 'vue';
+import { onMounted, ref, watch, provide, toRef, computed } from 'vue';
 import evChartToolbar from '../chart/ChartToolbar';
 import { useGroupModel } from './uses';
 import { useZoomModel } from '../chart/uses';
@@ -50,6 +50,7 @@ export default {
     'update:groupSelectedLabel',
     'update:zoomStartIdx',
     'update:zoomEndIdx',
+    'update:groupHoveredLabel',
   ],
   setup(props, { emit }) {
     const {
@@ -70,6 +71,18 @@ export default {
       set: val => emit('update:groupSelectedLabel', val),
     });
     provide('groupSelectedLabel', groupSelectedLabel);
+    const groupHoveredLabel = ref(null);
+    provide('groupHoveredLabel', groupHoveredLabel);
+
+    watch(() => props.options.syncHover, (newSyncHover) => {
+      if (newSyncHover) {
+        groupHoveredLabel.value = { label: '', horizontal: false };
+      } else {
+        groupHoveredLabel.value = null;
+      }
+    }, {
+      immediate: true,
+    });
 
     const {
       evChartZoomOptions,

package/src/components/select/Select.vue

@@ -8,10 +8,7 @@
       disabled,
     }"
   >
-    <div
-      ref="selectWrapper"
-      class="ev-select__wrapper"
-    >
+    <div ref="selectWrapper" class="ev-select__wrapper">
       <template v-if="!multiple">
         <span
           v-if="!clearable || !isClearableIcon"
@@ -75,24 +72,20 @@
             </div>
           </template>
           <template v-else>
-            <div
-              v-if="selectedModel.length"
-              class="ev-select-tag"
-            >
+            <div v-if="selectedModel.length" class="ev-select-tag">
               <span class="ev-tag-name">
                 {{ selectedModel[0].name }}
               </span>
               <span
                 class="ev-tag-suffix"
-                @click.stop="[removeMv(selectedModel[0].value), changeDropboxPosition()]"
+                @click.stop="
+                  [removeMv(selectedModel[0].value), changeDropboxPosition()]
+                "
               >
                 <i class="ev-tag-suffix-close ev-icon-error" />
               </span>
             </div>
-            <div
-              v-if="selectedModel.length > 1"
-              class="ev-select-tag num"
-            >
+            <div v-if="selectedModel.length > 1" class="ev-select-tag num">
               <span class="ev-tag-name">
                 + {{ selectedModel.length - 1 }}
               </span>
@@ -114,7 +107,7 @@
           v-if="isDropbox"
           ref="dropbox"
           class="ev-select-dropbox"
-          :style="dropboxPosition"
+          :style="[dropboxPosition, { width: dropboxWidth }]"
         >
           <template v-if="filterable">
             <slot
@@ -140,9 +133,11 @@
               v-if="multiple"
               class="ev-select-dropbox-item all-check"
               :class="{
-                selected: allCheck
-            }"
-              @click.self.prevent="[changeAllCheck(false), changeDropboxPosition()]"
+                selected: allCheck,
+              }"
+              @click.self.prevent="
+                [changeAllCheck(false), changeDropboxPosition()]
+              "
             >
               <ev-checkbox
                 v-model="allCheck"
@@ -150,38 +145,30 @@
                 @change="[changeAllCheck(true), changeDropboxPosition()]"
               />
             </div>
-            <div
-              ref="itemWrapper"
-              class="ev-select-dropbox-list"
-            >
+            <div ref="itemWrapper" class="ev-select-dropbox-list">
               <template v-if="multiple">
-                <ev-checkbox-group
-                  v-model="mv"
-                >
-                  <ul
-                    v-if="filteredItems.length"
-                    class="ev-select-dropbox-ul"
-                  >
+                <ev-checkbox-group v-model="mv">
+                  <ul v-if="filteredItems.length" class="ev-select-dropbox-ul">
                     <li
                       v-for="(item, idx) in filteredItems"
                       :key="`${item.value}_${idx}`"
                       class="ev-select-dropbox-item"
                       :class="{
                         selected: selectedItemClass(item.value),
-                        disabled: item.disabled
-                    }"
+                        disabled: item.disabled,
+                      }"
                       :title="item.name"
-                      @click.self.prevent="item.disabled
-                        ? [] : [clickItem(item.value), changeDropboxPosition()]"
+                      @click.self.prevent="
+                        item.disabled
+                          ? []
+                          : [clickItem(item.value), changeDropboxPosition()]
+                      "
                     >
                       <ev-checkbox
                         :label="item.value"
                         :disabled="item.disabled"
                       >
-                        <i
-                          v-if="item.iconClass"
-                          :class="item.iconClass"
-                        />
+                        <i v-if="item.iconClass" :class="item.iconClass" />
                         {{ item.name }}
                       </ev-checkbox>
                     </li>
@@ -194,30 +181,27 @@
                 </ev-checkbox-group>
               </template>
               <template v-else>
-                <ul
-                  v-if="filteredItems.length"
-                  class="ev-select-dropbox-ul"
-                >
+                <ul v-if="filteredItems.length" class="ev-select-dropbox-ul">
                   <li
                     v-for="(item, idx) in filteredItems"
                     :key="`${item.value}_${idx}`"
                     class="ev-select-dropbox-item"
                     :class="{
-                    selected: selectedItemClass(item.value),
-                    disabled: item.disabled
-                  }"
+                      selected: selectedItemClass(item.value),
+                      disabled: item.disabled,
+                    }"
                     :title="item.name"
-                    @click.stop.prevent="item.disabled
-                        ? [] : [clickItem(item.value), changeDropboxPosition()]"
+                    @click.stop.prevent="
+                      item.disabled
+                        ? []
+                        : [clickItem(item.value), changeDropboxPosition()]
+                    "
                   >
                     <ev-checkbox
                       :model-value="mv === item.value"
                       :disabled="item.disabled"
                     >
-                      <i
-                        v-if="item.iconClass"
-                        :class="item.iconClass"
-                      />
+                      <i v-if="item.iconClass" :class="item.iconClass" />
                       {{ item.name }}
                     </ev-checkbox>
                   </li>
@@ -226,30 +210,24 @@
             </div>
           </template>
           <template v-else>
-            <div
-              ref="itemWrapper"
-              class="ev-select-dropbox-list"
-            >
-              <ul
-                v-if="filteredItems.length"
-                class="ev-select-dropbox-ul"
-              >
+            <div ref="itemWrapper" class="ev-select-dropbox-list">
+              <ul v-if="filteredItems.length" class="ev-select-dropbox-ul">
                 <li
                   v-for="(item, idx) in filteredItems"
                   :key="`${item.value}_${idx}`"
                   class="ev-select-dropbox-item"
                   :class="{
                     selected: selectedItemClass(item.value),
-                    disabled: item.disabled
+                    disabled: item.disabled,
                   }"
                   :title="item.name"
-                  @click.stop.prevent="item.disabled
-                        ? [] : [clickItem(item.value), changeDropboxPosition()]"
+                  @click.stop.prevent="
+                    item.disabled
+                      ? []
+                      : [clickItem(item.value), changeDropboxPosition()]
+                  "
                 >
-                  <i
-                    v-if="item.iconClass"
-                    :class="item.iconClass"
-                  />
+                  <i v-if="item.iconClass" :class="item.iconClass" />
                   {{ item.name }}
                 </li>
               </ul>
@@ -367,6 +345,7 @@ export default {
       selectedItemClass,
       allCheck,
       changeAllCheck,
+      dropboxWidth,
     } = useDropdown({ mv, changeMv });
 
     return {
@@ -394,6 +373,7 @@ export default {
       selectedItemClass,
       allCheck,
       changeAllCheck,
+      dropboxWidth,
     };
   },
 };
@@ -452,7 +432,7 @@ export default {
     display: flex;
     width: 100%;
     height: 100%;
-    padding: 3px 0;
+    padding: 3px 30px 3px 0;
     min-height: $select-height;
     flex-wrap: wrap;
     align-items: center;
@@ -463,6 +443,7 @@ export default {
 .ev-select-tag {
   display: flex;
   position: relative;
+  max-width: 100%;
   height: 24px;
   padding: 0 19px 0 8px;
   margin: 2px 0 2px 6px;
@@ -478,6 +459,12 @@ export default {
     padding-right: 8px;
   }
 
+  .ev-tag-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .ev-tag-suffix {
     display: flex;
     position: absolute;
@@ -506,7 +493,7 @@ export default {
   background-color: #FCFCFC;
   border: 1px solid #E4E7ED;
   color: #606266;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   z-index: 100;
   cursor: pointer;

package/src/components/select/uses.js

@@ -1,6 +1,6 @@
 import {
   ref, reactive, computed, watch,
-  nextTick, getCurrentInstance,
+  nextTick, getCurrentInstance, onMounted, onUnmounted,
 } from 'vue';
 import {
   getRegExp,
@@ -115,6 +115,8 @@ export const useDropdown = (param) => {
   const selectWrapper = ref(null);
   const dropbox = ref(null);
   const itemWrapper = ref(null);
+  const dropboxWidth = ref('100%');
+  const initialDropboxWidth = ref(null);
   const dropboxPosition = reactive({
     top: 0,
   });
@@ -185,15 +187,57 @@ export const useDropdown = (param) => {
     }
   };
 
+  const calculateDropboxWidth = async () => {
+    if (itemWrapper.value && dropbox.value) {
+      await nextTick();
+
+      if (initialDropboxWidth.value === null) {
+        initialDropboxWidth.value = dropbox.value.offsetWidth;
+      }
+
+      const items = itemWrapper.value.querySelectorAll('.ev-select-dropbox-item');
+      let maxWidth = 0;
+      items.forEach((item) => {
+        const itemWidth = item.scrollWidth;
+        if (itemWidth > maxWidth) {
+          maxWidth = itemWidth;
+        }
+      });
+
+      const windowWidth = window.innerWidth;
+      const dropboxRect = dropbox.value.getBoundingClientRect();
+      const dropboxLeft = dropboxRect.left;
+      const rightMargin = Math.max(windowWidth - (dropboxLeft + maxWidth), 10);
+      const maxAllowedWidth = windowWidth - dropboxLeft - rightMargin - 10;
+
+      const finalWidth = Math.max(Math.min(maxWidth, maxAllowedWidth), initialDropboxWidth.value);
+
+      dropboxWidth.value = `${Math.max(finalWidth, 100)}px`;
+    } else {
+      dropboxWidth.value = '100%';
+    }
+  };
+
+
   watch(
     () => isDropbox.value,
-    (cur) => {
+    async (cur) => {
       if (cur) {
-        scrollToSelectedItem();
+        await scrollToSelectedItem();
+        await calculateDropboxWidth();
       }
     },
   );
 
+  watch(
+    () => filteredItems.value,
+    async () => {
+      await changeDropboxPosition();
+      await calculateDropboxWidth();
+    },
+  );
+
+
   if (props.filterable) {
     watch(
       () => filteredItems.value,
@@ -286,6 +330,14 @@ export const useDropdown = (param) => {
     }
   });
 
+  onMounted(() => {
+    window.addEventListener('resize', calculateDropboxWidth);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', calculateDropboxWidth);
+  });
+
   return {
     select,
     selectWrapper,
@@ -303,5 +355,6 @@ export const useDropdown = (param) => {
     selectedItemClass,
     allCheck,
     changeAllCheck,
+    dropboxWidth,
   };
 };