evui 3.4.8 → 3.4.10

package/src/components/grid/uses.js

@@ -332,7 +332,7 @@ export const resizeEvent = (params) => {
 
 export const clickEvent = (params) => {
   const { emit } = getCurrentInstance();
-  const { selectInfo, stores, setContextMenu } = params;
+  const { selectInfo, stores } = params;
   const getClickedRowData = (event, row) => {
     const tagName = event.target.tagName.toLowerCase();
     let cellInfo = {};
@@ -355,7 +355,7 @@ export const clickEvent = (params) => {
    * @param {object} event - 이벤트 객체
    * @param {array} row - row 데이터
    */
-  let timer = null;
+  let clickTimer = null;
   let lastIndex = -1;
   const onRowClick = (event, row, isRight) => {
     if (event.target.parentElement.classList?.contains('row-checkbox-input')) {
@@ -395,8 +395,10 @@ export const clickEvent = (params) => {
       }
     };
 
-    clearTimeout(timer);
-    timer = setTimeout(() => {
+    if (clickTimer) {
+      clearTimeout(clickTimer);
+    }
+    clickTimer = setTimeout(() => {
       if (selectInfo.useSelect) {
         const rowData = row[ROW_DATA_INDEX];
         const selected = row[ROW_SELECT_INDEX];
@@ -423,7 +425,6 @@ export const clickEvent = (params) => {
         lastIndex = row[ROW_INDEX];
         emit('update:selected', selectInfo.selectedRow);
         emit('click-row', getClickedRowData(event, row));
-        setContextMenu();
       }
     }, 100);
     return true;
@@ -435,7 +436,9 @@ export const clickEvent = (params) => {
    * @param {array} row - row 데이터
    */
   const onRowDblClick = (event, row) => {
-    clearTimeout(timer);
+    if (clickTimer) {
+      clearTimeout(clickTimer);
+    }
     emit('dblclick-row', getClickedRowData(event, row));
   };
   return { onRowClick, onRowDblClick };
@@ -523,7 +526,7 @@ export const checkEvent = (params) => {
 };
 
 export const sortEvent = (params) => {
-  const { sortInfo, stores, getColumnIndex, updatePagingInfo } = params;
+  const { sortInfo, stores, updatePagingInfo } = params;
   function OrderQueue() {
     this.orders = ['asc', 'desc', 'init'];
     this.dequeue = () => this.orders.shift();
@@ -539,6 +542,7 @@ export const sortEvent = (params) => {
   const onSort = (column, sortOrder) => {
     const sortable = column.sortable === undefined ? true : column.sortable;
     if (sortable) {
+      sortInfo.sortColumn = column;
       if (sortInfo.sortField !== column?.field) {
         order.orders = ['asc', 'desc', 'init'];
         sortInfo.sortField = column?.field;
@@ -574,8 +578,8 @@ export const sortEvent = (params) => {
       });
       return;
     }
-    const index = getColumnIndex(sortInfo.sortField);
-    const type = stores.originColumns[index]?.type || 'string';
+    const index = sortInfo.sortColumn.index;
+    const type = sortInfo.sortColumn.type || 'string';
     const sortFn = sortInfo.sortOrder === 'desc' ? setDesc : setAsc;
     const numberSortFn = sortInfo.sortOrder === 'desc' ? numberSetDesc : numberSetAsc;
     const getColumnValue = (a, b) => {
@@ -641,25 +645,26 @@ export const filterEvent = (params) => {
   /**
    * 전달받은 문자열 내 해당 키워드가 존재하는지 확인한다.
    *
-   * @param {string} search - 검색 키워드
-   * @param {string} origin - 기준 문자열
+   * @param {string} conditionValue - 검색 키워드
+   * @param {string} value - 기준 문자열
+   * @param {string} pos - 시작, 끝나는 문자열
    * @returns {boolean} 문자열 내 키워드 존재 유무
    */
-  const findLike = (search, origin, pos) => {
-    if (typeof search !== 'string' || origin === null) {
+  const findLike = (conditionValue, value, pos) => {
+    if (typeof conditionValue !== 'string' || value === null) {
       return false;
     }
-    let regx = search.replace(new RegExp('([\\.\\\\\\+\\*\\?\\[\\^\\]\\$\\(\\)\\{\\}\\=\\!\\<\\>\\|\\:\\-])', 'g'), '\\$1');
-    regx = regx.replace(/%/g, '.*').replace(/_/g, '.');
-    let regValue = `^${regx}$`;
+    const baseValueLower = value.toLowerCase();
+    const conditionValueLower = conditionValue.toLowerCase();
+    let result = baseValueLower.includes(conditionValueLower);
     if (pos) {
       if (pos === 'start') {
-        regValue = `^${regx}`;
+        result = baseValueLower.startsWith(conditionValueLower);
       } else if (pos === 'end') {
-        regValue = `${regx}$`;
+        result = baseValueLower.endsWith(conditionValueLower);
       }
     }
-    return RegExp(regValue, 'gi').test(origin);
+    return result;
   };
   /**
    * 필터 조건에 따라 문자열을 확인한다.
@@ -671,20 +676,23 @@ export const filterEvent = (params) => {
   const stringFilter = (item, condition) => {
     const comparison = condition.comparison;
     const conditionValue = condition.value;
-    const value = `${item[ROW_DATA_INDEX][condition.index]}`;
+    let value = item[ROW_DATA_INDEX][condition.index];
+    if (value || value === 0) {
+      value = `${item[ROW_DATA_INDEX][condition.index]}`;
+    }
     let result;
     if (comparison === '=') {
       result = conditionValue.toLowerCase() === value.toLowerCase();
     } else if (comparison === '!=') {
       result = conditionValue.toLowerCase() !== value.toLowerCase();
     } else if (comparison === '%s%') {
-      result = findLike(`%${conditionValue}%`, value);
+      result = findLike(conditionValue, value);
     } else if (comparison === 'notLike') {
-      result = !findLike(`%${conditionValue}%`, value);
+      result = !findLike(conditionValue, value);
     } else if (comparison === 's%') {
-      result = findLike(`${conditionValue}`, value, 'start');
+      result = findLike(conditionValue, value, 'start');
     } else if (comparison === '%s') {
-      result = findLike(`${conditionValue}`, value, 'end');
+      result = findLike(conditionValue, value, 'end');
     } else if (comparison === 'isEmpty') {
       result = value === undefined || value === null || value === '';
     } else if (comparison === 'isNotEmpty') {
@@ -723,13 +731,25 @@ export const filterEvent = (params) => {
     } else if (comparison === '!=') {
       result = value !== conditionValue;
     } else if (comparison === 'isEmpty') {
-      result = value === undefined || value === null;
+      result = value === undefined || value === null || isNaN(value);
     } else if (comparison === 'isNotEmpty') {
       result = !!value;
     }
 
     return result;
   };
+  const booleanFilter = (item, condition) => {
+    const comparison = condition.comparison;
+    const conditionValue = condition.value;
+    const value = `${item[ROW_DATA_INDEX][condition.index]}`;
+    let result;
+
+    if (comparison === '=') {
+      result = value === conditionValue;
+    }
+
+    return result;
+  };
   /**
    * 필터 조건이 적용된 데이터를 반환한다.
    *
@@ -739,60 +759,67 @@ export const filterEvent = (params) => {
    * @returns {boolean} 확인 결과
    */
   const getFilteringData = (data, columnType, condition) => {
-    const filterFn = columnType === 'string' || columnType === 'stringNumber'
+    let filterFn = columnType === 'string' || columnType === 'stringNumber'
       ? stringFilter : numberFilter;
+    if (columnType === 'boolean') {
+      filterFn = booleanFilter;
+    }
     return data.filter(row => filterFn(row, condition, columnType)) || [];
   };
   /**
    * 전체 데이터에서 설정된 필터 적용 후 결과를 filterStore 에 저장한다.
    */
   const setFilter = () => {
-    let filterStore = [];
-    let isApply = false;
-
     const filteringItemsByColumn = filterInfo.filteringItemsByColumn;
     const fields = Object.keys(filteringItemsByColumn);
     const originStore = stores.originStore;
+    let filterStore = [];
+    let filteredOnce = false;
 
     fields.forEach((field) => {
       const filters = filteringItemsByColumn[field];
       const index = getColumnIndex(field);
       const columnType = props.columns[index].type;
 
-      filters.forEach((filterItem) => {
-        isApply = true;
-        if (!filterStore.length && Object.keys(filteringItemsByColumn).length < 2) {
+      filters.forEach((item, ix) => {
+        if (!filterStore.length && !filteredOnce) {
           filterStore = getFilteringData(originStore, columnType, {
-            ...filterItem,
+            ...item,
             index,
           });
-        } else if (filterItem.operator === 'or' || filterInfo.columnOperator === 'or') {
+        } else if (ix === 0 && filterInfo.columnOperator === 'or') {
           filterStore.push(...getFilteringData(originStore, columnType, {
-            ...filterItem,
+            ...item,
+            index,
+          }));
+        } else if (item.operator === 'or') {
+          filterStore.push(...getFilteringData(originStore, columnType, {
+            ...item,
             index,
           }));
         } else {
           filterStore = getFilteringData(filterStore, columnType, {
-            ...filterItem,
+            ...item,
             index,
           });
         }
+        filteredOnce = true;
       });
     });
 
-    if (!isApply) {
+    if (!filteredOnce) {
       stores.filterStore = originStore;
     } else {
       stores.filterStore = uniqBy(filterStore, JSON.stringify);
     }
   };
 
-  let timer = null;
+  let searchTimer = null;
   const onSearch = (searchWord) => {
-    if (timer) {
-      clearTimeout(timer);
+    if (searchTimer) {
+      clearTimeout(searchTimer);
     }
-    timer = setTimeout(() => {
+    searchTimer = setTimeout(() => {
       filterInfo.isSearch = false;
       filterInfo.searchWord = searchWord;
       if (searchWord) {
@@ -861,35 +888,65 @@ export const contextMenuEvent = (params) => {
   /**
    * 컨텍스트 메뉴를 설정한다.
    *
-   * @param {boolean} useCustom - 사용자 지정 메뉴 사용 유무
+   * @param {object} event - 이벤트 객체
    */
-  const setContextMenu = (useCustom = true) => {
+  let contextmenuTimer = null;
+  const setContextMenu = (e) => {
+    if (contextmenuTimer) {
+      clearTimeout(contextmenuTimer);
+    }
     const menuItems = [];
+    contextmenuTimer = setTimeout(() => {
+      if (contextInfo.customContextMenu.length) {
+        const customItems = contextInfo.customContextMenu.map(
+          (item) => {
+            const menuItem = item;
+            if (menuItem.validate) {
+              menuItem.disabled = !menuItem.validate(menuItem.itemId, selectInfo.selectedRow);
+            }
 
-    if (useCustom && contextInfo.customContextMenu.length) {
-      const customItems = contextInfo.customContextMenu.map(
-        (item) => {
-          const menuItem = item;
-          if (menuItem.validate) {
-            menuItem.disabled = !menuItem.validate(menuItem.itemId, selectInfo.selectedRow);
-          }
+            menuItem.selectedRow = selectInfo.selectedRow ?? [];
+            menuItem.contextmenuInfo = selectInfo.contextmenuInfo ?? [];
 
-          menuItem.selectedRow = selectInfo.selectedRow ?? [];
-          menuItem.contextmenuInfo = selectInfo.contextmenuInfo ?? [];
+            return menuItem;
+          });
 
-          return menuItem;
-        });
+        menuItems.push(...customItems);
+      }
 
-      menuItems.push(...customItems);
+      contextInfo.contextMenuItems = menuItems;
+      contextInfo.menu.show(e);
+    }, 200);
+  };
+  /**
+   * 마우스 우클릭 이벤트를 처리한다.
+   *
+   * @param {object} event - 이벤트 객체
+   */
+  const onContextMenu = (e) => {
+    e.preventDefault();
+    const target = e.target;
+    const rowIndex = target.closest('.row')?.dataset?.index;
+    let clickedRow = null;
+    if (rowIndex) {
+      clickedRow = stores.viewStore.find(row => row[ROW_INDEX] === +rowIndex)?.[ROW_DATA_INDEX];
+    }
+    if (clickedRow) {
+      selectInfo.contextmenuInfo = [clickedRow];
+      setContextMenu(e);
     }
-
-    contextInfo.contextMenuItems = menuItems;
   };
+  /**
+   * 컬럼 기능을 수행하는 Contextmenu 를 생성한다.
+   *
+   * @param {object} event - 이벤트 객체
+   * @param {object} column - 컬럼 정보
+   */
   const onColumnContextMenu = (event, column) => {
     if (event.target.className === 'column-name') {
       const sortable = column.sortable === undefined ? true : column.sortable;
       const filterable = filterInfo.isFiltering
-        && column.filterable === undefined ? true : column.filterable;
+      && column.filterable === undefined ? true : column.filterable;
       contextInfo.columnMenuItems = [
         {
           text: 'Ascending',
@@ -933,23 +990,6 @@ export const contextMenuEvent = (params) => {
       ];
     }
   };
-  /**
-   * 마우스 우클릭 이벤트를 처리한다.
-   *
-   * @param {object} event - 이벤트 객체
-   */
-  const onContextMenu = (event) => {
-    const target = event.target;
-    const rowIndex = target.closest('.row')?.dataset?.index;
-    let clickedRow = null;
-    if (rowIndex) {
-      clickedRow = stores.viewStore.find(row => row[ROW_INDEX] === +rowIndex)?.[ROW_DATA_INDEX];
-    }
-    if (clickedRow) {
-      selectInfo.contextmenuInfo = [clickedRow];
-      // setContextMenu();
-    }
-  };
   return {
     setContextMenu,
     onContextMenu,

package/src/components/treeGrid/TreeGrid.vue

@@ -54,7 +54,10 @@
           <li
             v-if="useCheckbox.use"
             :class="headerCheckboxClass"
-            :style="`width: ${minWidth}px;`"
+            :style="{
+              width: `${minWidth}px`,
+              'border-right': '1px solid #CFCFCF',
+            }"
           >
             <ev-checkbox
               v-if="isHeaderCheckbox"
@@ -92,6 +95,21 @@
               />
             </li>
           </template>
+          <!-- Row Contextmenu Column -->
+          <li
+            v-if="$props.option.customContextMenu?.length"
+            :class="{
+              column: true,
+              'non-border': !!borderStyle,
+            }"
+            :style="{
+              width: '30px',
+              'min-width': '30px',
+              'margin-right': (hasVerticalScrollBar || hasHorizontalScrollBar)
+                ? `${scrollWidth}px` : '0px',
+            }"
+          >
+          </li>
         </ul>
       </div>
       <!-- Body -->
@@ -120,6 +138,8 @@
               :collapse-icon="option.collapseIcon"
               :parent-icon="option.parentIcon"
               :child-icon="option.childIcon"
+              :custom-context-menu="customContextMenu"
+              :menu-ref="menu"
               :is-resize="isResize"
               :row-height="rowHeight"
               :min-width="minWidth"
@@ -129,6 +149,7 @@
               @expand-tree-data="handleExpand"
               @click-tree-data="onRowClick"
               @dbl-click-tree-data="onRowDblClick"
+              @context-menu="onContextMenu"
             >
               <!-- Cell Renderer -->
               <template
@@ -152,6 +173,14 @@
                   </span>
                 </template>
               </template>
+              <template
+                v-if="$slots.contextmenuIcon"
+                #contextmenuIconNode
+              >
+                <slot
+                  name="contextmenuIcon"
+                />
+              </template>
             </tree-grid-node>
             <tr v-if="!viewStore.length">
               <td class="is-empty">No records</td>
@@ -469,6 +498,7 @@ export default {
       isRenderer,
       updateVScroll,
       updateHScroll,
+      contextInfo,
     });
 
     const {
@@ -768,6 +798,7 @@ export default {
         'margin-right': (stores.orderedColumns.length - 1 === index
           && scrollInfo.hasVerticalScrollBar
           && scrollInfo.hasHorizontalScrollBar) ? `${resizeInfo.scrollWidth}px` : '0px',
+        'border-right': stores.orderedColumns.length - 1 === index ? 'none' : '1px solid #CFCFCF',
       };
     };
     const getSlotName = column => `${column}Node`;

package/src/components/treeGrid/TreeGridNode.vue

@@ -8,9 +8,11 @@
     <td
       v-if="useCheckbox.use"
       :class="checkboxClass"
-      :style="`
-        width: ${minWidth}px;
-        height: ${rowHeight}px;`"
+      :style="{
+        width: `${minWidth}px`,
+        height: `${rowHeight}px`,
+        'border-right': '1px solid #CFCFCF',
+      }"
     >
       <ev-checkbox
         v-model="node.checked"
@@ -28,9 +30,9 @@
         :data-name="column.field"
         :data-index="node.index"
         :class="getColumnClass(column, cellIndex)"
-        :style="getColumnStyle(column)"
+        :style="getColumnStyle(column, cellIndex)"
       >
-        <div class="td-content">
+        <div class="td-content__wrapper">
           <!--Level Depth-->
           <span
             v-if="cellIndex === expandColumnIdx"
@@ -76,7 +78,7 @@
               <i></i>
             </span>
           </span>
-          <div class="slot-wrapper">
+          <div class="td-content">
           <!-- cell renderer -->
           <template v-if="!!$slots[column.field + 'Node']">
             <slot
@@ -90,14 +92,52 @@
         </div>
       </td>
     </template>
+    <!-- Row Contextmenu Button -->
+    <td
+      v-if="customContextMenu?.length"
+      :class="{
+        'row-contextmenu': true,
+        'non-border': !!borderStyle,
+      }"
+      :style="{
+        position: 'sticky',
+        right: 0,
+        width: '30px',
+        height: `${rowHeight}px`,
+        'min-width': '30px',
+        'line-height': `${rowHeight}px`,
+      }"
+    >
+      <template v-if="$slots.contextmenuIconNode">
+        <span
+          class="row-contextmenu__btn"
+          @click="onContextMenu($event)"
+          @click.prevent="menuRef.show"
+        >
+          <slot
+            name="contextmenuIconNode"
+          />
+        </span>
+      </template>
+      <template v-else>
+        <grid-option-button
+          icon="ev-icon-warning2"
+          class="row-contextmenu__btn"
+          @click="onContextMenu($event)"
+          @click.prevent="menuRef.show"
+        />
+      </template>
+    </td>
   </tr>
 </template>
 
 <script>
 import { computed } from 'vue';
+import GridOptionButton from '@/components/grid/grid.optionButton.vue';
 
 export default {
   name: 'TreeGridNode',
+  components: { GridOptionButton },
   props: {
     dataIndex: {
       type: Number,
@@ -135,6 +175,14 @@ export default {
       type: String,
       default: '',
     },
+    customContextMenu: {
+      type: [Array],
+      default: () => [],
+    },
+    menuRef: {
+      type: Object,
+      default: null,
+    },
     rowHeight: {
       type: Number,
       default: 35,
@@ -157,6 +205,7 @@ export default {
     'expand-tree-data': null,
     'click-tree-data': null,
     'dbl-click-tree-data': null,
+    'context-menu': null,
   },
   setup(props, { emit }) {
     const onCheck = ($event, data) => {
@@ -171,6 +220,9 @@ export default {
     const onDblClick = ($event, data) => {
       emit('dbl-click-tree-data', $event, data);
     };
+    const onContextMenu = ($event) => {
+      emit('context-menu', $event);
+    };
     const expandIconClasses = (node) => {
       const expandIcon = props.expandIcon ? props.expandIcon : '';
       const collapseIcon = props.expandIcon ? props.collapseIcon : '';
@@ -205,11 +257,13 @@ export default {
       [column.align]: column.align,
       'non-border': !!props.borderStyle,
     });
-    const getColumnStyle = column => ({
+    const getColumnStyle = (column, cellIndex) => ({
       width: `${column.width}px`,
       height: `${props.rowHeight}px`,
       'line-height': `${props.rowHeight}px`,
       'min-width': `${props.minWidth}px`,
+      'border-right': props.orderedColumns.length - 1 === cellIndex
+        ? 'none' : '1px solid #CFCFCF',
     });
     const getDepthStyle = (nodeLevel) => {
       const depthSize = nodeLevel * 13;
@@ -228,6 +282,7 @@ export default {
       onExpand,
       onClick,
       onDblClick,
+      onContextMenu,
       expandIconClasses,
       getRowClass,
       getColumnClass,
@@ -279,7 +334,7 @@ export default {
     background: url('./tree_icon.png') no-repeat -14px -35px;
   }
 }
-.slot-wrapper {
+.td-content {
   position: relative;
   flex: 1;
 }

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

@@ -28,6 +28,10 @@
       border-bottom: 1px solid evThemed('grid-bottom-border');
     }
   }
+  .row-contextmenu__btn {
+    display: none;
+    vertical-align: middle;
+  }
 }
 
 .column-list {
@@ -134,6 +138,15 @@
       background: #5AB7FF;
       color: #FFFFFF;
     }
+    &:hover {
+      .row-contextmenu__btn {
+        display: grid;
+        &:hover {
+          cursor: pointer;
+          opacity: 0.6;
+        }
+      }
+    }
   }
 
   .cell {
@@ -184,7 +197,7 @@
     }
     &.tree-td {
       text-align: left !important;
-      .td-content {
+      .td-content__wrapper {
         display: flex;
         position: relative;
         align-items: center;

package/src/components/treeGrid/uses.js

@@ -178,6 +178,7 @@ export const resizeEvent = (params) => {
     isRenderer,
     updateVScroll,
     updateHScroll,
+    contextInfo,
   } = params;
   /**
    * 고정 너비, 스크롤 유무 등에 따른 컬럼 너비를 계산한다.
@@ -207,7 +208,7 @@ export const resizeEvent = (params) => {
         }
 
         return acc;
-      }, { totalWidth: 0, emptyCount: 0 });
+      }, { totalWidth: contextInfo.customContextMenu.length ? 30 : 0, emptyCount: 0 });
 
       if (resizeInfo.rowHeight * store.length > elHeight - resizeInfo.scrollWidth) {
         elWidth -= resizeInfo.scrollWidth;
@@ -373,7 +374,8 @@ export const clickEvent = (params) => {
   let timer = null;
   const onRowClick = (event, row) => {
     if (event.target && event.target.parentElement
-      && event.target.parentElement.classList.contains('row-checkbox-input')) {
+      && (event.target.parentElement.classList.contains('row-checkbox-input')
+        || event.target.closest('td')?.classList?.contains('row-contextmenu'))) {
       return false;
     }
     clearTimeout(timer);