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

package/es/control/calendar/calendar.mjs

@@ -1,7 +1,8 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, ref, watch } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed, watch } from 'vue';
 import { hasEmptyPanelRenderer, IBizCustomRender, useControlController, useNamespace, useUIStore } from '@ibiz-template/vue3-util';
 import { CalendarController } from '@ibiz-template/runtime';
 import dayjs from 'dayjs';
+import { debounce } from 'lodash-es';
 import { showTitle } from '@ibiz-template/core';
 import { IBizCustomCalendar } from './components/custom-calendar/index.mjs';
 import { isTimeBetween, useCalendarLegend, getWeekRange } from './calendar-util.mjs';
@@ -80,6 +81,13 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     const curPopover = ref();
     const showDateRange = ref(c.controlParams.showmode === "daterange");
     const showDateList = ref(c.controlParams.showmode === "expand");
+    const infiniteScroll = ref();
+    const disabledLodeMore = 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
@@ -116,6 +124,17 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     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 = ref("");
     const selectDate = (tag) => {
       if (!calendarRef.value)
@@ -372,15 +391,18 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       ns,
       curPopover,
       calendarRef,
-      showDateRange,
-      showDateList,
-      popoverValue,
       legendItems,
+      popoverValue,
+      showDateList,
+      showDateRange,
+      infiniteScroll,
+      disabledLodeMore,
       selectDate,
       calcItemStyle,
+      handleScrollLoad,
+      monthLegendClick,
       calcCalendarItems,
-      onNodeContextmenu,
-      monthLegendClick
+      onNodeContextmenu
     };
   },
   render() {
@@ -648,14 +670,17 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     };
     const renderTimeLine = () => {
       return createVNode("div", {
-        "class": this.ns.b("timeline-content")
+        "ref": "infiniteScroll",
+        "class": this.ns.b("timeline-content"),
+        "onScroll": debounce(this.handleScrollLoad, 300)
       }, [createVNode(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 createVNode(resolveComponent("el-timeline-item"), {
             "key": item.id,
             "placement": "top",

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

@@ -4,6 +4,7 @@ import { useNamespace } from '@ibiz-template/vue3-util';
 import { RepeaterSingleForm } from './repeater-single-form/repeater-single-form.mjs';
 import { RepeaterMultiForm } from './repeater-multi-form/repeater-multi-form.mjs';
 import { RepeaterGrid } from './repeater-grid/repeater-grid.mjs';
+import { RepeaterGrid2 } from './repeater-grid2/repeater-grid2.mjs';
 
 "use strict";
 const FormMDCtrlRepeater = /* @__PURE__ */ defineComponent({
@@ -25,6 +26,7 @@ const FormMDCtrlRepeater = /* @__PURE__ */ defineComponent({
     };
   },
   render() {
+    var _a;
     const classNames = [this.ns.b()];
     switch (this.controller.repeaterStyle) {
       case "MultiForm":
@@ -34,6 +36,14 @@ const FormMDCtrlRepeater = /* @__PURE__ */ defineComponent({
           "controller": this.controller
         }, null);
       case "Grid":
+        const gridStyle = (_a = this.controller.model.ctrlParams) == null ? void 0 : _a.gridStyle;
+        if (gridStyle === "style2") {
+          return createVNode(RepeaterGrid2, {
+            "class": classNames,
+            "controller": this.controller,
+            "onChange": this.onDataChange
+          }, null);
+        }
         return createVNode(RepeaterGrid, {
           "class": classNames,
           "controller": this.controller,

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/form-mdctrl-repeater.util.mjs

@@ -0,0 +1,30 @@
+import { ref } from 'vue';
+
+"use strict";
+function useLoadMore(initItems, chunkSize) {
+  let totalItems = [];
+  let page = 1;
+  const renderItems = 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
+  };
+}
+
+export { useLoadMore };

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.mjs

@@ -1,9 +1,10 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, toRaw, h, ref, reactive, watch, onUnmounted } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, mergeProps, withDirectives, resolveDirective, toRaw, h, ref, reactive, watch, onUnmounted } from 'vue';
 import Sortable from '../../../../../../node_modules/.pnpm/sortablejs@1.15.6/node_modules/sortablejs/modular/sortable.esm.mjs';
 import { EditFormController, ControlVO, FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
 import { useNamespace, useCtx } from '@ibiz-template/vue3-util';
 import { recursiveIterate, showTitle } from '@ibiz-template/core';
+import { useLoadMore } from '../form-mdctrl-repeater.util.mjs';
 import './repeater-grid.css';
 
 "use strict";
@@ -24,14 +25,21 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
   setup(props, {
     emit
   }) {
+    var _a, _b;
     const ns = useNamespace("repeater-grid");
     const formItems = [];
     const tableRef = ref();
     const tableKey = ref(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
+    } = useLoadMore(props.controller.value, chunkSize);
     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);
         }
       }
@@ -85,14 +93,15 @@ const RepeaterGrid = /* @__PURE__ */ 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.create(wrapper, {
@@ -152,12 +161,19 @@ const RepeaterGrid = /* @__PURE__ */ 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 createVNode("div", {
       "class": this.ns.b()
     }, [this.controller.enableCreate && createVNode(resolveComponent("el-button"), {
@@ -167,104 +183,117 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
       }
     }, _isSlot(_slot3 = ibiz.i18n.t("app.add")) ? _slot3 : {
       default: () => [_slot3]
-    }), createVNode(resolveComponent("el-table"), {
+    }), createVNode(resolveComponent("el-table"), 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 && createVNode(resolveComponent("el-table-column"), {
-        "width": 26,
-        "type": "default"
-      }, {
-        default: () => 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"
-        }, [createVNode("g", {
-          "stroke-width": "1",
-          "fill-rule": "evenodd"
-        }, [createVNode("g", {
-          "transform": "translate(5 1)",
-          "fill-rule": "nonzero"
-        }, [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)])])])
-      }), createVNode(resolveComponent("el-table-column"), {
-        "type": "index",
-        "width": 66,
-        "align": "center"
-      }, {
-        default: (opts) => {
-          const {
-            $index
-          } = opts;
-          if (!this.controller.enableDelete) {
-            return createVNode("span", null, [$index + 1]);
-          }
-          return [this.renderRemoveBtn($index), 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 createVNode(resolveComponent("el-table-column"), {
-          "label": item.caption,
-          "prop": item.id,
-          "width": columnWidth,
+    }, heightObject), {
+      default: () => {
+        return [this.controller.enableSort && createVNode(resolveComponent("el-table-column"), {
+          "width": 26,
+          "type": "default"
+        }, {
+          default: () => 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"
+          }, [createVNode("g", {
+            "stroke-width": "1",
+            "fill-rule": "evenodd"
+          }, [createVNode("g", {
+            "transform": "translate(5 1)",
+            "fill-rule": "nonzero"
+          }, [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)])])])
+        }), createVNode(resolveComponent("el-table-column"), {
+          "type": "index",
+          "width": 66,
           "align": "center"
         }, {
           default: (opts) => {
             const {
               $index
             } = opts;
-            const formC = toRaw(this.formControllers[$index]);
-            if (!formC || !formC.state.isLoaded) {
-              return createVNode("div", null, [ibiz.i18n.t("control.form.repeaterGrid.absentOrLoad")]);
+            if (!this.controller.enableDelete) {
+              return createVNode("span", null, [$index + 1]);
             }
-            const formItemC = formC.formItems.find((x) => x.name === item.id);
-            let editor = null;
-            if (!formItemC.editorProvider) {
-              editor = createVNode(resolveComponent("not-supported-editor"), {
-                "modelData": item.editor
-              }, null);
-            } else {
-              const component = resolveComponent(formItemC.editorProvider.formEditor);
-              editor = 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), 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 createVNode(resolveComponent("iBizGridEditItem"), {
-              "error": formItemC.state.error,
-              "required": formItemC.state.required
-            }, _isSlot(editor) ? editor : {
-              default: () => [editor]
-            });
+            columnWidth = "".concat(width, "px");
           }
-        });
-      })]
+          return createVNode(resolveComponent("el-table-column"), mergeProps({
+            "label": item.caption,
+            "prop": item.id
+          }, {
+            [widthName]: columnWidth
+          }, {
+            "align": "center"
+          }), {
+            default: (opts) => {
+              const {
+                $index
+              } = opts;
+              const formC = toRaw(this.formControllers[$index]);
+              if (!formC || !formC.state.isLoaded) {
+                return 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 = createVNode(resolveComponent("not-supported-editor"), {
+                  "modelData": item.editor
+                }, null);
+              } else {
+                const component = resolveComponent(formItemC.editorProvider.formEditor);
+                editor = 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 createVNode(resolveComponent("iBizGridEditItem"), {
+                "error": formItemC.state.error,
+                "required": formItemC.state.required
+              }, _isSlot(editor) ? editor : {
+                default: () => [editor]
+              });
+            }
+          });
+        })];
+      },
+      append: () => {
+        return [tableHeight && withDirectives(createVNode("div", {
+          "infinite-scroll-distance": 20
+        }, null), [[resolveDirective("infinite-scroll"), () => this.loadMore()]])];
+      }
     })]);
   }
 });

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid2/repeater-grid2.css

@@ -0,0 +1 @@
+.ibiz-repeater-grid2{--ibiz-repeater-grid2-row-height:57px;--ibiz-repeater-grid2-index-cell-padding:var(--ibiz-spacing-extra-tight);--ibiz-repeater-grid2-btn-size:var(--ibiz-width-icon-large);--ibiz-repeater-grid2-btn-color:var(--ibiz-color-text-2);--ibiz-repeater-grid2-btn-border:1px solid var(--ibiz-color-border);--ibiz-repeater-grid2-btn-margin-left:var(--ibiz-spacing-tight);--ibiz-repeater-grid2-btn-hover-color:var(--ibiz-color-primary-hover);--ibiz-repeater-grid2-btn-hover-border:1px solid var(--ibiz-color-primary-hover);position:relative;width:100%;--ibiz-grid-column-justify-content:center}.ibiz-repeater-grid2__drag-icon{cursor:move}.ibiz-repeater-grid2__sortable-ghost{opacity:.5}.ibiz-repeater-grid2 .el-table__row{height:var(--ibiz-repeater-grid2-row-height)}.ibiz-repeater-grid2-index .cell{padding:var(--ibiz-repeater-grid2-index-cell-padding)}.ibiz-repeater-grid2-action-group{display:flex;align-items:center;justify-content:center}.ibiz-repeater-grid2-action-group ion-icon{font-size:var(--ibiz-repeater-grid2-btn-size);color:var(--ibiz-repeater-grid2-btn-color);cursor:pointer;border:var(--ibiz-repeater-grid2-btn-border)}.ibiz-repeater-grid2-action-group ion-icon+ion-icon{margin-left:var(--ibiz-repeater-grid2-btn-margin-left)}.ibiz-repeater-grid2-action-group ion-icon:hover{color:var(--ibiz-repeater-grid2-btn-hover-color);border:var(--ibiz-repeater-grid2-btn-hover-border)}