@ibiz-template/mob-vue3-components 0.7.41-alpha.19 → 0.7.41-alpha.20

package/lib/control/app-menu-icon-view/app-menu-icon-view.cjs

@@ -3,9 +3,15 @@
 var vue = require('vue');
 var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
+var ramda = require('ramda');
+var lodashEs = require('lodash-es');
+var menuRenderUtil = require('../app-menu/menu-render-util.cjs');
 require('./app-menu-icon-view.css');
 
 "use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
 const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizAppMenuIconViewControl",
   props: {
@@ -26,55 +32,109 @@ const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup() {
+    var _a;
     const c = vue3Util.useControlController((...args) => new runtime.AppMenuController(...args));
+    const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}-${(_a = c.model.controlStyle) == null ? void 0 : _a.toLowerCase()}`);
     const {
-      controlClass,
-      ns
-    } = vue3Util.prepareControl(c);
-    const columnNum = vue.computed(() => {
-      return 5;
-    });
+      onCustomizedClick
+    } = menuRenderUtil.useMenuRender(c);
+    const renderMenuItem = (menuItem) => {
+      if (menuItem.hidden === true) {
+        return null;
+      }
+      const counterNum = menuItem.counterId ? c.state.counterData[menuItem.counterId] : null;
+      let renderItem = null;
+      switch (menuItem.itemType) {
+        case "MENUITEM":
+          if (lodashEs.isArray(menuItem.appMenuItems)) {
+            renderItem = vue.createVNode(vue.resolveComponent("van-grid-item"), {
+              "class": ns.e("group-item"),
+              "text": menuItem.caption
+            }, {
+              default: () => {
+                return vue.createVNode("div", {
+                  "class": ns.em("group-item", "container")
+                }, [vue.createVNode("div", {
+                  "class": ns.em("group-item", "header")
+                }, [[vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                  "icon": menuItem.sysImage
+                }, null), vue.createVNode("span", {
+                  "class": ns.em("group-item", "caption")
+                }, [menuItem.caption]), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+                  "class": ns.em("group-item", "counter"),
+                  "value": counterNum
+                }, null)]]), vue.createVNode(vue.resolveComponent("van-grid"), {
+                  "clickable": true,
+                  "column-num": c.columnNum,
+                  "border": false,
+                  "class": ns.em("group-item", "content")
+                }, {
+                  default: () => {
+                    var _a2, _b;
+                    return [((_a2 = menuItem.appMenuItems) == null ? void 0 : _a2.length) ? (_b = menuItem.appMenuItems) == null ? void 0 : _b.map((_item) => renderMenuItem(_item)) : vue.createVNode("div", {
+                      "class": [ns.b("no-data")]
+                    }, [ibiz.i18n.t("control.appmenu.noData")])];
+                  }
+                })]);
+              }
+            });
+          } else {
+            renderItem = vue.createVNode(vue.resolveComponent("van-grid-item"), {
+              "class": ns.e("item"),
+              "onClick": (event) => c.onClickMenuItem(menuItem.id, event, false)
+            }, {
+              default: () => {
+                const content = [vue.createVNode("div", {
+                  "class": ns.em("item", "icon")
+                }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                  "icon": menuItem.sysImage || menuRenderUtil.getDefaultIconVal()
+                }, null), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+                  "class": ns.em("item", "counter"),
+                  "value": counterNum
+                }, null)]), vue.createVNode("span", {
+                  "class": ns.em("item", "caption")
+                }, [menuItem.caption])];
+                return vue.createVNode("div", {
+                  "class": ns.em("item", "content")
+                }, [content]);
+              }
+            });
+          }
+          break;
+        default:
+          break;
+      }
+      return renderItem;
+    };
     return {
-      controlClass,
       c,
-      columnNum,
-      ns
+      ns,
+      renderMenuItem,
+      onCustomizedClick
     };
   },
   render() {
+    var _a;
+    let _slot;
     const {
-      model
+      model,
+      state
     } = this.c;
-    const {
-      controlStyle
-    } = model;
-    return vue.createVNode(vue.resolveComponent("van-grid"), {
+    if (!state.isCreated)
+      return;
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.m((_a = this.modelData.id) == null ? void 0 : _a.toLocaleLowerCase())]
+    }, [vue.createVNode(vue.resolveComponent("van-grid"), {
       "clickable": true,
-      "column-num": this.columnNum,
-      "border": false,
-      "class": [this.ns.b(), this.ns.b(controlStyle.toLowerCase()), this.ns.m(this.modelData.id)]
-    }, {
-      default: () => {
-        var _a;
-        return [(_a = model == null ? void 0 : model.appMenuItems) == null ? void 0 : _a.map((item) => {
-          return item.itemType === "MENUITEM" && item.hidden !== true && vue.createVNode(vue.resolveComponent("van-grid-item"), {
-            "class": this.ns.b("item"),
-            "text": item.caption,
-            "onClick": (event) => this.c.onClickMenuItem(item.id, event, false)
-          }, {
-            icon: () => {
-              return vue.createVNode("div", {
-                "class": this.ns.b("icon")
-              }, [item.sysImage ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                "icon": item.sysImage
-              }, null) : vue.createVNode(vue.resolveComponent("van-icon"), {
-                "name": "setting-o"
-              }, null)]);
-            }
-          });
-        })];
-      }
-    });
+      "column-num": this.c.columnNum,
+      "border": false
+    }, _isSlot(_slot = state.mobMenuItems.map((item) => this.renderMenuItem(item))) ? _slot : {
+      default: () => [_slot]
+    }), model.enableCustomized && vue.createVNode(vue.resolveComponent("iBizFloatButton"), {
+      "class": this.ns.e("icon-container"),
+      "align": this.c.customizedAlign,
+      "onClick": this.onCustomizedClick
+    }, null)]);
   }
 });
 

package/lib/control/app-menu-icon-view/app-menu-icon-view.css

@@ -1 +1 @@
-.ibiz-control-appmenu-iconview{--ibiz-control-appmenu-icon-width:100%;--ibiz-control-appmenu-icon-view-icon-size:2.1875rem;--ibiz-control-appmenu-icon-view-icon-margin:0.3125rem;--ibiz-control-appmenu-icon-color:var(--ibiz-color-text-0)}.ibiz-control-appmenu-iconview .van-grid-item__text{display:-webkit-box;flex:1;height:-moz-fit-content;height:fit-content;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.ibiz-control-appmenu-iconview .van-badge__wrapper{display:flex;justify-content:center;width:100%}.ibiz-control-appmenu-iconview .van-grid-item__content--clickable:active{background-color:inherit}.ibiz-control-appmenu-iconview .ibiz-control-appmenu-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-icon-view-icon-size);height:var(--ibiz-control-appmenu-icon-view-icon-size);margin-bottom:var(--ibiz-control-appmenu-icon-view-icon-margin);font-size:var(--ibiz-control-appmenu-icon-view-icon-size);color:var(--ibiz-control-appmenu-icon-color)}.ibiz-control-appmenu-iconview .ibiz-control-appmenu-icon .ibiz-icon{width:100%;height:100%;color:var(--ibiz-control-appmenu-icon-color)}
+.ibiz-control-appmenu-iconview{--ibiz-control-appmenu-iconview-color-bg:var(--ibiz-color-bg-2);--ibiz-control-appmenu-iconview-color-item-text:var(--ibiz-color-text-0);--ibiz-control-appmenu-iconview-color-nodata-ph-item-text:var(--ibiz-color-text-0);--ibiz-control-appmenu-iconview-color-group-item-bg:var(--ibiz-color-bg-0);--ibiz-control-appmenu-iconview-color-group-item-text:var(--ibiz-color-text-1);--ibiz-control-appmenu-iconview-spacing-item-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-control-appmenu-iconview-spacing-item-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-iconview-spacing-nodata-ph-item-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-iconview-spacing-group-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-iconview-spacing-group-item-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-control-appmenu-iconview-spacing-group-item-counter-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-control-appmenu-iconview-font-item-text-font-size:var(--ibiz-font-size-small);--ibiz-control-appmenu-iconview-font-item-icon-font-size:var(--ibiz-height-control-default);--ibiz-control-appmenu-iconview-font-nodata-ph-item-font-size:var(--ibiz-font-size-regular);--ibiz-control-appmenu-iconview-font-group-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-iconview-position-item-counter-left:calc(100% - var(--ibiz-spacing-tight));--ibiz-control-appmenu-iconview-icon-group-item-icon-size:var(--ibiz-width-icon-medium);--ibiz-control-appmenu-iconview-line-clamp-item-caption:2;--ibiz-control-appmenu-iconview-icon-item-icon-size:var(--ibiz-height-control-default);background-color:var(--ibiz-control-appmenu-iconview-color-bg)}.ibiz-control-appmenu-iconview__item--content{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:var(--ibiz-control-appmenu-iconview-spacing-item-padding);color:var(--ibiz-control-appmenu-iconview-color-item-text)}.ibiz-control-appmenu-iconview__item--icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-iconview-icon-item-icon-size);margin-bottom:var(--ibiz-control-appmenu-iconview-spacing-item-icon-margin);font-size:var(--ibiz-control-appmenu-iconview-font-item-icon-font-size)}.ibiz-control-appmenu-iconview__item--icon .ibiz-icon{width:100%;height:100%}.ibiz-control-appmenu-iconview__item--icon ion-icon.ibiz-icon{width:1em;max-width:100%;height:1em;max-height:100%}.ibiz-control-appmenu-iconview__item--icon .fa.ibiz-icon{width:auto;max-width:100%;height:auto;max-height:100%}.ibiz-control-appmenu-iconview__item--counter{position:absolute;top:0;left:var(--ibiz-control-appmenu-iconview-position-item-counter-left);transform:translateY(-50%)}.ibiz-control-appmenu-iconview__item--caption{display:-webkit-box;flex:1;height:-moz-fit-content;height:fit-content;overflow:hidden;font-size:var(--ibiz-control-appmenu-iconview-font-item-text-font-size);text-overflow:ellipsis;-webkit-line-clamp:var(--ibiz-control-appmenu-iconview-line-clamp-item-caption);line-clamp:var(--ibiz-control-appmenu-iconview-line-clamp-item-caption);-webkit-box-orient:vertical}.ibiz-control-appmenu-iconview__group-item{flex-basis:100%!important}.ibiz-control-appmenu-iconview__group-item--container{width:100%}.ibiz-control-appmenu-iconview__group-item--header{display:flex;align-items:center;padding:var(--ibiz-control-appmenu-iconview-spacing-group-item-padding);font-size:var(--ibiz-control-appmenu-iconview-font-group-item-font-size);color:var(--ibiz-control-appmenu-iconview-color-group-item-text);background-color:var(--ibiz-control-appmenu-iconview-color-group-item-bg)}.ibiz-control-appmenu-iconview__group-item--header .ibiz-icon{min-width:var(--ibiz-control-appmenu-iconview-icon-group-item-icon-size);margin:var(--ibiz-control-appmenu-iconview-spacing-group-item-icon-margin)}.ibiz-control-appmenu-iconview__group-item--content{display:flex;width:100%}.ibiz-control-appmenu-iconview__group-item--counter{margin:var(--ibiz-control-appmenu-iconview-spacing-group-item-counter-margin)}.ibiz-control-appmenu-iconview .van-grid-item__content{padding:0}.ibiz-control-appmenu-iconview-no-data{width:100%;padding:var(--ibiz-control-appmenu-iconview-spacing-nodata-ph-item-padding);font-size:var(--ibiz-control-appmenu-iconview-font-nodata-ph-item-font-size);color:var(--ibiz-control-appmenu-iconview-color-nodata-ph-item-text);text-align:center}

package/lib/control/app-menu-list-view/app-menu-list-view.cjs

@@ -3,6 +3,9 @@
 var vue = require('vue');
 var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
+var ramda = require('ramda');
+var lodashEs = require('lodash-es');
+var menuRenderUtil = require('../app-menu/menu-render-util.cjs');
 require('./app-menu-list-view.css');
 
 "use strict";
@@ -29,63 +32,74 @@ const AppMenuListViewControl = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup() {
+    var _a;
     const c = vue3Util.useControlController((...args) => new runtime.AppMenuController(...args));
+    const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}-${(_a = c.model.controlStyle) == null ? void 0 : _a.toLowerCase()}`);
     const {
-      controlClass,
-      ns
-    } = vue3Util.prepareControl(c);
-    return {
-      controlClass,
-      c,
-      ns
-    };
-  },
-  render() {
-    const {
-      model
-    } = this.c;
-    const {
-      controlStyle
-    } = model;
+      onCustomizedClick
+    } = menuRenderUtil.useMenuRender(c);
     const renderMenuItem = (item) => {
-      var _a;
       if (item.hidden === true) {
         return null;
       }
+      const counterNum = item.counterId ? c.state.counterData[item.counterId] : null;
       let renderItem = null;
       switch (item.itemType) {
         case "MENUITEM":
-          if ((_a = item.appMenuItems) == null ? void 0 : _a.length) {
-            let _slot;
+          if (lodashEs.isArray(item.appMenuItems)) {
             renderItem = vue.createVNode(vue.resolveComponent("van-cell-group"), {
-              "class": this.ns.b("group"),
+              "class": ns.e("group"),
               "title": item.caption
-            }, _isSlot(_slot = item.appMenuItems.map((child) => {
-              return renderMenuItem(child);
-            })) ? _slot : {
-              default: () => [_slot]
+            }, {
+              default: () => {
+                var _a2, _b;
+                if (!((_a2 = item.appMenuItems) == null ? void 0 : _a2.length)) {
+                  return vue.createVNode("div", {
+                    "class": [ns.b("no-data")]
+                  }, [ibiz.i18n.t("control.appmenu.noData")]);
+                }
+                return (_b = item.appMenuItems) == null ? void 0 : _b.map((child) => {
+                  return renderMenuItem(child);
+                });
+              },
+              title: () => {
+                return vue.createVNode("div", {
+                  "class": ns.e("group-title")
+                }, [item.sysImage ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                  "icon": item.sysImage
+                }, null) : null, vue.createVNode("span", {
+                  "class": ns.em("group-title", "caption")
+                }, [item.caption]), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+                  "class": ns.em("group-title", "counter"),
+                  "value": counterNum
+                }, null)]);
+              }
             });
           } else {
             renderItem = vue.createVNode(vue.resolveComponent("van-cell"), {
-              "class": [this.ns.b("item")],
+              "class": [ns.e("item")],
               "is-link": true,
               "center": true,
               "clickable": true,
               "title": item.caption,
               "onClick": async (event) => {
-                try {
-                  await this.c.onClickMenuItem(item.id, event, false);
-                } catch (error) {
-                  ibiz.log.error(error);
-                }
+                await c.onClickMenuItem(item.id, event, false);
               }
             }, {
               icon: () => {
                 return item.sysImage && vue.createVNode("div", {
-                  "class": this.ns.b("icon")
+                  "class": ns.em("item", "icon")
                 }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
                   "icon": item.sysImage
                 }, null)]);
+              },
+              value: () => {
+                return vue.createVNode("div", {
+                  "class": ns.em("item", "value")
+                }, [!ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+                  "class": ns.em("item", "counter"),
+                  "value": counterNum
+                }, null)]);
               }
             });
           }
@@ -98,16 +112,31 @@ const AppMenuListViewControl = /* @__PURE__ */ vue.defineComponent({
       }
       return renderItem;
     };
-    return vue.createVNode(vue.resolveComponent("van-list"), {
-      "class": [this.ns.b(), this.ns.b(controlStyle == null ? void 0 : controlStyle.toLowerCase()), this.ns.m(this.modelData.id)]
-    }, {
-      default: () => {
-        var _a;
-        return [(_a = model == null ? void 0 : model.appMenuItems) == null ? void 0 : _a.map((item) => {
-          return renderMenuItem(item);
-        })];
-      }
-    });
+    return {
+      c,
+      ns,
+      renderMenuItem,
+      onCustomizedClick
+    };
+  },
+  render() {
+    var _a;
+    let _slot;
+    const {
+      model,
+      state
+    } = this.c;
+    if (!state.isCreated)
+      return;
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.m((_a = this.modelData.id) == null ? void 0 : _a.toLocaleLowerCase())]
+    }, [vue.createVNode(vue.resolveComponent("van-list"), null, _isSlot(_slot = state.mobMenuItems.map((item) => this.renderMenuItem(item))) ? _slot : {
+      default: () => [_slot]
+    }), model.enableCustomized && vue.createVNode(vue.resolveComponent("iBizFloatButton"), {
+      "class": this.ns.e("icon-container"),
+      "align": this.c.customizedAlign,
+      "onClick": this.onCustomizedClick
+    }, null)]);
   }
 });
 

package/lib/control/app-menu-list-view/app-menu-list-view.css

@@ -1 +1 @@
-.ibiz-control-appmenu-listview{--ibiz-control-appmenu-list-view-icon-size:var(--ibiz-font-size-header-4);--ibiz-control-appmenu-list-view-font-size:var(--ibiz-font-size-regular);--ibiz-control-appmenu-list-view-color:var(--ibiz-font-size-regular);--ibiz-control-appmenu-list-view-padding:0;--ibiz-control-appmenu-list-view-item-padding:0.5rem 1rem;--ibiz-control-appmenu-list-view-item-color:var(--ibiz-color-text-1);--van-cell-border-color:var(--ibiz-color-border);--van-divider-margin:0.125rem;--van-divider-border-color:transparent;--van-cell-horizontal-padding:0.75rem;--van-cell-active-color:transparent;--van-cell-right-icon-color:var(--van-gray-6);--van-cell-group-title-color:var(--ibiz-color-text-2);--van-cell-group-title-padding:0.5rem 1rem;--van-cell-group-title-font-size:var(--ibiz-font-size-regular);--van-cell-group-title-line-height:var(--van-cell-line-height);border-radius:var(--ibiz-border-radius-small)}.ibiz-control-appmenu-listview .ibiz-control-appmenu-item{padding:var(--ibiz-control-appmenu-list-view-item-padding);font-size:var(--ibiz-control-appmenu-list-view-font-size);color:var(--ibiz-control-appmenu-list-view-item-color)}.ibiz-control-appmenu-listview .ibiz-control-appmenu-item:last-child{border-width:0}.ibiz-control-appmenu-listview .van-cell::after{left:0}.ibiz-control-appmenu-listview .ibiz-control-appmenu-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-list-view-icon-size);margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-control-appmenu-list-view-icon-size)}.ibiz-control-appmenu-listview .ibiz-control-appmenu-icon .ibiz-icon{display:flex;align-items:center}.ibiz-control-appmenu-listview .van-cell-group__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--ibiz-color-bg-0)}.ibiz-control-appmenu-listview .van-hairline--top-bottom::after{border:none}
+.ibiz-control-appmenu-listview{--ibiz-control-appmenu-listview-color-item-bg:var(--ibiz-color-bg-2);--ibiz-control-appmenu-listview-color-item-text:var(--ibiz-color-text-0);--ibiz-control-appmenu-listview-color-nodata-ph-item-text:var(--ibiz-color-text-0);--ibiz-control-appmenu-listview-spacing-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-listview-spacing-group-item-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-control-appmenu-listview-spacing-icon-counter-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-control-appmenu-listview-spacing-item-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-control-appmenu-listview-spacing-nodata-ph-item-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-listview-font-item-font-size:var(--ibiz-font-size-regular);--ibiz-control-appmenu-listview-font-icon-font-size:var(--ibiz-font-size-regular);--ibiz-control-appmenu-listview-font-nodata-ph-item-font-size:var(--ibiz-font-size-regular);--ibiz-control-appmenu-listview-icon-item-icon-size:var(--ibiz-font-size-regular)}.ibiz-control-appmenu-listview__group-title{display:flex;align-items:center}.ibiz-control-appmenu-listview__group-title .ibiz-icon{margin:var(--ibiz-control-appmenu-listview-spacing-group-item-icon-margin)}.ibiz-control-appmenu-listview__group-title--counter{margin:var(--ibiz-control-appmenu-listview-spacing-icon-counter-margin)}.ibiz-control-appmenu-listview__item.ibiz-control-appmenu-listview__item{padding:var(--ibiz-control-appmenu-listview-spacing-item-padding);font-size:var(--ibiz-control-appmenu-listview-font-item-font-size);color:var(--ibiz-control-appmenu-listview-color-item-text);background-color:var(--ibiz-control-appmenu-listview-color-item-bg)}.ibiz-control-appmenu-listview__item.ibiz-control-appmenu-listview__item:last-child{border-width:0}.ibiz-control-appmenu-listview__item.ibiz-control-appmenu-listview__item::after{left:0}.ibiz-control-appmenu-listview__item--value{display:flex;align-items:center;justify-content:flex-end}.ibiz-control-appmenu-listview__item--icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-listview-icon-item-icon-size);margin:var(--ibiz-control-appmenu-listview-spacing-item-icon-margin);font-size:var(--ibiz-control-appmenu-listview-font-icon-font-size)}.ibiz-control-appmenu-listview__item--icon .ibiz-icon{display:flex;align-items:center;margin-right:var(--ibiz-control-appmenu-listview-icon-text-margin)}.ibiz-control-appmenu-listview__item .van-cell__title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ibiz-control-appmenu-listview__item .van-cell__value{width:auto;flex:unset;margin-left:auto}.ibiz-control-appmenu-listview-no-data{padding:var(--ibiz-control-appmenu-listview-spacing-nodata-ph-item-padding);font-size:var(--ibiz-control-appmenu-listview-font-nodata-ph-item-font-size);color:var(--ibiz-control-appmenu-listview-color-nodata-ph-item-text);text-align:center}

package/lib/control/calendar/calendar.cjs

@@ -4,17 +4,20 @@ 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 isBetween = require('../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/isBetween.cjs');
 var index = require('../../node_modules/.pnpm/vue3-hash-calendar@1.1.3_vue@3.5.22/node_modules/vue3-hash-calendar/es/index.cjs');
 require('vue3-hash-calendar/es/index.css');
 var dateUtil = require('./date-util.cjs');
-require('./calendar.css');
 require('../../util/index.cjs');
+require('./calendar.css');
 var usePopstateUtil = require('../../util/use-popstate-util/use-popstate-util.cjs');
 
 "use strict";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
+dayjs.extend(isBetween.default);
 const CalendarControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizCalendarControl",
   components: {
@@ -69,6 +72,13 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.CalendarController(...args));
     const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}`);
     const loadItems = vue.ref([]);
+    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 visible = vue.ref(false);
     const calendar = vue.ref();
     const currentDate = vue.ref();
@@ -115,38 +125,34 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         backgroundColor: data.bkColor
       };
     };
-    const markerData = vue.computed(() => {
-      const filterSameDayAndUniqueType = (itemData, index, arr) => {
-        const dateString = dayjs(new Date(itemData.beginTime)).format("YYYY-MM-DD");
-        const isSameDayAndUniqueType = arr.findIndex((item) => dateString === dayjs(new Date(item.beginTime)).format("YYYY-MM-DD") && item.itemType === itemData.itemType) === index;
-        return isSameDayAndUniqueType;
-      };
-      const date = Object.values(markDateItems.value).flat().filter(filterSameDayAndUniqueType).map((item) => {
-        const _date = new Date(item.beginTime);
-        return {
-          date: item.beginTime,
-          type: item.itemType,
-          day: _date.getDate(),
-          month: _date.getMonth(),
-          year: _date.getFullYear(),
-          data: item
-        };
-      });
-      return date;
-    });
-    c.evt.on("onMounted", () => {
-      loadMarkerData(c.state.selectedDate || /* @__PURE__ */ new Date());
-      loadData(c.state.selectedDate || /* @__PURE__ */ new Date());
-    });
-    const dateChange = (newDate) => {
+    const dateChange = async (newDate) => {
       c.state.selectedDate = newDate;
-      loadData(c.state.selectedDate);
+      await loadData(c.state.selectedDate);
       const items = markDateItems.value[dayjs(newDate).format("YYYY-MM")];
-      if (items) {
+      if (items)
         return;
-      }
-      loadMarkerData(c.state.selectedDate);
+      await loadMarkerData(c.state.selectedDate);
+    };
+    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
+        });
     };
+    vue.watch(() => c.state.selectedDate, (newVal, oldVal) => {
+      var _a;
+      if (newVal && newVal !== oldVal) {
+        (_a = calendar.value) == null ? void 0 : _a.reset(c.state.selectedDate);
+      }
+    }, {
+      deep: true,
+      immediate: true
+    });
     const onCustom = () => {
       const temptime = dayjs(c.state.selectedDate).format("YYYY-MM-DD").split("-");
       currentDate.value = temptime;
@@ -165,30 +171,43 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       visible.value = false;
     };
     usePopstateUtil.usePopstateListener(closeDrawer);
+    const calcMarkerByDate = (time) => {
+      const date = dayjs().set("year", time.year).set("month", time.month).set("date", time.day);
+      const markers = Object.values(markDateItems.value).flat().filter((item) => date.isBetween(item.beginTime, item.endTime, "D", "[]"));
+      const map = /* @__PURE__ */ new Map();
+      markers.forEach((item) => {
+        if (!map.has(item.itemType))
+          map.set(item.itemType, item);
+      });
+      return Array.from(map.values());
+    };
     return {
       c,
       ns,
-      markerData,
-      loadItems,
       visible,
       calendar,
+      loadItems,
       currentDate,
+      infiniteScroll,
+      disabledLodeMore,
+      toDay,
+      onCustom,
       onConfirm,
-      calcItemStyle,
       dateChange,
       closeDrawer,
-      onCustom,
-      toDay
+      calcItemStyle,
+      handleScrollLoad,
+      calcMarkerByDate
     };
   },
   render() {
     const renderMarker = (date) => {
-      const arr = this.markerData.filter((item) => item.day === date.day && item.month === date.month && item.year === date.year);
-      return arr.map((item) => {
-        const style = this.calcItemStyle(item.data);
+      const markers = this.calcMarkerByDate(date);
+      return markers.map((item) => {
+        const style = this.calcItemStyle(item);
         return vue.createVNode("div", {
-          "class": [this.ns.em("mark", "item"), this.ns.em("mark", item.type)],
-          "style": style
+          "style": style,
+          "class": [this.ns.em("mark", "item"), this.ns.em("mark", item.itemType)]
         }, null);
       });
     };
@@ -200,7 +219,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [this.ns.b("item"), this.ns.is("active", findIndex !== -1)];
+      const itemClass = [this.ns.b("item"), this.ns.bm("item", "panel"), this.ns.is("active", findIndex !== -1)];
       return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
         "class": itemClass,
         "data": item.deData,
@@ -217,7 +236,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         }
       }, null);
     };
-    const renderDefaultItem = (item) => {
+    const renderDefaultItem = (item, isLink = true) => {
       const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
@@ -225,7 +244,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode(vue.resolveComponent("van-cell"), {
         "class": itemClass,
         "key": item.deData.srfkey,
-        "is-link": true,
+        "is-link": isLink,
         "title": item.text || "",
         "onClick": () => this.c.onRowClick(item)
       }, null);
@@ -261,7 +280,8 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     };
     const renderHeaderToolbar = () => {
       return vue.createVNode("div", {
-        "class": this.ns.b("header-toolbar")
+        "class": this.ns.b("header-toolbar"),
+        "onClick": (evt) => evt.stopPropagation()
       }, [vue.createVNode("div", {
         "class": this.ns.be("header-toolbar", "select-day")
       }, [dayjs(this.c.state.selectedDate).format("YYYY\u5E74MM\u6708DD\u65E5")]), vue.createVNode("div", {
@@ -274,18 +294,15 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         "onClick": this.toDay
       }, [ibiz.i18n.t("control.calendar.today")])])]);
     };
-    return this.c.state.isCreated && vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "controller": this.c
-    }, {
-      default: () => [vue.createVNode("div", {
+    const renderCalendarContent = () => {
+      return [vue.createVNode("div", {
         "class": this.ns.b("content")
       }, [vue.createVNode(index.default, {
         "ref": "calendar",
-        "show-week-view": true,
         "pickerType": "date",
-        "onChange": (date) => {
-          this.dateChange(date);
-        }
+        "onChange": (date) => this.dateChange(date),
+        "default-datetime": this.c.state.selectedDate,
+        "show-week-view": this.c.model.calendarStyle === "WEEK"
       }, {
         day: ({
           date
@@ -311,7 +328,11 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
               label = ibiz.i18n.t(calendarItem.nameLanguageRes.lanResTag, calendarItem.name);
             }
             return vue.createVNode(vue.resolveComponent("van-tab"), {
-              "title": label
+              "title": label,
+              "title-class": this.ns.be("footer", "tab-item"),
+              "title-style": {
+                [`--${this.ns.b()}-tab-bg`]: calendarItem.bkcolor
+              }
             }, {
               default: () => [vue.createVNode(vue.resolveComponent("van-list"), null, _isSlot(_slot = renderCalendarListByItemType(calendarItem.itemType)) ? _slot : {
                 default: () => [_slot]
@@ -336,7 +357,59 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
           "onCancel": this.closeDrawer,
           "title": ibiz.i18n.t("control.calendar.pickerDate")
         }, null)]
-      })]
+      })];
+    };
+    const renderTimeLine = () => {
+      if (this.c.state.items.length === 0)
+        return renderNoData();
+      const groupMap = /* @__PURE__ */ new Map();
+      const groups = [];
+      this.c.state.items.forEach((item) => {
+        const value = item[this.c.groupTimeField];
+        if (value) {
+          if (!groupMap.has(value))
+            groupMap.set(value, []);
+          groupMap.get(value).push(item);
+        }
+      });
+      groupMap.forEach((children, key) => {
+        groups.push({
+          key: `${key}`,
+          caption: key ? dayjs(key).format(this.c.timelineCaptionFormat) : `${key}`,
+          children
+        });
+      });
+      return vue.createVNode("div", {
+        "ref": "infiniteScroll",
+        "class": this.ns.b("timeline"),
+        "onScroll": lodashEs.debounce(this.handleScrollLoad, 300)
+      }, [groups.map((item) => {
+        return vue.createVNode("div", {
+          "class": this.ns.be("timeline", "item")
+        }, [vue.createVNode("div", {
+          "class": this.ns.bem("timeline", "item", "timespan")
+        }, [item.caption]), item.children.map((child) => {
+          var _a;
+          const model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((calendarItems) => {
+            return child.itemType === calendarItems.itemType;
+          });
+          const style = {};
+          if (model == null ? void 0 : model.bkcolor) {
+            Object.assign(style, {
+              [`--${this.ns.b()}-timeline-item-bg-color`]: model.bkcolor
+            });
+          }
+          return vue.createVNode("div", {
+            "class": this.ns.bem("timeline", "item", "content"),
+            "style": style
+          }, [(model == null ? void 0 : model.layoutPanel) ? renderPanelItem(child, model.layoutPanel) : renderDefaultItem(child, false)]);
+        })]);
+      })]);
+    };
+    return this.c.state.isCreated && vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+      "controller": this.c
+    }, {
+      default: () => [this.c.model.calendarStyle === "TIMELINE" ? renderTimeLine() : renderCalendarContent()]
     });
   }
 });