@ibiz-template/vue3-components 0.2.0 → 0.2.2

package/es/common/index.d.ts

@@ -13,6 +13,7 @@ export * from './code-list/code-list';
 export * from './control-loading-placeholder/control-loading-placeholder';
 export * from './split/split';
 export * from './split-trigger/split-trigger';
+export * from './sort-bar/sort-bar';
 export declare const IBizCommonComponents: {
     install: (v: App) => void;
 };

package/es/common/index.mjs

@@ -13,6 +13,8 @@ import { IBizSplit } from './split/split.mjs';
 import { IBizSplitTrigger } from './split-trigger/split-trigger.mjs';
 import { IBizExtendActionTimeLine } from './extend-action-timeline/extend-action-timeline.mjs';
 import { ViewMessage } from './view-message/view-message.mjs';
+import { IBizPagination } from './pagination/pagination.mjs';
+import { IBizSortBar } from './sort-bar/sort-bar.mjs';
 export { ControlLoadingPlaceholder } from './control-loading-placeholder/control-loading-placeholder.mjs';
 
 "use strict";
@@ -33,7 +35,9 @@ const IBizCommonComponents = {
     v.component(IBizSplitTrigger.name, IBizSplitTrigger);
     v.component(IBizExtendActionTimeLine.name, IBizExtendActionTimeLine);
     v.component(ViewMessage.name, ViewMessage);
+    v.component(IBizPagination.name, IBizPagination);
+    v.component(IBizSortBar.name, IBizSortBar);
   }
 };
 
-export { IBizActionToolbar, IBizCodeList, IBizCol, IBizCommonComponents, IBizControlBase, IBizControlShell, IBizIcon, IBizRawItem, IBizRouterView, IBizRow, IBizSplit, IBizSplitTrigger, IBizViewShell, IBizCommonComponents as default };
+export { IBizActionToolbar, IBizCodeList, IBizCol, IBizCommonComponents, IBizControlBase, IBizControlShell, IBizIcon, IBizRawItem, IBizRouterView, IBizRow, IBizSortBar, IBizSplit, IBizSplitTrigger, IBizViewShell, IBizCommonComponents as default };

package/es/common/pagination/pagination.css

@@ -0,0 +1 @@
+.ibiz-pagination{--ibiz-pagination-text-color:var(--ibiz-color-text-2);--ibiz-pagination-height:50px;--ibiz-pagination-padding:0 var(--ibiz-spacing-base-tight);display:flex;justify-content:flex-end;height:var(--ibiz-pagination-height);padding:var(--ibiz-pagination-padding)}.ibiz-pagination .el-pagination{overflow:auto;font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);color:var(--ibiz-pagination-text-color)}.ibiz-pagination .el-pagination .ibiz-pagination-btn{margin-right:var(--ibiz-spacing-tight)}.ibiz-pagination .el-pagination .ibiz-pagination-btn .el-button{color:var(--ibiz-pagination-text-color);border:1px solid var(--ibiz-color-border)}.ibiz-pagination .el-pagination .btn-next,.ibiz-pagination .el-pagination .btn-prev{border:1px solid var(--ibiz-color-border)}.ibiz-pagination .el-pagination .el-pager li{color:var(--ibiz-pagination-text-color);border:1px solid var(--ibiz-color-border)}.ibiz-pagination .el-pagination .el-pager li.is-active{color:var(--ibiz-color-white);background-color:var(--ibiz-color-primary)}.ibiz-pagination .el-pagination .el-pagination__sizes{margin-left:var(--ibiz-spacing-tight);border:1px solid var(--ibiz-color-border)}.ibiz-pagination .el-pagination .el-pagination__sizes .el-select .el-input__wrapper{background-color:transparent}.ibiz-pagination .el-pagination .el-pagination__sizes .el-input__inner{color:var(--ibiz-pagination-text-color)}.ibiz-pagination .el-pagination .el-pagination__jump{color:var(--ibiz-pagination-text-color)}.ibiz-pagination .el-pagination .el-pagination__jump .el-pagination__editor{border:1px solid var(--ibiz-color-border)}.ibiz-pagination .el-pagination .el-pagination__jump .el-pagination__editor .el-input__wrapper{background-color:transparent}

