evui 3.3.35 → 3.3.36

package/package.json

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

package/src/components/chart/Chart.vue

@@ -97,51 +97,59 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         }
       };
 
+      watch(() => props.options, (chartOpt) => {
+        const newOpt = getNormalizedOptions(chartOpt);
+
+        const isUpdateLegendType = !isEqual(newOpt.legend.table, evChart.options.legend.table);
+
+        evChart.options = cloneDeep(newOpt);
+
+        evChart.update({
+          updateSeries: false,
+          updateSelTip: { update: false, keepDomain: false },
+          updateLegend: isUpdateLegendType,
+        });
+      }, { deep: true });
+
+      watch(() => props.data, (chartData) => {
+        const newData = getNormalizedData(chartData);
+
+        const isUpdateSeries = !isEqual(newData.series, evChart.data.series)
+            || !isEqual(newData.groups, evChart.data.groups)
+            || props.options.type === 'heatMap';
+
+        const isUpdateData = !isEqual(newData.data, evChart.data);
+
+        evChart.data = cloneDeep(newData);
+
+        evChart.update({
+          updateSeries: isUpdateSeries,
+          updateSelTip: { update: true, keepDomain: false },
+          updateData: isUpdateData,
+        });
+      }, { deep: true });
+
+      watch(() => props.selectedItem, (newValue) => {
+        const chartType = props.options?.type;
+
+        evChart.selectItemByData(newValue, chartType);
+      }, { deep: true });
+
+      watch(() => props.selectedLabel, (newValue) => {
+        if (newValue.dataIndex) {
+          evChart.renderWithSelected(newValue.dataIndex);
+        }
+      }, { deep: true });
+
+      watch(() => props.selectedSeries, (newValue) => {
+        if (newValue.seriesId) {
+          evChart.renderWithSelected(newValue.seriesId);
+        }
+      }, { deep: true });
+
       onMounted(async () => {
         await createChart();
         await drawChart();
-
-        await watch(() => props.options, (chartOpt) => {
-          const newOpt = getNormalizedOptions(chartOpt);
-          const isUpdateLegend = !isEqual(newOpt.legend, evChart.options.legend);
-          evChart.options = cloneDeep(newOpt);
-          evChart.update({
-            updateSeries: false,
-            updateSelTip: { update: false, keepDomain: false },
-            updateLegend: isUpdateLegend,
-          });
-        }, { deep: true });
-
-        await watch(() => props.data, (chartData) => {
-          const newData = getNormalizedData(chartData);
-          const isUpdateSeries = !isEqual(newData.series, evChart.data.series)
-              || !isEqual(newData.groups, evChart.data.groups)
-              || props.options.type === 'heatMap';
-          const isUpdateData = !isEqual(newData.data, evChart.data);
-          evChart.data = cloneDeep(newData);
-          evChart.update({
-            updateSeries: isUpdateSeries,
-            updateSelTip: { update: true, keepDomain: false },
-            updateData: isUpdateData,
-          });
-        }, { deep: true });
-
-        await watch(() => props.selectedItem, (newValue) => {
-          const chartType = props.options?.type;
-          evChart.selectItemByData(newValue, chartType);
-        }, { deep: true });
-
-        await watch(() => props.selectedLabel, (newValue) => {
-          if (newValue.dataIndex) {
-            evChart.renderWithSelected(newValue.dataIndex);
-          }
-        }, { deep: true });
-
-        await watch(() => props.selectedSeries, (newValue) => {
-          if (newValue.seriesId) {
-            evChart.renderWithSelected(newValue.seriesId);
-          }
-        }, { deep: true });
       });
 
       onBeforeUnmount(() => {

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

@@ -792,9 +792,11 @@ class EvChart {
    * @returns {undefined}
    */
   render(hitInfo) {
-    this.clear();
-    this.chartRect = this.getChartRect();
-    this.drawChart(hitInfo);
+    if (this.isInit) {
+      this.clear();
+      this.chartRect = this.getChartRect();
+      this.drawChart(hitInfo);
+    }
   }
 
   /**

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

@@ -112,7 +112,7 @@ const modules = {
      */
     this.onClick = (e) => {
       const args = { e };
-      if (this.options.selectItem.use) {
+      if (this.options.selectItem.use && this.options.selectItem.useClick) {
         const offset = this.getMousePosition(e);
         const hitInfo = this.getItemByPosition(offset, false);
 
@@ -127,14 +127,14 @@ const modules = {
           maxIndex: args.dataIndex,
           acc: args.acc,
         } = hitInfo);
-      } else if (this.options.selectLabel.use) {
+      } else if (this.options.selectLabel.use && this.options.selectLabel.useClick) {
         const offset = this.getMousePosition(e);
         const clickedLabelInfo = this.getLabelInfoByPosition(offset);
         const selected = this.selectLabel(clickedLabelInfo.labelIndex);
         this.renderWithSelected(selected.dataIndex);
 
         args.selected = cloneDeep(this.defaultSelectInfo);
-      } else if (this.options.selectSeries.use) {
+      } else if (this.options.selectSeries.use && this.options.selectSeries.useClick) {
         const offset = this.getMousePosition(e);
         const hitInfo = this.getSeriesIdByPosition(offset);
         if (hitInfo.sId !== null) {

package/src/components/chart/uses.js

@@ -103,6 +103,7 @@ const DEFAULT_OPTIONS = {
   },
   selectItem: {
     use: false,
+    useClick: true,
     showTextTip: false,
     tipText: 'value',
     showTip: false,
@@ -116,6 +117,7 @@ const DEFAULT_OPTIONS = {
   },
   selectLabel: {
     use: false,
+    useClick: true,
     limit: 1,
     useDeselectOverflow: false,
     showTip: false,
@@ -127,6 +129,7 @@ const DEFAULT_OPTIONS = {
   },
   selectSeries: {
     use: false,
+    useClick: true,
     limit: 1,
     useDeselectOverflow: false,
   },

package/src/components/grid/Grid.vue

@@ -79,6 +79,8 @@
               :style="{
                 width: `${column.width}px`,
                 'min-width': `${isRenderer(column) ? rendererMinWidth : minWidth}px`,
+                'margin-right': (orderedColumns.length - 1 === index
+                && hasVerticalScrollBar && hasHorizontalScrollBar) ? `${scrollWidth}px` : '0px',
               }"
             >
               <!-- Filter Status -->
@@ -142,7 +144,7 @@
           :style="`height: ${vScrollTopHeight}px;`"
           class="vscroll-spacer"
         />
-        <table>
+        <table ref="table">
           <tbody>
             <!-- Row List -->
             <tr
@@ -359,6 +361,7 @@ export default {
     const elementInfo = reactive({
       body: null,
       header: null,
+      table: null,
       resizeLine: null,
       'grid-wrapper': null,
     });
@@ -417,6 +420,7 @@ export default {
       vScrollTopHeight: 0,
       vScrollBottomHeight: 0,
       hasVerticalScrollBar: false,
+      hasHorizontalScrollBar: false,
     });
     const selectInfo = reactive({
       selectedRow: props.selected,
@@ -443,7 +447,7 @@ export default {
       rendererMinWidth: 80,
       iconWidth: 42,
       showResizeLine: false,
-      adjust: computed(() => (props.option.adjust || false)),
+      adjust: props.option.adjust || false,
       columnWidth: props.option.columnWidth || 80,
       scrollWidth: props.option.scrollWidth || 17,
       rowHeight: computed(() =>
@@ -552,6 +556,7 @@ export default {
       filterInfo,
       isRenderer,
       updateVScroll,
+      updateHScroll,
     });
 
     const {
@@ -692,7 +697,7 @@ export default {
       },
     );
     watch(
-      () => [resizeInfo.adjust, props.option.columnWidth, resizeInfo.gridWidth],
+      () => [props.option.columnWidth, resizeInfo.gridWidth],
       () => {
         resizeInfo.columnWidth = props.option.columnWidth;
         const gridWrapper = elementInfo['grid-wrapper'];

package/src/components/grid/style/grid.scss

@@ -59,9 +59,6 @@
   }
   &:nth-last-child(1) {
     border-right: 0;
-    .column-resize {
-      cursor: default !important;
-    }
   }
   .sort-icon {
     display: inline-block;

package/src/components/grid/uses.js

@@ -102,9 +102,11 @@ export const scrollEvent = (params) => {
       const lastVisibleIndex = firstVisibleIndex + rowCount + 1;
       const firstIndex = Math.max(firstVisibleIndex, 0);
       const lastIndex = lastVisibleIndex;
+      const tableEl = elementInfo.table;
 
       stores.viewStore = store.slice(firstIndex, lastIndex);
-      scrollInfo.hasVerticalScrollBar = rowCount < store.length;
+      scrollInfo.hasVerticalScrollBar = rowCount < store.length
+        || bodyEl.clientHeight < tableEl.clientHeight;
       scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
       scrollInfo.vScrollBottomHeight = totalScrollHeight - (stores.viewStore.length * rowHeight)
         - scrollInfo.vScrollTopHeight;
@@ -122,9 +124,11 @@ export const scrollEvent = (params) => {
   const updateHScroll = () => {
     const headerEl = elementInfo.header;
     const bodyEl = elementInfo.body;
+    const tableEl = elementInfo.table;
 
     headerEl.scrollLeft = bodyEl.scrollLeft;
     summaryScroll.value = bodyEl.scrollLeft;
+    scrollInfo.hasHorizontalScrollBar = bodyEl.clientWidth < tableEl.clientWidth;
   };
   /**
    * scroll 이벤트를 처리한다.
@@ -154,26 +158,15 @@ export const scrollEvent = (params) => {
 
 export const resizeEvent = (params) => {
   const { props } = getCurrentInstance();
-  const { resizeInfo, elementInfo, checkInfo, stores, isRenderer, updateVScroll } = params;
-  /**
-   * 해당 컬럼 인덱스가 마지막인지 확인한다.
-   *
-   * @param {number} index - 컬럼 인덱스
-   * @returns {boolean} 마지막 컬럼 유무
-   */
-  const isLastColumn = (index) => {
-    const columns = stores.orderedColumns;
-    let lastIndex = -1;
-
-    for (let ix = columns.length - 1; ix >= 0; ix--) {
-      if (!columns[ix].hide) {
-        lastIndex = ix;
-        break;
-      }
-    }
-
-    return lastIndex === index;
-  };
+  const {
+    resizeInfo,
+    elementInfo,
+    checkInfo,
+    stores,
+    isRenderer,
+    updateVScroll,
+    updateHScroll,
+  } = params;
   /**
    * 고정 너비, 스크롤 유무 등에 따른 컬럼 너비를 계산한다.
    */
@@ -264,6 +257,9 @@ export const resizeEvent = (params) => {
       if (elementInfo.body?.clientHeight) {
         updateVScroll();
       }
+      if (elementInfo.body?.clientWidth) {
+        updateHScroll();
+      }
     });
   };
 
@@ -280,62 +276,54 @@ export const resizeEvent = (params) => {
    * @param {object} event - 이벤트 객체
    */
   const onColumnResize = (columnIndex, event) => {
-    let nextColumnIndex = columnIndex + 1;
     const headerEl = elementInfo.header;
+    const bodyEl = elementInfo.body;
     const headerLeft = headerEl.getBoundingClientRect().left;
     const columnEl = headerEl.querySelector(`li[data-index="${columnIndex}"]`);
-    if (!isLastColumn(columnIndex) && !columnEl.className.includes('db-icon')
-      && !columnEl.className.includes('user-icon')) {
-      while (stores.orderedColumns[nextColumnIndex].hide) {
-        nextColumnIndex++;
+    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;
+    const startMouseLeft = event.clientX;
+    const startColumnLeft = columnRect.left - headerLeft;
+
+    resizeLineEl.style.left = `${startLeft}px`;
+
+    resizeInfo.showResizeLine = true;
+
+    const handleMouseMove = (evt) => {
+      const deltaLeft = evt.clientX - startMouseLeft;
+      const proxyLeft = startLeft + deltaLeft;
+      let resizeWidth = Math.max(minLeft, proxyLeft);
+
+      resizeWidth = Math.min(maxRight, resizeWidth);
+
+      resizeLineEl.style.left = `${resizeWidth}px`;
+    };
+
+    const handleMouseUp = () => {
+      const destLeft = parseInt(resizeLineEl.style.left, 10);
+      const changedWidth = destLeft - startColumnLeft;
+
+      if (stores.orderedColumns[columnIndex]) {
+        stores.orderedColumns[columnIndex].width = changedWidth;
+        stores.orderedColumns.map((column) => {
+          const item = column;
+          item.resized = true;
+          return item;
+        });
       }
-      const minWidth = isRenderer(stores.orderedColumns[columnIndex])
-        ? resizeInfo.rendererMinWidth : resizeInfo.minWidth;
-      const nextMinWidth = isRenderer(stores.orderedColumns[nextColumnIndex])
-        ? resizeInfo.rendererMinWidth : resizeInfo.minWidth;
-      const nextColumnEl = headerEl.querySelector(`li[data-index="${nextColumnIndex}"]`);
-      const columnRect = columnEl.getBoundingClientRect();
-      const maxRight = nextColumnEl.getBoundingClientRect().right - headerLeft - nextMinWidth;
-      const resizeLineEl = elementInfo.resizeLine;
-      const minLeft = columnRect.left - headerLeft + minWidth;
-      const startLeft = columnRect.right - headerLeft;
-      const startMouseLeft = event.clientX;
-      const startColumnLeft = columnRect.left - headerLeft;
-
-      resizeLineEl.style.left = `${startLeft}px`;
-
-      resizeInfo.showResizeLine = true;
-
-      const handleMouseMove = (evt) => {
-        const deltaLeft = evt.clientX - startMouseLeft;
-        const proxyLeft = startLeft + deltaLeft;
-        let resizeWidth = Math.max(minLeft, proxyLeft);
-
-        resizeWidth = Math.min(maxRight, resizeWidth);
-
-        resizeLineEl.style.left = `${resizeWidth}px`;
-      };
-
-      const handleMouseUp = () => {
-        const destLeft = parseInt(resizeLineEl.style.left, 10);
-        const changedWidth = destLeft - startColumnLeft;
-
-        if (stores.orderedColumns[columnIndex]) {
-          const columnWidth = stores.orderedColumns[columnIndex].width;
-          stores.orderedColumns[columnIndex].width = changedWidth;
-          stores.orderedColumns[columnIndex].resized = true;
-          stores.orderedColumns[nextColumnIndex].width += (columnWidth - changedWidth);
-          stores.orderedColumns[nextColumnIndex].resized = true;
-        }
 
-        resizeInfo.showResizeLine = false;
-        document.removeEventListener('mousemove', handleMouseMove);
-        onResize();
-      };
+      resizeInfo.showResizeLine = false;
+      document.removeEventListener('mousemove', handleMouseMove);
+      onResize();
+    };
 
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp, { once: true });
-    }
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp, { once: true });
   };
   return { calculatedColumn, onResize, onShow, onColumnResize };
 };
@@ -793,9 +781,9 @@ export const filterEvent = (params) => {
           let isShow = false;
           for (let ix = 0; ix < stores.orderedColumns.length; ix++) {
             const column = stores.orderedColumns[ix] || {};
-            let columnValue = row[ROW_DATA_INDEX][ix];
+            let columnValue = row[ROW_DATA_INDEX][ix] ?? null;
             column.type = column.type || 'string';
-            if (columnValue) {
+            if (columnValue !== null) {
               if (typeof columnValue === 'object') {
                 columnValue = columnValue[column.field];
               }

package/src/components/treeGrid/TreeGrid.vue

@@ -59,7 +59,7 @@
               v-if="!column.hide"
               :data-index="index"
               :class="getColumnClass(column)"
-              :style="getColumnStyle(column)"
+              :style="getColumnStyle(column, index)"
             >
               <!-- Column Name -->
               <span
@@ -90,7 +90,7 @@
           :style="`height: ${vScrollTopHeight}px;`"
           class="vscroll-spacer"
         />
-        <table>
+        <table ref="table">
           <tbody>
             <tree-grid-node
               v-for="(node, idx) in viewStore"
@@ -264,6 +264,7 @@ export default {
     const elementInfo = reactive({
       body: null,
       header: null,
+      table: null,
       resizeLine: null,
       'grid-wrapper': null,
     });
@@ -322,6 +323,7 @@ export default {
       vScrollTopHeight: 0,
       vScrollBottomHeight: 0,
       hasVerticalScrollBar: false,
+      hasHorizontalScrollBar: false,
     });
     const selectInfo = reactive({
       selectedRow: props.selected,
@@ -342,7 +344,7 @@ export default {
       minWidth: 40,
       rendererMinWidth: 80,
       showResizeLine: false,
-      adjust: computed(() => props.option.adjust || false),
+      adjust: props.option.adjust || false,
       columnWidth: props.option.columnWidth || 80,
       scrollWidth: props.option.scrollWidth || 17,
       rowHeight: computed(() => props.option.rowHeight || 35),
@@ -426,6 +428,7 @@ export default {
       stores,
       isRenderer,
       updateVScroll,
+      updateHScroll,
     });
 
     const {
@@ -595,7 +598,7 @@ export default {
       },
     );
     watch(
-      () => [props.width, props.height, resizeInfo.adjust, props.option.columnWidth],
+      () => [props.width, props.height, props.option.columnWidth],
       (value) => {
         resizeInfo.columnWidth = value[3];
         stores.orderedColumns.map((column) => {
@@ -690,11 +693,14 @@ export default {
         'non-border': !!styleInfo.borderStyle,
       };
     };
-    const getColumnStyle = (column) => {
+    const getColumnStyle = (column, index) => {
       const render = isRenderer(column);
       return {
         width: `${column.width}px`,
         'min-width': render ? `${resizeInfo.rendererMinWidth}px;` : `${resizeInfo.minWidth}px`,
+        'margin-right': (stores.orderedColumns.length - 1 === index
+          && scrollInfo.hasVerticalScrollBar
+          && scrollInfo.hasHorizontalScrollBar) ? `${resizeInfo.scrollWidth}px` : '0px',
       };
     };
     const getSlotName = column => `${column}Node`;

package/src/components/treeGrid/style/treeGrid.scss

@@ -55,9 +55,6 @@
   }
   &:nth-last-child(1) {
     border-right: 0;
-    .column-resize {
-      cursor: default !important;
-    }
   }
   .sort-icon {
     display: inline-block;