evui 3.3.8 → 3.3.11

package/src/components/grid/uses.js

@@ -1,10 +1,11 @@
 import { getCurrentInstance, nextTick } from 'vue';
-import { isEqual, uniqBy } from 'lodash-es';
+import { uniqBy } from 'lodash-es';
 import { numberWithComma } from '@/common/utils';
 
 const ROW_INDEX = 0;
 const ROW_CHECK_INDEX = 1;
 const ROW_DATA_INDEX = 2;
+const ROW_SELECT_INDEX = 3;
 
 export const commonFunctions = () => {
   const { props } = getCurrentInstance();
@@ -32,18 +33,18 @@ export const commonFunctions = () => {
   /**
    * 데이터 타입에 따라 변환된 데이터을 반환한다.
    *
-   * @param {string} type - 데이터 유형
+   * @param {object} column - 컬럼 정보
    * @param {number|string} value - 데이터
    * @returns {number|string} 변환된 데이터
    */
-  const getConvertValue = (type, value) => {
+  const getConvertValue = (column, value) => {
     let convertValue = value;
 
-    if (type === 'number') {
+    if (column.type === 'number') {
       convertValue = numberWithComma(value);
       convertValue = convertValue === false ? value : convertValue;
-    } else if (type === 'float') {
-      convertValue = value.toFixed(3);
+    } else if (column.type === 'float') {
+      convertValue = convertValue.toFixed(column.decimal ?? 3);
     }
 
     return convertValue;
@@ -68,41 +69,48 @@ export const commonFunctions = () => {
 };
 
 export const scrollEvent = (params) => {
-  const { emit } = getCurrentInstance();
-  const { scrollInfo, stores, elementInfo, resizeInfo, pageInfo } = params;
+  const {
+    scrollInfo,
+    stores,
+    elementInfo,
+    resizeInfo,
+    pageInfo,
+    getPagingData,
+    updatePagingInfo,
+  } = params;
   /**
    * 수직 스크롤의 위치 계산 후 적용한다.
    */
-  const updateVScroll = () => {
+  const updateVScroll = (isScroll) => {
     const bodyEl = elementInfo.body;
     const rowHeight = resizeInfo.rowHeight;
     if (bodyEl) {
+      let store = stores.store;
+      if (pageInfo.isClientPaging) {
+        store = getPagingData();
+      }
       const rowCount = bodyEl.clientHeight > rowHeight
-        ? Math.ceil(bodyEl.clientHeight / rowHeight) : stores.store.length;
-      const totalScrollHeight = stores.store.length * rowHeight;
+        ? Math.ceil(bodyEl.clientHeight / rowHeight) : store.length;
+      const totalScrollHeight = store.length * rowHeight;
       let firstVisibleIndex = Math.floor(bodyEl.scrollTop / rowHeight);
-      if (firstVisibleIndex > stores.store.length - 1) {
+      if (firstVisibleIndex > store.length - 1) {
         firstVisibleIndex = 0;
       }
 
-      const lastVisibleIndex = firstVisibleIndex + rowCount;
+      const lastVisibleIndex = firstVisibleIndex + rowCount + 1;
       const firstIndex = Math.max(firstVisibleIndex, 0);
       const lastIndex = lastVisibleIndex;
 
-      stores.viewStore = stores.store.slice(firstIndex, lastIndex);
-      scrollInfo.hasVerticalScrollBar = rowCount < stores.store.length;
+      stores.viewStore = store.slice(firstIndex, lastIndex);
+      scrollInfo.hasVerticalScrollBar = rowCount < store.length;
       scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
       scrollInfo.vScrollBottomHeight = totalScrollHeight - (stores.viewStore.length * rowHeight)
         - scrollInfo.vScrollTopHeight;
-      if (scrollInfo.vScrollBottomHeight === 0) {
+      if (isScroll && pageInfo.isInfinite && scrollInfo.vScrollBottomHeight === 0) {
         pageInfo.prevPage = pageInfo.currentPage;
-        pageInfo.currentPage = Math.ceil(lastIndex / pageInfo.dataCount) + 1;
-        emit('scroll-end', {
-          startIndex: lastIndex,
-          dataCount: pageInfo.dataCount,
-          prevPage: pageInfo.prevPage,
-          currentPage: pageInfo.currentPage,
-        });
+        pageInfo.currentPage = Math.ceil(lastIndex / pageInfo.perPage) + 1;
+        pageInfo.startIndex = lastIndex;
+        updatePagingInfo({ onScrollEnd: true });
       }
     }
   };
@@ -128,7 +136,7 @@ export const scrollEvent = (params) => {
     const isVertical = !(scrollTop === lastTop);
 
     if (isVertical && bodyEl?.clientHeight) {
-      updateVScroll();
+      updateVScroll(true);
     }
 
     if (isHorizontal) {
@@ -331,7 +339,7 @@ export const resizeEvent = (params) => {
 
 export const clickEvent = (params) => {
   const { emit } = getCurrentInstance();
-  const selectInfo = params;
+  const { selectInfo } = params;
   const getClickedRowData = (event, row) => {
     const tagName = event.target.tagName.toLowerCase();
     let cellInfo = {};
@@ -354,17 +362,41 @@ export const clickEvent = (params) => {
    * @param {object} event - 이벤트 객체
    * @param {array} row - row 데이터
    */
+  let timer = null;
   const onRowClick = (event, row) => {
     if (event.target && event.target.parentElement
       && event.target.parentElement.classList.contains('row-checkbox-input')) {
       return false;
     }
-    if (selectInfo.useSelect) {
-      const rowData = row[ROW_DATA_INDEX];
-      selectInfo.selectedRow = rowData;
-      emit('update:selected', rowData);
-      emit('click-row', getClickedRowData(event, row));
-    }
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (selectInfo.useSelect) {
+        const rowData = row[ROW_DATA_INDEX];
+        if (row[ROW_SELECT_INDEX]) {
+          row[ROW_SELECT_INDEX] = false;
+          if (selectInfo.multiple) {
+            if (event.ctrlKey) {
+              selectInfo.selectedRow.splice(selectInfo.selectedRow.indexOf(row[ROW_DATA_INDEX]), 1);
+            } else {
+              selectInfo.selectedRow = [rowData];
+            }
+          } else {
+            selectInfo.selectedRow = [];
+          }
+        } else {
+          row[ROW_SELECT_INDEX] = true;
+          if (event.ctrlKey
+            && selectInfo.multiple
+            && (!selectInfo.limitCount || selectInfo.limitCount > selectInfo.selectedRow.length)) {
+            selectInfo.selectedRow.push(rowData);
+          } else {
+            selectInfo.selectedRow = [rowData];
+          }
+        }
+        emit('update:selected', selectInfo.selectedRow);
+        emit('click-row', getClickedRowData(event, row));
+      }
+    }, 100);
     return true;
   };
   /**
@@ -374,16 +406,14 @@ export const clickEvent = (params) => {
    * @param {array} row - row 데이터
    */
   const onRowDblClick = (event, row) => {
-    const rowData = row[ROW_DATA_INDEX];
-    selectInfo.selectedRow = rowData;
-    emit('update:selected', rowData);
+    clearTimeout(timer);
     emit('dblclick-row', getClickedRowData(event, row));
   };
   return { onRowClick, onRowDblClick };
 };
 
 export const checkEvent = (params) => {
-  const { checkInfo, stores } = params;
+  const { checkInfo, stores, pageInfo, getPagingData } = params;
   const { emit } = getCurrentInstance();
   /**
    * row에 대한 체크 상태를 해제한다.
@@ -413,13 +443,13 @@ export const checkEvent = (params) => {
     if (row[ROW_CHECK_INDEX]) {
       if (checkInfo.useCheckbox.mode === 'single') {
         checkInfo.checkedRows = [row[ROW_DATA_INDEX]];
-        checkInfo.checkedIndex.clear();
       } else {
         checkInfo.checkedRows.push(row[ROW_DATA_INDEX]);
       }
-      checkInfo.checkedIndex.add(row[ROW_INDEX]);
-
-      const store = stores.store;
+      let store = stores.store;
+      if (pageInfo.isClientPaging) {
+        store = getPagingData();
+      }
       const isAllChecked = store.every(d => d[ROW_CHECK_INDEX]);
       if (store.length && isAllChecked) {
         checkInfo.isHeaderChecked = true;
@@ -427,10 +457,8 @@ export const checkEvent = (params) => {
     } else {
       if (checkInfo.useCheckbox.mode === 'single') {
         checkInfo.checkedRows = [];
-        checkInfo.checkedIndex.clear();
       } else {
         checkInfo.checkedRows.splice(checkInfo.checkedRows.indexOf(row[ROW_DATA_INDEX]), 1);
-        checkInfo.checkedIndex.delete(row[ROW_INDEX]);
       }
       checkInfo.isHeaderChecked = false;
     }
@@ -445,18 +473,17 @@ export const checkEvent = (params) => {
    */
   const onCheckAll = (event) => {
     const isHeaderChecked = checkInfo.isHeaderChecked;
-    const store = stores.store;
+    let store = stores.store;
+    if (pageInfo.isClientPaging) {
+      store = getPagingData();
+    }
     store.forEach((row) => {
       if (isHeaderChecked) {
         if (!checkInfo.checkedRows.includes(row[ROW_DATA_INDEX])) {
           checkInfo.checkedRows.push(row[ROW_DATA_INDEX]);
         }
-        if (!checkInfo.checkedIndex.has(row[ROW_INDEX])) {
-          checkInfo.checkedIndex.add(row[ROW_INDEX]);
-        }
       } else {
         checkInfo.checkedRows.splice(checkInfo.checkedRows.indexOf(row[ROW_DATA_INDEX]), 1);
-        checkInfo.checkedIndex.delete(row[ROW_INDEX]);
       }
       row[ROW_CHECK_INDEX] = isHeaderChecked;
     });
@@ -467,7 +494,7 @@ export const checkEvent = (params) => {
 };
 
 export const sortEvent = (params) => {
-  const { sortInfo, stores, getColumnIndex } = params;
+  const { sortInfo, stores, getColumnIndex, updatePagingInfo } = params;
   const { props } = getCurrentInstance();
   function OrderQueue() {
     this.orders = ['asc', 'desc', 'init'];
@@ -491,6 +518,7 @@ export const sortEvent = (params) => {
       order.enqueue(sortInfo.sortOrder);
 
       sortInfo.isSorting = true;
+      updatePagingInfo({ onSort: true });
     }
   };
   /**
@@ -548,9 +576,12 @@ export const filterEvent = (params) => {
     filterInfo,
     stores,
     checkInfo,
+    pageInfo,
     getColumnIndex,
     getConvertValue,
     updateVScroll,
+    getPagingData,
+    updatePagingInfo,
   } = params;
   /**
    * 해당 컬럼에 대한 필터 팝업을 보여준다.
@@ -743,13 +774,13 @@ export const filterEvent = (params) => {
           for (let ix = 0; ix < stores.orderedColumns.length; ix++) {
             const column = stores.orderedColumns[ix] || {};
             let columnValue = row[ROW_DATA_INDEX][ix];
-            const columnType = column.type || 'string';
+            column.type = column.type || 'string';
             if (columnValue) {
               if (typeof columnValue === 'object') {
                 columnValue = columnValue[column.field];
               }
               if (!column.hide && (column?.searchable === undefined || column?.searchable)) {
-                columnValue = getConvertValue(columnType, columnValue).toString();
+                columnValue = getConvertValue(column, columnValue).toString();
                 isShow = columnValue.toLowerCase().includes(searchWord.toString().toLowerCase());
                 if (isShow) {
                   break;
@@ -774,6 +805,12 @@ export const filterEvent = (params) => {
       } else {
         checkInfo.isHeaderChecked = false;
       }
+      if (!searchWord && pageInfo.isClientPaging && pageInfo.prevPage) {
+        pageInfo.currentPage = 1;
+        stores.pagingStore = getPagingData();
+      }
+
+      updatePagingInfo({ onSearch: true });
       updateVScroll();
     }, 500);
   };
@@ -865,30 +902,25 @@ export const storeEvent = (params) => {
   /**
    * 전달된 데이터를 내부 store 및 속성에 저장한다.
    *
-   * @param {array} value - row 데이터
+   * @param {array} rows - row 데이터
    * @param {boolean} isMakeIndex - 인덱스 생성 유무
    */
-  const setStore = (value, isMakeIndex = true) => {
-    const store = [];
-    let checked;
-    let selected = false;
+  const setStore = (rows, isMakeIndex = true) => {
     if (isMakeIndex) {
+      const store = [];
       let hasUnChecked = false;
-      for (let ix = 0; ix < value.length; ix++) {
-        checked = props.checked.includes(value[ix]);
+      rows.forEach((row, idx) => {
+        const checked = props.checked.includes(row);
+        let selected = false;
+        if (selectInfo.useSelect) {
+          selected = props.selected.includes(row);
+        }
         if (!checked) {
           hasUnChecked = true;
         }
-        if (!selected && isEqual(selectInfo.selectedRow, value[ix])) {
-          selectInfo.selectedRow = value[ix];
-          selected = true;
-        }
-        store.push([ix, checked, value[ix]]);
-      }
-      if (!selected) {
-        selectInfo.selectedRow = [];
-      }
-      checkInfo.isHeaderChecked = value.length > 0 ? !hasUnChecked : false;
+        store.push([idx, checked, row, selected]);
+      });
+      checkInfo.isHeaderChecked = rows.length > 0 ? !hasUnChecked : false;
       stores.originStore = store;
     }
     if (filterInfo.isFiltering) {
@@ -901,18 +933,65 @@ export const storeEvent = (params) => {
       updateVScroll();
     }
   };
-  /**
-   * 컴포넌트의 변경 데이터를 store에 업데이트한다.
-   *
-   * @param {number} rowIndex - row 인덱스
-   * @param {number} cellIndex - cell 인덱스
-   * @param {number|string} newValue - 데이터
-   */
-  const updateData = (rowIndex, cellIndex, newValue) => {
-    const row = stores.store.filter(data => data[0] === rowIndex);
-    if (row) {
-      row[0][ROW_DATA_INDEX][cellIndex] = newValue;
+  return { setStore };
+};
+
+export const pagingEvent = (params) => {
+  const { emit } = getCurrentInstance();
+  const {
+    stores,
+    pageInfo,
+    sortInfo,
+    filterInfo,
+    elementInfo,
+    clearCheckInfo,
+  } = params;
+  const getPagingData = () => {
+    const start = (pageInfo.currentPage - 1) * pageInfo.perPage;
+    const end = parseInt(start, 10) + parseInt(pageInfo.perPage, 10);
+    return stores.store.slice(start, end);
+  };
+  const updatePagingInfo = (eventName) => {
+    emit('page-change', {
+      eventName,
+      pageInfo: {
+        currentPage: pageInfo.currentPage,
+        prevPage: pageInfo.prevPage,
+        startIndex: pageInfo.startIndex,
+        total: pageInfo.total,
+        perPage: pageInfo.perPage,
+      },
+      sortInfo: {
+        field: sortInfo.sortField,
+        order: sortInfo.sortOrder,
+      },
+      searchInfo: {
+        searchWord: filterInfo.searchWord,
+        searchColumns: stores.orderedColumns
+          .filter(c => !c.hide && (c?.searchable === undefined || c?.searchable))
+          .map(d => d.field),
+      },
+    });
+    if (pageInfo.isInfinite && (eventName?.onSearch || eventName?.onSort)) {
+      pageInfo.currentPage = 1;
+      elementInfo.body.scrollTop = 0;
+      clearCheckInfo();
+    }
+  };
+  const changePage = (beforeVal) => {
+    if (pageInfo.isClientPaging) {
+      pageInfo.prevPage = beforeVal;
+      if (stores.store.length <= pageInfo.perPage) {
+        stores.pagingStore = stores.store;
+      } else {
+        const start = (pageInfo.currentPage - 1) * pageInfo.perPage;
+        const end = parseInt(start, 10) + parseInt(pageInfo.perPage, 10);
+        stores.pagingStore = stores.store.slice(start, end);
+        elementInfo.body.scrollTop = 0;
+        pageInfo.startIndex = start;
+      }
     }
+    updatePagingInfo({ onChangePage: true });
   };
-  return { setStore, updateData };
+  return { getPagingData, updatePagingInfo, changePage };
 };

package/src/components/pagination/Pagination.vue

@@ -1,13 +1,13 @@
 <template>
   <nav class="pagination">
     <!-- Page Info -->
-    <small v-if="pageInfo" class="pagination-info">
+    <small v-if="showPageInfo" class="pagination-info">
       <template v-if="perPage === 1">
-        {{ numberWithComma(firstData) }} / {{ numberWithComma(total) }}
+        {{ firstData }} / {{ total }}
       </template>
       <template v-else>
-        {{ numberWithComma(firstData) }} - {{ numberWithComma(Math.min(current * perPage, total)) }}
-        / {{ numberWithComma(total) }}
+        {{ firstData }} - {{ Math.min(current * perPage, total) }}
+        / {{ total }}
       </template>
     </small>
     <ul class="pagination-list" :style="listClasses">
@@ -49,7 +49,6 @@
 <script>
 import { computed, nextTick, watch } from 'vue';
 import EvIcon from '@/components/icon/Icon';
-import { numberWithComma } from '@/common/utils';
 import pageButton from './pageButton';
 
 export default {
@@ -59,8 +58,14 @@ export default {
     pageButton,
   },
   props: {
-    total: [Number, String],
-    visiblePage: [Number, String],
+    total: {
+      type: [Number, String],
+      default: 0,
+    },
+    visiblePage: {
+      type: [Number, String],
+      default: 8,
+    },
     perPage: {
       type: [Number, String],
       default: 20,
@@ -69,8 +74,10 @@ export default {
       type: [Number, String],
       default: 1,
     },
-    size: String,
-    pageInfo: Boolean,
+    showPageInfo: {
+      type: Boolean,
+      default: false,
+    },
     order: {
       type: String,
       default: 'left',
@@ -82,9 +89,10 @@ export default {
     change: null,
   },
   setup(props, { emit }) {
-    const visiblePage = computed(() => props.visiblePage || 8);
+    const visiblePage = computed(() => (props.visiblePage > 7 ? props.visiblePage : 7));
     const current = computed(() => props.modelValue);
-    const pageCount = computed(() => Math.ceil(props.total / props.perPage));
+    const pageCount = computed(() => (props.total === 0
+      ? 1 : Math.ceil(props.total / props.perPage)));
     const hasPrev = computed(() => current.value > 1);
     const hasNext = computed(() => current.value < pageCount.value);
     const firstData = computed(() => {
@@ -168,7 +176,7 @@ export default {
       () => pageCount.value,
       (value) => {
         if (current.value > value) {
-          changePage(1);
+          changePage(value);
         }
       },
     );
@@ -190,7 +198,6 @@ export default {
       current,
       changePage,
       getPage,
-      numberWithComma,
     };
   },
 };
@@ -206,9 +213,7 @@ export default {
     padding-right: 10px;
     background: center center no-repeat;
     background-size: 16px;
-    background-color: #FFFFFF;
     cursor: pointer;
-    color: #303133;
     &:hover {
       color: #1A6AFE;
     }
@@ -238,7 +243,6 @@ export default {
     cursor: not-allowed;
     opacity: 0.5;
     color: #C0C4CC;
-    background-color: #FFFFFF;
   }
   &-list {
     display: flex;
@@ -255,7 +259,6 @@ export default {
       padding: 0 4px;
       justify-content: center;
       align-items: center;
-      background: #FFFFFF;
       font-size: 14px;
       min-width: 32px;
       line-height: 32px;