@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.9

package/lib/common/split/split.cjs

@@ -0,0 +1,187 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./split.css');
+
+"use strict";
+const IBizSplit = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizSplit",
+  props: {
+    modelValue: {
+      type: [Number, String],
+      default: 0.5
+    },
+    mode: {
+      validator: (value) => {
+        return ["horizontal", "vertical"].includes(value);
+      },
+      default: "horizontal"
+    },
+    min: {
+      type: [Number, String],
+      default: "30px"
+    },
+    max: {
+      type: [Number, String],
+      default: "30px"
+    }
+  },
+  emits: ["update:modelValue", "on-move-start", "on-moving", "on-move-end"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("split");
+    const outerWrapper = vue.ref(null);
+    const offset = vue.ref(0);
+    const oldOffset = vue.ref(0);
+    const isMoving = vue.ref(false);
+    const computedMin = vue.ref(0);
+    const computedMax = vue.ref(0);
+    const currentValue = vue.ref(0.5);
+    const initOffset = vue.ref(0);
+    const wrapperClasses = vue.computed(() => [ns.b("wrapper"), ns.is("no-select", isMoving.value)]);
+    const paneClasses = vue.computed(() => [ns.b("pane"), isMoving.value ? ns.bm("pane", "moving") : ""]);
+    const isHorizontal = vue.computed(() => props.mode === "horizontal");
+    const anotherOffset = vue.computed(() => 100 - offset.value);
+    const valueIsPx = vue.computed(() => typeof props.modelValue === "string");
+    const offsetSize = vue.computed(() => isHorizontal.value ? "offsetWidth" : "offsetHeight");
+    const px2percent = (numerator, denominator) => {
+      return parseFloat(numerator) / parseFloat(denominator);
+    };
+    const getComputedThresholdValue = (type) => {
+      const size = outerWrapper.value[offsetSize.value];
+      if (valueIsPx.value) {
+        return typeof props[type] === "string" ? props[type] : size * props[type];
+      }
+      return typeof props[type] === "string" ? px2percent(props[type], size) : props[type];
+    };
+    const getMax = (value1, value2) => {
+      if (valueIsPx.value)
+        return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
+      return Math.max(value1, value2);
+    };
+    const getAnotherOffset = (value) => {
+      let res = 0;
+      if (valueIsPx.value)
+        res = `${outerWrapper.value[offsetSize.value] - parseFloat(value)}px`;
+      else
+        res = 1 - value;
+      return res;
+    };
+    const handleMove = (e) => {
+      const pageOffset = isHorizontal.value ? e.pageX : e.pageY;
+      const moveOffset = pageOffset - initOffset.value;
+      const outerWidth = outerWrapper.value[offsetSize.value];
+      let value = valueIsPx.value ? `${parseFloat(oldOffset.value) + moveOffset}px` : px2percent(outerWidth * oldOffset.value + moveOffset, outerWidth);
+      const anotherValue = getAnotherOffset(value);
+      if (parseFloat(value) <= parseFloat(computedMin.value)) {
+        value = getMax(value, computedMin.value);
+      }
+      if (parseFloat(anotherValue) <= parseFloat(computedMax.value)) {
+        value = getAnotherOffset(getMax(anotherValue, computedMax.value));
+      }
+      Object.assign(e, {
+        atMin: props.modelValue === computedMin.value,
+        atMax: valueIsPx.value ? getAnotherOffset(props.modelValue) === computedMax.value : getAnotherOffset(props.modelValue).toFixed(5) === computedMax.value.toFixed(5)
+      });
+      emit("update:modelValue", value);
+      emit("on-moving", e);
+    };
+    const handleUp = () => {
+      isMoving.value = false;
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleUp);
+      emit("on-move-end");
+    };
+    const handleMousedown = (e) => {
+      initOffset.value = isHorizontal.value ? e.pageX : e.pageY;
+      oldOffset.value = props.modelValue;
+      isMoving.value = true;
+      document.addEventListener("mousemove", handleMove);
+      document.addEventListener("mouseup", handleUp);
+      emit("on-move-start");
+    };
+    const computeOffset = () => {
+      vue.nextTick(() => {
+        computedMin.value = getComputedThresholdValue("min");
+        computedMax.value = getComputedThresholdValue("max");
+        offset.value = (valueIsPx.value ? px2percent(props.modelValue, outerWrapper.value[offsetSize.value]) : props.modelValue) * 1e4 / 100;
+      });
+    };
+    vue.watch(() => props.modelValue, (val) => {
+      if (val !== currentValue.value) {
+        currentValue.value = val;
+        computeOffset();
+      }
+    });
+    vue.onMounted(() => {
+      vue.nextTick(() => {
+        computeOffset();
+      });
+      window.addEventListener("resize", computeOffset);
+    });
+    vue.onBeforeUnmount(() => {
+      window.removeEventListener("resize", computeOffset);
+    });
+    return {
+      ns,
+      outerWrapper,
+      offset,
+      wrapperClasses,
+      paneClasses,
+      isHorizontal,
+      anotherOffset,
+      handleMousedown
+    };
+  },
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    return vue.createVNode("div", {
+      "class": this.wrapperClasses,
+      "ref": "outerWrapper"
+    }, [this.isHorizontal ? vue.createVNode("div", {
+      "class": this.ns.m("horizontal")
+    }, [vue.createVNode("div", {
+      "style": {
+        right: `${this.anotherOffset}%`
+      },
+      "class": [this.paneClasses, this.ns.bm("pane", "left")]
+    }, [(_b = (_a = this.$slots).left) == null ? void 0 : _b.call(_a)]), vue.createVNode("div", {
+      "style": {
+        left: `${this.offset}%`
+      },
+      "class": this.ns.b("trigger-con"),
+      "onMousedown": (e) => this.handleMousedown(e)
+    }, [((_d = (_c = this.$slots).trigger) == null ? void 0 : _d.call(_c)) || vue.createVNode(vue.resolveComponent("iBizSplitTrigger"), {
+      "mode": "vertical"
+    }, null)]), vue.createVNode("div", {
+      "style": {
+        left: `${this.offset}%`
+      },
+      "class": [this.paneClasses, this.ns.bm("pane", "right")]
+    }, [(_f = (_e = this.$slots).right) == null ? void 0 : _f.call(_e)])]) : vue.createVNode("div", {
+      "class": this.ns.m("vertical")
+    }, [vue.createVNode("div", {
+      "style": {
+        bottom: `${this.anotherOffset}%`
+      },
+      "class": [this.paneClasses, this.ns.bm("pane", "top")]
+    }, [(_h = (_g = this.$slots).top) == null ? void 0 : _h.call(_g)]), vue.createVNode("div", {
+      "style": {
+        top: `${this.offset}%`
+      },
+      "class": this.ns.b("trigger-con"),
+      "onMousedown": (e) => this.handleMousedown(e)
+    }, [((_j = (_i = this.$slots).trigger) == null ? void 0 : _j.call(_i)) || vue.createVNode(vue.resolveComponent("iBizSplitTrigger"), {
+      "mode": "horizontal"
+    }, null)]), vue.createVNode("div", {
+      "style": {
+        top: `${this.offset}%`
+      },
+      "class": [this.paneClasses, this.ns.bm("pane", "bottom")]
+    }, [(_l = (_k = this.$slots).bottom) == null ? void 0 : _l.call(_k)])])]);
+  }
+});
+
+exports.IBizSplit = IBizSplit;

