@ibiz-template/vue3-components 0.7.37-alpha.5 → 0.7.38-alpha.12

package/es/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.mjs

@@ -1,4 +1,4 @@
-import { isVNode, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, computed, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './mdctrl-container.css';
 import { showTitle } from '@ibiz-template/core';
@@ -21,6 +21,9 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
     items: {
       type: Object,
       required: true
+    },
+    userStyle: {
+      type: String
     }
   },
   emits: {
@@ -74,18 +77,85 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
         default: () => [_slot3]
       });
     };
+    const renderStyle2AddBtn = () => {
+      return createVNode(resolveComponent("el-button"), {
+        "class": [ns.be("style2-item-actions", "create"), ns.be("style2-item-actions", "btn")],
+        "title": ibiz.i18n.t("app.add"),
+        "onClick": () => emit("addClick")
+      }, {
+        default: () => [createVNode("ion-icon", {
+          "name": "add-outline"
+        }, null), ibiz.i18n.t("app.add")]
+      });
+    };
+    const renderStyle2RemoveBtn = (item, index) => {
+      let _slot4;
+      if (!props.enableDelete) {
+        return null;
+      }
+      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
+        return createVNode(resolveComponent("el-popconfirm"), {
+          "title": showTitle(ibiz.i18n.t("control.form.mdCtrlContainer.promptInformation")),
+          "confirm-button-text": ibiz.i18n.t("app.confirm"),
+          "cancel-button-text": ibiz.i18n.t("app.cancel"),
+          "onConfirm": () => emit("removeClick", item, index)
+        }, {
+          reference: () => {
+            return createVNode(resolveComponent("el-button"), {
+              "type": "danger",
+              "class": [ns.be("style2-item-actions", "remove"), ns.be("style2-item-actions", "btn")],
+              "title": ibiz.i18n.t("app.delete")
+            }, {
+              default: () => [createVNode("ion-icon", {
+                "name": "trash-outline"
+              }, null)]
+            });
+          }
+        });
+      }
+      return createVNode(resolveComponent("el-button"), {
+        "type": "danger",
+        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")],
+        "onClick": () => emit("removeClick", item, index)
+      }, _isSlot(_slot4 = ibiz.i18n.t("app.delete")) ? _slot4 : {
+        default: () => [_slot4]
+      });
+    };
     return {
       ns,
       showActions,
       renderAddBtn,
-      renderRemoveBtn
+      renderRemoveBtn,
+      renderStyle2AddBtn,
+      renderStyle2RemoveBtn
     };
   },
   render() {
-    var _a;
+    var _a, _b;
+    if (this.userStyle === "STYLE2") {
+      return createVNode("div", {
+        "class": [this.ns.b(), this.ns.b("style2")]
+      }, [((_a = this.items) == null ? void 0 : _a.length) ? createVNode("div", {
+        "class": this.ns.e("item-container")
+      }, [this.showActions && this.enableCreate && this.renderStyle2AddBtn(), this.items.map((item, index) => {
+        const formComponent = this.$slots.item ? this.$slots.item({
+          data: item,
+          index
+        }) : createVNode("div", null, [ibiz.i18n.t("control.form.mdCtrlContainer.noSlot")]);
+        return createVNode("div", {
+          "class": this.ns.b("item")
+        }, [formComponent, this.showActions && createVNode("div", {
+          "class": this.ns.b("style2-item-actions")
+        }, [this.renderStyle2RemoveBtn(item, index)])]);
+      })]) : createVNode("div", {
+        "class": this.ns.b("no-data")
+      }, [this.enableCreate && createVNode("div", {
+        "class": this.ns.b("style2-item-actions")
+      }, [this.renderStyle2AddBtn()])])]);
+    }
     return createVNode("div", {
       "class": this.ns.b()
-    }, [((_a = this.items) == null ? void 0 : _a.length) ? this.items.map((item, index) => {
+    }, [((_b = this.items) == null ? void 0 : _b.length) ? this.items.map((item, index) => {
       const formComponent = this.$slots.item ? this.$slots.item({
         data: item,
         index

package/es/control/form/form-detail/form-mdctrl/mdctrl-container2/mdctrl-container2.mjs

@@ -1,4 +1,4 @@
-import { ref, watch, onMounted, onUnmounted, createVNode, defineComponent } from 'vue';
+import { defineComponent, ref, watch, onMounted, onUnmounted, createVNode } from 'vue';
 import { FormMDCtrlFormController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import draggable from 'vuedraggable';

package/es/control/form/form-detail/form-page/form-page-item/form-page.item.mjs

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
 import { FormPageController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 

package/es/control/form/form-detail/form-page/form-page.css

@@ -1 +1 @@
-.ibiz-form-page{--ibiz-form-page-font-size:var(--ibiz-font-size-header-4);--ibiz-form-page-header-border-color:var(--ibiz-color-border);--ibiz-form-page-text-color:var(--ibiz-color-text-2);--ibiz-form-page-bg-color:transparent;--ibiz-form-page-hover-text-color:var(--ibiz-color-primary);--ibiz-form-page-hover-bg-color:transparent;--ibiz-form-page-active-text-color:var(--ibiz-color-primary);--ibiz-form-page-active-bg-color:transparent;--ibiz-form-page-active-border-color:var(--ibiz-color-primary)}.ibiz-form-page__left{height:100%}.ibiz-form-page__left>.el-tabs__header{height:100%}.ibiz-form-page__left>.el-tabs__content{height:100%;overflow:auto}.ibiz-form-page__right{height:100%}.ibiz-form-page__right>.el-tabs__header{height:100%}.ibiz-form-page__right>.el-tabs__content{height:100%;overflow:auto}.ibiz-form-page--no-tab-header .ibiz-form-page-item{padding-top:var(--ibiz-spacing-none)}.ibiz-form-page-tab>.el-tabs__header.is-top{margin-bottom:var(--ibiz-spacing-tight)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top{font-size:var(--ibiz-form-page-font-size);color:var(--ibiz-form-page-text-color);background-color:var(--ibiz-form-page-bg-color)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top:hover{color:var(--ibiz-form-page-hover-text-color);background-color:var(--ibiz-form-page-hover-bg-color)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top.is-active{color:var(--ibiz-form-page-active-text-color);background-color:var(--ibiz-form-page-active-bg-color)}.ibiz-form-page-tab .el-tabs__nav-wrap::after{background-color:var(--ibiz-form-page-header-border-color)}.ibiz-form-page-tab .el-tabs__active-bar{background-color:var(--ibiz-form-page-active-border-color)}.ibiz-form-page-item{padding-top:var(--ibiz-padding-top)}.ibiz-form-page-item-child{margin-bottom:var(--ibiz-margin-bottom)}
+.ibiz-form-page{--ibiz-form-page-font-size:var(--ibiz-font-size-header-4);--ibiz-form-page-header-border-color:var(--ibiz-color-border);--ibiz-form-page-text-color:var(--ibiz-color-text-2);--ibiz-form-page-bg-color:transparent;--ibiz-form-page-hover-text-color:var(--ibiz-color-primary);--ibiz-form-page-hover-bg-color:transparent;--ibiz-form-page-active-text-color:var(--ibiz-color-primary);--ibiz-form-page-active-bg-color:transparent;--ibiz-form-page-active-border-color:var(--ibiz-color-primary)}.ibiz-form-page__left{height:100%}.ibiz-form-page__left>.el-tabs__header{height:100%}.ibiz-form-page__left>.el-tabs__content{height:100%;overflow:auto}.ibiz-form-page__right{height:100%}.ibiz-form-page__right>.el-tabs__header{height:100%}.ibiz-form-page__right>.el-tabs__content{height:100%;overflow:auto}.ibiz-form-page--no-tab-header .ibiz-form-page-item{padding-top:var(--ibiz-spacing-none)}.ibiz-form-page-tab>.el-tabs__header.is-top{margin-bottom:var(--ibiz-spacing-tight)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top{font-size:var(--ibiz-form-page-font-size);color:var(--ibiz-form-page-text-color);background-color:var(--ibiz-form-page-bg-color)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top:hover{color:var(--ibiz-form-page-hover-text-color);background-color:var(--ibiz-form-page-hover-bg-color)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top.is-active{color:var(--ibiz-form-page-active-text-color);background-color:var(--ibiz-form-page-active-bg-color)}.ibiz-form-page-tab .el-tabs__nav-wrap::after{height:1px;background-color:var(--ibiz-form-page-header-border-color)}.ibiz-form-page-tab .el-tabs__active-bar{background-color:var(--ibiz-form-page-active-border-color)}.ibiz-form-page-item{padding-top:var(--ibiz-padding-top)}.ibiz-form-page-item-child{margin-bottom:var(--ibiz-margin-bottom)}

package/es/control/form/form-detail/form-page/form-page.d.ts

@@ -1,18 +1,28 @@
 import { PropType } from 'vue';
 import './form-page.scss';
 import { IDEForm } from '@ibiz/model-core';
+import { FormController } from '@ibiz-template/runtime';
 export declare const FormPage: import("vue").DefineComponent<{
     modelData: {
         type: PropType<IDEForm>;
         required: true;
     };
+    controller: {
+        type: PropType<FormController<IDEForm, import("@ibiz-template/runtime").IFormState, import("@ibiz-template/runtime").IFormEvent>>;
+        required: true;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     position: string;
+    onTabChange: (name: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDEForm>;
         required: true;
     };
+    controller: {
+        type: PropType<FormController<IDEForm, import("@ibiz-template/runtime").IFormState, import("@ibiz-template/runtime").IFormEvent>>;
+        required: true;
+    };
 }>>, {}, {}>;
 export default FormPage;

package/es/control/form/form-detail/form-page/form-page.mjs

@@ -1,4 +1,4 @@
-import { isVNode, createVNode, resolveComponent, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './form-page.css';
 
@@ -12,6 +12,10 @@ const FormPage = /* @__PURE__ */ defineComponent({
     modelData: {
       type: Object,
       required: true
+    },
+    controller: {
+      type: Object,
+      required: true
     }
   },
   setup(props) {
@@ -20,9 +24,13 @@ const FormPage = /* @__PURE__ */ defineComponent({
     if (props.modelData.tabHeaderPos) {
       position = props.modelData.tabHeaderPos.toLowerCase();
     }
+    const onTabChange = (name) => {
+      props.controller.setActiveTab(name);
+    };
     return {
       ns,
-      position
+      position,
+      onTabChange
     };
   },
   render() {
@@ -40,7 +48,8 @@ const FormPage = /* @__PURE__ */ defineComponent({
     return createVNode(resolveComponent("el-tabs"), {
       "class": [this.ns.b(), this.ns.b("tab"), this.ns.e(this.position)],
       "model-value": (_d = defaultSlots[0]) == null ? void 0 : _d.key,
-      "tab-position": this.position
+      "tab-position": this.position,
+      "onTabChange": this.onTabChange
     }, _isSlot(_slot = defaultSlots.map((slot) => {
       const props = slot.props;
       if (!props || !props.controller) {

package/es/control/form/form-detail/form-page/index.d.ts

@@ -4,13 +4,22 @@ export declare const IBizFormPage: import("@ibiz-template/vue3-util").TypeWithIn
         type: import("vue").PropType<import("@ibiz/model-core").IDEForm>;
         required: true;
     };
+    controller: {
+        type: import("vue").PropType<import("@ibiz-template/runtime").FormController<import("@ibiz/model-core").IDEForm, import("@ibiz-template/runtime").IFormState, import("@ibiz-template/runtime").IFormEvent>>;
+        required: true;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     position: string;
+    onTabChange: (name: string) => void;
 }, 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").IDEForm>;
         required: true;
     };
+    controller: {
+        type: import("vue").PropType<import("@ibiz-template/runtime").FormController<import("@ibiz/model-core").IDEForm, import("@ibiz-template/runtime").IFormState, import("@ibiz-template/runtime").IFormEvent>>;
+        required: true;
+    };
 }>>, {}, {}>>;
 export default IBizFormPage;

package/es/control/form/form-detail/form-rawitem/form-rawitem.mjs

@@ -1,4 +1,4 @@
-import { ref, computed, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, ref, computed, watch, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { FormRawItemController } from '@ibiz-template/runtime';
 import './form-rawitem.css';

package/es/control/form/form-detail/form-tab-page/form-tab-page.mjs

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
 import { useNamespace, useController } from '@ibiz-template/vue3-util';
 import './form-tab-page.css';
 import { FormTabPageController } from '@ibiz-template/runtime';

package/es/control/form/form-detail/form-tab-panel/form-tab-panel.css

@@ -1 +1 @@
-.ibiz-form-tab-panel{width:100%;height:100%;--ibiz-form-tab-panel-font-size:var(--ibiz-font-size-header-4);--ibiz-form-tab-panel-header-border-color:var(--ibiz-color-border);--ibiz-form-tab-panel-text-color:var(--ibiz-color-text-2);--ibiz-form-tab-panel-bg-color:transparent;--ibiz-form-tab-panel-hover-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-hover-bg-color:transparent;--ibiz-form-tab-panel-active-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-active-bg-color:transparent;--ibiz-form-tab-panel-active-border-color:var(--ibiz-color-primary)}.ibiz-form-tab-panel>.el-tabs__header.is-top{margin-bottom:var(--ibiz-spacing-tight)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top{font-size:var(--ibiz-form-tab-panel-font-size);color:var(--ibiz-form-tab-panel-text-color);background-color:var(--ibiz-form-tab-panel-bg-color)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top:hover{color:var(--ibiz-form-tab-panel-hover-text-color);background-color:var(--ibiz-form-tab-panel-hover-bg-color)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top.is-active{color:var(--ibiz-form-tab-panel-active-text-color);background-color:var(--ibiz-form-tab-panel-active-bg-color)}.ibiz-form-tab-panel .el-tabs__nav-wrap::after{background-color:var(--ibiz-form-tab-panel-header-border-color)}.ibiz-form-tab-panel .el-tabs__active-bar{background-color:var(--ibiz-form-tab-panel-active-border-color)}.ibiz-form-tab-panel__badge .el-badge__content{padding:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-small);background-color:var(--ibiz-color-danger)}
+.ibiz-form-tab-panel{width:100%;height:100%;--ibiz-form-tab-panel-font-size:var(--ibiz-font-size-header-4);--ibiz-form-tab-panel-header-border-color:var(--ibiz-color-border);--ibiz-form-tab-panel-text-color:var(--ibiz-color-text-2);--ibiz-form-tab-panel-bg-color:transparent;--ibiz-form-tab-panel-hover-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-hover-bg-color:transparent;--ibiz-form-tab-panel-active-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-active-bg-color:transparent;--ibiz-form-tab-panel-active-border-color:var(--ibiz-color-primary)}.ibiz-form-tab-panel>.el-tabs__header.is-top{margin-bottom:var(--ibiz-spacing-tight)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top{font-size:var(--ibiz-form-tab-panel-font-size);color:var(--ibiz-form-tab-panel-text-color);background-color:var(--ibiz-form-tab-panel-bg-color)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top:hover{color:var(--ibiz-form-tab-panel-hover-text-color);background-color:var(--ibiz-form-tab-panel-hover-bg-color)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top.is-active{color:var(--ibiz-form-tab-panel-active-text-color);background-color:var(--ibiz-form-tab-panel-active-bg-color)}.ibiz-form-tab-panel .el-tabs__nav-wrap::after{height:1px;background-color:var(--ibiz-form-tab-panel-header-border-color)}.ibiz-form-tab-panel .el-tabs__active-bar{background-color:var(--ibiz-form-tab-panel-active-border-color)}.ibiz-form-tab-panel__badge .el-badge__content{padding:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-small);background-color:var(--ibiz-color-danger)}

package/es/control/form/form-detail/form-tab-panel/form-tab-panel.mjs

@@ -1,4 +1,4 @@
-import { isVNode, reactive, ref, onMounted, onUnmounted, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, reactive, ref, onMounted, onUnmounted, createVNode, resolveComponent } from 'vue';
 import { useNamespace, useController } from '@ibiz-template/vue3-util';
 import './form-tab-panel.css';
 import { FormTabPanelController } from '@ibiz-template/runtime';

package/es/control/form/form-detail/index.d.ts

@@ -7,3 +7,4 @@ export * from './form-mdctrl/index';
 export * from './form-rawitem/index';
 export * from './form-tab-panel/index';
 export * from './form-tab-page/index';
+export * from './form-button-list/index';

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

@@ -7,6 +7,7 @@ export { IBizFormMDCtrl } from './form-mdctrl/index.mjs';
 export { IBizFormRawItem } from './form-rawitem/index.mjs';
 export { IBizFormTabPanel } from './form-tab-panel/index.mjs';
 export { IBizFormTabPage } from './form-tab-page/index.mjs';
+export { IBizFormButtonList } from './form-button-list/index.mjs';
 export { IBizFormItemContainer } from './form-item/form-item-container/form-item-container.mjs';
 export { IBizFormPageItem } from './form-page/form-page-item/form-page.item.mjs';
 

package/es/control/form/index.mjs

@@ -13,5 +13,6 @@ export { IBizFormMDCtrl } from './form-detail/form-mdctrl/index.mjs';
 export { IBizFormRawItem } from './form-detail/form-rawitem/index.mjs';
 export { IBizFormTabPanel } from './form-detail/form-tab-panel/index.mjs';
 export { IBizFormTabPage } from './form-detail/form-tab-page/index.mjs';
+export { IBizFormButtonList } from './form-detail/form-button-list/index.mjs';
 
 "use strict";

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

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { SearchFormControl } from './search-form.mjs';
 import { SearchFormProvider } from './search-form.provider.mjs';

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

@@ -1,4 +1,4 @@
-import { reactive, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, reactive, createVNode, resolveComponent } from 'vue';
 import { SearchFormController } from '@ibiz-template/runtime';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './search-form.css';

package/es/control/gantt/gantt.mjs

@@ -1,4 +1,4 @@
-import { ref, resolveComponent, getCurrentInstance, onMounted, computed, createVNode, h, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { defineComponent, ref, resolveComponent, getCurrentInstance, onMounted, computed, createVNode, h, withDirectives, resolveDirective } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { GanttController } from '@ibiz-template/runtime';
 import dayjs from 'dayjs';
@@ -57,6 +57,19 @@ const GanttControl = /* @__PURE__ */ defineComponent({
         app == null ? void 0 : app.use(defaltModule);
         isInited.value = true;
       });
+      c.evt.on("onToggleRowExpansion", (event) => {
+        const {
+          row,
+          expand
+        } = event;
+        if (ganttRef.value) {
+          if (expand) {
+            ganttRef.value.setExpand(row);
+          } else {
+            ganttRef.value.setCollapse(row);
+          }
+        }
+      });
     });
     const getVarValue = (varName) => {
       const root = document.documentElement;

package/es/control/gantt/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { GanttControl } from './gantt.mjs';
 import { GanttProvider } from './gantt.provider.mjs';

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

@@ -1,5 +1,6 @@
 import { listenJSEvent } from '@ibiz-template/core';
-import { Srfuf, ControlVO, GridRowState } from '@ibiz-template/runtime';
+import { Srfuf, GridRowState, ControlVO } from '@ibiz-template/runtime';
+import { orderBy, chunk } from 'lodash-es';
 import { ref, watch, nextTick, computed, watchEffect, onUnmounted } from 'vue';
 
 "use strict";
@@ -27,10 +28,31 @@ function useITableEvent(c) {
   const tableRef = ref();
   let forbidChange = false;
   let isGridUISort = false;
+  c.evt.on("onToggleRowExpansion", (event) => {
+    const { row, expand } = event;
+    if (tableRef.value) {
+      if (tableRef.value.lazy) {
+        const { store } = tableRef.value;
+        const { treeData } = tableRef.value.store.states;
+        const data = treeData.value[row.srfkey];
+        if (data && data.expanded !== expand) {
+          store.loadOrToggle(row);
+        }
+      } else {
+        tableRef.value.toggleRowExpansion(row, expand);
+      }
+    }
+  });
   async function onRowClick(data, _column, _event) {
     if (data.srfuf === Srfuf.CREATE) {
       return;
     }
+    const target = _event.target;
+    const { classList } = target.parentElement || {};
+    if (classList && classList.contains("el-table-column--selection")) {
+      tableRef.value.toggleRowSelection(data);
+      return;
+    }
     if (c.editShowMode === "row" && c.model.enableRowEdit) {
       const row = c.findRowState(data);
       if (row && row.showRowEdit !== true) {
@@ -92,6 +114,21 @@ function useITableEvent(c) {
     if (sortQuery === c.state.sortQuery) {
       return;
     }
+    if (c.context && c.context.srfrunmode === "DESIGN") {
+      c.state.items = orderBy(
+        c.state.items,
+        [(item) => {
+          var _a;
+          return ((_a = item == null ? void 0 : item[fieldName || ""]) == null ? void 0 : _a.length) || 0;
+        }],
+        [order1 || "asc"]
+      );
+      c.state.rows = c.state.items.map((item) => {
+        const row = new GridRowState(new ControlVO(item), c);
+        return row;
+      });
+      return;
+    }
     c.setSort(fieldName, order1);
     c.load({
       isInitialLoad: c.model.pagingMode === 2 || c.model.pagingMode === 3
@@ -194,7 +231,13 @@ function useAppGridBase(c, props) {
       return;
     }
     c.state.items = props.data;
-    c.state.rows = props.data.map((item) => {
+    if (c.context && c.context.srfrunmode === "DESIGN") {
+      c.state.simpleData = props.data;
+      c.state.total = props.data.length;
+      c.state.curPage = 1;
+      c.state.items = chunk(c.state.simpleData, c.state.size)[c.state.curPage - 1] || [];
+    }
+    c.state.rows = c.state.items.map((item) => {
       const row = new GridRowState(new ControlVO(item), c);
       return row;
     });

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:var(--ibiz-spacing-none);--ibiz-control-grid-cell-padding:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-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-row-hover-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-row-select-color:var(--ibiz-color-primary-light-default);--ibiz-control-grid-row-expand-icon-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-grid-now-header-height:auto;--ibiz-control-grid-scrollbar-width:4px;--ibiz-control-grid-scrollbar-bg-color:var(--ibiz-color-fill-2);--ibiz-control-grid-scrollbar-bg-hover-opacity:0.5;--ibiz-control-grid-scrollbar-bg-hover-color:var(--ibiz-color-fill-2);--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-color-text-2);--ibiz-control-grid-page-height:50px;--ibiz-control-grid-page-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-footer-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-footer-font-weight:var(--ibiz-font-weight-bold);position:relative;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-current-row-bg-color:var(--ibiz-control-grid-row-select-color);--el-table-border-color:transparent}.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--left.is-first-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--left.is-last-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--right.is-first-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--right.is-last-column::before{bottom:0}.ibiz-control-grid.is-empty .el-scrollbar .el-scrollbar__view{height:100%}.ibiz-control-grid.is-empty .el-table__empty-text{display:inline-block;height:100%}.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 .el-table thead.is-group th.el-table__cell{background:var(--ibiz-control-grid-header-bg-color)}.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{justify-content:center}.ibiz-control-grid__table .caret-wrapper>*+*{margin-top:var(--ibiz-spacing-super-tight)}.ibiz-control-grid__table .sort-caret{--el-text-color-placeholder:--ibiz-control-grid-header-text-color;position:initial;opacity:.6}.ibiz-control-grid__table.el-table .el-table__cell{padding:var(--ibiz-spacing-none)}.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(--ibiz-control-grid-row-hover-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);--ibiz-color-text-0:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-1:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-2:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-3: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:var(--ibiz-spacing-none)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row .el-table__expand-icon{margin:var(--ibiz-control-grid-row-expand-icon-margin)}@-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:var(--ibiz-spacing-none)}.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 tfoot 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 tfoot td.el-table__cell:first-child>div{display:inline;vertical-align:4px}.ibiz-control-grid__table .enable-order{position:relative;padding-left:var(--ibiz-spacing-base-tight);transition:transform .25s cubic-bezier(0,0,.2,1)}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon{padding:var(--ibiz-spacing-none)!important}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon .cell{display:none}.ibiz-control-grid__table .enable-order:hover .ibiz-control-grid__drag-icon .cell{display:flex}.ibiz-control-grid__table .el-scrollbar__bar.is-horizontal{height:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__table .el-scrollbar__bar.is-vertical{width:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__table .el-scrollbar__thumb{background-color:var(--ibiz-control-grid-scrollbar-bg-color)}.ibiz-control-grid__table .el-scrollbar__thumb:hover{background-color:var(--ibiz-control-grid-scrollbar-bg-hover-color);opacity:var(--ibiz-control-grid-scrollbar-bg-hover-opacity)}.ibiz-control-grid__load-more-button{padding:var(--ibiz-control-grid-header-cell-padding);text-align:center}.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-pagination{--ibiz-pagination-height:var(--ibiz-control-grid-page-height);--ibiz-pagination-text-color:var(--ibiz-control-grid-text-color);--ibiz-pagination-padding:var(--ibiz-control-grid-page-padding)}.ibiz-control-grid.is-single-select .el-table__header-wrapper .el-table__header thead>tr th:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-single-select .el-table__body-wrapper .el-table__body tbody>tr td:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-enable-customized .el-table__header-wrapper .el-table__header thead>tr th:last-child{padding-right:var(--ibiz-spacing-base-loose)}.ibiz-control-grid.is-enable-customized .ibiz-control-grid-setting-box{display:flex;align-items:center;justify-content:flex-start;position:absolute;top:0;right:0;z-index:1;height:var(--ibiz-control-grid-now-header-height);padding-right:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-customized .ibiz-grid-setting{cursor:pointer}.ibiz-control-grid-quick-toolbar{justify-content:center}.ibiz-control-grid-batch-toolbar{position:absolute;top:0;left:54px;z-index:99;display:none;width:calc(100% - 54px);height:var(--ibiz-control-grid-now-header-height);font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid-batch-toolbar.is-show{display:flex;align-items:center;justify-content:flex-start}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-separator{padding:0 var(--ibiz-spacing-base-tight)}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-content{height:100%;display:flex;align-items:center;justify-content:flex-start}
+.ibiz-control-grid{--ibiz-control-grid-text-color:var(--ibiz-color-text-0);--ibiz-control-grid-bg-color:transparent;--ibiz-control-grid-padding:var(--ibiz-spacing-none);--ibiz-control-grid-cell-padding:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-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-row-hover-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-row-select-color:var(--ibiz-color-primary-light-default);--ibiz-control-grid-row-expand-icon-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-grid-now-header-height:auto;--ibiz-control-grid-scrollbar-width:4px;--ibiz-control-grid-scrollbar-bg-color:var(--ibiz-color-fill-2);--ibiz-control-grid-scrollbar-bg-hover-opacity:0.5;--ibiz-control-grid-scrollbar-bg-hover-color:var(--ibiz-color-fill-2);--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-min-height:54px;--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-color-text-2);--ibiz-control-grid-page-height:50px;--ibiz-control-grid-page-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-footer-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-footer-font-weight:var(--ibiz-font-weight-bold);position:relative;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-current-row-bg-color:var(--ibiz-control-grid-row-select-color);--el-table-border-color:transparent}.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--left.is-first-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--left.is-last-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--right.is-first-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--right.is-last-column::before{bottom:0}.ibiz-control-grid.is-empty .el-scrollbar .el-scrollbar__view{height:100%}.ibiz-control-grid.is-empty .el-table__empty-text{display:inline-block;height:100%}.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 .el-table thead.is-group th.el-table__cell{background:var(--ibiz-control-grid-header-bg-color)}.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{justify-content:center}.ibiz-control-grid__table .caret-wrapper>*+*{margin-top:var(--ibiz-spacing-super-tight)}.ibiz-control-grid__table .sort-caret{--el-text-color-placeholder:--ibiz-control-grid-header-text-color;position:initial;opacity:.6}.ibiz-control-grid__table.el-table .el-table__cell{padding:var(--ibiz-spacing-none)}.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(--ibiz-control-grid-row-hover-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);min-height:var(--ibiz-control-grid-header-min-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__header-wrapper .el-table-fixed-column--left .cell,.ibiz-control-grid__table .el-table__header-wrapper .el-table-fixed-column--right .cell{display:flex;align-items:center;justify-content:center}.ibiz-control-grid__table .el-table__body-wrapper{color:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-0:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-1:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-2:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-3: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:var(--ibiz-spacing-none)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row .el-table__expand-icon{margin:var(--ibiz-control-grid-row-expand-icon-margin)}@-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:var(--ibiz-spacing-none)}.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 tfoot 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 tfoot td.el-table__cell:first-child>div{display:inline;vertical-align:4px}.ibiz-control-grid__table .enable-order{position:relative;padding-left:var(--ibiz-spacing-base-tight);transition:transform .25s cubic-bezier(0,0,.2,1)}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon{padding:var(--ibiz-spacing-none)!important}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon .cell{display:none}.ibiz-control-grid__table .enable-order:hover .ibiz-control-grid__drag-icon .cell{display:flex}.ibiz-control-grid__table .el-scrollbar__bar.is-horizontal{height:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__table .el-scrollbar__bar.is-vertical{width:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__table .el-scrollbar__thumb{background-color:var(--ibiz-control-grid-scrollbar-bg-color)}.ibiz-control-grid__table .el-scrollbar__thumb:hover{background-color:var(--ibiz-control-grid-scrollbar-bg-hover-color);opacity:var(--ibiz-control-grid-scrollbar-bg-hover-opacity)}.ibiz-control-grid__load-more-button{padding:var(--ibiz-control-grid-header-cell-padding);text-align:center}.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-pagination{--ibiz-pagination-height:var(--ibiz-control-grid-page-height);--ibiz-pagination-text-color:var(--ibiz-control-grid-text-color);--ibiz-pagination-padding:var(--ibiz-control-grid-page-padding)}.ibiz-control-grid.is-single-select .el-table__header-wrapper .el-table__header thead>tr th:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-single-select .el-table__body-wrapper .el-table__body tbody>tr td:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-enable-customized .el-table__header-wrapper .el-table__header thead>tr th:last-child{padding-right:var(--ibiz-spacing-base-loose)}.ibiz-control-grid.is-enable-customized .ibiz-control-grid-setting-box{display:flex;align-items:center;justify-content:flex-start;position:absolute;top:0;right:0;z-index:1;height:var(--ibiz-control-grid-now-header-height);padding-right:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-customized .ibiz-grid-setting{cursor:pointer}.ibiz-control-grid-quick-toolbar{justify-content:center}.ibiz-control-grid-batch-toolbar{position:absolute;top:0;left:54px;z-index:99;display:none;width:calc(100% - 54px);height:var(--ibiz-control-grid-now-header-height);font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid-batch-toolbar.is-show{display:flex;align-items:center;justify-content:flex-start}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-separator{padding:0 var(--ibiz-spacing-base-tight)}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-content{height:100%;display:flex;align-items:center;justify-content:flex-start}

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

@@ -68,6 +68,7 @@ export declare const GridControl: import("vue").DefineComponent<{
 }, {
     c: GridController<IDEGrid, import("@ibiz-template/runtime").IGridState, import("@ibiz-template/runtime").IGridEvent>;
     ns: import("@ibiz-template/core").Namespace;
+    sysCssName: string | undefined;
     tableRef: import("vue").Ref<IData | undefined>;
     tableData: import("vue").Ref<IData>;
     renderColumns: import("vue").Ref<IDEGridColumn[]>;

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

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, mergeProps, h, createVNode, createTextVNode, renderSlot, onUnmounted, computed, ref, watch, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { isVNode, createVNode, resolveComponent, mergeProps, h, defineComponent, createTextVNode, renderSlot, onUnmounted, computed, ref, watch, withDirectives, resolveDirective } from 'vue';
 import { useControlController, useNamespace, useUIStore } from '@ibiz-template/vue3-util';
 import { ScriptFactory, GridController } from '@ibiz-template/runtime';
 import { NOOP } from '@ibiz-template/core';
@@ -152,6 +152,10 @@ const GridControl = /* @__PURE__ */ defineComponent({
       zIndex
     } = useUIStore();
     c.state.zIndex = zIndex.increment();
+    const {
+      sysCss
+    } = c.model;
+    const sysCssName = sysCss == null ? void 0 : sysCss.cssName;
     const {
       tableRef,
       onRowClick,
@@ -297,6 +301,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
     return {
       c,
       ns,
+      sysCssName,
       tableRef,
       tableData,
       renderColumns,
@@ -386,12 +391,13 @@ const GridControl = /* @__PURE__ */ defineComponent({
             default: () => [_slot]
           })]), this.renderPopover()];
         }
-      }), this.c.state.enablePagingBar && this.c.model.pagingMode === 1 && createVNode(resolveComponent("iBizPagination"), {
+      }), this.c.state.enablePagingBar && createVNode(resolveComponent("iBizPagination"), {
         "total": state.total,
         "curPage": state.curPage,
         "size": state.size,
         "totalPages": state.totalPages,
         "onChange": this.onPageChange,
+        "popperClass": "".concat(this.sysCssName, "--popper"),
         "onPageSizeChange": this.onPageSizeChange,
         "onPageRefresh": this.onPageRefresh
       }, null), this.c.model.enableCustomized && !this.c.state.hideHeader && createVNode("div", {

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

@@ -55,6 +55,7 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
 }, {
     c: import("@ibiz-template/runtime").GridController<import("@ibiz/model-core").IDEGrid, import("@ibiz-template/runtime").IGridState, import("@ibiz-template/runtime").IGridEvent>;
     ns: import("@ibiz-template/core").Namespace;
+    sysCssName: string | undefined;
     tableRef: import("vue").Ref<IData | undefined>;
     tableData: import("vue").Ref<IData>;
     renderColumns: import("vue").Ref<import("@ibiz/model-core").IDEGridColumn[]>;

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

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import '../grid-column/index.mjs';
 import { IBizRowEditPopover } from '../row-edit-popover/row-edit-popover.mjs';

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

@@ -1,4 +1,4 @@
-import { ref, watch, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, ref, watch, computed, createVNode, resolveComponent } from 'vue';
 import { useNamespace, useCodeListListen } from '@ibiz-template/vue3-util';
 import './grid-field-column.css';
 import { GridFieldColumnController, GridRowState, ValueExUtil } from '@ibiz-template/runtime';

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

@@ -1,4 +1,4 @@
-import { computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, computed, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './grid-edit-item.css';
 

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

@@ -1,4 +1,4 @@
-import { ref, computed, resolveComponent, h, createVNode, defineComponent } from 'vue';
+import { defineComponent, ref, computed, createVNode, resolveComponent, h } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { RuntimeError } from '@ibiz-template/core';
 import { GridFieldEditColumnController, GridRowState } from '@ibiz-template/runtime';

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

@@ -1,4 +1,4 @@
-import { createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { GridGroupColumnController, GridRowState } from '@ibiz-template/runtime';
 

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

@@ -1,4 +1,4 @@
-import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './grid-ua-column.css';
 import { GridUAColumnController, GridRowState } from '@ibiz-template/runtime';

package/es/control/grid/row-edit-popover/row-edit-popover.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, createVNode, resolveComponent } from 'vue';
 import { useNamespace, useEventListener } from '@ibiz-template/vue3-util';
 import './row-edit-popover.css';
 

package/es/control/index.mjs

@@ -43,6 +43,7 @@ export { IBizFormMDCtrl } from './form/form-detail/form-mdctrl/index.mjs';
 export { IBizFormRawItem } from './form/form-detail/form-rawitem/index.mjs';
 export { IBizFormTabPanel } from './form/form-detail/form-tab-panel/index.mjs';
 export { IBizFormTabPage } from './form/form-detail/form-tab-page/index.mjs';
+export { IBizFormButtonList } from './form/form-detail/form-button-list/index.mjs';
 export { IBizEditFormControl } from './form/edit-form/index.mjs';
 export { IBizFormControl } from './form/form/index.mjs';
 export { DataViewControlProvider } from './data-view/data-view.provider.mjs';

package/es/control/kanban/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { KanbanControl } from './kanban.mjs';
 import { KanbanProvider } from './kanban.provider.mjs';

package/es/control/kanban/kanban.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, computed, onMounted, onBeforeUnmount, resolveComponent, createVNode, createTextVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, computed, onMounted, onBeforeUnmount, createVNode, resolveComponent, createTextVNode } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import draggable from 'vuedraggable';
 import { KanbanController } from '@ibiz-template/runtime';