evui 3.3.25 → 3.3.28

package/src/components/chart/plugins/plugins.legend.gradient.js

@@ -183,9 +183,7 @@ const modules = {
     this.onLegendBoxLeave = () => {
       this.legendDragInfo.dragging = false;
 
-      const lineDOM = this.containerDOM.getElementsByClassName('ev-chart-legend-line')[0];
-      const targetDOM = lineDOM.getElementsByClassName('ev-chart-legend-thumb')[0];
-      this.clearOverlay(targetDOM);
+      this.clearOverlay();
 
       const seriesList = Object.values(this.seriesList);
       if (!seriesList.length) {
@@ -256,7 +254,7 @@ const modules = {
 
   clearOverlay() {
     const targetDOM = this.containerDOM.getElementsByClassName('ev-chart-legend-line')[0];
-    const overlayDOM = targetDOM.getElementsByClassName('ev-chart-legend-overlay')[0];
+    const overlayDOM = targetDOM?.getElementsByClassName('ev-chart-legend-overlay')[0];
     if (overlayDOM) {
       targetDOM.removeChild(overlayDOM);
 
@@ -307,13 +305,15 @@ const modules = {
 
     overlayDOM.appendChild(tooltipDOM);
     overlayDOM.appendChild(itemDOM);
-    targetDOM.appendChild(overlayDOM);
+    targetDOM?.appendChild(overlayDOM);
 
-    const thumbDOM = targetDOM.getElementsByClassName('ev-chart-legend-thumb')[0];
-    const labels = thumbDOM.children;
-    labels.forEach((labelDOM) => {
-      labelDOM.style.opacity = 0.2;
-    });
+    const thumbDOM = targetDOM?.getElementsByClassName('ev-chart-legend-thumb')[0];
+    if (thumbDOM) {
+      const labels = thumbDOM.children;
+      labels.forEach((labelDOM) => {
+        labelDOM.style.opacity = 0.2;
+      });
+    }
   },
 
   createLegendHandle(type) {

package/src/components/chart/plugins/plugins.pie.js

@@ -21,6 +21,7 @@ const modules = {
     let startAngle = 1.5 * Math.PI;
     let endAngle;
     let series;
+    let percentage;
 
     const centerX = chartRect.width / 2;
     const centerY = chartRect.height / 2;
@@ -57,6 +58,7 @@ const modules = {
         for (let jx = 0; jx < pie.data.length; jx++) {
           slice = pie.data[jx];
           value = slice.value;
+          percentage = (value / pie.total) * 100;
           sliceAngle = 2 * Math.PI * (value / pie.total);
           endAngle = startAngle + sliceAngle;
 
@@ -83,7 +85,7 @@ const modules = {
             series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
             series.startAngle = startAngle;
             series.endAngle = endAngle;
-            series.data = { o: value };
+            series.data = { o: value, percentage };
 
             series.draw(ctx, strokeOptions);
             startAngle += sliceAngle;

package/src/components/datePicker/DatePicker.vue

@@ -61,16 +61,21 @@
             </span>
             </div>
           </template>
-          <template v-else-if="mv[0] && mv[mv.length - 1]">
-            <div class="ev-select-tag num">
+          <template v-else>
+            <div
+              v-if="mv[0]"
+              class="ev-select-tag num"
+            >
               <span class="ev-tag-name"> {{ mv[0] }} </span>
             </div>
-            <div class="ev-select-tag num">
-              <span class="ev-tag-name"> ~ </span>
-            </div>
-            <div class="ev-select-tag num">
-              <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
-            </div>
+            <template v-if="mv[mv.length - 1]">
+              <div class="ev-select-tag num">
+                <span class="ev-tag-name"> ~ </span>
+              </div>
+              <div class="ev-select-tag num">
+                <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
+              </div>
+            </template>
           </template>
         </div>
       </template>
@@ -95,7 +100,14 @@
             v-if="usedShortcuts.length"
             class="ev-date-picker-dropbox__button-layout"
           >
-            <ev-button-group>
+            <ev-button
+                v-if="usedShortcuts.length === 1"
+                :type="usedShortcuts[0].isActive ? 'primary' : 'default'"
+                @click="clickShortcut(usedShortcuts[0].key)"
+            >
+              {{ usedShortcuts[0].label }}
+            </ev-button>
+            <ev-button-group v-else>
               <ev-button
                 v-for="button in usedShortcuts"
                 :key="button.key"
@@ -195,7 +207,7 @@ export default {
         const timeReg = new RegExp(/(HH|2[0-3]|[01][0-9]):(mm|[0-5][0-9]):(ss|[0-5][0-9])/);
         return (multiType ? ['weekday', 'week', 'date'].indexOf(multiType) !== -1 : true)
         && (multiDayLimit ? typeof multiDayLimit === 'number' && multiDayLimit > 0 : true)
-        && (disabledDate ? typeof disabledDate === 'function' : true)
+        && (disabledDate ? (typeof disabledDate === 'function' || Array.isArray(disabledDate)) : true)
         && (tagShorten !== undefined ? typeof tagShorten === 'boolean' : true)
         && Array.isArray(timeFormat)
             ? timeFormat.every(v => !!(!v || timeReg.exec(v)))

package/src/components/datePicker/uses.js

@@ -36,7 +36,7 @@ export const useModel = () => {
   // mode: 'date' or 'dateTime'시 input box의 입력된 텍스트값
   let currentValue;
   if (['dateTimeRange', 'dateTime'].includes(props.mode) && timeFormat) {
-    if (props.mode === 'dateTimeRange' && props.modelValue.length) {
+    if (props.mode === 'dateTimeRange' && Array.isArray(props.modelValue) && props.modelValue.length === 2) {
       const [fromDate, toDate] = props.modelValue;
       const [fromTimeFormat, toTimeFormat] = timeFormat;
 
@@ -300,19 +300,41 @@ export const useShortcuts = (param) => {
 
     let targetKey;
     if (isRange) {
+      const timeFormat = props.options?.timeFormat;
       const [fromDate, toDate] = mv.value;
-      const targetShortcut = usedShortcuts.find(({ shortcutDate }) => {
-        const [sFromDate, sToDate] = shortcutDate();
-        const isCorrectFromDate = formatDate(sFromDate) === formatDate(fromDate);
-        const isCorrectToDate = formatDate(sToDate) === formatDate(toDate);
-        return isCorrectFromDate && isCorrectToDate;
-      });
+      let targetShortcut;
+      if (props.mode === 'dateTimeRange' && timeFormat?.length) {
+        targetShortcut = usedShortcuts.find(({ shortcutDate }) => {
+          const [sFromDate, sToDate] = shortcutDate();
+          const [fromTimeFormat, toTimeFormat] = timeFormat;
+          const formatFromDate = getChangedValueByTimeFormat(
+            fromTimeFormat,
+            formatDateTime(sFromDate),
+          );
+          const formatToDate = getChangedValueByTimeFormat(
+            toTimeFormat,
+            formatDateTime(sToDate),
+          );
+          const isCorrectFromDate = formatFromDate === formatDateTime(fromDate);
+          const isCorrectToDate = formatToDate === formatDateTime(toDate);
+          return isCorrectFromDate && isCorrectToDate;
+        });
+      } else {
+        targetShortcut = usedShortcuts.find(({ shortcutDate }) => {
+          const [sFromDate, sToDate] = shortcutDate();
+          const formatFunc = props.mode === 'dateTimeRange' ? formatDateTime : formatDate;
+          const isCorrectFromDate = formatFunc(sFromDate) === formatFunc(fromDate);
+          const isCorrectToDate = formatFunc(sToDate) === formatFunc(toDate);
+          return isCorrectFromDate && isCorrectToDate;
+        });
+      }
       targetKey = targetShortcut?.key;
     } else {
-      const date = formatDate(mv.value);
+      const formatFunc = props.mode === 'dateTime' ? formatDateTime : formatDate;
+      const date = formatFunc(mv.value);
       const targetShortcut = usedShortcuts.find(({ shortcutDate }) => {
-        const sDate = formatDate(shortcutDate());
-        return sDate === formatDate(date);
+        const sDate = formatFunc(shortcutDate());
+        return sDate === date;
       });
       targetKey = targetShortcut?.key;
     }
@@ -375,7 +397,11 @@ export const useShortcuts = (param) => {
             && props?.options?.multiDayLimit > curr.length
         ) {
           return;
-        } else if (props.mode === 'dateTime' || props.mode === 'dateTimeRange') {
+        } else if (
+          props.mode === 'dateRange'
+          || props.mode === 'dateTime'
+          || props.mode === 'dateTimeRange'
+        ) {
           currentValue.value = curr;
           return;
         } else if (props.mode === 'date') {

package/src/components/grid/uses.js

@@ -498,7 +498,6 @@ export const checkEvent = (params) => {
 
 export const sortEvent = (params) => {
   const { sortInfo, stores, getColumnIndex, updatePagingInfo } = params;
-  const { props } = getCurrentInstance();
   function OrderQueue() {
     this.orders = ['asc', 'desc', 'init'];
     this.dequeue = () => this.orders.shift();
@@ -542,35 +541,46 @@ export const sortEvent = (params) => {
       return;
     }
     const index = getColumnIndex(sortInfo.sortField);
-    const type = props.columns[index]?.type || 'string';
+    const type = stores.orderedColumns[index]?.type || 'string';
     const sortFn = sortInfo.sortOrder === 'desc' ? setDesc : setAsc;
     const numberSortFn = sortInfo.sortOrder === 'desc' ? numberSetDesc : numberSetAsc;
+    const getColumnValue = (a, b) => {
+      let aCol = a[ROW_DATA_INDEX][index];
+      let bCol = b[ROW_DATA_INDEX][index];
+      if (a[ROW_DATA_INDEX][index] && typeof a[ROW_DATA_INDEX][index] === 'object') {
+        aCol = a[ROW_DATA_INDEX][index][stores.orderedColumns[index]?.field];
+        bCol = b[ROW_DATA_INDEX][index][stores.orderedColumns[index]?.field];
+      }
+      return { aCol, bCol };
+    };
     switch (type) {
       case 'string':
         stores.store.sort((a, b) => {
-          if (!a[ROW_DATA_INDEX][index] || typeof a[ROW_DATA_INDEX][index] === 'string') {
-            a[ROW_DATA_INDEX][index] = a[ROW_DATA_INDEX][index] || '';
-            b[ROW_DATA_INDEX][index] = b[ROW_DATA_INDEX][index] || '';
-            return sortFn(a[ROW_DATA_INDEX][index]?.toLowerCase(),
-              b[ROW_DATA_INDEX][index]?.toLowerCase());
+          let { aCol, bCol } = getColumnValue(a, b);
+          if ((!aCol || typeof aCol === 'string') && (!bCol || typeof bCol === 'string')) {
+            aCol = aCol || '';
+            bCol = bCol || '';
+            return sortFn(aCol?.toLowerCase(), bCol?.toLowerCase());
           }
           return 0;
         });
         break;
       case 'stringNumber':
         stores.store.sort((a, b) => {
-          if (!a[ROW_DATA_INDEX][index] || typeof a[ROW_DATA_INDEX][index] === 'string' || typeof a[ROW_DATA_INDEX][index] === 'number') {
-            a[ROW_DATA_INDEX][index] = a[ROW_DATA_INDEX][index] === '' ? null : a[ROW_DATA_INDEX][index];
-            b[ROW_DATA_INDEX][index] = b[ROW_DATA_INDEX][index] === '' ? null : b[ROW_DATA_INDEX][index];
-            return numberSortFn(a[ROW_DATA_INDEX][index] ?? null, b[ROW_DATA_INDEX][index] ?? null);
+          let { aCol, bCol } = getColumnValue(a, b);
+          if (!aCol || typeof aCol === 'string' || typeof aCol === 'number') {
+            aCol = aCol === '' ? null : aCol;
+            bCol = bCol === '' ? null : bCol;
+            return numberSortFn(aCol ?? null, bCol ?? null);
           }
           return 0;
         });
         break;
       default:
         stores.store.sort((a, b) => {
-          if (!a[ROW_DATA_INDEX][index] || typeof a[ROW_DATA_INDEX][index] === 'number' || typeof a[ROW_DATA_INDEX][index] === 'boolean') {
-            return numberSortFn(a[ROW_DATA_INDEX][index] ?? null, b[ROW_DATA_INDEX][index] ?? null);
+          const { aCol, bCol } = getColumnValue(a, b);
+          if (!aCol || typeof aCol === 'number' || typeof aCol === 'boolean') {
+            return numberSortFn(aCol ?? null, bCol ?? null);
           }
           return 0;
         });

package/src/components/treeGrid/TreeGrid.vue

@@ -178,7 +178,7 @@
   <grid-pagination
     v-if="usePage && !isInfinite"
     v-model="currentPage"
-    :total="pageTotal"
+    :total="showTreeStore.length"
     :per-page="perPage"
     :visible-page="visiblePage"
     :show-page-info="showPageInfo"
@@ -543,19 +543,21 @@ export default {
           highlightNode.show = true;
           highlightNode.isFilter = true;
           setParentShow(highlightNode);
+          // tree 에 보여지는 데이터 기준으로 index 다시 구하기
+          const highlightIndex = stores.showTreeStore
+            .map(node => node.index)
+            .indexOf(highlightNode.index);
           if (pageInfo.usePage && !pageInfo.isInfinite) {
-            const highlightNodeIndex = (stores.showTreeStore
-                .map(node => node.index)
-                .indexOf(highlightNode.index)
-              ) + 1; // tree 에 보여지는 데이터 기준으로 index 다시 구하기
-            pageInfo.highlightPage = Math.ceil(highlightNodeIndex / pageInfo.perPage) || 1;
+            const page = Math.ceil(highlightIndex / pageInfo.perPage);
+            pageInfo.highlightPage = highlightIndex === pageInfo.perPage ? page + 1 : page || 1;
+            // 페이지 이동
             if (pageInfo.highlightPage !== pageInfo.currentPage) {
               pageInfo.currentPage = pageInfo.highlightPage;
               pageInfo.isHighlight = true;
               return;
             }
           }
-          elementInfo.body.scrollTop = resizeInfo.rowHeight * styleInfo.highlightIdx;
+          elementInfo.body.scrollTop = resizeInfo.rowHeight * highlightIndex;
         }
       },
     );
@@ -640,7 +642,10 @@ export default {
           }
           updateVScroll();
           if (current === pageInfo.highlightPage && pageInfo.isHighlight) {
-            elementInfo.body.scrollTop = resizeInfo.rowHeight * styleInfo.highlightIdx;
+            const highlightIndex = stores.pagingStore
+              .map(node => node.index)
+              .indexOf(styleInfo.highlightIdx);
+            elementInfo.body.scrollTop = resizeInfo.rowHeight * highlightIndex;
             pageInfo.isHighlight = !pageInfo.isHighlight;
           }
         });

package/src/components/treeGrid/uses.js

@@ -360,10 +360,12 @@ export const clickEvent = (params) => {
   const getClickedRowData = (event, row) => {
     const tagName = event.target.tagName.toLowerCase();
     let cellInfo = {};
-    if (tagName === 'td') {
-      cellInfo = event.target.dataset;
-    } else {
-      cellInfo = event.target.closest('td').dataset;
+    if (event.target.offsetParent) {
+      if (tagName === 'td') {
+        cellInfo = event.target.dataset;
+      } else {
+        cellInfo = event.target.closest('td').dataset;
+      }
     }
     return {
       event,