package/lib/common/split/split.css

@@ -0,0 +1 @@
+.ibiz-split-wrapper{position:relative;width:100%;height:100%}.ibiz-split-wrapper.is-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-split--horizontal .ibiz-split-trigger-con{top:50%;width:0;height:100%}.ibiz-split--horizontal .ibiz-split-pane--right{padding-left:6px}.ibiz-split--vertical .ibiz-split-trigger-con{left:50%;width:100%;height:0}.ibiz-split--vertical .ibiz-split-pane--bottom{padding-top:6px}.ibiz-split-pane{position:absolute}.ibiz-split-pane--left{top:0;bottom:0;left:0;overflow:hidden}.ibiz-split-pane--right{top:0;right:0;bottom:0;overflow:hidden}.ibiz-split-pane--top{top:0;right:0;left:0;overflow:hidden}.ibiz-split-pane--bottom{right:0;bottom:0;left:0;overflow:hidden}.ibiz-split-pane--moving{-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-split-trigger-con{position:absolute;z-index:10;transform:translate(-50%,-50%)}

package/lib/common/split-trigger/split-trigger.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./split-trigger.css');
+
+"use strict";
+const IBizSplitTrigger = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizSplitTrigger",
+  props: {
+    mode: String
+  },
+  setup(prop) {
+    const ns = vue3Util.useNamespace("split-trigger");
+    const isVertical = vue.computed(() => prop.mode === "vertical");
+    const classes = vue.computed(() => [ns.b(), isVertical.value ? ns.m("vertical") : ns.m("horizontal")]);
+    const barConClasses = vue.computed(() => [ns.b("bar-con"), isVertical.value ? ns.bm("bar-con", "vertical") : ns.bm("bar-con", "horizontal")]);
+    const items = Array(8).fill(0);
+    return {
+      ns,
+      classes,
+      barConClasses,
+      items
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.classes
+    }, [vue.createVNode("div", {
+      "class": this.barConClasses
+    }, [this.items.map((_item, i) => vue.createVNode("i", {
+      "class": this.ns.b("bar"),
+      "key": `trigger-${i}`
+    }, null))])]);
+  }
+});
+
+exports.IBizSplitTrigger = IBizSplitTrigger;

