@ibiz-template/vue3-components 0.7.24-alpha.0 → 0.7.24-alpha.2

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

@@ -1,7 +1,8 @@
-import { resolveComponent, mergeProps, h, createVNode, createTextVNode, renderSlot, onUnmounted, defineComponent } from 'vue';
+import { isVNode, resolveComponent, mergeProps, h, createVNode, createTextVNode, renderSlot, onUnmounted, computed, ref, watch, resolveDirective, withDirectives, defineComponent } from 'vue';
 import { useControlController, useNamespace, useUIStore } from '@ibiz-template/vue3-util';
 import { ScriptFactory, GridController } from '@ibiz-template/runtime';
 import { NOOP } from '@ibiz-template/core';
+import { createUUID } from 'qx-util';
 import { useITableEvent, useGridHeaderStyle, useGridDraggable, useAppGridBase } from './grid-control.util.mjs';
 import './grid.css';
 import { useRowEditPopover } from '../row-edit-popover/use-row-edit-popover.mjs';
@@ -9,6 +10,9 @@ 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);
+}
 function renderAttrs(model, params) {
   var _a;
   const attrs = {};
@@ -269,6 +273,25 @@ const GridControl = /* @__PURE__ */ defineComponent({
         cleanup();
       }
     });
+    const isLodeMoreDisabled = computed(() => {
+      if (c.model.pagingMode !== 2) {
+        return true;
+      }
+      return c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size;
+    });
+    const infiniteScroll = ref();
+    const infiniteScrollKey = ref(createUUID());
+    watch(() => c.state.curPage, () => {
+      var _a, _b;
+      if (c.state.curPage === 1 && (c.model.pagingMode === 2 || c.model.pagingMode === 3)) {
+        infiniteScrollKey.value = createUUID();
+        const containerEl = (_b = (_a = infiniteScroll.value) == null ? void 0 : _a.ElInfiniteScroll) == null ? void 0 : _b.containerEl;
+        if (containerEl) {
+          containerEl.lastScrollTop = 0;
+          containerEl.scrollTop = 0;
+        }
+      }
+    });
     return {
       c,
       ns,
@@ -291,7 +314,10 @@ const GridControl = /* @__PURE__ */ defineComponent({
       defaultSort,
       renderBatchToolBar,
       headerCssVars,
-      renderDragIconColumn
+      renderDragIconColumn,
+      isLodeMoreDisabled,
+      infiniteScroll,
+      infiniteScrollKey
     };
   },
   render() {
@@ -334,9 +360,22 @@ const GridControl = /* @__PURE__ */ defineComponent({
           })];
         },
         append: () => {
-          return this.renderPopover();
+          let _slot;
+          return [withDirectives(createVNode("div", {
+            "ref": "infiniteScroll",
+            "key": this.infiniteScrollKey,
+            "infinite-scroll-distance": 10,
+            "infinite-scroll-disabled": this.isLodeMoreDisabled
+          }, null), [[resolveDirective("infinite-scroll"), () => this.c.loadMore()]]), this.c.model.pagingMode === 3 && !(this.c.state.items.length >= this.c.state.total || this.c.state.isLoading || this.c.state.total <= this.c.state.size) && createVNode("div", {
+            "class": this.ns.e("load-more-button")
+          }, [createVNode(resolveComponent("el-button"), {
+            "text": true,
+            "onClick": () => this.c.loadMore()
+          }, _isSlot(_slot = ibiz.i18n.t("control.common.loadMore")) ? _slot : {
+            default: () => [_slot]
+          })]), this.renderPopover()];
         }
