@ibiz-template/vue3-util 0.6.14 → 0.6.15

package/es/panel-component/panel-container-tabs/panel-container-tabs.provider.d.ts

@@ -0,0 +1,16 @@
+import { IPanelItemProvider, PanelController, PanelItemController } from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+/**
+ * 面板图片容器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class PanelContainerTabsProvider
+ * @implements {EditorProvider}
+ */
+export declare class PanelContainerTabsProvider implements IPanelItemProvider {
+    component: string;
+    createController(panelItem: IPanelContainer, panel: PanelController, parent: PanelItemController | undefined): Promise<PanelItemController>;
+}
+//# sourceMappingURL=panel-container-tabs.provider.d.ts.map

package/es/panel-component/panel-container-tabs/panel-container-tabs.provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-container-tabs.provider.d.ts","sourceRoot":"","sources":["../../../src/panel-component/panel-container-tabs/panel-container-tabs.provider.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD;;;;;;;;GAQG;AACH,qBAAa,0BAA2B,YAAW,kBAAkB;IACnE,SAAS,EAAE,MAAM,CAA4B;IAEvC,gBAAgB,CACpB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,mBAAmB,GAAG,SAAS,GACtC,OAAO,CAAC,mBAAmB,CAAC;CAKhC"}

package/es/panel-component/panel-container-tabs/panel-container-tabs.provider.mjs

@@ -0,0 +1,15 @@
+import { PanelContainerController } from '../panel-container/panel-container.controller.mjs';
+
+"use strict";
+class PanelContainerTabsProvider {
+  constructor() {
+    this.component = "IBizPanelContainerTabs";
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new PanelContainerController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { PanelContainerTabsProvider };

package/es/panel-component/teleport-placeholder/index.d.ts

@@ -0,0 +1,28 @@
+import { TeleportPlaceholderProvider } from './teleport-placeholder.provider';
+export { TeleportPlaceholderProvider };
+export declare const IBizTeleportPlaceholder: import("../../util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: import("vue").PropType<import("..").PanelRawItemController>;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    classArr: import("vue").ComputedRef<(string | false)[]>;
+    tempStyle: import("vue").Ref<string>;
+    teleportTag: 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").IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: import("vue").PropType<import("..").PanelRawItemController>;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizTeleportPlaceholder;
+//# sourceMappingURL=index.d.ts.map

package/es/panel-component/teleport-placeholder/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panel-component/teleport-placeholder/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAE9E,OAAO,EAAE,2BAA2B,EAAE,CAAC;AAEvC,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;aASnC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/es/panel-component/teleport-placeholder/index.mjs

@@ -0,0 +1,19 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import '../../util/index.mjs';
+import { TeleportPlaceholder } from './teleport-placeholder.mjs';
+import { TeleportPlaceholderProvider } from './teleport-placeholder.provider.mjs';
+import { withInstall } from '../../util/install.mjs';
+
+"use strict";
+const IBizTeleportPlaceholder = withInstall(
+  TeleportPlaceholder,
+  function(v) {
+    v.component(TeleportPlaceholder.name, TeleportPlaceholder);
+    registerPanelItemProvider(
+      "RAWITEM_TELEPORT_PLACEHOLDER",
+      () => new TeleportPlaceholderProvider()
+    );
+  }
+);
+
+export { IBizTeleportPlaceholder, TeleportPlaceholderProvider, IBizTeleportPlaceholder as default };

package/es/panel-component/teleport-placeholder/teleport-placeholder.css

@@ -0,0 +1 @@
+.ibiz-teleport-placeholder{width:auto;height:auto}

package/es/panel-component/teleport-placeholder/teleport-placeholder.d.ts

@@ -0,0 +1,29 @@
+import { IPanelRawItem } from '@ibiz/model-core';
+import { PropType } from 'vue';
+import { PanelRawItemController } from '../panel-rawitem';
+import './teleport-placeholder.scss';
+export declare const TeleportPlaceholder: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: PropType<PanelRawItemController>;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    classArr: import("vue").ComputedRef<(string | false)[]>;
+    tempStyle: import("vue").Ref<string>;
+    teleportTag: string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: PropType<PanelRawItemController>;
+        required: true;
+    };
+}>>, {}, {}>;
+//# sourceMappingURL=teleport-placeholder.d.ts.map

package/es/panel-component/teleport-placeholder/teleport-placeholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teleport-placeholder.d.ts","sourceRoot":"","sources":["../../../src/panel-component/teleport-placeholder/teleport-placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAA6B,QAAQ,EAAO,MAAM,KAAK,CAAC;AAE/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,6BAA6B,CAAC;AAErC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;YA2D9B,CAAC"}

package/es/panel-component/teleport-placeholder/teleport-placeholder.mjs

@@ -0,0 +1,63 @@
+import { defineComponent, ref, computed, createVNode } from 'vue';
+import '../../use/index.mjs';
+import './teleport-placeholder.css';
+import { useNamespace } from '../../use/namespace/namespace.mjs';
+
+"use strict";
+const TeleportPlaceholder = /* @__PURE__ */ defineComponent({
+  name: "IBizTeleportPlaceholder",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    var _a, _b;
+    const ns = useNamespace("teleport-placeholder");
+    const tempStyle = ref("");
+    const {
+      rawItem
+    } = props.modelData;
+    if (rawItem && rawItem.cssStyle) {
+      tempStyle.value = rawItem.cssStyle;
+    }
+    const classArr = computed(() => {
+      const {
+        id
+      } = props.modelData;
+      const result = [ns.b(), ns.m(id)];
+      result.push(...props.controller.containerClass);
+      return result;
+    });
+    const viewCodeName = props.controller.panel.view.model.codeName;
+    let teleportTag = "".concat(viewCodeName == null ? void 0 : viewCodeName.toLowerCase(), "-").concat(props.modelData.id);
+    const paramTag = (_b = (_a = props.modelData.rawItem) == null ? void 0 : _a.rawItemParams) == null ? void 0 : _b.find((item) => item.key === "TeleportTag");
+    if (paramTag && paramTag.value) {
+      teleportTag = paramTag.value;
+    }
+    ibiz.log.debug("\u89C6\u56FE".concat(viewCodeName, "\u7684\u9762\u677F\u6210\u5458").concat(props.modelData.id, "\u7684\u5360\u4F4D\u6807\u8BC6\u662F\uFF1A"), teleportTag);
+    return {
+      ns,
+      classArr,
+      tempStyle,
+      teleportTag
+    };
+  },
+  render() {
+    if (!this.controller.state.visible) {
+      return;
+    }
+    return createVNode("div", {
+      "id": this.teleportTag,
+      "class": this.classArr,
+      "style": this.tempStyle
+    }, null);
+  }
+});
+
+export { TeleportPlaceholder };