package/lib/common/split-trigger/split-trigger.css

@@ -0,0 +1 @@
+.ibiz-split-trigger{border:1px solid var(--ibiz-color-border)}.ibiz-split-trigger--vertical{width:6px;height:100%;cursor:col-resize;border-top:none;border-bottom:none}.ibiz-split-trigger--vertical .ibiz-split-trigger-bar{float:left;width:4px;height:1px;margin-top:3px;background:var(--ibiz-color-border)}.ibiz-split-trigger--horizontal{width:100%;height:6px;cursor:row-resize;border-right:none;border-left:none}.ibiz-split-trigger--horizontal .ibiz-split-trigger-bar{float:left;width:1px;height:4px;margin-right:3px;background:var(--ibiz-color-border)}.ibiz-split-trigger-bar-con{position:absolute;overflow:hidden}.ibiz-split-trigger-bar-con--vertical{top:50%;left:1px;height:32px;transform:translate(0,-50%)}.ibiz-split-trigger-bar-con--horizontal{top:1px;left:50%;width:32px;transform:translate(-50%,0)}

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+
+"use strict";
+const ViewMessage = /* @__PURE__ */ vue.defineComponent({
+  name: "ViewMessage",
+  props: {
+    messages: {
+      type: Array
+    }
+  },
+  setup() {
+    const ns = vue3Util.useNamespace("view-message");
+    const getType = (messageType) => {
+      switch (messageType) {
+        case "WARN":
+          return "warning";
+        case "ERROR":
+          return "error";
+        default:
+          return "info";
+      }
+    };
+    return {
+      ns,
+      getType
+    };
+  },
+  render() {
+    var _a, _b;
+    if (!((_a = this.messages) == null ? void 0 : _a.length)) {
+      return null;
+    }
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [(_b = this.messages) == null ? void 0 : _b.map((message) => {
+      return vue.createVNode(vue.resolveComponent("el-alert"), {
+        "type": this.getType(message.messageType),
+        "title": message.title,
+        "description": message.message,
+        "closable": message.removeMode !== 0
+      }, null);
+    })]);
+  }
+});
+
+exports.ViewMessage = ViewMessage;

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

