evui 3.4.43 → 3.4.44

package/package.json

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

package/src/components/grid/Grid.vue

@@ -367,6 +367,7 @@
                   highlight: row[0] === highlightIdx,
                   'non-border': !!borderStyle && borderStyle !== 'rows',
                 }"
+                :disabled="row[ROW_DISABLED_INDEX]"
                 @click="onRowClick($event, row)"
                 @contextmenu="onRowClick($event, row, true)"
                 @dblclick="onRowDblClick($event, row)"
@@ -388,7 +389,7 @@
                   <ev-checkbox
                     v-model="row[1]"
                     class="row-checkbox-input"
-                    :disabled="row[5]"
+                    :disabled="row[5] || row[ROW_DISABLED_INDEX]"
                     @change="onCheck($event, row)"
                   />
                 </td>
@@ -439,12 +440,14 @@
                       'border-right': orderedColumns.length - 1 === cellIndex
                         ? 'none' : '1px solid #CFCFCF',
                     }"
+                    :disabled="row[ROW_DISABLED_INDEX]"
                   >
                     <!-- Cell Renderer -->
                     <div v-if="!!$slots[column.field]">
                       <slot
                         :name="column.field"
                         :item="{ row, column }"
+                        :disabled="row[ROW_DISABLED_INDEX]"
                       />
                     </div>
                     <!-- Cell Value -->
@@ -470,10 +473,12 @@
                     'min-width': '30px',
                     'line-height': `${rowHeight}px`,
                   }"
+                  :disabled="row[ROW_DISABLED_INDEX]"
                 >
                   <template v-if="$slots.contextmenuIcon">
                     <span
                       class="row-contextmenu__btn"
+                      :disabled="row[ROW_DISABLED_INDEX]"
                       @click="onContextMenu($event)"
                     >
                       <slot name="contextmenuIcon"></slot>
@@ -483,6 +488,7 @@
                     <grid-option-button
                       icon="ev-icon-warning2"
                       class="row-contextmenu__btn"
+                      :disabled="row[ROW_DISABLED_INDEX]"
                       @click="onContextMenu($event)"
                     />
                   </template>
@@ -658,6 +664,10 @@ export default {
       type: [Array],
       default: () => [],
     },
