@ibiz-template/vue3-components 0.7.39 → 0.7.40

package/lib/control/form/search-form/advance-search/advance-search.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+require('./advance-search.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const AdvanceSearch = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizAdvanceSearch",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    modal: {
+      type: Object
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("advance-search");
+    const c = props.controller;
+    const renderAttrs = (model) => {
+      var _a;
+      const attrs = {};
+      (_a = model.controlAttributes) == null ? void 0 : _a.forEach((item) => {
+        if (item.attrName && item.attrValue) {
+          attrs[item.attrName] = runtime.ScriptFactory.execSingleLine(item.attrValue, {
+            ...c.getEventArgs(),
+            data: c.data
+          });
+        }
+      });
+      return attrs;
+    };
+    const renderByDetailType = (detail) => {
+      const {
+        hidden,
+        userTag
+      } = detail;
+      if (hidden || userTag === "permanent")
+        return;
+      const detailId = detail.id;
+      const childSlots = {};
+      const childDetails = runtime.findChildFormDetails(detail);
+      if (childDetails.length) {
+        childSlots.default = () => childDetails.map((child) => {
+          return renderByDetailType(child);
+        });
+      }
+      const provider = c.providers[detailId];
+      if (!provider) {
+        return vue.createVNode("div", null, [ibiz.i18n.t("control.form.noSupportDetailType", {
+          detailType: detail.detailType
+        })]);
+      }
+      const component = vue.resolveComponent(provider.component);
+      return vue.h(component, {
+        modelData: detail,
+        controller: c.details[detailId],
+        key: detail.id,
+        attrs: renderAttrs(detail)
+      }, childSlots);
+    };
+    return {
+      ns,
+      renderByDetailType
+    };
+  },
+  render() {
+    let _slot, _slot2;
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("header")
+    }, [vue.createVNode("span", null, [ibiz.i18n.t("app.advanceSearch")])]), vue.createVNode("div", {
+      "class": this.ns.e("search-form")
+    }, [vue.createVNode(vue.resolveComponent("iBizFormPage"), {
+      "modelData": this.controller.model,
+      "controller": this.controller
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = this.controller.model.deformPages) == null ? void 0 : _a.map((page) => {
+          return this.renderByDetailType(page);
+        })];
+      }
+    })]), vue.createVNode("div", {
+      "class": this.ns.e("footer")
+    }, [vue.createVNode(vue.resolveComponent("el-button"), {
+      "type": "primary",
+      "onClick": () => this.controller.search()
+    }, _isSlot(_slot = ibiz.i18n.t("app.search")) ? _slot : {
+      default: () => [_slot]
+    }), vue.createVNode(vue.resolveComponent("el-button"), {
+      "type": "primary",
+      "onClick": () => this.controller.reset()
+    }, _isSlot(_slot2 = ibiz.i18n.t("app.reset")) ? _slot2 : {
+      default: () => [_slot2]
+    })])]);
+  }
+});
+
+exports.AdvanceSearch = AdvanceSearch;

package/lib/control/form/search-form/advance-search/advance-search.css

@@ -0,0 +1 @@
+.ibiz-advance-search{display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-spacing-base);overflow:auto}.ibiz-advance-search__header{display:flex;align-items:center;height:var(--ibiz-height-control-large);padding:0 0 var(--ibiz-spacing-base);overflow:hidden;font-size:var(--ibiz-font-size-header-4);white-space:nowrap;cursor:move}.ibiz-advance-search__search-form{width:100%;height:calc(100% - var(--ibiz-height-control-large) * 2);overflow:auto}.ibiz-advance-search__footer{display:flex;justify-content:flex-end;padding:var(--ibiz-spacing-base) 0 0 0}

package/lib/control/form/search-form/search-form.cjs

@@ -3,35 +3,59 @@
 var vue = require('vue');
 var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