package/es/{control/grid/grid-pagination/grid-pagination.d.ts → common/pagination/pagination.d.ts}

@@ -1,5 +1,5 @@
-import './grid-pagination.scss';
-export declare const IBizGridPagination: import("vue").DefineComponent<{
+import './pagination.scss';
+export declare const IBizPagination: import("vue").DefineComponent<{
     total: {
         type: NumberConstructor;
         required: true;

package/es/{control/grid/grid-pagination/grid-pagination.mjs → common/pagination/pagination.mjs}

@@ -1,10 +1,10 @@
 import { computed, resolveComponent, mergeProps, createVNode, createTextVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import './grid-pagination.css';
+import './pagination.css';
 
 "use strict";
-const IBizGridPagination = /* @__PURE__ */ defineComponent({
-  name: "IBizGridPagination",
+const IBizPagination = /* @__PURE__ */ defineComponent({
+  name: "IBizPagination",
   props: {
     total: {
       type: Number,
@@ -23,7 +23,7 @@ const IBizGridPagination = /* @__PURE__ */ defineComponent({
   setup(props, {
     emit
   }) {
-    const ns = useNamespace("grid-page");
+    const ns = useNamespace("pagination");
     const start = computed(() => {
       return (props.curPage - 1) * props.size + 1;
     });
@@ -81,4 +81,4 @@ const IBizGridPagination = /* @__PURE__ */ defineComponent({
   }
 });
 
-export { IBizGridPagination };
+export { IBizPagination };

package/es/common/sort-bar/sort-bar.css

@@ -0,0 +1 @@
+.ibiz-sort-bar{--ibiz-sort-bar-icon-color:var(--ibiz-color-disabled-text);--ibiz-sort-bar-border-radius:var(--ibiz-border-radius-small);display:flex;align-items:center;justify-content:flex-start;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base)}.ibiz-sort-bar-item{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);margin-right:-1px;font-size:var(--ibiz-font-size-regular);line-height:1;color:var(--ibiz-color-text-2);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--ibiz-color-bg-1);border:1px solid var(--ibiz-color-border)}.ibiz-sort-bar-item:first-child{border-top-left-radius:var(--ibiz-sort-bar-border-radius);border-bottom-left-radius:var(--ibiz-sort-bar-border-radius)}.ibiz-sort-bar-item:last-child{border-top-right-radius:var(--ibiz-sort-bar-border-radius);border-bottom-right-radius:var(--ibiz-sort-bar-border-radius)}.ibiz-sort-bar-item--asc .ibiz-sort-bar-icon-wrapper__icon-asc{border-bottom-color:var(--ibiz-color-primary)}.ibiz-sort-bar-item--desc .ibiz-sort-bar-icon-wrapper__icon-desc{border-top-color:var(--ibiz-color-primary)}.ibiz-sort-bar-icon-wrapper{position:relative;display:inline-block;width:10px;height:14px;margin-left:var(--ibiz-spacing-tight);vertical-align:middle}.ibiz-sort-bar-icon-wrapper__icon-asc{position:absolute;top:-5px;left:0;width:0;height:0;border:solid 5px transparent;border-bottom-color:var(--ibiz-sort-bar-icon-color)}.ibiz-sort-bar-icon-wrapper__icon-desc{position:absolute;bottom:-3px;left:0;width:0;height:0;border:solid 5px transparent;border-top-color:var(--ibiz-sort-bar-icon-color)}

package/es/common/sort-bar/sort-bar.d.ts

@@ -0,0 +1,46 @@
+import { ISortItem } from '@ibiz-template/runtime';
+import './sort-bar.scss';
+export declare const IBizSortBar: import("vue").DefineComponent<{
+    sortItems: {
+        type: {
+            (arrayLength: number): ISortItem[];
+            (...items: ISortItem[]): ISortItem[];
+            new (arrayLength: number): ISortItem[];
+            new (...items: ISortItem[]): ISortItem[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    onItemClick: (item: ISortItem) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    SortChange: (_item: ISortItem, _order: 'asc' | 'desc' | undefined) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    sortItems: {
+        type: {
+            (arrayLength: number): ISortItem[];
+            (...items: ISortItem[]): ISortItem[];
+            new (arrayLength: number): ISortItem[];
+            new (...items: ISortItem[]): ISortItem[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+}>> & {
+    onSortChange?: ((...args: never) => any) | undefined;
+}, {}, {}>;

package/es/common/sort-bar/sort-bar.mjs

@@ -0,0 +1,57 @@
+import { createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './sort-bar.css';
+
+"use strict";
+const IBizSortBar = /* @__PURE__ */ defineComponent({
+  name: "IBizSortBar",
+  props: {
+    sortItems: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: {
+    SortChange: (_item, _order) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("sort-bar");
+    const onItemClick = (item) => {
+      if (item.order === "asc") {
+        item.order = "desc";
+      } else if (item.order === "desc") {
+        item.order = void 0;
+      } else {
+        props.sortItems.forEach((x) => {
+          x.order = void 0;
+        });
+        item.order = "asc";
+      }
+      emit("SortChange", item, item.order);
+    };
+    return {
+      ns,
+      onItemClick
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.sortItems.length > 0 && this.sortItems.map((item) => {
+      return createVNode("div", {
+        "onClick": () => this.onItemClick(item),
+        "class": [this.ns.b("item"), item.order === "asc" ? this.ns.bm("item", "asc") : "", item.order === "desc" ? this.ns.bm("item", "desc") : ""]
+      }, [item.caption, createVNode("div", {
+        "class": this.ns.b("icon-wrapper")
+      }, [createVNode("i", {
+        "class": this.ns.be("icon-wrapper", "icon-asc")
+      }, null), createVNode("i", {
+        "class": this.ns.be("icon-wrapper", "icon-desc")
+      }, null)])]);
+    })]);
+  }
+});
+
+export { IBizSortBar };

package/es/control/data-view/data-view.css

@@ -1 +1 @@
-.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;width:100%;height:100%}.ibiz-control-dataview-scroll{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start;width:100%;height:100%;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;color:var(--ibiz-control-dataview-text-color);cursor:pointer}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}.ibiz-control-dataview-group-content__item-content{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-base-tight);padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color)}
+.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;height:100%}.ibiz-control-dataview__content{flex-grow:1;height:100%}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview-scroll{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;color:var(--ibiz-control-dataview-text-color);cursor:pointer}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}.ibiz-control-dataview-group-content__item-content{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-base-tight);padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color)}

package/es/control/data-view/data-view.d.ts

@@ -41,8 +41,12 @@ export declare const DataViewControl: import("vue").DefineComponent<{
 }, {
     c: DataViewControlController<IDEDataView, import("@ibiz-template/runtime").IDataViewControlState, import("@ibiz-template/runtime").IMDControlEvent>;
     ns: import("@ibiz-template/core").Namespace;
-    renderLoadMore: () => VNode;
+    classNames: import("vue").ComputedRef<string[]>;
+    renderHasData: () => VNode;
     renderNoData: () => VNode | undefined;
+    onPageChange: (page: number) => void;
+    onPageRefresh: () => void;
+    onPageSizeChange: (size: number) => 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<IDEDataView>;

package/es/control/data-view/data-view.mjs

@@ -1,9 +1,14 @@
-import { computed, resolveComponent, createVNode, createTextVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { isVNode, computed, resolveComponent, createVNode, createTextVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { DataViewControlController } from '@ibiz-template/runtime';
 import './data-view.css';
+import '../../util/index.mjs';
+import { usePagination } from '../../util/pagination/use-pagination.mjs';
 
 "use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 const DataViewControl = /* @__PURE__ */ defineComponent({
   name: "IBizDataViewControl",
   props: {
@@ -46,9 +51,20 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
   setup(props) {
     const c = useControlController((...args) => new DataViewControlController(...args));
     const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const classNames = computed(() => {
+      return [ns.is("enable-page", c.model.enablePagingBar === true)];
+    });
     const isLodeMoreDisabled = computed(() => {
+      if (c.model.enablePagingBar === true) {
+        return true;
+      }
       return c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size;
     });
+    const {
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange
+    } = usePagination(c);
     const onRowClick = (item, event) => {
       event.stopPropagation();
       return c.onRowClick(item);
@@ -87,7 +103,7 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
         "class": ns.be("item-content", "top")
       }, [createVNode("div", {
         "class": ns.bem("item-content", "top", "title")
-      }, [item.srfmajortext]), createVNode("div", {
+      }, [item.srfmajortext || "---"]), createVNode("div", {
         "class": ns.bem("item-content", "top", "description")
       }, [item.content])]), c.getOptItemModel() ? createVNode("div", {
         "class": ns.be("item-content", "bottom")
@@ -160,9 +176,9 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
         }, [renderCard(item)]);
       });
     };
-    const renderLoadMore = () => {
+    const renderHasData = () => {
       return withDirectives(createVNode("div", {
-        "class": ns.b("scroll"),
+        "class": [ns.b("scroll"), ns.e("content")],
         "infinite-scroll-distance": 10,
         "infinite-scroll-disabled": isLodeMoreDisabled.value
       }, [renderDataViewContent()]), [[resolveDirective("infinite-scroll"), () => c.loadMore()]]);
@@ -175,6 +191,7 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
         return;
       }
       return createVNode(resolveComponent("iBizNoData"), {
+        "class": ns.e("content"),
         "text": c.model.emptyText,
         "emptyTextLanguageRes": c.model.emptyTextLanguageRes
       }, null);
@@ -182,8 +199,12 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
     return {
       c,
       ns,
-      renderLoadMore,
-      renderNoData
+      classNames,
+      renderHasData,
+      renderNoData,
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange
     };
   },
   render() {
@@ -191,10 +212,32 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
       items,
       isCreated
     } = this.c.state;
+    const {
+      enablePagingBar
+    } = this.c.model;
+    let content = null;
+    if (isCreated) {
+      content = [this.c.state.noSort ? null : createVNode(resolveComponent("iBizSortBar"), {
+        "onSortChange": (item, order) => {
+          this.c.setSort(item.key, order);
+          this.c.load();
+        },
+        "sortItems": this.c.state.sortItems
+      }, null), items.length > 0 ? this.renderHasData() : this.renderNoData(), enablePagingBar ? createVNode(resolveComponent("iBizPagination"), {
+        "class": this.ns.e("pagination"),
+        "total": this.c.state.total,
+        "curPage": this.c.state.curPage,
+        "size": this.c.state.size,
+        "onChange": this.onPageChange,
+        "onPageSizeChange": this.onPageSizeChange,
+        "onPageRefresh": this.onPageRefresh
+      }, null) : null];
+    }
     return createVNode(resolveComponent("iBizControlBase"), {
+      "class": [this.ns.is("enable-page", !!enablePagingBar)],
       "controller": this.c
-    }, {
-      default: () => [isCreated && (items.length > 0 ? this.renderLoadMore() : this.renderNoData())]
+    }, _isSlot(content) ? content : {
+      default: () => [content]
     });
   }
 });

package/es/control/data-view/index.d.ts

@@ -30,12 +30,16 @@ export declare const IBizDataViewControl: import("@ibiz-template/vue3-util").Typ
 }, {
     c: import("@ibiz-template/runtime").DataViewControlController<import("@ibiz/model-core").IDEDataView, import("@ibiz-template/runtime").IDataViewControlState, import("@ibiz-template/runtime").IMDControlEvent>;
     ns: import("@ibiz-template/core").Namespace;
-    renderLoadMore: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    classNames: import("vue").ComputedRef<string[]>;
+    renderHasData: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>;
     renderNoData: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | undefined;
+    onPageChange: (page: number) => void;
+    onPageRefresh: () => void;
+    onPageSizeChange: (size: number) => 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").IDEDataView>;

package/es/control/drtab/drtab.controller.mjs

@@ -1,4 +1,5 @@
 import { ControlController, Srfuf, calcNavParams } from '@ibiz-template/runtime';
+import { getNestedRoutePath } from '@ibiz-template/vue3-util';
 
 "use strict";
 var __defProp = Object.defineProperty;
@@ -84,7 +85,6 @@ class DRTabController extends ControlController {
    */
   async onCreated() {
     await super.onCreated();
-    this.initDRTabPages();
   }
   /**
    * 加载完成
@@ -105,6 +105,7 @@ class DRTabController extends ControlController {
         this.handleFormChange();
       });
     }
+    this.initDRTabPages();
   }
   /**
    * 处理表单数据变更
@@ -154,7 +155,7 @@ class DRTabController extends ControlController {
       hidden: !!hideEditItem,
       disabled: false,
       sysImage: editItemSysImage,
-      fullPath: this.router.currentRoute.value.fullPath
+      fullPath: this.routeDepth ? getNestedRoutePath(this.router.currentRoute.value, this.routeDepth) : ""
     });
     dedrtabPages == null ? void 0 : dedrtabPages.forEach((item) => {
       let itemCaption = item.caption;
@@ -170,7 +171,12 @@ class DRTabController extends ControlController {
       });
     });
     this.state.drTabPages = drTabPages;
-    this.state.activeName = drTabPages[0].tag;
+    if (this.view.state.srfnav) {
+      this.state.activeName = this.view.state.srfnav;
+      this.handleTabChange();
+    } else {
+      this.state.activeName = drTabPages[0].tag;
+    }
   }
   /**
    * 处理分页改变
@@ -241,7 +247,9 @@ class DRTabController extends ControlController {
       data: this.getData()[0]
     };
     const { resultContext, resultParams } = calcNavParams(model, originParams);
-    const context = Object.assign(this.context.clone(), resultContext);
+    const context = Object.assign(this.context.clone(), resultContext, {
+      currentSrfNav: drTabPages.id
+    });
     const params = { ...this.params, ...resultParams };
     return { context, params };
   }

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

@@ -1 +1 @@
-.ibiz-form-button{--ibiz-form-button-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-form-button-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-form-button-icon-max-height:var(--ibiz-width-icon-medium);overflow:hidden;padding:var(--ibiz-spacing-tight)}.ibiz-form-button .el-button{width:100%}.ibiz-form-button .el-button i,.ibiz-form-button .el-button img{display:inline-block;max-width:var(--ibiz-form-button-icon-max-width);max-height:var(--ibiz-form-button-icon-max-height);margin:var(--ibiz-form-button-icon-margin)}
+.ibiz-form-button{--ibiz-form-button-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-form-button-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-form-button-icon-max-height:var(--ibiz-width-icon-medium);width:100%;height:100%;padding:var(--ibiz-spacing-tight);overflow:hidden}.ibiz-form-button .el-button{width:100%;height:100%}.ibiz-form-button .el-button i,.ibiz-form-button .el-button img{display:inline-block;max-width:var(--ibiz-form-button-icon-max-width);max-height:var(--ibiz-form-button-icon-max-height);margin:var(--ibiz-form-button-icon-margin)}

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

@@ -1 +1 @@
-.ibiz-form-group{--ibiz-form-group-bg-color:transparent;--ibiz-form-group-footer-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-form-group-show-more-color:var(--ibiz-color-primary);--ibiz-form-group-footer-height:35px;--ibiz-form-group-header-bg-color:transparent;--ibiz-form-group-header-padding:var(--ibiz-spacing-base-tight);--ibiz-form-group-header-border-color:var(--ibiz-color-border);--ibiz-form-group-header-height:49px;--ibiz-form-group-caption-text-color:var(--ibiz-color-text-0);--ibiz-form-group-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-form-group-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-form-group-content-bg-color:transparent;--ibiz-form-group-content-padding:var(--ibiz-spacing-tight)}.ibiz-form-group{height:100%;background-color:var(--ibiz-form-group-bg-color);border-radius:var(--ibiz-border-radius-base)}.ibiz-form-group__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-form-group-caption-font-size);font-weight:var(--ibiz-form-group-caption-font-weight);color:var(--ibiz-form-group-caption-text-color)}.ibiz-form-group__toolbar{text-align:right}.ibiz-form-group-collapse>.ibiz-form-group-content{display:block}.ibiz-form-group-collapse.is-collapse>.ibiz-form-group-content{display:none}.ibiz-form-group-header{display:flex;height:var(--ibiz-form-group-header-height);padding:var(--ibiz-form-group-header-padding);margin:var(--ibiz-form-group-header-margin);border-bottom:1px solid var(--ibiz-form-group-header-border-color)}.ibiz-form-group-header__left,.ibiz-form-group-header__right{display:inline-block;width:50%}.ibiz-form-group-header__right{text-align:right}.ibiz-form-group-content{width:100%;height:100%}.ibiz-form-group-content__row{width:100%;height:100%}.ibiz-form-group--show-header>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-header-height));padding:var(--ibiz-form-group-content-padding);background-color:var(--ibiz-form-group-content-bg-color)}.ibiz-form-group--show-more>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-footer-height))}.ibiz-form-group--show-header.ibiz-form-group--show-more>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-header-height) - var(--ibiz-form-group-footer-height))}.ibiz-form-group-footer{height:var(--ibiz-form-group-footer-height);padding:var(--ibiz-form-group-footer-padding)}.ibiz-form-group-footer__show-more-button{display:inline-block;color:var(--ibiz-form-group-show-more-color);cursor:pointer}
+.ibiz-form-group{--ibiz-form-group-bg-color:transparent;--ibiz-form-group-footer-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-form-group-show-more-color:var(--ibiz-color-primary);--ibiz-form-group-footer-height:35px;--ibiz-form-group-header-bg-color:transparent;--ibiz-form-group-header-padding:var(--ibiz-spacing-base-tight);--ibiz-form-group-header-border-color:var(--ibiz-color-border);--ibiz-form-group-header-height:49px;--ibiz-form-group-caption-text-color:var(--ibiz-color-text-0);--ibiz-form-group-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-form-group-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-form-group-content-bg-color:transparent;--ibiz-form-group-content-padding:var(--ibiz-spacing-tight)}.ibiz-form-group{height:100%;background-color:var(--ibiz-form-group-bg-color);border-radius:var(--ibiz-border-radius-base)}.ibiz-form-group__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-form-group-caption-font-size);font-weight:var(--ibiz-form-group-caption-font-weight);color:var(--ibiz-form-group-caption-text-color)}.ibiz-form-group__toolbar{text-align:right}.ibiz-form-group-collapse>.ibiz-form-group-content{display:block}.ibiz-form-group-collapse.is-collapse>.ibiz-form-group-content{display:none}.ibiz-form-group-header{display:flex;height:var(--ibiz-form-group-header-height);padding:var(--ibiz-form-group-header-padding);margin:var(--ibiz-form-group-header-margin);border-bottom:1px solid var(--ibiz-form-group-header-border-color)}.ibiz-form-group-header__left,.ibiz-form-group-header__right{display:inline-block;width:50%}.ibiz-form-group-header__right{text-align:right;display:flex;align-items:center;justify-content:flex-end}.ibiz-form-group-content{width:100%;height:100%}.ibiz-form-group-content__row{width:100%;height:100%}.ibiz-form-group--show-header>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-header-height));padding:var(--ibiz-form-group-content-padding);background-color:var(--ibiz-form-group-content-bg-color)}.ibiz-form-group--show-more>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-footer-height))}.ibiz-form-group--show-header.ibiz-form-group--show-more>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-header-height) - var(--ibiz-form-group-footer-height))}.ibiz-form-group-footer{height:var(--ibiz-form-group-footer-height);padding:var(--ibiz-form-group-footer-padding)}.ibiz-form-group-footer__show-more-button{display:inline-block;color:var(--ibiz-form-group-show-more-color);cursor:pointer}

package/es/control/form/form-detail/form-item/form-item-container/form-item-container.css

@@ -1 +1 @@
-.ibiz-form-item-container{--ibiz-form-item-container-label-width:130px;--ibiz-form-item-container-line-height:var(--ibiz-height-control-default);--ibiz-form-item-container-require-mark-color:var(--ibiz-color-danger);--ibiz-form-item-container-label-left-padding:6px var(--ibiz-spacing-base-tight) 6px 0;--ibiz-form-item-container-label-right-padding:6px 0 6px var(--ibiz-spacing-base-tight);--ibiz-form-item-container-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-item-container-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-container-label-color:var(--ibiz-color-text-1);--ibiz-form-item-container-error-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-container-error-color:var(--ibiz-color-danger);width:100%;height:100%;padding:var(--ibiz-form-item-container-padding)}.ibiz-form-item-container__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;font-size:var(--ibiz-form-item-container-font-size);color:var(--ibiz-form-item-container-label-color)}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-container-label-width)}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-left-padding);text-align:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-right-padding);text-align:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label::before{display:inline-block;margin-right:4px;font-family:SimSun;line-height:1;color:var(--ibiz-form-item-container-require-mark-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;top:100%;width:100%;font-size:var(--ibiz-form-item-container-error-font-size);line-height:calc(var(--ibiz-form-item-container-error-font-size) + 2px);color:var(--ibiz-form-item-container-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-container-error-color) inset}
+.ibiz-form-item-container{--ibiz-form-item-container-label-width:130px;--ibiz-form-item-container-line-height:var(--ibiz-height-control-default);--ibiz-form-item-container-require-mark-color:var(--ibiz-color-danger);--ibiz-form-item-container-label-left-padding:6px var(--ibiz-spacing-base-tight) 6px 0;--ibiz-form-item-container-label-right-padding:6px 0 6px var(--ibiz-spacing-base-tight);--ibiz-form-item-container-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-item-container-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-container-label-color:var(--ibiz-color-text-1);--ibiz-form-item-container-error-font-size:var(--ibiz-font-size-small);--ibiz-form-item-container-error-color:var(--ibiz-color-danger);width:100%;height:100%;padding:var(--ibiz-form-item-container-padding)}.ibiz-form-item-container__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;font-size:var(--ibiz-form-item-container-font-size);color:var(--ibiz-form-item-container-label-color)}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-container-label-width)}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-left-padding);text-align:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-right-padding);text-align:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label::before{display:inline-block;margin-right:4px;font-family:SimSun;line-height:1;color:var(--ibiz-form-item-container-require-mark-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;top:100%;width:100%;font-size:var(--ibiz-form-item-container-error-font-size);line-height:calc(var(--ibiz-form-item-container-error-font-size) + 2px);color:var(--ibiz-form-item-container-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-container-error-color) inset}

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

@@ -1 +1 @@
-.ibiz-form-mdctrl{--ibiz-form-mdctrl-gap:var(--ibiz-spacing-tight);--ibiz-form-mdctrl-btn-width:60px}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content{display:flex;margin-top:var(--ibiz-spacing-tight)}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-container{width:100%}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-control{width:calc(100% - var(--ibiz-form-mdctrl-btn-width) - var(--ibiz-form-mdctrl-gap))}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-btn{width:var(--ibiz-form-mdctrl-btn-width);margin-left:var(--ibiz-form-mdctrl-gap);cursor:pointer;display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{display:flex;align-items:center;justify-content:space-between}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main{position:relative}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main>.ibiz-form-mdctrl-form-content:nth-child(2) .ibiz-form-mdctrl-btn{position:relative;top:40px;height:-moz-fit-content;height:fit-content}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{position:absolute;top:0;right:0}
+.ibiz-form-mdctrl{--ibiz-form-mdctrl-gap:var(--ibiz-spacing-tight);--ibiz-form-mdctrl-btn-width:60px}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content{display:flex;margin-top:var(--ibiz-spacing-tight)}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-container{width:100%}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-control{width:calc(100% - var(--ibiz-form-mdctrl-btn-width) - var(--ibiz-form-mdctrl-gap))}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-btn{width:var(--ibiz-form-mdctrl-btn-width);margin-left:var(--ibiz-form-mdctrl-gap);cursor:pointer;display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{display:flex;align-items:center;justify-content:space-between}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main{position:relative}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main>.ibiz-form-mdctrl-form-content:nth-child(2) .ibiz-form-mdctrl-btn{position:relative;top:40px;height:-moz-fit-content;height:fit-content}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{position:absolute;top:0;right:0;z-index:2}

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: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 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 .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-color-text-2);--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 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 .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)}

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

@@ -1,9 +1,11 @@
 import { resolveComponent, mergeProps, h, createVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { GridController } from '@ibiz-template/runtime';
-import { useITableEvent, useAppGridPagination, useAppGridBase } from './grid-control.util.mjs';
+import { useITableEvent, useAppGridBase } from './grid-control.util.mjs';
 import './grid.css';
 import { useRowEditPopover } from '../row-edit-popover/use-row-edit-popover.mjs';
+import '../../../util/index.mjs';
+import { usePagination } from '../../../util/pagination/use-pagination.mjs';
 
 "use strict";
 function renderColumn(c, model, renderColumns, index) {
@@ -141,7 +143,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
       onPageChange,
       onPageRefresh,
       onPageSizeChange
-    } = useAppGridPagination(c);
+    } = usePagination(c);
     const renderNoData = () => {
       const {
         isLoaded
@@ -224,7 +226,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
         append: () => {
           return this.renderPopover();
         }
-      }), enablePagingBar && createVNode(resolveComponent("iBizGridPagination"), {
+      }), enablePagingBar && createVNode(resolveComponent("iBizPagination"), {
         "total": state.total,
         "curPage": state.curPage,
         "size": state.size,

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

@@ -1,7 +1,6 @@
 import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import '../grid-column/index.mjs';
-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';
@@ -14,7 +13,6 @@ 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);
   v.component(IBizRowEditPopover.name, IBizRowEditPopover);
   v.use(IBizGridFieldColumn);
   v.use(IBizGridUAColumn);

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

@@ -1,3 +1,2 @@
 export * from './grid/index';
 export * from './grid-column';
-export * from './grid-pagination/grid-pagination';

package/es/control/grid/index.mjs

@@ -1,6 +1,5 @@
 export { IBizGridControl } from './grid/index.mjs';
 import './grid-column/index.mjs';
-export { IBizGridPagination } from './grid-pagination/grid-pagination.mjs';
 export { GridProvider } from './grid/grid.provider.mjs';
 export { useAppGridBase, useAppGridPagination, useITableEvent } from './grid/grid-control.util.mjs';
 export { GridFieldColumnProvider } from './grid-column/grid-field-column/grid-field-column.provider.mjs';

package/es/control/index.mjs

@@ -35,7 +35,6 @@ export { GridFieldEditColumnProvider } from './grid/grid-column/grid-field-edit-
 export { IBizGridFieldEditColumn } from './grid/grid-column/grid-field-edit-column/index.mjs';
 export { GridGroupColumnProvider } from './grid/grid-column/grid-group-column/grid-group-column.provider.mjs';
 export { IBizGridGroupColumn } from './grid/grid-column/grid-group-column/index.mjs';
-export { IBizGridPagination } from './grid/grid-pagination/grid-pagination.mjs';
 export { ListProvider } from './list/list.provider.mjs';
 export { SearchFormProvider } from './form/search-form/search-form.provider.mjs';
 export { IBizSearchFormControl } from './form/search-form/index.mjs';

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

@@ -43,6 +43,9 @@ export declare const IBizListControl: import("@ibiz-template/vue3-util").TypeWit
     renderBatchToolBar: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | undefined;
+    onPageChange: (page: number) => void;
+    onPageRefresh: () => void;
+    onPageSizeChange: (size: number) => 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").IDEList>;

package/es/control/list/list.d.ts

@@ -55,6 +55,9 @@ export declare const ListControl: import("vue").DefineComponent<{
     renderListContent: () => VNode;
     renderNoData: () => VNode | undefined;
     renderBatchToolBar: () => VNode | undefined;
+    onPageChange: (page: number) => void;
+    onPageRefresh: () => void;
+    onPageSizeChange: (size: number) => 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<IDEList>;