evui 3.4.24 → 3.4.26

package/src/components/grid/GridColumnSetting.vue

@@ -50,7 +50,14 @@
 
 <script>
 import { clickoutside } from '@/directives/clickoutside';
-import { computed, inject, nextTick, onBeforeMount, reactive, ref, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onBeforeMount,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
 
 export default {
   name: 'EVGridColumnSetting',
@@ -70,9 +77,22 @@ export default {
       type: String,
       default: '',
     },
+    position: {
+      type: Object,
+      default: () => ({
+        top: 0,
+        left: 0,
+        columnListMenuWidth: 0,
+      }),
+    },
+    isShowMenuOnClick: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
-    'update:isShow': null,
+    'update:isShow': [Boolean],
+    'update:isShowMenuOnClick': [Boolean],
     'apply-column': null,
   },
   setup(props, { emit }) {
@@ -93,12 +113,14 @@ export default {
     const isDisabled = computed(() => !columnList.value.length);
     let timer = null;
     let lastCheckedColumn = null;
-
-    const toolbarWrapperDiv = inject('toolbarWrapper');
     const columnSettingStyle = reactive({
       top: null,
       left: null,
     });
+    const computedIsShowMenuOnClick = computed({
+      get: () => props.isShowMenuOnClick,
+      set: val => emit('update:isShowMenuOnClick', val),
+    });
 
     const onCheckColumn = (columns) => {
       if (columns?.length === 1) {
@@ -155,8 +177,8 @@ export default {
       const checkedColumns = applyColumnList.value.map(col => col.text);
 
       emit('apply-column', checkedColumns);
-      initSearchValue();
       isShowColumnSetting.value = false;
+      computedIsShowMenuOnClick.value = false;
     };
 
     const setColumns = () => {
@@ -175,7 +197,7 @@ export default {
 
     const hideColumnSetting = () => {
       isShowColumnSetting.value = false;
-      initValue();
+      computedIsShowMenuOnClick.value = false;
     };
 
     const initWrapperDiv = () => {
@@ -188,6 +210,29 @@ export default {
       }
     };
 
+    const setPosition = async () => {
+      await nextTick();
+
+      const docWidth = document.documentElement.clientWidth;
+      const columnSettingWrapperRect = columnSettingWrapper.value?.getBoundingClientRect();
+      const columnSettingWidth = columnSettingWrapperRect?.width;
+      const { top, left, columnListMenuWidth } = props.position;
+      let columnSettingLeft;
+
+      if (columnListMenuWidth) { // 컨텍스트 메뉴일 때
+        columnSettingLeft = left;
+
+        if (docWidth < left + columnSettingWidth) {
+          columnSettingLeft = left - columnSettingWidth - columnListMenuWidth;
+        }
+      } else {
+        columnSettingLeft = left - columnSettingWidth;
+      }
+
+      columnSettingStyle.top = `${top + document.documentElement.scrollTop}px`;
+      columnSettingStyle.left = `${columnSettingLeft + document.documentElement.scrollLeft}px`;
+    };
+
     onBeforeMount(() => initWrapperDiv());
 
     watch(() => props.columns, () => {
@@ -195,21 +240,11 @@ export default {
     }, { immediate: true, deep: true });
 
     watch(() => isShowColumnSetting.value, async () => {
-      if (!isShowColumnSetting.value) {
-        return;
-      }
-      await nextTick();
-
-      const columnSettingWrapperRect = columnSettingWrapper.value?.getBoundingClientRect();
-      const toolbarWrapperDivRect = toolbarWrapperDiv.value?.getBoundingClientRect();
-
-      const columnSettingWidth = columnSettingWrapperRect?.width;
-      const toolbarHeight = toolbarWrapperDivRect?.height;
-      const columnSettingTop = toolbarWrapperDivRect?.top + document.documentElement.scrollTop;
-      const columnSettingRight = toolbarWrapperDivRect?.right + document.documentElement.scrollLeft;
+      initValue();
 
-      columnSettingStyle.top = `${columnSettingTop + toolbarHeight}px`;
-      columnSettingStyle.left = `${columnSettingRight - columnSettingWidth}px`;
+      if (isShowColumnSetting.value) {
+        await setPosition();
+      }
     });
 
     watch(() => props.hiddenColumn, (value) => {

package/src/components/grid/GridToolbar.vue

@@ -24,7 +24,7 @@ export default {
 .gridToolbar > .ev-button {
   margin: 0 2px 0 2px;
 }
-.gridToolbar > .column-setting__icon {
+.gridToolbar > .grid-setting__icon {
   float: right;
   margin: 10px 5px;
   cursor: pointer;

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

@@ -64,6 +64,17 @@
   //&:nth-last-child(1) {
   //  border-right: 0;
   //}
+  &.checkbox-all {
+    padding: 0;
+    .ev-checkbox {
+      display: inline-flex;
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   .column-sort__icon {
     position: absolute;
     top: 50%;
@@ -165,6 +176,11 @@
       }
     }
   }
+  .row-contextmenu {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
 
   .cell {
     display: inline-block;
@@ -183,9 +199,31 @@
       text-overflow: ellipsis;
     }
     &.row-checkbox {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
+      padding: 0;
+      .ev-checkbox {
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    &.row-detail-toggle {
+      padding: 0;
+      .row-detail-toggle-icon {
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        transition: transform $animate-fast;
+      }
+      &--expanded {
+        .row-detail-toggle-icon {
+          transform: rotate(90deg);
+        }
+      }
     }
     &.render {
       overflow: initial;

package/src/components/grid/uses.js

@@ -6,6 +6,7 @@ const ROW_INDEX = 0;
 const ROW_CHECK_INDEX = 1;
 const ROW_DATA_INDEX = 2;
 const ROW_SELECT_INDEX = 3;
+const ROW_EXPAND_INDEX = 4;
 
 export const commonFunctions = () => {
   const { props } = getCurrentInstance();
@@ -79,11 +80,12 @@ export const scrollEvent = (params) => {
     summaryScroll,
     getPagingData,
     updatePagingInfo,
+    expandedInfo,
   } = params;
   /**
    * 수직 스크롤의 위치 계산 후 적용한다.
    */
-  const updateVScroll = (isScroll) => {
+  const updateVScrollBase = (isScroll) => {
     const bodyEl = elementInfo.body;
     const rowHeight = resizeInfo.rowHeight;
     if (bodyEl) {
@@ -118,6 +120,23 @@ export const scrollEvent = (params) => {
       }
     }
   };
+
+  /**
+   *  rowDetail slot 시에는 가상 스크롤을 적용하지 않는다.
+   */
+  const updateVScroll = (isScroll) => {
+    if (expandedInfo.useRowDetail) {
+      let store = stores.store;
+      if (pageInfo.isClientPaging) {
+        store = getPagingData();
+      }
+      stores.viewStore = store;
+      scrollInfo.vScrollTopHeight = 0;
+      scrollInfo.vScrollBottomHeight = 0;
+    } else {
+      updateVScrollBase(isScroll);
+    }
+  };
   /**
    * 수평 스크롤의 위치 계산 후 적용한다.
    */
@@ -162,6 +181,7 @@ export const resizeEvent = (params) => {
     resizeInfo,
     elementInfo,
     checkInfo,
+    expandedInfo,
     stores,
     isRenderer,
     updateVScroll,
@@ -202,6 +222,10 @@ export const resizeEvent = (params) => {
         elWidth -= resizeInfo.minWidth;
       }
 
+      if (expandedInfo.useRowDetail) {
+        elWidth -= resizeInfo.minWidth;
+      }
+
       columnWidth = elWidth - result.totalWidth;
       if (columnWidth > 0) {
         remainWidth = columnWidth
@@ -447,7 +471,7 @@ export const clickEvent = (params) => {
 
 export const checkEvent = (params) => {
   const { checkInfo, stores, pageInfo, getPagingData } = params;
-  const { emit } = getCurrentInstance();
+  const { props, emit } = getCurrentInstance();
   /**
    * row에 대한 체크 상태를 해제한다.
    *
@@ -483,7 +507,10 @@ export const checkEvent = (params) => {
       if (pageInfo.isClientPaging) {
         store = getPagingData();
       }
-      const isAllChecked = store.every(d => d[ROW_CHECK_INDEX]);
+
+      const isAllChecked = store
+        .filter(rowData => !props.uncheckable.includes(rowData[ROW_DATA_INDEX]))
+        .every(d => d[ROW_CHECK_INDEX]);
       if (store.length && isAllChecked) {
         checkInfo.isHeaderChecked = true;
       }
@@ -511,14 +538,18 @@ export const checkEvent = (params) => {
       store = getPagingData();
     }
     store.forEach((row) => {
+      const uncheckable = props.uncheckable.includes(row[ROW_DATA_INDEX]);
       if (isHeaderChecked) {
-        if (!checkInfo.checkedRows.includes(row[ROW_DATA_INDEX])) {
+        if (!checkInfo.checkedRows.includes(row[ROW_DATA_INDEX]) && !uncheckable) {
           checkInfo.checkedRows.push(row[ROW_DATA_INDEX]);
         }
       } else {
         checkInfo.checkedRows.splice(checkInfo.checkedRows.indexOf(row[ROW_DATA_INDEX]), 1);
       }
-      row[ROW_CHECK_INDEX] = isHeaderChecked;
+
+      if (!uncheckable) {
+        row[ROW_CHECK_INDEX] = isHeaderChecked;
+      }
     });
     emit('update:checked', checkInfo.checkedRows);
     emit('check-all', event, checkInfo.checkedRows);
@@ -526,6 +557,34 @@ export const checkEvent = (params) => {
   return { onCheck, onCheckAll };
 };
 
+export const expandEvent = (params) => {
+  const { expandedInfo } = params;
+  const { emit } = getCurrentInstance();
+
+  /**
+   * expand click 이벤트를 처리한다.
+   *
+   * @param {object} event - 이벤트 객체
+   * @param {array} row - row 데이터
+   */
+  const onExpanded = (event, row) => {
+    const data = row[ROW_DATA_INDEX];
+    const index = expandedInfo.expandedRows.indexOf(data);
+    if (index === -1) {
+      expandedInfo.expandedRows.push(data);
+    } else {
+      expandedInfo.expandedRows.splice(index, 1);
+    }
+    row[ROW_EXPAND_INDEX] = !row[ROW_EXPAND_INDEX];
+    emit('update:expanded', expandedInfo.expandedRows);
+    emit('expand-row', event, row[ROW_DATA_INDEX], row[ROW_EXPAND_INDEX], row[ROW_INDEX]);
+  };
+
+  return {
+    onExpanded,
+  };
+};
+
 export const sortEvent = (params) => {
   const { sortInfo, stores, updatePagingInfo } = params;
   const { emit } = getCurrentInstance();
@@ -899,9 +958,10 @@ export const contextMenuEvent = (params) => {
     stores,
     selectInfo,
     onSort,
-    setColumnHidden,
-    useColumnSetting,
     filterInfo,
+    useGridSetting,
+    columnSettingInfo,
+    setColumnHidden,
   } = params;
   /**
    * 컨텍스트 메뉴를 설정한다.
@@ -1006,16 +1066,43 @@ export const contextMenuEvent = (params) => {
         {
           text: 'Hide',
           iconClass: 'ev-icon-visibility-off',
-          disabled: !useColumnSetting.value || stores.orderedColumns.length === 1,
+          disabled: !useGridSetting.value || stores.orderedColumns.length === 1,
           click: () => setColumnHidden(column.field),
         },
       ];
     }
   };
+  /**
+   * 상단 우측의 Grid 옵션에 대한 Contextmenu 를 생성한다.
+   *
+   * @param {object} event - 이벤트 객체
+   */
+  const onGridSettingContextMenu = (e) => {
+    const columnListMenu = {
+      text: 'Column List',
+      isShowMenu: true,
+      click: () => {
+        columnSettingInfo.isShowColumnSetting = true;
+        contextInfo.isShowMenuOnClick = true;
+      },
+    };
+
+    if (contextInfo.customGridSettingContextMenu.length) {
+      contextInfo.gridSettingContextMenuItems = [
+        ...contextInfo.customGridSettingContextMenu,
+        columnListMenu,
+      ];
+    } else {
+      contextInfo.gridSettingContextMenuItems = [columnListMenu];
+    }
+    contextInfo.gridSettingMenu.show(e);
+  };
+
   return {
     setContextMenu,
     onContextMenu,
     onColumnContextMenu,
+    onGridSettingContextMenu,
   };
 };
 
@@ -1028,6 +1115,7 @@ export const storeEvent = (params) => {
     sortInfo,
     elementInfo,
     filterInfo,
+    expandedInfo,
     setSort,
     updateVScroll,
     setFilter,
@@ -1044,16 +1132,22 @@ export const storeEvent = (params) => {
       let hasUnChecked = false;
       rows.forEach((row, idx) => {
         const checked = props.checked.includes(row);
+        const uncheckable = props.uncheckable.includes(row);
         let selected = false;
         if (selectInfo.useSelect) {
           selected = props.selected.includes(row);
         }
-        if (!checked) {
+        if (!checked && !uncheckable) {
           hasUnChecked = true;
         }
-        store.push([idx, checked, row, selected]);
+        let expanded = false;
+        if (expandedInfo.useRowDetail) {
+          expanded = props.expanded.includes(row);
+        }
+        store.push([idx, checked, row, selected, expanded, uncheckable]);
       });
       checkInfo.isHeaderChecked = rows.length > 0 ? !hasUnChecked : false;
+      checkInfo.isHeaderUncheckable = rows.every(row => props.uncheckable.includes(row));
       stores.originStore = store;
     }
     if (filterInfo.isFiltering) {
@@ -1134,12 +1228,36 @@ export const columnSettingEvent = (params) => {
   const {
     stores,
     columnSettingInfo,
+    contextInfo,
     onSearch,
     onResize,
   } = params;
-  const setColumnSetting = () => {
-    columnSettingInfo.isShowColumnSetting = true;
+
+  const setPositionColumnSetting = (toolbarRef) => {
+    if (!columnSettingInfo.isShowColumnSetting) {
+      return;
+    }
+    columnSettingInfo.columnSettingPosition.columnListMenuWidth = 0;
+
+    if (contextInfo.gridSettingContextMenuItems.length) {
+      // 컨텍스트 메뉴 형태인 경우
+      const columnListMenu = contextInfo.gridSettingContextMenuItems.length - 1;
+      const columnListMenuRect = contextInfo.gridSettingMenu?.rootMenuList?.$el?.children[0]
+        .children[columnListMenu].getBoundingClientRect();
+
+      columnSettingInfo.columnSettingPosition.columnListMenuWidth = columnListMenuRect.width;
+      columnSettingInfo.columnSettingPosition.top = columnListMenuRect.top;
+      columnSettingInfo.columnSettingPosition.left = columnListMenuRect.right;
+    } else {
+      // 컬럼 리스트만 있는 경우
+      const toolbarRefDivRect = toolbarRef?.getBoundingClientRect();
+      const toolbarHeight = toolbarRefDivRect?.height;
+
+      columnSettingInfo.columnSettingPosition.top = toolbarRefDivRect?.top + toolbarHeight;
+      columnSettingInfo.columnSettingPosition.left = toolbarRefDivRect?.right;
+    }
   };
+
   const initColumnSettingInfo = () => {
     stores.filteredColumns.length = 0;
     columnSettingInfo.isShowColumnSetting = false;
@@ -1195,7 +1313,12 @@ export const columnSettingEvent = (params) => {
     setFilteringColumn();
   };
 
-  return { setColumnSetting, initColumnSettingInfo, onApplyColumn, setColumnHidden };
+  return {
+    setPositionColumnSetting,
+    initColumnSettingInfo,
+    onApplyColumn,
+    setColumnHidden,
+  };
 };
 
 export const dragEvent = ({ stores }) => {

package/src/components/tree/Tree.vue

@@ -14,7 +14,7 @@
       @show-context-menu="getContextMenuFlag"
       @contextmenu.prevent="showContextMenu"
     />
-    <div v-if="!treeNodeData.length">No data</div>
+    <div v-if="!treeNodeData.length">{{ emptyText }}</div>
     <ev-context-menu
       v-if="contextMenuItems.length"
       ref="contextMenu"
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { ref, reactive, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import TreeNode from './TreeNode';
 
 export default {
@@ -70,7 +70,7 @@ export default {
     check: Array,
   },
   setup(props, { emit }) {
-    let treeNodeData = reactive(props.data);
+    const treeNodeData = ref(props.data);
     let allNodeInfo = [];
     const contextMenu = ref(null);
     let contextMenuFlag = false; // flag for showing contextMenu or not
@@ -150,8 +150,8 @@ export default {
         }
       }
 
-      if (treeNodeData.length) {
-        flattenChildren(treeNodeData[0]);
+      if (treeNodeData.value.length) {
+        flattenChildren(treeNodeData.value[0]);
       }
       return flatTree;
     }
@@ -185,7 +185,7 @@ export default {
       node.indeterminate = false;
       updateTreeUp(nodeKey); // propagate up
       updateTreeDown(node, { checked: isChecked, indeterminate: false }); // reset `indeterminate`
-      const checkedNodes = allNodeInfo.filter(obj => obj.node.checked).map(obj => obj.node);
+      const checkedNodes = getCheckedNodes();
       emit('check', checkedNodes);
       rebuildTree();
     }
@@ -278,9 +278,11 @@ export default {
       });
     }
 
-    watch(props.data, (newData) => {
-      treeNodeData = newData;
+    watch(() => props.data, (newData) => {
+      treeNodeData.value = newData;
       allNodeInfo = getAllNodeInfo();
+    }, {
+      deep: true,
     });