@ibiz-template/vue3-components 0.7.17-alpha.0 → 0.7.17

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

@@ -0,0 +1,282 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./custom-menu-design.css');
+var core = require('@ibiz-template/core');
+var lodashEs = require('lodash-es');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+function renderByProvider(itemId, c) {
+  const itemModel = c.allAppMenuItems.find((item) => item.id === itemId);
+  if (!itemModel) {
+    throw new core.RuntimeError("\u6CA1\u627E\u5230\u83DC\u5355\u9879\u6A21\u578B".concat(itemId));
+  }
+  const provider = c.itemProviders[itemId];
+  if (!provider.renderText) {
+    throw new core.RuntimeError("".concat(itemId, "\u7684\u9002\u914D\u5668\u6CA1\u6709renderText\u65B9\u6CD5"));
+  }
+  return provider.renderText(itemModel, c);
+}
+const MenuDesign = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMenuDesign",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    menus: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["saved", "reset"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("menu-design");
+    const c = props.controller;
+    const loading = vue.ref(false);
+    const visible = vue.ref(false);
+    const configs = vue.ref([]);
+    const stopExpand = (event) => {
+      event.stopPropagation();
+    };
+    const handleMenusSaveData = (items) => {
+      const tempItems = [];
+      items.forEach((item) => {
+        var _a;
+        const config = {
+          key: item.key,
+          name: item.label,
+          type: item.itemType,
+          visible: item.config.visible,
+          disabled: item.config.disabled
+        };
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          config.children = handleMenusSaveData(item.children);
+        }
+        tempItems.push(config);
+      });
+      return tempItems;
+    };
+    const collapseGroup = (menu) => {
+      menu.isCollapse = !menu.isCollapse;
+    };
+    const flattenConfigs = (items) => {
+      const result = [];
+      items.forEach((item) => {
+        result.push(item);
+        if (item.children && item.children.length > 0) {
+          const tempResult = flattenConfigs(item.children);
+          result.push(...tempResult);
+        }
+      });
+      return result;
+    };
+    const mergeMenusConfig = (items) => {
+      let customConfig = [];
+      if (c.saveConfigs && c.saveConfigs.length > 0) {
+        customConfig = flattenConfigs(c.saveConfigs);
+      }
+      return items.map((item) => {
+        var _a;
+        const target = customConfig.find((_item) => {
+          return _item.key === item.key;
+        });
+        const data = {
+          ...item,
+          isCollapse: true,
+          config: {
+            visible: true,
+            disabled: false
+          }
+        };
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          data.children = mergeMenusConfig(item.children);
+        }
+        if (target) {
+          Object.assign(data, {
+            config: {
+              visible: target.visible,
+              disabled: target.disabled
+            }
+          });
+        }
+        return data;
+      });
+    };
+    const onReset = async () => {
+      c.saveConfigs = [];
+      await c.customController.resetCustomModelData();
+      configs.value = mergeMenusConfig(lodashEs.cloneDeep(props.menus));
+      emit("reset");
+    };
+    const onSave = async () => {
+      loading.value = true;
+      const saveConfig = handleMenusSaveData(configs.value);
+      await c.customController.saveCustomModelData(saveConfig);
+      c.saveConfigs = saveConfig;
+      loading.value = false;
+      emit("saved", saveConfig);
+    };
+    const renderMenuItem = (menu) => {
+      var _a;
+      if (!((_a = c.state.menuItemsState[menu.key]) == null ? void 0 : _a.visible)) {
+        return;
+      }
+      if (menu.itemType === "MENUITEM") {
+        let content;
+        const provider = c.itemProviders[menu.key];
+        if (provider && provider.renderText) {
+          content = renderByProvider(menu.key, c);
+        } else {
+          content = [menu.image ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "class": ns.e("icon"),
+            "icon": menu.image
+          }, null) : null, vue.createVNode("span", null, [menu.label])];
+        }
+        return content;
+      }
+      if (menu.itemType === "SEPERATOR") {
+        const direction = c.view.model.mainMenuAlign === "TOP" ? "vertical" : "horizontal";
+        return vue.createVNode("div", {
+          "class": ns.be("content", "menu-seperator")
+        }, [vue.createVNode(vue.resolveComponent("el-divider"), {
+          "direction": direction,
+          "class": ns.e("separator"),
+          "id": menu.key
+        }, null)]);
+      }
+    };
+    const renderGroupIcon = (item) => {
+      if (item.children && item.children.length > 0) {
+        if (item.isCollapse) {
+          return vue.createVNode("i", {
+            "class": [ns.be("menu-set-drawer", "group-icon"), "fa fa-caret-right"],
+            "aria-hidden": "true"
+          }, null);
+        }
+        return vue.createVNode("i", {
+          "class": [ns.be("menu-set-drawer", "group-icon"), "fa fa-sort-down"],
+          "aria-hidden": "true"
+        }, null);
+      }
+      return null;
+    };
+    const renderMenuList = (items) => {
+      return items.map((item) => {
+        const content = renderMenuItem(item);
+        if (!content)
+          return null;
+        return vue.createVNode("div", {
+          "class": ns.be("content", "menu-item")
+        }, [vue.createVNode("div", {
+          "class": [ns.be("content", "menu-item-content"), ns.is("is-menuitem", item.itemType === "MENUITEM")]
+        }, [vue.createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "label"),
+          "onClick": () => collapseGroup(item)
+        }, [renderGroupIcon(item), vue.createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "label-content")
+        }, [content])]), item.itemType !== "SEPERATOR" ? vue.createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "checks")
+        }, [vue.createVNode(vue.resolveComponent("el-checkbox"), {
+          "modelValue": item.config.visible,
+          "onUpdate:modelValue": ($event) => item.config.visible = $event,
+          "onClick": stopExpand,
+          "label": "\u663E\u793A",
+          "size": "large"
+        }, null), vue.createVNode(vue.resolveComponent("el-checkbox"), {
+          "modelValue": item.config.disabled,
+          "onUpdate:modelValue": ($event) => item.config.disabled = $event,
+          "onClick": stopExpand,
+          "label": "\u7981\u7528",
+          "size": "large"
+        }, null)]) : null]), item.children && item.children.length > 0 ? vue.createVNode("div", {
+          "class": [ns.bem("content", "menu-item", "children"), ns.is("collapse", item.isCollapse)]
+        }, [renderMenuList(item.children)]) : null]);
+      });
+    };
+    const renderHeader = () => {
+      let _slot, _slot2;
+      return vue.createVNode("div", {
+        "class": ns.b("header")
+      }, [vue.createVNode("div", {
+        "class": ns.be("header", "caption")
+      }, [ibiz.i18n.t("control.menuDesign.customMenu")]), vue.createVNode("div", {
+        "class": ns.be("header", "actions")
+      }, [vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": onReset,
+        "loading": loading.value
+      }, _isSlot(_slot = ibiz.i18n.t("control.menuDesign.reset")) ? _slot : {
+        default: () => [_slot]
+      }), vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": onSave,
+        "loading": loading.value
+      }, _isSlot(_slot2 = ibiz.i18n.t("control.menuDesign.save")) ? _slot2 : {
+        default: () => [_slot2]
+      })])]);
+    };
+    const renderContent = () => {
+      return vue.createVNode("div", {
+        "class": ns.b("content")
+      }, [renderMenuList(configs.value)]);
+    };
+    const openDesign = () => {
+      configs.value = mergeMenusConfig(lodashEs.cloneDeep(props.menus));
+      visible.value = true;
+    };
+    return {
+      ns,
+      c,
+      configs,
+      visible,
+      loading,
+      onReset,
+      renderContent,
+      renderHeader,
+      onSave,
+      openDesign
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "title": ibiz.i18n.t("control.menu.menuSetting"),
+      "onClick": this.openDesign
+    }, [vue.createVNode("svg", {
+      "viewBox": "0 0 16 16",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "height": "1em",
+      "width": "1em",
+      "preserveAspectRatio": "xMidYMid meet",
+      "focusable": "false",
+      "fill": "currentColor"
+    }, [vue.createVNode("g", {
+      "id": "augaction/settings",
+      "stroke-width": "1",
+      "fill-rule": "evenodd"
+    }, [vue.createVNode("path", {
+      "d": "M11.405 13.975l3.398-5.889L11.405 2.2H4.607L1.208 8.087l3.399 5.889h6.798zm1.023-12.4l3.43 5.938c.205.356.205.793 0 1.149l-3.43 5.938a1.147 1.147 0 0 1-.993.574H4.577c-.41 0-.789-.218-.994-.573L.153 8.66a1.153 1.153 0 0 1 0-1.147l3.43-5.94c.205-.356.584-.575.994-.575h6.858c.409 0 .788.22.993.576zM8.006 9.879c.988 0 1.792-.804 1.792-1.792s-.804-1.792-1.792-1.792-1.792.804-1.792 1.792.804 1.792 1.792 1.792zm0-4.784a2.993 2.993 0 1 1-.002 5.985 2.993 2.993 0 0 1 .002-5.985z",
+      "id": "aug\u5F62\u72B6\u7ED3\u5408"
+    }, null)])])]), vue.createVNode(vue.resolveComponent("el-drawer"), {
+      "modelValue": this.visible,
+      "onUpdate:modelValue": ($event) => this.visible = $event,
+      "append-to-body": true,
+      "custom-class": this.ns.b("menu-set-drawer")
+    }, {
+      default: () => {
+        return this.renderContent();
+      },
+      header: () => {
+        return this.renderHeader();
+      }
+    })]);
+  }
+});
+
+exports.MenuDesign = MenuDesign;

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

