evui 3.4.64 → 3.4.66

package/package.json

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

package/src/components/chart/element/element.tip.js

@@ -92,9 +92,11 @@ const modules = {
 
       if (maxTipOpt.use && maxArgs) {
         if (tooltipValueFormatter) {
-          maxArgs.text = isHorizontal
-            ? tooltipValueFormatter({ x: maxArgs.value })
-            : tooltipValueFormatter({ y: maxArgs.value });
+          maxArgs.text = tooltipValueFormatter({
+            seriesId: seriesInfo.sId,
+            x: isHorizontal ? maxArgs.value : undefined,
+            y: !isHorizontal ? maxArgs.value : undefined,
+          });
         } else {
           maxArgs.text = numberWithComma(maxArgs.value);
         }

package/src/components/grid/Grid.vue

@@ -248,69 +248,75 @@
               @dragover="onDragOver"
               @drop="onDrop"
             >
-              <!-- Column Name -->
-              <span
-                :title="column.caption"
-                class="column-name"
-                @click="onColumnContextMenu($event, column)"
-                @click.prevent="columnMenu.show"
-              >
-                {{ column.caption }}
-                <!-- Sort Icon -->
-                <span @click.stop="onSort(column)">
-                  <template v-if="!!$slots.sortIcon">
-                    <span
-                      v-if="column.sortable === undefined ? true : column.sortable"
-                      class="column-sort__icon column-sort__icon--basic"
-                      :style="{
-                        height: `${rowHeight}px`,
-                        'line-height': `${rowHeight}px`,
-                      }"
-                    >
-                      <slot name="sortIcon" />
-                    </span>
-                    <span
-                      v-if="sortField === column.field"
-                      :class="[{
-                        'column-sort__icon': true,
-                        'column-sort__icon--asc': sortOrder === 'asc',
-                        'column-sort__icon--desc': sortOrder === 'desc',
-                      }]"
-                      :style="{
-                        height: `${rowHeight}px`,
-                        'line-height': `${rowHeight}px`,
-                      }"
-                    >
-                      <slot :name="`sortIcon_${sortOrder}`" />
-                    </span>
-                  </template>
-                  <template v-else>
-                    <grid-sort-button
-                      v-if="column.sortable === undefined ? true : column.sortable"
-                      class="column-sort__icon column-sort__icon--basic"
-                      :icon="'basic'"
-                      :style="{
-                        height: `${rowHeight}px`,
-                        'line-height': `${rowHeight}px`,
-                      }"
-                    />
-                    <grid-sort-button
-                      v-if="sortField === column.field"
-                      :class="[{
-                        'column-sort__icon': true,
-                        'column-sort__icon--asc': sortOrder === 'asc',
-                        'column-sort__icon--desc': sortOrder === 'desc',
-                      }]"
-                      :icon="sortOrder"
-                      :style="{
-                        height: `${rowHeight}px`,
-                        'line-height': `${rowHeight}px`,
-                        visibility: !!sortOrder ? column.hidden : true,
-                      }"
-                    />
-                  </template>
+              <!-- Custom Header -->
+              <template v-if="column.customHeader && !!$slots.customHeader">
+                <slot name="customHeader" />
+              </template>
+              <template v-else>
+                <!-- Column Name -->
+                <span
+                  :title="column.caption"
+                  class="column-name"
+                  @click="onColumnContextMenu($event, column)"
+                  @click.prevent="columnMenu.show"
+                >
+                  {{ column.caption }}
+                  <!-- Sort Icon -->
+                  <span @click.stop="onSort(column)">
+                    <template v-if="!!$slots.sortIcon">
+                      <span
+                        v-if="column.sortable === undefined ? true : column.sortable"
+                        class="column-sort__icon column-sort__icon--basic"
+                        :style="{
+                          height: `${rowHeight}px`,
+                          'line-height': `${rowHeight}px`,
+                        }"
+                      >
+                        <slot name="sortIcon" />
+                      </span>
+                      <span
+                        v-if="sortField === column.field"
+                        :class="[{
+                          'column-sort__icon': true,
+                          'column-sort__icon--asc': sortOrder === 'asc',
+                          'column-sort__icon--desc': sortOrder === 'desc',
+                        }]"
+                        :style="{
+                          height: `${rowHeight}px`,
+                          'line-height': `${rowHeight}px`,
+                        }"
+                      >
+                        <slot :name="`sortIcon_${sortOrder}`" />
+                      </span>
+                    </template>
+                    <template v-else>
+                      <grid-sort-button
+                        v-if="column.sortable === undefined ? true : column.sortable"
+                        class="column-sort__icon column-sort__icon--basic"
+                        :icon="'basic'"
+                        :style="{
+                          height: `${rowHeight}px`,
+                          'line-height': `${rowHeight}px`,
+                        }"
+                      />
+                      <grid-sort-button
+                        v-if="sortField === column.field"
+                        :class="[{
+                          'column-sort__icon': true,
+                          'column-sort__icon--asc': sortOrder === 'asc',
+                          'column-sort__icon--desc': sortOrder === 'desc',
+                        }]"
+                        :icon="sortOrder"
+                        :style="{
+                          height: `${rowHeight}px`,
+                          'line-height': `${rowHeight}px`,
+                          visibility: !!sortOrder ? column.hidden : true,
+                        }"
+                      />
+                    </template>
+                  </span>
                 </span>
