@ibiz-template/vue3-components 0.7.37-alpha.5 → 0.7.38-alpha.21

package/es/control/app-menu/app-menu.mjs

@@ -1,11 +1,11 @@
-import { isVNode, resolveComponent, createVNode, ref, watch, onUnmounted, computed, defineComponent } from 'vue';
-import { RuntimeError, showTitle } from '@ibiz-template/core';
+import { isVNode, createVNode, resolveComponent, defineComponent, ref, watch, onUnmounted, computed, onMounted, nextTick } from 'vue';
+import { RuntimeError, showTitle, findRecursiveChild } from '@ibiz-template/core';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { createUUID } from 'qx-util';
-import { AppMenuController, ViewCallTag } from '@ibiz-template/runtime';
+import { AppMenuController, formatSeparator, ViewCallTag } from '@ibiz-template/runtime';
 import { useRoute } from 'vue-router';
-import './app-menu.css';
 import { MenuDesign } from './custom-menu-design/custom-menu-design.mjs';
+import './app-menu.css';
 
 "use strict";
 function _isSlot(s) {
@@ -21,7 +21,8 @@ function getMenus(items) {
       counterId: item.counterId,
       disabled: !item.appFuncId,
       tooltip: item.tooltip,
-      itemType: item.itemType
+      itemType: item.itemType,
+      sysCss: item.sysCss
     };
     if ((_a = item.appMenuItems) == null ? void 0 : _a.length) {
       data.children = getMenus(item.appMenuItems);
@@ -64,18 +65,23 @@ function findCustomMenu(_key, items) {
   }
   return temp;
 }
-function getMenuCustomVisible(_key, items) {
+function getMenuCustomVisible(_key, items, hideSeparator) {
+  const tag = hideSeparator.includes(_key);
+  if (tag) {
+    return false;
+  }
   const target = findCustomMenu(_key, items);
   if (target) {
     return target.visible;
   }
   return true;
 }
-function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs) {
+function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs, hideSeparator) {
+  var _a, _b;
   if (!c.state.menuItemsState[menu.key].visible) {
     return;
   }
-  if (!getMenuCustomVisible(menu.key, saveConfigs)) {
+  if (!getMenuCustomVisible(menu.key, saveConfigs, hideSeparator)) {
     return;
   }
   if (menu.itemType === "MENUITEM") {
@@ -98,7 +104,7 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs
       }, null) : menu.label.slice(0, 1)];
     }
     return !(isFirst && collapse) ? createVNode(resolveComponent("el-menu-item"), {
-      "class": ns.e("item"),
+      "class": [ns.e("item"), "".concat(((_a = menu.sysCss) == null ? void 0 : _a.cssName) || "")],
       "index": menu.key,
       "disabled": menu.disabled,
       "title": showTitle(menu.tooltip)
@@ -110,13 +116,16 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs
       "placement": "left",
       "theme": "light"
     }, {
-      default: () => [createVNode(resolveComponent("el-menu-item"), {
-        "class": ns.e("item"),
-        "index": menu.key,
-        "disabled": menu.disabled
-      }, _isSlot(content) ? content : {
-        default: () => [content]
-      })]
+      default: () => {
+        var _a2;
+        return [createVNode(resolveComponent("el-menu-item"), {
+          "class": [ns.e("item"), "".concat(((_a2 = menu.sysCss) == null ? void 0 : _a2.cssName) || "")],
+          "index": menu.key,
+          "disabled": menu.disabled
+        }, _isSlot(content) ? content : {
+          default: () => [content]
+        })];
+      }
     });
   }
   if (menu.itemType === "SEPERATOR") {
@@ -127,24 +136,41 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs
       "id": menu.key
     }, null);
   }
+  if (menu.itemType === "RAWITEM") {
+    const menuRawItem = findRecursiveChild(c.model, menu.key, {
+      compareField: "id",
+      childrenFields: ["appMenuItems"]
+    });
+    return createVNode(resolveComponent("el-menu-item"), {
+      "index": menu.key,
+      "title": showTitle(menu.tooltip),
+      "class": [ns.e("rawitem"), "".concat(((_b = menu.sysCss) == null ? void 0 : _b.cssName) || "")]
+    }, {
+      default: () => [createVNode(resolveComponent("iBizRawItem"), {
+        "rawItem": menuRawItem
+      }, null)]
+    });
+  }
 }
