evui 3.4.65 → 3.4.67

package/package.json

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

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

@@ -92,9 +92,11 @@ const modules = {
 
       if (maxTipOpt.use && maxArgs) {
         if (tooltipValueFormatter) {
-          maxArgs.text = isHorizontal
-            ? tooltipValueFormatter({ x: maxArgs.value })
-            : tooltipValueFormatter({ y: maxArgs.value });
+          maxArgs.text = tooltipValueFormatter({
+            seriesId: seriesInfo.sId,
+            x: isHorizontal ? maxArgs.value : undefined,
+            y: !isHorizontal ? maxArgs.value : undefined,
+          });
         } else {
           maxArgs.text = numberWithComma(maxArgs.value);
         }

package/src/components/grid/Grid.vue

@@ -473,8 +473,6 @@
                     'non-border': !!borderStyle,
                   }"
                   :style="{
-                    position: 'sticky',
-                    right: 0,
                     width: '30px',
                     height: `${rowHeight}px`,
                     'min-width': '30px',
@@ -486,6 +484,10 @@
                     <span
                       class="row-contextmenu__btn"
                       :disabled="row[ROW_DISABLED_INDEX]"
+                      :style="{
+                        position: 'absolute',
+                        right: 0,
+                      }"
                       @click="onContextMenu($event)"
                     >
                       <slot name="contextmenuIcon"></slot>
@@ -496,6 +498,10 @@
                       icon="ev-icon-warning2"
                       class="row-contextmenu__btn"
                       :disabled="row[ROW_DISABLED_INDEX]"
+                      :style="{
+                        position: 'absolute',
+                        right: 0,
+                      }"
                       @click="onContextMenu($event)"
                     />
                   </template>

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

@@ -148,6 +148,7 @@
     }
   }
   .row {
+    position: relative;
     color: inherit;
     white-space: nowrap;
 

package/src/components/treeGrid/TreeGrid.vue

@@ -88,6 +88,52 @@
                   @click.prevent="columnMenu.show"
                 >
                   {{ column.caption }}
+                <!-- Sort Icon -->
+                <span @click.stop="onSort(column)">
+                  <template v-if="!!$slots.sortIcon">
+                    <span
+                      v-if="column.sortable === undefined ? true : column.sortable"
+                      class="column-sort__icon column-sort__icon--basic"
+                      :style="{
+                        height: `${rowHeight}px`,
+                        'line-height': `${rowHeight}px`,
+                      }"
+                    >
+                     <slot name="sortIcon" />
+                    </span>
+                    <span
+                      v-if="isSortedColumn(column)"
+                      :class="sortIconClass(column)"
+                      :style="{
+                        height: `${rowHeight}px`,
+                        'line-height': `${rowHeight}px`,
+                      }"
+                    >
+                      <slot :name="`sortIcon_${sortOrder}`" />
+                    </span>
+                  </template>
+                  <template v-else>
+                    <grid-sort-button
+                      v-if="column.sortable === undefined ? true : column.sortable"
+                      class="column-sort__icon column-sort__icon--basic"
+                      :icon="'basic'"
+                      :style="{
+                        height: `${rowHeight}px`,
+                        'line-height': `${rowHeight}px`,
+                      }"
+                    />
+                    <grid-sort-button
+                      v-if="isSortedColumn(column)"
+                      :class="sortIconClass(column)"
+                      :icon="sortOrder"
+                      :style="{
+                        height: `${rowHeight}px`,
+                        'line-height': `${rowHeight}px`,
+                        visibility: !!sortOrder ? column.hidden : true,
+                      }"
+                    />
+                  </template>
+                </span>
                 </span>
               </template>
               <!-- Column Resize -->
@@ -131,7 +177,7 @@
           <tbody>
             <tree-grid-node
               v-for="(node, idx) in viewStore"
-              :key="node['id'] || idx"
+              :key="idx"
               :selected-data="selectedRow"
               :node-data="node"
               :use-checkbox="useCheckbox"
@@ -266,11 +312,13 @@ import {
   onMounted,
   onUnmounted,
 } from 'vue';
