evui 3.4.32 → 3.4.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.32",
+  "version": "3.4.34",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",
@@ -27,7 +27,8 @@
     "vue-resize-observer": "^2.0.15",
     "vue3-observe-visibility": "^0.1.2",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.0-0",
+    "bignumber.js": "^9.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

package/src/common/utils.bignumber.js

@@ -0,0 +1,67 @@
+import BigNumber from 'bignumber.js';
+
+/**
+ * Convert Number to BigNumber
+ * @param {Number} value
+ * @return {BigNumber}
+ */
+function toBigNumber(value) { return new BigNumber(value); }
+
+/**
+ * plus(+)
+ * @param {Number} num1
+ * @param {Number} num2
+ * @return {Number}
+ */
+function bnPlus(num1, num2) {
+  return toBigNumber(num1).plus(toBigNumber(num2)).toNumber();
+}
+
+/**
+ * minus(-)
+ * @param {Number} num1
+ * @param {Number} num2
+ * @return {Number}
+ */
+function bnMinus(num1, num2) {
+  return toBigNumber(num1).minus(toBigNumber(num2)).toNumber();
+}
+
+/**
+ * multiply(*)
+ * @param {Number} num1
+ * @param {Number} num2
+ * @return {Number}
+ */
+function bnMultiply(num1, num2) {
+  return toBigNumber(num1).multipliedBy(toBigNumber(num2)).toNumber();
+}
+
+/**
+ * divide(/)
+ * @param {Number} dividend
+ * @param {Number} divisor
+ * @return {Number}
+ */
+function bnDivide(dividend, divisor) {
+  return toBigNumber(dividend).dividedBy(toBigNumber((divisor))).toNumber();
+}
+
+/**
+ * floor
+ * @param {Number} num
+ * @param {Number} decimal
+ * @return {Number}
+ */
+function bnFloor(num, decimal) {
+  return toBigNumber(num).decimalPlaces(decimal, BigNumber.ROUND_DOWN).toNumber();
+}
+
+export {
+  toBigNumber,
+  bnPlus,
+  bnMinus,
+  bnMultiply,
+  bnDivide,
+  bnFloor,
+};

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/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

