evui 3.4.134 → 3.4.136

package/package.json

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

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

@@ -82,7 +82,6 @@ const modules = {
             label,
             mousePosition: [e.clientX, e.clientY],
             dataLabel: actualLabelValue,
-            isTooltipBased: true,
           };
         }
       } else if (tooltip.use && this.isInitTooltip) {
@@ -109,7 +108,6 @@ const modules = {
           horizontal: this.options.horizontal,
           label,
           mousePosition: [e.clientX, e.clientY],
-          isTooltipBased: false,
         };
       } else if (!args.hoveredLabel) {
         args.hoveredLabel = {

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

@@ -858,29 +858,18 @@ const modules = {
    *
    * @returns {undefined}
    */
-  drawSyncedIndicator({ horizontal, label, mousePosition, dataLabel, isTooltipBased }) {
-    if (!mousePosition || !!horizontal !== !!this.options.horizontal) {
+  drawSyncedIndicator({ horizontal, label, mousePosition, dataLabel }) {
+    if (!this._canDrawSyncedIndicator(horizontal, mousePosition)) {
       return;
     }
 
-    // tooltip 기반 동기화인 경우
-    if (isTooltipBased) {
+    if (dataLabel) {
       this.drawSyncedIndicatorForTooltip({ dataLabel, mousePosition });
       return;
     }
 
-    // 기존 시간 기반 동기화
-    if (
-      this.options.syncHover === false
-      || (!horizontal && !this.options.axesX.every(({ type }) => type === 'time'))
-      || (horizontal && !this.options.axesY.every(({ type }) => type === 'time'))) {
-      return;
-    }
     const fromTime = +this.data.labels?.[0];
     const toTime = +this.data.labels?.[this.data.labels.length - 1];
-    if (fromTime == null || toTime == null) {
-      return;
-    }
     const [clientX, clientY] = mousePosition;
     const { top, bottom, left, right } = this.chartDOM.getBoundingClientRect();
 
@@ -908,6 +897,30 @@ const modules = {
     }
   },
 
+  _canDrawSyncedIndicator(horizontal, mousePosition) {
+    if (!mousePosition || !!horizontal !== !!this.options.horizontal) {
+      return false;
+    }
+
+    return this._isTimeBasedSyncEnabled(horizontal) && this._hasValidTimeRange();
+  },
+
+  _isTimeBasedSyncEnabled(horizontal) {
+    if (this.options.syncHover === false) return false;
+    if (!this.data?.labels?.length) return false;
+
+    const timeAxes = horizontal
+      ? this.options.axesY.every(({ type }) => type === 'time')
+      : this.options.axesX.every(({ type }) => type === 'time');
+
+    return timeAxes;
+  },
+
+  _hasValidTimeRange() {
+    const fromTime = +this.data.labels?.[0];
+    const toTime = +this.data.labels?.[this.data.labels.length - 1];
+    return fromTime != null && toTime != null;
+  },
 
   /**
    * 제공된 dataLabel과 일치하는 Label이 있다면 indicator를 그림

package/src/components/contextMenu/ContextMenu.vue

@@ -9,7 +9,18 @@
         :items="items"
         :style="menuStyle"
         :comp="comp"
-      />
+      >
+        <template
+          v-for="(_, slotName) in $slots"
+          :key="slotName"
+          #[slotName]="slotProps"
+        >
+          <slot
+            :name="slotName"
+            v-bind="slotProps"
+          />
+        </template>
+      </menu-list>
     </teleport>
   </template>
 </template>

package/src/components/contextMenu/MenuList.vue

@@ -15,7 +15,18 @@
           class="ev-menu-li-prefix"
           :class="item.iconClass"
         />
-        {{ item.text }}
+        <span class="ev-menu-li-text">
+          <slot
+            v-if="item.slotKey"
+            :name="item.slotKey"
+            :item="item"
+          >
+            {{ item.text }}
+          </slot>
+          <template v-else>
+            {{ item.text }}
+          </template>
+        </span>
         <i
           v-if="item.children || item.isShowMenu"
           class="ev-menu-li-suffix ev-icon-arrow-right2"
@@ -31,7 +42,18 @@
         :comp="comp"
         :items="childrenItems"
         :style="menuStyle"
-      />
+      >
+        <template
+          v-for="(_, slotName) in $slots"
+          :key="slotName"
+          #[slotName]="slotProps"
+        >
+          <slot
+            :name="slotName"
+            v-bind="slotProps"
+          />
+        </template>
+      </component>
     </template>
   </div>
 </template>
@@ -152,4 +174,9 @@ export default {
   position: absolute;
   left: 3px;
 }
+
+.ev-menu-li-text {
+  display: inline-block;
+  padding-left: 20px;
+}
 </style>

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/menu/Menu.vue

@@ -9,7 +9,18 @@
       :disabled="disabled"
       :comp="component"
       @click="clickMenu"
-    />
+    >
+      <template
+        v-for="(_, slotName) in $slots"
+        :key="slotName"
+        #[slotName]="slotProps"
+      >
+        <slot
+          :name="slotName"
+          v-bind="slotProps"
+        />
+      </template>
+    </menu-item>
   </ul>
 </template>
 

package/src/components/menu/MenuItem.vue

@@ -21,7 +21,18 @@
         :class="['front-icon', item.iconClass]"
       />
       <span class="text">
-        {{ item.text || item.value }}
+        <slot
+          v-if="item.slotKey"
+          :name="item.slotKey"
+          :item="item"
+          :depth="depth"
+          :selected-item="selectedItem"
+        >
+          {{ item.text || item.value }}
+        </slot>
+        <template v-else>
+          {{ item.text || item.value }}
+        </template>
       </span>
       <span
         v-if="expandable && hasChild"
@@ -84,6 +95,9 @@ export default {
         } else if (obj.disabled !== undefined && typeof obj.disabled !== 'boolean') {
           console.warn('[EVUI][Menu] disabled attribute must be \'Boolean\' type.');
           return false;
+        } else if (obj.slotKey !== undefined && typeof obj.slotKey !== 'string') {
+          console.warn('[EVUI][Menu] slotKey attribute must be \'String\' type.');
+          return false;
         }
         return true;
       },

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;