@ibiz-template/vue3-components 0.2.0 → 0.2.2

package/es/control/tree/tree.d.ts

@@ -55,67 +55,39 @@ export declare const TreeControl: import("vue").DefineComponent<{
     treeRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
-        $props: {
-            props?: import("element-plus/es/components/tree/src/tree.type").TreeOptionProps | undefined;
-            data?: unknown[] | undefined;
-            checkStrictly?: boolean | undefined;
-            lazy?: boolean | undefined;
-            accordion?: boolean | undefined;
-            draggable?: boolean | undefined;
-            defaultExpandAll?: boolean | undefined;
-            indent?: number | undefined;
-            renderAfterExpand?: boolean | undefined;
-            showCheckbox?: boolean | undefined;
-            expandOnClickNode?: boolean | undefined;
-            checkOnClickNode?: boolean | undefined;
-            checkDescendants?: boolean | undefined;
-            autoExpandParent?: boolean | undefined;
-            highlightCurrent?: boolean | undefined;
-            style?: unknown;
-            class?: unknown;
+        $props: Partial<{
+            props: import("element-plus/es/components/tree/src/tree.type").TreeOptionProps;
+            data: unknown[];
+            checkStrictly: boolean;
+            lazy: boolean;
+            accordion: boolean;
+            draggable: boolean;
+            defaultExpandAll: boolean;
+            indent: number;
+            renderAfterExpand: boolean;
+            showCheckbox: boolean;
+            expandOnClickNode: boolean;
+            checkOnClickNode: boolean;
+            checkDescendants: boolean;
+            autoExpandParent: boolean;
+            highlightCurrent: boolean;
+        }> & Omit<{
+            readonly props: import("element-plus/es/components/tree/src/tree.type").TreeOptionProps;
+            readonly data: unknown[];
+            readonly renderAfterExpand: boolean;
+            readonly checkStrictly: boolean;
+            readonly defaultExpandAll: boolean;
+            readonly expandOnClickNode: boolean;
+            readonly checkOnClickNode: boolean;
+            readonly checkDescendants: boolean;
+            readonly autoExpandParent: boolean;
+            readonly showCheckbox: boolean;
+            readonly draggable: boolean;
+            readonly lazy: boolean;
+            readonly highlightCurrent: boolean;
+            readonly accordion: boolean;
+            readonly indent: number;
             readonly icon?: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
-            key?: string | number | symbol | undefined;
-            ref?: import("vue").VNodeRef | undefined;
-            ref_for?: boolean | undefined;
-            ref_key?: string | undefined;
-            onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeMounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeBeforeUpdate?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeUpdated?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeBeforeUnmount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeUnmounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
             readonly emptyText?: string | undefined;
             readonly load?: import("element-plus/es/components/tree/src/tree.type").LoadFunction | undefined;
             readonly nodeKey?: string | undefined;
@@ -126,9 +98,88 @@ export declare const TreeControl: import("vue").DefineComponent<{
             readonly allowDrag?: Function | undefined;
             readonly allowDrop?: Function | undefined;
             readonly filterNodeMethod?: import("element-plus/es/components/tree/src/tree.type").FilterNodeMethodFunction | undefined;
+            "onCurrent-change"?: ((...args: any[]) => any) | undefined;
+            "onNode-expand"?: ((...args: any[]) => any) | undefined;
             onCheck?: ((...args: any[]) => any) | undefined;
+            "onCheck-change"?: ((...args: any[]) => any) | undefined;
+            "onNode-click"?: ((...args: any[]) => any) | undefined;
+            "onNode-contextmenu"?: ((...args: any[]) => any) | undefined;
+            "onNode-collapse"?: ((...args: any[]) => any) | undefined;
+            "onNode-drag-start"?: ((...args: any[]) => any) | undefined;
+            "onNode-drag-end"?: ((...args: any[]) => any) | undefined;
+            "onNode-drop"?: ((...args: any[]) => any) | undefined;
+            "onNode-drag-leave"?: ((...args: any[]) => any) | undefined;
+            "onNode-drag-enter"?: ((...args: any[]) => any) | undefined;
+            "onNode-drag-over"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+            data: {
+                type: ArrayConstructor;
+                default: () => never[];
+            };
+            emptyText: {
+                type: StringConstructor;
+            };
+            renderAfterExpand: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            nodeKey: StringConstructor;
+            checkStrictly: BooleanConstructor;
+            defaultExpandAll: BooleanConstructor;
+            expandOnClickNode: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            checkOnClickNode: BooleanConstructor;
+            checkDescendants: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            autoExpandParent: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            defaultCheckedKeys: PropType<import("element-plus/es/components/tree/src/tree.type").TreeKey[]>;
+            defaultExpandedKeys: PropType<import("element-plus/es/components/tree/src/tree.type").TreeKey[]>;
+            currentNodeKey: PropType<string | number>;
+            renderContent: FunctionConstructor;
+            showCheckbox: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            draggable: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            allowDrag: FunctionConstructor;
+            allowDrop: FunctionConstructor;
+            props: {
+                type: PropType<import("element-plus/es/components/tree/src/tree.type").TreeOptionProps>;
+                default: () => {
+                    children: string;
+                    label: string;
+                    disabled: string;
+                };
+            };
+            lazy: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            highlightCurrent: BooleanConstructor;
+            load: PropType<import("element-plus/es/components/tree/src/tree.type").LoadFunction>;
+            filterNodeMethod: PropType<import("element-plus/es/components/tree/src/tree.type").FilterNodeMethodFunction>;
+            accordion: BooleanConstructor;
+            indent: {
+                type: NumberConstructor;
+                default: number;
+            };
+            icon: {
+                type: PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+            };
+        }>> & {
             "onCurrent-change"?: ((...args: any[]) => any) | undefined;
             "onNode-expand"?: ((...args: any[]) => any) | undefined;
+            onCheck?: ((...args: any[]) => any) | undefined;
             "onCheck-change"?: ((...args: any[]) => any) | undefined;
             "onNode-click"?: ((...args: any[]) => any) | undefined;
             "onNode-contextmenu"?: ((...args: any[]) => any) | undefined;
@@ -139,7 +190,7 @@ export declare const TreeControl: import("vue").DefineComponent<{
             "onNode-drag-leave"?: ((...args: any[]) => any) | undefined;
             "onNode-drag-enter"?: ((...args: any[]) => any) | undefined;
             "onNode-drag-over"?: ((...args: any[]) => any) | undefined;
-        };
+        }, "props" | "data" | "renderAfterExpand" | "checkStrictly" | "defaultExpandAll" | "expandOnClickNode" | "checkOnClickNode" | "checkDescendants" | "autoExpandParent" | "showCheckbox" | "draggable" | "lazy" | "highlightCurrent" | "accordion" | "indent">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -540,7 +591,12 @@ export declare const TreeControl: import("vue").DefineComponent<{
         };
         $forceUpdate: () => void;
         $nextTick: typeof nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle; /**
+         * 绘制上下文菜单触发图标
+         * @param nodeModel
+         * @param nodeData
+         * @returns
+         */
     } & Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: ArrayConstructor;

package/es/devtool/index.mjs

@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import { QXEvent } from 'qx-util';
 import ElementPlus from 'element-plus';
-import zhCn from '../node_modules/.pnpm/element-plus@2.4.1_vue@3.3.6/node_modules/element-plus/dist/locale/zh-cn.mjs';
+import zhCn from '../node_modules/.pnpm/element-plus@2.4.1_vue@3.3.7/node_modules/element-plus/dist/locale/zh-cn.mjs';
 import { DevtoolAction } from './devtool-action.mjs';
 
 "use strict";

package/es/index.d.ts

@@ -1,6 +1,6 @@
 import { App } from 'vue';
-export * from './control';
 export * from './common';
+export * from './control';
 export * from './panel-component';
 export * from './editor';
 export * from './view';

package/es/index.mjs

@@ -43,6 +43,20 @@ import { IBizKanbanControl } from './control/kanban/index.mjs';
 import { IBizTreeGridExControl } from './control/tree-grid-ex/index.mjs';
 import { IBizMEditViewPanelControl } from './control/medit-view-panel/index.mjs';
 import { IBizChartExpBarControl } from './control/exp-bar/chart-exp-bar/index.mjs';
+export { IBizIcon } from './common/icon/icon.mjs';
+export { IBizRouterView } from './common/router-view/router-view.mjs';
+export { IBizCol } from './common/col/col.mjs';
+export { IBizRow } from './common/row/row.mjs';
+export { IBizActionToolbar } from './common/action-toolbar/action-toolbar.mjs';
+export { IBizControlBase } from './common/control-base/control-base.mjs';
+export { IBizControlShell } from './common/control-shell/control-shell.mjs';
+export { IBizViewShell } from './common/view-shell/view-shell.mjs';
+export { IBizRawItem } from './common/rawitem/rawitem.mjs';
+export { IBizCodeList } from './common/code-list/code-list.mjs';
+export { ControlLoadingPlaceholder } from './common/control-loading-placeholder/control-loading-placeholder.mjs';
+export { IBizSplit } from './common/split/split.mjs';
+export { IBizSplitTrigger } from './common/split-trigger/split-trigger.mjs';
+export { IBizSortBar } from './common/sort-bar/sort-bar.mjs';
 export { AppMenuProvider } from './control/app-menu/app-menu.provider.mjs';
 export { AppMenuIconViewProvider } from './control/app-menu-icon-view/app-menu-icon-view.provider.mjs';
 export { GridProvider } from './control/grid/grid/grid.provider.mjs';
@@ -55,7 +69,6 @@ export { GridFieldEditColumnProvider } from './control/grid/grid-column/grid-fie
 export { IBizGridFieldEditColumn } from './control/grid/grid-column/grid-field-edit-column/index.mjs';
 export { GridGroupColumnProvider } from './control/grid/grid-column/grid-group-column/grid-group-column.provider.mjs';
 export { IBizGridGroupColumn } from './control/grid/grid-column/grid-group-column/index.mjs';
-export { IBizGridPagination } from './control/grid/grid-pagination/grid-pagination.mjs';
 export { ListProvider } from './control/list/list.provider.mjs';
 export { SearchFormProvider } from './control/form/search-form/search-form.provider.mjs';
 export { FormGroupPanelProvider } from './control/form/form-detail/form-group-panel/form-group-panel.provider.mjs';
@@ -110,19 +123,6 @@ export { KanbanProvider } from './control/kanban/kanban.provider.mjs';
 export { TreeGridExProvider } from './control/tree-grid-ex/tree-grid-ex.provider.mjs';
 export { TreeGridProvider } from './control/tree-grid/tree-grid.provider.mjs';
 export { MEditViewPanelProvider } from './control/medit-view-panel/medit-view-panel.provider.mjs';
-export { IBizIcon } from './common/icon/icon.mjs';
-export { IBizRouterView } from './common/router-view/router-view.mjs';
-export { IBizCol } from './common/col/col.mjs';
-export { IBizRow } from './common/row/row.mjs';
-export { IBizActionToolbar } from './common/action-toolbar/action-toolbar.mjs';
-export { IBizControlBase } from './common/control-base/control-base.mjs';
-export { IBizControlShell } from './common/control-shell/control-shell.mjs';
-export { IBizViewShell } from './common/view-shell/view-shell.mjs';
-export { IBizRawItem } from './common/rawitem/rawitem.mjs';
-export { IBizCodeList } from './common/code-list/code-list.mjs';
-export { ControlLoadingPlaceholder } from './common/control-loading-placeholder/control-loading-placeholder.mjs';
-export { IBizSplit } from './common/split/split.mjs';
-export { IBizSplitTrigger } from './common/split-trigger/split-trigger.mjs';
 export { PanelContainerProvider } from './panel-component/panel-container/panel-container.provider.mjs';
 export { PanelContainerState } from './panel-component/panel-container/panel-container.state.mjs';
 export { PanelContainerController } from './panel-component/panel-container/panel-container.controller.mjs';
@@ -193,6 +193,7 @@ export { OverlayContainer } from './util/overlay-container/overlay-container.mjs
 export { OverlayController } from './util/overlay-controller/overlay-controller.mjs';
 export { OverlayPopoverContainer } from './util/overlay-popover-container/overlay-popover-container.mjs';
 export { routerCallback } from './util/router-callback/router-callback.mjs';
+export { usePagination } from './util/pagination/use-pagination.mjs';
 export { useAppStore } from './util/store/app-store/app-store.mjs';
 export { useUIStore } from './util/store/ui-store/ui-store.mjs';
 export { piniaInstance } from './util/store/index.mjs';

package/es/util/index.d.ts

@@ -9,3 +9,4 @@ export { OverlayController } from './overlay-controller/overlay-controller';
 export { OverlayPopoverContainer } from './overlay-popover-container/overlay-popover-container';
 export { routerCallback } from './router-callback/router-callback';
 export * from './store';
+export { usePagination } from './pagination/use-pagination';

package/es/util/index.mjs

@@ -9,6 +9,7 @@ export { OverlayController } from './overlay-controller/overlay-controller.mjs';
 export { OverlayPopoverContainer } from './overlay-popover-container/overlay-popover-container.mjs';
 export { routerCallback } from './router-callback/router-callback.mjs';
 export { piniaInstance } from './store/index.mjs';
+export { usePagination } from './pagination/use-pagination.mjs';
 export { useAppStore } from './store/app-store/app-store.mjs';
 export { useUIStore } from './store/ui-store/ui-store.mjs';
 

package/es/util/pagination/use-pagination.d.ts

@@ -0,0 +1,15 @@
+import { IMDControlController } from '@ibiz-template/runtime';
+/**
+ * 使用分页组件
+ *
+ * @author lxm
+ * @date 2022-09-06 17:09:09
+ * @export
+ * @param {GridController} c
+ * @returns {*}
+ */
+export declare function usePagination(c: IMDControlController): {
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    onPageRefresh: () => void;
+};

package/es/util/pagination/use-pagination.mjs

@@ -0,0 +1,25 @@
+"use strict";
+function usePagination(c) {
+  function onPageChange(page) {
+    if (!page || page === c.state.curPage) {
+      return;
+    }
+    c.state.curPage = page;
+    c.load();
+  }
+  function onPageSizeChange(size) {
+    if (!size || size === c.state.size) {
+      return;
+    }
+    c.state.size = size;
+    if (c.state.curPage === 1) {
+      c.load();
+    }
+  }
+  function onPageRefresh() {
+    c.load();
+  }
+  return { onPageChange, onPageSizeChange, onPageRefresh };
+}
+
+export { usePagination };

package/es/view-engine/index-view.engine.mjs

@@ -63,7 +63,6 @@ class IndexViewEngine extends ViewEngineBase {
       } else {
         leftContainer.state.layout.width = `${leftContainer.model.width}px`;
       }
-      console.log("leftContainer", leftContainer);
     }
   }
   /**

package/es/view-engine/pickup-data-view.engine.mjs

@@ -20,16 +20,12 @@ class PickupDataViewEngine extends DataViewEngine {
   }
   async onMounted() {
     await super.onMounted();
-    const { model } = this.view;
     this.xdataControl.evt.on("onSelectionChange", async (event) => {
       this.view.evt.emit("onSelectionChange", { ...event });
     });
     this.xdataControl.evt.on("onActive", async (event) => {
       this.view.evt.emit("onDataActive", { ...event });
     });
-    if (!this.view.state.noLoadDefault && model.loadDefault) {
-      this.load();
-    }
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
   async call(key, args) {

package/es/view-engine/pickup-grid-view.engine.mjs

@@ -25,16 +25,12 @@ class PickupGridViewEngine extends GridViewEngine {
   }
   async onMounted() {
     await super.onMounted();
-    const { model } = this.view;
     this.xdataControl.evt.on("onSelectionChange", async (event) => {
       this.view.evt.emit("onSelectionChange", { ...event });
     });
     this.xdataControl.evt.on("onActive", async (event) => {
       this.view.evt.emit("onDataActive", { ...event });
     });
-    if (!this.view.state.noLoadDefault && model.loadDefault) {
-      this.load();
-    }
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
   async call(key, args) {

package/lib/common/index.cjs

@@ -17,6 +17,8 @@ var split = require('./split/split.cjs');
 var splitTrigger = require('./split-trigger/split-trigger.cjs');
 var extendActionTimeline = require('./extend-action-timeline/extend-action-timeline.cjs');
 var viewMessage = require('./view-message/view-message.cjs');
+var pagination = require('./pagination/pagination.cjs');
+var sortBar = require('./sort-bar/sort-bar.cjs');
 var controlLoadingPlaceholder = require('./control-loading-placeholder/control-loading-placeholder.cjs');
 
 "use strict";
@@ -37,6 +39,8 @@ const IBizCommonComponents = {
     v.component(splitTrigger.IBizSplitTrigger.name, splitTrigger.IBizSplitTrigger);
     v.component(extendActionTimeline.IBizExtendActionTimeLine.name, extendActionTimeline.IBizExtendActionTimeLine);
     v.component(viewMessage.ViewMessage.name, viewMessage.ViewMessage);
+    v.component(pagination.IBizPagination.name, pagination.IBizPagination);
+    v.component(sortBar.IBizSortBar.name, sortBar.IBizSortBar);
   }
 };
 
@@ -52,6 +56,7 @@ exports.IBizRawItem = rawitem.IBizRawItem;
 exports.IBizCodeList = codeList.IBizCodeList;
 exports.IBizSplit = split.IBizSplit;
 exports.IBizSplitTrigger = splitTrigger.IBizSplitTrigger;
+exports.IBizSortBar = sortBar.IBizSortBar;
 exports.ControlLoadingPlaceholder = controlLoadingPlaceholder.ControlLoadingPlaceholder;
 exports.IBizCommonComponents = IBizCommonComponents;
 exports.default = IBizCommonComponents;

package/lib/{control/grid/grid-pagination/grid-pagination.cjs → common/pagination/pagination.cjs}

@@ -2,11 +2,11 @@
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
-require('./grid-pagination.css');
+require('./pagination.css');
 
 "use strict";
-const IBizGridPagination = /* @__PURE__ */ vue.defineComponent({
-  name: "IBizGridPagination",
+const IBizPagination = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizPagination",
   props: {
     total: {
       type: Number,
@@ -25,7 +25,7 @@ const IBizGridPagination = /* @__PURE__ */ vue.defineComponent({
   setup(props, {
     emit
   }) {
-    const ns = vue3Util.useNamespace("grid-page");
+    const ns = vue3Util.useNamespace("pagination");
     const start = vue.computed(() => {
       return (props.curPage - 1) * props.size + 1;
     });
@@ -83,4 +83,4 @@ const IBizGridPagination = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-exports.IBizGridPagination = IBizGridPagination;
+exports.IBizPagination = IBizPagination;

package/lib/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/lib/common/sort-bar/sort-bar.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./sort-bar.css');
+
+"use strict";
+const IBizSortBar = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizSortBar",
+  props: {
+    sortItems: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: {
+    SortChange: (_item, _order) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.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 vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [this.sortItems.length > 0 && this.sortItems.map((item) => {
+      return vue.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, vue.createVNode("div", {
+        "class": this.ns.b("icon-wrapper")
+      }, [vue.createVNode("i", {
+        "class": this.ns.be("icon-wrapper", "icon-asc")
+      }, null), vue.createVNode("i", {
+        "class": this.ns.be("icon-wrapper", "icon-desc")
+      }, null)])]);
+    })]);
+  }
+});
+
+exports.IBizSortBar = IBizSortBar;

package/lib/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/lib/control/data-view/data-view.cjs

@@ -4,8 +4,13 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 require('./data-view.css');
+require('../../util/index.cjs');
+var usePagination = require('../../util/pagination/use-pagination.cjs');
 
 "use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
 const DataViewControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDataViewControl",
   props: {
@@ -48,9 +53,20 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const c = vue3Util.useControlController((...args) => new runtime.DataViewControlController(...args));
     const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const classNames = vue.computed(() => {
+      return [ns.is("enable-page", c.model.enablePagingBar === true)];
+    });
     const isLodeMoreDisabled = vue.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.usePagination(c);
     const onRowClick = (item, event) => {
       event.stopPropagation();
       return c.onRowClick(item);
@@ -89,7 +105,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "class": ns.be("item-content", "top")
       }, [vue.createVNode("div", {
         "class": ns.bem("item-content", "top", "title")
-      }, [item.srfmajortext]), vue.createVNode("div", {
+      }, [item.srfmajortext || "---"]), vue.createVNode("div", {
         "class": ns.bem("item-content", "top", "description")
       }, [item.content])]), c.getOptItemModel() ? vue.createVNode("div", {
         "class": ns.be("item-content", "bottom")
@@ -162,9 +178,9 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         }, [renderCard(item)]);
       });
     };
-    const renderLoadMore = () => {
+    const renderHasData = () => {
       return vue.withDirectives(vue.createVNode("div", {
-        "class": ns.b("scroll"),
+        "class": [ns.b("scroll"), ns.e("content")],
         "infinite-scroll-distance": 10,
         "infinite-scroll-disabled": isLodeMoreDisabled.value
       }, [renderDataViewContent()]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
@@ -177,6 +193,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       return vue.createVNode(vue.resolveComponent("iBizNoData"), {
+        "class": ns.e("content"),
         "text": c.model.emptyText,
         "emptyTextLanguageRes": c.model.emptyTextLanguageRes
       }, null);
@@ -184,8 +201,12 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
-      renderLoadMore,
-      renderNoData
+      classNames,
+      renderHasData,
+      renderNoData,
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange
     };
   },
   render() {
@@ -193,10 +214,32 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       items,
       isCreated
     } = this.c.state;
+    const {
+      enablePagingBar
+    } = this.c.model;
+    let content = null;
+    if (isCreated) {
+      content = [this.c.state.noSort ? null : vue.createVNode(vue.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 ? vue.createVNode(vue.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 vue.createVNode(vue.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]
     });
   }
 });