@ibiz-template/vue3-components 0.7.41-alpha.36 → 0.7.41-alpha.38

package/lib/control/calendar/calendar.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 var dayjs = require('dayjs');
+var lodashEs = require('lodash-es');
 var core = require('@ibiz-template/core');
 var index = require('./components/custom-calendar/index.cjs');
 var calendarUtil = require('./calendar-util.cjs');
@@ -82,6 +83,13 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     const curPopover = vue.ref();
     const showDateRange = vue.ref(c.controlParams.showmode === "daterange");
     const showDateList = vue.ref(c.controlParams.showmode === "expand");
+    const infiniteScroll = vue.ref();
+    const disabledLodeMore = vue.computed(() => {
+      if (c.model.calendarStyle !== "TIMELINE" || c.state.isLoading)
+        return true;
+      const result = !Object.values(c.loadMoreItems).some((item) => item.curPage < item.totalPage);
+      return result;
+    });
     const monthLegendClick = (_item) => {
       Object.assign(_item, {
         isShow: !_item.isShow
@@ -118,6 +126,17 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     vue.watch(() => UIStore.theme, () => {
       calcLegend();
     });
+    const handleScrollLoad = async () => {
+      if (!infiniteScroll.value || disabledLodeMore.value)
+        return;
+      const scrollTop = infiniteScroll.value.scrollTop;
+      const scrollHeight = infiniteScroll.value.scrollHeight;
+      const clientHeight = infiniteScroll.value.clientHeight;
+      if (scrollHeight - scrollTop - clientHeight < 10)
+        await c.load({
+          isLoadMore: true
+        });
+    };
     const popoverValue = vue.ref("");
     const selectDate = (tag) => {
       if (!calendarRef.value)
@@ -374,15 +393,18 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       ns,
       curPopover,
       calendarRef,
-      showDateRange,
-      showDateList,
-      popoverValue,
       legendItems,
+      popoverValue,
+      showDateList,
+      showDateRange,
+      infiniteScroll,
+      disabledLodeMore,
       selectDate,
       calcItemStyle,
+      handleScrollLoad,
+      monthLegendClick,
       calcCalendarItems,
-      onNodeContextmenu,
-      monthLegendClick
+      onNodeContextmenu
     };
   },
   render() {
@@ -650,14 +672,17 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     };
     const renderTimeLine = () => {
       return vue.createVNode("div", {
-        "class": this.ns.b("timeline-content")
+        "ref": "infiniteScroll",
+        "class": this.ns.b("timeline-content"),
+        "onScroll": lodashEs.debounce(this.handleScrollLoad, 300)
       }, [vue.createVNode(vue.resolveComponent("el-timeline"), null, {
         default: () => [this.c.state.items.length > 0 ? this.c.state.items.map((item) => {
           var _a;
           const model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((calendarItems) => {
             return item.itemType === calendarItems.itemType;
           });
-          const temptime = item.beginTime ? dayjs(item.beginTime).format(this.c.timelineCaptionFormat) : item.beginTime;
+          const time = item[this.c.groupTimeField];
+          const temptime = time ? dayjs(time).format(this.c.timelineCaptionFormat) : time;
           return vue.createVNode(vue.resolveComponent("el-timeline-item"), {
             "key": item.id,
             "placement": "top",

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/form-mdctrl-repeater.cjs

@@ -6,6 +6,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var repeaterSingleForm = require('./repeater-single-form/repeater-single-form.cjs');
 var repeaterMultiForm = require('./repeater-multi-form/repeater-multi-form.cjs');
 var repeaterGrid = require('./repeater-grid/repeater-grid.cjs');
+var repeaterGrid2 = require('./repeater-grid2/repeater-grid2.cjs');
 
 "use strict";
 const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
@@ -27,6 +28,7 @@ const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
+    var _a;
     const classNames = [this.ns.b()];
     switch (this.controller.repeaterStyle) {
       case "MultiForm":
@@ -36,6 +38,14 @@ const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
           "controller": this.controller
         }, null);
       case "Grid":
+        const gridStyle = (_a = this.controller.model.ctrlParams) == null ? void 0 : _a.gridStyle;
+        if (gridStyle === "style2") {
+          return vue.createVNode(repeaterGrid2.RepeaterGrid2, {
+            "class": classNames,
+            "controller": this.controller,
+            "onChange": this.onDataChange
+          }, null);
+        }
         return vue.createVNode(repeaterGrid.RepeaterGrid, {
           "class": classNames,
           "controller": this.controller,

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/form-mdctrl-repeater.util.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var vue = require('vue');
+
+"use strict";
+function useLoadMore(initItems, chunkSize) {
+  let totalItems = [];
+  let page = 1;
+  const renderItems = vue.ref([]);
+  const updateTotalItems = (items) => {
+    page = 1;
+    totalItems = items != null ? items : [];
+    renderItems.value = totalItems.slice(0, chunkSize);
+  };
+  updateTotalItems(initItems);
+  const loadMore = () => {
+    if (renderItems.value.length >= totalItems.length) {
+      return;
+    }
+    page += 1;
+    const start = (page - 1) * chunkSize;
+    const end = page * chunkSize;
+    renderItems.value.push(...totalItems.slice(start, end));
+  };
+  return {
+    renderItems,
+    loadMore,
+    updateTotalItems
+  };
+}
+
+exports.useLoadMore = useLoadMore;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.cjs

@@ -6,6 +6,7 @@ var runtime = require('@ibiz-template/runtime');
 var qxUtil = require('qx-util');
 var vue3Util = require('@ibiz-template/vue3-util');
 var core = require('@ibiz-template/core');
+var formMdctrlRepeater_util = require('../form-mdctrl-repeater.util.cjs');
 require('./repeater-grid.css');
 
 "use strict";
@@ -26,14 +27,21 @@ const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
   setup(props, {
     emit
   }) {
+    var _a, _b;
     const ns = vue3Util.useNamespace("repeater-grid");
     const formItems = [];
     const tableRef = vue.ref();
     const tableKey = vue.ref(qxUtil.createUUID());
+    const chunkSize = ((_a = props.controller.model.ctrlParams) == null ? void 0 : _a.chunkSize) ? Number((_b = props.controller.model.ctrlParams) == null ? void 0 : _b.chunkSize) : 100;
+    const {
+      renderItems,
+      loadMore,
+      updateTotalItems
+    } = formMdctrlRepeater_util.useLoadMore(props.controller.value, chunkSize);
     core.recursiveIterate(props.controller.repeatedForm, (item) => {
-      var _a;
+      var _a2;
       if (item.detailType === "FORMITEM") {
-        if (((_a = item.editor) == null ? void 0 : _a.editorType) !== "HIDDEN") {
+        if (((_a2 = item.editor) == null ? void 0 : _a2.editorType) !== "HIDDEN") {
           formItems.push(item);
         }
       }
@@ -87,14 +95,15 @@ const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
           });
         }
       }
+      updateTotalItems(newVal || []);
     }, {
       immediate: true,
       deep: true
     });
     let sortable;
     const rowDrop = () => {
-      var _a, _b;
-      const wrapper = (_b = (_a = tableRef.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector(".el-table__body-wrapper tbody");
+      var _a2, _b2;
+      const wrapper = (_b2 = (_a2 = tableRef.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b2.querySelector(".el-table__body-wrapper tbody");
       if (!wrapper || !props.controller.enableSort)
         return;
       sortable = sortable_esm.default.create(wrapper, {
@@ -154,12 +163,19 @@ const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
       tableRef,
       tableKey,
       formItems,
+      renderItems,
       formControllers,
-      renderRemoveBtn
+      renderRemoveBtn,
+      loadMore
     };
   },
   render() {
+    var _a;
     let _slot3;
+    const tableHeight = (_a = this.controller.model.layoutPos) == null ? void 0 : _a.height;
+    const heightObject = tableHeight ? {
+      height: tableHeight
+    } : {};
     return vue.createVNode("div", {
       "class": this.ns.b()
     }, [this.controller.enableCreate && vue.createVNode(vue.resolveComponent("el-button"), {
@@ -169,104 +185,117 @@ const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
       }
     }, _isSlot(_slot3 = ibiz.i18n.t("app.add")) ? _slot3 : {
       default: () => [_slot3]
-    }), vue.createVNode(vue.resolveComponent("el-table"), {
+    }), vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
       "ref": "tableRef",
       "key": this.tableKey,
       "show-header": true,
       "class": this.ns.e("table"),
-      "data": this.controller.value,
+      "data": this.renderItems,
       "cell-class-name": ({
         columnIndex
       }) => {
         const shouldShowIndex = this.controller.enableSort ? columnIndex === 1 : columnIndex === 0;
         return shouldShowIndex ? this.ns.b("index") : "";
       }
-    }, {
-      default: () => [this.controller.enableSort && vue.createVNode(vue.resolveComponent("el-table-column"), {
-        "width": 26,
-        "type": "default"
-      }, {
-        default: () => vue.createVNode("svg", {
-          "viewBox": "0 0 16 16",
-          "xmlns": "http://www.w3.org/2000/svg",
-          "height": "1em",
-          "width": "1em",
-          "class": this.ns.e("drag-icon"),
-          "preserveAspectRatio": "xMidYMid meet",
-          "focusable": "false"
-        }, [vue.createVNode("g", {
-          "stroke-width": "1",
-          "fill-rule": "evenodd"
-        }, [vue.createVNode("g", {
-          "transform": "translate(5 1)",
-          "fill-rule": "nonzero"
-        }, [vue.createVNode("path", {
-          "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
-        }, null)])])])
-      }), vue.createVNode(vue.resolveComponent("el-table-column"), {
-        "type": "index",
-        "width": 66,
-        "align": "center"
-      }, {
-        default: (opts) => {
-          const {
-            $index
-          } = opts;
-          if (!this.controller.enableDelete) {
-            return vue.createVNode("span", null, [$index + 1]);
-          }
-          return [this.renderRemoveBtn($index), vue.createVNode("span", {
-            "class": this.ns.be("index", "text")
-          }, [$index + 1])];
-        }
-      }), this.formItems.length > 0 && this.formItems.map((item) => {
-        const width = item.labelWidth;
-        let columnWidth = "";
-        if (typeof width === "number") {
-          columnWidth = "".concat(width, "px");
-        }
-        return vue.createVNode(vue.resolveComponent("el-table-column"), {
-          "label": item.caption,
-          "prop": item.id,
-          "width": columnWidth,
+    }, heightObject), {
+      default: () => {
+        return [this.controller.enableSort && vue.createVNode(vue.resolveComponent("el-table-column"), {
+          "width": 26,
+          "type": "default"
+        }, {
+          default: () => vue.createVNode("svg", {
+            "viewBox": "0 0 16 16",
+            "xmlns": "http://www.w3.org/2000/svg",
+            "height": "1em",
+            "width": "1em",
+            "class": this.ns.e("drag-icon"),
+            "preserveAspectRatio": "xMidYMid meet",
+            "focusable": "false"
+          }, [vue.createVNode("g", {
+            "stroke-width": "1",
+            "fill-rule": "evenodd"
+          }, [vue.createVNode("g", {
+            "transform": "translate(5 1)",
+            "fill-rule": "nonzero"
+          }, [vue.createVNode("path", {
+            "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+          }, null)])])])
+        }), vue.createVNode(vue.resolveComponent("el-table-column"), {
+          "type": "index",
+          "width": 66,
           "align": "center"
         }, {
           default: (opts) => {
             const {
               $index
             } = opts;
-            const formC = vue.toRaw(this.formControllers[$index]);
-            if (!formC || !formC.state.isLoaded) {
-              return vue.createVNode("div", null, [ibiz.i18n.t("control.form.repeaterGrid.absentOrLoad")]);
+            if (!this.controller.enableDelete) {
+              return vue.createVNode("span", null, [$index + 1]);
             }
-            const formItemC = formC.formItems.find((x) => x.name === item.id);
-            let editor = null;
-            if (!formItemC.editorProvider) {
-              editor = vue.createVNode(vue.resolveComponent("not-supported-editor"), {
-                "modelData": item.editor
-              }, null);
-            } else {
-              const component = vue.resolveComponent(formItemC.editorProvider.formEditor);
-              editor = vue.h(component, {
-                value: formItemC.value,
-                data: formItemC.data,
-                controller: formItemC.editor,
-                disabled: formItemC.state.disabled,
-                readonly: formItemC.state.readonly,
-                onChange: (val, name) => {
-                  formItemC.setDataValue(val, name);
-                }
-              });
+            return [this.renderRemoveBtn($index), vue.createVNode("span", {
+              "class": this.ns.be("index", "text")
+            }, [$index + 1])];
+          }
+        }), this.formItems.length > 0 && this.formItems.map((item) => {
+          const width = item.labelWidth;
+          let widthName = "width";
+          let columnWidth = "";
+          if (typeof width === "number") {
+            if (width === 1) {
+              widthName = "min-width";
             }
-            return vue.createVNode(vue.resolveComponent("iBizGridEditItem"), {
-              "error": formItemC.state.error,
-              "required": formItemC.state.required
-            }, _isSlot(editor) ? editor : {
-              default: () => [editor]
-            });
+            columnWidth = "".concat(width, "px");
           }
-        });
-      })]
+          return vue.createVNode(vue.resolveComponent("el-table-column"), vue.mergeProps({
+            "label": item.caption,
+            "prop": item.id
+          }, {
+            [widthName]: columnWidth
+          }, {
+            "align": "center"
+          }), {
+            default: (opts) => {
+              const {
+                $index
+              } = opts;
+              const formC = vue.toRaw(this.formControllers[$index]);
+              if (!formC || !formC.state.isLoaded) {
+                return vue.createVNode("div", null, [ibiz.i18n.t("control.form.repeaterGrid.absentOrLoad")]);
+              }
+              const formItemC = formC.formItems.find((x) => x.name === item.id);
+              let editor = null;
+              if (!formItemC.editorProvider) {
+                editor = vue.createVNode(vue.resolveComponent("not-supported-editor"), {
+                  "modelData": item.editor
+                }, null);
+              } else {
+                const component = vue.resolveComponent(formItemC.editorProvider.formEditor);
+                editor = vue.h(component, {
+                  value: formItemC.value,
+                  data: formItemC.data,
+                  controller: formItemC.editor,
+                  disabled: formItemC.state.disabled,
+                  readonly: formItemC.state.readonly,
+                  onChange: (val, name) => {
+                    formItemC.setDataValue(val, name);
+                  }
+                });
+              }
+              return vue.createVNode(vue.resolveComponent("iBizGridEditItem"), {
+                "error": formItemC.state.error,
+                "required": formItemC.state.required
+              }, _isSlot(editor) ? editor : {
+                default: () => [editor]
+              });
+            }
+          });
+        })];
+      },
+      append: () => {
+        return [tableHeight && vue.withDirectives(vue.createVNode("div", {
+          "infinite-scroll-distance": 20
+        }, null), [[vue.resolveDirective("infinite-scroll"), () => this.loadMore()]])];
+      }
     })]);
   }
 });