evui 3.4.135 → 3.4.136

package/package.json

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

package/src/components/grid/uses.js

@@ -78,20 +78,17 @@ export const commonFunctions = () => {
 };
 
 export const getUpdatedColumns = (stores) => {
-  if (stores.movedColumns?.length) {
-    const orderedColumnsIndexes = stores.orderedColumns?.map(column => column.index);
-    const extraColumns = stores.originColumns?.filter(
-      column => !orderedColumnsIndexes.includes(column.index),
-    );
-    const copyOrderedColumns = stores.orderedColumns;
-    return [...copyOrderedColumns, ...extraColumns];
-  }
-  const { originColumns, filteredColumns } = stores;
-  return originColumns.map((col) => {
-    const changedCol = filteredColumns.find(fcol => fcol.index === col.index) ?? {};
+  const baseColumns = (
+    stores.movedColumns?.length ? stores.movedColumns : stores.originColumns
+  ) ?? [];
+  const filteredColumnsMap = new Map(
+    (stores.filteredColumns ?? []).map(filtered => [filtered.index, filtered]),
+  );
+  return baseColumns.map((column) => {
+    const filteredColumn = filteredColumnsMap.get(column.index) ?? {};
     return {
-      ...col,
-      ...changedCol,
+      ...column,
+      ...filteredColumn,
     };
   });
 };
@@ -1475,6 +1472,28 @@ export const columnSettingEvent = (params) => {
     columnSettingInfo.visibleColumnIdx = [];
     columnSettingInfo.hiddenColumn = '';
   };
+  const getBaseColumns = () => {
+    if (Array.isArray(stores.movedColumns) && stores.movedColumns.length) {
+      return stores.movedColumns;
+    }
+    return stores.originColumns || [];
+  };
+  const syncHiddenState = (column, hidden) => {
+    if (!column) {
+      return;
+    }
+    column.hiddenDisplay = hidden;
+    const originColumn = stores.originColumns?.find(col => col.index === column.index);
+    if (originColumn && originColumn !== column) {
+      originColumn.hiddenDisplay = hidden;
+    }
+    if (Array.isArray(stores.movedColumns)) {
+      const movedColumn = stores.movedColumns.find(col => col.index === column.index);
+      if (movedColumn && movedColumn !== column) {
+        movedColumn.hiddenDisplay = hidden;
+      }
+    }
+  };
   const setFilteringColumn = () => {
     columnSettingInfo.visibleColumnIdx = stores.filteredColumns.map(col => col.index);
 
@@ -1499,18 +1518,13 @@ export const columnSettingEvent = (params) => {
       return;
     }
 
-    stores.filteredColumns = stores.originColumns
-      .filter((col) => {
-        if (columnNames.includes(col.field) || !col.caption) {
-          // 보여줄 컬럼들은 hiddenDisplay 속성을 false로 전부 적용
-          col.hiddenDisplay = false;
-          return true;
-        }
-
-        // 보여주지 않을 컬럼들은 hiddenDisplay 속성을 전부 ture로 적용
-        col.hiddenDisplay = true;
-        return false;
-      });
+    const baseColumns = getBaseColumns();
+    const columnNameSet = new Set(columnNames);
+    stores.filteredColumns = baseColumns.filter((col) => {
+      const shouldShow = columnNameSet.has(col.field) || !col.caption;
+      syncHiddenState(col, !shouldShow);
+      return shouldShow;
+    });
     columnSettingInfo.hiddenColumn = '';
     setFilteringColumn();
     emit('change-column-status', {
@@ -1530,13 +1544,16 @@ export const columnSettingEvent = (params) => {
     }
     stores.filteredColumns = columns
       .filter((col) => {
-        if (col.field !== val) {
-          col.hiddenDisplay = false;
-          return true;
-        }
-        col.hiddenDisplay = true;
-        return false;
+        const shouldHide = col.field === val;
+        syncHiddenState(col, shouldHide);
+        return !shouldHide;
       });
+    const baseColumns = getBaseColumns();
+    baseColumns.forEach((col) => {
+      if (col.field === val) {
+        syncHiddenState(col, true);
+      }
+    });
     columnSettingInfo.hiddenColumn = val;
     setFilteringColumn();
   };
@@ -1551,6 +1568,19 @@ export const columnSettingEvent = (params) => {
 
 export const dragEvent = ({ stores }) => {
   const { emit } = getCurrentInstance();
+  const buildMovedColumns = (visibleColumns) => {
+    const baseColumns = (stores.movedColumns?.length
+      ? [...stores.movedColumns]
+      : [...stores.originColumns]);
+    const queue = [...visibleColumns];
+    const visibleIndexSet = new Set(queue.map(column => column.index));
+    stores.movedColumns = baseColumns.map((column) => {
+      if (visibleIndexSet.has(column.index)) {
+        return queue.shift();
+      }
+      return column;
+    });
+  };
   const setColumnMoving = (currentIndex, droppedIndex) => {
     const oldIndex = parseInt(currentIndex, 10);
     const newPositionIndex = parseInt(droppedIndex, 10);
@@ -1567,9 +1597,8 @@ export const dragEvent = ({ stores }) => {
 
     if (stores.filteredColumns.length) {
       stores.filteredColumns = columns;
-    } else {
-      stores.movedColumns = columns;
     }
+    buildMovedColumns(columns);
   };
   const onDragStart = (e) => {
     e.dataTransfer.setData('text/plain', e.currentTarget.dataset.index);

package/src/components/icon/Icon.vue

@@ -4,6 +4,7 @@
       icon,
       { [`ev-icon-${size}`]: !!size },
     ]"
+    :style="{ color }"
     @click="onClick"
     @dblClick="onDblClick"
     @contextmenu="onContextMenu"
@@ -22,6 +23,10 @@ export default {
       type: String,
       default: '',
     },
+    color: {
+      type: String,
+      default: '',
+    },
   },
   emits: {
     click: null,

package/src/components/treeGrid/TreeGridNode.vue

@@ -235,8 +235,14 @@ export default {
     const isDataIcon = computed(() => ((parentIconMV.value !== 'none' || childIconMV.value !== 'none')));
 
     const expandColumnIdx = computed(() => {
-      const expandColumnIndex = props.orderedColumns.findIndex(v => v.expandColumn);
-      return expandColumnIndex > 0 ? expandColumnIndex : 0;
+      const columns = props.orderedColumns || [];
+      const visibleExpandIdx = columns.findIndex(column =>
+        column.expandColumn && !column.hide && !column.hiddenDisplay);
+      if (visibleExpandIdx !== -1) {
+        return visibleExpandIdx;
+      }
+      const firstVisibleIdx = columns.findIndex(column => !column.hide && !column.hiddenDisplay);
+      return firstVisibleIdx !== -1 ? firstVisibleIdx : 0;
     });
     const getRowClass = nodeInfo => ({
       row: true,

package/src/style/lib/icon.css

@@ -10,7 +10,7 @@
   font-display: block;
 }
 
-[class^="ev-icon-"], [class*=" ev-icon-"] {
+[class^='ev-icon-'], [class*=' ev-icon-'] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'EVUI' !important;
   speak: none;