evui 3.4.6 → 3.4.7

package/package.json

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

package/src/components/grid/Grid.vue

@@ -141,13 +141,6 @@
       :hidden-column="hiddenColumn"
       @apply-column="onApplyColumn"
     />
-    <filter-setting
-      v-model:is-show="isShowFilterSetting"
-      v-model:items="filteringItemsByColumn"
-      :column="filteringColumn"
-      :position="filterSettingPosition"
-      @apply-filtering="onApplyFilter"
-    />
   </div>
   <div
     ref="grid-wrapper"
@@ -495,6 +488,13 @@
     :show-page-info="showPageInfo"
     :order="order"
   />
+  <filter-setting
+    v-model:is-show="isShowFilterSetting"
+    v-model:items="filteringItemsByColumn"
+    :column="filteringColumn"
+    :position="filterSettingPosition"
+    @apply-filtering="onApplyFilter"
+  />
 </template>
 
 <script>
@@ -504,6 +504,7 @@ import {
   computed,
   watch,
   onMounted,
+  onUpdated,
   onActivated,
   nextTick,
   ref,
@@ -857,11 +858,13 @@ export default {
     onMounted(() => {
       calculatedColumn();
       setStore(props.rows);
-      filteringItemsWidth.value = elementInfo['grid-wrapper']?.offsetWidth / 1.5 || 0;
     });
     onActivated(() => {
       onResize();
     });
+    onUpdated(() => {
+      filteringItemsWidth.value = elementInfo['grid-wrapper']?.offsetWidth / 1.5 || 0;
+    });
     watch(
       () => props.columns,
       () => {

package/src/components/grid/grid.filterSetting.vue

@@ -1,6 +1,6 @@
 <template>
   <template v-if="isShowFilterSetting">
-    <teleport to="#ev-grid-column-setting-modal">
+    <teleport to="#ev-grid-filter-setting-modal">
       <section
         v-clickoutside="() => { isShowFilterSetting = false }"
         class="ev-grid-filter-setting"
@@ -72,7 +72,7 @@
 
 <script>
 import { clickoutside } from '@/directives/clickoutside';
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 
 export default {
   name: 'EVGridFilterSetting',
@@ -208,6 +208,19 @@ export default {
 
     const getSelectTitle = (items, title) => items.find(item => item.value === title)?.name || '';
 
+    const initWrapperDiv = () => {
+      const root = document.createElement('div');
+      root.id = 'ev-grid-filter-setting-modal';
+      root.setAttribute('style', 'position: absolute; top: 0; left: 0;');
+      const hasRoot = document.getElementById('ev-grid-filter-setting-modal');
+      if (!hasRoot) {
+        document.body.appendChild(root);
+      }
+    };
+
+    onBeforeMount(() => {
+      initWrapperDiv();
+    });
     return {
       filteringItems,
       isShowFilterSetting,

package/src/components/grid/uses.js

@@ -358,8 +358,7 @@ export const clickEvent = (params) => {
   let timer = null;
   let lastIndex = -1;
   const onRowClick = (event, row) => {
-    if (event.target.parentElement.classList?.contains('row-checkbox-input')
-      || event.target.closest('td')?.classList?.contains('row-contextmenu')) {
+    if (event.target.parentElement.classList?.contains('row-checkbox-input')) {
       return false;
     }
     const onMultiSelectByKey = (keyType, selected, selectedRow) => {
@@ -861,16 +860,15 @@ export const contextMenuEvent = (params) => {
     const menuItems = [];
 
     if (useCustom && contextInfo.customContextMenu.length) {
-      const row = selectInfo.selectedRow;
       const customItems = contextInfo.customContextMenu.map(
         (item) => {
           const menuItem = item;
           if (menuItem.validate) {
-            menuItem.disabled = !menuItem.validate(menuItem.itemId, row);
+            menuItem.disabled = !menuItem.validate(menuItem.itemId, selectInfo.selectedRow);
           }
 
-          menuItem.selectedRow = row ?? [];
-          menuItem.contextmenuInfo = [selectInfo.contextmenuInfo];
+          menuItem.selectedRow = selectInfo.selectedRow ?? [];
+          menuItem.contextmenuInfo = selectInfo.contextmenuInfo ?? [];
 
           return menuItem;
         });
@@ -883,7 +881,8 @@ export const contextMenuEvent = (params) => {
   const onColumnContextMenu = (event, column) => {
     if (event.target.className === 'column-name') {
       const sortable = column.sortable === undefined ? true : column.sortable;
-      const filterable = column.filterable === undefined ? true : column.filterable;
+      const filterable = filterInfo.isFiltering
+        && column.filterable === undefined ? true : column.filterable;
       contextInfo.columnMenuItems = [
         {
           text: 'Ascending',
@@ -940,7 +939,7 @@ export const contextMenuEvent = (params) => {
       clickedRow = stores.viewStore.find(row => row[ROW_INDEX] === +rowIndex)?.[ROW_DATA_INDEX];
     }
     if (clickedRow) {
-      selectInfo.contextmenuInfo = clickedRow;
+      selectInfo.contextmenuInfo = [clickedRow];
       setContextMenu();
     }
   };