+import { cloneDeep } from 'lodash-es';
 import TreeGridNode from './TreeGridNode';
 import Toolbar from './TreeGridToolbar';
 import GridPagination from '../grid/GridPagination';
 import GridSummary from '../grid/GridSummary';
 import ColumnSetting from '../grid/GridColumnSetting.vue';
+import GridSortButton from '../grid/icon/icon-sort-button';
 import GridOptionButton from '../grid/icon/icon-option-button.vue';
 import {
   commonFunctions,
@@ -283,6 +331,7 @@ import {
   filterEvent,
   pagingEvent,
   getUpdatedColumns,
+  sortEvent,
 } from './uses';
 import {
   columnSettingEvent,
@@ -296,6 +345,7 @@ export default {
     GridPagination,
     GridSummary,
     ColumnSetting,
+    GridSortButton,
     GridOptionButton,
   },
   props: {
@@ -344,6 +394,7 @@ export default {
     'check-row': null,
     'check-all': null,
     'page-change': null,
+    'sort-column': null,
     'resize-column': ({ column, columns }) => ({ column, columns }),
     'change-column-status': ({ columns }) => ({ columns }),
     'change-column-info': ({ type, columns }) => ({ type, columns }),
@@ -389,6 +440,7 @@ export default {
       viewStore: [],
       filterStore: [],
       pagingStore: [],
+      originStore: [],
       showTreeStore: computed(() => stores.treeStore.filter(item => item.show)),
       searchStore: computed(() => stores.treeStore.filter(item => item.isFilter)),
       store: computed(() => (filterInfo.isSearch ? stores.searchStore : stores.treeStore)),
@@ -398,6 +450,9 @@ export default {
         index,
         hiddenDisplay: false,
         ...column,
+        sortOption: {
+           sortType: column?.sortOption?.sortType || 'init',
+        },
       }))),
       orderedColumns: computed(() => (stores.filteredColumns.length
         ? stores.filteredColumns : stores.originColumns)),
@@ -456,6 +511,13 @@ export default {
       }),
       multiple: computed(() => props.option?.useSelection?.multiple ?? false),
     });