@@ -0,0 +1,259 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var qxUtil = require('qx-util');
+var runtime = require('@ibiz-template/runtime');
+var vueRouter = require('vue-router');
+require('./app-menu.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+function getMenus(items) {
+  return items.map((item) => {
+    var _a;
+    let label = item.caption;
+    if (item.capLanguageRes) {
+      label = ibiz.i18n.t(item.capLanguageRes.lanResTag, item.caption);
+    }
+    const data = {
+      key: item.id,
+      label,
+      image: item.sysImage,
+      counterId: item.counterId,
+      disabled: !item.appFuncId,
+      tooltip: item.tooltip
+    };
+    if ((_a = item.appMenuItems) == null ? void 0 : _a.length) {
+      data.children = getMenus(item.appMenuItems);
+    }
+    return data;
+  });
+}
+function renderMenuItem(isFirst, menu, collapse, ns, c, counterData) {
+  if (!c.state.menuItemsState[menu.key].visible) {
+    return;
+  }
+  return !(isFirst && collapse) ? vue.createVNode(vue.resolveComponent("el-menu-item"), {
+    "class": ns.e("item"),
+    "index": menu.key,
+    "disabled": menu.disabled,
+    "title": menu.tooltip
+  }, {
+    default: () => [menu.image ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
+      "class": ns.e("icon"),
+      "icon": menu.image
+    }, null) : null, menu.label, counterData[menu.counterId] != null ? vue.createVNode("div", {
+      "class": ns.e("counter")
+    }, [counterData[menu.counterId]]) : null]
+  }) : vue.createVNode(vue.resolveComponent("el-tooltip"), {
+    "class": ns.b("tooltip"),
+    "content": menu.label,
+    "placement": "left",
+    "theme": "light"
+  }, {
+    default: () => [vue.createVNode(vue.resolveComponent("el-menu-item"), {
+      "class": ns.e("item"),
+      "index": menu.key,
+      "disabled": menu.disabled
+    }, {
+      default: () => [menu.image ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": menu.image
+      }, null) : menu.label.slice(0, 1)]
+    })]
+  });
+}
+function renderSubmenu(isFirst, subMenu, collapse, ns, c, counterData) {
+  if (!c.state.menuItemsState[subMenu.key].visible) {
+    return;
+  }
+  return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
+    "class": ns.b("submenu"),
+    "index": subMenu.key
+  }, {
+    default: () => subMenu.children.map((item) => {
+      if (item.children) {
+        return renderSubmenu(false, item, collapse, ns, c, counterData);
+      }
+      return renderMenuItem(false, item, collapse, ns, c, counterData);
+    }),
+    title: () => {
+      if (collapse) {
+        if (subMenu.image) {
+          return vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "class": ns.e("icon"),
+            "icon": subMenu.image
+          }, null);
+        }
+        return [isFirst ? subMenu.label.slice(0, 1) : subMenu.label, isFirst ? null : vue.createVNode("ion-icon", {
+          "name": "chevron-forward-outline"
+        }, null)];
+      }
+      return [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": subMenu.image
+      }, null), subMenu.label];
+    }
+  });
+}
+const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizAppMenuControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    provider: {
+      type: Object
+    },
+    collapse: Boolean,
+    currentPath: String
+  },
+  setup() {
+    const c = vue3Util.useControlController((...args) => new runtime.AppMenuController(...args));
+    const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const menus = vue.ref(getMenus(c.model.appMenuItems));
+    const defaultActive = vue.ref("");
+    const defaultOpens = vue.ref([]);
+    const route = vueRouter.useRoute();
+    let counter = null;
+    const counterData = vue.ref({});
+    const key = vue.ref(qxUtil.createUUID());
+    const calcCurMenu = () => {
+      const allItems = c.getAllItems();
+      const app = ibiz.hub.getApp(c.context.srfappid);
+      return allItems.find((item) => {
+        var _a, _b;
+        if (item.itemType === "MENUITEM" && item.appFuncId) {
+          const func = app.getAppFunc(item.appFuncId);
+          return ((_b = (_a = func == null ? void 0 : func.appViewId) == null ? void 0 : _a.split(".")) == null ? void 0 : _b[1]) === route.params.view2;
+        }
+        return false;
+      });
+    };
+    const onClick = async (id, event) => {
+      const activeMenu = calcCurMenu();
+      if ((activeMenu == null ? void 0 : activeMenu.id) === id) {
+        return;
+      }
+      await c.onClickMenuItem(id, event);
+    };
+    vue.watch(() => route.params.view2, (newVal, oldVal) => {
+      if (newVal !== oldVal && ibiz.config.appMenu.enableEcho) {
+        const activeMenu = calcCurMenu();
+        defaultActive.value = activeMenu ? activeMenu.id : "";
+      }
+    });
+    vue.onMounted(async () => {
+      const allItems = c.getAllItems();
+      const defaultActiveMenuItem = allItems.find((item) => {
+        return item.openDefault && !item.hidden;
+      });
+      if (defaultActiveMenuItem && !route.params.view2 && !route.fullPath.includes("404")) {
+        defaultActive.value = defaultActiveMenuItem.id;
+        onClick(defaultActive.value);
+      } else if (ibiz.config.appMenu.enableEcho) {
+        const activeMenu = calcCurMenu();
+        defaultActive.value = activeMenu ? activeMenu.id : "";
+      }
+      const defaultOpensArr = allItems.filter((item) => {
+        return item.expanded && !item.hidden;
+      });
+      if (defaultOpensArr.length > 0) {
+        defaultOpensArr.forEach((item) => {
+          defaultOpens.value.push(item.id);
+        });
+      }
+      const counterRefId = c.model.appCounterRefId;
+      if (counterRefId) {
+        counter = c.getCounter(counterRefId);
+        if (counter) {
+          counter.onChange((data) => {
+            counterData.value = data;
+          });
+        }
+      }
+    });
+    vue.onUnmounted(() => {
+      counter == null ? void 0 : counter.destroy();
+    });
+    const menuMode = vue.computed(() => {
+      const model = c.view.model.mainMenuAlign;
+      switch (model) {
+        case "TOP":
+          return "horizontal";
+        default:
+          return "vertical";
+      }
+    });
+    if (c.view.model.mainMenuAlign && c.view.model.mainMenuAlign !== "LEFT" && c.view.model.mainMenuAlign !== "TOP") {
+      ibiz.message.warning(`\u6682\u672A\u652F\u6301\u83DC\u5355\u65B9\u5411\u4E3A${c.view.model.mainMenuAlign}\uFF01`);
+    }
+    const isShowCollapse = vue.computed(() => {
+      if (c.view.model.mainMenuAlign === "LEFT" || c.view.model.mainMenuAlign === void 0) {
+        return true;
+      }
+      return false;
+    });
+    return {
+      menus,
+      c,
+      key,
+      onClick,
+      ns,
+      defaultActive,
+      defaultOpens,
+      menuMode,
+      counterData,
+      isShowCollapse
+    };
+  },
+  render() {
+    let _slot;
+    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+      "class": [this.ns.b(), this.ns.m(this.menuMode), this.ns.is("collapse", this.collapse), this.ns.is("show-collapse", this.isShowCollapse)],
+      "controller": this.c
+    }, {
+      default: () => [this.c.state.isCreated && vue.createVNode(vue.resolveComponent("el-menu"), {
+        "key": this.key,
+        "ref": "menu",
+        "default-active": this.defaultActive,
+        "default-openeds": this.defaultOpens,
+        "collapse": this.collapse,
+        "collapse-transition": false,
+        "onSelect": this.onClick,
+        "theme": "light",
+        "mode": this.menuMode,
+        "ellipsis": false
+      }, _isSlot(_slot = this.menus.map((item) => {
+        var _a;
+        if (((_a = item.children) == null ? void 0 : _a.length) > 0) {
+          return renderSubmenu(true, item, this.collapse, this.ns, this.c, this.counterData);
+        }
+        return renderMenuItem(true, item, this.collapse, this.ns, this.c, this.counterData);
+      })) ? _slot : {
+        default: () => [_slot]
+      }), this.isShowCollapse && vue.createVNode("div", {
+        "class": [this.ns.b("collapse-icon"), this.ns.is("collapse", this.collapse)],
+        "onClick": () => {
+          this.c.view.call(runtime.ViewCallTag.TOGGLE_COLLAPSE);
+        }
+      }, [vue.createVNode("ion-icon", {
+        "name": "menu-collapse"
+      }, null)])]
+    });
+  }
+});
+
+exports.AppMenuControl = AppMenuControl;

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

