evui 3.3.9 → 3.3.12

package/src/components/grid/Grid.vue

@@ -1,17 +1,16 @@
 <template>
   <div
-    v-if="!!$slots.toolbar"
+    v-if="$slots.toolbar"
     class="toolbar-wrapper"
     :style="`width: ${gridWidth};`"
   >
     <!-- Toolbar -->
-    <toolbar v-if="!!$slots.toolbar" >
+    <toolbar>
       <template #toolbarWrapper>
         <slot
           name="toolbar"
           :item="{ onSearch: onSearch }"
-        >
-        </slot>
+        />
       </template>
     </toolbar>
   </div>
@@ -26,7 +25,7 @@
     class="grid-wrapper"
     :style="`width: ${gridWidth}; height: ${gridHeight};`"
   >
-    <!--Table-->
+    <!-- Table -->
     <div
       v-cloak
       ref="grid"
@@ -37,7 +36,7 @@
         'non-header': !showHeader,
       }"
     >
-      <!--Header-->
+      <!-- Header -->
       <div
         v-show="showHeader"
         ref="header"
@@ -47,7 +46,7 @@
         }"
       >
         <ul class="column-list">
-          <!--Header Checkbox-->
+          <!-- Header Checkbox -->
           <li
             v-if="useCheckbox.use"
             :class="{
@@ -57,14 +56,12 @@
             :style="`width: ${minWidth}px;`"
           >
             <ev-checkbox
-              v-if="useCheckbox.use
-                && useCheckbox.headerCheck
-                && useCheckbox.mode !== 'single'"
+              v-if="useCheckbox.use && useCheckbox.headerCheck && useCheckbox.mode !== 'single'"
               v-model="isHeaderChecked"
               @change="onCheckAll"
             />
           </li>
-          <!--Column List-->
+          <!-- Column List -->
           <template
             v-for="(column, index) in orderedColumns"
             :key="index"
@@ -78,18 +75,19 @@
                 'non-border': !!borderStyle,
                 [column.field]: column.field,
               }"