+var advanceSearch = require('./advance-search/advance-search.cjs');
 require('./search-form.css');
 
 "use strict";
 const SearchFormControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizSearchFormControl",
   props: {
+    /**
+     * @description 搜索表单模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
     isSimple: {
       type: Boolean,
       required: false
     },
+    /**
+     * @description 简单模式下传入的数据
+     */
     data: {
       type: Object,
       required: false
     },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
       type: Boolean,
       default: true
@@ -63,6 +87,21 @@ const SearchFormControl = /* @__PURE__ */ vue.defineComponent({
         detail.state = vue.reactive(detail.state);
       });
     });
+    const openAdvanceSearch = async () => {
+      const overlay = ibiz.overlay.createModal((modal) => {
+        return vue.h(advanceSearch.AdvanceSearch, {
+          controller: c,
+          modal
+        });
+      }, {}, {
+        width: "800px",
+        height: "auto",
+        closeOnClickModal: false
+      });
+      overlay.present();
+      await overlay.onWillDismiss();
+    };
+    c.evt.on("openAdvanceSearch", () => openAdvanceSearch());
     return {
       c,
       ns

package/lib/control/gantt/gantt.cjs

@@ -15,29 +15,52 @@ function _isSlot(s) {
 const GanttControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizGanttControl",
   props: {
+    /**
+     * @description 甘特模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
       type: Boolean,
       default: true
     },
+    /**
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
+     */
     mdctrlActiveMode: {
       type: Number,
       default: void 0
     },
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
       type: Boolean,
       default: void 0
@@ -573,6 +596,7 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
           bgColor: this.ganttStyle.headerBgColor
         },
         "borderColor": this.ganttStyle.borderColor,
+        "enableDateCompletion": true,
         "bodyStyle": {
           todayColor: this.ganttStyle.todayColor,
           weekendColor: this.ganttStyle.headerBgColor,

package/lib/control/gantt/gantt.css

@@ -1 +1 @@
-.ibiz-control-gantt{width:100%;height:100%}.ibiz-control-gantt .xg-root{--gantt-bg:var(--ibiz-color-bg-1);--gantt-bg-hover:var(--ibiz-color-disabled-border);--gantt-bg-active:var(--ibiz-color-disabled-border);--gantt-bg-checkmark:transparent;--gantt-bg-toolbar-item-hover:var(--ibiz-color-primary-light-default);--gantt-shadow:var(--ibiz-color-shadow);--gantt-shadow-toolbar-item:var(--ibiz-color-shadow);--gantt-border:var(--ibiz-color-tertiary-light-active);--gantt-border-hover:var(--ibiz-color-tertiary-light-active);--gantt-border-dashed:var(--ibiz-color-disabled-border);--gantt-border-toolbar-item:var(--ibiz-color-border);--gantt-border-separate-line:var(--ibiz-color-border);--gantt-text-0:var(--ibiz-color-text-0);--gantt-text-3:var(--ibiz-color-text-3);--gantt-white:var(--ibiz-color-white);--gantt-black:var(--ibiz-color-black);--gantt-warning:var(--ibiz-color-warning)}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row{cursor:pointer}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row .xg-table-cell:not(:first-child)>div{padding:var(--ibiz-spacing-none)}.ibiz-control-gantt .xg-root .xg-table-cell>div{width:100%}.ibiz-control-gantt .xg-root .xg-table-cell>div .cell{height:100%}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.xg-slider-drag.xg-slider-level0{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider .xg-slider-block{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.is-no-width{display:none}.ibiz-control-gantt .xg-root .ibiz-control-gantt__slider--caption{position:sticky;left:8px}.ibiz-control-gantt .xg-root .is-exceeds-range .ibiz-control-gantt__slider::after{position:absolute;right:0;z-index:99;display:block;width:16px;height:100%;content:"";background-color:var(--ibiz-color-primary)}.ibiz-control-gantt--empty .xg-table-body{height:calc(100% - 86px)!important}.ibiz-control-gantt__slider{display:flex;align-items:center;height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);cursor:pointer;background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-small)}.ibiz-control-gantt__slider--container-title .icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-gantt__slider--container-title .number{display:flex;align-items:center}.ibiz-control-gantt__slider--container-title .caption{margin:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-6);font-weight:var(--ibiz-font-weight-regular)}.ibiz-control-gantt__slider--container-content{display:flex;justify-content:space-between}.ibiz-control-gantt__slider--container-content .caption{margin:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-disabled-text)}.ibiz-control-gantt__slider--container-content .detail{display:flex;flex-direction:column;flex-grow:1;align-items:center}.ibiz-control-gantt__slider--caption{overflow:hidden;color:var(--ibiz-color-primary-text);text-overflow:ellipsis;white-space:nowrap}.ibiz-control-gantt__setting{display:flex;align-items:center}.ibiz-control-gantt__setting--icon{cursor:pointer;fill:var(--ibiz-color-primary)}.ibiz-control-gantt__slider-popover{z-index:300!important;width:auto;min-width:300px;padding:12px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column--ellipsis .ibiz-tree-grid-ex-field-column-text-container{min-width:0}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column-toolbar-container{flex-shrink:0}.ibiz-control-gantt .ibiz-tree-grid-ex-edit-column__editor{min-height:32px}.xg-view-toolbar-switch-action{--gantt-text-switch-item:var(--ibiz-color-text-3);--gantt-bg-hover-switch-item:var(--ibiz-color-bg-0)}
+.ibiz-control-gantt{width:100%;height:100%}.ibiz-control-gantt .xg-root{--gantt-bg:var(--ibiz-color-bg-1);--gantt-bg-hover:var(--ibiz-color-disabled-border);--gantt-bg-active:var(--ibiz-color-disabled-border);--gantt-bg-checkmark:transparent;--gantt-bg-toolbar-item-hover:var(--ibiz-color-primary-light-default);--gantt-shadow:var(--ibiz-color-shadow);--gantt-shadow-toolbar-item:var(--ibiz-color-shadow);--gantt-border:var(--ibiz-color-tertiary-light-active);--gantt-border-hover:var(--ibiz-color-tertiary-light-active);--gantt-border-dashed:var(--ibiz-color-disabled-border);--gantt-border-toolbar-item:var(--ibiz-color-border);--gantt-border-separate-line:var(--ibiz-color-border);--gantt-text-0:var(--ibiz-color-text-0);--gantt-text-3:var(--ibiz-color-text-3);--gantt-white:var(--ibiz-color-white);--gantt-black:var(--ibiz-color-black);--gantt-color-primary:var(--ibiz-color-primary);--gantt-warning:var(--ibiz-color-warning)}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row{cursor:pointer}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row .xg-table-cell:not(:first-child)>div{padding:var(--ibiz-spacing-none)}.ibiz-control-gantt .xg-root .xg-table-cell>div{width:100%}.ibiz-control-gantt .xg-root .xg-table-cell>div .cell{height:100%}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.xg-slider-drag.xg-slider-level0{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider .xg-slider-block{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.is-no-width{display:none}.ibiz-control-gantt .xg-root .ibiz-control-gantt__slider--caption{position:sticky;left:8px}.ibiz-control-gantt .xg-root .is-exceeds-range .ibiz-control-gantt__slider::after{position:absolute;right:0;z-index:99;display:block;width:16px;height:100%;content:"";background-color:var(--ibiz-color-primary)}.ibiz-control-gantt--empty .xg-table-body{height:calc(100% - 86px)!important}.ibiz-control-gantt__slider{display:flex;align-items:center;height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);cursor:pointer;background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-small)}.ibiz-control-gantt__slider--container-title .icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-gantt__slider--container-title .number{display:flex;align-items:center}.ibiz-control-gantt__slider--container-title .caption{margin:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-6);font-weight:var(--ibiz-font-weight-regular)}.ibiz-control-gantt__slider--container-content{display:flex;justify-content:space-between}.ibiz-control-gantt__slider--container-content .caption{margin:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-disabled-text)}.ibiz-control-gantt__slider--container-content .detail{display:flex;flex-direction:column;flex-grow:1;align-items:center}.ibiz-control-gantt__slider--caption{overflow:hidden;color:var(--ibiz-color-primary-text);text-overflow:ellipsis;white-space:nowrap}.ibiz-control-gantt__setting{display:flex;align-items:center}.ibiz-control-gantt__setting--icon{cursor:pointer;fill:var(--ibiz-color-primary)}.ibiz-control-gantt__slider-popover{z-index:300!important;width:auto;min-width:300px;padding:12px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column--ellipsis .ibiz-tree-grid-ex-field-column-text-container{min-width:0}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column-toolbar-container{flex-shrink:0}.ibiz-control-gantt .ibiz-tree-grid-ex-edit-column__editor{min-height:32px}.xg-view-toolbar-switch-action{--gantt-text-switch-item:var(--ibiz-color-text-3);--gantt-bg-hover-switch-item:var(--ibiz-color-bg-0)}

package/lib/control/grid/grid/grid-control.util.cjs

@@ -32,21 +32,9 @@ function useITableEvent(c) {
   const tableRef = vue.ref();
   let forbidChange = false;
   let isGridUISort = false;
-  let isCtrlDown = false;
-  let cleanKeyDown = core.NOOP;
-  let cleanKeyUp = core.NOOP;
   let cleanClick = core.NOOP;
   let cleanEnter = core.NOOP;
-  cleanKeyDown = core.listenJSEvent(window, "keydown", (e) => {
-    if (e.code === "ControlLeft" && !c.state.singleSelect) {
-      isCtrlDown = true;
-    }
-  });
-  cleanKeyUp = core.listenJSEvent(window, "keyup", (e) => {
-    if (e.code === "ControlLeft" && !c.state.singleSelect) {
-      isCtrlDown = false;
-    }
-  });
+  let cleanTab = core.NOOP;
   if (c.state.isAutoGrid) {
     if (c.editShowMode === "row") {
       cleanClick = core.listenJSEvent(window, "click", async (event) => {
@@ -100,7 +88,118 @@ function useITableEvent(c) {
       }
     }
   });
-  async function onRowClickDynamic(data, _column, _event) {
+  const editColumn = vue.computed(() => {
+    const columns = [];
+    core.recursiveIterate({ children: c.state.columnStates }, (columnState) => {
+      if (!columnState.uaColumn && !columnState.hidden) {
+        const model = c.columns[columnState.key].model;
+        if (model.enableRowEdit)
+          columns.push(model);
+      }
+    });
+    return columns;
+  });
+  const tabListener = (event) => {
+    var _a, _b;
+    const tableEl = tableRef.value.$el;
+    const currentElement = document.activeElement;
+    if (event.key === "Tab" && tableEl.contains(currentElement)) {
+      event.preventDefault();
+      const classList = [];
+      core.eventPath(event).forEach((e) => {
+        if (e && e.classList) {
+          classList.push(...e.classList);
+        }
+      });
+      const key = (_a = classList.filter((className) => className.startsWith("id-"))[0]) == null ? void 0 : _a.substring(3);
+      const columnName = (_b = classList.filter((className) => className.startsWith("defgridcolumn-"))[0]) == null ? void 0 : _b.substring(14);
+      const columnIndex = editColumn.value.findIndex(
+        (column) => column.id.toLowerCase() === (columnName == null ? void 0 : columnName.toLowerCase())
+      );
+      const rowIndex = c.state.rows.findIndex(
+        (item) => key && item.data.srfkey === key
+      );
+      const row = rowIndex !== -1 ? c.state.rows[rowIndex] : void 0;
+      const nextRow = rowIndex !== -1 ? c.state.rows[rowIndex + 1] : c.state.rows.find((_row) => _row.data.srfuf === runtime.Srfuf.UPDATE);
+      if (row) {
+        if (nextRow || columnIndex < editColumn.value.length - 1) {
+          Object.keys(row.editColStates).forEach((fieldName) => {
+            row.editColStates[fieldName].editable = false;
+          });
+        }
+        if (columnIndex < editColumn.value.length - 1) {
+          row.editColStates[editColumn.value[columnIndex + 1].id.toLowerCase()].editable = true;
+        } else if (nextRow) {
+          nextRow.editColStates[editColumn.value[0].id.toLowerCase()].editable = true;
+        }
+      } else {
+        const focusableElements = Array.from(
+          tableEl.querySelectorAll(
+            'tbody select, tbody textarea, tbody input:not([type="checkbox"])'
+          )
+        );
+        const currentIndex = focusableElements.indexOf(currentElement);
+        const nextElement = focusableElements[currentIndex + 1];
+        if (nextElement) {
+          nextElement.focus();
+        } else if (nextRow) {
+          nextRow.editColStates[editColumn.value[0].id.toLowerCase()].editable = true;
+        }
+      }
+    }
+  };
+  vue.watch(
+    () => tableRef.value,
+    (table) => {
+      const { enableRowEdit } = c.model;
+      if (table && enableRowEdit && c.editShowMode === "cell") {
+        cleanTab = core.listenJSEvent(window, "keydown", tabListener, {
+          capture: true
+        });
+      }
+    }
+  );
+  function handleCtrlSelect(data) {
+    const selection = [...c.state.selectedData];
+    const index = selection.findIndex((x) => x.srfkey === data.srfkey);
+    if (index !== -1) {
+      selection.splice(index, 1);
+      c.setSelection(selection);
+    } else {
+      c.setSelection([...selection, data]);
+    }
+  }
+  let lastSelectedIndex = null;
+  function handleShiftSelect(data) {
+    var _a;
+    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+    const index = c.findRowStateIndex(data);
+    const selection = [...c.state.selectedData];
+    const isSelected = selection.includes(data);
+    if (lastSelectedIndex !== null) {
+      const start = Math.min(lastSelectedIndex, index);
+      const end = Math.max(lastSelectedIndex, index);
+      if (isSelected) {
+        for (let i = start; i <= end; i++) {
+          const itemIndex = selection.indexOf(c.state.items[i]);
+          if (itemIndex !== -1) {
+            selection.splice(itemIndex, 1);
+          }
+        }
+      } else {
+        for (let i = start; i <= end; i++) {
+          if (!selection.includes(c.state.items[i])) {
+            selection.push(c.state.items[i]);
+          }
+        }
+      }
+      c.setSelection(selection);
+    } else {
+      c.setSelection([data]);
+    }
+    lastSelectedIndex = index;
+  }
+  async function onRowClickDynamic(data, _column, event) {
     if (data.srfuf === runtime.Srfuf.CREATE) {
       if (c.editShowMode === "row") {
         const row = c.findRowState(data);
@@ -109,46 +208,37 @@ function useITableEvent(c) {
       }
       return;
     }
-    if (isCtrlDown) {
-      const selection = [...c.state.selectedData];
-      const index = selection.findIndex((x) => x.srfkey === data.srfkey);
-      if (index !== -1) {
-        selection.splice(index, 1);
-        c.setSelection(selection);
-      } else {
-        c.setSelection([...selection, data]);
-      }
-      return;
-    }
+    if (event.ctrlKey && !c.state.singleSelect)
+      return handleCtrlSelect(data);
+    if (event.shiftKey && !c.state.singleSelect)
+      return handleShiftSelect(data);
     if (c.editShowMode === "row" && c.allowRowEdit) {
       const row = c.findRowState(data);
       if (row) {
         await c.switchRowEdit(row);
       }
     } else {
-      c.onRowClick(data);
+      await c.onRowClick(data);
     }
   }
-  async function onRowClick(data, _column, _event) {
-    if (c.state.isAutoGrid) {
-      await onRowClickDynamic(data, _column, _event);
-      return;
+  let forbidClick = false;
+  async function onRowClick(data, _column, event) {
+    if (!event.shiftKey) {
+      const index = c.findRowStateIndex(data);
+      const isSelected = c.state.selectedData.includes(data);
+      lastSelectedIndex = isSelected ? null : index;
     }
-    if (data.srfuf === runtime.Srfuf.CREATE) {
+    if (c.state.isAutoGrid) {
+      await onRowClickDynamic(data, _column, event);
       return;
     }
-    if (isCtrlDown) {
-      const selection = [...c.state.selectedData];
-      const index = selection.findIndex((x) => x.srfkey === data.srfkey);
-      if (index !== -1) {
-        selection.splice(index, 1);
-        c.setSelection(selection);
-      } else {
-        c.setSelection([...selection, data]);
-      }
+    if (data.srfuf === runtime.Srfuf.CREATE || forbidClick)
       return;
-    }
-    const target = _event.target;
+    if (event.ctrlKey && !c.state.singleSelect)
+      return handleCtrlSelect(data);
+    if (event.shiftKey && !c.state.singleSelect)
+      return handleShiftSelect(data);
+    const target = event.target;
     const { classList } = target.parentElement || {};
     if (classList && classList.contains("el-table-column--selection")) {
       tableRef.value.toggleRowSelection(data);
@@ -160,8 +250,12 @@ function useITableEvent(c) {
         await c.switchRowEdit(row, true);
       }
     } else {
-      c.onRowClick(data);
+      await c.onRowClick(data);
     }
+    forbidClick = true;
+    setTimeout(() => {
+      forbidClick = false;
+    }, 200);
   }
   function onDbRowClick(data) {
     if (data.srfuf === runtime.Srfuf.CREATE) {
@@ -170,9 +264,8 @@ function useITableEvent(c) {
     c.onDbRowClick(data);
   }
   function onSelectionChange(selection) {
-    if (!forbidChange) {
+    if (!forbidChange && !c.state.isLoading)
       c.setSelection(selection);
-    }
   }
   vue.watch(
     [
@@ -181,9 +274,8 @@ function useITableEvent(c) {
       () => c.state.selectedData
     ],
     ([table, isLoaded, newVal]) => {
-      if (!isLoaded || !table) {
+      if (!isLoaded || !table)
         return;
-      }
       if (c.state.singleSelect) {
         if (newVal[0]) {
           tableRef.value.setCurrentRow(newVal[0], true);
@@ -193,8 +285,12 @@ function useITableEvent(c) {
       } else {
         forbidChange = true;
         tableRef.value.clearSelection();
-        newVal.forEach((item) => tableRef.value.toggleRowSelection(item, true));
-        forbidChange = false;
+        setTimeout(() => {
+          newVal.forEach(
+            (item) => tableRef.value.toggleRowSelection(item, true)
+          );
+          forbidChange = false;
+        });
       }
     }
   );
@@ -231,9 +327,10 @@ function useITableEvent(c) {
       return;
     }
     c.setSort(fieldName, order1);
-    c.load({
-      isInitialLoad: c.model.pagingMode === 2 || c.model.pagingMode === 3
-    });
+    if (c.model.sortMode !== "LOCAL")
+      c.load({
+        isInitialLoad: c.model.pagingMode === 2 || c.model.pagingMode === 3
+      });
   }
   function handleRowClassName({ row }) {
     let activeClassName = "";
@@ -311,10 +408,9 @@ function useITableEvent(c) {
     onSortChange,
     handleRowClassName,
     handleHeaderCellClassName,
-    cleanKeyDown,
-    cleanKeyUp,
     cleanClick,
-    cleanEnter
+    cleanEnter,
+    cleanTab
   };
 }
 function useAppGridPagination(c) {
@@ -638,27 +734,33 @@ function useGridDraggable(tableRef, ns, c) {
     cleanups.push(cleanDragOver);
     cleanups.push(cleanDragEnd);
   };
+  const cleanup = () => {
+    cleanups.forEach((cleanupF) => {
+      cleanupF();
+    });
+  };
+  const setDragEvent = () => {
+    cleanup();
+    const grid = tableRef.value.$el;
+    if (grid) {
+      const rows = grid.getElementsByClassName("el-table__row");
+      rows.forEach((item) => {
+        setRowDragEvent(item);
+      });
+    }
+  };
   vue.watch(
     [() => tableRef.value, () => c.state.isLoaded],
     (table, isLoaded) => {
       if (!isLoaded || !table) {
         return;
       }
-      const grid = tableRef.value.$el;
-      if (grid) {
-        const rows = grid.getElementsByClassName("el-table__row");
-        rows.forEach((item) => {
-          setRowDragEvent(item);
-        });
-      }
+      setDragEvent();
     }
   );
   return {
-    cleanup: () => {
-      cleanups.forEach((cleanup) => {
-        cleanup();
-      });
-    }
+    cleanup,
+    setDragEvent
   };
 }