-      }), this.c.state.enablePagingBar && createVNode(resolveComponent("iBizPagination"), {
+      }), this.c.state.enablePagingBar && this.c.model.pagingMode === 1 && createVNode(resolveComponent("iBizPagination"), {
         "total": state.total,
         "curPage": state.curPage,
         "size": state.size,

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

@@ -95,6 +95,9 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     }> | undefined;
     headerCssVars: IData;
     renderDragIconColumn: () => JSX.Element;
+    isLodeMoreDisabled: import("vue").ComputedRef<boolean>;
+    infiniteScroll: import("vue").Ref<IData | undefined>;
+    infiniteScrollKey: import("vue").Ref<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IDEGrid>;

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

@@ -33,6 +33,7 @@ export declare const IBizListControl: import("@ibiz-template/vue3-util").TypeWit
 }, {
     c: import("@ibiz-template/runtime").ListController;
     ns: import("@ibiz-template/core").Namespace;
+    infiniteScroll: import("vue").Ref<IData | undefined>;
     renderListContent: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>;

package/es/control/list/list.css

@@ -1 +1 @@
-.ibiz-control-list-item{--ibiz-control-list-text-color:var(--ibiz-color-text-0);--ibiz-control-list-load-more-color:var(--ibiz-color-text-2);--ibiz-control-list-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-list-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-list-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-list-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-tight);min-height:var(--ibiz-control-list-item-height);padding:var(--ibiz-control-list-padding);font-weight:var(--ibiz-control-list-font-weight);color:var(--ibiz-control-list-text-color);cursor:pointer}.ibiz-control-list-item:hover{background-color:var(--ibiz-control-list-hover-bg-color)}.ibiz-control-list-item.is-active{background-color:var(--ibiz-control-list-active-bg-color)}.ibiz-control-list{--ibiz-control-list-text-color:var(--ibiz-color-text-0);--ibiz-control-list-load-more-color:var(--ibiz-color-text-2);--ibiz-control-list-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-list-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-list-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-list-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-tight);display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;height:100%}.ibiz-control-list__load-more{color:var(--ibiz-control-list-load-more-color);text-align:center;cursor:pointer}.ibiz-control-list .ibiz-control-list-content{flex-grow:1}.ibiz-control-list-scroll{height:100%;overflow:auto}
+.ibiz-control-list-item{--ibiz-control-list-text-color:var(--ibiz-color-text-0);--ibiz-control-list-load-more-color:var(--ibiz-color-text-2);--ibiz-control-list-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-list-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-list-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-list-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-tight);min-height:var(--ibiz-control-list-item-height);padding:var(--ibiz-control-list-padding);font-weight:var(--ibiz-control-list-font-weight);color:var(--ibiz-control-list-text-color);cursor:pointer}.ibiz-control-list-item:hover{background-color:var(--ibiz-control-list-hover-bg-color)}.ibiz-control-list-item.is-active{background-color:var(--ibiz-control-list-active-bg-color)}.ibiz-control-list{--ibiz-control-list-text-color:var(--ibiz-color-text-0);--ibiz-control-list-load-more-color:var(--ibiz-color-text-2);--ibiz-control-list-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-list-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-list-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-list-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-tight);display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;height:100%}.ibiz-control-list__load-more{color:var(--ibiz-control-list-load-more-color);text-align:center;cursor:pointer}.ibiz-control-list__load-more-button{padding:var(--ibiz-control-list-padding);text-align:center}.ibiz-control-list .ibiz-control-list-content{flex-grow:1}.ibiz-control-list-scroll{height:100%;overflow:auto}

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

