evui 3.4.7 → 3.4.9

package/package.json

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

package/src/components/grid/Grid.vue

@@ -339,6 +339,7 @@
                 'non-border': !!borderStyle && borderStyle !== 'rows',
               }"
               @click="onRowClick($event, row)"
+              @contextmenu="onRowClick($event, row, true)"
               @dblclick="onRowDblClick($event, row)"
             >
               <!-- Row Checkbox -->
@@ -758,11 +759,6 @@ export default {
       updatePagingInfo,
     });
 
-    const {
-      onRowClick,
-      onRowDblClick,
-    } = clickEvent({ selectInfo, stores });
-
     const {
       onCheck,
       onCheckAll,
@@ -846,6 +842,11 @@ export default {
       filterInfo,
     });
 
+    const {
+      onRowClick,
+      onRowDblClick,
+    } = clickEvent({ selectInfo, stores, setContextMenu });
+
     const {
       onDragStart,
       onDragOver,

package/src/components/grid/grid.filterSetting.vue

@@ -36,7 +36,14 @@
               :items="items2"
               @change="changeComparison(item.comparison, idx)"
             />
+            <ev-select
+              v-if="$props.column.type === 'boolean'"
+              v-model="item.value"
+              class="ev-grid-filter-setting__row--comparison"
+              :items="booleanItems"
+            />
             <ev-text-field
+              v-else
               v-model="item.value"
               class="ev-grid-filter-setting__row--value"
               :disabled="item.comparison === 'isEmpty' || item.comparison === 'isNotEmpty'"
@@ -115,6 +122,10 @@ export default {
       { name: 'AND', value: 'and' },
       { name: 'OR', value: 'or' },
     ];
+    const booleanItems = [
+      { name: 'true', value: 'true' },
+      { name: 'false', value: 'false' },
+    ];
     const numberItems = [
       { name: '=', value: '=' },
       { name: '!=', value: '!=' },
@@ -142,7 +153,7 @@ export default {
         return [...numberItems, ...commonItems];
       } else if (columnType === 'boolean') {
         return [
-          { name: 'Is', value: 'is' },
+          { name: '=', value: '=' },
         ];
       }
       return [];
@@ -153,7 +164,7 @@ export default {
       set: val => emit('update:isShow', val),
     });
     const addRow = () => {
-      const operator = filteringItems.value.length > 2 ? filteringItems.value[2].operator : 'and';
+      const operator = filteringItems.value.length >= 2 ? filteringItems.value[1].operator : 'and';
       filteringItems.value.push({
         comparison: '=',
         operator,
@@ -226,6 +237,7 @@ export default {
       isShowFilterSetting,
       items1,
       items2,
+      booleanItems,
       addRow,
       removeRow,
       changeOperator,

package/src/components/grid/uses.js

@@ -332,7 +332,7 @@ export const resizeEvent = (params) => {
 
 export const clickEvent = (params) => {
   const { emit } = getCurrentInstance();
-  const { selectInfo, stores } = params;
+  const { selectInfo, stores, setContextMenu } = params;
   const getClickedRowData = (event, row) => {
     const tagName = event.target.tagName.toLowerCase();
     let cellInfo = {};
@@ -357,10 +357,11 @@ export const clickEvent = (params) => {
    */
   let timer = null;
   let lastIndex = -1;
-  const onRowClick = (event, row) => {
+  const onRowClick = (event, row, isRight) => {
     if (event.target.parentElement.classList?.contains('row-checkbox-input')) {
       return false;
     }
+    const isContextmenu = !!event.target.closest('td')?.classList?.contains('row-contextmenu');
     const onMultiSelectByKey = (keyType, selected, selectedRow) => {
       if (keyType === 'shift') {
         const rowIndex = row[ROW_INDEX];
@@ -409,6 +410,11 @@ export const clickEvent = (params) => {
 
         if (selectInfo.multiple && keyType) { // multi select
           onMultiSelectByKey(keyType, selected, rowData);
+        } else if (isRight || isContextmenu) {
+          selectInfo.selectedRow = [...selectInfo.selectedRow];
+          if (!selectInfo.selectedRow.includes(rowData)) {
+            selectInfo.selectedRow = [rowData];
+          }
         } else if (selected) { // single select
           selectInfo.selectedRow = [];
         } else {
@@ -417,6 +423,7 @@ export const clickEvent = (params) => {
         lastIndex = row[ROW_INDEX];
         emit('update:selected', selectInfo.selectedRow);
         emit('click-row', getClickedRowData(event, row));
+        setContextMenu();
       }
     }, 100);
     return true;
@@ -664,7 +671,10 @@ 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();
@@ -716,13 +726,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;
+  };
   /**
    * 필터 조건이 적용된 데이터를 반환한다.
    *
@@ -732,8 +754,11 @@ 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)) || [];
   };
   /**
@@ -746,7 +771,7 @@ export const filterEvent = (params) => {
     const filteringItemsByColumn = filterInfo.filteringItemsByColumn;
     const fields = Object.keys(filteringItemsByColumn);
     const originStore = stores.originStore;
-
+    let filteredOnce = false;
     fields.forEach((field) => {
       const filters = filteringItemsByColumn[field];
       const index = getColumnIndex(field);
@@ -754,7 +779,7 @@ export const filterEvent = (params) => {
 
       filters.forEach((filterItem) => {
         isApply = true;
-        if (!filterStore.length && Object.keys(filteringItemsByColumn).length < 2) {
+        if (!filterStore.length && !filteredOnce) {
           filterStore = getFilteringData(originStore, columnType, {
             ...filterItem,
             index,
@@ -770,6 +795,7 @@ export const filterEvent = (params) => {
             index,
           });
         }
+        filteredOnce = true;
       });
     });
 
@@ -940,7 +966,7 @@ export const contextMenuEvent = (params) => {
     }
     if (clickedRow) {
       selectInfo.contextmenuInfo = [clickedRow];
-      setContextMenu();
+      // setContextMenu();
     }
   };
   return {
@@ -1079,11 +1105,12 @@ export const columnSettingEvent = (params) => {
     columnSettingInfo.hiddenColumn = '';
   };
   const setFilteringColumn = () => {
-    columnSettingInfo.visibleColumnIdx = stores.filteredColumns.map(column => column.index);
+    columnSettingInfo.visibleColumnIdx = stores.filteredColumns.map(col => col.index);
 
-    const originColumnIdx = stores.originColumns.map(column => column.index);
+    const originColumnIdx = stores.originColumns.filter(col => !col.hide).map(col => col.index);
     const visibleColumnIdx = columnSettingInfo.visibleColumnIdx;
-    columnSettingInfo.isFilteringColumn = (visibleColumnIdx !== originColumnIdx.length);
+
+    columnSettingInfo.isFilteringColumn = (visibleColumnIdx.length !== originColumnIdx.length);
 
     // 컬럼을 필터링했을 때, 검색어가 있는 경우 재검색
     if (props.option.searchValue) {
@@ -1094,17 +1121,18 @@ export const columnSettingEvent = (params) => {
   const onApplyColumn = (columns) => {
     columnSettingInfo.hiddenColumn = '';
     stores.filteredColumns = stores.originColumns
-      .filter(cur => columns.includes(cur.field) || !cur.caption);
+      .filter(col => columns.includes(col.field) || !col.caption);
     setFilteringColumn();
   };
   const setColumnHidden = (val) => {
-    const columns = columnSettingInfo.isFilteringColumn
-      ? stores.filteredColumns : stores.originColumns;
+    const columns = (columnSettingInfo.isFilteringColumn
+      ? stores.filteredColumns : stores.originColumns)
+      .filter(col => !col.hide);
 
     if (columns.length === 1) {
       return;
     }
-    stores.filteredColumns = columns.filter(column => column.field !== val);
+    stores.filteredColumns = columns.filter(col => col.field !== val);
     columnSettingInfo.hiddenColumn = val;
     setFilteringColumn();
   };