evui 3.3.15 → 3.3.18

package/package.json

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

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

@@ -189,8 +189,8 @@ class EvChart {
             break;
           }
           case 'bar': {
-            const { thickness, borderRadius } = this.options;
-            series.draw({ thickness, borderRadius, showSeriesCount, showIndex, ...opt });
+            const { thickness, cPadRatio, borderRadius } = this.options;
+            series.draw({ thickness, cPadRatio, borderRadius, showSeriesCount, showIndex, ...opt });
             if (series.show) {
               showIndex++;
             }
@@ -443,15 +443,31 @@ class EvChart {
     const { width, height } = this.getChartDOMRect();
 
     const padding = this.options.padding;
+    const xAxisTitleOpt = this.options.axesX[0]?.title;
+    const yAxisTitleOpt = this.options.axesY[0]?.title;
+    const titleMargin = 10;
+
+    let xAxisTitleHeight = 0;
+    if (xAxisTitleOpt?.use && xAxisTitleOpt?.text) {
+      const fontSize = isNaN(xAxisTitleOpt?.fontSize) ? 12 : xAxisTitleOpt?.fontSize;
+      xAxisTitleHeight = fontSize + titleMargin;
+    }
+
+    let yAxisTitleHeight = 0;
+    if (yAxisTitleOpt?.use && yAxisTitleOpt?.text) {
+      const fontSize = isNaN(yAxisTitleOpt?.fontSize) ? 12 : yAxisTitleOpt?.fontSize;
+      yAxisTitleHeight = fontSize + titleMargin;
+    }
+
     const horizontalPadding = padding.left + padding.right;
-    const verticalPadding = padding.top + padding.bottom;
+    const verticalPadding = padding.top + padding.bottom + xAxisTitleHeight + yAxisTitleHeight;
     const chartWidth = width > horizontalPadding ? width - horizontalPadding : width;
     const chartHeight = height > verticalPadding ? height - verticalPadding : height;
 
     const x1 = padding.left;
     const x2 = Math.max(width - padding.right, x1 + 2);
-    const y1 = padding.top;
-    const y2 = Math.max(height - padding.bottom, y1 + 2);
+    const y1 = padding.top + yAxisTitleHeight;
+    const y2 = Math.max(height - padding.bottom - xAxisTitleHeight, y1 + 2);
 
     return {
       x1,

package/src/components/chart/element/element.bar.js

@@ -67,7 +67,14 @@ class Bar {
 
     const dArea = isHorizontal ? yArea : xArea;
     const cArea = dArea / (this.data.length || 1);
-    const cPad = 2;
+
+    let cPad;
+    const isUnableToDrawCategoryPadding = param.cPadRatio >= 1 || param.cPadRatio <= 0;
+    if (isUnableToDrawCategoryPadding) {
+      cPad = 2;
+    } else {
+      cPad = Math.max((dArea * (param.cPadRatio / 2)) / this.data.length, 2);
+    }
 
     let bArea;
     let w;

package/src/components/chart/element/element.heatmap.js

@@ -60,13 +60,14 @@ class HeatMap {
   }
 
   getColorIndex(value) {
-    const existError = this.valueOpt.existError;
+    const { existError, min, interval, decimalPoint } = this.valueOpt;
     const maxIndex = this.colorAxis.length - 1;
     if (existError && value < 0) {
       return maxIndex;
     }
 
-    const colorIndex = Math.floor(value / this.valueOpt.interval);
+    const colorIndex = Math.floor(+(value - min).toFixed(decimalPoint) / interval);
+
     if (colorIndex >= maxIndex) {
       return existError ? maxIndex - 1 : maxIndex;
     }
@@ -292,9 +293,12 @@ class HeatMap {
     const y = gdata.yp;
     const w = gdata.w;
     const h = gdata.h;
+    const cId = gdata.cId;
+
+    const isShow = this.colorAxis.find(({ id }) => id === cId)?.show;
 
     ctx.save();
-    if (x !== null && y !== null) {
+    if (x !== null && y !== null && isShow) {
       const color = gdata.dataColor;
       ctx.strokeStyle = Util.colorStringToRgba(color, 1);
       ctx.fillStyle = Util.colorStringToRgba(color, this.highlight.maxShadowOpacity);

package/src/components/chart/helpers/helpers.constant.js

@@ -102,6 +102,16 @@ export const AXIS_OPTION = {
     fitWidth: false,
     fitDir: 'right',
   },
+  title: {
+    use: false,
+    text: null,
+    fontWeight: 400,
+    fontSize: 12,
+    fontFamily: 'Roboto',
+    textAlign: 'right',
+    fontStyle: 'normal',
+    color: '#808080',
+  },
 };
 
 export const PLOT_LINE_OPTION = {

package/src/components/chart/helpers/helpers.util.js

@@ -127,7 +127,14 @@ export default {
    * @returns {string} computed value
    */
   getLabelStyle(style) {
-    return `normal normal ${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
+    const {
+      fontStyle = 'normal',
+      fontWeight = 'norma',
+      fontSize = '12',
+      fontFamily = 'Roboto',
+    } = style;
+
+    return `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`;
   },
 
   /**

package/src/components/chart/model/model.store.js

@@ -421,6 +421,7 @@ const modules = {
     const data = series.data;
     const colorOpt = this.options.heatMapColor;
     const categoryCnt = colorOpt.categoryCnt;
+    const decimalPoint = colorOpt.decimalPoint;
 
     let minValue;
     let maxValue = 0;
@@ -449,11 +450,21 @@ const modules = {
       });
     }
 
+    let interval = maxValue > minValue ? Math.floor((maxValue - minValue) / categoryCnt) : 1;
+    if ((maxValue - minValue) <= categoryCnt) {
+      if (decimalPoint > 0) {
+        interval = +((maxValue - minValue) / categoryCnt).toFixed(decimalPoint);
+      } else {
+        interval = 1;
+      }
+    }
+
     return {
       min: minValue,
       max: maxValue,
-      interval: Math.ceil((maxValue - minValue) / categoryCnt),
+      interval,
       existError: isExistError,
+      decimalPoint,
     };
   },
 

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

@@ -82,20 +82,40 @@ const modules = {
     Object.values(seriesList).forEach((series) => {
       if (!series.isExistGrp && series.showLegend) {
         const { colorAxis, valueOpt } = series;
-        const { min, max, interval, existError } = valueOpt;
-        const endIndex = colorAxis.length - 1;
-        colorAxis.forEach((colorItem, index) => {
+        const { min, max, interval, existError, decimalPoint } = valueOpt;
+        const length = colorAxis.length;
+        const endIndex = existError ? length - 2 : length - 1;
+        for (let index = 0; index < length; index++) {
+          const colorItem = colorAxis[index];
           const minValue = min + (interval * index);
-          const maxValue = index === endIndex
-            ? max : minValue + interval;
-          const name = existError && index === endIndex ? 'error' : `${minValue} - ${maxValue}`;
+          let maxValue = minValue + interval;
+          if (index < endIndex) {
+            maxValue -= (0.1 ** decimalPoint);
+          } else {
+            maxValue = max + (0.1 ** decimalPoint);
+          }
+
+          let name = `${minValue.toFixed(decimalPoint)} - ${maxValue.toFixed(decimalPoint)}`;
+          if (min === undefined || max === undefined) {
+            if (index === 0) {
+              name = '0';
+            } else {
+              break;
+            }
+          } else if (existError && index === endIndex + 1) {
+            name = 'error';
+          } else if (minValue > max) {
+            break;
+          } else if (interval <= 1 && decimalPoint === 0) {
+            name = minValue;
+          }
 
           this.addLegend({
             cId: colorItem.id,
             color: colorItem.value,
             name,
           });
-        });
+        }
       }
     });
   },

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

@@ -176,12 +176,21 @@ const modules = {
     const boxPadding = { t: 8, b: 8, r: 20, l: 16 };
     const isHorizontal = this.options.horizontal;
     const opt = this.options.tooltip;
+    const valueFormatter = typeof opt.formatter === 'function' ? opt.formatter : opt.formatter?.value;
+    const titleFormatter = opt.formatter?.title;
 
     // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
     if (this.axesX.length && this.axesY.length) {
-      this.tooltipHeaderDOM.textContent = this.options.horizontal
-        ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y)
-        : this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+      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) {
@@ -305,14 +314,14 @@ const modules = {
 
       // 3. Draw value
       let formattedTxt;
-      if (opt.formatter) {
+      if (valueFormatter) {
         if (this.options.type === 'pie') {
-          formattedTxt = opt.formatter({
+          formattedTxt = valueFormatter({
             value,
             name,
           });
         } else {
-          formattedTxt = opt.formatter({
+          formattedTxt = valueFormatter({
             x: this.options.horizontal ? value : hitItem.x,
             y: this.options.horizontal ? hitItem.y : value,
             name,
@@ -320,7 +329,7 @@ const modules = {
         }
       }
 
-      if (!opt.formatter || typeof formattedTxt !== 'string') {
+      if (!valueFormatter || typeof formattedTxt !== 'string') {
         formattedTxt = numberWithComma(value);
       }
 
@@ -356,13 +365,26 @@ const modules = {
     const boxPadding = { t: 8, b: 8, r: 20, l: 16 };
     const isHorizontal = this.options.horizontal;
     const opt = this.options.tooltip;
-    let xValue = '';
-    let yValue = '';
+    const valueFormatter = typeof opt.formatter === 'function' ? opt.formatter : opt.formatter?.value;
+    const titleFormatter = opt.formatter?.title;
+
+    const colorAxis = Object.values(this.seriesList)[0].colorAxis;
+    const isShow = colorAxis.find(({ id }) => id === hitItem.cId)?.show;
+    if (!isShow) {
+      this.tooltipClear();
+      return;
+    }
 
     // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
     if (this.axesX.length) {
-      xValue = this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
-      this.tooltipHeaderDOM.textContent = xValue;
+      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) {
@@ -403,21 +425,20 @@ const modules = {
     // 2. Draw value y names
     ctx.textBaseline = 'Bottom';
     if (this.axesY.length) {
-      yValue = this.axesY[hitAxis.y].getLabelFormat(hitItem.y);
-      ctx.fillText(yValue, itemX + COLOR_MARGIN, itemY);
+      ctx.fillText(this.axesY[hitAxis.y].getLabelFormat(hitItem.y), itemX + COLOR_MARGIN, itemY);
     }
 
     // 3. Draw value
     let formattedTxt = itemValue;
-    if (opt.formatter) {
-      formattedTxt = opt.formatter({
-        x: xValue,
-        y: yValue,
+    if (valueFormatter) {
+      formattedTxt = valueFormatter({
+        x: hitItem.x,
+        y: hitItem.y,
         value: itemValue,
       });
     }
 
-    if ((!opt.formatter || typeof formattedTxt !== 'string') && itemValue !== 'error') {
+    if ((!valueFormatter || typeof formattedTxt !== 'string') && itemValue !== 'error') {
       formattedTxt = numberWithComma(itemValue);
     }
 
@@ -557,15 +578,16 @@ const modules = {
 
       // 3. Draw value
       let formattedTxt;
-      if (opt.formatter) {
-        formattedTxt = opt.formatter({
+      const formatter = typeof opt.formatter === 'function' ? opt.formatter : opt.formatter?.value;
+      if (formatter) {
+        formattedTxt = formatter({
           x: xValue,
           y: yValue,
           name,
         });
       }
 
-      if (!opt.formatter || typeof formattedTxt !== 'string') {
+      if (!formatter || typeof formattedTxt !== 'string') {
         const formattedXValue = xAxisOpt.type === 'time'
           ? dayjs(xValue).format(xAxisOpt.timeFormat)
           : numberWithComma(xValue);

package/src/components/chart/scale/scale.js

@@ -156,6 +156,52 @@ class Scale {
     };
   }
 
+  /**
+   * Draw Axis Title
+   *
+   * @param {object} chartRect      min/max information
+   * @param {object} labelOffset    label offset information
+   *
+   * @returns {undefined}
+   */
+  drawAxisTitle(chartRect, labelOffset) {
+    const titleOpt = this.title;
+
+    if (!titleOpt?.use || isNaN(titleOpt.fontSize)) {
+      return;
+    }
+
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.font = Util.getLabelStyle(titleOpt);
+    ctx.fillStyle = titleOpt.color;
+    ctx.textAlign = titleOpt.textAlign;
+
+    const axisLinePosition = {
+      xLeft: chartRect.x1 + labelOffset.left,
+      xRight: chartRect.x2 - labelOffset.right,
+      yTop: chartRect.y1,
+    };
+
+    let titleXPos;
+    let titleYPos;
+
+    const margin = 10;
+    if (this.type === 'x') {
+      titleXPos = axisLinePosition.xRight;
+      titleYPos = chartRect.y2 + titleOpt.fontSize + margin;
+    } else {
+      titleYPos = axisLinePosition.yTop - titleOpt.fontSize - margin;
+      titleXPos = axisLinePosition.xLeft;
+    }
+
+    if (titleXPos > 0 && titleYPos > 0) {
+      ctx.fillText(titleOpt.text, titleXPos, titleYPos);
+    }
+
+    ctx.restore();
+  }
+
   /**
    * Draw axis
    * @param {object} chartRect      min/max information
@@ -186,6 +232,8 @@ class Scale {
 
     let aliasPixel;
 
+    this.drawAxisTitle(chartRect, labelOffset);
+
     // label font 설정
     ctx.font = Util.getLabelStyle(this.labelStyle);
     ctx.fillStyle = this.labelStyle.color;

package/src/components/chart/scale/scale.step.js

@@ -89,6 +89,8 @@ class StepScale extends Scale {
     const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
     const maxWidth = chartRect.chartWidth / (this.labels.length + 2);
 
+    this.drawAxisTitle(chartRect, labelOffset);
+
     if (this.labelStyle?.show) {
       // label font 설정
       ctx.font = Util.getLabelStyle(this.labelStyle);

package/src/components/chart/scale/scale.time.category.js

@@ -132,6 +132,8 @@ class TimeCategoryScale extends Scale {
     const offsetPoint = aPos[this.units.rectOffset(this.position)];
     const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
 
+    this.drawAxisTitle(chartRect, labelOffset);
+
     // label font 설정
     ctx.font = Util.getLabelStyle(this.labelStyle);
 

package/src/components/chart/uses.js

@@ -43,6 +43,7 @@ const DEFAULT_OPTIONS = {
   width: '100%',
   height: '100%',
   thickness: 1,
+  cPadRatio: 0,
   borderRadius: 0,
   combo: false,
   tooltip: {
@@ -116,6 +117,7 @@ const DEFAULT_OPTIONS = {
       opacity: 1,
     },
     error: '#FF0000',
+    decimalPoint: 0,
   },
 };
 

package/src/components/grid/uses.js

@@ -874,12 +874,14 @@ export const contextMenuEvent = (params) => {
     } else {
       rowIndex = target.parentElement.parentElement.dataset.index;
     }
-
+    let clickedRow;
     if (rowIndex) {
-      const rowData = stores.viewStore[+rowIndex][ROW_DATA_INDEX];
-      selectInfo.selectedRow = rowData;
+      clickedRow = stores.viewStore.find(row => row[ROW_INDEX] === +rowIndex)?.[ROW_DATA_INDEX];
+    }
+    if (clickedRow) {
+      selectInfo.selectedRow = clickedRow;
       setContextMenu();
-      emit('update:selected', rowData);
+      emit('update:selected', clickedRow);
     } else {
       selectInfo.selectedRow = [];
       setContextMenu(false);

package/src/components/menu/Menu.vue

@@ -6,6 +6,7 @@
       :item="menu"
       :selected-item="modelValue"
       :expandable="expandable"
+      :disabled="disabled"
       :comp="component"
       @click="clickMenu"
     />
@@ -34,14 +35,21 @@ export default {
       type: Boolean,
       default: true,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
     const prevMenuItem = ref(props.items.filter(item => props.modelValue === item.value));
-    const clickMenu = (newMenuItem) => {
-      emit('update:modelValue', newMenuItem.value);
-      emit('change', newMenuItem, prevMenuItem.value);
-      prevMenuItem.value = newMenuItem;
+    const clickMenu = (params) => {
+      if (!params.disabled) {
+        const newMenuItem = params.item;
+        emit('update:modelValue', newMenuItem.value);
+        emit('change', newMenuItem, prevMenuItem.value);
+        prevMenuItem.value = newMenuItem;
+      }
     };
     const component = MenuItem;
     return {

package/src/components/menu/MenuItem.vue

@@ -4,14 +4,17 @@
     :class="[
       'ev-menu-item',
        `depth${depth}`,
-      { active: item.value === selectedItem },
+      { active: !item.disabled && item.value === selectedItem },
     ]">
     <div
       :class="[
         'ev-menu-title',
-        { 'expandable': hasChild && expandable },
+        {
+          'expandable': hasChild && expandable,
+          'disabled': item.disabled,
+        },
       ]"
-      @click="clickMenu(item, depth)"
+      @click="clickMenu({item, depth, disabled: item.disabled})"
     >
       <i
         v-if="!!item.iconClass"
@@ -43,6 +46,7 @@
           :item="menu"
           :selected-item="selectedItem"
           :expandable="expandable"
+          :disabled="disabled"
           :comp="comp"
           @click="clickMenu"
         />
@@ -77,6 +81,9 @@ export default {
         } else if (obj.hidden !== undefined && typeof obj.hidden !== 'boolean') {
           console.warn('[EVUI][Menu] hidden attribute must be \'Boolean\' type.');
           return false;
+        } else if (obj.disabled !== undefined && typeof obj.disabled !== 'boolean') {
+          console.warn('[EVUI][Menu] disabled attribute must be \'Boolean\' type.');
+          return false;
         }
         return true;
       },
@@ -93,6 +100,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -100,13 +111,13 @@ export default {
     const isExpand = ref(defaultExpand);
     const hasChild = computed(() => !!props.item.children && !!props.item.children.length);
 
-    const clickMenu = (menuItem, depth) => {
-      if (hasChild.value && depth === props.depth) {
+    const clickMenu = (params) => {
+      if (hasChild.value && params.depth === props.depth) {
         if (props.expandable) {
           isExpand.value = !isExpand.value;
         }
       } else {
-        emit('click', menuItem, props.depth);
+        emit('click', params);
       }
     };
 
@@ -149,6 +160,13 @@ export default {
   &.expandable {
     padding-right: 27px;
   }
+  &.disabled {
+    color: #848484 !important;
+    &:hover {
+      cursor: not-allowed;
+      color: #848484 !important;
+    }
+  }
   .list-expend-icon {
     position: absolute;
     top: 50%;

package/src/components/pagination/pageButton.vue

@@ -7,7 +7,6 @@
     }"
     v-bind="$attrs"
     :aria-current="page.isCurrent"
-    @click.prevent="page.click"
   >
     <slot>{{ page.number }}</slot>
   </span>