-function renderSubmenu(isFirst, subMenu, collapse, ns, c, counterData, saveConfigs) {
+function renderSubmenu(isFirst, subMenu, collapse, ns, c, counterData, saveConfigs, hideSeparator) {
+  var _a, _b, _c, _d, _e;
   if (!c.state.menuItemsState[subMenu.key].visible) {
     return;
   }
-  if (!getMenuCustomVisible(subMenu.key, saveConfigs)) {
+  if (!getMenuCustomVisible(subMenu.key, saveConfigs, hideSeparator)) {
     return;
   }
   return createVNode(resolveComponent("el-sub-menu"), {
-    "class": ns.b("submenu"),
+    "class": [ns.b("submenu"), "".concat(((_a = subMenu.sysCss) == null ? void 0 : _a.cssName) || "")],
     "index": subMenu.key,
-    "popper-class": ns.b("popup-container")
+    "teleported": true,
+    "popper-class": [ns.b("popup-container"), ns.b("".concat(c.model.codeName.toLowerCase(), "--popper")), "".concat(((_b = c.model.sysCss) == null ? void 0 : _b.cssName) ? "".concat((_c = c.model.sysCss) == null ? void 0 : _c.cssName, "--popper") : ""), "".concat(((_d = subMenu.sysCss) == null ? void 0 : _d.cssName) ? "".concat((_e = subMenu.sysCss) == null ? void 0 : _e.cssName, "--popper") : "")]
   }, {
     default: () => subMenu.children.map((item) => {
       if (item.children) {
-        return renderSubmenu(false, item, collapse, ns, c, counterData, saveConfigs);
+        return renderSubmenu(false, item, collapse, ns, c, counterData, saveConfigs, hideSeparator);
       }
-      return renderMenuItem(false, item, collapse, ns, c, counterData, saveConfigs);
+      return renderMenuItem(false, item, collapse, ns, c, counterData, saveConfigs, hideSeparator);
     }),
     title: () => {
       const provider = c.itemProviders[subMenu.key];
@@ -193,7 +219,7 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
     collapse: Boolean,
     currentPath: String
   },
-  setup() {
+  setup(props) {
     const c = useControlController((...args) => new AppMenuController(...args));
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const menus = ref(getMenus(c.model.appMenuItems));
@@ -204,6 +230,9 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
     let counter = null;
     const counterData = ref({});
     const key = ref(createUUID());
+    const menuRef = ref();
+    const hasScroll = ref(false);
+    const hideSeparator = ref([]);
     const calcCurMenu = () => {
       const allItems = c.getAllItems();
       const app = ibiz.hub.getApp(c.context.srfappid);
@@ -222,6 +251,10 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
         return;
       }
       defaultActive.value = id;
+      const menu = c.getAllItems().find((m) => m.id === id);
+      if ((menu == null ? void 0 : menu.itemType) === "RAWITEM" || c.runMode === "DESIGN") {
+        return;
+      }
       await c.onClickMenuItem(id, event);
     };
     watch(() => route.params.view2, (newVal, oldVal) => {
@@ -254,6 +287,7 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
           defaultOpens.value.push(item.id);
         });
       }
+      hideSeparator.value = formatSeparator("APPMENU", c.model.appMenuItems, c.state.menuItemsState, saveConfigs.value);
     });
     c.evt.on("onMounted", async () => {
       const counterRefId = c.model.appCounterRefId;
@@ -277,6 +311,24 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
           return "vertical";
       }
     });
+    const calcScroll = () => {
+      if (menuRef.value && menuRef.value.$el.children) {
+        const elMenu = menuRef.value.$el.children[0];
+        if (elMenu) {
+          hasScroll.value = elMenu.scrollHeight > elMenu.clientHeight;
+        }
+      }
+    };
+    onMounted(() => {
+      calcScroll();
+    });
+    watch(() => props.collapse, () => {
+      nextTick(() => {
+        calcScroll();
+      });
+    }, {
+      immediate: true
+    });
     if (c.view.model.mainMenuAlign && c.view.model.mainMenuAlign !== "LEFT" && c.view.model.mainMenuAlign !== "TOP") {
       ibiz.message.warning(ibiz.i18n.t("control.menu.noSupportAlign", {
         align: c.view.model.mainMenuAlign
@@ -291,11 +343,20 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
     const enableCustomized = computed(() => {
       return c.model.enableCustomized;
     });
+    const computeSeparator = () => {
+      var _a;
+      (_a = c.model.appMenuItems) == null ? void 0 : _a.forEach((item) => {
+        c.initMenuItemState(item);
+      });
+      hideSeparator.value = formatSeparator("APPMENU", c.model.appMenuItems, c.state.menuItemsState, saveConfigs.value);
+    };
     const configSaves = (saveConfig) => {
       saveConfigs.value = saveConfig;
+      computeSeparator();
     };
     const configReset = () => {
       saveConfigs.value = [];
+      computeSeparator();
     };
     const ellipsisSvg = () => {
       return createVNode("ion-icon", {
@@ -303,11 +364,13 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       }, null);
     };
     return {
+      menuRef,
       menus,
       c,
       key,
       onClick,
       ns,
+      hasScroll,
       defaultActive,
       defaultOpens,
       menuMode,
@@ -317,50 +380,56 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       configReset,
       isShowCollapse,
       enableCustomized,
-      ellipsisSvg
+      ellipsisSvg,
+      hideSeparator
     };
   },
   render() {
+    var _a;
     return createVNode(resolveComponent("iBizControlBase"), {
-      "class": [this.ns.b(), this.ns.m(this.menuMode), this.ns.is("collapse", this.collapse), this.ns.is("show-collapse", this.isShowCollapse), this.ns.is("show-menu-design", this.enableCustomized)],
+      "ref": "menuRef",
+      "class": [this.ns.b(), this.ns.b("".concat(this.c.model.codeName.toLowerCase())), this.ns.m(this.menuMode), this.ns.is("collapse", this.collapse), this.ns.is("show-collapse", this.isShowCollapse), this.ns.is("show-menu-design", this.enableCustomized), this.ns.is("scroll", this.hasScroll), "".concat(((_a = this.c.model.sysCss) == null ? void 0 : _a.cssName) || "")],
       "controller": this.c
     }, {
-      default: () => [this.c.state.isCreated && createVNode(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-icon": () => this.ellipsisSvg(),
-        "ellipsis": this.menuMode === "horizontal"
-      }, {
-        default: () => {
-          return 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, this.saveConfigs);
-            }
-            return renderMenuItem(true, item, this.collapse, this.ns, this.c, this.counterData, this.saveConfigs);
-          });
-        }
-      }), this.enableCustomized && createVNode(MenuDesign, {
-        "class": [this.ns.b("menu-set"), this.ns.is("collapse", this.collapse), this.ns.is("horizontal", this.c.view.model.mainMenuAlign === "TOP")],
-        "controller": this.c,
-        "menus": this.menus,
-        "onSaved": this.configSaves,
-        "onReset": this.configReset
-      }, null), this.isShowCollapse && createVNode("div", {
-        "class": [this.ns.b("collapse-icon"), this.ns.is("collapse", this.collapse)],
-        "onClick": () => {
-          this.c.view.call(ViewCallTag.TOGGLE_COLLAPSE);
-        }
-      }, [createVNode("ion-icon", {
-        "name": "menu-collapse"
-      }, null)])]
+      default: () => {
+        var _a2, _b;
+        return [this.c.state.isCreated && createVNode(resolveComponent("el-menu"), {
+          "key": this.key,
+          "popper-class": [this.ns.b("popper"), this.ns.b("".concat(this.c.model.codeName.toLowerCase(), "--popper")), "".concat(((_a2 = this.c.model.sysCss) == null ? void 0 : _a2.cssName) ? "".concat((_b = this.c.model.sysCss) == null ? void 0 : _b.cssName, "--popper") : "")],
+          "default-active": this.defaultActive,
+          "default-openeds": this.defaultOpens,
+          "collapse": this.collapse,
+          "collapse-transition": false,
+          "onSelect": this.onClick,
+          "theme": "light",
+          "mode": this.menuMode,
+          "ellipsis-icon": () => this.ellipsisSvg(),
+          "ellipsis": this.menuMode === "horizontal"
+        }, {
+          default: () => {
+            return this.menus.map((item) => {
+              var _a3;
+              if (((_a3 = item.children) == null ? void 0 : _a3.length) > 0) {
+                return renderSubmenu(true, item, this.collapse, this.ns, this.c, this.counterData, this.saveConfigs, this.hideSeparator);
+              }
+              return renderMenuItem(true, item, this.collapse, this.ns, this.c, this.counterData, this.saveConfigs, this.hideSeparator);
+            });
+          }
+        }), this.enableCustomized && createVNode(MenuDesign, {
+          "class": [this.ns.b("menu-set"), this.ns.is("collapse", this.collapse), this.ns.is("horizontal", this.c.view.model.mainMenuAlign === "TOP")],
+          "controller": this.c,
+          "menus": this.menus,
+          "onSaved": this.configSaves,
+          "onReset": this.configReset
+        }, null), this.isShowCollapse && createVNode("div", {
+          "class": [this.ns.b("collapse-icon"), this.ns.is("collapse", this.collapse)],
+          "onClick": () => {
+            this.c.view.call(ViewCallTag.TOGGLE_COLLAPSE);
+          }
+        }, [createVNode("ion-icon", {
+          "name": "menu-collapse"
+        }, null)])];
+      }
     });
   }
 });

