evui 3.4.0 → 3.4.1

package/package.json

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

package/src/components/grid/Grid.vue

@@ -105,24 +105,57 @@
                 {{ column.caption }}
                 <!-- Sort Icon -->
                 <span @click.stop="onSort(column)">
-                  <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"
-                    :icon="sortOrder"
-                    :style="{
-                      height: `${rowHeight}px`,
-                      'line-height': `${rowHeight}px`,
-                    }"
-                  />
+                  <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 ? hidden : true,
+                      }"
+                    />
+                  </template>
                 </span>
               </span>
               <!-- Column Resize -->
@@ -598,6 +631,7 @@ export default {
 
     const {
       setColumnSetting,
+      initColumnSettingInfo,
       onApplyColumn,
       setColumnHidden,
     } = columnSettingEvent({
@@ -633,6 +667,7 @@ export default {
       () => {
         sortInfo.isSorting = false;
         sortInfo.sortField = '';
+        initColumnSettingInfo();
         setSort();
       }, { deep: true },
     );

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

@@ -79,6 +79,9 @@
     .column-sort__icon--basic {
       visibility: visible;
     }
+    .column-sort__icon--asc, .column-sort__icon--desc {
+      visibility: hidden;
+    }
   }
 }
 

package/src/components/grid/uses.js

@@ -900,6 +900,13 @@ export const columnSettingEvent = (params) => {
   const setColumnSetting = () => {
     columnSettingInfo.isShowColumnSetting = true;
   };
+  const initColumnSettingInfo = () => {
+    stores.filteredColumns.length = 0;
+    columnSettingInfo.isShowColumnSetting = false;
+    columnSettingInfo.isFilteringColumn = false;
+    columnSettingInfo.visibleColumnIdx = [];
+    columnSettingInfo.hiddenColumn = '';
+  };
   const setFilteringColumn = () => {
     columnSettingInfo.visibleColumnIdx = stores.filteredColumns.map(column => column.index);
 
@@ -919,10 +926,14 @@ export const columnSettingEvent = (params) => {
   const setColumnHidden = (val) => {
     const columns = columnSettingInfo.isFilteringColumn
       ? stores.filteredColumns : stores.originColumns;
+
+    if (columns.length === 1) {
+      return;
+    }
     stores.filteredColumns = columns.filter(column => column.field !== val);
     columnSettingInfo.hiddenColumn = val;
     setFilteringColumn();
   };
 
-  return { setColumnSetting, onApplyColumn, setColumnHidden };
+  return { setColumnSetting, initColumnSettingInfo, onApplyColumn, setColumnHidden };
 };