evui 3.4.33 → 3.4.35

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "evui",
-  "version": "3.4.33",
+  "version": "3.4.35",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",
+  "engines": {
+    "node": "<=12.0.0"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

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

@@ -737,6 +737,7 @@ const modules = {
             items[sId] = item;
 
             const formattedTxt = this.getFormattedTooltipValue({
+              seriesId: sId,
               seriesName: sName,
               value: gdata,
               itemData: item.data,
@@ -774,12 +775,13 @@ const modules = {
 
   /**
    * get formatted value for tooltip
+   * @param seriesId
    * @param seriesName
    * @param value
    * @param itemData
    * @returns {string}
    */
-  getFormattedTooltipValue({ seriesName, value, itemData }) {
+  getFormattedTooltipValue({ seriesId, seriesName, value, itemData }) {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const tooltipOpt = opt.tooltip;
@@ -794,18 +796,21 @@ const modules = {
           value,
           name: seriesName,
           percentage: itemData?.percentage,
+          seriesId,
         });
       } else if (opt.type === 'heatMap') {
         formattedTxt = tooltipValueFormatter({
           x: itemData?.x,
           y: itemData?.y,
           value: value > -1 ? value : 'error',
+          seriesId,
         });
       } else {
         formattedTxt = tooltipValueFormatter({
           x: isHorizontal ? value : itemData?.x,
           y: isHorizontal ? itemData?.y : value,
           name: seriesName,
+          seriesId,
         });
       }
     }
@@ -848,6 +853,7 @@ const modules = {
         );
 
         const formattedValue = this.getFormattedTooltipValue({
+          seriesId: sId,
           seriesName: series.name,
           value: hasData?.o,
           itemData: hasData,

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

@@ -6,6 +6,7 @@ import Util from '../helpers/helpers.util';
 const LINE_SPACING = 8;
 const VALUE_MARGIN = 50;
 const SCROLL_WIDTH = 17;
+const BODY_PADDING = 8;
 
 const modules = {
   /**
@@ -73,7 +74,7 @@ const modules = {
     const {
       top = 0,
       right = 20,
-      bottom = 8,
+      bottom = 3,
       left = 16,
     } = this.options?.tooltip?.rowPadding ?? {};
 
@@ -104,6 +105,30 @@ const modules = {
     const opt = this.options.tooltip;
     const seriesColorMarginRight = this.getColorMargin();
 
+    // Draw hidden tooltip header DOM to calculate height
+    const sId = hitInfo.hitId;
+    const hitItem = items[sId].data;
+    const hitAxis = items[sId].axis;
+    const titleFormatter = opt.formatter?.title;
+
+    if (this.axesX.length && this.axesY.length && opt.showHeader) {
+      if (titleFormatter) {
+        this.tooltipHeaderDOM.textContent = titleFormatter({
+          x: hitItem.x,
+          y: hitItem.y,
+        });
+      } else {
+        this.tooltipHeaderDOM.textContent = this.options.horizontal
+          ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y)
+          : this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+      }
+    }
+
+    if (opt.textOverflow) {
+      this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`);
+    }
+
+    this.tooltipHeaderDOM.style.visibility = 'hidden';
 
     // calculate and decide width of canvas El(contentsWidth)
     ctx.save();
@@ -173,19 +198,20 @@ const modules = {
     this.tooltipHeaderDOM.style.height = 'auto';
     this.tooltipDOM.style.height = 'auto';
     this.tooltipBodyDOM.style.height = `${contentsHeight + 6}px`;
-
+    this.tooltipDOM.style.display = 'block';
 
     // set tooltipDOM's positions
     const bodyWidth = document.body.clientWidth;
     const bodyHeight = document.body.clientHeight;
     const distanceMouseAndTooltip = 20;
-    const tooltipDOMSize = this.tooltipDOM?.getBoundingClientRect();
+    const tooltipDOMHeight = this.tooltipDOM?.offsetHeight
+      || this.tooltipHeaderDOM?.offsetHeight + contentsHeight + BODY_PADDING;
     const maximumPosX = bodyWidth - contentsWidth - distanceMouseAndTooltip;
-    const maximumPosY = bodyHeight - tooltipDOMSize.height - distanceMouseAndTooltip;
+    const maximumPosY = bodyHeight - tooltipDOMHeight - distanceMouseAndTooltip;
     const expectedPosX = mouseX + distanceMouseAndTooltip;
     const expectedPosY = mouseY + distanceMouseAndTooltip;
     const reversedPosX = mouseX - contentsWidth - distanceMouseAndTooltip;
-    const reversedPosY = mouseY - tooltipDOMSize.height - distanceMouseAndTooltip;
+    const reversedPosY = mouseY - tooltipDOMHeight - distanceMouseAndTooltip;
     this.tooltipDOM.style.left = expectedPosX > maximumPosX
       ? `${reversedPosX}px`
       : `${expectedPosX}px`;
@@ -225,39 +251,21 @@ const modules = {
   drawTooltip(hitInfo, context) {
     const ctx = context;
     const items = hitInfo.items;
-    const sId = hitInfo.hitId;
-    const hitItem = items[sId].data;
-    const hitAxis = items[sId].axis;
     const [, maxValue] = hitInfo.maxTip;
     const seriesKeys = this.alignSeriesList(Object.keys(items));
     const boxPadding = this.getBoxPadding();
     const isHorizontal = this.options.horizontal;
     const opt = this.options.tooltip;
-    const titleFormatter = opt.formatter?.title;
     const textHeight = this.getTextHeight();
     const seriesColorMarginRight = this.getColorMargin();
 
-    // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
-    if (this.axesX.length && this.axesY.length) {
-      if (titleFormatter) {
-        this.tooltipHeaderDOM.textContent = titleFormatter({
-          x: hitItem.x,
-          y: hitItem.y,
-        });
-      } else {
-        this.tooltipHeaderDOM.textContent = this.options.horizontal
-          ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y)
-          : this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
-      }
+    // draw Tooltip header DOM
+    if (this.axesX.length && this.axesY.length && opt.showHeader) {
+      this.tooltipHeaderDOM.style.visibility = 'visible';
     } else {
-      // Pie Chart
       this.tooltipHeaderDOM.style.display = 'none';
     }
 
-    if (opt.textOverflow) {
-      this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`);
-    }
-
     // draw tooltip contents (series, value combination)
     let x = 2;
     let y = 2;
@@ -399,7 +407,6 @@ const modules = {
     const boxPadding = this.getBoxPadding();
     const isHorizontal = this.options.horizontal;
     const opt = this.options.tooltip;
-    const titleFormatter = opt.formatter?.title;
     const series = Object.values(this.seriesList)[0];
     const textHeight = this.getTextHeight();
     const seriesColorMarginRight = this.getColorMargin();
@@ -423,20 +430,11 @@ const modules = {
       return;
     }
 
-    // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
-    if (this.axesX.length) {
-      if (titleFormatter) {
-        this.tooltipHeaderDOM.textContent = titleFormatter({
-          x: hitItem.x,
-          y: hitItem.y,
-        });
-      } else {
-        this.tooltipHeaderDOM.textContent = this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
-      }
-    }
-
-    if (opt.textOverflow) {
-      this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`);
+    // draw Tooltip header DOM
+    if (this.axesX.length && this.axesY.length && opt.showHeader) {
+      this.tooltipHeaderDOM.style.visibility = 'visible';
+    } else {
+      this.tooltipHeaderDOM.style.display = 'none';
     }
 
     this.setTooltipDOMStyle(opt);
@@ -501,6 +499,13 @@ const modules = {
     const textHeight = this.getTextHeight();
     const seriesColorMarginRight = this.getColorMargin();
 
+    // draw Tooltip header DOM
+    if (this.axesX.length && this.axesY.length && opt.showHeader) {
+      this.tooltipHeaderDOM.style.visibility = 'visible';
+    } else {
+      this.tooltipHeaderDOM.style.display = 'none';
+    }
+
     let x = 2;
     let y = 2;
 
@@ -747,30 +752,30 @@ const modules = {
     };
     const mouseXIp = 1; // mouseInterpolation
     const mouseYIp = 10;
+    const options = this.options;
 
     if (offsetX >= (graphPos.x1 - mouseXIp) && offsetX <= (graphPos.x2 + mouseXIp)
       && offsetY >= (graphPos.y1 - mouseYIp) && offsetY <= (graphPos.y2 + mouseYIp)) {
-      if (this.options.horizontal) {
-        ctx.beginPath();
-        ctx.save();
-        ctx.strokeStyle = color;
-        ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+
+      if (options.indicator?.segments) {
+        ctx.setLineDash(options.indicator.segments);
+      }
+
+      if (options.horizontal) {
         ctx.moveTo(graphPos.x1, offsetY + 0.5);
         ctx.lineTo(graphPos.x2, offsetY + 0.5);
-        ctx.stroke();
-        ctx.restore();
-        ctx.closePath();
       } else {
-        ctx.beginPath();
-        ctx.save();
-        ctx.strokeStyle = color;
-        ctx.lineWidth = 1;
         ctx.moveTo(offsetX + 0.5, graphPos.y1);
         ctx.lineTo(offsetX + 0.5, graphPos.y2);
-        ctx.stroke();
-        ctx.restore();
-        ctx.closePath();
       }
+
+      ctx.stroke();
+      ctx.restore();
+      ctx.closePath();
     }
   },
 

package/src/components/chart/uses.js

@@ -107,14 +107,16 @@ const DEFAULT_OPTIONS = {
     },
     rowPadding: {
       top: 0,
-      bottom: 8,
+      bottom: 3,
       right: 20,
       left: 16,
     },
+    showHeader: true,
   },
   indicator: {
     use: true,
     color: '#EE7F44',
+    segments: null,
   },
   maxTip: {
     use: false,

package/src/components/contextMenu/MenuList.vue

@@ -7,7 +7,7 @@
         class="ev-menu-li"
         :class="{ disabled: item.disabled }"
         @click="handleItemClick(item)"
-        @mouseenter="!item.disabled ? mouseenterLi($event, item.children) : (() => {})()"
+        @mouseenter="mouseenterLi($event, item)"
       >
         <i
           v-if="!!item.iconClass"

package/src/components/contextMenu/uses.js

@@ -190,14 +190,14 @@ export const useMenuList = () => {
   /**
    * 항목에 마우스엔터 시 발생하는 이벤트
    * @param e - 마우스 이벤트 (showChild에 넘김)
-   * @param children - 자식 리스트
+   * @param item - 마우스오버된 메뉴
    * @returns null
    */
-  const mouseenterLi = async (e, children) => {
-    if (!children || !Array.isArray(children)) {
+  const mouseenterLi = async (e, item) => {
+    if (!item.children || !Array.isArray(item.children) || item.disabled) {
       hideChild();
     } else {
-      await showChild(e, children);
+      await showChild(e, item.children);
     }
   };
 

package/src/components/grid/Grid.vue

@@ -495,7 +495,7 @@
                   :item="{ row }"
                 />
               </tr>
-             </template>
+            </template>
             <tr v-if="!viewStore.length">
               <td class="is-empty">No records</td>
             </tr>
@@ -672,6 +672,7 @@ export default {
     'sort-column': null,
     'expand-row': null,
     'update:expanded': null,
+    'resize:column': column => column,
   },
   setup(props) {
     // const ROW_INDEX = 0;

package/src/components/grid/uses.js

@@ -176,7 +176,7 @@ export const scrollEvent = (params) => {
 };
 
 export const resizeEvent = (params) => {
-  const { props } = getCurrentInstance();
+  const { props, emit } = getCurrentInstance();
   const {
     resizeInfo,
     elementInfo,
@@ -344,6 +344,7 @@ export const resizeEvent = (params) => {
       resizeInfo.showResizeLine = false;
       document.removeEventListener('mousemove', handleMouseMove);
       onResize();
+      emit('resize:column', stores.orderedColumns[columnIndex]);
     };
 
     document.addEventListener('mousemove', handleMouseMove);

package/src/components/tree/Tree.vue

@@ -14,7 +14,7 @@
       @show-context-menu="getContextMenuFlag"
       @contextmenu.prevent="showContextMenu"
     />
-    <div v-if="!treeNodeData.length">{{ emptyText }}</div>
+    <div v-if="isShowEmptyText">{{ emptyText }}</div>
     <ev-context-menu
       v-if="contextMenuItems.length"
       ref="contextMenu"
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue';
 import TreeNode from './TreeNode';
 
 export default {
@@ -278,6 +278,9 @@ export default {
       });
     }
 
+    const isShowEmptyText = computed(() => !treeNodeData.value.length
+        || treeNodeData.value.every(node => !node.visible));
+
     watch(() => props.data, (newData) => {
       treeNodeData.value = newData;
       allNodeInfo = getAllNodeInfo();
@@ -320,6 +323,7 @@ export default {
       treeNodeData,
       contextMenu,
       component,
+      isShowEmptyText,
       updateCheckedInfo,
       clickContent,
       dblClickContent,