evui 3.4.21 → 3.4.22

package/package.json

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

package/src/components/chart/Chart.vue

@@ -18,7 +18,17 @@
 </template>
 
 <script>
-  import { onMounted, onBeforeUnmount, watch, onDeactivated, inject, toRef, computed } from 'vue';
+  import {
+    onMounted,
+    onBeforeUnmount,
+    onActivated,
+    onDeactivated,
+    inject,
+    watch,
+    ref,
+    toRef,
+    computed,
+  } from 'vue';
   import { cloneDeep, isEqual, debounce } from 'lodash-es';
   import EvChart from './chart.core';
   import EvChartToolbar from './ChartToolbar';
@@ -76,6 +86,7 @@
     ],
     setup(props) {
       let evChart = null;
+      const isMounted = ref(false);
       const injectIsChartGroup = inject('isChartGroup', false);
       const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
       const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
@@ -242,6 +253,8 @@
 
         await createChart();
         await drawChart();
+
+        isMounted.value = true;
       });
 
       onBeforeUnmount(() => {
@@ -252,6 +265,8 @@
         if (injectEvChartPropsInGroup?.value?.length) {
           injectEvChartPropsInGroup.value.length = 0;
         }
+
+        isMounted.value = false;
       });
 
       onDeactivated(() => {
@@ -275,6 +290,12 @@
         }
       }, props.resizeTimeout);
 
