evui 3.3.7 → 3.3.10

package/src/components/grid/uses.js

@@ -68,19 +68,31 @@ export const commonFunctions = () => {
 };
 
 export const scrollEvent = (params) => {
-  const { scrollInfo, stores, elementInfo, resizeInfo } = 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;
       }
 
@@ -88,11 +100,17 @@ export const scrollEvent = (params) => {
       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 (isScroll && pageInfo.isInfinite && scrollInfo.vScrollBottomHeight === 0) {
+        pageInfo.prevPage = pageInfo.currentPage;
+        pageInfo.currentPage = Math.ceil(lastIndex / pageInfo.perPage) + 1;
+        pageInfo.startIndex = lastIndex;
+        updatePagingInfo({ onScrollEnd: true });
+      }
     }
   };
   /**
@@ -117,7 +135,7 @@ export const scrollEvent = (params) => {
     const isVertical = !(scrollTop === lastTop);
 
     if (isVertical && bodyEl?.clientHeight) {
-      updateVScroll();
+      updateVScroll(true);
     }
 
     if (isHorizontal) {
@@ -372,7 +390,7 @@ export const clickEvent = (params) => {
 };
 
 export const checkEvent = (params) => {
-  const { checkInfo, stores } = params;
+  const { checkInfo, stores, pageInfo, getPagingData } = params;
   const { emit } = getCurrentInstance();
   /**
    * row에 대한 체크 상태를 해제한다.
@@ -408,7 +426,10 @@ export const checkEvent = (params) => {
       }
       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;
@@ -434,7 +455,10 @@ 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])) {
@@ -456,7 +480,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'];
@@ -480,6 +504,7 @@ export const sortEvent = (params) => {
       order.enqueue(sortInfo.sortOrder);
 
       sortInfo.isSorting = true;
+      updatePagingInfo({ onSort: true });
     }
   };
   /**
@@ -537,9 +562,12 @@ export const filterEvent = (params) => {
     filterInfo,
     stores,
     checkInfo,
+    pageInfo,
     getColumnIndex,
     getConvertValue,
     updateVScroll,
+    getPagingData,
+    updatePagingInfo,
   } = params;
   /**
    * 해당 컬럼에 대한 필터 팝업을 보여준다.
@@ -763,6 +791,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);
   };
@@ -890,18 +924,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

@@ -0,0 +1,271 @@
+<template>
+  <nav class="pagination">
+    <!-- Page Info -->
+    <small v-if="showPageInfo" class="pagination-info">
+      <template v-if="perPage === 1">
+        {{ firstData }} / {{ total }}
+      </template>
+      <template v-else>
+        {{ firstData }} - {{ Math.min(current * perPage, total) }}
+        / {{ total }}
+      </template>
+    </small>
+    <ul class="pagination-list" :style="listClasses">
+      <!-- Previous -->
+      <li :class="{'is-disabled': !hasPrev}">
+        <page-button
+          class="pagination-previous"
+          :disabled="!hasPrev"
+          :page="getPage(current - 1)"
+        >
+          <ev-icon icon="ev-icon-s-arrow-left"/>
+        </page-button>
+      </li>
+
+      <!--Pages-->
+      <template v-for="(page, i) in pagesInRange" :key="i">
+        <li v-if="page.number === -1" class="pagination-ellipsis">
+          <span>&hellip;</span>
+        </li>
+        <li v-else :class="{ 'is-current': page.isCurrent, 'is-page': true }" @click="page.click">
+          <page-button :page="page"/>
+        </li>
+      </template>
+
+      <!-- Next -->
+      <li :class="{'is-disabled': !hasNext}">
+        <page-button
+          class="pagination-next"
+          :disabled="!hasNext"
+          :page="getPage(current + 1)"
+        >
+          <ev-icon icon="ev-icon-s-arrow-right"/>
+        </page-button>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import { computed, nextTick, watch } from 'vue';
+import EvIcon from '@/components/icon/Icon';
+import pageButton from './pageButton';
+
+export default {
+  name: 'EvPagination',
+  components: {
+    EvIcon,
+    pageButton,
+  },
+  props: {
+    total: {
+      type: [Number, String],
+      default: 0,
+    },
+    visiblePage: {
+      type: [Number, String],
+      default: 8,
+    },
+    perPage: {
+      type: [Number, String],
+      default: 20,
+    },
+    modelValue: {
+      type: [Number, String],
+      default: 1,
+    },
+    showPageInfo: {
+      type: Boolean,
+      default: false,
+    },
+    order: {
+      type: String,
+      default: 'left',
+      validator: val => ['left', 'right', 'center'].includes(val),
+    },
+  },
+  emits: {
+    'update:modelValue': null,
+    change: null,
+  },
+  setup(props, { emit }) {
+    const visiblePage = computed(() => (props.visiblePage > 7 ? props.visiblePage : 7));
+    const current = computed(() => props.modelValue);
+    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(() => {
+      const item = current.value * props.perPage - props.perPage + 1;
+      return item >= 0 ? item : 0;
+    });
+    const changePage = (num, event) => {
+      if (current.value === num || num < 1 || num > pageCount.value) return;
+      emit('update:modelValue', num);
+      emit('change', num);
+      if (event && event.target) {
+        nextTick(() => event.target.focus());
+      }
+    };
+    const getPage = (num, options = {}) => ({
+      number: num,
+      isCurrent: current.value === num,
+      click: event => changePage(num, event),
+      input: (event, inputNum) => changePage(+inputNum, event),
+      disabled: options.disabled || false,
+      class: options.class || '',
+    });
+    const onRange = (from, to) => {
+      const range = [];
+      const f = from > 0 ? from : 1;
+
+      for (let i = f; i <= to; i++) {
+        range.push(getPage(i));
+      }
+
+      return range;
+    };
+    const pagesInRange = computed(() => {
+      const totalVisible = parseInt(visiblePage.value, 10);
+
+      if (totalVisible === 0) {
+        return [];
+      }
+
+      const maxLength = Math.min(
+        Math.max(0, totalVisible) || pageCount.value,
+        pageCount.value,
+      );
+      if (pageCount.value <= maxLength) {
+        return onRange(1, pageCount.value);
+      }
+      const even = maxLength % 2 === 0 ? 1 : 0;
+      const left = Math.floor(maxLength / 2);
+      const right = pageCount.value - left + 1 + even;
+
+      if (current.value > left && current.value < right) {
+        const firstItem = 1;
+        const lastItem = pageCount.value;
+        const start = current.value - left + 2;
+        const end = current.value + left - 2 - even;
+        const secondItem = start - 1 === firstItem + 1 ? 2 : -1;
+        const beforeLastItem = end + 1 === lastItem - 1 ? end + 1 : -1;
+        return [
+          getPage(1),
+          getPage(secondItem),
+          ...onRange(start, end),
+          getPage(beforeLastItem),
+          getPage(pageCount.value),
+        ];
+      } else if (current.value === left) {
+        const end = current.value + left - 1 - even;
+        return [...onRange(1, end), getPage(-1), getPage(pageCount.value)];
+      } else if (current.value === right) {
+        const start = current.value - left + 1;
+        return [getPage(1), getPage(-1), ...onRange(start, pageCount.value)];
+      }
+      return [
+        ...onRange(1, left),
+        getPage(-1),
+        ...onRange(right, pageCount.value),
+      ];
+    });
+    const listClasses = computed(() => ({ 'justify-content': props.order, flex: '3 1 0%' }));
+
+    watch(
+      () => pageCount.value,
+      (value) => {
+        if (current.value > value) {
+          changePage(value);
+        }
+      },
+    );
+    watch(
+      () => current.value,
+      (after, before) => {
+        if (pageCount.value < after) {
+          changePage(before);
+        }
+      },
+    );
+    return {
+      pageCount,
+      pagesInRange,
+      hasPrev,
+      hasNext,
+      listClasses,
+      firstData,
+      current,
+      changePage,
+      getPage,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.pagination {
+  display: flex;
+  .pagination-next,
+  .pagination-previous {
+    margin: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    background: center center no-repeat;
+    background-size: 16px;
+    cursor: pointer;
+    &:hover {
+      color: #1A6AFE;
+    }
+  }
+  &-info {
+    order: 2;
+    line-height: 32px;
+  }
+  .is-current {
+    pointer-events: none;
+    cursor: not-allowed;
+    background-color: #1A6AFE;
+    color: #FFFFFF;
+    border-radius: 4px;
+  }
+  .is-page {
+    &:hover {
+      color: #1A6AFE;
+    }
+  }
+  .pagination-ellipsis {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  .is-disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+    color: #C0C4CC;
+  }
+  &-list {
+    display: flex;
+    user-select: none;
+    list-style: none;
+    font-size: 0;
+    padding: 0;
+    margin: 0;
+    align-items: center;
+    flex-wrap: wrap;
+    li {
+      display: flex;
+      height: 32px;
+      padding: 0 4px;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      min-width: 32px;
+      line-height: 32px;
+      cursor: pointer;
+      box-sizing: border-box;
+      text-align: center;
+    }
+  }
+}
+</style>

package/src/components/pagination/index.js

@@ -0,0 +1,7 @@
+import EvPagination from './Pagination';
+
+EvPagination.install = (app) => {
+  app.component(EvPagination.name, EvPagination);
+};
+
+export default EvPagination;

package/src/components/pagination/pageButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <span
+    :class="{
+      'is-current': page.isCurrent,
+      'is-disabled': disabled || page.disabled,
+      [page.class]: true
+    }"
+    v-bind="$attrs"
+    :aria-current="page.isCurrent"
+    @click.prevent="page.click"
+  >
+    <slot>{{ page.number }}</slot>
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: 'PageButton',
+  props: {
+    page: {
+      type: Object,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/main.js

@@ -28,6 +28,7 @@ import EvTimePicker from '@/components/timePicker/';
 import EvGrid from '@/components/grid/';
 import EvChart from '@/components/chart/';
 import EvTreeGrid from '@/components/treeGrid/';
+import EvPagination from '@/components/pagination/';
 import { version } from '../package.json';
 
 const components = [
@@ -61,6 +62,7 @@ const components = [
   EvNotification,
   EvMessageBox,
   EvTreeGrid,
+  EvPagination,
 ];
 
 const install = (app) => {
@@ -108,6 +110,7 @@ export {
   EvNotification,
   EvMessageBox,
   EvTreeGrid,
+  EvPagination,
 };
 
 export default EVUI;