+    disabled: {
+      type: [Array],
+      default: () => [],
+    },
     option: {
       type: Object,
       default: () => ({}),
@@ -684,6 +694,7 @@ export default {
     const ROW_DATA_INDEX = 2;
     const ROW_SELECT_INDEX = 3;
     const ROW_EXPAND_INDEX = 4;
+    const ROW_DISABLED_INDEX = 6;
     const {
       isRenderer,
       getComponentName,
@@ -731,8 +742,11 @@ export default {
         left: 0,
         columnListMenuWidth: 0,
       },
+      useDefaultColumnSetting: computed(
+        () => props.option?.useGridSetting?.useDefaultColumnSetting ?? true,
+      ),
       columnSettingTextInfo: {
-        columnList: props.option?.useGridSetting?.columnMenuText ?? 'Column List',
+        title: props.option?.useGridSetting?.columnMenuText ?? 'Column List',
         search: props.option?.useGridSetting?.searchText ?? 'Search',
         empty: props.option?.useGridSetting?.emptyText ?? 'No records',
         ok: props.option?.useGridSetting?.okBtnText ?? 'OK',
@@ -761,7 +775,7 @@ export default {
         const extraColumns = stores.originColumns?.filter(
           column => !orderedColumnsIndexes.includes(column.index),
         );
-        const copyOrderedColumns = cloneDeep(stores.orderedColumns);
+        const copyOrderedColumns = stores.orderedColumns;
         return [...copyOrderedColumns, ...extraColumns];
       }),
     });
@@ -1057,14 +1071,29 @@ export default {
 
     watch(
       () => props.columns,
-      () => {
-        sortInfo.isSorting = false;
-        sortInfo.sortField = '';
-        filterInfo.filteringColumn = null;
-        filterInfo.filteringItemsByColumn = {};
-        stores.filterStore = [];
-        setStore([], false);
-        initColumnSettingInfo();
+      (newColumns, prevColumns) => {
+        const isSameColumns = () => {
+          // Column의 field로 동일한 컬럼인지 확인
+          const newColumnsFields = newColumns.map(column => column.field);
+          const prevColumnsFields = prevColumns.map(column => column.field);
+          return prevColumnsFields.every(field => newColumnsFields.includes(field));
+        };
+
+        if (newColumns.length !== prevColumns.length || !isSameColumns()) {
+          // 동일하지 않은 컬럼으로 변경된 경우 initialize
+          sortInfo.isSorting = false;
+          sortInfo.sortField = '';
+          filterInfo.filteringColumn = null;
+          filterInfo.filteringItemsByColumn = {};
+          stores.filterStore = [];
+          setStore([], false);
+          initColumnSettingInfo();
+        } else if (stores.filteredColumns.length) {
+          // 새로운 컬럼 기준으로 filteredColumns 를 업데이트 한다.
+          stores.filteredColumns = newColumns.filter(
+            column => !column.hidden && !column.hiddenDisplay,
+          );
+        }
       }, { deep: true },
     );
     watch(
@@ -1101,6 +1130,13 @@ export default {
         checkInfo.checkedRows = value;
       },
     );
+    watch(() => props.disabled, () => {
+      if (stores.store.length) {
+        stores.store.forEach((row) => {
+          row[ROW_DISABLED_INDEX] = props.disabled.includes(row[ROW_DATA_INDEX]);
+        });
+      }
+    }, { deep: true });
     watch(
       () => checkInfo.checkedRows,
       (value) => {
@@ -1131,7 +1167,8 @@ export default {
       (value) => {
         if (selectInfo.useSelect) {
           stores.store.forEach((row) => {
-            row[ROW_SELECT_INDEX] = value.includes(row[ROW_DATA_INDEX]);
+            row[ROW_SELECT_INDEX] = value.includes(row[ROW_DATA_INDEX])
+            && !props.disabled.includes(row[ROW_DATA_INDEX]);
           });
           updateVScroll();
         }
@@ -1455,6 +1492,8 @@ export default {
       onDragStart,
       onDragOver,
       onDrop,
+
+      ROW_DISABLED_INDEX,
     };
   },
 };

package/src/components/grid/GridColumnSetting.vue

@@ -8,7 +8,7 @@
         :style="columnSettingStyle"
       >
         <div class="ev-grid-column-setting__header">
-          <p class="header-title"> {{ textInfo.columnList }} </p>
+          <p class="header-title"> {{ textInfo.title }} </p>
           <ev-text-field
             v-model="searchVm"
             type="search"
@@ -92,7 +92,7 @@ export default {
     textInfo: {
       type: Object,
       default: () => ({
-        columnList: 'Column List',
+        title: 'Column List',
         search: 'Search',
         empty: 'No records',
         ok: 'OK',

package/src/components/grid/style/grid.scss

@@ -151,6 +151,10 @@
     color: inherit;
     white-space: nowrap;
 
+    &[disabled=true] {
+      cursor: not-allowed;
+    }
+
     @include evThemify() {
       border-bottom: 1px solid evThemed('grid-bottom-border');
     }
@@ -166,7 +170,7 @@
       color: #FFFFFF;
     }
     &:hover {
-      .row-contextmenu__btn {
+      .row-contextmenu__btn:not([disabled=true]) {
         display: grid;
         &:hover {
           cursor: pointer;

package/src/components/grid/uses.js

@@ -515,6 +515,7 @@ export const checkEvent = (params) => {
 
       const isAllChecked = store
         .filter(rowData => !props.uncheckable.includes(rowData[ROW_DATA_INDEX]))
+        .filter(rowData => !props.disabled.includes(rowData[ROW_DATA_INDEX]))
         .every(d => d[ROW_CHECK_INDEX]);
       if (store.length && isAllChecked) {
         checkInfo.isHeaderChecked = true;
@@ -545,7 +546,8 @@ export const checkEvent = (params) => {
       store = getPagingData();
     }
     store.forEach((row) => {
-      const uncheckable = props.uncheckable.includes(row[ROW_DATA_INDEX]);
+      const uncheckable = props.uncheckable.includes(row[ROW_DATA_INDEX])
+        || props.disabled.includes(row[ROW_DATA_INDEX]);
       if (isHeaderChecked) {
         if (!checkInfo.checkedRows.includes(row[ROW_DATA_INDEX]) && !uncheckable) {
           checkInfo.checkedRows.push(row[ROW_DATA_INDEX]);
@@ -742,7 +744,8 @@ export const filterEvent = (params) => {
       checkInfo.isHeaderChecked = rowData.length === checkedCount;
       checkInfo.isHeaderIndeterminate = (rowData.length !== checkedCount) && checkedCount > 0;
       checkInfo.isHeaderUncheckable = rowData
-        .every(row => props.uncheckable.includes(row[ROW_DATA_INDEX]));
+        .every(row => props.uncheckable.includes(row[ROW_DATA_INDEX])
+          || props.disabled.includes(row[ROW_DATA_INDEX]));
     }
   };
   /**
@@ -940,8 +943,8 @@ export const filterEvent = (params) => {
         stores.searchStore = stores.store.filter((row) => {
           let isShow = false;
           const rowData = columnSettingInfo.isFilteringColumn ? row[ROW_DATA_INDEX]
-              .filter((data, idx) => columnSettingInfo.visibleColumnIdx
-                .includes(idx)) : row[ROW_DATA_INDEX];
+            .filter((data, idx) => columnSettingInfo.visibleColumnIdx
+              .includes(idx)) : row[ROW_DATA_INDEX];
 
           for (let ix = 0; ix < stores.orderedColumns.length; ix++) {
             const column = stores.orderedColumns[ix] || {};
@@ -1050,7 +1053,7 @@ export const contextMenuEvent = (params) => {
     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;
       const columnMenuItems = [
         {
           text: contextInfo.columnMenuTextInfo?.ascending ?? 'Ascending',
@@ -1114,8 +1117,9 @@ export const contextMenuEvent = (params) => {
    * @param {object} e - 이벤트 객체
    */
   const onGridSettingContextMenu = (e) => {
+    const { useDefaultColumnSetting, columnSettingTextInfo } = columnSettingInfo;
     const columnListMenu = {
-      text: columnSettingInfo.columnSettingTextInfo?.columnList ?? 'Column List',
+      text: columnSettingTextInfo?.columnList ?? 'Column List',
       isShowMenu: true,
       click: () => {
         columnSettingInfo.isShowColumnSetting = true;
@@ -1126,10 +1130,11 @@ export const contextMenuEvent = (params) => {
     if (contextInfo.customGridSettingContextMenu.length) {
       contextInfo.gridSettingContextMenuItems = [
         ...contextInfo.customGridSettingContextMenu,
-        columnListMenu,
       ];
-    } else {
-      contextInfo.gridSettingContextMenuItems = [columnListMenu];
+    }
+
+    if (useDefaultColumnSetting) {
+      contextInfo.gridSettingContextMenuItems.push(columnListMenu);
     }
     contextInfo.gridSettingMenu.show(e);
   };
@@ -1168,7 +1173,7 @@ export const storeEvent = (params) => {
       let hasUnChecked = false;
       rows.forEach((row, idx) => {
         const checked = props.checked.includes(row);
-        const uncheckable = props.uncheckable.includes(row);
+        const uncheckable = props.uncheckable.includes(row) || props.disabled.includes(row);
         let selected = false;
         if (selectInfo.useSelect) {
           selected = props.selected.includes(row);
@@ -1180,11 +1185,13 @@ export const storeEvent = (params) => {
         if (expandedInfo.useRowDetail) {
           expanded = props.expanded.includes(row);
         }
-        store.push([idx, checked, row, selected, expanded, uncheckable]);
+        const disabled = props.disabled.includes(row);
+        store.push([idx, checked, row, selected, expanded, uncheckable, disabled]);
       });
       checkInfo.isHeaderChecked = rows.length > 0 ? !hasUnChecked : false;
       checkInfo.isHeaderIndeterminate = hasUnChecked && !!checkInfo.checkedRows.length;
-      checkInfo.isHeaderUncheckable = rows.every(row => props.uncheckable.includes(row));
+      checkInfo.isHeaderUncheckable = rows.every(row => props.uncheckable.includes(row)
+        || props.disabled.includes(row));
       stores.originStore = store;
     }
     if (filterInfo.isFiltering) {

package/src/components/treeGrid/TreeGrid.vue

@@ -259,7 +259,6 @@ import {
   onMounted,
   onUnmounted,
 } from 'vue';
-import { cloneDeep } from 'lodash-es';
 import TreeGridNode from './TreeGridNode';
 import Toolbar from './TreeGridToolbar';
 import GridPagination from '../grid/GridPagination';
@@ -366,8 +365,11 @@ export default {
         left: 0,
         columnListMenuWidth: 0,
       },
+      useDefaultColumnSetting: computed(
+        () => props.option?.useGridSetting?.useDefaultColumnSetting ?? true,
+      ),
       columnSettingTextInfo: {
-        columnList: props.option?.useGridSetting?.columnMenuText ?? 'Column List',
+        title: props.option?.useGridSetting?.columnMenuText ?? 'Column List',
         search: props.option?.useGridSetting?.searchText ?? 'Search',
         empty: props.option?.useGridSetting?.emptyText ?? 'No records',
         ok: props.option?.useGridSetting?.okBtnText ?? 'OK',
@@ -391,7 +393,7 @@ export default {
         const extraColumns = stores.originColumns?.filter(
           column => !orderedColumnsIndexes.includes(column.index),
         );
-        const copyOrderedColumns = cloneDeep(stores.orderedColumns);
+        const copyOrderedColumns = stores.orderedColumns;
         return [...copyOrderedColumns, ...extraColumns];
       }),
     });
@@ -648,8 +650,22 @@ export default {
 
     watch(
       () => props.columns,
-      () => {
-        initColumnSettingInfo();
+      (newColumns, prevColumns) => {
+        const isSameColumns = () => {
+          // Column의 field로 동일한 컬럼인지 확인
+          const newColumnsFields = newColumns.map(column => column.field);
+          const prevColumnsFields = prevColumns.map(column => column.field);
+          return prevColumnsFields.every(field => newColumnsFields.includes(field));
+        };
+
+        if (newColumns.length !== prevColumns.length || !isSameColumns()) {
+          initColumnSettingInfo();
+        } else if (stores.filteredColumns.length) {
+          // 새로운 컬럼 기준으로 filteredColumns 를 업데이트 한다.
+          stores.filteredColumns = newColumns.filter(
+            column => !column.hidden && !column.hiddenDisplay,
+          );
+        }
       }, { deep: true },
     );
     watch(

package/src/components/treeGrid/uses.js

@@ -666,8 +666,9 @@ export const contextMenuEvent = (params) => {
    * @param {object} e - 이벤트 객체
    */
   const onGridSettingContextMenu = (e) => {
+    const { useDefaultColumnSetting, columnSettingTextInfo } = columnSettingInfo;
     const columnListMenu = {
-      text: columnSettingInfo.columnSettingTextInfo?.columnList ?? 'Column List',
+      text: columnSettingTextInfo?.columnList ?? 'Column List',
       isShowMenu: true,
       click: () => {
         columnSettingInfo.isShowColumnSetting = true;
@@ -678,10 +679,11 @@ export const contextMenuEvent = (params) => {
     if (contextInfo.customGridSettingContextMenu.length) {
       contextInfo.gridSettingContextMenuItems = [
         ...contextInfo.customGridSettingContextMenu,
-        columnListMenu,
       ];
-    } else {
-      contextInfo.gridSettingContextMenuItems = [columnListMenu];
+    }
+
+    if (useDefaultColumnSetting) {
+      contextInfo.gridSettingContextMenuItems.push(columnListMenu);
     }
     contextInfo.gridSettingMenu.show(e);
   };