evui 3.4.205 → 3.4.207

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

@@ -137,6 +137,8 @@ class StepScale extends Scale {
     const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
     const maxWidth = this.labelStyle?.maxWidth ?? chartRect.chartWidth / (steps + 2);
 
+    const AXIS_TICK_LENGTH = 5;
+
     this.drawAxisTitle(chartRect, labelOffset);
 
     if (this.labelStyle?.show) {
@@ -245,9 +247,22 @@ class StepScale extends Scale {
             }
           }
 
+          if (this.showAxisTick) {
+            ctx.beginPath();
+            ctx.strokeStyle = this.axisLineColor;
+            ctx.moveTo(labelCenter + (labelGap / 2), offsetPoint);
+            ctx.lineTo(labelCenter + (labelGap / 2), offsetPoint + AXIS_TICK_LENGTH);
+            ctx.stroke();
+            ctx.closePath();
+          }
+
           if (index > 0 && this.showGrid) {
+            ctx.beginPath();
+            ctx.strokeStyle = this.gridLineColor;
             ctx.moveTo(linePosition, offsetPoint);
             ctx.lineTo(linePosition, offsetCounterPoint);
+            ctx.stroke();
+            ctx.closePath();
           }
         } else {
           labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
@@ -255,9 +270,22 @@ class StepScale extends Scale {
           ctx.fillText(labelText, labelPoint, yPoint);
           drawnLabels.push(labelText);
 
+          if (this.showAxisTick) {
+            ctx.beginPath();
+            ctx.strokeStyle = this.axisLineColor;
+            ctx.moveTo(offsetPoint + (this.axisLineWidth ?? 1), yPoint);
+            ctx.lineTo(offsetPoint - AXIS_TICK_LENGTH, yPoint);
+            ctx.stroke();
+            ctx.closePath();
+          }
+
           if (index > 0 && this.showGrid) {
-            ctx.moveTo(offsetPoint, linePosition);
-            ctx.lineTo(offsetCounterPoint, linePosition);
+              ctx.beginPath();
+              ctx.strokeStyle = this.gridLineColor;
+              ctx.moveTo(offsetPoint, linePosition);
+              ctx.lineTo(offsetCounterPoint, linePosition);
+              ctx.stroke();
+              ctx.closePath();
           }
         }
         ctx.stroke();

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)];
 
+    const AXIS_TICK_LENGTH = 5;
+
     this.drawAxisTitle(chartRect, labelOffset);
 
     // label font 설정
@@ -253,24 +255,51 @@ class TimeCategoryScale extends Scale {
             });
           }
         }
+
+        if (this.showAxisTick) {
+          ctx.beginPath();
+          ctx.strokeStyle = this.axisLineColor;
+          ctx.moveTo(linePosition, offsetPoint);
+          ctx.lineTo(linePosition, offsetPoint + AXIS_TICK_LENGTH);
+          ctx.stroke();
+          ctx.closePath();
+        }
+
         if (
           ix < oriSteps && this.showGrid && (
             isStartPointRightOfRectStart || (!isStartPointRightOfRectStart && ix !== 0)
           )
         ) {
-          ctx.moveTo(linePosition, offsetPoint);
-          ctx.lineTo(linePosition, offsetCounterPoint);
+            ctx.beginPath();
+            ctx.strokeStyle = this.gridLineColor;
+            ctx.moveTo(linePosition, offsetPoint);
+            ctx.lineTo(linePosition, offsetCounterPoint);
+            ctx.stroke();
+            ctx.closePath();
         }
       } else {
         labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
         ctx.fillText(labelText, labelPoint, labelCenter);
 
+        if (this.showAxisTick) {
+          ctx.beginPath();
+          ctx.strokeStyle = this.axisLineColor;
+          ctx.moveTo(offsetPoint + (this.axisLineWidth ?? 1), linePosition);
+          ctx.lineTo(offsetPoint - AXIS_TICK_LENGTH, linePosition);
+          ctx.stroke();
+          ctx.closePath();
+        }
+
         if (
           ix < oriSteps && this.showGrid && (
             isStartPointRightOfRectStart || (!isStartPointRightOfRectStart && ix !== 0)
           )) {
-          ctx.moveTo(offsetPoint, linePosition);
-          ctx.lineTo(offsetCounterPoint, linePosition);
+              ctx.beginPath();
+              ctx.strokeStyle = this.gridLineColor;
+              ctx.moveTo(offsetPoint, linePosition);
+              ctx.lineTo(offsetCounterPoint, linePosition);
+              ctx.stroke();
+              ctx.closePath();
         }
       }
 

package/src/components/chart/uses.js

@@ -39,6 +39,7 @@ const DEFAULT_OPTIONS = {
     height: 24,
     allowResize: false,
     virtualScroll: false,
+    clickMode: 'active',
     table: {
       use: false,
       columns: {

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/select/uses.js

@@ -300,9 +300,11 @@ export const useDropdown = (param) => {
     if (props.filterable) {
       filterTextRef.value = '';
     }
-    mv.value = val;
     isDropbox.value = false;
-    changeMv();
+    if (mv.value !== val) {
+      mv.value = val;
+      changeMv();
+    }
   };
   const multipleClickItem = (val) => {
     if (props.filterable) {

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;