package/es/panel-component/teleport-placeholder/teleport-placeholder.provider.d.ts

@@ -0,0 +1,17 @@
+import { IPanelItemProvider, PanelController, PanelItemController } from '@ibiz-template/runtime';
+import { IPanelCtrlPos } from '@ibiz/model-core';
+import { PanelRawItemController } from '../panel-rawitem';
+/**
+ * 面板控件teleport占位适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class TeleportPlaceholderProvider
+ * @implements {EditorProvider}
+ */
+export declare class TeleportPlaceholderProvider implements IPanelItemProvider {
+    component: string;
+    createController(panelItem: IPanelCtrlPos, panel: PanelController, parent: PanelItemController | undefined): Promise<PanelRawItemController>;
+}
+//# sourceMappingURL=teleport-placeholder.provider.d.ts.map

package/es/panel-component/teleport-placeholder/teleport-placeholder.provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teleport-placeholder.provider.d.ts","sourceRoot":"","sources":["../../../src/panel-component/teleport-placeholder/teleport-placeholder.provider.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D;;;;;;;;GAQG;AACH,qBAAa,2BAA4B,YAAW,kBAAkB;IACpE,SAAS,EAAE,MAAM,CAA6B;IAExC,gBAAgB,CACpB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,mBAAmB,GAAG,SAAS,GACtC,OAAO,CAAC,sBAAsB,CAAC;CAKnC"}

package/es/panel-component/teleport-placeholder/teleport-placeholder.provider.mjs