@@ -52,6 +52,7 @@ export declare const ListControl: import("vue").DefineComponent<{
 }, {
     c: ListController;
     ns: import("@ibiz-template/core").Namespace;
+    infiniteScroll: import("vue").Ref<IData | undefined>;
     renderListContent: () => VNode;
     renderNoData: () => VNode | undefined;
     renderBatchToolBar: () => VNode | undefined;

package/es/control/list/list.mjs

@@ -1,6 +1,7 @@
-import { isVNode, computed, resolveComponent, createVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { isVNode, computed, ref, watch, resolveComponent, createVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { isNil } from 'lodash-es';
+import { createUUID } from 'qx-util';
 import { ListController } from '@ibiz-template/runtime';
 import './list.css';
 import '../../util/index.mjs';
@@ -72,8 +73,24 @@ const ListControl = /* @__PURE__ */ defineComponent({
       if (c.model.enablePagingBar === true) {
         return true;
       }
+      if (c.model.pagingMode !== 2) {
+        return true;
+      }
       return c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size;
     });
+    const infiniteScroll = ref();
+    const infiniteScrollKey = ref(createUUID());
+    watch(() => c.state.curPage, () => {
+      var _a, _b;
+      if (c.state.curPage === 1 && (c.model.pagingMode === 2 || c.model.pagingMode === 3)) {
+        infiniteScrollKey.value = createUUID();
+        const containerEl = (_b = (_a = infiniteScroll.value) == null ? void 0 : _a.ElInfiniteScroll) == null ? void 0 : _b.containerEl;
+        if (containerEl) {
+          containerEl.lastScrollTop = 0;
+          containerEl.scrollTop = 0;
+        }
+      }
+    });
     const renderPanelItem = (item, modelData) => {
       const {
         context,
@@ -119,6 +136,7 @@ const ListControl = /* @__PURE__ */ defineComponent({
       });
     };
     const renderListContent = () => {
+      let _slot;
       if (c.model.enableGroup && !c.state.isSimple) {
         return createVNode(resolveComponent("el-collapse"), {
           "class": [ns.b("group-content"), ns.b("content")]
@@ -137,12 +155,21 @@ const ListControl = /* @__PURE__ */ defineComponent({
       return withDirectives(createVNode("div", {
         "class": [ns.b("scroll"), ns.b("content")],
         "infinite-scroll-distance": 10,
-        "infinite-scroll-disabled": isLodeMoreDisabled.value
+        "infinite-scroll-disabled": isLodeMoreDisabled.value,
+        "ref": "infiniteScroll",
+        "key": infiniteScrollKey.value
       }, [c.state.items.map((item) => {
         return createVNode("div", {
           "class": [ns.b("scroll-item")]
         }, [panel ? renderPanelItem(item, panel) : renderDefaultItem(item)]);
-      })]), [[resolveDirective("infinite-scroll"), () => c.loadMore()]]);
+      }), c.model.pagingMode === 3 && !(c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size) && createVNode("div", {
+        "class": ns.e("load-more-button")
+      }, [createVNode(resolveComponent("el-button"), {
+        "text": true,
+        "onClick": () => c.loadMore()
+      }, _isSlot(_slot = ibiz.i18n.t("control.common.loadMore")) ? _slot : {
+        default: () => [_slot]
+      })])]), [[resolveDirective("infinite-scroll"), () => c.loadMore()]]);
     };
     const renderQuickToolBar = () => {
       var _a;
@@ -175,7 +202,7 @@ const ListControl = /* @__PURE__ */ defineComponent({
       }, null)]);
     };
     const renderNoData = () => {
-      let _slot;
+      let _slot2;
       const {
         isLoaded
       } = c.state;
@@ -187,13 +214,14 @@ const ListControl = /* @__PURE__ */ defineComponent({
         "text": c.model.emptyText,
         "emptyTextLanguageRes": c.model.emptyTextLanguageRes,
         "enableShowImage": c.state.hideNoDataImage
-      }, _isSlot(_slot = renderQuickToolBar()) ? _slot : {
-        default: () => [_slot]
+      }, _isSlot(_slot2 = renderQuickToolBar()) ? _slot2 : {
+        default: () => [_slot2]
       });
     };
     return {
       c,
       ns,
+      infiniteScroll,
       renderListContent,
       renderNoData,
       renderBatchToolBar,
@@ -205,7 +233,7 @@ const ListControl = /* @__PURE__ */ defineComponent({
   render() {
     let content = null;
     if (this.c.state.isCreated) {
-      content = [this.c.state.items.length > 0 ? this.renderListContent() : this.renderNoData(), this.renderBatchToolBar(), this.c.state.enablePagingBar ? createVNode(resolveComponent("iBizPagination"), {
+      content = [this.c.state.items.length > 0 ? this.renderListContent() : this.renderNoData(), this.renderBatchToolBar(), this.c.state.enablePagingBar && this.c.model.pagingMode === 1 ? createVNode(resolveComponent("iBizPagination"), {
         "class": this.ns.e("pagination"),
         "total": this.c.state.total,
         "curPage": this.c.state.curPage,

package/es/editor/switch/ibiz-switch/ibiz-switch.mjs

@@ -1,5 +1,5 @@
 import { ref, computed, watch, resolveComponent, mergeProps, createVNode, defineComponent } from 'vue';
-import { getSwitchProps, getEditorEmits, useNamespace, useFocusAndBlur } from '@ibiz-template/vue3-util';
+import { getSwitchProps, getEditorEmits, useNamespace, useAutoFocusBlur, useFocusAndBlur } from '@ibiz-template/vue3-util';
 import './ibiz-switch.css';
 
 "use strict";
@@ -65,13 +65,18 @@ const IBizSwitch = /* @__PURE__ */ defineComponent({
       }
       return props.disabled || props.readonly;
     });
+    const {
+      useInFocusAndBlur,
+      useInValueChange
+    } = useAutoFocusBlur(props, emit);
     const handleChange = (currentValue) => {
       const emitValue = currentValue === true ? 1 : 0;
       emit("change", emitValue);
+      useInValueChange();
     };
     const {
       componentRef: editorRef
-    } = useFocusAndBlur(() => emit("focus"), () => emit("blur"));
+    } = useFocusAndBlur(() => emit("focus"), () => useInFocusAndBlur());
     return {
       ns,
       currentVal,

package/es/locale/en/index.d.ts

@@ -472,7 +472,7 @@ declare const _default: {
             loginFailure: string;
             logoutFailure: string;
             noFound: string;
-            masterState: string;
+            mainState: string;
             operationIdentifier: string;
             matchMasterState: string;
             masterStatePermissions: string;
@@ -893,6 +893,7 @@ declare const _default: {
                 gridRowSelect: string;
                 gridRowSelectDesc: string;
             };
+            loadMore: string;
         };
         menu: {
             noSupportAlign: string;

package/es/locale/en/index.mjs

@@ -234,7 +234,8 @@ var index = {
         gridRowHoverDesc: "Table row suspension color, background color when a row is hover",
         gridRowSelect: "Select color for table row",
         gridRowSelectDesc: "Table row selected color, background color when a row is selected"
-      }
+      },
+      loadMore: "Load more"
     },
     menu: {
       noSupportAlign: "The menu direction {align} is not supported temporarily",

package/es/locale/zh-CN/index.d.ts

@@ -470,7 +470,7 @@ declare const _default: {
             loginFailure: string;
             logoutFailure: string;
             noFound: string;
-            masterState: string;
+            mainState: string;
             operationIdentifier: string;
             matchMasterState: string;
             masterStatePermissions: string;
@@ -891,6 +891,7 @@ declare const _default: {
                 gridRowSelect: string;
                 gridRowSelectDesc: string;
             };
+            loadMore: string;
         };
         menu: {
             noSupportAlign: string;

package/es/locale/zh-CN/index.mjs

@@ -234,7 +234,8 @@ var index = {
         gridRowHoverDesc: "\u8868\u683C\u884C\u60AC\u6D6E\u8272, \u5F53\u67D0\u4E00\u884Chover\u65F6\u80CC\u666F\u8272",
         gridRowSelect: "\u8868\u683C\u884C\u9009\u4E2D\u8272",
         gridRowSelectDesc: "\u8868\u683C\u884C\u9009\u4E2D\u8272\uFF0C\u5F53\u67D0\u4E00\u884C\u9009\u4E2D\u65F6\u80CC\u666F\u8272"
-      }
+      },
+      loadMore: "\u52A0\u8F7D\u66F4\u591A"
     },
     menu: {
       noSupportAlign: "\u6682\u672A\u652F\u6301\u83DC\u5355\u65B9\u5411\u4E3A {align}",

package/es/node_modules/.pnpm/@ibiz-template_core@0.7.18_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs

@@ -0,0 +1,218 @@
+const defaultNamespace = 'ibiz';
+const statePrefix = 'is-';
+/**
+ * css bem 命名规则拼接
+ * _bem('ibiz', 'layout') => ibiz-layout
+ * _bem('ibiz', 'layout', '', 'title') => ibiz-layout__title
+ * _bem('ibiz', 'layout', '', '', 'right') => ibiz-layout--right
+ * _bem('ibiz', 'layout', '', 'title', 'right') => ibiz-layout__title--right
+ * _bem('ibiz', 'layout', 'header', 'title', 'right') => ibiz-layout-header__title--right
+ *
+ * @author chitanda
+ * @date 2022-09-06 11:09:42
+ * @param {string} namespace 命名空间
+ * @param {string} block 块
+ * @param {string} blockSuffix 块后缀
+ * @param {string} element 元素
+ * @param {string} modifier 修饰符
+ * @return {*}  {string}
+ */
+function _bem(namespace, block, blockSuffix, element, modifier) {
+    let cls = `${namespace}-${block}`;
+    if (blockSuffix) {
+        cls += `-${blockSuffix}`;
+    }
+    if (element) {
+        cls += `__${element}`;
+    }
+    if (modifier) {
+        cls += `--${modifier}`;
+    }
+    return cls;
+}
+/**
+ * 全局样式处理命名空间
+ *
+ * @author chitanda
+ * @date 2022-09-06 11:09:50
+ * @export
+ * @class Namespace
+ */
+class Namespace {
+    /**
+     * Creates an instance of Namespace.
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:12
+     * @param {string} block 当前命名空间的根模块,例如组件的名称
+     * @param {string} [namespace] 指定命名空间，未指定使用默认值 ibiz
+     */
+    constructor(block, namespace) {
+        this.block = block;
+        this.namespace = namespace || defaultNamespace;
+    }
+    /**
+     * namespace-block
+     * namespace-block-blockSuffix
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:08
+     * @param {string} [blockSuffix='']
+     * @return {*}  {string}
+     */
+    b(blockSuffix = '') {
+        return _bem(this.namespace, this.block, blockSuffix, '', '');
+    }
+    /**
+     * namespace-block__element
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:48
+     * @param {string} [element]
+     * @return {*}  {string}
+     */
+    e(element) {
+        return element ? _bem(this.namespace, this.block, '', element, '') : '';
+    }
+    /**
+     * namespace-block--modifier
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:37
+     * @param {string} [modifier]
+     * @return {*}  {string}
+     */
+    m(modifier) {
+        return modifier ? _bem(this.namespace, this.block, '', '', modifier) : '';
+    }
+    /**
+     * namespace-block-blockSuffix__element
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:52
+     * @param {string} [blockSuffix]
+     * @param {string} [element]
+     * @return {*}  {string}
+     */
+    be(blockSuffix, element) {
+        return blockSuffix && element
+            ? _bem(this.namespace, this.block, blockSuffix, element, '')
+            : '';
+    }
+    /**
+     * namespace-block__element--modifier
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:19
+     * @param {string} [element]
+     * @param {string} [modifier]
+     * @return {*}  {string}
+     */
+    em(element, modifier) {
+        return element && modifier
+            ? _bem(this.namespace, this.block, '', element, modifier)
+            : '';
+    }
+    /**
+     * namespace-block-blockSuffix--modifier
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:59
+     * @param {string} [blockSuffix]
+     * @param {string} [modifier]
+     * @return {*}  {string}
+     */
+    bm(blockSuffix, modifier) {
+        return blockSuffix && modifier
+            ? _bem(this.namespace, this.block, blockSuffix, '', modifier)
+            : '';
+    }
+    /**
+     * namespace-block-blockSuffix__element--modifier
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:37
+     * @param {string} [blockSuffix]
+     * @param {string} [element]
+     * @param {string} [modifier]
+     * @return {*}  {string}
+     */
+    bem(blockSuffix, element, modifier) {
+        return blockSuffix && element && modifier
+            ? _bem(this.namespace, this.block, blockSuffix, element, modifier)
+            : '';
+    }
+    /**
+     * 返回状态 class
+     *
+     * is('loading', false) => '';
+     * is('loading', true) => 'is-loading';
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:57
+     * @param {string} name
+     * @param {boolean} [state]
+     * @return {*}  {string}
+     */
+    is(name, state) {
+        return name && state ? `${statePrefix}${name}` : '';
+    }
+    /**
+     * 生成使用到的 css 变量 style 对象
+     *
+     * @author chitanda
+     * @date 2022-09-06 15:09:41
+     * @param {Record<string, string>} object
+     * @return {*}  {Record<string, string>}
+     */
+    cssVar(object) {
+        const styles = {};
+        for (const key in object) {
+            if (object[key]) {
+                styles[this.cssVarName(key)] = object[key];
+            }
+        }
+        return styles;
+    }
+    /**
+     * 生成使用到的 css block 变量 style 对象
+     *
+     * @author chitanda
+     * @date 2022-09-06 15:09:03
+     * @param {Record<string, string>} object
+     * @return {*}  {Record<string, string>}
+     */
+    cssVarBlock(object) {
+        const styles = {};
+        for (const key in object) {
+            if (object[key]) {
+                styles[this.cssVarBlockName(key)] = object[key];
+            }
+        }
+        return styles;
+    }
+    /**
+     * 生成 css var 变量名称
+     *
+     * @author chitanda
+     * @date 2022-09-06 15:09:21
+     * @param {string} name
+     * @return {*}  {string}
+     */
+    cssVarName(name) {
+        return `--${this.namespace}-${name}`;
+    }
+    /**
+     * 生成块 css var 变量名称
+     *
+     * @author chitanda
+     * @date 2022-09-06 15:09:35
+     * @param {string} name
+     * @return {*}  {string}
+     */
+    cssVarBlockName(name) {
+        return `--${this.namespace}-${this.block}-${name}`;
+    }
+}
+
+export { Namespace, defaultNamespace };

package/lib/common/action-toolbar/action-toolbar.cjs

@@ -145,7 +145,7 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
       }, {
         icon: () => vue.createVNode("ion-icon", {
           "class": this.ns.e("icon"),
-          "name": "ellipsis-vertical-outline",
+          "name": "ellipsis-vertical",
           "title": ibiz.i18n.t("component.actionToolbar.more")
         }, null)
       }), vue.createVNode(vue.resolveComponent("el-popover"), {
@@ -180,7 +180,7 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
         "class": this.ns.e("caption")
       }, [this.caption, vue.createVNode("ion-icon", {
         "class": this.ns.e("caption-icon"),
-        "name": "ellipsis-vertical-outline"
+        "name": "ellipsis-vertical"
       }, null)]),
       dropdown: () => vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, {
         default: () => [details.length > 0 && details.map((detail) => {

package/lib/control/context-menu/context-menu.cjs

@@ -216,7 +216,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       }, {
         icon: () => vue.createVNode("ion-icon", {
           "class": this.ns.e("icon"),
-          "name": "ellipsis-vertical-outline"
+          "name": "ellipsis-vertical"
         }, null)
       }), vue.createVNode(vue.resolveComponent("el-popover"), {
         "placement": "bottom-start",

package/lib/control/data-view/data-view.cjs

@@ -3,6 +3,7 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
+var qxUtil = require('qx-util');
 require('./data-view.css');
 require('../../util/index.cjs');
 var usePagination = require('../../util/pagination/use-pagination.cjs');
@@ -60,8 +61,24 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       if (c.model.enablePagingBar === true) {
         return true;
       }
+      if (c.model.pagingMode !== 2) {
+        return true;
+      }
       return c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size;
     });
+    const infiniteScroll = vue.ref();
+    const infiniteScrollKey = vue.ref(qxUtil.createUUID());
+    vue.watch(() => c.state.curPage, () => {
+      var _a, _b;
+      if (c.state.curPage === 1 && (c.model.pagingMode === 2 || c.model.pagingMode === 3)) {
+        infiniteScrollKey.value = qxUtil.createUUID();
+        const containerEl = (_b = (_a = infiniteScroll.value) == null ? void 0 : _a.ElInfiniteScroll) == null ? void 0 : _b.containerEl;
+        if (containerEl) {
+          containerEl.lastScrollTop = 0;
+          containerEl.scrollTop = 0;
+        }
+      }
+    });
     const {
       onPageChange,
       onPageRefresh,
@@ -232,11 +249,21 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       });
     };
     const renderHasData = () => {
+      let _slot4;
       return vue.withDirectives(vue.createVNode("div", {
         "class": [ns.b("scroll"), ns.e("content")],
         "infinite-scroll-distance": 10,
-        "infinite-scroll-disabled": isLodeMoreDisabled.value
-      }, [renderDataViewContent()]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
+        "infinite-scroll-disabled": isLodeMoreDisabled.value,
+        "ref": "infiniteScroll",
+        "key": infiniteScrollKey.value
+      }, [renderDataViewContent(), c.model.pagingMode === 3 && !(c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size) && vue.createVNode("div", {
+        "class": ns.e("load-more-button")
+      }, [vue.createVNode(vue.resolveComponent("el-button"), {
+        "text": true,
+        "onClick": () => c.loadMore()
+      }, _isSlot(_slot4 = ibiz.i18n.t("control.common.loadMore")) ? _slot4 : {
+        default: () => [_slot4]
+      })])]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
     };
     const renderNoData = () => {
       const {
@@ -256,6 +283,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       c,
       ns,
       classNames,
+      infiniteScroll,
       renderHasData,
       renderNoData,
       onPageChange,
@@ -273,10 +301,12 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       content = [this.c.state.noSort ? null : vue.createVNode(vue.resolveComponent("iBizSortBar"), {
         "onSortChange": (item, order) => {
           this.c.setSort(item.key, order);
-          this.c.load();
+          this.c.load({
+            isInitialLoad: this.c.model.pagingMode === 2 || this.c.model.pagingMode === 3
+          });
         },
         "sortItems": this.c.state.sortItems
-      }, null), items.length > 0 ? this.renderHasData() : this.renderNoData(), this.c.state.enablePagingBar ? vue.createVNode(vue.resolveComponent("iBizPagination"), {
+      }, null), items.length > 0 ? this.renderHasData() : this.renderNoData(), this.c.state.enablePagingBar && this.c.model.pagingMode === 1 ? vue.createVNode(vue.resolveComponent("iBizPagination"), {
         "class": this.ns.e("pagination"),
         "total": this.c.state.total,
         "curPage": this.c.state.curPage,

package/lib/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;--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;align-content:flex-start;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-scroll>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.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;padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color)}.ibiz-control-dataview-group-content__item-content>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-group-content__item-row{padding:var(--ibiz-control-dataview-group-item-content-padding)}.ibiz-control-dataview-group-content__item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}
+.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__load-more-button{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview-scroll{display:flex;flex-wrap:wrap;align-content:flex-start;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-scroll>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.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;padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color)}.ibiz-control-dataview-group-content__item-content>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-group-content__item-row{padding:var(--ibiz-control-dataview-group-item-content-padding)}.ibiz-control-dataview-group-content__item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}