evui 3.3.14 → 3.3.17

package/src/components/chart/scale/scale.step.js

@@ -7,7 +7,6 @@ class StepScale extends Scale {
   constructor(type, opt, ctx, labels, options) {
     super(type, opt, ctx, options);
     this.labels = labels;
-    this.rangeMode = opt.rangeMode;
   }
 
   /**
@@ -18,7 +17,8 @@ class StepScale extends Scale {
    * @returns {object} min/max value and label
    */
   calculateScaleRange(minMax, chartRect) {
-    const stepMinMax = Util.getStringMinMax(this.labels);
+    const stepMinMax = this.rangeMode
+      ? minMax : Util.getStringMinMax(this.labels);
     const maxValue = stepMinMax.max;
     const minValue = stepMinMax.min;
     const maxWidth = chartRect.chartWidth / (this.labels.length + 2);
@@ -42,9 +42,20 @@ class StepScale extends Scale {
    * @returns {object} steps, interval, min/max graph value
    */
   calculateSteps(range) {
+    let numberOfSteps = this.labels.length;
+    let interval = 1;
+
+    if (this.rangeMode) {
+      const { maxSteps } = range;
+
+      while (numberOfSteps > maxSteps * 2) {
+        interval *= 2;
+        numberOfSteps = Math.round(numberOfSteps / interval);
+      }
+    }
     return {
-      steps: this.labels.length,
-      interval: 1,
+      steps: numberOfSteps,
+      interval,
       graphMin: range.minValue,
       graphMax: range.maxValue,
     };
@@ -68,7 +79,9 @@ class StepScale extends Scale {
       y2: chartRect.y2 - labelOffset.bottom,
     };
 
+    const oriSteps = this.labels.length;
     const steps = stepInfo.steps;
+    const count = stepInfo.interval;
 
     const startPoint = aPos[this.units.rectStart];
     const endPoint = aPos[this.units.rectEnd];
@@ -116,8 +129,10 @@ class StepScale extends Scale {
 
       let labelText;
       let labelPoint;
+      let index;
 
-      labels.forEach((item, index) => {
+      for (index = 0; index < oriSteps; index += count) {
+        const item = this.labels[index];
         labelCenter = Math.round(startPoint + (labelGap * index));
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(item, maxWidth);
@@ -143,9 +158,9 @@ class StepScale extends Scale {
           ctx.fillText(labelText, xPoint, labelPoint);
 
           if (!isBlurredLabel
-              && this.options?.selectItem?.showLabelTip
-              && hitInfo?.label
-              && !this.options?.horizontal) {
+            && this.options?.selectItem?.showLabelTip
+            && hitInfo?.label
+            && !this.options?.horizontal) {
             const selectedLabel = hitInfo.label;
             if (selectedLabel === labelText) {
               const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);
@@ -179,9 +194,9 @@ class StepScale extends Scale {
           }
         }
         ctx.stroke();
-      });
+      }
 
-      if (this.rangeMode) {
+      if (this.rangeMode && (index === this.labels.length)) {
         let labelLastText = +labels[labels.length - 1] + (+labels[1] - +labels[0]);
         if (isNaN(labelLastText)) {
           labelLastText = 'Max';

package/src/components/chart/uses.js

@@ -43,6 +43,7 @@ const DEFAULT_OPTIONS = {
   width: '100%',
   height: '100%',
   thickness: 1,
+  cPadRatio: 0,
   borderRadius: 0,
   combo: false,
   tooltip: {
@@ -113,8 +114,10 @@ const DEFAULT_OPTIONS = {
       show: false,
       color: '#FFFFFF',
       lineWidth: 1,
+      opacity: 1,
     },
     error: '#FF0000',
+    decimalPoint: 0,
   },
 };
 

package/src/components/grid/Grid.vue

@@ -198,12 +198,12 @@
                   }"
                 >
                   <!-- Cell Renderer -->
-                  <template v-if="!!$slots[column.field]">
+                  <div v-if="!!$slots[column.field]">
                     <slot
                       :name="column.field"
                       :item="{ row, column }"
                     />
-                  </template>
+                  </div>
                   <!-- Cell Value -->
                   <template v-else>
                     <div :title="getConvertValue(column, row[2][column.index])">
@@ -257,6 +257,7 @@
       minWidth,
       rowHeight,
     }"
+    :scroll-left="summaryScroll"
   />
   <!-- Pagination -->
   <grid-pagination
@@ -271,7 +272,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick } from 'vue';
+import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick, ref } from 'vue';
 import Toolbar from './grid.toolbar';
 import FilterWindow from './grid.filter.window';
 import GridPagination from './grid.pagination';
@@ -474,7 +475,7 @@ export default {
       elementInfo,
       clearCheckInfo,
     });
-
+    const summaryScroll = ref(0);
     const {
       updateVScroll,
       updateHScroll,
@@ -485,6 +486,7 @@ export default {
       elementInfo,
       resizeInfo,
       pageInfo,
+      summaryScroll,
       getPagingData,
       updatePagingInfo,
     });
@@ -751,6 +753,7 @@ export default {
       },
     );
     return {
+      summaryScroll,
       showHeader,
       stripeStyle,
       borderStyle,

package/src/components/grid/grid.summary.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="summaryRef"
     :class="{
       'grid-summary': true,
       'non-border': styleInfo.borderStyle === 'none',
@@ -44,12 +45,18 @@
               height: `${styleInfo.rowHeight}px`,
             }"
           >
-            <template v-if="column.summaryRenderer">
+            <div
+              v-if="column.summaryRenderer"
+              :title="getSummaryRenderer(column)"
+            >
               {{ getSummaryRenderer(column) }}
-            </template>
-            <template v-else>
+            </div>
+            <div
+              v-else
+              :title="getSummaryValue(column, column.summaryType)"
+            >
               {{ getSummaryValue(column, column.summaryType)}}
-            </template>
+            </div>
           </span>
           <span
             v-else
@@ -62,7 +69,7 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed, watch, ref, nextTick } from 'vue';
 import { numberWithComma } from '@/common/utils';
 
 export default {
@@ -88,8 +95,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    scrollLeft: {
+      type: Number,
+      default: 0,
+    },
   },
   setup(props) {
+    const summaryRef = ref();
     const ROW_DATA_INDEX = 2;
     const stores = computed(() => props.stores);
     const columns = computed(() => props.orderedColumns);
@@ -102,7 +114,8 @@ export default {
         convertValue = numberWithComma(value);
         convertValue = convertValue === false ? value : convertValue;
       } else if (column.type === 'float') {
-        convertValue = convertValue.toFixed(column.decimal ?? 3);
+        const floatValue = convertValue.toFixed(column.decimal ?? 3);
+        convertValue = floatValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       }
 
       return convertValue;
@@ -175,10 +188,19 @@ export default {
       });
       return result;
     };
+    watch(
+      () => props.scrollLeft,
+      (val) => {
+        nextTick(() => {
+          summaryRef.value.scrollLeft = val;
+        });
+      },
+    );
     return {
       columns,
       styleInfo,
       showCheckbox,
+      summaryRef,
       getSummaryValue,
       getSummaryRenderer,
     };
@@ -189,6 +211,9 @@ export default {
 <style lang="scss" scoped>
 @import 'style/grid.scss';
 .grid-summary {
+  width: 100%;
+  overflow: hidden;
+
   @include evThemify() {
     border-bottom: 1px solid evThemed('disabled');
     background-color: evThemed('background-lighten');
@@ -201,6 +226,11 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 14px;
+    > div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
     @include evThemify() {
       color: evThemed('font-color-base');

package/src/components/grid/uses.js

@@ -44,7 +44,8 @@ export const commonFunctions = () => {
       convertValue = numberWithComma(value);
       convertValue = convertValue === false ? value : convertValue;
     } else if (column.type === 'float') {
-      convertValue = convertValue.toFixed(column.decimal ?? 3);
+      const floatValue = convertValue.toFixed(column.decimal ?? 3);
+      convertValue = floatValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     }
 
     return convertValue;
@@ -75,6 +76,7 @@ export const scrollEvent = (params) => {
     elementInfo,
     resizeInfo,
     pageInfo,
+    summaryScroll,
     getPagingData,
     updatePagingInfo,
   } = params;
@@ -122,6 +124,7 @@ export const scrollEvent = (params) => {
     const bodyEl = elementInfo.body;
 
     headerEl.scrollLeft = bodyEl.scrollLeft;
+    summaryScroll.value = bodyEl.scrollLeft;
   };
   /**
    * scroll 이벤트를 처리한다.
@@ -871,12 +874,14 @@ export const contextMenuEvent = (params) => {
     } else {
       rowIndex = target.parentElement.parentElement.dataset.index;
     }
-
+    let clickedRow;
     if (rowIndex) {
-      const rowData = stores.viewStore[+rowIndex][ROW_DATA_INDEX];
-      selectInfo.selectedRow = rowData;
+      clickedRow = stores.viewStore.find(row => row[ROW_INDEX] === +rowIndex)?.[ROW_DATA_INDEX];
+    }
+    if (clickedRow) {
+      selectInfo.selectedRow = clickedRow;
       setContextMenu();
-      emit('update:selected', rowData);
+      emit('update:selected', clickedRow);
     } else {
       selectInfo.selectedRow = [];
       setContextMenu(false);

package/src/components/menu/Menu.vue

@@ -6,6 +6,7 @@
       :item="menu"
       :selected-item="modelValue"
       :expandable="expandable"
+      :disabled="disabled"
       :comp="component"
       @click="clickMenu"
     />
@@ -34,14 +35,21 @@ export default {
       type: Boolean,
       default: true,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
     const prevMenuItem = ref(props.items.filter(item => props.modelValue === item.value));
-    const clickMenu = (newMenuItem) => {
-      emit('update:modelValue', newMenuItem.value);
-      emit('change', newMenuItem, prevMenuItem.value);
-      prevMenuItem.value = newMenuItem;
+    const clickMenu = (params) => {
+      if (!params.disabled) {
+        const newMenuItem = params.item;
+        emit('update:modelValue', newMenuItem.value);
+        emit('change', newMenuItem, prevMenuItem.value);
+        prevMenuItem.value = newMenuItem;
+      }
     };
     const component = MenuItem;
     return {

package/src/components/menu/MenuItem.vue

@@ -4,14 +4,17 @@
     :class="[
       'ev-menu-item',
        `depth${depth}`,
-      { active: item.value === selectedItem },
+      { active: !item.disabled && item.value === selectedItem },
     ]">
     <div
       :class="[
         'ev-menu-title',
-        { 'expandable': hasChild && expandable },
+        {
+          'expandable': hasChild && expandable,
+          'disabled': item.disabled,
+        },
       ]"
-      @click="clickMenu(item, depth)"
+      @click="clickMenu({item, depth, disabled: item.disabled})"
     >
       <i
         v-if="!!item.iconClass"
@@ -43,6 +46,7 @@
           :item="menu"
           :selected-item="selectedItem"
           :expandable="expandable"
+          :disabled="disabled"
           :comp="comp"
           @click="clickMenu"
         />
@@ -77,6 +81,9 @@ export default {
         } else if (obj.hidden !== undefined && typeof obj.hidden !== 'boolean') {
           console.warn('[EVUI][Menu] hidden attribute must be \'Boolean\' type.');
           return false;
+        } else if (obj.disabled !== undefined && typeof obj.disabled !== 'boolean') {
+          console.warn('[EVUI][Menu] disabled attribute must be \'Boolean\' type.');
+          return false;
         }
         return true;
       },
@@ -93,6 +100,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -100,13 +111,13 @@ export default {
     const isExpand = ref(defaultExpand);
     const hasChild = computed(() => !!props.item.children && !!props.item.children.length);
 
-    const clickMenu = (menuItem, depth) => {
-      if (hasChild.value && depth === props.depth) {
+    const clickMenu = (params) => {
+      if (hasChild.value && params.depth === props.depth) {
         if (props.expandable) {
           isExpand.value = !isExpand.value;
         }
       } else {
-        emit('click', menuItem, props.depth);
+        emit('click', params);
       }
     };
 
@@ -149,6 +160,13 @@ export default {
   &.expandable {
     padding-right: 27px;
   }
+  &.disabled {
+    color: #848484 !important;
+    &:hover {
+      cursor: not-allowed;
+      color: #848484 !important;
+    }
+  }
   .list-expend-icon {
     position: absolute;
     top: 50%;

package/src/components/pagination/pageButton.vue

@@ -7,7 +7,6 @@
     }"
     v-bind="$attrs"
     :aria-current="page.isCurrent"
-    @click.prevent="page.click"
   >
     <slot>{{ page.number }}</slot>
   </span>

package/src/components/treeGrid/TreeGrid.vue

@@ -172,6 +172,7 @@
       minWidth,
       rowHeight,
     }"
+    :scroll-left="summaryScroll"
   />
   <!-- Pagination -->
   <grid-pagination
@@ -186,7 +187,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick } from 'vue';
+import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick, ref } from 'vue';
 import treeGridNode from './TreeGridNode';
 import Toolbar from './treeGrid.toolbar';
 import GridPagination from '../grid/grid.pagination';
@@ -380,6 +381,7 @@ export default {
       elementInfo,
       clearCheckInfo,
     });
+    const summaryScroll = ref(0);
     const {
       updateVScroll,
       updateHScroll,
@@ -390,6 +392,7 @@ export default {
       elementInfo,
       resizeInfo,
       pageInfo,
+      summaryScroll,
       getPagingData,
       updatePagingInfo,
     });
@@ -689,6 +692,7 @@ export default {
     const getSlotName = column => `${column}Node`;
 
     return {
+      summaryScroll,
       gridStyle,
       gridClass,
       headerClass,

package/src/components/treeGrid/uses.js

@@ -39,7 +39,8 @@ export const commonFunctions = (params) => {
       convertValue = numberWithComma(value);
       convertValue = convertValue === false ? value : convertValue;
     } else if (column.type === 'float') {
-      convertValue = convertValue.toFixed(column.decimal ?? 3);
+      const floatValue = convertValue.toFixed(column.decimal ?? 3);
+      convertValue = floatValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     }
 
     return convertValue;
@@ -87,6 +88,7 @@ export const scrollEvent = (params) => {
     elementInfo,
     resizeInfo,
     pageInfo,
+    summaryScroll,
     getPagingData,
     updatePagingInfo,
   } = params;
@@ -134,6 +136,7 @@ export const scrollEvent = (params) => {
     const bodyEl = elementInfo.body;
 
     headerEl.scrollLeft = bodyEl.scrollLeft;
+    summaryScroll.value = bodyEl.scrollLeft;
   };
   /**
    * scroll 이벤트를 처리한다.