-              </span>
+              </template>
               <!-- Column Resize -->
               <span
                 class="column-resize"
@@ -352,12 +358,13 @@
           :style="`height: ${vScrollTopHeight}px;`"
           class="vscroll-spacer"
         />
+
         <table ref="table">
           <tbody>
             <!-- Row List -->
             <template
               v-for="(row, rowIndex) in viewStore"
-              :key="rowIndex"
+              :key="idColIndex !== -1 ? row[2][idColIndex] : rowIndex"
             >
               <tr
                 :data-index="row[0]"
@@ -418,7 +425,7 @@
                 <!-- Cell -->
                 <template
                   v-for="(column, cellIndex) in orderedColumns"
-                  :key="cellIndex"
+                  :key="`${idColIndex !== -1 ? row[2][idColIndex] : rowIndex}-${cellIndex}`"
                 >
                   <td
                     v-if="!column.hide && !column.hiddenDisplay"
@@ -497,10 +504,18 @@
               <tr
                 v-if="useRowDetail && $slots?.rowDetail && row[4]"
               >
+              <div
+                :style="{
+                  height: `${detailRowHeight}px`,
+                  'min-height': `${detailRowHeight}px`,
+                  'max-height': `${detailRowHeight}px`
+                }">
+
                 <slot
                   name="rowDetail"
                   :item="{ row }"
                 />
+              </div>
               </tr>
             </template>
             <tr v-if="!viewStore.length">
@@ -513,6 +528,7 @@
           :style="`height: ${vScrollBottomHeight}px;`"
           class="vscroll-spacer"
         />
+
         <!-- Context Menu -->
         <ev-context-menu
           ref="menu"
