@ibiz-template/vue3-components 0.1.28 → 0.1.29-dev.0

package/es/control/form/index.mjs

@@ -23,3 +23,5 @@ export { FormTabPanelProvider } from './form-detail/form-tab-panel/form-tab-pane
 export { IBizFormTabPanel } from './form-detail/form-tab-panel/index.mjs';
 export { FormTabPageProvider } from './form-detail/form-tab-page/form-tab-page.provider.mjs';
 export { IBizFormTabPage } from './form-detail/form-tab-page/index.mjs';
+
+"use strict";

package/es/control/form/search-form/index.mjs

@@ -3,6 +3,7 @@ import { withInstall } from '@ibiz-template/vue3-util';
 import { SearchFormControl } from './search-form.mjs';
 import { SearchFormProvider } from './search-form.provider.mjs';
 
+"use strict";
 const IBizSearchFormControl = withInstall(
   SearchFormControl,
   function(v) {

package/es/control/form/search-form/search-form.mjs

@@ -3,6 +3,7 @@ import { SearchFormController } from '@ibiz-template/runtime';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './search-form.css';
 
+"use strict";
 const SearchFormControl = /* @__PURE__ */ defineComponent({
   name: "IBizSearchFormControl",
   props: {

package/es/control/form/search-form/search-form.provider.mjs

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {

package/es/control/grid/grid/grid-control.util.d.ts

@@ -1,4 +1,6 @@
 import { ControlVO, GridController } from '@ibiz-template/runtime';
+import { IDEGridColumn } from '@ibiz/model-core';
+import { TableColumnCtx } from 'element-plus';
 import { Ref } from 'vue';
 /**
  * 适配element的table的事件
@@ -37,3 +39,12 @@ export declare function useAppGridPagination(c: GridController): {
     onPageSizeChange: (size: number) => void;
     onPageRefresh: () => void;
 };
+export declare function useAppGridBase(c: GridController, props: IData): {
+    tableData: Ref<IData>;
+    renderColumns: Ref<IDEGridColumn[]>;
+    defaultSort: Ref<IData>;
+    summaryMethod: ({ columns, }: {
+        columns: TableColumnCtx<IData>[];
+        data: IData[];
+    }) => string[];
+};

package/es/control/grid/grid/grid-control.util.mjs

@@ -1,5 +1,7 @@
-import { ref, watch } from 'vue';
+import { GridRowState, ControlVO } from '@ibiz-template/runtime';
+import { ref, watch, computed } from 'vue';
 
+"use strict";
 function useITableEvent(c) {
   const tableRef = ref();
   let forbidChange = false;
@@ -106,5 +108,91 @@ function useAppGridPagination(c) {
   }
   return { onPageChange, onPageSizeChange, onPageRefresh };
 }
+function useAppGridBase(c, props) {
+  const initSimpleData = () => {
+    if (!props.data) {
+      return;
+    }
+    c.state.items = props.data;
+    c.state.rows = props.data.map((item) => {
+      const row = new GridRowState(new ControlVO(item), c);
+      return row;
+    });
+  };
+  const defaultSort = computed(() => {
+    var _a;
+    return {
+      prop: c.model.minorSortAppDEFieldId,
+      order: ((_a = c.model.minorSortDir) == null ? void 0 : _a.toLowerCase()) === "desc" ? "descending" : "ascending"
+    };
+  });
+  c.evt.on("onCreated", async () => {
+    if (props.isSimple) {
+      initSimpleData();
+      c.state.isLoaded = true;
+    }
+  });
+  watch(
+    () => props.data,
+    () => {
+      if (props.isSimple) {
+        initSimpleData();
+      }
+    },
+    {
+      deep: true
+    }
+  );
+  const tableData = computed(() => {
+    const state = c.state;
+    if (c.model.enableGroup) {
+      const result = [];
+      state.groups.forEach((item) => {
+        if (!item.children.length) {
+          return;
+        }
+        const children = [...item.children];
+        const first = children.shift();
+        result.push({
+          srfkey: (first == null ? void 0 : first.srfkey) || item.caption,
+          isGroupData: true,
+          caption: item.caption,
+          first,
+          children
+        });
+      });
+      return result;
+    }
+    return state.rows.map((row) => row.data);
+  });
+  const renderColumns = computed(() => {
+    if (c.isMultistageHeader) {
+      return c.model.degridColumns || [];
+    }
+    const columns = [];
+    c.state.columnStates.forEach((item) => {
+      var _a, _b;
+      if (item.hidden) {
+        return;
+      }
+      const columnModel = ((_a = c.fieldColumns[item.key]) == null ? void 0 : _a.model) || ((_b = c.uaColumns[item.key]) == null ? void 0 : _b.model);
+      if (columnModel) {
+        columns.push(columnModel);
+      }
+    });
+    return columns;
+  });
+  const summaryMethod = ({
+    columns
+  }) => {
+    return columns.map((item, index) => {
+      if (index === 0) {
+        return c.aggTitle;
+      }
+      return c.state.aggResult[item.property];
+    });
+  };
+  return { tableData, renderColumns, defaultSort, summaryMethod };
+}
 
-export { useAppGridPagination, useITableEvent };
+export { useAppGridBase, useAppGridPagination, useITableEvent };

package/es/control/grid/grid/grid.css

@@ -1 +1 @@
-.ibiz-control-grid{--ibiz-control-grid-text-color:var(--ibiz-color-text-0);--ibiz-control-grid-bg-color:transparent;--ibiz-control-grid-padding:0;--ibiz-control-grid-cell-padding:var(--ibiz-spacing-tight);--ibiz-control-grid-selection-padding:var(--ibiz-spacing-base-loose);--ibiz-control-grid-row-edit-bg-color:var(--ibiz-color-fill-2);--ibiz-control-grid-row-bg-color:var(--ibiz-color-bg-1);--ibiz-control-grid-row-bg-color-2:var(--ibiz-color-bg-0);--ibiz-control-grid-header-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-header-cell-padding:var(--ibiz-control-grid-cell-padding);--ibiz-control-grid-header-height:auto;--ibiz-control-grid-header-bg-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-header-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-header-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-grid-content-text-color:var(--ibiz-control-grid-text-color);--ibiz-control-grid-content-row-height:48px;--ibiz-control-grid-page-text-color:var(--ibiz-control-grid-text-color);--ibiz-control-grid-page-height:50px;--ibiz-control-grid-page-padding:0 var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:var(--ibiz-color-fill-1);--ibiz-control-grid-footer-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-footer-font-weight:var(--ibiz-font-weight-bold);width:100%;height:100%;padding:var(--ibiz-control-grid-padding);background-color:var(--ibiz-control-grid-bg-color)}.ibiz-control-grid .el-table{--el-table-header-bg-color:var(--ibiz-control-grid-header-bg-color);--el-table-border-color:transparent}.ibiz-control-grid .el-table--border .el-table__cell{border-right:none}.ibiz-control-grid .el-table-fixed-column--left,.ibiz-control-grid .el-table-fixed-column--right{--el-bg-color:transparent}.ibiz-control-grid.is-enable-page .ibiz-control-grid__table{height:calc(100% - var(--ibiz-control-grid-page-height))}.ibiz-control-grid.is-enable-group .el-table__indent{display:none}.ibiz-control-grid__table{width:100%;height:100%}.ibiz-control-grid__table .caret-wrapper{gap:3px;justify-content:center}.ibiz-control-grid__table .sort-caret{position:initial}.ibiz-control-grid__table.el-table .el-table__cell{padding:0}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr td{background:var(--ibiz-control-grid-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:nth-child(2n) td{background-color:var(--ibiz-control-grid-row-bg-color-2)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:hover td{background-color:var(--el-table-row-hover-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.current-row td{background-color:var(--el-table-current-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td{background-color:var(--ibiz-control-grid-row-edit-bg-color)}.ibiz-control-grid__table .el-table__header-wrapper .cell{height:var(--ibiz-control-grid-header-height);padding:var(--ibiz-control-grid-header-cell-padding);font-size:var(--ibiz-control-grid-header-font-size);font-weight:var(--ibiz-control-grid-header-font-weight);color:var(--ibiz-control-grid-header-text-color);word-break:break-word;white-space:pre-wrap}.ibiz-control-grid__table .el-table__header-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__header-wrapper .is-sortable.el-table__cell .cell{display:flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content)}.ibiz-control-grid__table .el-table__body-wrapper{color:var(--ibiz-control-grid-content-text-color);border-bottom:.1px solid var(--ibiz-color-border)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row{height:var(--ibiz-control-grid-content-row-height);cursor:pointer}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:0;padding:0}@-moz-document url-prefix(){.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:100%}}.ibiz-control-grid__table .el-table__body-wrapper .cell{display:flex;align-items:center;height:100%;padding:0}.ibiz-control-grid__table .el-table__body-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__cell.is-center{--ibiz-grid-column-text-align:center;--ibiz-grid-column-justify-content:center}.ibiz-control-grid__table .el-table__cell.is-left{--ibiz-grid-column-text-align:left;--ibiz-grid-column-justify-content:flex-start}.ibiz-control-grid__table .el-table__cell.is-right{--ibiz-grid-column-text-align:right;--ibiz-grid-column-justify-content:flex-end}.ibiz-control-grid__table .el-scrollbar__wrap{position:relative}.ibiz-control-grid__table .el-table__footer-wrapper tbody td.el-table__cell{font-size:var(--ibiz-control-grid-footer-font-size);font-weight:var(--ibiz-control-grid-footer-font-weight);color:var(--ibiz-control-grid-footer-text-color);background-color:var(--ibiz-control-grid-footer-bg-color)}.ibiz-control-grid .el-table td.el-table__cell,.ibiz-control-grid .el-table th.el-table__cell.is-leaf{border-bottom:none}.ibiz-control-grid .ibiz-grid-page{display:flex;justify-content:flex-end;height:var(--ibiz-control-grid-page-height);padding:var(--ibiz-control-grid-page-padding)}.ibiz-control-grid .ibiz-grid-page .el-pagination{overflow:auto}
+.ibiz-control-grid{--ibiz-control-grid-text-color:var(--ibiz-color-text-0);--ibiz-control-grid-bg-color:transparent;--ibiz-control-grid-padding:0;--ibiz-control-grid-cell-padding:var(--ibiz-spacing-tight);--ibiz-control-grid-selection-padding:var(--ibiz-spacing-base-loose);--ibiz-control-grid-row-edit-bg-color:var(--ibiz-color-fill-2);--ibiz-control-grid-row-bg-color:var(--ibiz-color-bg-1);--ibiz-control-grid-row-bg-color-2:var(--ibiz-color-bg-0);--ibiz-control-grid-header-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-header-cell-padding:var(--ibiz-control-grid-cell-padding);--ibiz-control-grid-header-height:auto;--ibiz-control-grid-header-bg-color:var(--ibiz-color-tertiary-light-hover);--ibiz-control-grid-header-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-header-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-grid-content-text-color:var(--ibiz-control-grid-text-color);--ibiz-control-grid-content-row-height:48px;--ibiz-control-grid-page-text-color:var(--ibiz-control-grid-text-color);--ibiz-control-grid-page-height:50px;--ibiz-control-grid-page-padding:0 var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:var(--ibiz-color-tertiary-light-hover);--ibiz-control-grid-footer-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-footer-font-weight:var(--ibiz-font-weight-bold);width:100%;height:100%;padding:var(--ibiz-control-grid-padding);background-color:var(--ibiz-control-grid-bg-color)}.ibiz-control-grid .el-table{--el-table-header-bg-color:var(--ibiz-control-grid-header-bg-color);--el-table-border-color:transparent}.ibiz-control-grid .el-table--border .el-table__cell{border-right:none}.ibiz-control-grid .el-table-fixed-column--left,.ibiz-control-grid .el-table-fixed-column--right{--el-bg-color:transparent}.ibiz-control-grid.is-enable-page .ibiz-control-grid__table{height:calc(100% - var(--ibiz-control-grid-page-height))}.ibiz-control-grid.is-enable-group .el-table__indent{display:none}.ibiz-control-grid__table{width:100%;height:100%}.ibiz-control-grid__table .caret-wrapper{gap:3px;justify-content:center}.ibiz-control-grid__table .sort-caret{position:initial}.ibiz-control-grid__table.el-table .el-table__cell{padding:0}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr td{background:var(--ibiz-control-grid-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:nth-child(2n) td{background-color:var(--ibiz-control-grid-row-bg-color-2)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:hover td{background-color:var(--el-table-row-hover-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.current-row td{background-color:var(--el-table-current-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td{background-color:var(--ibiz-control-grid-row-edit-bg-color)}.ibiz-control-grid__table .el-table__header-wrapper .cell{height:var(--ibiz-control-grid-header-height);padding:var(--ibiz-control-grid-header-cell-padding);font-size:var(--ibiz-control-grid-header-font-size);font-weight:var(--ibiz-control-grid-header-font-weight);color:var(--ibiz-control-grid-header-text-color);word-break:break-word;white-space:pre-wrap}.ibiz-control-grid__table .el-table__header-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__header-wrapper .is-sortable.el-table__cell .cell{display:flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content)}.ibiz-control-grid__table .el-table__body-wrapper{color:var(--ibiz-control-grid-content-text-color);border-bottom:.1px solid var(--ibiz-color-border)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row{height:var(--ibiz-control-grid-content-row-height);cursor:pointer}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:0;padding:0}@-moz-document url-prefix(){.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:100%}}.ibiz-control-grid__table .el-table__body-wrapper .cell{display:flex;align-items:center;height:100%;padding:0}.ibiz-control-grid__table .el-table__body-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__cell.is-center{--ibiz-grid-column-text-align:center;--ibiz-grid-column-justify-content:center}.ibiz-control-grid__table .el-table__cell.is-left{--ibiz-grid-column-text-align:left;--ibiz-grid-column-justify-content:flex-start}.ibiz-control-grid__table .el-table__cell.is-right{--ibiz-grid-column-text-align:right;--ibiz-grid-column-justify-content:flex-end}.ibiz-control-grid__table .el-scrollbar__wrap{position:relative}.ibiz-control-grid__table .el-table__footer-wrapper tbody td.el-table__cell{font-size:var(--ibiz-control-grid-footer-font-size);font-weight:var(--ibiz-control-grid-footer-font-weight);color:var(--ibiz-control-grid-footer-text-color);background-color:var(--ibiz-control-grid-footer-bg-color)}.ibiz-control-grid__table .el-table__footer-wrapper tbody td.el-table__cell:first-child>div{display:inline;vertical-align:4px}.ibiz-control-grid .el-table td.el-table__cell,.ibiz-control-grid .el-table th.el-table__cell.is-leaf{border-bottom:none}.ibiz-control-grid .ibiz-grid-page{display:flex;justify-content:flex-end;height:var(--ibiz-control-grid-page-height);padding:var(--ibiz-control-grid-page-padding)}.ibiz-control-grid .ibiz-grid-page .el-pagination{overflow:auto}

package/es/control/grid/grid/grid.d.ts

@@ -1,8 +1,9 @@
 import { PropType, VNode } from 'vue';
-import { TableColumnCtx } from 'element-plus';
 import { IDEGrid, IDEGridColumn } from '@ibiz/model-core';
-import { ControlVO, GridController, IControlProvider } from '@ibiz-template/runtime';
+import { GridController, IControlProvider } from '@ibiz-template/runtime';
 import './grid.scss';
+export declare function renderColumn(c: GridController, model: IDEGridColumn, renderColumns: IDEGridColumn[], index: number): VNode | null;
+export declare function renderChildColumn(c: GridController, model: IDEGridColumn, renderColumns: IDEGridColumn[], index: number): VNode | null;
 export declare const GridControl: import("vue").DefineComponent<{
     modelData: {
         type: PropType<IDEGrid>;
@@ -68,11 +69,11 @@ export declare const GridControl: import("vue").DefineComponent<{
     c: GridController;
     ns: import("@ibiz-template/core").Namespace;
     tableRef: import("vue").Ref<IData | undefined>;
-    tableData: import("vue").ComputedRef<IData[]>;
-    renderColumns: import("vue").ComputedRef<IDEGridColumn[]>;
-    onDbRowClick: (data: ControlVO) => void;
-    onRowClick: (data: ControlVO, _column: IData, event: MouseEvent) => Promise<void>;
-    onSelectionChange: (selection: ControlVO[]) => void;
+    tableData: import("vue").Ref<IData>;
+    renderColumns: import("vue").Ref<IDEGridColumn[]>;
+    onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
+    onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: IData, event: MouseEvent) => Promise<void>;
+    onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;
     onSortChange: (opts: {
         _column: IData;
         prop: string;
@@ -86,14 +87,11 @@ export declare const GridControl: import("vue").DefineComponent<{
     }) => string;
     renderNoData: () => VNode | false;
     summaryMethod: ({ columns, }: {
-        columns: TableColumnCtx<IData>[];
+        columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
         data: IData[];
     }) => string[];
     renderPopover: () => JSX.Element[];
-    defaultSort: import("vue").ComputedRef<{
-        prop: string | undefined;
-        order: string;
-    }>;
+    defaultSort: import("vue").Ref<IData>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDEGrid>;
@@ -157,9 +155,9 @@ export declare const GridControl: import("vue").DefineComponent<{
     };
 }>>, {
     params: IParams;
+    isSimple: boolean;
     mdctrlActiveMode: number;
     singleSelect: boolean;
     rowEditOpen: boolean;
-    isSimple: boolean;
     loadDefault: boolean;
 }, {}>;

package/es/control/grid/grid/grid.mjs

@@ -1,10 +1,80 @@
-import { defineComponent, computed, watch, createVNode, resolveComponent, mergeProps, h } from 'vue';
+import { createVNode, resolveComponent, mergeProps, h, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
-import { GridController, GridRowState, ControlVO } from '@ibiz-template/runtime';
-import { useITableEvent, useAppGridPagination } from './grid-control.util.mjs';
+import { GridController } from '@ibiz-template/runtime';
+import { useITableEvent, useAppGridPagination, useAppGridBase } from './grid-control.util.mjs';
 import './grid.css';
 import { useRowEditPopover } from '../row-edit-popover/use-row-edit-popover.mjs';
 
+"use strict";
+function renderColumn(c, model, renderColumns, index) {
+  var _a;
+  if (model.hideDefault) {
+    return null;
+  }
+  const {
+    state
+  } = c;
+  const {
+    codeName: columnName,
+    width
+  } = model;
+  const columnC = c.columns[columnName];
+  const columnState = c.state.columnStates.find((item) => item.key === columnName);
+  const widthFlexGrow = columnC.isAdaptiveColumn || !c.hasAdaptiveColumn && index === renderColumns.length - 1;
+  const widthName = widthFlexGrow ? "min-width" : "width";
+  return createVNode(resolveComponent("el-table-column"), mergeProps({
+    "label": model.caption,
+    "prop": columnName
+  }, {
+    [widthName]: width
+  }, {
+    "fixed": columnState.fixed,
+    "show-overflow-tooltip": model.columnType === "DEFGRIDCOLUMN",
+    "sortable": model.enableSort ? "custom" : false,
+    "align": ((_a = model.align) == null ? void 0 : _a.toLowerCase()) || "center"
+  }), {
+    default: ({
+      row
+    }) => {
+      let elRow = row;
+      if (row.isGroupData) {
+        elRow = row.first;
+      }
+      const rowState = state.rows.find((item) => item.data.srfkey === elRow.srfkey);
+      if (rowState) {
+        const comp = resolveComponent(c.providers[columnName].component);
+        return h(comp, {
+          controller: columnC,
+          row: rowState,
+          key: elRow.srfkey + columnName
+        });
+      }
+      return null;
+    }
+  });
+}
+function renderChildColumn(c, model, renderColumns, index) {
+  var _a, _b;
+  if (model.columnType === "GROUPGRIDCOLUMN") {
+    const childColumns = ((_a = model.degridColumns) == null ? void 0 : _a.filter((item) => !item.hideDefault)) || [];
+    const {
+      width
+    } = model;
+    const align = ((_b = model.align) == null ? void 0 : _b.toLowerCase()) || "center";
+    return createVNode(resolveComponent("el-table-column"), {
+      "label": model.caption,
+      "min-width": width,
+      "align": align
+    }, {
+      default: () => {
+        return childColumns.map((column, index2) => {
+          return renderChildColumn(c, column, renderColumns, index2);
+        });
+      }
+    });
+  }
+  return renderColumn(c, model, renderColumns, index);
+}
 const GridControl = /* @__PURE__ */ defineComponent({
   name: "IBizGridControl",
   props: {
@@ -72,75 +142,6 @@ const GridControl = /* @__PURE__ */ defineComponent({
       onPageRefresh,
       onPageSizeChange
     } = useAppGridPagination(c);
-    const initSimpleData = () => {
-      if (!props.data) {
-        return;
-      }
-      c.state.items = props.data;
-      c.state.rows = props.data.map((item) => {
-        const row = new GridRowState(new ControlVO(item), c);
-        return row;
-      });
-    };
-    const defaultSort = computed(() => {
-      var _a;
-      return {
-        prop: c.model.minorSortAppDEFieldId,
-        order: ((_a = c.model.minorSortDir) == null ? void 0 : _a.toLowerCase()) === "desc" ? "descending" : "ascending"
-      };
-    });
-    c.evt.on("onCreated", async () => {
-      if (props.isSimple) {
-        initSimpleData();
-        c.state.isLoaded = true;
-      }
-    });
-    watch(() => props.data, () => {
-      if (props.isSimple) {
-        initSimpleData();
-      }
-    }, {
-      deep: true
-    });
-    const tableData = computed(() => {
-      const state = c.state;
-      if (c.model.enableGroup) {
-        const result = [];
-        state.groups.forEach((item) => {
-          if (!item.children.length) {
-            return;
-          }
-          const children = [...item.children];
-          const first = children.shift();
-          result.push({
-            srfkey: (first == null ? void 0 : first.srfkey) || item.caption,
-            isGroupData: true,
-            caption: item.caption,
-            first,
-            children
-          });
-        });
-        return result;
-      }
-      return state.rows.map((row) => row.data);
-    });
-    const renderColumns = computed(() => {
-      if (c.isMultistageHeader) {
-        return c.model.degridColumns || [];
-      }
-      const columns = [];
-      c.state.columnStates.forEach((item) => {
-        var _a, _b;
-        if (item.hidden) {
-          return;
-        }
-        const columnModel = ((_a = c.fieldColumns[item.key]) == null ? void 0 : _a.model) || ((_b = c.uaColumns[item.key]) == null ? void 0 : _b.model);
-        if (columnModel) {
-          columns.push(columnModel);
-        }
-      });
-      return columns;
-    });
     const renderNoData = () => {
       const {
         isLoaded
@@ -150,16 +151,12 @@ const GridControl = /* @__PURE__ */ defineComponent({
         "emptyTextLanguageRes": c.model.emptyTextLanguageRes
       }, null);
     };
-    const summaryMethod = ({
-      columns
-    }) => {
-      return columns.map((item, index) => {
-        if (index === 0) {
-          return c.aggTitle;
-        }
-        return c.state.aggResult[item.property];
-      });
-    };
+    const {
+      tableData,
+      renderColumns,
+      defaultSort,
+      summaryMethod
+    } = useAppGridBase(c, props);
     const {
       renderPopover
     } = useRowEditPopover(tableRef, c);
@@ -189,72 +186,6 @@ const GridControl = /* @__PURE__ */ defineComponent({
       hideHeader,
       enablePagingBar
     } = this.c.model;
-    const renderColumn = (model, index) => {
-      var _a;
-      if (model.hideDefault) {
-        return null;
-      }
-      const {
-        codeName: columnName,
-        width
-      } = model;
-      const columnC = this.c.columns[columnName];
-      const columnState = this.c.state.columnStates.find((item) => item.key === columnName);
-      const widthFlexGrow = columnC.isAdaptiveColumn || !this.c.hasAdaptiveColumn && index === this.renderColumns.length - 1;
-      const widthName = widthFlexGrow ? "min-width" : "width";
-      return createVNode(resolveComponent("el-table-column"), mergeProps({
-        "label": model.caption,
-        "prop": columnName
-      }, {
-        [widthName]: width
-      }, {
-        "fixed": columnState.fixed,
-        "show-overflow-tooltip": model.columnType === "DEFGRIDCOLUMN",
-        "sortable": model.enableSort ? "custom" : false,
-        "align": ((_a = model.align) == null ? void 0 : _a.toLowerCase()) || "center"
-      }), {
-        default: ({
-          row
-        }) => {
-          let elRow = row;
-          if (row.isGroupData) {
-            elRow = row.first;
-          }
-          const rowState = state.rows.find((item) => item.data.srfkey === elRow.srfkey);
-          if (rowState) {
-            const comp = resolveComponent(this.c.providers[columnName].component);
-            return h(comp, {
-              controller: columnC,
-              row: rowState,
-              key: elRow.srfkey + columnName
-            });
-          }
-          return null;
-        }
-      });
-    };
-    const renderChildColumn = (model, index) => {
-      var _a, _b;
-      if (model.columnType === "GROUPGRIDCOLUMN") {
-        const childColumns = ((_a = model.degridColumns) == null ? void 0 : _a.filter((item) => !item.hideDefault)) || [];
-        const {
-          width
-        } = model;
-        const align = ((_b = model.align) == null ? void 0 : _b.toLowerCase()) || "center";
-        return createVNode(resolveComponent("el-table-column"), {
-          "label": model.caption,
-          "min-width": width,
-          "align": align
-        }, {
-          default: () => {
-            return childColumns.map((column, index2) => {
-              return renderChildColumn(column, index2);
-            });
-          }
-        });
-      }
-      return renderColumn(model, index);
-    };
     return createVNode(resolveComponent("iBizControlBase"), {
       "class": [this.ns.is("show-header", !hideHeader), this.ns.is("enable-page", enablePagingBar), this.ns.is("enable-group", this.c.model.enableGroup)],
       "controller": this.c
@@ -284,7 +215,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
             "type": "selection",
             "width": "55"
           }, null), state.isCreated && this.renderColumns.map((model, index) => {
-            return renderChildColumn(model, index);
+            return renderChildColumn(this.c, model, this.renderColumns, index);
           })];
         },
         append: () => {
@@ -302,4 +233,4 @@ const GridControl = /* @__PURE__ */ defineComponent({
   }
 });
 
-export { GridControl };
+export { GridControl, renderChildColumn, renderColumn };

package/es/control/grid/grid/grid.provider.mjs

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {

package/es/control/grid/grid/index.d.ts

@@ -57,8 +57,8 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     c: import("@ibiz-template/runtime").GridController;
     ns: import("@ibiz-template/core").Namespace;
     tableRef: import("vue").Ref<IData | undefined>;
-    tableData: import("vue").ComputedRef<IData[]>;
-    renderColumns: import("vue").ComputedRef<import("@ibiz/model-core").IDEGridColumn[]>;
+    tableData: import("vue").Ref<IData>;
+    renderColumns: import("vue").Ref<import("@ibiz/model-core").IDEGridColumn[]>;
     onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
     onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: IData, event: MouseEvent) => Promise<void>;
     onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;
@@ -81,10 +81,7 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
         data: IData[];
     }) => string[];
     renderPopover: () => JSX.Element[];
-    defaultSort: import("vue").ComputedRef<{
-        prop: string | undefined;
-        order: string;
-    }>;
+    defaultSort: import("vue").Ref<IData>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IDEGrid>;
@@ -140,10 +137,10 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     };
 }>>, {
     params: IParams;
+    isSimple: boolean;
     mdctrlActiveMode: number;
     singleSelect: boolean;
     rowEditOpen: boolean;
-    isSimple: boolean;
     loadDefault: boolean;
 }, {}>>;
 export default IBizGridControl;

package/es/control/grid/grid/index.mjs

@@ -5,12 +5,13 @@ import { IBizGridPagination } from '../grid-pagination/grid-pagination.mjs';
 import { IBizRowEditPopover } from '../row-edit-popover/row-edit-popover.mjs';
 import { GridControl } from './grid.mjs';
 import { GridProvider } from './grid.provider.mjs';
-export { useAppGridPagination, useITableEvent } from './grid-control.util.mjs';
+export { useAppGridBase, useAppGridPagination, useITableEvent } from './grid-control.util.mjs';
 import { IBizGridFieldColumn } from '../grid-column/grid-field-column/index.mjs';
 import { IBizGridUAColumn } from '../grid-column/grid-ua-column/index.mjs';
 import { IBizGridFieldEditColumn } from '../grid-column/grid-field-edit-column/index.mjs';
 import { IBizGridGroupColumn } from '../grid-column/grid-group-column/index.mjs';
 
+"use strict";
 const IBizGridControl = withInstall(GridControl, (v) => {
   v.component(GridControl.name, GridControl);
   v.component(IBizGridPagination.name, IBizGridPagination);

package/es/control/grid/grid-column/grid-field-column/grid-field-column.mjs

@@ -3,6 +3,7 @@ import { useNamespace } from '@ibiz-template/vue3-util';
 import './grid-field-column.css';
 import { GridFieldColumnController, GridRowState } from '@ibiz-template/runtime';
 
+"use strict";
 const GridFieldColumn = /* @__PURE__ */ defineComponent({
   name: "IBizGridFieldColumn",
   props: {

package/es/control/grid/grid-column/grid-field-column/grid-field-column.provider.mjs

@@ -1,5 +1,6 @@
 import { GridFieldColumnController } from '@ibiz-template/runtime';
 
+"use strict";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {

package/es/control/grid/grid-column/grid-field-column/index.mjs

@@ -3,6 +3,7 @@ import { withInstall } from '@ibiz-template/vue3-util';
 import { GridFieldColumn } from './grid-field-column.mjs';
 import { GridFieldColumnProvider } from './grid-field-column.provider.mjs';
 
+"use strict";
 const IBizGridFieldColumn = withInstall(
   GridFieldColumn,
   function(v) {

package/es/control/grid/grid-column/grid-field-edit-column/cell-edit.mjs

@@ -1,6 +1,7 @@
 import { useClickOutside } from '@ibiz-template/vue3-util';
 import { computed, reactive } from 'vue';
 
+"use strict";
 function useCellEdit(props, componentRef) {
   const c = props.controller;
   const disabled = computed(() => {

package/es/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.mjs

@@ -2,6 +2,7 @@ import { defineComponent, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './grid-edit-item.css';
 
+"use strict";
 const IBizGridEditItem = /* @__PURE__ */ defineComponent({
   name: "IBizGridEditItem",
   props: {

package/es/control/grid/grid-column/grid-field-edit-column/grid-field-edit-column.mjs

@@ -5,6 +5,7 @@ import { GridFieldEditColumnController, GridRowState } from '@ibiz-template/runt
 import { useCellEdit } from './cell-edit.mjs';
 import { useRowEdit } from './row-edit.mjs';
 
+"use strict";
 const GridFieldEditColumn = /* @__PURE__ */ defineComponent({
   name: "GridFieldEditColumn",
   props: {

package/es/control/grid/grid-column/grid-field-edit-column/grid-field-edit-column.provider.mjs

@@ -1,5 +1,6 @@
 import { GridFieldEditColumnController } from '@ibiz-template/runtime';
 
+"use strict";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {

package/es/control/grid/grid-column/grid-field-edit-column/index.mjs

@@ -4,6 +4,7 @@ import { GridFieldEditColumn } from './grid-field-edit-column.mjs';
 import { GridFieldEditColumnProvider } from './grid-field-edit-column.provider.mjs';
 import { IBizGridEditItem } from './grid-edit-item/grid-edit-item.mjs';
 
+"use strict";
 const IBizGridFieldEditColumn = withInstall(
   GridFieldEditColumn,
   function(v) {

package/es/control/grid/grid-column/grid-field-edit-column/row-edit.mjs

@@ -1,5 +1,6 @@
 import { computed, reactive } from 'vue';
 
+"use strict";
 function useRowEdit(props, _componentRef) {
   const c = props.controller;
   const disabled = computed(() => {

package/es/control/grid/grid-column/grid-group-column/grid-group-column.mjs

@@ -2,6 +2,7 @@ import { defineComponent, createVNode } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { GridGroupColumnController, GridRowState } from '@ibiz-template/runtime';
 
+"use strict";
 const GridGroupColumn = /* @__PURE__ */ defineComponent({
   name: "IBizGridGroupColumn",
   props: {

package/es/control/grid/grid-column/grid-group-column/grid-group-column.provider.mjs

@@ -1,5 +1,6 @@
 import { GridGroupColumnController } from '@ibiz-template/runtime';
 
+"use strict";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {