@ibiz-template/mob-vue3-components 0.7.41-alpha.19-lts.1 → 0.7.41-alpha.21

package/lib/common/tab-layout/tab-flow-layout/tab-flow-layout.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var tabLayoutUtil = require('../tab-layout-util.cjs');
+require('./tab-flow-layout.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const TabFlowLayout = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTabFlowLayout",
+  props: tabLayoutUtil.layoutProps,
+  emits: tabLayoutUtil.layoutEmits,
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("tab-flow-layout");
+    return {
+      ns
+    };
+  },
+  render() {
+    let _slot;
+    const indexList = this.tabPages.map((_tab) => _tab.text);
+    return vue.createVNode(vue.resolveComponent("van-index-bar"), {
+      "class": [this.ns.b(), this.ns.is(this.layoutMode, !!this.layoutMode)],
+      "sticky": false,
+      "index-list": indexList
+    }, _isSlot(_slot = this.tabPages.map((tab) => {
+      var _a, _b;
+      return vue.createVNode("div", {
+        "class": this.ns.e("group")
+      }, [vue.createVNode(vue.resolveComponent("van-index-anchor"), {
+        "index": tab.text
+      }, {
+        default: () => [this.layoutMode === "flow_noheader" ? vue.createVNode("div", {
+          "class": this.ns.e("group-header-ph")
+        }, null) : vue.createVNode("div", {
+          "class": this.ns.e("group-header")
+        }, [vue.createVNode(vue.resolveComponent("iBizInfoItem"), {
+          "class": this.ns.em("group-header", "content"),
+          "label": tab.text,
+          "icon": tab.icon,
+          "badgeFloat": false,
+          "badge": tab.counter
+        }, null)])]
+      }), vue.createVNode("div", {
+        "class": this.ns.e("group-content")
+      }, [(_b = (_a = this.$slots).groupContent) == null ? void 0 : _b.call(_a, tab)])]);
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+exports.TabFlowLayout = TabFlowLayout;

package/lib/common/tab-layout/tab-flow-layout/tab-flow-layout.css

@@ -0,0 +1 @@
+.ibiz-tab-flow-layout{--ibiz-tab-flow-layout-color-group-header-text:var(--ibiz-tab-layout-color-tab-text);--ibiz-tab-flow-layout-color-group-header-bg:var(--ibiz-color-bg-0);--ibiz-tab-flow-layout-color-group-noheader-bg:var(--ibiz-color-bg-0);--ibiz-tab-flow-layout-height-group-header-content-min-height:var(--ibiz-height-control-default);--ibiz-tab-flow-layout-spacing-group-header-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-tab-flow-layout-spacing-group-header-ph-padding:var(--ibiz-spacing-tight);--ibiz-tab-flow-layout-font-group-header-fontSize:var(--ibiz-tab-layout-font-tab-fontSize)}.ibiz-tab-flow-layout__group-header{padding:var(--ibiz-tab-flow-layout-spacing-group-header-padding);font-size:var(--ibiz-tab-flow-layout-font-group-header-fontSize);color:var(--ibiz-tab-flow-layout-color-group-header-text);background-color:var(--ibiz-tab-flow-layout-color-group-header-bg)}.ibiz-tab-flow-layout__group-header--content{min-height:var(--ibiz-tab-flow-layout-height-group-header-content-min-height)}.ibiz-tab-flow-layout .van-index-anchor{padding:0}.ibiz-tab-flow-layout.is-flow_noheader .ibiz-tab-flow-layout__group-header-ph{padding:var(--ibiz-tab-flow-layout-spacing-group-header-ph-padding);background-color:var(--ibiz-tab-flow-layout-color-group-noheader-bg)}

package/lib/common/tab-layout/tab-layout-util.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+"use strict";
+const layoutProps = {
+  // 分页绘制数据集合
+  tabPages: {
+    type: Array,
+    default: () => []
+  },
+  // 分页标识激活名称
+  activeName: {
+    type: String,
+    default: ""
+  },
+  // 布局模式
+  layoutMode: {
+    type: String,
+    default: "top"
+  }
+};
+const layoutEmits = {
+  /**
+   * @description 分页标识变更事件
+   */
+  tabChange: (_tabTag) => true
+};
+function useLayoutRender(emit) {
+  const onTabChange = (_tabTag) => {
+    emit("tabChange", _tabTag);
+  };
+  return {
+    onTabChange
+  };
+}
+
+exports.layoutEmits = layoutEmits;
+exports.layoutProps = layoutProps;
+exports.useLayoutRender = useLayoutRender;

package/lib/common/tab-layout/tab-layout.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var tabLayoutUtil = require('./tab-layout-util.cjs');
+var tabFlowLayout = require('./tab-flow-layout/tab-flow-layout.cjs');
+var tabSidebarLayout = require('./tab-sidebar-layout/tab-sidebar-layout.cjs');
+var tabDefaultLayout = require('./tab-default-layout/tab-default-layout.cjs');
+var tabDropdown = require('./tab-dropdown/tab-dropdown.cjs');
+require('./tab-layout.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const IBizTabLayout = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTabLayout",
+  props: tabLayoutUtil.layoutProps,
+  emits: tabLayoutUtil.layoutEmits,
+  setup(_props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("tab-layout");
+    const {
+      onTabChange
+    } = tabLayoutUtil.useLayoutRender(emit);
+    return {
+      ns,
+      onTabChange
+    };
+  },
+  render() {
+    const attrs = {
+      tabPages: this.tabPages,
+      activeName: this.activeName,
+      layoutMode: this.layoutMode,
+      onTabChange: this.onTabChange
+    };
+    let content = vue.createVNode(tabDefaultLayout.TabDefaultLayout, attrs, null);
+    if (this.layoutMode === "flow" || this.layoutMode === "flow_noheader") {
+      const slots = {};
+      if (this.$slots.groupContent)
+        Object.assign(slots, {
+          groupContent: this.$slots.groupContent
+        });
+      content = vue.createVNode(tabFlowLayout.TabFlowLayout, attrs, _isSlot(slots) ? slots : {
+        default: () => [slots]
+      });
+    }
+    if (["left", "right"].includes(this.layoutMode)) {
+      content = vue.createVNode(tabSidebarLayout.TabSidebarLayout, attrs, null);
+    }
+    if (["top_dropdownlist"].includes(this.layoutMode)) {
+      content = vue.createVNode(tabDropdown.TabDropdown, attrs, null);
+    }
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [content]);
+  }
+});
+
+exports.IBizTabLayout = IBizTabLayout;

package/lib/common/tab-layout/tab-layout.css

@@ -0,0 +1 @@
+.ibiz-tab-layout{--ibiz-tab-layout-color-tab-text:var(--ibiz-color-text-0);--ibiz-tab-layout-color-tab-text-active:var(--ibiz-color-primary);--ibiz-tab-layout-font-tab-fontSize:var(--ibiz-font-size-regular);width:100%;height:100%}

package/lib/common/tab-layout/tab-sidebar-layout/tab-sidebar-layout.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var tabLayoutUtil = require('../tab-layout-util.cjs');
+require('./tab-sidebar-layout.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const TabSidebarLayout = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTabSidebarLayout",
+  props: tabLayoutUtil.layoutProps,
+  emits: tabLayoutUtil.layoutEmits,
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("tab-sidebar-layout");
+    const activeIndex = vue.ref(0);
+    const {
+      onTabChange
+    } = tabLayoutUtil.useLayoutRender(emit);
+    const onSidebarChange = (index) => {
+      var _a;
+      activeIndex.value = index;
+      const tabTag = (_a = props.tabPages[index]) == null ? void 0 : _a.id;
+      onTabChange(tabTag);
+    };
+    return {
+      ns,
+      activeIndex,
+      onTabChange,
+      onSidebarChange
+    };
+  },
+  render() {
+    let _slot;
+    return vue.createVNode(vue.resolveComponent("van-sidebar"), {
+      "class": [this.ns.b(), this.ns.is(this.layoutMode, !!this.layoutMode)],
+      "modelValue": this.activeIndex,
+      "onUpdate:modelValue": ($event) => this.activeIndex = $event,
+      "onChange": this.onSidebarChange
+    }, _isSlot(_slot = this.tabPages.map((tab) => {
+      const isLongLabel = tab.text && tab.text.length > 3;
+      return vue.createVNode(vue.resolveComponent("van-sidebar-item"), null, {
+        title: () => vue.createVNode("div", {
+          "class": [this.ns.e("tab-item"), this.ns.is("long-label", !!isLongLabel)]
+        }, [vue.createVNode(vue.resolveComponent("iBizInfoItem"), {
+          "label": tab.text,
+          "icon": tab.icon,
+          "badge": tab.counter
+        }, null)])
+      });
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+exports.TabSidebarLayout = TabSidebarLayout;

package/lib/common/tab-layout/tab-sidebar-layout/tab-sidebar-layout.css

@@ -0,0 +1 @@
+.ibiz-tab-sidebar-layout{--ibiz-tab-sidebar-layout-color-bg:var(--ibiz-color-bg-0);--ibiz-tab-sidebar-layout-color-item-bg:var(--ibiz-color-bg-0);--ibiz-tab-sidebar-layout-width-tab-sidebar-layout:5.625rem;--ibiz-tab-sidebar-layout-height-tab-sidebar-layout:100%;--ibiz-tab-sidebar-layout-height-tab-item:var(--ibiz-height-control-default);--ibiz-tab-sidebar-layout-width-badge-min-width:1.25rem;--ibiz-tab-sidebar-layout-spacing-padding:var(--ibiz-spacing-tight) 0;--ibiz-tab-sidebar-layout-spacing-sidebar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-tight);--ibiz-tab-sidebar-layout-font-tab-fontSize:var(--ibiz-tab-layout-font-tab-fontSize);width:var(--ibiz-tab-sidebar-layout-width-tab-sidebar-layout);height:var(--ibiz-tab-sidebar-layout-height-tab-sidebar-layout);padding:var(--ibiz-tab-sidebar-layout-spacing-padding);background-color:var(--ibiz-tab-sidebar-layout-color-bg)}.ibiz-tab-sidebar-layout__tab-item{display:flex;align-items:center;width:100%;min-height:var(--ibiz-tab-sidebar-layout-height-tab-item);font-size:var(--ibiz-tab-sidebar-layout-font-tab-fontSize)}.ibiz-tab-sidebar-layout__tab-item .ibiz-info-item{display:inline-flex;max-width:100%}.ibiz-tab-sidebar-layout__tab-item .ibiz-info-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-tab-sidebar-layout__tab-item.is-long-label:has(.ibiz-info-item__badge){max-width:calc(100% - var(--ibiz-tab-sidebar-layout-width-badge-min-width))}.ibiz-tab-sidebar-layout .van-sidebar-item{display:flex;align-items:center;padding:var(--ibiz-tab-sidebar-layout-spacing-sidebar-item-padding);overflow:unset}.ibiz-tab-sidebar-layout .van-sidebar-item:not(.van-sidebar-item--select){background-color:var(--ibiz-tab-sidebar-layout-color-item-bg)}.ibiz-tab-sidebar-layout .van-sidebar-item.van-sidebar-item--select{background-color:var(--ibiz-tab-sidebar-layout-color-bg-active)}.ibiz-tab-sidebar-layout .van-sidebar-item__text{width:100%;height:100%}

package/lib/common/view-message/view-message.cjs

@@ -0,0 +1,133 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var qxUtil = require('qx-util');
+require('./view-message.css');
+
+"use strict";
+const ViewMessage = /* @__PURE__ */ vue.defineComponent({
+  name: "ViewMessage",
+  props: {
+    messages: {
+      type: Array
+    },
+    scroll: {
+      type: Boolean,
+      default: false
+    },
+    context: {
+      type: Object,
+      required: false
+    },
+    params: {
+      type: Object,
+      required: false
+    },
+    controller: {
+      type: Object
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("view-message");
+    const getTypeIcon = (messageType) => {
+      switch (messageType) {
+        case "WARN":
+          return "warning-o";
+        case "ERROR":
+          return "close";
+        default:
+          return "info-o";
+      }
+    };
+    const items = vue.ref([]);
+    const initialIndex = vue.ref(0);
+    const uuid = vue.ref("");
+    const isHiddenContainer = vue.ref(false);
+    vue.watch(() => props.messages, () => {
+      initialIndex.value = 0;
+      uuid.value = qxUtil.createUUID();
+      if (Array.isArray(props.messages)) {
+        items.value = props.messages.filter((item) => item.title || item.message || item.layoutPanel && item.data).map((item) => {
+          return {
+            ...item
+          };
+        });
+        isHiddenContainer.value = false;
+      } else {
+        items.value = [];
+        isHiddenContainer.value = true;
+      }
+    }, {
+      immediate: true
+    });
+    const container = vue.ref(null);
+    const carouselHeight = vue.ref("");
+    const handleAlertClose = (index) => {
+      var _a;
+      items.value[index].hidden = true;
+      const isHiddenCarouse = items.value.every((item2) => item2.hidden);
+      if (isHiddenCarouse) {
+        isHiddenContainer.value = true;
+      }
+      uuid.value = qxUtil.createUUID();
+      const item = items.value[index];
+      (_a = props.controller) == null ? void 0 : _a.setMsgRemoveModeStorage(item);
+    };
+    const handleChange = (index) => {
+      initialIndex.value = index;
+    };
+    return {
+      ns,
+      getTypeIcon,
+      items,
+      container,
+      carouselHeight,
+      initialIndex,
+      uuid,
+      isHiddenContainer,
+      handleAlertClose,
+      handleChange
+    };
+  },
+  render() {
+    const renderLayoutPanel = (item) => {
+      return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
+        "data": item.data,
+        "modelData": item.layoutPanel,
+        "context": this.context,
+        "params": this.params
+      }, null);
+    };
+    const renderMessages = () => {
+      return vue.createVNode("div", {
+        "class": [this.ns.b(), this.isHiddenContainer && this.ns.m("hidden")]
+      }, [this.items.map((item, index) => {
+        var _a, _b;
+        return vue.createVNode(vue.resolveComponent("van-notice-bar"), {
+          "class": [this.ns.b("item"), (_a = item.sysCss) == null ? void 0 : _a.cssName],
+          "type": (_b = item.messageType) == null ? void 0 : _b.toLowerCase(),
+          "wrapable": true,
+          "scrollable": this.scroll,
+          "mode": item.removeMode !== 0 ? "closeable" : "",
+          "left-icon": this.getTypeIcon(item.messageType),
+          "onClose": () => {
+            this.handleAlertClose(index);
+          },
+          "onChange": this.handleChange
+        }, {
+          default: () => [item.layoutPanel && item.data ? renderLayoutPanel(item) : vue.createVNode("div", {
+            "class": this.ns.be("alert", "message"),
+            "innerHTML": item.message || ""
+          }, null)]
+        });
+      })]);
+    };
+    if (!this.items.length) {
+      return;
+    }
+    return renderMessages();
+  }
+});
+
+exports.ViewMessage = ViewMessage;

package/lib/common/view-message/view-message.css

@@ -0,0 +1 @@
+.ibiz-view-message{padding:var(--ibiz-view-message-padding)}

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

@@ -4,7 +4,8 @@ var vue = require('vue');
 var vueRouter = require('vue-router');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
-var customMenuDesign = require('./custom-menu-design/custom-menu-design.cjs');
+var ramda = require('ramda');
+var menuRenderUtil = require('./menu-render-util.cjs');
 require('./app-menu.css');
 
 "use strict";
@@ -42,12 +43,11 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
   },
   setup() {
     const c = vue3Util.useControlController((...args) => new runtime.AppMenuController(...args));
-    const {
-      controlClass,
-      ns
-    } = vue3Util.prepareControl(c);
+    const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}`);
     const activeName = vue.ref();
-    const showPopup = vue.ref(false);
+    const {
+      onCustomizedClick
+    } = menuRenderUtil.useMenuRender(c);
     const route = vueRouter.useRoute();
     const calcCurMenu = () => {
       const allItems = c.getAllItems();
@@ -61,19 +61,16 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         return false;
       });
     };
-    const setPopupState = (state) => {
-      showPopup.value = state;
-    };
     const onTabChange = async (active, event, opts = {}) => {
       if (active === "customized")
-        return setPopupState(true);
+        return onCustomizedClick();
       activeName.value = active;
       await c.onClickMenuItem(active, event, true, opts);
     };
     vue.onMounted(async () => {
       const allItems = c.getAllItems();
       const defaultActiveMenuItem = allItems.find((item) => {
-        return item.openDefault && !item.hidden;
+        return item.openDefault && c.isMobMenuItemValid(item);
       });
       if (defaultActiveMenuItem && !route.params.view2 && !route.fullPath.includes("404")) {
         onTabChange(defaultActiveMenuItem.id, void 0, {
@@ -93,11 +90,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
-      showPopup,
       activeName,
-      controlClass,
-      onTabChange,
-      setPopupState
+      onTabChange
     };
   },
   render() {
@@ -111,39 +105,39 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       "class": [this.ns.b(), this.ns.m(this.modelData.id), this.ns.m(model.controlStyle || "default")]
     }, [vue.createVNode(vue.resolveComponent("van-tabbar"), {
       "modelValue": this.activeName,
+      "fixed": false,
       "onChange": this.onTabChange
     }, {
-      default: () => [state.mobMenuItems.map((item) => vue.createVNode(vue.resolveComponent("van-tabbar-item"), {
-        "name": item.id
-      }, {
-        icon: () => vue.createVNode(vue.resolveComponent("iBizIcon"), {
-          "slot": "icon",
-          "icon": item.sysImage,
-          "class": this.ns.e("icon")
-        }, null),
-        default: () => vue.createVNode("span", null, [item.caption])
-      })), model.enableCustomized && vue.createVNode(vue.resolveComponent("van-tabbar-item"), {
+      default: () => [state.mobMenuItems.map((item) => {
+        const counterNum = item.counterId ? this.c.state.counterData[item.counterId] : null;
+        return vue.createVNode(vue.resolveComponent("van-tabbar-item"), {
+          "name": item.id
+        }, {
+          icon: () => vue.createVNode("div", {
+            "class": this.ns.e("item-icon")
+          }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "slot": "icon",
+            "icon": item.sysImage || {
+              cssClass: "fa fa-th-large"
+            }
+          }, null), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+            "class": this.ns.e("counter"),
+            "value": counterNum
+          }, null)]),
+          default: () => vue.createVNode("span", {
+            "class": this.ns.e("item-caption")
+          }, [item.caption])
+        });
+      }), model.enableCustomized && vue.createVNode(vue.resolveComponent("van-tabbar-item"), {
         "name": "customized"
       }, {
-        icon: () => vue.createVNode("ion-icon", {
+        icon: () => vue.createVNode("div", {
+          "class": this.ns.e("item-icon-container")
+        }, [vue.createVNode("ion-icon", {
           "name": "ellipsis-horizontal"
-        }, null),
+        }, null)]),
         default: () => vue.createVNode("span", null, [ibiz.i18n.t("control.appmenu.more")])
       })]
-    }), vue.createVNode(vue.resolveComponent("van-popup"), {
-      "round": true,
-      "position": "bottom",
-      "show": this.showPopup,
-      "onUpdate:show": ($event) => this.showPopup = $event,
-      "style": {
-        height: "80%"
-      }
-    }, {
-      default: () => [vue.createVNode(customMenuDesign.MenuDesign, {
-        "controller": this.c,
-        "show": this.showPopup,
-        "onClose": () => this.setPopupState(false)
-      }, null)]
     })]);
   }
 });

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

@@ -1 +1 @@
-.ibiz-control-appmenu{width:100%;height:100%}.ibiz-control-appmenu--default{height:var(--van-tabbar-height)}.ibiz-control-appmenu .van-tabbar-item__icon{width:var(--van-tabbar-item-icon-size);font-size:var(--ibiz-width-icon-medium)}.ibiz-control-appmenu-nav{height:calc(100% - var(--van-tabbar-height))}
+.ibiz-control-appmenu{--ibiz-control-appmenu-height-menu:3.125rem;--ibiz-control-appmenu-font-fontSize:var(--ibiz-font-size-header-6);width:100%;height:100%}.ibiz-control-appmenu__item-icon{position:relative;display:flex;align-items:center;width:auto;font-size:var(--ibiz-control-appmenu-font-fontSize);text-align:center}.ibiz-control-appmenu__counter{position:absolute;top:0;right:0;transform:translate(80%,-50%)}.ibiz-control-appmenu__item-caption{white-space:nowrap}.ibiz-control-appmenu--default{height:var(--ibiz-control-appmenu-height-menu)}.ibiz-control-appmenu-customized{display:flex;align-items:center}