package/es/control/app-menu/custom-menu-design/custom-menu-design.mjs

@@ -1,8 +1,9 @@
-import { isVNode, ref, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, onMounted, createVNode, resolveComponent } from 'vue';
+import { formatSeparator } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import './custom-menu-design.css';
 import { RuntimeError, showTitle } from '@ibiz-template/core';
 import { cloneDeep } from 'lodash-es';
+import './custom-menu-design.css';
 
 "use strict";
 function _isSlot(s) {
@@ -44,6 +45,10 @@ const MenuDesign = /* @__PURE__ */ defineComponent({
     const loading = ref(false);
     const visible = ref(false);
     const configs = ref([]);
+    const hideSeparator = ref([]);
+    onMounted(() => {
+      hideSeparator.value = formatSeparator("APPMENU", c.model.appMenuItems, c.state.menuItemsState);
+    });
     const stopExpand = (event) => {
       event.stopPropagation();
     };
@@ -127,6 +132,9 @@ const MenuDesign = /* @__PURE__ */ defineComponent({
       if (!((_a = c.state.menuItemsState[menu.key]) == null ? void 0 : _a.visible)) {
         return;
       }
+      if (hideSeparator.value.includes(menu.key)) {
+        return;
+      }
       if (menu.itemType === "MENUITEM") {
         let content;
         const provider = c.itemProviders[menu.key];
@@ -219,6 +227,9 @@ const MenuDesign = /* @__PURE__ */ defineComponent({
       }, [renderMenuList(configs.value)]);
     };
     const openDesign = () => {
+      if (c.runMode === "DESIGN") {
+        return;
+      }
       configs.value = mergeMenusConfig(cloneDeep(props.menus));
       visible.value = true;
     };

package/es/control/app-menu/index.d.ts

@@ -17,11 +17,13 @@ export declare const IBizAppMenuControl: import("@ibiz-template/vue3-util").Type
     collapse: BooleanConstructor;
     currentPath: StringConstructor;
 }, {
+    menuRef: import("vue").Ref<any>;
     menus: import("vue").Ref<IData[]>;
     c: import("@ibiz-template/runtime").AppMenuController;
     key: import("vue").Ref<string>;
     onClick: (id: string, event?: MouseEvent | undefined) => Promise<void>;
     ns: import("@ibiz-template/core").Namespace;
+    hasScroll: import("vue").Ref<boolean>;
     defaultActive: import("vue").Ref<string>;
     defaultOpens: import("vue").Ref<string[]>;
     menuMode: import("vue").ComputedRef<"vertical" | "horizontal">;
@@ -32,6 +34,7 @@ export declare const IBizAppMenuControl: import("@ibiz-template/vue3-util").Type
     isShowCollapse: import("vue").ComputedRef<boolean>;
     enableCustomized: import("vue").ComputedRef<boolean | undefined>;
     ellipsisSvg: () => JSX.Element;
+    hideSeparator: import("vue").Ref<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IAppMenu>;

package/es/control/app-menu/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { AppMenuControl } from './app-menu.mjs';
 import { AppMenuProvider } from './app-menu.provider.mjs';

package/es/control/app-menu-icon-view/app-menu-icon-view.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, createVNode, resolveComponent } from 'vue';
 import { AppMenuIconViewController } from '@ibiz-template/runtime';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './app-menu-icon-view.css';

package/es/control/app-menu-icon-view/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { AppMenuIconViewProvider } from './app-menu-icon-view.provider.mjs';
 import { AppMenuIconViewControl } from './app-menu-icon-view.mjs';

package/es/control/calendar/calendar.css

@@ -1 +1 @@
-.ibiz-control-calendar{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);width:100%;height:100%}.ibiz-control-calendar__calendar-item{display:flex;align-items:center;padding:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar__icon{width:var(--ibiz-width-icon-small);height:var(--ibiz-width-icon-small);margin-right:var(--ibiz-spacing-base-tight);border-radius:var(--ibiz-border-radius-circle)}.ibiz-control-calendar .ibiz-control-calendar-item{margin:0}.ibiz-control-calendar-content{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-control-calendar-content .el-calendar{display:flex;flex-direction:column;height:100%}.ibiz-control-calendar-content .el-calendar__header{flex-wrap:wrap}.ibiz-control-calendar-content .el-calendar-table,.ibiz-control-calendar-content .el-calendar-table .el-calendar-day{width:100%;height:100%;min-height:90px;cursor:pointer}.ibiz-control-calendar-content .el-calendar-table{flex:1;width:-moz-fit-content;width:fit-content}.ibiz-control-calendar-content .el-calendar-table .el-calendar-day:hover{cursor:pointer;background-color:var(--el-calendar-selected-bg-color)}.ibiz-control-calendar-content .el-calendar__body{display:flex;flex:1;padding:0;overflow:auto}.ibiz-control-calendar-more{width:100%;font-size:var(--ibiz-font-size-small);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);height:100%;padding:var(--ibiz-control-calendar-item-padding);margin-bottom:var(--ibiz-control-calendar-margin);overflow:hidden;font-size:var(--ibiz-control-calendar-font-size);color:var(--ibiz-control-calendar-text-color);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:solid .5px transparent;border-radius:var(--ibiz-control-calendar-border-radius)}.ibiz-control-calendar-item:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item.is-active{background-color:var(--ibiz-control-calendar-active-bg-color);border:solid .5px var(--ibiz-control-calendar-border-color)}.ibiz-control-calendar-date-text{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);padding-bottom:var(--ibiz-control-calendar-item-padding);margin:0;text-align:center}.ibiz-control-calendar-day{height:-moz-fit-content;height:fit-content}.ibiz-control-calendar-content-title{line-height:var(--ibiz-editor-default-line-height)}.ibiz-control-calendar-content-header{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-calendar-content-header>*+*{margin-left:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar-legend{display:flex;justify-content:flex-end;width:100%}.ibiz-control-calendar-legend>*+*{margin-left:var(--ibiz-spacing-base-loose)}.ibiz-control-calendar-timeline-content .el-timeline{padding-left:0}
+.ibiz-control-calendar{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);width:100%;height:100%;position:relative}.ibiz-control-calendar__nav-icon{right:0;top:18px;cursor:pointer;position:absolute;color:var(--ibiz-color-primary)}.ibiz-control-calendar__calendar-item{display:flex;align-items:center;padding:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar__icon{width:var(--ibiz-width-icon-small);height:var(--ibiz-width-icon-small);margin-right:var(--ibiz-spacing-base-tight);border-radius:var(--ibiz-border-radius-circle)}.ibiz-control-calendar .ibiz-control-calendar-item{margin:0}.ibiz-control-calendar-content{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-control-calendar-content .el-calendar{display:flex;flex-direction:column;height:100%}.ibiz-control-calendar-content .el-calendar__header{flex-wrap:wrap}.ibiz-control-calendar-content .el-calendar-table,.ibiz-control-calendar-content .el-calendar-table .el-calendar-day{width:100%;height:100%;min-height:90px;cursor:pointer}.ibiz-control-calendar-content .el-calendar-table{flex:1;width:-moz-fit-content;width:fit-content}.ibiz-control-calendar-content .el-calendar-table .el-calendar-day:hover{cursor:pointer;background-color:var(--el-calendar-selected-bg-color)}.ibiz-control-calendar-content .el-calendar__body{display:flex;flex:1;padding:0;overflow:auto}.ibiz-control-calendar-more{width:100%;font-size:var(--ibiz-font-size-small);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);height:100%;padding:var(--ibiz-control-calendar-item-padding);margin-bottom:var(--ibiz-control-calendar-margin);overflow:hidden;font-size:var(--ibiz-control-calendar-font-size);color:var(--ibiz-control-calendar-text-color);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:solid .5px transparent;border-radius:var(--ibiz-control-calendar-border-radius)}.ibiz-control-calendar-item:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item.is-active{background-color:var(--ibiz-control-calendar-active-bg-color);border:solid .5px var(--ibiz-control-calendar-border-color)}.ibiz-control-calendar-date-text{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);padding-bottom:var(--ibiz-control-calendar-item-padding);margin:0;text-align:center}.ibiz-control-calendar-day{height:-moz-fit-content;height:fit-content}.ibiz-control-calendar-content-title{line-height:var(--ibiz-editor-default-line-height)}.ibiz-control-calendar-content-header{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-calendar-content-header>*+*{margin-left:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar-legend{display:flex;justify-content:flex-end;width:100%}.ibiz-control-calendar-legend>*+*{margin-left:var(--ibiz-spacing-base-loose)}.ibiz-control-calendar-timeline-content .el-timeline{padding-left:0}

package/es/control/calendar/calendar.d.ts

@@ -22,6 +22,10 @@ export declare const CalendarControl: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
@@ -29,10 +33,12 @@ export declare const CalendarControl: import("vue").DefineComponent<{
 }, {
     c: CalendarController;
     ns: import("@ibiz-template/core").Namespace;
+    curPopover: import("vue").Ref<IData | undefined>;
     calendarRef: import("vue").Ref<IData | undefined>;
-    popoverVisible: import("vue").Ref<boolean>;
+    popoverValue: import("vue").Ref<string>;
     selectDate: (tag: string) => void;
     calcItemStyle: (data: ICalendarItemData) => IData;
+    onShowNavView: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<ISysCalendar>;
@@ -53,6 +59,10 @@ export declare const CalendarControl: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
@@ -60,5 +70,6 @@ export declare const CalendarControl: import("vue").DefineComponent<{
 }>>, {
     params: IParams;
     mdctrlActiveMode: number;
+    isSimple: boolean;
     loadDefault: boolean;
 }, {}>;

package/es/control/calendar/calendar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, watch, createVNode, resolveComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { CalendarController } from '@ibiz-template/runtime';
 import dayjs from 'dayjs';
@@ -32,6 +32,10 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       type: Number,
       default: void 0
     },
+    isSimple: {
+      type: Boolean,
+      required: false
+    },
     loadDefault: {
       type: Boolean,
       default: true
@@ -41,14 +45,18 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new CalendarController(...args));
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const calendarRef = ref();
-    const popoverVisible = ref(false);
+    const curPopover = ref();
+    const popoverValue = ref("");
     const selectDate = (tag) => {
       if (!calendarRef.value)
         return;
       calendarRef.value.selectDate(tag);
     };
     c.evt.on("onActive", () => {
-      popoverVisible.value = false;
+      if (curPopover.value) {
+        curPopover.value.hide();
+        curPopover.value = void 0;
+      }
     });
     watch(() => c.state.selectedDate, (oldVal, newVal) => {
       const oldDateString = dayjs(oldVal).format("YYYY-MM");
@@ -64,17 +72,21 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         backgroundColor: data.bkColor
       };
     };
+    const onShowNavView = () => {
+      c.state.showNavView = !c.state.showNavView;
+    };
     return {
       c,
       ns,
+      curPopover,
       calendarRef,
-      popoverVisible,
+      popoverValue,
       selectDate,
-      calcItemStyle
+      calcItemStyle,
+      onShowNavView
     };
   },
   render() {
-    let _slot6;
     const renderPanelItem = (item, modelData) => {
       const {
         context,
@@ -129,8 +141,14 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       if (items.length > 1) {
         return [renderCalendarItem(items[0]), createVNode(resolveComponent("el-popover"), {
           "trigger": "click",
-          "visible": this.popoverVisible,
-          "onUpdate:visible": ($event) => this.popoverVisible = $event
+          "ref": (el) => {
+            if (el && items[0].id === this.popoverValue) {
+              this.curPopover = el;
+            }
+          },
+          "onShow": () => {
+            this.popoverValue = items[0].id;
+          }
         }, {
           reference: () => {
             return createVNode("span", {
@@ -330,10 +348,24 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
           return renderElCalender();
       }
     };
-    return createVNode(resolveComponent("iBizControlBase"), {
+    return createVNode(resolveComponent("iBizControlNavigation"), {
       "controller": this.c
-    }, _isSlot(_slot6 = renderCalendar()) ? _slot6 : {
-      default: () => [_slot6]
+    }, {
+      default: () => [createVNode(resolveComponent("iBizControlBase"), {
+        "controller": this.c
+      }, {
+        default: () => [renderCalendar(), this.c.state.enableNavView ? !this.c.state.showNavView ? createVNode("ion-icon", {
+          "class": this.ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.showNav"),
+          "name": "eye-outline",
+          "onClick": this.onShowNavView
+        }, null) : createVNode("ion-icon", {
+          "class": this.ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
+          "name": "eye-off-outline",
+          "onClick": this.onShowNavView
+        }, null) : null]
+      })]
     });
   }
 });

package/es/control/calendar/components/calendar-daily/calendar-daily.mjs

@@ -1,4 +1,4 @@
-import { watch, onMounted, onUnmounted, createVNode, defineComponent } from 'vue';
+import { defineComponent, watch, onMounted, onUnmounted, createVNode } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import '../interface/index.mjs';

package/es/control/calendar/components/calendar-week/calendar-week.mjs

@@ -1,4 +1,4 @@
-import { ref, watch, onMounted, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
+import { defineComponent, ref, watch, onMounted, onUnmounted, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import '../interface/index.mjs';

package/es/control/calendar/components/custom-calendar/custom-calendar.mjs

@@ -1,4 +1,4 @@
-import { onMounted, createVNode, resolveComponent, defineComponent } from 'vue';
+import { defineComponent, onMounted, createVNode, resolveComponent } from 'vue';
 import dayjs from 'dayjs';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';

package/es/control/calendar/components/interface/calendar-daily.mjs

@@ -1,5 +1,5 @@
 import '../util/index.mjs';
-import { definePropType, handleProps } from '../util/util.mjs';
+import { handleProps, definePropType } from '../util/util.mjs';
 import { isObject } from 'lodash-es';
 
 "use strict";

package/es/control/calendar/components/interface/calendar-week.mjs

@@ -1,5 +1,5 @@
 import '../util/index.mjs';
-import { definePropType, handleProps } from '../util/util.mjs';
+import { handleProps, definePropType } from '../util/util.mjs';
 import { isObject } from 'lodash-es';
 
 "use strict";

package/es/control/calendar/components/interface/custom-calendar.mjs

@@ -1,7 +1,7 @@
 import '../util/index.mjs';
 import '../constant/index.mjs';
 import { isArray, isDate } from 'lodash-es';
-import { definePropType, handleProps } from '../util/util.mjs';
+import { handleProps, definePropType } from '../util/util.mjs';
 import { UPDATE_MODEL_EVENT, INPUT_EVENT, CHANGE_EVENT, EVENT_CLICK_EVENT, EVENT_DBL_CLICK_EVENT } from '../constant/event.mjs';
 
 "use strict";