+      onActivated(() => {
+        if (isMounted.value) {
+          onResize();
+        }
+      });
+
       return {
         wrapper,
         wrapperStyle,

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

@@ -234,6 +234,9 @@ const modules = {
      */
     this.onLegendBoxClick = (e) => {
       const { legend: opt } = this.options;
+      if (opt?.stopClickEvt) {
+        return;
+      }
       const { chartIdx } = this.data;
 
       const targetDOM = this.getContainerDOM(e);
@@ -369,6 +372,9 @@ const modules = {
      */
     this.onLegendBoxClick = (e) => {
       const opt = this.options.legend;
+      if (opt?.stopClickEvt) {
+        return;
+      }
       const series = Object.values(this.seriesList)[0];
 
       const targetDOM = this.getContainerDOM(e);

package/src/components/chartBrush/ChartBrush.vue

@@ -9,7 +9,17 @@
 </template>
 
 <script>
-import { inject, watch, computed, onMounted, onBeforeUnmount, onDeactivated, onUpdated } from 'vue';
+import {
+  inject,
+  watch,
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  onDeactivated,
+  onActivated,
+  onUpdated,
+} from 'vue';
 import { cloneDeep, debounce, isEqual } from 'lodash-es';
 import EvChart from '../chart/chart.core';
 import { useModel, useWrapper } from '../chart/uses';
@@ -28,6 +38,7 @@ export default {
     let evChart = null;
     let evChartBrush = null;
 
+    const isMounted = ref(false);
     const injectEvChartClone = inject('evChartClone', { data: [] });
     const injectEvChartInfo = inject('evChartInfo', { props: { options: [] } });
     const injectBrushIdx = inject('brushIdx', {
@@ -235,6 +246,8 @@ export default {
         createChartBrush();
         drawChartBrush();
       }
+
+      isMounted.value = true;
     });
 
     onUpdated(async () => {
@@ -266,6 +279,8 @@ export default {
       if (evChartBrush) {
         evChartBrush.destroy();
       }
+
+      isMounted.value = false;
     });
 
     onDeactivated(() => {
@@ -291,6 +306,12 @@ export default {
       }
     }, 0);
 
+    onActivated(() => {
+      if (isMounted.value) {
+        onResize();
+      }
+    });
+
     return {
       evChartBrushOptions,
       evChartBrushRef,

package/src/components/checkbox/Checkbox.vue

@@ -41,7 +41,7 @@ export default {
       default: false,
     },
     label: {
-      type: [String, Number, Boolean, Symbol],
+      type: [String, Number, Boolean, Symbol, Object],
       default: null,
     },
     tooltipTitle: {

package/src/components/grid/Grid.vue

@@ -220,7 +220,7 @@
           >
             <!-- Header -->
             <li
-              v-if="!column.hide"
+              v-if="!column.hide && !column.hiddenDisplay"
               :data-index="index"
               :class="{
                 column: true,
@@ -387,7 +387,7 @@
                 :key="cellIndex"
               >
                 <td
-                  v-if="!column.hide"
+                  v-if="!column.hide && !column.hiddenDisplay"
                   :data-name="column.field"
                   :data-index="column.index"
                   :class="{
@@ -532,13 +532,13 @@ import {
 } from 'vue';
 import { clickoutside } from '@/directives/clickoutside';
 import { cloneDeep } from 'lodash-es';
-import Toolbar from './grid.toolbar';
-import GridPagination from './grid.pagination';
-import GridSummary from './grid.summary';
-import ColumnSetting from './grid.columnSetting.vue';
-import filterSetting from './grid.filterSetting.vue';
-import GridSortButton from './grid.sortButton';
-import GridOptionButton from './grid.optionButton.vue';
+import Toolbar from './GridToolbar';
+import GridPagination from './GridPagination';
+import GridSummary from './GridSummary';
+import ColumnSetting from './GridColumnSetting.vue';
+import FilterSetting from './GridFilterSetting.vue';
+import GridSortButton from './icon/icon-sort-button';
+import GridOptionButton from './icon/icon-option-button.vue';
 import {
   commonFunctions,
   scrollEvent,
@@ -564,7 +564,7 @@ export default {
     GridPagination,
     GridSummary,
     ColumnSetting,
-    filterSetting,
+    FilterSetting,
     GridSortButton,
     GridOptionButton,
   },
@@ -606,6 +606,7 @@ export default {
     'check-row': null,
     'check-all': null,
     'page-change': null,
+    'sort-column': null,
   },
   setup(props) {
     // const ROW_INDEX = 0;

package/src/components/grid/{grid.columnSetting.vue → GridColumnSetting.vue}

@@ -136,14 +136,22 @@ export default {
 
     const initValue = () => {
       const columns = applyColumnList.value.length ? applyColumnList.value : originColumnList.value;
-      checkColumnGroup.value = columns.map(col => col.label || []);
-
+      checkColumnGroup.value = columns
+        .filter(col => !col.checked)
+        .map(col => col.label);
       initSearchValue();
     };
-
     const onApplyColumn = () => {
       applyColumnList.value = originColumnList.value
-        .filter(col => checkColumnGroup.value.includes(col.label));
+        .filter((col) => {
+          if (checkColumnGroup.value.includes(col.label)) {
+            if (col?.checked) {
+              col.checked = false;
+            }
+            return true;
+          }
+          return false;
+        });
       const checkedColumns = applyColumnList.value.map(col => col.text);
 
       emit('apply-column', checkedColumns);
@@ -157,8 +165,11 @@ export default {
         .map(col => ({
           label: col.caption,
           text: col.field,
+          checked: col.hiddenDisplay,
         }));
-      checkColumnGroup.value = originColumnList.value?.map(col => col.label) || [];
+      checkColumnGroup.value = originColumnList.value
+        .filter(col => !col.checked)
+        .map(col => col.label);
       applyColumnList.value.length = 0;
     };
 
@@ -204,7 +215,7 @@ export default {
     watch(() => props.hiddenColumn, (value) => {
       const filterColumns = applyColumnList.value.length
         ? applyColumnList.value.filter(col => col.text !== value)
-        : originColumnList.value.filter(col => col.text !== value);
+        : originColumnList.value.filter(col => (col.text !== value && !col.checked));
 
       applyColumnList.value = filterColumns;
       checkColumnGroup.value = filterColumns.map(col => col.label);

package/src/components/grid/style/grid.scss

@@ -269,6 +269,10 @@
   max-height: 120px;
   background: none;
 
+  &--used {
+    padding-top: 16px;
+  }
+
   &__hidden-items {
     max-height: 106px;
     overflow-y: auto;
@@ -344,15 +348,9 @@
     }
     &--operator {
       width: 80px;
-      height: 26px !important;
-      .ev-input {
+      :deep(.ev-input) {
         height: 26px !important;
       }
-      &:hover {
-        cursor: initial;
-        margin: inherit;
-        border: none;
-      }
     }
     &.non-display {
       display: none;

package/src/components/grid/uses.js

@@ -182,7 +182,7 @@ export const resizeEvent = (params) => {
       const scrollWidth = elWidth - bodyEl.clientWidth;
 
       const result = stores.orderedColumns.reduce((acc, cur) => {
-        if (cur.hide) {
+        if (cur.hide || cur.hiddenDisplay) {
           return acc;
         }
         if (cur.width) {
@@ -292,6 +292,7 @@ export const resizeEvent = (params) => {
     const startMouseLeft = event.clientX;
     const startColumnLeft = columnRect.left - headerLeft;
 
+    bodyEl.style.overflow = 'auto';
     resizeLineEl.style.left = `${startLeft}px`;
 
     resizeInfo.showResizeLine = true;
@@ -527,6 +528,7 @@ export const checkEvent = (params) => {
 
 export const sortEvent = (params) => {
   const { sortInfo, stores, updatePagingInfo } = params;
+  const { emit } = getCurrentInstance();
   function OrderQueue() {
     this.orders = ['asc', 'desc', 'init'];
     this.dequeue = () => this.orders.shift();
@@ -559,6 +561,11 @@ export const sortEvent = (params) => {
 
       sortInfo.isSorting = true;
       updatePagingInfo({ onSort: true });
+      emit('sort-column', {
+        field: sortInfo.sortField,
+        order: sortInfo.sortOrder,
+        column: sortInfo.sortColumn,
+      });
     }
   };
   /**
@@ -1143,7 +1150,8 @@ export const columnSettingEvent = (params) => {
   const setFilteringColumn = () => {
     columnSettingInfo.visibleColumnIdx = stores.filteredColumns.map(col => col.index);
 
-    const originColumnIdx = stores.originColumns.filter(col => !col.hide).map(col => col.index);
+    const originColumnIdx = stores.originColumns.filter(col => (!col.hide || col.hiddenDisplay))
+      .map(col => col.index);
     const visibleColumnIdx = columnSettingInfo.visibleColumnIdx;
 
     columnSettingInfo.isFilteringColumn = (visibleColumnIdx.length !== originColumnIdx.length);
@@ -1155,7 +1163,7 @@ export const columnSettingEvent = (params) => {
     onResize();
   };
   const onApplyColumn = (columnNames) => {
-    const columns = stores.orderedColumns.filter(col => !col.hide);
+    const columns = stores.orderedColumns.filter(col => !col.hide && !col.hiddenDisplay);
     const isSameColumn = columnNames.length === columns.length
       && columns.every(col => columnNames.includes(col.field));
 
@@ -1164,12 +1172,20 @@ export const columnSettingEvent = (params) => {
     }
 
     stores.filteredColumns = stores.originColumns
-      .filter(col => columnNames.includes(col.field) || !col.caption);
+      .filter((col) => {
+        if (columnNames.includes(col.field) || !col.caption) {
+          if (col?.hiddenDisplay) {
+            col.hiddenDisplay = false;
+          }
+          return true;
+        }
+        return false;
+      });
     columnSettingInfo.hiddenColumn = '';
     setFilteringColumn();
   };
   const setColumnHidden = (val) => {
-    const columns = stores.orderedColumns.filter(col => !col.hide);
+    const columns = stores.orderedColumns.filter(col => !col.hide && !col.hiddenDisplay);
 
     if (columns.length === 1) {
       return;

package/src/components/select/Select.vue

@@ -110,64 +110,158 @@
         </span>
       </template>
       <div class="ev-select-dropbox-wrapper">
-      <div
-        v-if="isDropbox"
-        ref="dropbox"
-        class="ev-select-dropbox"
-        :style="dropboxPosition"
-      >
-        <input
-          v-if="filterable"
-          type="text"
-          class="ev-input-query"
-          :placeholder="searchPlaceholder"
-          :value="filterTextRef"
-          @input="changeFilterText"
-        />
         <div
-          ref="itemWrapper"
-          class="ev-select-dropbox-list"
+          v-if="isDropbox"
+          ref="dropbox"
+          class="ev-select-dropbox"
+          :style="dropboxPosition"
         >
-          <ul
-            v-if="filteredItems.length"
-            class="ev-select-dropbox-ul"
-          >
-            <li
-              v-for="(item, idx) in filteredItems"
-              :key="`${item.value}_${idx}`"
-              class="ev-select-dropbox-item"
+          <input
+            v-if="filterable"
+            type="text"
+            class="ev-input-query"
+            :placeholder="searchPlaceholder"
+            :value="filterTextRef"
+            @input="changeFilterText"
+          />
+          <template v-if="checkable">
+            <div
+              v-if="multiple"
+              class="ev-select-dropbox-item all-check"
               :class="{
-              selected: selectedItemClass(item.value),
-              disabled: item.disabled
+                selected: allCheck
             }"
-              :title="item.name"
-              @click.stop.prevent="[clickItem(item.value), changeDropboxPosition()]"
+              @click.self.prevent="[changeAllCheck(false), changeDropboxPosition()]"
             >
-              <i
-                v-if="item.iconClass"
-                :class="item.iconClass"
+              <ev-checkbox
+                v-model="allCheck"
+                :label="allCheckLabel"
+                @change="[changeAllCheck(true), changeDropboxPosition()]"
               />
-              {{ item.name }}
-            </li>
-          </ul>
-          <ul v-else>
-            <li class="ev-select-dropbox-item disabled">
-              {{ noMatchingText }}
-            </li>
-          </ul>
+            </div>
+            <div
+              ref="itemWrapper"
+              class="ev-select-dropbox-list"
+            >
+              <template v-if="multiple">
+                <ev-checkbox-group
+                  v-model="mv"
+                >
+                  <ul
+                    v-if="filteredItems.length"
+                    class="ev-select-dropbox-ul"
+                  >
+                    <li
+                      v-for="(item, idx) in filteredItems"
+                      :key="`${item.value}_${idx}`"
+                      class="ev-select-dropbox-item"
+                      :class="{
+                        selected: selectedItemClass(item.value),
+                        disabled: item.disabled
+                    }"
+                      :title="item.name"
+                      @click.self.prevent="[clickItem(item.value), changeDropboxPosition()]"
+                    >
+                      <ev-checkbox
+                        :label="item.value"
+                      >
+                        <i
+                          v-if="item.iconClass"
+                          :class="item.iconClass"
+                        />
+                        {{ item.name }}
+                      </ev-checkbox>
+                    </li>
+                  </ul>
+                  <ul v-else>
+                    <li class="ev-select-dropbox-item disabled">
+                      {{ noMatchingText }}
+                    </li>
+                  </ul>
+                </ev-checkbox-group>
+              </template>
+              <template v-else>
+                <ul
+                  v-if="filteredItems.length"
+                  class="ev-select-dropbox-ul"
+                >
+                  <li
+                    v-for="(item, idx) in filteredItems"
+                    :key="`${item.value}_${idx}`"
+                    class="ev-select-dropbox-item"
+                    :class="{
+                    selected: selectedItemClass(item.value),
+                    disabled: item.disabled
+                  }"
+                    :title="item.name"
+                    @click.stop.prevent="[clickItem(item.value), changeDropboxPosition()]"
+                  >
+                    <ev-checkbox
+                      :model-value="mv === item.value"
+                    >
+                      <i
+                        v-if="item.iconClass"
+                        :class="item.iconClass"
+                      />
+                      {{ item.name }}
+                    </ev-checkbox>
+                  </li>
+                </ul>
+              </template>
+            </div>
+          </template>
+          <template v-else>
+            <div
+              ref="itemWrapper"
+              class="ev-select-dropbox-list"
+            >
+              <ul
+                v-if="filteredItems.length"
+                class="ev-select-dropbox-ul"
+              >
+                <li
+                  v-for="(item, idx) in filteredItems"
+                  :key="`${item.value}_${idx}`"
+                  class="ev-select-dropbox-item"
+                  :class="{
+                    selected: selectedItemClass(item.value),
+                    disabled: item.disabled
+                  }"
+                  :title="item.name"
+                  @click.stop.prevent="[clickItem(item.value), changeDropboxPosition()]"
+                >
+                  <i
+                    v-if="item.iconClass"
+                    :class="item.iconClass"
+                  />
+                  {{ item.name }}
+                </li>
+              </ul>
+              <ul v-else>
+                <li class="ev-select-dropbox-item disabled">
+                  {{ noMatchingText }}
+                </li>
+              </ul>
+            </div>
+          </template>
         </div>
       </div>
     </div>
-    </div>
   </div>
 </template>
 
 <script>
 import { selectClickoutside as clickoutside } from '@/directives/clickoutside';
+import EvCheckboxGroup from '@/components/checkboxGroup/CheckboxGroup';
+import EvCheckbox from '@/components/checkbox/Checkbox';
 import { useModel, useDropdown } from './uses';
 
 export default {
   name: 'EvSelect',
+  components: {
+    EvCheckbox,
+    EvCheckboxGroup,
+  },
   directives: {
     clickoutside,
   },
@@ -204,6 +298,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    checkable: {
+      type: Boolean,
+      default: false,
+    },
     collapseTags: {
       type: Boolean,
       default: false,
@@ -216,6 +314,10 @@ export default {
       type: String,
       default: '',
     },
+    allCheckLabel: {
+      type: String,
+      default: 'Select All',
+    },
   },
   emits: {
     'update:modelValue': null,
@@ -247,6 +349,8 @@ export default {
       changeDropboxPosition,
       clickItem,
       selectedItemClass,
+      allCheck,
+      changeAllCheck,
     } = useDropdown({ mv, changeMv });
 
     return {
@@ -272,6 +376,8 @@ export default {
       changeDropboxPosition,
       clickItem,
       selectedItemClass,
+      allCheck,
+      changeAllCheck,
     };
   },
 };
@@ -437,4 +543,10 @@ export default {
     color: #C0C4CC;
   }
 }
+
+.all-check {
+  height: 35px;
+  line-height: 38px;
+  border-bottom: 1px solid;
+}
 </style>

package/src/components/select/uses.js

@@ -226,6 +226,17 @@ export const useDropdown = (param) => {
     isDropbox.value = false;
   };
 
+  const allCheck = ref(false);
+  const changeAllCheck = (isCheckBoxLabel) => {
+    if (!isCheckBoxLabel) {
+      allCheck.value = !allCheck.value;
+    }
+    if (allCheck.value) {
+      mv.value = filteredItems.value.map(item => item.value);
+    } else {
+      mv.value = [];
+    }
+  };
   /**
    * 항목 클릭하여 선택하는 이벤트
    * 항목 내 disabled인 경우 클릭 로직을 타지 않게 한다.
@@ -250,6 +261,7 @@ export const useDropdown = (param) => {
       const idx = mv.value.indexOf(val);
       mv.value.splice(idx, 1);
     }
+    allCheck.value = mv.value.length === filteredItems.value.length;
     changeMv();
   };
   const clickItem = !props.multiple ? singleClickItem : multipleClickItem;
@@ -263,6 +275,13 @@ export const useDropdown = (param) => {
   const multipleSelectedCls = val => mv.value.includes(val);
   const selectedItemClass = !props.multiple ? singleSelectedCls : multipleSelectedCls;
 
+  watch(() => mv.value, (curr) => {
+    if (props.multiple && props.checkable) {
+      allCheck.value = curr.length === filteredItems.value.length;
+      changeDropboxPosition();
+    }
+  });
+
   return {
     select,
     selectWrapper,
@@ -278,5 +297,7 @@ export const useDropdown = (param) => {
     changeDropboxPosition,
     clickItem,
     selectedItemClass,
+    allCheck,
+    changeAllCheck,
   };
 };