+    const sortInfo = reactive({
+      isSorting: false,
+      sortField: '',
+      sortOrder: '',
+      sortColumn: {},
+      sortFunction: props.option.customAscFunction ?? {},
+    });
     const contextInfo = reactive({
       menu: null,
       contextMenuItems: [],
@@ -512,6 +574,7 @@ export default {
     } = pagingEvent({
       stores,
       pageInfo,
+      sortInfo,
       filterInfo,
       elementInfo,
       clearCheckInfo,
@@ -570,6 +633,10 @@ export default {
       handleExpand,
     } = treeEvent({ stores, onResize });
 
+    const {
+        onSort,
+    } = sortEvent({ sortInfo, stores, updatePagingInfo, setTreeNodeStore, onResize });
+
     const {
       onSearch,
     } = filterEvent({
@@ -608,6 +675,7 @@ export default {
       useGridSetting,
       columnSettingInfo,
       setColumnHidden,
+      onSort,
     });
 
     const setGridSetting = (e) => {
@@ -634,6 +702,7 @@ export default {
 
     onMounted(() => {
       stores.treeStore = setTreeNodeStore();
+      stores.originStore = cloneDeep(stores.treeStore);
       document.addEventListener('wheel', onMouseWheel, { capture: false });
       document.addEventListener('scroll', onMouseWheel, { capture: true });
     });
@@ -854,6 +923,15 @@ export default {
         });
       },
     );
+
+    const isSortedColumn = column => sortInfo.sortField === column.field;
+
+    const sortIconClass = () => ({
+      'column-sort__icon': true,
+      'column-sort__icon--asc': sortInfo.sortOrder === 'asc',
+      'column-sort__icon--desc': sortInfo.sortOrder === 'desc',
+    });
+
     const gridStyle = computed(() => ({
       width: resizeInfo.gridWidth,
       height: resizeInfo.gridHeight,
@@ -929,6 +1007,7 @@ export default {
       ...toRefs(resizeInfo),
       ...toRefs(selectInfo),
       ...toRefs(checkInfo),
+      ...toRefs(sortInfo),
       ...toRefs(contextInfo),
       ...toRefs(pageInfo),
       ...toRefs(columnSettingInfo),
@@ -958,6 +1037,9 @@ export default {
       setGridSetting,
       onApplyColumn,
       onColumnContextMenu,
+      onSort,
+      isSortedColumn,
+      sortIconClass,
     };
   },
 };

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

@@ -79,6 +79,26 @@
       align-items: center;
     }
   }
+  .column-sort__icon {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    width: 24px;
+    height: 24px;
+    background-size: contain;
+    transform: translateY(-50%);
+    &:hover {
+      cursor: pointer;
+    }
+    &--basic {
+      visibility: hidden;
+    }
+  }
+  :hover {
+    .column-sort__icon--basic {
+      visibility: visible;
+    }
+  }
 }
 
 .column-name {

package/src/components/treeGrid/uses.js

@@ -1,5 +1,6 @@
 import { getCurrentInstance, nextTick } from 'vue';
 import { numberWithComma } from '@/common/utils';
+import { cloneDeep } from 'lodash-es';
 
 export const commonFunctions = (params) => {
   const { props } = getCurrentInstance();
@@ -606,6 +607,7 @@ export const contextMenuEvent = (params) => {
     useGridSetting,
     columnSettingInfo,
     setColumnHidden,
+    onSort,
   } = params;
   /**
    * 컨텍스트 메뉴를 설정한다.
@@ -634,7 +636,8 @@ export const contextMenuEvent = (params) => {
     contextInfo.contextMenuItems = menuItems;
   };
   const onColumnContextMenu = (event, column) => {
-    if (event.target.className.includes('column-name--click')) {
+    if (event.target.className.includes('column-name')) {
+      const sortable = column.sortable === undefined ? true : column.sortable;
       contextInfo.columnMenuItems = [
         {
           text: contextInfo.columnMenuTextInfo?.hide ?? 'Hide',
@@ -651,6 +654,20 @@ export const contextMenuEvent = (params) => {
             });
           },
         },
+        {
+          text: contextInfo.columnMenuTextInfo?.ascending ?? 'Ascending',
+          iconClass: 'ev-icon-allow2-up',
+          disabled: !sortable,
+          hidden: contextInfo.hiddenColumnMenuItem?.ascending,
+          click: () => onSort(column, 'asc'),
+        },
+        {
+          text: contextInfo.columnMenuTextInfo?.descending ?? 'Descending',
+          iconClass: 'ev-icon-allow2-down',
+          disabled: !sortable,
+          hidden: contextInfo.hiddenColumnMenuItem?.descending,
+          click: () => onSort(column, 'desc'),
+        },
       ];
     } else {
       contextInfo.columnMenuItems.length = 0;
@@ -922,6 +939,7 @@ export const pagingEvent = (params) => {
   const {
     stores,
     pageInfo,
+    sortInfo,
     filterInfo,
     elementInfo,
     clearCheckInfo,
@@ -941,6 +959,10 @@ export const pagingEvent = (params) => {
         total: pageInfo.pageTotal,
         perPage: pageInfo.perPage,
       },
+      sortInfo: {
+        field: sortInfo.sortField,
+        order: sortInfo.sortOrder,
+      },
       searchInfo: {
         searchWord: filterInfo.searchWord,
         searchColumns: stores.orderedColumns
@@ -971,3 +993,141 @@ export const pagingEvent = (params) => {
   };
   return { getPagingData, updatePagingInfo, changePage };
 };
+
+export const sortEvent = ({ sortInfo, stores, updatePagingInfo, onResize }) => {
+  const { emit } = getCurrentInstance();
+
+  const getDefaultSortType = (includeInit = true) => (includeInit ? ['asc', 'desc', 'init'] : ['asc', 'desc']);
+
+  function OrderQueue() {
+    this.orders = getDefaultSortType();
+    this.dequeue = () => this.orders.shift();
+    this.enqueue = o => this.orders.push(o);
+  }
+
+  const setSortOptionToOrderedColumns = (column, sortType = 'init') => {
+    stores.orderedColumns.forEach((orderedColumn) => {
+      if (orderedColumn.index === column?.index && sortType) {
+        orderedColumn.sortOption = { sortType };
+      } else {
+        orderedColumn.sortOption = { sortType: 'init' };
+      }
+    });
+  };
+
+  const initializeHiddenColumnsSortType = () => {
+    const hiddenColumns = stores.originColumns.filter(col => col.hiddenDisplay || col.hide);
+    if (hiddenColumns.length) {
+      hiddenColumns.forEach((col) => {
+        col.sortOption = { sortType: 'init' };
+      });
+    }
+  };
+
+  const order = new OrderQueue();
+
+  const setSortInfo = (column, emitTriggered = true) => {
+    const { sortType } = column?.sortOption || {};
+    sortInfo.sortColumn = column;
+    sortInfo.sortField = column?.field;
+    sortInfo.sortOrder = sortType;
+    sortInfo.isSorting = !!(sortType);
+
+    if (emitTriggered) {
+      setSortOptionToOrderedColumns(column, sortType);
+
+      emit('change-column-info', {
+        type: 'sort',
+        columns: getUpdatedColumns(stores),
+      });
+    }
+  };
+
+  const compareValues = (nodeA, nodeB) => {
+    const valueA = nodeA.data[sortInfo.sortField];
+    const valueB = nodeB.data[sortInfo.sortField];
+
+    if (valueA === valueB) return 0;
+
+    const isAscending = sortInfo.sortOrder === 'asc';
+
+    if (isAscending) return valueA > valueB ? 1 : -1;
+
+    return valueA < valueB ? 1 : -1;
+  };
+
+  const sortTree = (nodes, depth = 0) => {
+    const groupedNodes = {};
+
+    nodes.forEach((node) => {
+      const nodeDepth = node.level || depth;
+      if (!groupedNodes[nodeDepth]) {
+        groupedNodes[nodeDepth] = [];
+      }
+      groupedNodes[nodeDepth].push(node);
+    });
+
+    Object.keys(groupedNodes).forEach((key) => {
+      groupedNodes[key].sort(compareValues);
+    });
+
+    nodes.length = 0;
+    Object.values(groupedNodes).forEach((group) => {
+      group.forEach((node) => {
+        nodes.push(node);
+        if (node.hasChild) {
+          sortTree(node.children, node.level + 1);
+        }
+      });
+    });
+  };
+
+  const onSort = (column, sortOrder) => {
+    const sortable = column.sortable === undefined ? true : column.sortable;
+    if (sortable) {
+      sortInfo.sortColumn = column;
+      if (sortInfo.sortField !== column?.field) {
+        order.orders = getDefaultSortType();
+        sortInfo.sortField = column?.field;
+      }
+      if (sortOrder) {
+        order.orders = getDefaultSortType();
+        if (sortOrder === 'desc') {
+          sortInfo.sortOrder = order.dequeue();
+          order.enqueue(sortInfo.sortOrder);
+        }
+      }
+      sortInfo.sortOrder = order.dequeue();
+      order.enqueue(sortInfo.sortOrder);
+
+      initializeHiddenColumnsSortType();
+      setSortOptionToOrderedColumns(column, sortInfo.sortOrder);
+
+      const updatedColumInfo = getUpdatedColumns(stores);
+      emit('sort-column', {
+        field: sortInfo.sortField,
+        order: sortInfo.sortOrder,
+        column: sortInfo.sortColumn,
+        columns: updatedColumInfo,
+      });
+
+      emit('change-column-info', {
+        type: 'sort',
+        columns: updatedColumInfo,
+      });
+
+      if (sortInfo.sortOrder === 'init') {
+        stores.treeStore = cloneDeep(stores.originStore);
+        stores.viewStore = stores.treeStore;
+        onResize();
+        sortInfo.isSorting = false;
+      } else {
+        sortTree(stores.treeRows);
+        sortInfo.isSorting = true;
+      }
+
+      updatePagingInfo({ onSort: true });
+    }
+  };
+  return { onSort, setSortInfo };
+};