@@ -801,6 +801,7 @@ export default {
       contextMenuItems: [],
       columnMenu: null,
       columnMenuItems: [],
+      hiddenColumnMenuItem: props.option.hiddenColumnMenuItem || {},
       customContextMenu: props.option.customContextMenu || [],
       gridSettingMenu: null,
       gridSettingContextMenuItems: [],

package/src/components/grid/GridSummary.vue

@@ -53,9 +53,9 @@
             </div>
             <div
               v-else
-              :title="getSummaryValue(column, column.summaryType)"
+              :title="getSummaryValue(column)"
             >
-              {{ getSummaryValue(column, column.summaryType)}}
+              {{ getSummaryValue(column)}}
             </div>
           </span>
           <span
@@ -71,6 +71,7 @@
 <script>
 import { computed, watch, ref, nextTick } from 'vue';
 import { numberWithComma } from '@/common/utils';
+import { bnDivide, bnFloor, bnPlus } from '@/common/utils.bignumber';
 
 export default {
   name: 'EvGridSummary',
@@ -101,77 +102,119 @@ export default {
     },
   },
   setup(props) {
+    const DECIMAL = {
+      max: 20,
+      default: 3,
+    };
     const summaryRef = ref();
     const ROW_DATA_INDEX = 2;
     const stores = computed(() => props.stores);
     const columns = computed(() => props.orderedColumns);
     const showCheckbox = computed(() => props.useCheckbox);
     const styleInfo = computed(() => props.styleOption);
+
+    const getValidDecimal = (decimal) => {
+      if (decimal == null || decimal < 0) {
+        return DECIMAL.default;
+      }
+
+      if (decimal > DECIMAL.max) {
+        return DECIMAL.max;
+      }
+
+      return decimal;
+    };
+
     const getConvertValue = (column, value) => {
+      if (typeof value === 'string' && value.length === 0) {
+        return value;
+      }
+
+      const { type, decimal } = column;
       let convertValue = value;
 
-      if (column.type === 'number') {
+      if (type === 'number') {
         convertValue = numberWithComma(value);
         convertValue = convertValue === false ? value : convertValue;
-      } else if (column.type === 'float') {
-        const floatValue = convertValue.toFixed(column.decimal ?? 3);
+      } else if (type === 'float') {
+        const floatValue = convertValue.toFixed(getValidDecimal(decimal ?? DECIMAL.default));
         convertValue = floatValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       }
 
       return convertValue;
     };
+
     const getColumnIndex = field => columns.value.findIndex(column => column.field === field);
-    const getSummaryValue = (column, summaryType) => {
+    const getSummaryValue = (column) => {
+      const {
+        type,
+        field,
+        summaryType,
+        summaryDecimal,
+        summaryOnlyTopParent,
+      } = column;
+
       let result = '';
-      const columnIndex = getColumnIndex(column.field);
+      const columnIndex = getColumnIndex(field);
       if (columnIndex >= 0) {
         if (summaryType === 'count') {
           return stores.value.store.length;
         }
-        if (column.type === 'number' || column.type === 'float') {
+        if (type === 'number' || type === 'float') {
           let columnValues = [];
           if (props.isTree) {
             columnValues = stores.value.store.reduce((acc, cur) => {
-                if (column.summaryOnlyTopParent) {
-                  if (!cur.parent) {
-                    acc.push(cur.data?.[column.field]);
-                  }
-                } else {
-                  acc.push(cur.data?.[column.field]);
+              if (summaryOnlyTopParent) {
+                if (!cur.parent) {
+                  acc.push(cur.data?.[field]);
                 }
-                return acc;
-              }, []);
+              } else {
+                acc.push(cur.data?.[field]);
+              }
+              return acc;
+            }, []);
           } else {
             columnValues = stores.value.store.map(row => row[ROW_DATA_INDEX][columnIndex]);
           }
           switch (summaryType) {
-            case 'sum':
-              result = columnValues.reduce((prev, curr) => {
+            case 'sum': {
+              const sumValue = columnValues.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!Number.isNaN(value)) {
-                  return prev + value;
+                  return bnPlus(prev, value);
                 }
                 return prev;
               }, 0);
+
+              result = sumValue && bnFloor(
+                sumValue, getValidDecimal(summaryDecimal ?? DECIMAL.default),
+              );
               break;
-            case 'average':
-              result = columnValues.reduce((prev, curr) => {
+            }
+            case 'average': {
+              const sumValue = columnValues.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!Number.isNaN(value)) {
-                  return prev + value;
+                  return bnPlus(prev, value);
                 }
                 return prev;
-              }, 0) / columnValues.length;
-              if (result % 1 !== 0) {
-                result = result.toFixed(1);
-              }
+              }, 0);
+              result = sumValue && bnFloor(
+                bnDivide(sumValue, columnValues.length),
+                getValidDecimal(summaryDecimal ?? DECIMAL.default),
+              );
               break;
-            case 'max':
-              result = Math.max(...columnValues);
+            }
+            case 'max': {
+              const filteredNullValues = columnValues.filter(value => value != null);
+              result = filteredNullValues.length ? Math.max(...filteredNullValues) : '';
               break;
-            case 'min':
-              result = Math.min(...columnValues);
+            }
+            case 'min': {
+              const filteredNullValues = columnValues.filter(value => value != null);
+              result = filteredNullValues.length ? Math.min(...filteredNullValues) : '';
               break;
+            }
             default:
               break;
           }
@@ -188,10 +231,7 @@ export default {
       fields.forEach((name, idx) => {
         const columnIndex = getColumnIndex(name);
         if (columnIndex >= 0) {
-          const value = getSummaryValue(
-            stores.value.orderedColumns[columnIndex],
-            column.summaryType,
-          );
+          const value = getSummaryValue(stores.value.orderedColumns[columnIndex]);
           result = result.replace(`{${idx}}`, value);
         }
       });

package/src/components/grid/uses.js

@@ -309,7 +309,6 @@ export const resizeEvent = (params) => {
     const minWidth = isRenderer(stores.orderedColumns[columnIndex])
       ? resizeInfo.rendererMinWidth : resizeInfo.minWidth;
     const columnRect = columnEl.getBoundingClientRect();
-    const maxRight = bodyEl.getBoundingClientRect().right - headerLeft;
     const resizeLineEl = elementInfo.resizeLine;
     const minLeft = columnRect.left - headerLeft + minWidth;
     const startLeft = columnRect.right - headerLeft;
@@ -324,9 +323,7 @@ export const resizeEvent = (params) => {
     const handleMouseMove = (evt) => {
       const deltaLeft = evt.clientX - startMouseLeft;
       const proxyLeft = startLeft + deltaLeft;
-      let resizeWidth = Math.max(minLeft, proxyLeft);
-
-      resizeWidth = Math.min(maxRight, resizeWidth);
+      const resizeWidth = Math.max(minLeft, proxyLeft);
 
       resizeLineEl.style.left = `${resizeWidth}px`;
     };
@@ -1025,21 +1022,19 @@ export const contextMenuEvent = (params) => {
       const sortable = column.sortable === undefined ? true : column.sortable;
       const filterable = filterInfo.isFiltering
       && column.filterable === undefined ? true : column.filterable;
-      if (!sortable && !filterable) {
-        contextInfo.columnMenuItems = [];
-        return;
-      }
-      contextInfo.columnMenuItems = [
+      const columnMenuItems = [
         {
           text: 'Ascending',
           iconClass: 'ev-icon-allow2-up',
           disabled: !sortable,
+          hidden: contextInfo.hiddenColumnMenuItem?.ascending,
           click: () => onSort(column, 'asc'),
         },
         {
           text: 'Descending',
           iconClass: 'ev-icon-allow2-down',
           disabled: !sortable,
+          hidden: contextInfo.hiddenColumnMenuItem?.descending,
           click: () => onSort(column, 'desc'),
         },
         {
@@ -1062,14 +1057,21 @@ export const contextMenuEvent = (params) => {
             filterInfo.filteringColumn = column;
           },
           disabled: !filterable,
+          hidden: contextInfo.hiddenColumnMenuItem?.filter,
         },
         {
           text: 'Hide',
           iconClass: 'ev-icon-visibility-off',
           disabled: !useGridSetting.value || stores.orderedColumns.length === 1,
+          hidden: contextInfo.hiddenColumnMenuItem?.hide,
           click: () => setColumnHidden(column.field),
         },
       ];
+      contextInfo.columnMenuItems = [];
+      if (!sortable && !filterable) {
+        return;
+      }
+      contextInfo.columnMenuItems = columnMenuItems.filter(item => !item.hidden);
     }
   };
   /**

package/src/components/select/uses.js

@@ -277,7 +277,11 @@ export const useDropdown = (param) => {
 
   watch(() => mv.value, (curr) => {
     if (props.multiple && props.checkable) {
-      allCheck.value = curr.length === filteredItems.value.filter(item => !item.disabled).length;
+      if (curr.length === 0) {
+        allCheck.value = false;
+      } else {
+        allCheck.value = curr.length === filteredItems.value.filter(item => !item.disabled).length;
+      }
       changeDropboxPosition();
     }
   });