@ibiz-template/vue3-components 0.7.13-alpha.0 → 0.7.14

package/es/common/carousel/carousel.d.ts

@@ -62,6 +62,10 @@ export declare const IBizCarouselComponent: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    carouselMode: {
+        type: StringConstructor;
+        required: true;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     swipeData: Ref<IData[]>;
@@ -127,6 +131,10 @@ export declare const IBizCarouselComponent: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    carouselMode: {
+        type: StringConstructor;
+        required: true;
+    };
 }>>, {
     isAuto: boolean;
     timeSpan: number;

package/es/common/carousel/carousel.mjs

@@ -20,6 +20,10 @@ const IBizCarouselComponent = /* @__PURE__ */ defineComponent({
     timeSpan: {
       type: Number,
       default: 3e3
+    },
+    carouselMode: {
+      type: String,
+      required: true
     }
   },
   setup(props) {
@@ -57,7 +61,11 @@ const IBizCarouselComponent = /* @__PURE__ */ defineComponent({
         }, null);
       }
     };
-    return createVNode("div", null, [createVNode(resolveComponent("el-carousel"), {
+    return createVNode("div", null, [this.carouselMode === "card" ? createVNode(resolveComponent("IBizCarousel-card"), {
+      "swipeData": this.swipeData,
+      "isAuto": this.isAuto,
+      "timeSpan": this.timeSpan
+    }, null) : createVNode(resolveComponent("el-carousel"), {
       "class": this.ns.b(),
       "autoplay": this.isAuto,
       "interval": this.timeSpan

package/es/common/carousel-card/carousel-card.css

@@ -0,0 +1 @@
+.ibiz-carousel-card{position:relative;z-index:1;padding:0;margin-right:auto;margin-left:auto;overflow:hidden;list-style:none}.ibiz-carousel-card__swiper-list{position:relative;z-index:1;padding:0;margin-right:auto;margin-left:auto;overflow:hidden;list-style:none}.ibiz-carousel-card__swiper-main{position:relative;z-index:1;box-sizing:content-box;display:flex;width:100%;height:100%;transition:transform .5s ease-in-out;transition-property:transform}.ibiz-carousel-card__swiper-main img{display:block;display:inline-block;flex-shrink:0;border-radius:4px;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.ibiz-carousel-card__leftBtn{position:absolute;top:0;left:0;z-index:2;height:100%;background-image:linear-gradient(90deg,#fff 38%,rgba(255,255,255,0));transition:.4s}.ibiz-carousel-card__rightBtn{position:absolute;top:0;right:0;z-index:2;height:100%;background-image:linear-gradient(270deg,#fff 38%,rgba(255,255,255,0));transition:.4s}.ibiz-carousel-card__dot{z-index:1;display:flex;justify-content:center;margin-top:20px}.ibiz-carousel-card__dot-item{width:8px;height:8px;margin-right:8px;cursor:pointer;background:#eee;border-radius:4px;transition:all .5s ease}.ibiz-carousel-card__dot-item.isActive{width:16px;background:#6698ff}

package/es/common/carousel-card/carousel-card.d.ts

@@ -0,0 +1,41 @@
+import { PropType, Ref } from 'vue';
+import './carousel-card.scss';
+export declare const IBizCarouselCard: import("vue").DefineComponent<{
+    swipeData: {
+        type: PropType<IData[]>;
+        required: true;
+    };
+    isAuto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    timeSpan: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    btnClick: (pos: string) => void;
+    mainDom: Ref<any>;
+    listDom: Ref<any>;
+    imgWidth: Ref<number>;
+    resImgArr: import("vue").ComputedRef<IData[]>;
+    dotClick: (targetIndex: number) => void;
+    nowIndex: Ref<number>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    swipeData: {
+        type: PropType<IData[]>;
+        required: true;
+    };
+    isAuto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    timeSpan: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    isAuto: boolean;
+    timeSpan: number;
+}, {}>;

package/es/common/carousel-card/carousel-card.mjs

@@ -0,0 +1,218 @@
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './carousel-card.css';
+
+"use strict";
+const IBizCarouselCard = /* @__PURE__ */ defineComponent({
+  name: "IBizCarouselCard",
+  props: {
+    swipeData: {
+      type: Object,
+      required: true
+    },
+    isAuto: {
+      type: Boolean,
+      default: true
+    },
+    timeSpan: {
+      type: Number,
+      default: 3e3
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("carousel-card");
+    const nowIndex = ref(3);
+    const mainDom = ref();
+    const listDom = ref();
+    const gap = 0;
+    const imgWidth = ref(600);
+    const containerWidth = ref(0);
+    const diffLen = computed(() => {
+      return (containerWidth.value - imgWidth.value - gap * 2) / 2;
+    });
+    let timer = null;
+    const imgDoms = document.getElementsByClassName("swiper-slide-card");
+    const scale = 0.8;
+    const aniTime = 500;
+    const resImgArr = computed(() => {
+      if (props.swipeData.length > 2) {
+        return [...props.swipeData.slice(-2), ...props.swipeData, ...props.swipeData.slice(0, 2)];
+      }
+      return [...props.swipeData];
+    });
+    const setScale = () => {
+      for (let i = 0; i < imgDoms.length; i++) {
+        if (props.swipeData.length === 2) {
+          imgDoms[0].style.left = "".concat(containerWidth.value / 4 - imgWidth.value / 2, "px");
+          imgDoms[1].style.left = "".concat(containerWidth.value / 4 * 3 - imgWidth.value / 2, "px");
+        } else if (props.swipeData.length === 1) {
+          imgDoms[i].style.left = "".concat(containerWidth.value / 2 - imgWidth.value / 2, "px");
+        } else {
+          imgDoms[i].style.left = "".concat((i - 1) * (imgWidth.value + gap), "px");
+        }
+        if (i === nowIndex.value - 1) {
+          imgDoms[i].style.transform = "scale(1)";
+        } else {
+          imgDoms[i].style.transform = "scale(".concat(scale, ")");
+        }
+      }
+    };
+    const nextSlider = (anitime) => {
+      if (props.swipeData.length === 2) {
+        nowIndex.value = nowIndex.value ? 0 : 1;
+        setScale();
+      } else if (props.swipeData.length === 1) {
+      } else {
+        if (nowIndex.value >= 2) {
+          mainDom.value.style.transition = "left ".concat(anitime / 1e3, "s");
+          mainDom.value.style.left = "".concat(parseInt(mainDom.value.style.left, 10) - (gap + imgWidth.value), "px");
+        }
+        if (nowIndex.value === props.swipeData.length + 1) {
+          nowIndex.value = props.swipeData.length + 2;
+          setScale();
+          setTimeout(() => {
+            nowIndex.value = 2;
+            setScale();
+            mainDom.value.style.transitionProperty = "none";
+            mainDom.value.style.left = "".concat(-(imgWidth.value - diffLen.value), "px");
+          }, anitime);
+        } else {
+          nowIndex.value++;
+          setScale();
+        }
+      }
+    };
+    const prevSlider = (anitime) => {
+      if (props.swipeData.length === 2) {
+        nowIndex.value = nowIndex.value ? 0 : 1;
+        setScale();
+      } else if (props.swipeData.length === 1) {
+      } else {
+        nowIndex.value--;
+        mainDom.value.style.transition = "left ".concat(anitime / 1e3, "s");
+        mainDom.value.style.left = "".concat(parseInt(mainDom.value.style.left, 10) + (gap + imgWidth.value), "px");
+        if (nowIndex.value === 1) {
+          setScale();
+          setTimeout(() => {
+            nowIndex.value = props.swipeData.length + 1;
+            setScale();
+            mainDom.value.style.transitionProperty = "none";
+            mainDom.value.style.left = "".concat(-(parseInt(imgDoms[nowIndex.value].style.left, 10) - diffLen.value - gap), "px");
+          }, anitime);
+        } else {
+          setScale();
+        }
+      }
+    };
+    const startAutoplay = () => {
+      timer = window.setInterval(() => nextSlider(aniTime), props.timeSpan);
+    };
+    const stopAutoplay = () => {
+      if (timer) {
+        window.clearInterval(timer);
+        timer = null;
+      }
+    };
+    setScale();
+    onMounted(() => {
+      if (props.isAuto) {
+        startAutoplay();
+      }
+    });
+    onBeforeUnmount(() => {
+      stopAutoplay();
+    });
+    nextTick(() => {
+      containerWidth.value = listDom.value.clientWidth;
+      imgWidth.value = imgDoms[0].clientWidth;
+      if (mainDom.value) {
+        mainDom.value.style.left = "".concat(-(2 * imgWidth.value + gap - diffLen.value), "px");
+        mainDom.value.style.width = "".concat((props.swipeData.length + 2) * (imgWidth.value + gap / 2), "px");
+      }
+      setScale();
+    });
+    const btnClick = (pos) => {
+      if (pos === "left") {
+        prevSlider(aniTime);
+      } else if (pos === "right") {
+        nextSlider(aniTime);
+      }
+    };
+    const dotClick = (targetIndex) => {
+      nowIndex.value = targetIndex + 2 + 1;
+      if (nowIndex.value === props.swipeData.length + 2) {
+        nowIndex.value = 2;
+      }
+      mainDom.value.style.transition = "left ".concat(aniTime / 1e3, "s");
+      mainDom.value.style.left = "".concat(-((nowIndex.value - 1) * imgWidth.value + gap - diffLen.value), "px");
+      setScale();
+    };
+    return {
+      ns,
+      btnClick,
+      mainDom,
+      listDom,
+      imgWidth,
+      resImgArr,
+      dotClick,
+      nowIndex
+    };
+  },
+  render() {
+    const renderPic = (item) => {
+      if (item.cssClass) {
+        if (item.cssClass.indexOf("fa-") !== -1) {
+          return createVNode("i", {
+            "class": [item.cssClas, "swiper-slide-card"]
+          }, null);
+        }
+        return createVNode("ion-icon", {
+          "class": "swiper-slide-card",
+          "name": item.cssClass
+        }, null);
+      }
+      if (item.imgUrl) {
+        return createVNode("img", {
+          "class": "swiper-slide-card",
+          "style": "width: ".concat(this.imgWidth, "px"),
+          "alt": item.name,
+          "src": item.imgUrl
+        }, null);
+      }
+    };
+    let newIndex = this.nowIndex;
+    if (this.nowIndex < this.swipeData.length) {
+      newIndex = this.nowIndex + this.swipeData.length;
+    }
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e("swiper-list"),
+      "ref": "listDom"
+    }, [createVNode("div", {
+      "class": this.ns.e("swiper-main"),
+      "ref": "mainDom"
+    }, [this.resImgArr.map((item) => {
+      return renderPic(item);
+    })]), createVNode("div", {
+      "id": "prev-card",
+      "class": this.ns.e("leftBtn"),
+      "style": "width:".concat(this.imgWidth, "px"),
+      "onClick": () => this.btnClick("left")
+    }, null), createVNode("div", {
+      "id": "next-card",
+      "class": this.ns.e("rightBtn"),
+      "style": "width:".concat(this.imgWidth, "px"),
+      "onClick": () => this.btnClick("right")
+    }, null)]), createVNode("div", {
+      "class": this.ns.e("dot")
+    }, [this.swipeData.map((_item, index) => {
+      return createVNode("div", {
+        "class": [this.ns.e("dot-item"), index === newIndex - 3 ? "isActive" : ""],
+        "onClick": () => this.dotClick(index)
+      }, null);
+    })])]);
+  }
+});
+
+export { IBizCarouselCard };

package/es/common/index.mjs

@@ -19,6 +19,7 @@ import { IBizGridSetting } from './grid-setting/grid-setting.mjs';
 import { DoingNotice } from './doing-notice/doing-notice.mjs';
 import { IBizCarouselComponent } from './carousel/carousel.mjs';
 import { IBizCoopAlert } from './coop-alert/coop-alert.mjs';
+import { IBizCarouselCard } from './carousel-card/carousel-card.mjs';
 
 "use strict";
 const IBizCommonComponents = {
@@ -55,6 +56,7 @@ const IBizCommonComponents = {
     v.component(IBizBadge.name, IBizBadge);
     v.component(IBizCarouselComponent.name, IBizCarouselComponent);
     v.component(IBizCoopAlert.name, IBizCoopAlert);
+    v.component(IBizCarouselCard.name, IBizCarouselCard);
   }
 };
 

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

@@ -278,7 +278,7 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
         "onSelect": this.onClick,
         "theme": "light",
         "mode": this.menuMode,
-        "ellipsis": false
+        "ellipsis": this.menuMode === "horizontal"
       }, _isSlot(_slot = this.menus.map((item) => {
         var _a;
         if (((_a = item.children) == null ? void 0 : _a.length) > 0) {

package/es/control/context-menu/context-menu.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-context-menu{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:8px 0;--ibiz-context-menu-popover-button-padding:8px 20px;--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0)}.ibiz-context-menu__item{padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-context-menu__item+.ibiz-context-menu__item{margin:var(--ibiz-context-menu-item-margin)}.ibiz-context-menu__item .ibiz-context-menu__action-content-icon{margin-right:3px}.ibiz-context-menu__action-content{display:flex}.ibiz-context-menu__action-content-icon{display:flex;align-items:center;justify-content:center;width:20px}.ibiz-context-menu__action-content-caption{display:flex;align-items:center;justify-content:center}.ibiz-context-menu__popover{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:8px 0;--ibiz-context-menu-popover-button-padding:8px 20px;--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0);width:auto!important;min-width:150px;--el-popover-padding:var(--ibiz-context-menu-popover-padding)}.ibiz-context-menu__popover .el-button{--el-button-size:40px;display:block;width:100%;padding:var(--ibiz-context-menu-popover-button-padding);margin:0;font-size:14px;color:var(--ibiz-context-menu-popover-button-color);text-align:left;border-radius:0}.ibiz-context-menu__popover .el-button:hover{background-color:var(--ibiz-context-menu-popover-button-hover-bg)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-icon{margin-right:6px}.ibiz-context-menu__separator{margin:0}.ibiz-context-menu--dropdown .ibiz-context-menu__caption{cursor:pointer}.ibiz-context-menu--dropdown .ibiz-context-menu__caption-icon{vertical-align:bottom}
+@charset "UTF-8";.ibiz-context-menu{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:8px 0;--ibiz-context-menu-popover-button-padding:8px 20px;--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0)}.ibiz-context-menu__item{padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-context-menu__item+.ibiz-context-menu__item{margin:var(--ibiz-context-menu-item-margin)}.ibiz-context-menu__item .ibiz-context-menu__action-content-icon{margin-right:3px}.ibiz-context-menu__action-content{display:flex}.ibiz-context-menu__action-content-icon{display:flex;align-items:center;justify-content:center;width:20px}.ibiz-context-menu__action-content-caption{display:flex;align-items:center;justify-content:center}.ibiz-context-menu__popover{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:8px 0;--ibiz-context-menu-popover-button-padding:8px 20px;--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0);width:auto!important;min-width:150px;--el-popover-padding:var(--ibiz-context-menu-popover-padding)}.ibiz-context-menu__popover .el-button{--el-button-size:40px;display:block;width:100%;padding:var(--ibiz-context-menu-popover-button-padding);margin:0;font-size:14px;color:var(--ibiz-context-menu-popover-button-color);text-align:left;border-radius:0}.ibiz-context-menu__popover .el-button:hover{background-color:var(--ibiz-context-menu-popover-button-hover-bg)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-icon{margin-right:6px}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-group-caption{margin-right:var(--ibiz-spacing-base-loose)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-group-icon{position:absolute;right:var(--ibiz-spacing-base-loose);font-size:var(--ibiz-font-size-header-6)}.ibiz-context-menu__separator{margin:0}.ibiz-context-menu__separator.el-divider--horizontal{width:calc(100% - 2 * var(--ibiz-spacing-base-loose));margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base-loose)}.ibiz-context-menu--dropdown .ibiz-context-menu__caption{cursor:pointer}.ibiz-context-menu--dropdown .ibiz-context-menu__caption-icon{vertical-align:bottom}

package/es/control/context-menu/context-menu.d.ts

@@ -34,6 +34,7 @@ export declare const ContextMenuControl: import("vue").DefineComponent<{
 }, {
     c: ContextMenuController;
     ns: import("@ibiz-template/core").Namespace;
+    visible: import("vue").ComputedRef<boolean>;
     expandDetails: Ref<IDETBUIActionItem[]>;
     groupDetails: Ref<IDETBUIActionItem[]>;
     groupButtonRef: Ref<any>;

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

@@ -1,4 +1,4 @@
-import { isVNode, ref, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, ref, computed, watch, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './context-menu.css';
 import { ContextMenuController } from '@ibiz-template/runtime';
@@ -55,17 +55,28 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
     const groupButtonRef = ref();
     const dropdownRef = ref();
     const popoverVisible = ref(false);
-    if (actionDetails) {
-      actionDetails == null ? void 0 : actionDetails.forEach((detail) => {
+    const visible = computed(() => {
+      const index = groupDetails.value.findIndex((item) => c.state.buttonsState[item.id].visible);
+      return index !== -1;
+    });
+    const transformLanguage = (items) => {
+      if (!Array.isArray(items)) {
+        return;
+      }
+      items.forEach((detail) => {
         if (detail.capLanguageRes && detail.capLanguageRes.lanResTag) {
           detail.caption = ibiz.i18n.t(detail.capLanguageRes.lanResTag, detail.caption);
         }
         if (detail.tooltipLanguageRes && detail.tooltipLanguageRes.lanResTag) {
           detail.tooltip = ibiz.i18n.t(detail.tooltipLanguageRes.lanResTag, detail.tooltip);
         }
+        transformLanguage(detail.detoolbarItems);
       });
+    };
+    if (actionDetails) {
+      transformLanguage(actionDetails);
       actionDetails.forEach((detail) => {
-        if (props.groupLevelKeys.findIndex((item) => item === detail.actionLevel) !== -1) {
+        if (!detail.actionLevel || props.groupLevelKeys.findIndex((item) => item === detail.actionLevel) !== -1) {
           groupDetails.value.push(detail);
         } else {
           expandDetails.value.push(detail);
@@ -93,11 +104,13 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
         dropdownRef.value.handleClose();
       }
       e.stopPropagation();
+      popoverVisible.value = false;
       emit("action-click", detail, e);
     };
     return {
       c,
       ns,
+      visible,
       expandDetails,
       groupDetails,
       groupButtonRef,
@@ -119,8 +132,14 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
     };
     const renderActions = (items, isExpand = true) => {
       return items.map((detail) => {
-        var _a;
-        if ((_a = this.c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible) {
+        var _a, _b;
+        if (!((_a = this.c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible)) {
+          return null;
+        }
+        if (detail.itemType === "SEPERATOR") {
+          return renderDivider(isExpand);
+        }
+        if (detail.itemType === "DEUIACTION" || detail.itemType === "ITEMS" && !((_b = detail.detoolbarItems) == null ? void 0 : _b.length)) {
           return [detail.addSeparator && renderDivider(isExpand), createVNode(resolveComponent("el-button"), {
             "text": true,
             "size": "small",
@@ -140,9 +159,46 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
             }, [detail.caption]) : ""])]
           })];
         }
+        if (detail.itemType === "ITEMS") {
+          return createVNode(resolveComponent("el-popover"), {
+            "placement": "right-start",
+            "popper-class": this.ns.e("popover"),
+            "teleported": false
+          }, {
+            reference: () => {
+              return [detail.addSeparator && renderDivider(isExpand), createVNode(resolveComponent("el-button"), {
+                "text": true,
+                "size": "small",
+                "onClick": (e) => this.handleClick(detail, e),
+                "title": detail.tooltip,
+                "disabled": this.c.state.buttonsState[detail.id].disabled,
+                "class": this.calcActionItemClass(detail)
+              }, {
+                default: () => [createVNode("div", {
+                  "class": this.ns.e("action-content")
+                }, [detail.showIcon && detail.sysImage && createVNode("div", {
+                  "class": this.ns.e("action-content-icon")
+                }, [createVNode(resolveComponent("iBizIcon"), {
+                  "icon": detail.sysImage
+                }, null)]), detail.showCaption ? createVNode("div", {
+                  "class": [this.ns.e("action-content-caption"), this.ns.e("action-content-group-caption")]
+                }, [detail.caption]) : "", createVNode("ion-icon", {
+                  "class": this.ns.e("action-content-group-icon"),
+                  "name": "chevron-forward-outline"
+                }, null)])]
+              })];
+            },
+            default: () => {
+              return renderActions(detail.detoolbarItems || [], isExpand);
+            }
+          });
+        }
         return null;
       });
     };
+    if (!this.visible) {
+      return;
+    }
     if (this.mode === "buttons") {
       let _slot;
       return createVNode("div", {
@@ -165,7 +221,8 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
         "visible": this.popoverVisible,
         "onUpdate:visible": ($event) => this.popoverVisible = $event,
         "popper-class": this.ns.e("popover"),
-        "virtual-triggering": true
+        "virtual-triggering": true,
+        "transition": "none"
       }, _isSlot(_slot = renderActions(this.groupDetails, false)) ? _slot : {
         default: () => [_slot]
       })]]);

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

@@ -30,6 +30,7 @@ export declare const IBizContextMenuControl: import("@ibiz-template/vue3-util").
 }, {
     c: import("@ibiz-template/runtime").ContextMenuController;
     ns: import("@ibiz-template/core").Namespace;
+    visible: import("vue").ComputedRef<boolean>;
     expandDetails: import("vue").Ref<import("@ibiz/model-core").IDETBUIActionItem[]>;
     groupDetails: import("vue").Ref<import("@ibiz/model-core").IDETBUIActionItem[]>;
     groupButtonRef: import("vue").Ref<any>;

package/es/control/dashboard/custom-dashboard-container/custom-dashboard-container.d.ts

@@ -2113,6 +2113,42 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
                 readonly parentView: any | undefined;
                 readonly isActive: boolean;
                 layoutPanel?: {
+                    hooks: {
+                        validate: {
+                            call: (context: {
+                                result: boolean[];
+                                parentId?: string | undefined;
+                            }) => Promise<{
+                                result: boolean[];
+                                parentId?: string | undefined;
+                            }>;
+                            tapPromise: (fn: (context: {
+                                result: boolean[];
+                                parentId?: string | undefined;
+                            }) => Promise<void>) => void;
+                            removeTapPromise: (callBack: (context: {
+                                result: boolean[];
+                                parentId?: string | undefined;
+                            }) => Promise<void>) => void;
+                            readonly size: number;
+                            callSync: (context: {
+                                result: boolean[];
+                                parentId?: string | undefined;
+                            }) => {
+                                result: boolean[];
+                                parentId?: string | undefined;
+                            };
+                            tap: (fn: (context: {
+                                result: boolean[];
+                                parentId?: string | undefined;
+                            }) => void) => void;
+                            removeTap: (callBack: (context: {
+                                result: boolean[];
+                                parentId?: string | undefined;
+                            }) => void) => void;
+                            clear: () => void;
+                        };
+                    };
                     panelItems: {
                         [key: string]: import("@ibiz-template/runtime").IPanelItemController;
                     };
@@ -2155,6 +2191,7 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
                         force: (_callback?: (() => void) | undefined) => void;
                     } | undefined;
                     load: () => Promise<void>;
+                    validate: (parentId?: string | undefined) => Promise<boolean>;
                     setDataValue: (name: string, value: unknown) => Promise<void>;
                     view: any;
                     layoutPanel?: any | undefined;
@@ -12001,6 +12038,42 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
                 } | undefined;
             } | undefined;
             layoutPanel?: {
+                hooks: {
+                    validate: {
+                        call: (context: {
+                            result: boolean[];
+                            parentId?: string | undefined;
+                        }) => Promise<{
+                            result: boolean[];
+                            parentId?: string | undefined;
+                        }>;
+                        tapPromise: (fn: (context: {
+                            result: boolean[];
+                            parentId?: string | undefined;
+                        }) => Promise<void>) => void;
+                        removeTapPromise: (callBack: (context: {
+                            result: boolean[];
+                            parentId?: string | undefined;
+                        }) => Promise<void>) => void;
+                        readonly size: number;
+                        callSync: (context: {
+                            result: boolean[];
+                            parentId?: string | undefined;
+                        }) => {
+                            result: boolean[];
+                            parentId?: string | undefined;
+                        };
+                        tap: (fn: (context: {
+                            result: boolean[];
+                            parentId?: string | undefined;
+                        }) => void) => void;
+                        removeTap: (callBack: (context: {
+                            result: boolean[];
+                            parentId?: string | undefined;
+                        }) => void) => void;
+                        clear: () => void;
+                    };
+                };
                 panelItems: {
                     [key: string]: import("@ibiz-template/runtime").IPanelItemController;
                 };
@@ -12043,6 +12116,7 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
                     force: (_callback?: (() => void) | undefined) => void;
                 } | undefined;
                 load: () => Promise<void>;
+                validate: (parentId?: string | undefined) => Promise<boolean>;
                 setDataValue: (name: string, value: unknown) => Promise<void>;
                 view: {
                     evt: {
@@ -21027,9 +21101,10 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
             srfpaginationviewid?: string | undefined;
         };
         params: IParams;
-        type: "data" | "public" | "personal";
+        type: "data" | "public" | "personal" | "dynamic";
         ownerType: string;
         ownerId: string;
+        multiMode: boolean;
         loadCustomModelData: () => Promise<IData>;
         resetCustomModelData: () => Promise<IData>;
         saveCustomModelData: (model: IData[], opts?: IData | undefined) => Promise<IData>;

package/es/control/form/form/form.css

@@ -1 +1 @@
-.ibiz-control-form{width:100%;padding-bottom:var(--ibiz-spacing-tight)}
+.ibiz-control-form{width:100%;height:100%;padding-bottom:var(--ibiz-spacing-tight)}