@@ -0,0 +1,16 @@
+import '../panel-rawitem/index.mjs';
+import { PanelRawItemController } from '../panel-rawitem/panel-rawitem.controller.mjs';
+
+"use strict";
+class TeleportPlaceholderProvider {
+  constructor() {
+    this.component = "IBizTeleportPlaceholder";
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new PanelRawItemController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { TeleportPlaceholderProvider };

package/es/view/common/index.d.ts

@@ -20,9 +20,14 @@ export declare const IBizView: import("../../util").TypeWithInstall<import("vue"
 }, {
     c: import("@ibiz-template/runtime").ViewController<import("@ibiz/model-core").IAppView, import("@ibiz-template/runtime").IViewState, import("@ibiz-template/runtime").IViewEvent>;
     controls: import("@ibiz/model-core").IControl[];
+    teleportControls: import("@ibiz/model-core").IControl[];
     viewClassNames: import("vue").ComputedRef<(string | undefined)[]>;
     onLayoutPanelCreated: (controller: import("@ibiz-template/runtime").IViewLayoutPanelController) => void;
     renderViewMessage: (position: "TOP" | "BOTTOM" | "BODY") => JSX.Element | null;
+    getCtrlProps: (ctrl: import("@ibiz/model-core").IControl) => IParams;
+    renderControl: (ctrl: import("@ibiz/model-core").IControl) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     context: import("vue").PropType<IContext>;
     params: {

package/es/view/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/view/common/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAGnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/view/common/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAGnB,CAAC"}

package/es/view/common/view.d.ts

@@ -1,6 +1,6 @@
 import { IModal, IViewLayoutPanelController, IViewProvider, ViewController } from '@ibiz-template/runtime';
-import { IAppView } from '@ibiz/model-core';
-import { PropType } from 'vue';
+import { IAppView, IControl } from '@ibiz/model-core';
+import { PropType, VNode } from 'vue';
 import './view.scss';
 export declare const View: import("vue").DefineComponent<{
     context: PropType<IContext>;
@@ -23,10 +23,13 @@ export declare const View: import("vue").DefineComponent<{
     };
 }, {
     c: ViewController<IAppView, import("@ibiz-template/runtime").IViewState, import("@ibiz-template/runtime").IViewEvent>;
-    controls: import("@ibiz/model-core").IControl[];
+    controls: IControl[];
+    teleportControls: IControl[];
     viewClassNames: import("vue").ComputedRef<(string | undefined)[]>;
     onLayoutPanelCreated: (controller: IViewLayoutPanelController) => void;
     renderViewMessage: (position: 'TOP' | 'BOTTOM' | 'BODY') => JSX.Element | null;
+    getCtrlProps: (ctrl: IControl) => IParams;
+    renderControl: (ctrl: IControl) => VNode;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     context: PropType<IContext>;
     params: {

package/es/view/common/view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/view/common/view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EACN,0BAA0B,EAC1B,aAAa,EACb,cAAc,EACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAGL,QAAQ,EAIT,MAAM,KAAK,CAAC;AACb,OAAO,aAAa,CAAC;AAGrB,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;uCA4BC,0BAA0B,KACrC,IAAI;kCAI8B,KAAK,GAAG,QAAQ,GAAG,MAAM;;;;;;;;;;;;;;;;;;;;;;MAsGhE,CAAC"}
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/view/common/view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,MAAM,EACN,0BAA0B,EAC1B,aAAa,EACb,cAAc,EACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAGL,QAAQ,EAER,KAAK,EAIN,MAAM,KAAK,CAAC;AACb,OAAO,aAAa,CAAC;AAGrB,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;uCAmCC,0BAA0B,KACrC,IAAI;kCAI8B,KAAK,GAAG,QAAQ,GAAG,MAAM;yBAsBlC,QAAQ,KAAG,OAAO;0BAiBjB,QAAQ,KAAG,KAAK;;;;;;;;;;;;;;;;;;;;;;MAiG/C,CAAC"}

package/es/view/common/view.mjs

@@ -1,11 +1,14 @@
-import { defineComponent, computed, createVNode, resolveComponent, h, createTextVNode, withDirectives, resolveDirective } from 'vue';
-import { ViewController, getControlsByView } from '@ibiz-template/runtime';
+import { isVNode, defineComponent, computed, createVNode, resolveComponent, renderSlot, h, createTextVNode, Teleport, withDirectives, resolveDirective } from 'vue';
+import { ViewController, getControlsByView, getCtrlTeleportTag } from '@ibiz-template/runtime';
 import './view.css';
 import '../../use/index.mjs';
 import { useNamespace } from '../../use/namespace/namespace.mjs';
 import { useViewController } from '../../use/view/use-view-controller/use-view-controller.mjs';
 
 "use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 const View = /* @__PURE__ */ defineComponent({
   name: "IBizView",
   props: {
@@ -28,10 +31,14 @@ const View = /* @__PURE__ */ defineComponent({
       type: Object
     }
   },
-  setup() {
+  setup(_props, {
+    slots
+  }) {
     const ns = useNamespace("view");
     const c = useViewController((...args) => new ViewController(...args));
-    const controls = getControlsByView(c.model);
+    const allControls = getControlsByView(c.model);
+    const teleportControls = allControls.filter((ctrl) => !!getCtrlTeleportTag(ctrl));
+    const controls = allControls.filter((ctrl) => !teleportControls.includes(ctrl));
     const {
       viewType,
       sysCss,
@@ -55,59 +62,59 @@ const View = /* @__PURE__ */ defineComponent({
       }
       return null;
     };
+    const getCtrlProps = (ctrl) => {
+      const slotKey = ctrl.name || ctrl.id;
+      return {
+        context: c.context,
+        params: c.params,
+        ...c.slotProps[slotKey] || {},
+        modelData: ctrl
+      };
+    };
+    const renderControl = (ctrl) => {
+      const slotKey = ctrl.name || ctrl.id;
+      const ctrlProps = getCtrlProps(ctrl);
+      if (slots[slotKey]) {
+        return renderSlot(slots, slotKey, ctrlProps);
+      }
+      const provider = c.providers[slotKey];
+      const comp = resolveComponent((provider == null ? void 0 : provider.component) || "IBizControlShell");
+      if (provider) {
+        ctrlProps.provider = provider;
+      }
+      return h(comp, ctrlProps);
+    };
     return {
       c,
       controls,
+      teleportControls,
       viewClassNames,
       onLayoutPanelCreated,
-      renderViewMessage
+      renderViewMessage,
+      getCtrlProps,
+      renderControl
     };
   },
   render() {
-    var _a;
+    var _a, _b;
     let layoutPanel = null;
     if (this.c.state.isCreated) {
-      const slots = {
-        ...this.$slots
-      };
-      if ((_a = this.controls) == null ? void 0 : _a.length) {
-        this.controls.forEach((ctrl) => {
-          const slotKey = ctrl.name || ctrl.id;
-          const ctrlProps = {
-            context: this.c.context,
-            params: this.c.params
-          };
-          if (this.c.slotProps[slotKey]) {
-            Object.assign(ctrlProps, this.c.slotProps[slotKey]);
-          }
-          const outCtrlSlot = slots[slotKey];
-          if (outCtrlSlot) {
-            slots[slotKey] = () => {
-              return outCtrlSlot({
-                modelData: ctrl,
-                ...ctrlProps
-              });
-            };
-            return;
-          }
-          const provider = this.c.providers[slotKey];
-          if (provider) {
-            slots[slotKey] = () => {
-              const comp = resolveComponent(provider.component);
-              return h(comp, {
-                modelData: ctrl,
-                ...ctrlProps,
-                provider
-              });
-            };
-          }
-        });
-      }
       if (this.c.engines.length === 0) {
         layoutPanel = createVNode("span", {
           "style": "color:red;"
         }, [createTextVNode("\u89C6\u56FE\u7C7B\u578B"), this.modelData.viewType, createTextVNode("\u6682\u672A\u652F\u6301")]);
       } else {
+        const slots = {
+          ...this.$slots
+        };
+        if ((_a = this.controls) == null ? void 0 : _a.length) {
+          this.controls.forEach((ctrl) => {
+            const slotKey = ctrl.name || ctrl.id;
+            slots[slotKey] = () => {
+              return this.renderControl(ctrl);
+            };
+          });
+        }
         const viewLayoutPanel = this.c.model.viewLayoutPanel;
         const provider = this.c.providers[viewLayoutPanel.name];
         layoutPanel = h(resolveComponent(provider.component), {
@@ -120,10 +127,22 @@ const View = /* @__PURE__ */ defineComponent({
         }, slots);
       }
     }
+    let teleportContent = null;
+    if (this.c.state.isCreated && ((_b = this.teleportControls) == null ? void 0 : _b.length)) {
+      teleportContent = this.teleportControls.map((ctrl) => {
+        let _slot;
+        return createVNode(Teleport, {
+          "to": getCtrlTeleportTag(ctrl),
+          "disabled": !this.c.state.activated
+        }, _isSlot(_slot = this.renderControl(ctrl)) ? _slot : {
+          default: () => [_slot]
+        });
+      });
+    }
     return withDirectives(createVNode("div", {
       "class": this.viewClassNames,
       "id": this.c.id
-    }, [this.renderViewMessage("TOP"), layoutPanel, this.renderViewMessage("BOTTOM")]), [[resolveDirective("loading"), this.c.state.isLoading]]);
+    }, [this.renderViewMessage("TOP"), layoutPanel, this.renderViewMessage("BOTTOM"), teleportContent]), [[resolveDirective("loading"), this.c.state.isLoading]]);
   }
 });
 

package/lib/index.cjs

@@ -53,13 +53,16 @@ var panelContainerGroup_controller = require('./panel-component/panel-container-
 var index$a = require('./panel-component/panel-container-group/index.cjs');
 var index$b = require('./panel-component/panel-tab-page/index.cjs');
 var index$c = require('./panel-component/panel-item-render/index.cjs');
+var teleportPlaceholder_provider = require('./panel-component/teleport-placeholder/teleport-placeholder.provider.cjs');
+var index$d = require('./panel-component/teleport-placeholder/index.cjs');
+var index$e = require('./panel-component/panel-container-tabs/index.cjs');
 var appRedirectView = require('./view/app-redirect-view/app-redirect-view.cjs');
-var index$d = require('./view/common/index.cjs');
+var index$f = require('./view/common/index.cjs');
 var todoRedirect = require('./view/todo-redirect/todo-redirect.cjs');
-var index$e = require('./view/portal-view/index.cjs');
-var index$f = require('./view/de-redirect-view/index.cjs');
-var index$g = require('./control/panel/view-layout-panel/index.cjs');
-var index$h = require('./control/panel/panel/index.cjs');
+var index$g = require('./view/portal-view/index.cjs');
+var index$h = require('./view/de-redirect-view/index.cjs');
+var index$i = require('./control/panel/view-layout-panel/index.cjs');
+var index$j = require('./control/panel/panel/index.cjs');
 var pluginFactory = require('./plugin/plugin-factory/plugin-factory.cjs');
 var clickOutside = require('./use/click-outside/click-outside.cjs');
 var useControlController = require('./use/control/use-control-controller/use-control-controller.cjs');
@@ -67,7 +70,7 @@ var event = require('./use/event/event.cjs');
 var focusBlur = require('./use/focus-blur/focus-blur.cjs');
 var namespace = require('./use/namespace/namespace.cjs');
 var route = require('./use/route/route.cjs');
-var index$i = require('./use/util/index.cjs');
+var index$k = require('./use/util/index.cjs');
 var useViewController = require('./use/view/use-view-controller/use-view-controller.cjs');
 var vue = require('./use/vue/vue.cjs');
 var overlayContainer = require('./util/overlay-container/overlay-container.cjs');
@@ -81,7 +84,7 @@ var render = require('./util/render/render.cjs');
 var overlayViewUtil = require('./util/overlay-view-util/overlay-view-util.cjs');
 var appStore = require('./util/store/app-store/app-store.cjs');
 var uiStore = require('./util/store/ui-store/ui-store.cjs');
-var index$j = require('./util/store/index.cjs');
+var index$l = require('./util/store/index.cjs');
 var common = require('./props/common.cjs');
 var textBox = require('./props/editor/text-box.cjs');
 var span = require('./props/editor/span.cjs');
@@ -154,13 +157,16 @@ exports.PanelContainerGroupController = panelContainerGroup_controller.PanelCont
 exports.IBizPanelContainerGroup = index$a.IBizPanelContainerGroup;
 exports.IBizPanelTabPage = index$b.IBizPanelTabPage;
 exports.IBizPanelItemRender = index$c.IBizPanelItemRender;
+exports.TeleportPlaceholderProvider = teleportPlaceholder_provider.TeleportPlaceholderProvider;
+exports.IBizTeleportPlaceholder = index$d.IBizTeleportPlaceholder;
+exports.IBizPanelContainerTabs = index$e.IBizPanelContainerTabs;
 exports.AppRedirectView = appRedirectView.AppRedirectView;
-exports.IBizView = index$d.IBizView;
+exports.IBizView = index$f.IBizView;
 exports.TodoRedirect = todoRedirect.TodoRedirect;
-exports.IBizPortalView = index$e.IBizPortalView;
-exports.IBizDeRedirectView = index$f.IBizDeRedirectView;
-exports.IBizViewLayoutPanelControl = index$g.IBizViewLayoutPanelControl;
-exports.IBizPanelControl = index$h.IBizPanelControl;
+exports.IBizPortalView = index$g.IBizPortalView;
+exports.IBizDeRedirectView = index$h.IBizDeRedirectView;
+exports.IBizViewLayoutPanelControl = index$i.IBizViewLayoutPanelControl;
+exports.IBizPanelControl = index$j.IBizPanelControl;
 exports.PluginFactory = pluginFactory.PluginFactory;
 exports.useClickOutside = clickOutside.useClickOutside;
 exports.useControlController = useControlController.useControlController;
@@ -169,8 +175,8 @@ exports.useFocusAndBlur = focusBlur.useFocusAndBlur;
 exports.useNamespace = namespace.useNamespace;
 exports.useRouteKey = route.useRouteKey;
 exports.useRouterQuery = route.useRouterQuery;
-exports.useCtx = index$i.useCtx;
-exports.useMobCtx = index$i.useMobCtx;
+exports.useCtx = index$k.useCtx;
+exports.useMobCtx = index$k.useMobCtx;
 exports.useViewController = useViewController.useViewController;
 exports.EmptyVNode = vue.EmptyVNode;
 exports.getOrigin = vue.getOrigin;
@@ -205,7 +211,7 @@ exports.openViewModal = overlayViewUtil.openViewModal;
 exports.openViewPopover = overlayViewUtil.openViewPopover;
 exports.useAppStore = appStore.useAppStore;
 exports.useUIStore = uiStore.useUIStore;
-exports.piniaInstance = index$j.piniaInstance;
+exports.piniaInstance = index$l.piniaInstance;
 exports.RequiredProp = common.RequiredProp;
 exports.getGridInputIpProps = textBox.getGridInputIpProps;
 exports.getGridInputNumberProps = textBox.getGridInputNumberProps;

package/lib/panel-component/index.cjs

@@ -13,6 +13,8 @@ var index$9 = require('./panel-container-image/index.cjs');
 var index$a = require('./panel-container-group/index.cjs');
 var index$b = require('./panel-tab-page/index.cjs');
 var index$c = require('./panel-item-render/index.cjs');
+var index$d = require('./teleport-placeholder/index.cjs');
+var index$e = require('./panel-container-tabs/index.cjs');
 var panelContainer_state = require('./panel-container/panel-container.state.cjs');
 var panelContainer_controller = require('./panel-container/panel-container.controller.cjs');
 var panelCtrlPos_controller = require('./panel-ctrl-pos/panel-ctrl-pos.controller.cjs');
@@ -34,6 +36,7 @@ var panelContainerImage_state = require('./panel-container-image/panel-container
 var panelContainerImage_controller = require('./panel-container-image/panel-container-image.controller.cjs');
 var panelContainerGroup_state = require('./panel-container-group/panel-container-group.state.cjs');
 var panelContainerGroup_controller = require('./panel-container-group/panel-container-group.controller.cjs');
+var teleportPlaceholder_provider = require('./teleport-placeholder/teleport-placeholder.provider.cjs');
 
 "use strict";
 
@@ -50,6 +53,8 @@ exports.IBizPanelContainerImage = index$9.IBizPanelContainerImage;
 exports.IBizPanelContainerGroup = index$a.IBizPanelContainerGroup;
 exports.IBizPanelTabPage = index$b.IBizPanelTabPage;
 exports.IBizPanelItemRender = index$c.IBizPanelItemRender;
+exports.IBizTeleportPlaceholder = index$d.IBizTeleportPlaceholder;
+exports.IBizPanelContainerTabs = index$e.IBizPanelContainerTabs;
 exports.PanelContainerState = panelContainer_state.PanelContainerState;
 exports.PanelContainerController = panelContainer_controller.PanelContainerController;
 exports.PanelCtrlPosController = panelCtrlPos_controller.PanelCtrlPosController;
@@ -71,3 +76,4 @@ exports.PanelContainerImageState = panelContainerImage_state.PanelContainerImage
 exports.PanelContainerImageController = panelContainerImage_controller.PanelContainerImageController;
 exports.PanelContainerGroupState = panelContainerGroup_state.PanelContainerGroupState;
 exports.PanelContainerGroupController = panelContainerGroup_controller.PanelContainerGroupController;
+exports.TeleportPlaceholderProvider = teleportPlaceholder_provider.TeleportPlaceholderProvider;

package/lib/panel-component/panel-container-tabs/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+require('../../util/index.cjs');
+var panelContainerTabs = require('./panel-container-tabs.cjs');
+var panelContainerTabs_provider = require('./panel-container-tabs.provider.cjs');
+var install = require('../../util/install.cjs');
+
+"use strict";
+const IBizPanelContainerTabs = install.withInstall(
+  panelContainerTabs.PanelContainerTabs,
+  function(v) {
+    v.component(panelContainerTabs.PanelContainerTabs.name, panelContainerTabs.PanelContainerTabs);
+    runtime.registerPanelItemProvider(
+      "CONTAINER_TABS",
+      () => new panelContainerTabs_provider.PanelContainerTabsProvider()
+    );
+  }
+);
+
+exports.IBizPanelContainerTabs = IBizPanelContainerTabs;
+exports.default = IBizPanelContainerTabs;

package/lib/panel-component/panel-container-tabs/panel-container-tabs.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var vue = require('vue');
+require('../../use/index.cjs');
+require('./panel-container-tabs.css');
+var panelContainer_controller = require('../panel-container/panel-container.controller.cjs');
+var namespace = require('../../use/namespace/namespace.cjs');
+
+"use strict";
+const PanelContainerTabs = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizPanelContainerTabs",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: panelContainer_controller.PanelContainerController,
+      required: true
+    }
+  },
+  setup() {
+    const ns = namespace.useNamespace("panel-container-tabs");
+    return {
+      ns
+    };
+  },
+  render() {
+    return vue.h(vue.resolveComponent("IBizPanelContainer"), {
+      ...this.$props,
+      ...this.$attrs,
+      class: this.ns.b()
+    }, this.$slots);
+  }
+});
+
+exports.PanelContainerTabs = PanelContainerTabs;

package/lib/panel-component/panel-container-tabs/panel-container-tabs.css

@@ -0,0 +1 @@
+.ibiz-panel-container-tabs{position:relative}.ibiz-panel-container-tabs .el-tabs{--el-tabs-header-height:52px}.ibiz-panel-container-tabs .el-tabs__nav-wrap::after{display:none}.ibiz-panel-container-tabs::after{position:absolute;bottom:0;left:0;z-index:var(--el-index-normal);width:100%;height:2px;content:"";background-color:var(--el-border-color-light)}

package/lib/panel-component/panel-container-tabs/panel-container-tabs.provider.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var panelContainer_controller = require('../panel-container/panel-container.controller.cjs');
+
+"use strict";
+class PanelContainerTabsProvider {
+  constructor() {
+    this.component = "IBizPanelContainerTabs";
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new panelContainer_controller.PanelContainerController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+exports.PanelContainerTabsProvider = PanelContainerTabsProvider;