evui 3.1.54 → 3.1.58

package/package.json

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

package/src/components/chart/Chart.vue

@@ -106,14 +106,8 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       });
 
       const redrawChart = () => {
-        if (isInit) {
-          evChart.update({
-            updateSeries: false,
-            updateSelTip: {
-              update: false,
-              keepDomain: false,
-            },
-          });
+        if (evChart && 'resize' in evChart && isInit) {
+          evChart.resize();
         }
       };
 

package/src/components/chart/chart.core.js

@@ -90,7 +90,6 @@ class EvChart {
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
 
-    this.initScale();
     this.drawChart();
 
     if (tooltip.use) {
@@ -131,6 +130,7 @@ class EvChart {
    * @returns {undefined}
    */
   drawChart(hitInfo) {
+    this.initScale();
     this.labelRange = this.getAxesLabelRange();
     this.axesSteps = this.calculateSteps();
     this.drawAxis(hitInfo);
@@ -644,8 +644,8 @@ class EvChart {
     this.bufferCtx.restore();
     this.bufferCtx.save();
 
-    this.getChartDOMRect();
     this.initScale();
+    this.chartRect = this.getChartRect();
     this.drawChart();
   }
 
@@ -658,7 +658,6 @@ class EvChart {
   render(hitInfo) {
     this.clear();
     this.chartRect = this.getChartRect();
-    this.initScale();
     this.drawChart(hitInfo);
   }
 

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

@@ -151,7 +151,6 @@ class Bar {
       this.drawBar({
         ctx,
         positions: { x, y, w, h },
-        isTop: item.isTop,
       });
 
       if (showValue.use) {
@@ -213,7 +212,6 @@ class Bar {
     this.drawBar({
       ctx,
       positions: { x, y, w, h: this.isHorizontal ? -h : h },
-      isTop: item.data.isTop,
     });
 
     if (showValue.use) {
@@ -411,7 +409,7 @@ class Bar {
     ctx.restore();
   }
 
-  drawBar({ ctx, positions, isTop }) {
+  drawBar({ ctx, positions }) {
     const isHorizontal = this.isHorizontal;
     const isStackBar = 'stackIndex' in this;
     const isBorderRadius = this.borderRadius && this.borderRadius > 0;
@@ -423,7 +421,7 @@ class Bar {
       return;
     }
 
-    if ((!isStackBar && isBorderRadius) || (isStackBar && isBorderRadius && isTop)) {
+    if (isBorderRadius && !isStackBar) {
       try {
         this.drawRoundedRect(ctx, positions);
       } catch (e) {

package/src/components/chart/model/model.store.js

@@ -26,7 +26,7 @@ const modules = {
 
             if (series && sData) {
               if (series.isExistGrp && series.stackIndex) {
-                series.data = this.addSeriesStackDS(sData, label, series);
+                series.data = this.addSeriesStackDS(sData, label, series.bsIds, series.stackIndex);
               } else {
                 series.data = this.addSeriesDS(sData, label);
               }
@@ -173,12 +173,12 @@ const modules = {
    * Take data and label to create stack data for each series
    * @param {object}  data    chart series info
    * @param {object}  label   chart label
-   * @param {object}  series  series Information
+   * @param {array}   bsIds   stacked base data ID List
+   * @param {number}  sIdx    series ordered index
    *
    * @returns {array} data for each series
    */
-  addSeriesStackDS(data, label, series) {
-    const bsIds = series.bsIds; // stacked base data ID List
+  addSeriesStackDS(data, label, bsIds, sIdx = 0) {
     const isHorizontal = this.options.horizontal;
     const sdata = [];
 
@@ -201,8 +201,6 @@ const modules = {
     };
 
     data.forEach((curr, index) => {
-      const { stackIndex, show: isShowSeries } = series;
-      const isTop = true; // is top position on stack (Stacked or not, default is true)
       const baseIndex = bsIds.length - 1 < 0 ? 0 : bsIds.length - 1;
       let bdata = getBaseDataPosition(baseIndex, index); // base(previous) series data
       let odata = curr; // current series original data
@@ -216,7 +214,7 @@ const modules = {
         }
 
         const oData = odata?.value ?? odata;
-        if (stackIndex > 0) {
+        if (sIdx > 0) {
           if (oData != null) {
             gdata = bdata + oData;
           } else {
@@ -228,14 +226,7 @@ const modules = {
           gdata = oData;
         }
 
-        if (gdata && isShowSeries) {
-          for (let idx = baseIndex; idx > -1; idx--) {
-            const prevSeriesData = this.seriesList[bsIds[idx]];
-            prevSeriesData.data[index].isTop = false;
-          }
-        }
-
-        sdata.push(this.addData(gdata, ldata, odata, bdata, isTop));
+        sdata.push(this.addData(gdata, ldata, odata, bdata));
       }
     });
 
@@ -276,11 +267,10 @@ const modules = {
    * @param {object}  ldata    label data (x-axis value for vertical chart)
    * @param {object}  odata    original data (without stacked value)
    * @param {object}  bdata    base data (stacked value)
-   * @param {boolean} isTop    is top position on stack (Stacked or not, default is true)
 
    * @returns {object} data for each graph point
    */
-  addData(gdata, ldata, odata = null, bdata = null, isTop = true) {
+  addData(gdata, ldata, odata = null, bdata = null) {
     let data;
     let gdataValue = null;
     let odataValue = null;
@@ -312,7 +302,6 @@ const modules = {
     data.w = null;
     data.h = null;
     data.dataColor = gdataColor ?? odataColor;
-    data.isTop = isTop;
 
     return data;
   },

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

@@ -175,7 +175,7 @@ const modules = {
    * @returns {undefined}
    */
   dragStart(evt, type) {
-    const [offsetX, offsetY] = this.getMousePosition(evt);
+    let [offsetX, offsetY] = this.getMousePosition(evt);
     const chartRect = this.chartRect;
     const labelOffset = this.labelOffset;
     const range = {
@@ -185,11 +185,20 @@ const modules = {
       y2: chartRect.y2 - labelOffset.bottom,
     };
 
-    // check graph range
-    if (offsetX < range.x1 || offsetX > range.x2
-        || offsetY < range.y1 || offsetY > range.y2
-    ) {
-      return;
+    if (offsetX < range.x1) {
+      offsetX = range.x1;
+    }
+
+    if (offsetX > range.x2) {
+      offsetX = range.x2;
+    }
+
+    if (offsetY < range.y1) {
+      offsetY = range.y1;
+    }
+
+    if (offsetY > range.y2) {
+      offsetY = range.y2;
     }
 
     this.dragInfo = {

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

@@ -219,11 +219,11 @@ const modules = {
         let prev = a.data.o;
         let next = b.data.o;
 
-        if (!prev) {
+        if (prev === null || prev === undefined) {
           prev = isHorizontal ? a.data.x : a.data.y;
         }
 
-        if (!next) {
+        if (next === null || next === undefined) {
           next = isHorizontal ? b.data.x : b.data.y;
         }
         return next - prev;

package/src/components/grid/Grid.vue

@@ -9,11 +9,7 @@
       <template #toolbarWrapper>
         <slot
           name="toolbar"
-          :item="{
-            onRefresh: onRefresh,
-            onDelete: onDelete,
-            onSearch: onSearch,
-          }"
+          :item="{ onSearch: onSearch }"
         >
         </slot>
       </template>
@@ -97,7 +93,7 @@
               <span
                 :title="column.caption"
                 class="column-name"
-                @click.stop="onSort(column.field)"
+                @click.stop="onSort(column)"
               >
                 {{ column.caption }}
               </span>
@@ -206,9 +202,6 @@
                     :item="{
                       row,
                       column,
-                      onRowDelete: onRowDelete,
-                      onRowEdit: onRowEdit,
-                      onDetailPopup: onDetailPopup,
                     }"
                   >
                   </slot>
@@ -253,18 +246,12 @@
         @apply-filter="onApplyFilter"
         @before-close="onCloseFilterWindow"
       />
-      <ev-window
-        v-model:visible="isDetailPopWin"
-        title="DETAIL POPUP"
-      >
-        <div>{{detailPopData}}</div>
-      </ev-window>
     </div>
   </div>
 </template>
 
 <script>
-import { reactive, ref, toRefs, computed, watch, onMounted, getCurrentInstance } from 'vue';
+import { reactive, toRefs, computed, watch, onMounted } from 'vue';
 import FilterWindow from './grid.filter.window';
 import Toolbar from './grid.toolbar';
 import {
@@ -331,7 +318,6 @@ export default {
       getColumnIndex,
       setPixelUnit,
     } = commonFunctions();
-    const { ctx } = getCurrentInstance();
     const showHeader = computed(() =>
       (props.option.showHeader === undefined ? true : props.option.showHeader));
     const stripeStyle = computed(() => (props.option.style?.stripe || false));
@@ -625,51 +611,6 @@ export default {
         setStore([], false);
       }, 500);
     };
-    const onRefresh = () => {
-      console.log('On click refresh button');
-    };
-    const onDelete = () => {
-      ctx.$messagebox({
-        title: 'Delete',
-        message: 'Are you sure you want to delete checked item?',
-        iconClass: 'ev-icon-trash3',
-        onClose: (type) => {
-          if (type === 'ok') {
-            stores.originStore = stores.store.filter(item => !item[1]);
-            setStore([], false);
-          }
-        },
-      });
-    };
-    const onRowDelete = (index) => {
-      ctx.$messagebox({
-        title: 'Delete',
-        message: 'Are you sure you want to delete this item?',
-        iconClass: 'ev-icon-trash3',
-        onClose: (type) => {
-          if (type === 'ok') {
-            stores.originStore = stores.store.filter(item => item[0] !== index);
-            setStore([], false);
-          }
-        },
-      });
-      // emit
-    };
-    const onRowEdit = (row) => {
-      ctx.$messagebox({
-        title: 'Edit',
-        message: row[2],
-        iconClass: 'ev-icon-pencil',
-        showCancelBtn: false,
-      });
-      // emit
-    };
-    const isDetailPopWin = ref(false);
-    const detailPopData = ref('');
-    const onDetailPopup = (row) => {
-      isDetailPopWin.value = true;
-      detailPopData.value = row[2];
-    };
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     return {
       showHeader,
@@ -685,8 +626,6 @@ export default {
       ...toRefs(checkInfo),
       ...toRefs(sortInfo),
       ...toRefs(contextInfo),
-      isDetailPopWin,
-      detailPopData,
       isRenderer,
       getComponentName,
       getConvertValue,
@@ -713,12 +652,7 @@ export default {
       updateData,
       setContextMenu,
       onContextMenu,
-      onRefresh,
-      onDelete,
       onSearch,
-      onRowEdit,
-      onRowDelete,
-      onDetailPopup,
       isFilterButton,
     };
   },

package/src/components/grid/uses.js

@@ -475,17 +475,20 @@ export const sortEvent = (params) => {
   /**
    * sort 이벤트를 처리한다.
    *
-   * @param {string} field - 컬럼 field
+   * @param {object} column - 컬럼 정보
    */
-  const onSort = (field) => {
-    if (sortInfo.sortField !== field) {
-      order.orders = ['asc', 'desc', 'init'];
-      sortInfo.sortField = field;
-    }
-    sortInfo.sortOrder = order.dequeue();
-    order.enqueue(sortInfo.sortOrder);
+  const onSort = (column) => {
+    const sortable = column.sortable === undefined ? true : column.sortable;
+    if (sortable) {
+      if (sortInfo.sortField !== column?.field) {
+        order.orders = ['asc', 'desc', 'init'];
+        sortInfo.sortField = column?.field;
+      }
+      sortInfo.sortOrder = order.dequeue();
+      order.enqueue(sortInfo.sortOrder);
 
-    sortInfo.isSorting = true;
+      sortInfo.isSorting = true;
+    }
   };
   /**
    * 설정값에 따라 해당 컬럼 데이터에 대해 정렬한다.

package/src/components/toggle/Toggle.vue

@@ -4,6 +4,7 @@
     :class="{
       checked: modelValue,
       disabled,
+      readonly,
     }"
     :style="{
       width: `${width}px`,
@@ -24,6 +25,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -51,7 +56,7 @@ export default {
       },
     });
     const clickMv = () => {
-      if (!props.disabled) {
+      if (!props.disabled && !props.readonly) {
         mv.value = !mv.value;
       }
     };
@@ -95,12 +100,14 @@ export default {
     left: calc(100% - 17px);
   }
 
-  &.disabled {
+  &.readonly {
     opacity: .6;
+    cursor: default;
+  }
 
-    &:hover {
-      cursor: not-allowed;
-    }
+  &.disabled {
+    opacity: .6;
+    cursor: not-allowed;
   }
 }
 

package/src/components/treeGrid/TreeGrid.vue

@@ -246,6 +246,7 @@ export default {
       treeStore: [],
       viewStore: [],
       filterStore: [],
+      searchStore: computed(() => stores.treeStore.filter(item => item.isFilter)),
       treeRows: props.rows,
       showTreeStore: computed(() => stores.treeStore.filter(item => item.show)),
       orderedColumns: computed(() =>
@@ -330,20 +331,22 @@ export default {
 
     const {
       onSearch,
-    } = filterEvent({ stores, getConvertValue, calculatedColumn, updateVScroll });
+    } = filterEvent({ checkInfo, stores, getConvertValue, calculatedColumn, updateVScroll });
 
     watch(
       () => props.checked,
       (value) => {
-        const store = stores.treeStore;
+        let store = stores.treeStore;
+        if (stores.searchStore.length > 0) {
+          store = stores.searchStore;
+        }
+        const isCheck = store.every(n => n.checked === true);
         checkInfo.isHeaderChecked = false;
         checkInfo.checkedRows = value;
         for (let ix = 0; ix < store.length; ix++) {
           store[ix].checked = value.includes(store[ix]);
         }
-        if (value.length && store.length === value.length) {
-          checkInfo.isHeaderChecked = true;
-        }
+        checkInfo.isHeaderChecked = isCheck;
       },
     );
     watch(

package/src/components/treeGrid/uses.js

@@ -418,11 +418,14 @@ export const checkEvent = (params) => {
    * @param {array} rowData - row 데이터
    */
   const onCheck = (event, rowData) => {
+    let store = stores.treeStore;
+    if (stores.searchStore.length > 0) {
+      store = stores.searchStore;
+    }
     const isSingleMode = () => checkInfo.useCheckbox.mode === 'single';
-    const checkedHeader = (store) => {
-      if (checkInfo.checkedRows.length === store.length) {
-        checkInfo.isHeaderChecked = true;
-      }
+    const checkedHeader = (checkStore) => {
+      const isCheck = checkStore.every(n => n.checked === true);
+      checkInfo.isHeaderChecked = isCheck;
     };
     const unCheckedHeader = () => {
       if (checkInfo.isHeaderChecked) {
@@ -455,7 +458,7 @@ export const checkEvent = (params) => {
     onSingleMode();
     if (rowData.checked) {
       addCheckedRow(rowData);
-      checkedHeader(stores.treeStore);
+      checkedHeader(store);
     } else {
       unCheckedHeader();
       removeCheckedRow(rowData);
@@ -472,10 +475,13 @@ export const checkEvent = (params) => {
    * @param {object} event - 이벤트 객체
    */
   const onCheckAll = (event) => {
-    const store = stores.treeStore;
     const status = checkInfo.isHeaderChecked;
     const checked = [];
     let item;
+    let store = stores.treeStore;
+    if (status && stores.searchStore.length > 0) {
+      store = stores.searchStore;
+    }
     for (let ix = 0; ix < store.length; ix++) {
       item = store[ix];
       if (status) {
@@ -484,6 +490,11 @@ export const checkEvent = (params) => {
       item.checked = status;
     }
     checkInfo.checkedRows = checked;
+    if (stores.searchStore.length > 0) {
+      store.forEach((node) => {
+        onCheckChildren(node);
+      });
+    }
     emit('update:checked', checked);
     emit('check-all', event, checked);
   };
@@ -637,7 +648,7 @@ export const treeEvent = (params) => {
 };
 
 export const filterEvent = (params) => {
-  const { stores, getConvertValue, calculatedColumn, updateVScroll } = params;
+  const { checkInfo, stores, getConvertValue, calculatedColumn, updateVScroll } = params;
   const makeParentShow = (data) => {
     if (!data?.parent) {
       return;
@@ -654,26 +665,29 @@ export const filterEvent = (params) => {
       clearTimeout(timer);
     }
     timer = setTimeout(() => {
-      stores.treeStore.forEach((row) => {
+      let store = stores.treeStore;
+      store.forEach((row) => {
         row.show = false;
         row.isFilter = false;
       });
       if (searchWord) {
-        const filterStores = stores.treeStore.filter((row) => {
+        const filterStores = store.filter((row) => {
           let isSameWord = false;
           for (let ix = 0; ix < stores.orderedColumns.length; ix++) {
             const column = stores.orderedColumns[ix] || {};
             let columnValue = row[column.field];
             let columnType = column.type;
             if (columnValue) {
-              if (!columnType) {
-                columnType = 'string';
-              }
-              columnValue = getConvertValue(columnType, columnValue).toString();
-              isSameWord = columnValue.toLowerCase()
-                .includes(searchWord.toString().toLowerCase());
-              if (isSameWord) {
-                break;
+              if (!column.hide && (column?.searchable === undefined || column?.searchable)) {
+                if (!columnType) {
+                  columnType = 'string';
+                }
+                columnValue = getConvertValue(columnType, columnValue).toString();
+                isSameWord = columnValue.toLowerCase()
+                  .includes(searchWord.toString().toLowerCase());
+                if (isSameWord) {
+                  break;
+                }
               }
             }
           }
@@ -685,11 +699,16 @@ export const filterEvent = (params) => {
           makeParentShow(row);
         });
       } else {
-        stores.treeStore.forEach((row) => {
+        store.forEach((row) => {
           row.show = true;
           row.isFilter = false;
         });
       }
+      if (stores.searchStore.length > 0) {
+        store = stores.searchStore;
+      }
+      const isCheck = store.every(n => n.checked === true);
+      checkInfo.isHeaderChecked = isCheck;
       calculatedColumn();
       updateVScroll();
     }, 500);

package/src/components/window/Window.vue

@@ -27,6 +27,7 @@
           }"
           @mousedown="startDrag"
           @mousemove="moveMouse"
+          @click="setFocus"
         >
           <div
             v-if="$slots.header || iconClass || title"
@@ -84,11 +85,17 @@
 </template>
 
 <script>
-import { useEscKeydownEvent, useModel, useMouseEvent } from './uses';
+import { useEscCloseAndFocusable, useModel, useMouseEvent } from './uses';
 
 export default {
   name: 'EvWindow',
   props: {
+    style: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
     visible: {
       type: Boolean,
       default: false,
@@ -153,6 +160,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    focusable: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     'update:visible',
@@ -187,7 +198,7 @@ export default {
       removeUnit,
     });
 
-    useEscKeydownEvent({ closeWin, windowRef });
+    const { setFocus } = useEscCloseAndFocusable({ closeWin, windowRef });
 
     return {
       windowRef,
@@ -200,6 +211,8 @@ export default {
       startDrag,
       moveMouse,
       clickExpandBtn,
+
+      setFocus,
     };
   },
 };