-              :style="`
-                width: ${column.width}px;
-                min-width: ${isRenderer(column) ? rendererMinWidth : minWidth}px;`"
+              :style="{
+                width: `${column.width}px`,
+                'min-width': `${isRenderer(column) ? rendererMinWidth : minWidth}px`,
+              }"
             >
-              <!--Filter Status-->
+              <!-- Filter Status -->
               <span
                 v-if="isFiltering && filterList[column.field]?.find(item => item.use)"
                 class="column-filter-status"
               >
                 <ev-icon icon="ev-icon-filter"/>
               </span>
-              <!--Column Name-->
+              <!-- Column Name -->
               <span
                 :title="column.caption"
                 class="column-name"
@@ -97,7 +95,7 @@
               >
                 {{ column.caption }}
               </span>
-              <!--Sort Icon-->
+              <!-- Sort Icon -->
               <template v-if="sortField === column.field">
                 <ev-icon
                   v-if="sortOrder === 'desc'"
@@ -108,15 +106,15 @@
                   icon="ev-icon-triangle-up"
                 />
               </template>
-              <!--Filter Button-->
+              <!-- Filter Button -->
               <span
-                v-if="isFilterButton(column.field)"
+                v-if="isFiltering"
                 class="column-filter"
                 @click.capture="onClickFilter(column)"
               >
                 <ev-icon icon="ev-icon-hamburger2"/>
               </span>
-              <!--Column Resize-->
+              <!-- Column Resize -->
               <span
                 class="column-resize"
                 @mousedown.stop.left="onColumnResize(index, $event)"
@@ -125,7 +123,7 @@
           </template>
         </ul>
       </div>
-      <!--Body-->
+      <!-- Body -->
       <div
         ref="body"
         :class="{
@@ -138,106 +136,106 @@
         @contextmenu="onContextMenu($event)"
         @contextmenu.prevent="menu.show"
       >
-        <!--vScroll Top-->
+        <!-- vScroll Top -->
         <div
           :style="`height: ${vScrollTopHeight}px;`"
           class="vscroll-spacer"
         />
         <table>
           <tbody>
-          <!--Row List-->
-          <tr
-            v-for="(row, rowIndex) in viewStore"
-            :key="rowIndex"
-            :data-index="row[0]"
-            :class="{
-              row: true,
-              selected: row[2] === selectedRow,
-              'non-border': !!borderStyle && borderStyle !== 'rows',
-              highlight: row[0] === highlightIdx,
-            }"
-            @click="onRowClick($event, row)"
-            @dblclick="onRowDblClick($event, row)"
-          >
-            <!--Row Checkbox-->
-            <td
-              v-if="useCheckbox.use"
+            <!-- Row List -->
+            <tr
+              v-for="(row, rowIndex) in viewStore"
+              :key="rowIndex"
+              :data-index="row[0]"
               :class="{
-                cell: true,
-                'row-checkbox': true,
-                'non-border': !!borderStyle,
+                row: true,
+                selected: row[3],
+                'non-border': !!borderStyle && borderStyle !== 'rows',
+                highlight: row[0] === highlightIdx,
               }"
-              :style="`width: ${minWidth}px; height: ${rowHeight}px;`"
+              @click="onRowClick($event, row)"
+              @dblclick="onRowDblClick($event, row)"
             >
-              <ev-checkbox
-                v-model="row[1]"
-                class="row-checkbox-input"
-                @change="onCheck($event, row)"
-              />
-            </td>
-            <!--Cell-->
-            <template v-for="(column, cellIndex) in orderedColumns" :key="cellIndex">
+              <!-- Row Checkbox -->
               <td
-                v-if="!column.hide"
-                :data-name="column.field"
-                :data-index="column.index"
+                v-if="useCheckbox.use"
                 :class="{
                   cell: true,
-                  [column.type]: column.type,
-                  [column.align]: column.align,
-                  render: isRenderer(column),
+                  'row-checkbox': true,
                   'non-border': !!borderStyle,
-                  [column.field]: column.field,
                 }"
-                :style="`
-                  width: ${column.width}px;
-                  height: ${rowHeight}px;
-                  line-height: ${rowHeight}px;
-                  min-width: ${isRenderer(column) ? rendererMinWidth : minWidth}px;`"
+                :style="`width: ${minWidth}px; height: ${rowHeight}px;`"
               >
-                <!-- cell renderer -->
-                <template v-if="!!$slots[column.field]">
-                  <slot
-                    :name="column.field"
-                    :item="{
-                      row,
-                      column,
-                    }"
-                  >
-                  </slot>
-                </template>
-                <!-- cell value -->
-                <template v-else>
-                  <div :title="getConvertValue(column.type, row[2][column.index])">
-                    {{ getConvertValue(column.type, row[2][column.index]) }}
-                  </div>
-                </template>
+                <ev-checkbox
+                  v-model="row[1]"
+                  class="row-checkbox-input"
+                  @change="onCheck($event, row)"
+                />
               </td>
-            </template>
-          </tr>
-          <tr v-if="!viewStore.length">
-            <td class="is-empty">No records</td>
-          </tr>
+              <!-- Cell -->
+              <template
+                v-for="(column, cellIndex) in orderedColumns"
+                :key="cellIndex"
+              >
+                <td
+                  v-if="!column.hide"
+                  :data-name="column.field"
+                  :data-index="column.index"
+                  :class="{
+                    cell: true,
+                    [column.type]: column.type,
+                    [column.align]: column.align,
+                    render: isRenderer(column),
+                    'non-border': !!borderStyle,
+                    [column.field]: column.field,
+                  }"
+                  :style="{
+                    width: `${column.width}px`,
+                    height: `${rowHeight}px`,
+                    'line-height': `${rowHeight}px`,
+                    'min-width': `${isRenderer(column) ? rendererMinWidth : minWidth}px`,
+                  }"
+                >
+                  <!-- Cell Renderer -->
+                  <template v-if="!!$slots[column.field]">
+                    <slot
+                      :name="column.field"
+                      :item="{ row, column }"
+                    />
+                  </template>
+                  <!-- Cell Value -->
+                  <template v-else>
+                    <div :title="getConvertValue(column, row[2][column.index])">
+                      {{ getConvertValue(column, row[2][column.index]) }}
+                    </div>
+                  </template>
+                </td>
+              </template>
+            </tr>
+            <tr v-if="!viewStore.length">
+              <td class="is-empty">No records</td>
+            </tr>
           </tbody>
         </table>
-        <!--vScroll Bottom-->
+        <!-- vScroll Bottom -->
         <div
           :style="`height: ${vScrollBottomHeight}px;`"
           class="vscroll-spacer"
         />
-        <!--Context Menu-->
+        <!-- Context Menu -->
         <ev-context-menu
           ref="menu"
           :items="contextMenuItems"
         />
       </div>
-      <!--Resize Line-->
+      <!-- Resize Line -->
       <div
         v-show="showResizeLine"
         ref="resizeLine"
         class="table-resize-line"
       />
-      <!--Filter Window-->
+      <!-- Filter Window -->
       <filter-window
         v-show="showFilterWindow"
         :is-show="showFilterWindow"
@@ -248,12 +246,36 @@
       />
     </div>
   </div>
+  <!-- Summary -->
+  <grid-summary
+    v-if="useSummary"
+    :ordered-columns="orderedColumns"
+    :stores="stores"
+    :use-checkbox="useCheckbox.use"
+    :style-option="{
+      borderStyle,
+      minWidth,
+      rowHeight,
+    }"
+  />
+  <!-- Pagination -->
+  <grid-pagination
+    v-if="usePage && !isInfinite"
+    v-model="currentPage"
+    :total="store.length"
+    :per-page="perPage"
+    :visible-page="visiblePage"
+    :show-page-info="showPageInfo"
+    :order="order"
+  />
 </template>
 
 <script>
-import { reactive, toRefs, computed, watch, onMounted, onActivated } from 'vue';
-import FilterWindow from './grid.filter.window';
+import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick } from 'vue';
 import Toolbar from './grid.toolbar';
+import FilterWindow from './grid.filter.window';
+import GridPagination from './grid.pagination';
+import GridSummary from './grid.summary';
 import {
   commonFunctions,
   scrollEvent,
@@ -264,13 +286,16 @@ import {
   filterEvent,
   contextMenuEvent,
   storeEvent,
+  pagingEvent,
 } from './uses';
 
 export default {
   name: 'EvGrid',
   components: {
-    FilterWindow,
     Toolbar,
+    FilterWindow,
+    GridPagination,
+    GridSummary,
   },
   props: {
     columns: {
@@ -309,9 +334,13 @@ export default {
     'update:checked': null,
     'check-row': null,
     'check-all': null,
-    'scroll-end': null,
+    'page-change': null,
   },
   setup(props) {
+    // const ROW_INDEX = 0;
+    const ROW_CHECK_INDEX = 1;
+    const ROW_DATA_INDEX = 2;
+    const ROW_SELECT_INDEX = 3;
     const {
       isRenderer,
       getComponentName,
@@ -319,11 +348,11 @@ export default {
       getColumnIndex,
       setPixelUnit,
     } = commonFunctions();
-    const showHeader = computed(() =>
-      (props.option.showHeader === undefined ? true : props.option.showHeader));
+    const showHeader = computed(() => (props.option.showHeader ?? true));
+    const useSummary = computed(() => (props.option?.useSummary || false));
     const stripeStyle = computed(() => (props.option.style?.stripe || false));
     const borderStyle = computed(() => (props.option.style?.border || ''));
-    const highlightIdx = computed(() => (props.option.style?.highlight || -1));
+    const highlightIdx = computed(() => (props.option.style?.highlight ?? -1));
     const rowMinHeight = props.option.rowMinHeight || 35;
     const elementInfo = reactive({
       body: null,
@@ -333,8 +362,7 @@ export default {
     });
     const filterInfo = reactive({
       filterList: {},
-      isFiltering: computed(() =>
-        (props.option.useFilter === undefined ? true : props.option.useFilter)),
+      isFiltering: computed(() => (props.option.useFilter ?? false)),
       setFiltering: false,
       showFilterWindow: false,
       currentFilter: {
@@ -348,6 +376,7 @@ export default {
       viewStore: [],
       originStore: [],
       filterStore: [],
+      pagingStore: [],
       store: computed(() => {
         const store = filterInfo.isFiltering ? stores.filterStore : stores.originStore;
         return filterInfo.isSearch ? stores.searchStore : store;
@@ -355,11 +384,27 @@ export default {
       orderedColumns: computed(() =>
         (props.columns.map((column, index) => ({ index, ...column })))),
     });
+    const pageInfo = reactive({
+      usePage: computed(() => (props.option.page?.use || false)),
+      useClient: props.option.page?.useClient || false,
+      isInfinite: computed(() => (props.option.page?.isInfinite || false)),
+      startIndex: 0,
+      prevPage: 0,
+      currentPage: 0,
+      total: computed(() => (props.option.page?.total || 0)),
+      perPage: computed(() => (props.option.page?.perPage || 20)),
+      visiblePage: computed(() => (props.option.page?.visiblePage || 8)),
+      order: computed(() => (props.option.page?.order || 'center')),
+      showPageInfo: computed(() => (props.option.page?.showPageInfo || false)),
+      isClientPaging: computed(() =>
+        pageInfo.useClient && pageInfo.usePage && !pageInfo.isInfinite),
+      isHighlight: false,
+      highlightPage: 0,
+    });
     const checkInfo = reactive({
       prevCheckedRow: [],
       isHeaderChecked: false,
       checkedRows: props.checked,
-      checkedIndex: new Set(),
       useCheckbox: computed(() => (props.option.useCheckbox || {})),
     });
     const scrollInfo = reactive({
@@ -372,8 +417,14 @@ export default {
       hasVerticalScrollBar: false,
     });
     const selectInfo = reactive({
-      useSelect: props.option.useSelect === undefined ? true : props.option.useSelect,
       selectedRow: props.selected,
+      useSelect: computed(() => props.option?.useSelection?.use ?? true),
+      limitCount: computed(() => {
+        let limit = props.option?.useSelection?.limitCount;
+        limit = !!limit && limit >= 2 ? limit : 0;
+        return limit;
+      }),
+      multiple: computed(() => props.option?.useSelection?.multiple ?? false),
     });
     const sortInfo = reactive({
       isSorting: false,
@@ -398,35 +449,60 @@ export default {
       gridWidth: computed(() => (props.width ? setPixelUnit(props.width) : '100%')),
       gridHeight: computed(() => (props.height ? setPixelUnit(props.height) : '100%')),
     });
-    const pageInfo = reactive({
-      currentPage: 1,
-      prevPage: 0,
-      startIndex: 0,
-      use: computed(() => (props.option.page?.use || false)),
-      dataCount: computed(() => (props.option.page?.dataCount || 50)),
-      isInfinite: computed(() => (props.option.page?.isInfinite || false)),
+    const clearCheckInfo = () => {
+      checkInfo.checkedRows = [];
+      checkInfo.isHeaderChecked = false;
+      stores.store.forEach((row) => {
+        row[ROW_CHECK_INDEX] = false;
+      });
+    };
+    const clearSelectInfo = () => {
+      selectInfo.selectedRow = [];
+      stores.store.forEach((row) => {
+        row[ROW_SELECT_INDEX] = false;
+      });
+    };
+    const {
+      getPagingData,
+      updatePagingInfo,
+      changePage,
+    } = pagingEvent({
+      stores,
+      pageInfo,
+      sortInfo,
+      filterInfo,
+      elementInfo,
+      clearCheckInfo,
     });
 
     const {
       updateVScroll,
       updateHScroll,
       onScroll,
-    } = scrollEvent({ scrollInfo, stores, elementInfo, resizeInfo, pageInfo });
+    } = scrollEvent({
+      scrollInfo,
+      stores,
+      elementInfo,
+      resizeInfo,
+      pageInfo,
+      getPagingData,
+      updatePagingInfo,
+    });
 
     const {
       onRowClick,
       onRowDblClick,
-    } = clickEvent(selectInfo);
+    } = clickEvent({ selectInfo });
 
     const {
       onCheck,
       onCheckAll,
-    } = checkEvent({ checkInfo, stores, filterInfo });
+    } = checkEvent({ checkInfo, stores, pageInfo, getPagingData, updatePagingInfo });
 
     const {
       onSort,
       setSort,
-    } = sortEvent({ sortInfo, stores, getColumnIndex });
+    } = sortEvent({ sortInfo, stores, getColumnIndex, updatePagingInfo });
 
     const {
       onClickFilter,
@@ -438,14 +514,16 @@ export default {
       filterInfo,
       stores,
       checkInfo,
+      pageInfo,
       getColumnIndex,
       getConvertValue,
       updateVScroll,
+      getPagingData,
+      updatePagingInfo,
     });
 
     const {
       setStore,
-      updateData,
     } = storeEvent({
       selectInfo,
       checkInfo,
@@ -463,7 +541,15 @@ export default {
       onResize,
       onShow,
       onColumnResize,
-    } = resizeEvent({ resizeInfo, elementInfo, checkInfo, stores, isRenderer, updateVScroll });
+    } = resizeEvent({
+      resizeInfo,
+      elementInfo,
+      checkInfo,
+      stores,
+      filterInfo,
+      isRenderer,
+      updateVScroll,
+    });
 
     const {
       setContextMenu,
@@ -477,14 +563,6 @@ export default {
     onActivated(() => {
       onResize();
     });
-    const ROW_INDEX = 0;
-    const ROW_CHECK_INDEX = 1;
-    const ROW_DATA_INDEX = 2;
-    const clearCheckInfo = () => {
-      checkInfo.checkedRows = [];
-      checkInfo.checkedIndex.clear();
-      checkInfo.isHeaderChecked = false;
-    };
     watch(
       () => props.columns,
       () => {
@@ -499,6 +577,11 @@ export default {
         if (value) {
           setStore(stores.originStore, false);
           sortInfo.isSorting = !value;
+          if (pageInfo.isClientPaging) {
+            pageInfo.currentPage = 1;
+            stores.pagingStore = getPagingData();
+            clearCheckInfo();
+          }
         }
       },
     );
@@ -525,14 +608,13 @@ export default {
       (checkedList) => {
         checkInfo.checkedRows = checkedList;
         checkInfo.isHeaderChecked = false;
-        checkInfo.checkedIndex.clear();
-        const store = stores.store;
+        let store = stores.store;
+        if (pageInfo.isClientPaging) {
+          store = getPagingData();
+        }
         if (store.length) {
           store.forEach((row) => {
             row[ROW_CHECK_INDEX] = checkedList.includes(row[ROW_DATA_INDEX]);
-            if (row[ROW_CHECK_INDEX]) {
-              checkInfo.checkedIndex.add(row[ROW_INDEX]);
-            }
           });
           checkInfo.isHeaderChecked = checkedList.length === store.length;
         }
@@ -541,8 +623,31 @@ export default {
     );
     watch(
       () => props.selected,
-      (value) => {
-        selectInfo.selectedRow = value;
+      (selectedList) => {
+        if (selectInfo.useSelect) {
+          selectInfo.selectedRow = selectedList;
+          stores.store.forEach((row) => {
+            row[ROW_SELECT_INDEX] = selectInfo.selectedRow.includes(row[ROW_DATA_INDEX]);
+          });
+          updateVScroll();
+        }
+      },
+    );
+    watch(
+      () => highlightIdx.value,
+      async (index) => {
+        await nextTick();
+        if (index >= 0) {
+          if (pageInfo.usePage && !pageInfo.isInfinite) {
+            pageInfo.highlightPage = Math.ceil(index / pageInfo.perPage) || 1;
+            if (pageInfo.highlightPage !== pageInfo.currentPage) {
+              pageInfo.currentPage = pageInfo.highlightPage;
+              pageInfo.isHighlight = true;
+              return;
+            }
+          }
+          elementInfo.body.scrollTop = resizeInfo.rowHeight * highlightIdx.value;
+        }
       },
     );
     watch(
@@ -551,6 +656,18 @@ export default {
         clearCheckInfo();
       },
     );
+    watch(
+      () => selectInfo.useSelect,
+      () => {
+        clearSelectInfo();
+      },
+    );
+    watch(
+      () => selectInfo.multiple,
+      () => {
+        clearSelectInfo();
+      },
+    );
     watch(
       () => props.checked.length,
       (checkedSize) => {
@@ -590,15 +707,44 @@ export default {
       (value) => {
         if (value !== undefined) {
           onSearch(value?.value ?? value);
+          if (pageInfo.isClientPaging) {
+            clearCheckInfo();
+            clearSelectInfo();
+          }
         }
-      }, { immediate: true, deep: true },
+      }, { immediate: true },
+    );
+    watch(
+      () => props.option.page?.currentPage,
+      (value) => {
+        const current = !value ? 1 : value;
+        pageInfo.currentPage = !props.option.page?.isInfinite ? current : 1;
+      }, { immediate: true },
+    );
+    watch(
+      () => pageInfo.currentPage,
+      (current, before) => {
+        nextTick(() => {
+          changePage(before);
+          if (pageInfo.isClientPaging && current !== before) {
+            clearCheckInfo();
+            clearSelectInfo();
+          }
+          updateVScroll();
+          if (current === pageInfo.highlightPage && pageInfo.isHighlight) {
+            elementInfo.body.scrollTop = resizeInfo.rowHeight * highlightIdx.value;
+            pageInfo.isHighlight = !pageInfo.isHighlight;
+          }
+        });
+      },
     );
-    const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     return {
       showHeader,
       stripeStyle,
       borderStyle,
       highlightIdx,
+      useSummary,
+      stores,
       ...toRefs(elementInfo),
       ...toRefs(stores),
       ...toRefs(filterInfo),
@@ -632,11 +778,9 @@ export default {
       onApplyFilter,
       setFilter,
       setStore,
-      updateData,
       setContextMenu,
       onContextMenu,
       onSearch,
-      isFilterButton,
     };
   },
 };