@@ -811,6 +827,7 @@ export default {
     const expandedInfo = reactive({
       expandedRows: props.expanded,
       useRowDetail: computed(() => props.option?.rowDetail?.use ?? false),
+      detailRowHeight: computed(() => (props.option?.rowDetail?.detailRowHeight)),
     });
     const scrollInfo = reactive({
       lastScroll: {
@@ -1221,6 +1238,7 @@ export default {
         if (!expendedSize) {
           clearExpandedInfo();
         }
+        updateVScroll();
       },
     );
     watch(
@@ -1411,7 +1429,10 @@ export default {
 
     onBeforeMount(() => initWrapperDiv());
 
+    const idColIndex = computed(() => stores.orderedColumns.findIndex(c => c.field === 'id'));
+
     return {
+      idColIndex,
       summaryScroll,
       showHeader,
       stripeStyle,

package/src/components/grid/uses.js

@@ -114,19 +114,56 @@ export const scrollEvent = (params) => {
   const updateVScrollBase = (isScroll) => {
     const bodyEl = elementInfo.body;
     const rowHeight = resizeInfo.rowHeight;
+    const expandedRowHeight = expandedInfo.detailRowHeight ?? 0;
+
     if (bodyEl) {
       let store = stores.store;
       if (pageInfo.isClientPaging) {
         store = getPagingData();
       }
-      const rowCount = bodyEl.clientHeight > rowHeight
-        ? Math.ceil(bodyEl.clientHeight / rowHeight) : store.length;
-      const totalScrollHeight = store.length * rowHeight;
-      let firstVisibleIndex = Math.floor(bodyEl.scrollTop / rowHeight);
+
+      const expandedRowCount = expandedInfo.expandedRows?.length ?? 0;
+      const expandedRowIndexes = expandedInfo.expandedRows?.map(
+        row => store.findIndex(data => data[ROW_DATA_INDEX] === row),
+      ) ?? [];
+      const totalScrollHeight = store.length * rowHeight + expandedRowCount * expandedRowHeight;
+
+      let firstVisibleIndex = 0;
+      let scrollTop = 0;
+
+      if (expandedRowCount) {
+        for (firstVisibleIndex = 0; scrollTop + rowHeight < bodyEl.scrollTop; firstVisibleIndex++) {
+          if (expandedRowIndexes.includes(firstVisibleIndex)) {
+            scrollTop += expandedRowHeight;
+          }
+          scrollTop += rowHeight;
+        }
+      } else {
+        firstVisibleIndex = Math.floor(bodyEl.scrollTop / rowHeight);
+        scrollTop = Math.max(firstVisibleIndex, 0) * rowHeight;
+      }
+
       if (firstVisibleIndex > store.length - 1) {
         firstVisibleIndex = 0;
       }
 
+      let rowCount = 0;
+      let renderRowHeight = 0;
+
+      if (expandedRowCount) {
+        for (let i = firstVisibleIndex; renderRowHeight <= bodyEl.clientHeight; i++) {
+          if (expandedRowIndexes.includes(i)) {
+            renderRowHeight += expandedRowHeight;
+          }
+          renderRowHeight += rowHeight;
+          rowCount += 1;
+        }
+      } else {
+        rowCount = bodyEl.clientHeight > rowHeight
+          ? Math.ceil(bodyEl.clientHeight / rowHeight) : store.length;
+          renderRowHeight = rowCount * rowHeight;
+      }
+
       const lastVisibleIndex = firstVisibleIndex + rowCount + 1;
       const firstIndex = Math.max(firstVisibleIndex, 0);
       const lastIndex = lastVisibleIndex;
@@ -135,8 +172,8 @@ export const scrollEvent = (params) => {
       stores.viewStore = store.slice(firstIndex, lastIndex);
       scrollInfo.hasVerticalScrollBar = rowCount < store.length
         || bodyEl.clientHeight < tableEl.clientHeight;
-      scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
-      scrollInfo.vScrollBottomHeight = totalScrollHeight - (stores.viewStore.length * rowHeight)
+      scrollInfo.vScrollTopHeight = scrollTop;
+      scrollInfo.vScrollBottomHeight = totalScrollHeight - renderRowHeight
         - scrollInfo.vScrollTopHeight;
       if (isScroll && pageInfo.isInfinite && scrollInfo.vScrollBottomHeight === 0) {
         pageInfo.prevPage = pageInfo.currentPage;
@@ -148,10 +185,10 @@ export const scrollEvent = (params) => {
   };
 
   /**
-   *  rowDetail slot 시에는 가상 스크롤을 적용하지 않는다.
+   *  고정 높이를 지정하지 않은 rowDetail slot 시에는 가상 스크롤을 적용하지 않는다.
    */
   const updateVScroll = (isScroll) => {
-    if (expandedInfo.useRowDetail) {
+    if (expandedInfo.useRowDetail && !expandedInfo.detailRowHeight) {
       let store = stores.store;
       if (pageInfo.isClientPaging) {
         store = getPagingData();

package/src/components/pagination/Pagination.vue

@@ -10,9 +10,25 @@
         / {{ total }}
       </template>
     </small>
+
     <ul class="pagination-list" :style="listClasses">
+      <!-- Jump -->
+      <li v-if="$props.pagePerJump"
+        class="step-button"
+        :class="{'is-disabled': !hasPrev}">
+        <page-button
+          class="pagination-previous"
+          :disabled="!hasPrev"
+          :page="getPage(prevJumpPage, {isCurrent: false})"
+        >
+          <ev-icon icon="ev-icon-s-double-left"/>
+        </page-button>
+      </li>
+
       <!-- Previous -->
-      <li :class="{'is-disabled': !hasPrev}">
+      <li
+        class="step-button"
+      :class="{'is-disabled': !hasPrev}">
         <page-button
           class="pagination-previous"
           :disabled="!hasPrev"
@@ -33,7 +49,9 @@
       </template>
 
       <!-- Next -->
-      <li :class="{'is-disabled': !hasNext}">
+      <li
+      class="step-button"
+      :class="{'is-disabled': !hasNext}">
         <page-button
           class="pagination-next"
           :disabled="!hasNext"
@@ -42,6 +60,20 @@
           <ev-icon icon="ev-icon-s-arrow-right"/>
         </page-button>
       </li>
+
+      <!-- Jump -->
+      <li v-if="$props.pagePerJump"
+      class="step-button"
+      :class="{'is-disabled': !hasNext}">
+        <page-button
+          class="pagination-previous"
+          :disabled="!hasNext"
+          :page="getPage(nextJumpPage, {isCurrent: false})"
+        >
+          <ev-icon icon="ev-icon-s-double-right"/>
+        </page-button>
+      </li>
+
     </ul>
   </nav>
 </template>
@@ -83,6 +115,10 @@ export default {
       default: 'left',
       validator: val => ['left', 'right', 'center'].includes(val),
     },
+    pagePerJump: {
+      type: [Number, undefined],
+      default: undefined,
+    },
   },
   emits: {
     'update:modelValue': null,
@@ -95,6 +131,14 @@ export default {
       ? 1 : Math.ceil(props.total / props.perPage)));
     const hasPrev = computed(() => current.value > 1);
     const hasNext = computed(() => current.value < pageCount.value);
+
+    const prevJumpPage = computed(
+      () => Math.max(current.value - props.pagePerJump, 1),
+    );
+    const nextJumpPage = computed(
+      () => Math.min(current.value + props.pagePerJump, pageCount.value),
+    );
+
     const firstData = computed(() => {
       const item = current.value * props.perPage - props.perPage + 1;
       return item >= 0 ? item : 0;
@@ -109,7 +153,7 @@ export default {
     };
     const getPage = (num, options = {}) => ({
       number: num,
-      isCurrent: current.value === num,
+      isCurrent: options.isCurrent ?? current.value === num,
       click: event => changePage(num, event),
       input: (event, inputNum) => changePage(+inputNum, event),
       disabled: options.disabled || false,
@@ -198,6 +242,8 @@ export default {
       current,
       changePage,
       getPage,
+      prevJumpPage,
+      nextJumpPage,
     };
   },
 };

package/src/components/treeGrid/TreeGrid.vue

@@ -72,18 +72,24 @@
               :class="getColumnClass(column)"
               :style="getColumnStyle(column, index)"
             >
-              <!-- Column Name -->
-              <span
-                :title="column.caption"
-                :class="[
-                  'column-name',
-                  { 'column-name--click' : useGridSetting }
-                ]"
-                @click="onColumnContextMenu($event, column)"
-                @click.prevent="columnMenu.show"
-              >
-                {{ column.caption }}
-              </span>
+              <!-- Custom Header -->
+              <template v-if="column.customHeader && !!$slots.customHeader">
+                <slot name="customHeader" />
+              </template>
+              <template v-else>
+                <!-- Column Name -->
+                <span
+                  :title="column.caption"
+                  :class="[
+                    'column-name',
+                    { 'column-name--click' : useGridSetting }
+                  ]"
+                  @click="onColumnContextMenu($event, column)"
+                  @click.prevent="columnMenu.show"
+                >
+                  {{ column.caption }}
+                </span>
+              </template>
               <!-- Column Resize -->
               <span
                 class="column-resize"
@@ -125,7 +131,7 @@
           <tbody>
             <tree-grid-node
               v-for="(node, idx) in viewStore"
-              :key="idx"
+              :key="node['id'] || idx"
               :selected-data="selectedRow"
               :node-data="node"
               :use-checkbox="useCheckbox"
@@ -886,6 +892,7 @@ export default {
         column: true,
         render,
         'non-border': !!styleInfo.borderStyle,
+        [column.field]: column.field,
       };
     };
     const getColumnStyle = (column, index) => {

package/src/components/treeGrid/TreeGridNode.vue

@@ -256,6 +256,7 @@ export default {
       'tree-td': cellIndex === 0,
       [column.type]: column.type,
       [column.align]: column.align,
+      [column.field]: column.field,
       'non-border': !!props.borderStyle,
     });
     const getColumnStyle = (column, cellIndex) => ({