@@ -0,0 +1 @@
+.ibiz-menu-design-menu-set-drawer{background-color:#fff}.ibiz-menu-design-menu-set-drawer .el-drawer__header{padding:20px 0 0;margin-bottom:0}.ibiz-menu-design-menu-set-drawer__group-icon{cursor:pointer}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-content{height:100%;padding:var(--ibiz-spacing-base);overflow:auto}.ibiz-menu-design-content__menu-item--children{padding-left:32px}.ibiz-menu-design-content__menu-item--children.is-collapse{height:0;overflow:hidden}.ibiz-menu-design-content__menu-item-content{display:flex;align-items:center;width:100%;height:40px;padding:0 var(--ibiz-spacing-base-tight)}.ibiz-menu-design-content__menu-item-content.is-is-menuitem:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-menu-design-content__menu-item-content--label{display:flex;flex:1;align-items:center;color:var(--ibiz-color-black)}.ibiz-menu-design-content__menu-item-content--label i{width:16px;text-align:center}.ibiz-menu-design-content__menu-item-content--label-content{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:left;margin-left:5px;font-size:var(--ibiz-font-size-header-6)}.ibiz-menu-design-content__menu-item-content--checks{display:flex;flex:0;flex-direction:row}.ibiz-menu-design-content__menu-seperator{display:flex;flex-direction:row;align-items:center;width:100%}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-content .ibiz-menu-design__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-large);height:var(--ibiz-width-icon-large);margin-right:var(--ibiz-spacing-tight)}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-content .ibiz-menu-design__drag-icon{position:absolute;left:var(--ibiz-spacing-tight);display:none;fill:var(--ibiz-color-primary-hover)}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-header{height:64px;padding:20px;border-bottom:1px solid var(--ibiz-color-border);display:flex;align-items:center;justify-content:space-between}.ibiz-menu-design-header__caption{padding:0 var(--ibiz-spacing-base)}.ibiz-menu-design-header__text{position:relative;height:100%;padding-left:var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-regular);color:var(--ibiz-color-text-0);display:flex;align-items:center;justify-content:flex-start}.ibiz-menu-design-header__text::before{position:absolute;top:50%;left:0;width:4px;height:20px;content:"";background-color:var(--ibiz-color-primary);border-radius:2px;transform:translateY(-50%)}.ibiz-menu-design-header__menu-design-action{margin-right:64px}

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

@@ -6,11 +6,13 @@ var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
 var appMenu = require('./app-menu.cjs');
 var appMenu_provider = require('./app-menu.provider.cjs');
+var customMenuDesign = require('./custom-menu-design/custom-menu-design.cjs');
 
 "use strict";
 const IBizAppMenuControl = vue3Util.withInstall(
   appMenu.AppMenuControl,
   function(v) {
+    v.component(customMenuDesign.MenuDesign.name, customMenuDesign.MenuDesign);
     v.component(appMenu.AppMenuControl.name, appMenu.AppMenuControl);
     runtime.registerControlProvider(runtime.ControlType.APP_MENU, () => new appMenu_provider.AppMenuProvider());
   }

package/lib/control/kanban/kanban.cjs

@@ -288,7 +288,7 @@ const KanbanControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("span", {
         "class": ns.be("group", "header-right"),
         "onClick": (event) => stopPropagation(event)
-      }, [c.enableNew && vue.createVNode(vue.resolveComponent("el-button"), {
+      }, [c.enableNew && !c.state.readonly && vue.createVNode(vue.resolveComponent("el-button"), {
         "class": ns.be("group", "header-new"),
         "text": true,
         "circle": true,
@@ -361,7 +361,7 @@ const KanbanControl = /* @__PURE__ */ vue.defineComponent({
           "modelValue": group.children,
           "group": c.model.id,
           "itemKey": "srfkey",
-          "disabled": disabled.value,
+          "disabled": disabled.value || c.state.readonly,
           "onChange": (evt) => onChange(evt, group.key)
         }, {
           item: ({

package/lib/control/toolbar/toolbar.cjs

@@ -101,6 +101,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
         "class": [ns.b("submenu"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
         "index": item.id,
+        "disabled": pdisabled,
         "title": item.tooltip,
         "popper-class": [ns.b("submenu-popper"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item))]
       }, {

package/lib/control/toolbar/toolbar.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-toolbar{--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-toolbar__item{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar__item .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding)}.ibiz-control-toolbar__item .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__item.is-loading .el-button .ibiz-icon{display:none}.ibiz-control-toolbar__item-separator{color:var(--ibiz-control-toolbar-separator-color)}.ibiz-control-toolbar__item-separator+.ibiz-control-toolbar__item-separator,.ibiz-control-toolbar__item-separator:first-child{display:none}.ibiz-control-toolbar__menu.el-menu{height:var(--ibiz-control-toolbar-menu-height);margin:var(--ibiz-control-toolbar-item-margin);border:none}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title{display:flex;align-items:center;justify-content:center;padding:0;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary);border-bottom:none;border-radius:var(--ibiz-border-radius-small)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-sub-menu__icon-arrow{display:none}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span{display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title>span{display:flex;align-items:center;justify-content:center;line-height:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper{--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title{padding:0 10px;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu-rawitem{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item.is-active{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .el-button{justify-content:flex-start;width:100%;padding:0;--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent}
+@charset "UTF-8";.ibiz-control-toolbar{--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-toolbar__item{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar__item .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding)}.ibiz-control-toolbar__item .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__item.is-loading .el-button .ibiz-icon{display:none}.ibiz-control-toolbar__item-separator{color:var(--ibiz-control-toolbar-separator-color)}.ibiz-control-toolbar__item-separator+.ibiz-control-toolbar__item-separator,.ibiz-control-toolbar__item-separator:first-child{display:none}.ibiz-control-toolbar__menu.el-menu{height:var(--ibiz-control-toolbar-menu-height);margin:var(--ibiz-control-toolbar-item-margin);border:none}.ibiz-control-toolbar__menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title{display:flex;align-items:center;justify-content:center;padding:0;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary);border-bottom:none;border-radius:var(--ibiz-border-radius-small)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-sub-menu__icon-arrow{display:none}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span{display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title>span{display:flex;align-items:center;justify-content:center;line-height:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper{--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title{padding:0 10px;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu-rawitem{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item.is-active{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .el-button{justify-content:flex-start;width:100%;padding:0;--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent}

package/lib/locale/en/index.cjs

@@ -112,7 +112,13 @@ var index = {
     menu: {
       noSupportAlign: "The menu direction {align} is not supported temporarily",
       noFoundModel: "no find the menu item model {menuKey}",
-      noFoundFunction: "The adapter for {menuKey} does not have a renderText method"
+      noFoundFunction: "The adapter for {menuKey} does not have a renderText method",
+      menuSetting: "\u83DC\u5355\u8BBE\u7F6E"
+    },
+    menuDesign: {
+      customMenu: "Custom menu",
+      reset: "Reset",
+      save: "Save"
     },
     calendar: {
       lastYear: "Last year",

package/lib/locale/zh-CN/index.cjs

@@ -112,7 +112,13 @@ var index = {
     menu: {
       noSupportAlign: "\u6682\u672A\u652F\u6301\u83DC\u5355\u65B9\u5411\u4E3A {align}",
       noFoundModel: "\u6CA1\u627E\u5230\u83DC\u5355\u9879\u6A21\u578B{menuKey}",
-      noFoundFunction: "{menuKey}\u7684\u9002\u914D\u5668\u6CA1\u6709renderText\u65B9\u6CD5"
+      noFoundFunction: "{menuKey}\u7684\u9002\u914D\u5668\u6CA1\u6709renderText\u65B9\u6CD5",
+      menuSetting: "\u83DC\u5355\u8BBE\u7F6E"
+    },
+    menuDesign: {
+      customMenu: "\u81EA\u5B9A\u4E49\u83DC\u5355",
+      reset: "\u6062\u590D\u9ED8\u8BA4",
+      save: "\u4FDD\u5B58"
     },
     calendar: {
       lastYear: "\u53BB\u5E74",

package/lib/panel-component/auth-userinfo/auth-userinfo.cjs

@@ -57,7 +57,7 @@ const AuthUserinfo = /* @__PURE__ */ vue.defineComponent({
       "class": [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass, this.ns.is("left", this.menuAlign === "LEFT"), this.ns.is("top", this.menuAlign === "TOP"), this.ns.is("collapse", this.isCollapse)]
     }, [vue.createVNode(vue.resolveComponent("el-dropdown"), null, {
       default: () => vue.createVNode("div", {
-        "class": this.ns.b("info")
+        "class": [this.ns.b("info"), this.ns.is("collapse", this.isCollapse)]
       }, [vue.createVNode("div", {
         "class": this.ns.b("label")
       }, [vue.createVNode(vue.resolveComponent("el-avatar"), {
@@ -70,7 +70,7 @@ const AuthUserinfo = /* @__PURE__ */ vue.defineComponent({
       }, [this.srfusername]), this.menuAlign === "LEFT" && vue.createVNode("div", {
         "class": this.ns.be("name", "person-name")
       }, [this.srfpersonname])])]), vue.createVNode("ion-icon", {
-        "class": this.ns.e("down"),
+        "class": [this.ns.e("down"), this.ns.is("collapse", this.isCollapse)],
         "name": "chevron-down-outline"
       }, null)]),
       dropdown: () => vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, {

package/lib/panel-component/auth-userinfo/auth-userinfo.css

@@ -1 +1 @@
-.ibiz-user-info{--ibiz-user-info-padding:0 var(--ibiz-spacing-loose);--ibiz-user-info-color:var(--ibiz-color-text-0);display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%}.ibiz-user-info .el-dropdown{width:100%;padding:var(--ibiz-user-info-padding);cursor:pointer}.ibiz-user-info.is-left .ibiz-user-info__down{position:relative;top:12px}.ibiz-user-info.is-top .ibiz-user-info__down{margin-left:35px}.ibiz-user-info.is-top .ibiz-user-info-avatar{max-width:24px;max-height:24px}.ibiz-user-info.is-collapse .el-dropdown{padding:0 var(--ibiz-spacing-base-tight)}.ibiz-user-info.is-collapse .ibiz-user-info-avatar{max-width:32px;max-height:32px;margin:0}.ibiz-user-info-avatar{max-width:44px;max-height:44px;margin-right:10px}.ibiz-user-info-info{width:100%;display:flex;align-items:center;justify-content:space-between;color:var(--ibiz-user-info-color)}.ibiz-user-info-name__user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;font-size:var(--ibiz-font-size-header-6);line-height:1.3}.ibiz-user-info-name__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;margin-top:10px;font-size:var(--ibiz-font-size-small);line-height:1.2}.ibiz-user-info-label{display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-user-info-font-size);color:var(--ibiz-user-info-color);outline:0}
+.ibiz-user-info{--ibiz-user-info-padding:0 var(--ibiz-spacing-loose);--ibiz-user-info-color:var(--ibiz-color-text-0);display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%}.ibiz-user-info .el-dropdown{width:100%;padding:var(--ibiz-user-info-padding);cursor:pointer}.ibiz-user-info.is-left .ibiz-user-info__down{position:relative;top:12px}.ibiz-user-info.is-left .ibiz-user-info__down.is-collapse{display:none}.ibiz-user-info.is-top .ibiz-user-info__down{margin-left:35px}.ibiz-user-info.is-top .ibiz-user-info-avatar{max-width:24px;max-height:24px}.ibiz-user-info.is-collapse .el-dropdown{padding:0 var(--ibiz-spacing-base-tight)}.ibiz-user-info.is-collapse .ibiz-user-info-avatar{max-width:24px;max-height:24px;margin:0}.ibiz-user-info-avatar{max-width:44px;max-height:44px;margin-right:10px}.ibiz-user-info-info{width:100%;display:flex;align-items:center;justify-content:space-between;color:var(--ibiz-user-info-color)}.ibiz-user-info-info.is-collapse{justify-content:center}.ibiz-user-info-name__user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;font-size:var(--ibiz-font-size-header-6);line-height:1.3}.ibiz-user-info-name__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;margin-top:10px;font-size:var(--ibiz-font-size-small);line-height:1.2}.ibiz-user-info-label{display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-user-info-font-size);color:var(--ibiz-user-info-color);outline:0}

package/lib/panel-component/panel-app-title/panel-app-title.cjs

@@ -68,7 +68,6 @@ const PanelAppTitle = /* @__PURE__ */ vue.defineComponent({
   render() {
     const {
       icon,
-      icon2,
       isSvg,
       caption,
       caption2,
@@ -79,28 +78,34 @@ const PanelAppTitle = /* @__PURE__ */ vue.defineComponent({
     const captionNode = vue.createVNode("span", {
       "class": this.ns.e("title")
     }, [caption]);
-    if (icon || icon2) {
-      if (isSvg) {
-        iconVNode = vue.createVNode("ion-icon", {
-          "class": this.ns.e("logo"),
-          "icon": this.isCollapse ? icon2 : icon
-        }, null);
-      } else {
-        iconVNode = vue.createVNode("span", {
-          "class": this.ns.e("logo")
-        }, [vue.createVNode("img", {
-          "src": this.isCollapse ? icon2 : icon
-        }, null)]);
-      }
-    } else if (this.menuAlign === "LEFT") {
+    if (this.menuAlign === "LEFT") {
       if (this.isCollapse) {
-        iconVNode = vue.createVNode("div", {
-          "class": this.ns.e("collapse-title")
-        }, [vue.createVNode("div", {
-          "class": this.ns.e("caption2")
-        }, [caption2]), vue.createVNode("div", {
-          "class": this.ns.e("subCaption2")
-        }, [subCaption2])]);
+        if (icon) {
+          let tempIcon = null;
+          if (isSvg) {
+            tempIcon = vue.createVNode("ion-icon", {
+              "class": this.ns.e("logo"),
+              "icon": icon
+            }, null);
+          } else {
+            tempIcon = vue.createVNode("span", {
+              "class": this.ns.e("logo")
+            }, [vue.createVNode("img", {
+              "src": icon
+            }, null)]);
+          }
+          iconVNode = vue.createVNode("div", {
+            "class": this.ns.e("collpase-icon")
+          }, [tempIcon]);
+        } else {
+          iconVNode = vue.createVNode("div", {
+            "class": this.ns.e("collapse-title")
+          }, [vue.createVNode("div", {
+            "class": this.ns.e("caption2")
+          }, [caption2]), vue.createVNode("div", {
+            "class": this.ns.e("subCaption2")
+          }, [subCaption2])]);
+        }
       } else {
         iconVNode = vue.createVNode("span", {
           "class": this.ns.e("logo")
@@ -132,6 +137,21 @@ const PanelAppTitle = /* @__PURE__ */ vue.defineComponent({
           "y": "73"
         }, [subCaption])])])])]);
       }
+    } else if (this.menuAlign === "TOP") {
+      if (icon) {
+        if (isSvg) {
+          iconVNode = vue.createVNode("ion-icon", {
+            "class": this.ns.e("logo"),
+            "icon": icon
+          }, null);
+        } else {
+          iconVNode = vue.createVNode("span", {
+            "class": this.ns.e("logo")
+          }, [vue.createVNode("img", {
+            "src": icon
+          }, null)]);
+        }
+      }
     }
     let content = null;
     if (this.menuAlign === "LEFT") {

package/lib/panel-component/panel-app-title/panel-app-title.controller.cjs

@@ -37,7 +37,9 @@ class PanelAppTitleController extends runtime.PanelItemController {
     if (indexViewModel.title) {
       document.title = indexViewModel.title;
     }
-    if (indexViewModel.appIconPath) {
+    if (this.model.sysImage && this.model.sysImage.rawContent) {
+      this.state.icon = this.model.sysImage.rawContent;
+    } else if (indexViewModel.appIconPath) {
       this.state.icon = indexViewModel.appIconPath;
     }
     if (indexViewModel.appIconPath2) {

package/lib/panel-component/panel-app-title/panel-app-title.css

@@ -1 +1 @@
-.ibiz-panel-app-title{--ibiz-panel-app-title-color:var(--ibiz-color-text-0);--ibiz-panel-app-title-font-size:var(--ibiz-font-size-header-3);--ibiz-panel-app-title-font-weight:var(--ibiz-font-weight-bold);--ibiz-panel-app-title-padding:0 var(--ibiz-spacing-loose);--ibiz-panel-app-title-collapse-padding:0 var(--ibiz-spacing-tight);display:flex;align-items:center;justify-content:center;height:100%;padding:var(--ibiz-panel-app-title-padding);cursor:pointer}.ibiz-panel-app-title__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-panel-app-title-font-size);font-weight:700;color:var(--ibiz-panel-app-title-color)}.ibiz-panel-app-title__logo{display:flex;align-items:center;justify-content:center;height:100%;padding:0 var(--ibiz-spacing-tight);font-size:40px}.ibiz-panel-app-title__logo img{display:inline-block;width:20px;height:20px}.ibiz-panel-app-title__logo svg{fill:var(--ibiz-panel-app-title-color)}.ibiz-panel-app-title.is-only-img .ibiz-panel-app-title__logo{padding:0}.ibiz-panel-app-title.is-collapse{max-width:100%;padding:var(--ibiz-panel-app-title-collapse-padding)}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__collapse-title{width:100%}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__caption2{overflow:hidden;font-size:var(--ibiz-font-size-header-4);font-weight:var(--ibiz-panel-app-title-font-weight);text-align:center;white-space:nowrap}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__subCaption2{overflow:hidden;font-size:var(--ibiz-font-size-header-5);text-align:center;white-space:nowrap}
+.ibiz-panel-app-title{--ibiz-panel-app-title-color:var(--ibiz-color-text-0);--ibiz-panel-app-title-font-size:var(--ibiz-font-size-header-3);--ibiz-panel-app-title-font-weight:var(--ibiz-font-weight-bold);--ibiz-panel-app-title-padding:0 var(--ibiz-spacing-loose);--ibiz-panel-app-title-collapse-padding:0 var(--ibiz-spacing-tight);display:flex;align-items:center;justify-content:center;height:100%;padding:var(--ibiz-panel-app-title-padding);cursor:pointer}.ibiz-panel-app-title__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-panel-app-title-font-size);font-weight:700;color:var(--ibiz-panel-app-title-color)}.ibiz-panel-app-title__logo{display:flex;align-items:center;justify-content:center;height:100%;padding:0 var(--ibiz-spacing-tight);font-size:40px}.ibiz-panel-app-title__logo img{display:inline-block;width:auto;height:100%}.ibiz-panel-app-title__logo svg{fill:var(--ibiz-panel-app-title-color)}.ibiz-panel-app-title.is-only-img .ibiz-panel-app-title__logo{padding:0}.ibiz-panel-app-title.is-collapse{max-width:100%;padding:var(--ibiz-panel-app-title-collapse-padding)}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__collapse-title{width:100%}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__collpase-icon img{width:100%;height:100%}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__caption2{overflow:hidden;font-size:var(--ibiz-font-size-header-4);font-weight:var(--ibiz-panel-app-title-font-weight);text-align:center;white-space:nowrap}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__subCaption2{overflow:hidden;font-size:var(--ibiz-font-size-header-5);text-align:center;white-space:nowrap}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-components",
-  "version": "0.7.17-alpha.0",
+  "version": "0.7.17",
   "description": "使用 rollup 编译 vue 组件或者 jsx",
   "main": "lib/index.cjs",
   "module": "es/index.mjs",
@@ -30,12 +30,12 @@
     "@floating-ui/dom": "^1.5.3",
     "@ibiz-template-plugin/ai-chat": "^0.0.5",
     "@ibiz-template-plugin/gantt": "0.1.4",
-    "@ibiz-template/core": "0.7.17-alpha.0",
+    "@ibiz-template/core": "0.7.17",
     "@ibiz-template/devtool": "0.0.1-dev.6",
-    "@ibiz-template/model-helper": "0.7.17-alpha.0",
-    "@ibiz-template/runtime": "0.7.17-alpha.0",
+    "@ibiz-template/model-helper": "0.7.17",
+    "@ibiz-template/runtime": "0.7.17",
     "@ibiz-template/theme": "^0.7.0",
-    "@ibiz-template/vue3-util": "0.7.17-alpha.0",
+    "@ibiz-template/vue3-util": "0.7.17",
     "@ibiz-template/web-theme": "^1.1.17",
     "@ibiz/model-core": "^0.1.27",
     "@imengyu/vue3-context-menu": "^1.3.5",