@@ -0,0 +1 @@
+@charset "UTF-8";.ibiz-control-appmenu{position:relative;width:100%;height:100%;--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 10px 0 0;--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:40px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-horizontal-height:32px;--ibiz-control-appmenu-item-horizontal-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base);--ibiz-control-appmenu-item-horizontal-padding-right:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-horizontal-popup-height:40px}.ibiz-control-appmenu>.el-menu{height:100%;padding:0 var(--ibiz-spacing-tight);overflow-y:auto;border-right:0}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__icon-arrow{right:14px;width:12px}.ibiz-control-appmenu .el-sub-menu .el-menu-item{padding:calc(var(--ibiz-control-appmenu-item-padding) * .875) calc(var(--ibiz-control-appmenu-item-padding) * 2.5)}.ibiz-control-appmenu .el-menu--vertical{width:100%}.ibiz-control-appmenu .el-menu--vertical .el-menu-item,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;--el-menu-base-level-padding:var(--ibiz-control-appmenu-item-padding);width:100%;height:var(--ibiz-control-appmenu-item-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-border-radius)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-selected-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item:hover,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal{gap:16px;align-items:center;height:100%;background-color:transparent;border-bottom:none}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title{height:var(--ibiz-control-appmenu-item-horizontal-height);padding:var(--ibiz-control-appmenu-item-horizontal-padding);font-size:var(--ibiz-control-appmenu-item-horizontal-font-size);line-height:var(--ibiz-control-appmenu-item-horizontal-height);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border:none;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-color)!important;background-color:transparent}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item:hover,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item .el-sub-menu__icon-arrow,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title .el-sub-menu__icon-arrow{position:absolute;top:50%;right:16px}.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title{padding-right:var(--ibiz-control-appmenu-item-horizontal-padding-right)}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:transparent}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal::-webkit-scrollbar-thumb{background-color:var(--ibiz-color-white)}.ibiz-control-appmenu__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-icon-width);height:var(--ibiz-control-appmenu-icon-height);margin:var(--ibiz-control-appmenu-icon-margin)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__icon{margin:0}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__item{display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:var(--ibiz-spacing-tight)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-tooltip{width:100%}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu{display:block}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu>.el-sub-menu__title{display:flex;align-items:center;justify-content:center;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:var(--ibiz-spacing-tight);white-space:nowrap;cursor:pointer}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu .ibiz-control-appmenu-submenu__item{padding:0}.ibiz-control-appmenu.is-show-collapse>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-collapse-height))}.ibiz-control-appmenu .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;height:20px;padding:0 6px;line-height:initial;color:#fff;background-color:#f56c6c;border-radius:10px;transform:translateY(-50%)}.el-menu--popup-container{--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 10px 0 0;--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:40px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-horizontal-height:32px;--ibiz-control-appmenu-item-horizontal-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base);--ibiz-control-appmenu-item-horizontal-padding-right:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-horizontal-popup-height:40px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.el-menu--popup-container .el-menu--popup{padding:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-color-primary)}.el-menu--popup-container .el-menu--popup .el-menu-item,.el-menu--popup-container .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-control-appmenu-item-horizontal-popup-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.el-menu--popup-container .el-menu--popup .el-menu-item.is-active,.el-menu--popup-container .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:transparent}.el-menu--popup-container .el-menu--popup .el-menu-item:hover,.el-menu--popup-container .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.el-menu--popup-container .el-menu--popup .el-menu-item .el-icon,.el-menu--popup-container .el-menu--popup .el-sub-menu__title .el-icon{display:none}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon{position:absolute;right:var(--ibiz-spacing-base-tight);bottom:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon.is-collapse{transform:rotate(180deg)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-collapse-icon{right:0;width:100%;text-align:center}

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

@@ -0,0 +1,16 @@
+'use strict';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class AppMenuProvider {
+  constructor() {
+    __publicField(this, "component", "IBizAppMenuControl");
+  }
+}
+
+exports.AppMenuProvider = AppMenuProvider;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+
+"use strict";
+const IBizAppMenuControl = vue3Util.withInstall(
+  appMenu.AppMenuControl,
+  function(v) {
+    v.component(appMenu.AppMenuControl.name, appMenu.AppMenuControl);
+    runtime.registerControlProvider(runtime.ControlType.APP_MENU, () => new appMenu_provider.AppMenuProvider());
+  }
+);
+
+exports.IBizAppMenuControl = IBizAppMenuControl;
+exports.default = IBizAppMenuControl;