@ibiz-template/vue3-components 0.7.38-alpha.12 → 0.7.38-alpha.31

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

@@ -1,8 +1,8 @@
-import { isVNode, createVNode, resolveComponent, defineComponent, ref, watch, onUnmounted, computed } from 'vue';
+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 { MenuDesign } from './custom-menu-design/custom-menu-design.mjs';
 import './app-menu.css';
@@ -65,19 +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") {
@@ -148,12 +152,12 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs
     });
   }
 }
-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"), {
@@ -164,9 +168,9 @@ function renderSubmenu(isFirst, subMenu, collapse, ns, c, counterData, saveConfi
   }, {
     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];
@@ -215,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));
@@ -226,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);
@@ -245,17 +252,19 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       }
       defaultActive.value = id;
       const menu = c.getAllItems().find((m) => m.id === id);
-      if ((menu == null ? void 0 : menu.itemType) === "RAWITEM" || c.context.srfrunmode === "DESIGN") {
+      if ((menu == null ? void 0 : menu.itemType) === "RAWITEM" || c.runMode === "DESIGN") {
         return;
       }
       await c.onClickMenuItem(id, event);
     };
-    watch(() => route.params.view2, (newVal, oldVal) => {
-      if (newVal !== oldVal && ibiz.config.appMenu.enableEcho) {
-        const activeMenu = calcCurMenu();
-        defaultActive.value = activeMenu ? activeMenu.id : "";
-      }
-    });
+    if (c.runMode !== "DESIGN") {
+      watch(() => route.params.view2, (newVal, oldVal) => {
+        if (newVal !== oldVal && ibiz.config.appMenu.enableEcho) {
+          const activeMenu = calcCurMenu();
+          defaultActive.value = activeMenu ? activeMenu.id : "";
+        }
+      });
+    }
     const fn = (data) => {
       counterData.value = data;
     };
@@ -280,6 +289,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;
@@ -303,6 +313,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
@@ -317,11 +345,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", {
@@ -329,11 +366,13 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       }, null);
     };
     return {
+      menuRef,
       menus,
       c,
       key,
       onClick,
       ns,
+      hasScroll,
       defaultActive,
       defaultOpens,
       menuMode,
@@ -343,20 +382,21 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       configReset,
       isShowCollapse,
       enableCustomized,
-      ellipsisSvg
+      ellipsisSvg,
+      hideSeparator
     };
   },
   render() {
     var _a;
     return createVNode(resolveComponent("iBizControlBase"), {
-      "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), "".concat(((_a = this.c.model.sysCss) == null ? void 0 : _a.cssName) || "")],
+      "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: () => {
         var _a2, _b;
         return [this.c.state.isCreated && createVNode(resolveComponent("el-menu"), {
           "key": this.key,
-          "ref": "menu",
           "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,
@@ -372,9 +412,9 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
             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);
+                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);
+              return renderMenuItem(true, item, this.collapse, this.ns, this.c, this.counterData, this.saveConfigs, this.hideSeparator);
             });
           }
         }), this.enableCustomized && createVNode(MenuDesign, {

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

@@ -1,8 +1,9 @@
-import { isVNode, defineComponent, ref, createVNode, resolveComponent } 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,9 +227,10 @@ const MenuDesign = /* @__PURE__ */ defineComponent({
       }, [renderMenuList(configs.value)]);
     };
     const openDesign = () => {
-      if (c.context.srfrunmode === "DESIGN") {
+      if (c.runMode === "DESIGN") {
         return;
       }
+      hideSeparator.value = formatSeparator("APPMENU", c.model.appMenuItems, c.state.menuItemsState);
       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/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

@@ -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/index.d.ts

@@ -18,6 +18,10 @@ export declare const IBizCalendarControl: import("@ibiz-template/vue3-util").Typ
         type: NumberConstructor;
         default: undefined;
     };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
@@ -25,10 +29,12 @@ export declare const IBizCalendarControl: import("@ibiz-template/vue3-util").Typ
 }, {
     c: import("@ibiz-template/runtime").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: import("@ibiz-template/runtime").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: import("vue").PropType<import("@ibiz/model-core").ISysCalendar>;
@@ -49,6 +55,10 @@ export declare const IBizCalendarControl: import("@ibiz-template/vue3-util").Typ
         type: NumberConstructor;
         default: undefined;
     };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
@@ -56,6 +66,7 @@ export declare const IBizCalendarControl: import("@ibiz-template/vue3-util").Typ
 }>>, {
     params: IParams;
     mdctrlActiveMode: number;
+    isSimple: boolean;
     loadDefault: boolean;
 }, {}>>;
 export default IBizCalendarControl;