@ibiz-template/vue3-util 0.6.14 → 0.6.16

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

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

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

@@ -8,6 +8,10 @@ export declare const IBizPanelField: import("../../util").TypeWithInstall<import
         type: typeof import("./panel-field.controller").PanelFieldController;
         required: true;
     };
+    attrs: {
+        type: import("vue").PropType<IData>;
+        require: boolean;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     classArr: import("vue").ComputedRef<(string | false)[]>;
@@ -21,6 +25,10 @@ export declare const IBizPanelField: import("../../util").TypeWithInstall<import
         type: typeof import("./panel-field.controller").PanelFieldController;
         required: true;
     };
+    attrs: {
+        type: import("vue").PropType<IData>;
+        require: boolean;
+    };
 }>>, {}, {}>>;
 export default IBizPanelField;
 //# sourceMappingURL=index.d.ts.map

package/es/panel-component/panel-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panel-component/panel-field/index.ts"],"names":[],"mappings":"AAMA,cAAc,0BAA0B,CAAC;AAEzC,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;aAGzB,CAAC;AAEH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panel-component/panel-field/index.ts"],"names":[],"mappings":"AAMA,cAAc,0BAA0B,CAAC;AAEzC,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAGzB,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/es/panel-component/panel-field/panel-field.d.ts

@@ -11,6 +11,10 @@ export declare const PanelField: import("vue").DefineComponent<{
         type: typeof PanelFieldController;
         required: true;
     };
+    attrs: {
+        type: PropType<IData>;
+        require: boolean;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     classArr: import("vue").ComputedRef<(string | false)[]>;
@@ -24,5 +28,9 @@ export declare const PanelField: import("vue").DefineComponent<{
         type: typeof PanelFieldController;
         required: true;
     };
+    attrs: {
+        type: PropType<IData>;
+        require: boolean;
+    };
 }>>, {}, {}>;
 //# sourceMappingURL=panel-field.d.ts.map

package/es/panel-component/panel-field/panel-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-field.d.ts","sourceRoot":"","sources":["../../../src/panel-component/panel-field/panel-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAA6B,QAAQ,EAAuB,MAAM,KAAK,CAAC;AAE/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,oBAAoB,CAAC;AAE5B,eAAO,MAAM,UAAU;;;;;;;;;;;;yBAuBS,OAAO,SAAS,MAAM,KAAG,IAAI;;;;;;;;;;YAoD3D,CAAC"}
+{"version":3,"file":"panel-field.d.ts","sourceRoot":"","sources":["../../../src/panel-component/panel-field/panel-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAA6B,QAAQ,EAAuB,MAAM,KAAK,CAAC;AAE/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,oBAAoB,CAAC;AAE5B,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;yBA2BS,OAAO,SAAS,MAAM,KAAG,IAAI;;;;;;;;;;;;;;YAoD3D,CAAC"}

package/es/panel-component/panel-field/panel-field.mjs

@@ -15,6 +15,10 @@ const PanelField = /* @__PURE__ */ defineComponent({
     controller: {
       type: PanelFieldController,
       required: true
+    },
+    attrs: {
+      type: Object,
+      require: false
     }
   },
   setup(props) {
@@ -50,7 +54,7 @@ const PanelField = /* @__PURE__ */ defineComponent({
         onFocus: (event) => this.controller.onFocus(event),
         onBlur: (event) => this.controller.onBlur(event),
         onEnter: (event) => this.controller.onEnter(event),
-        ...this.$attrs
+        ...this.attrs
       };
       if (this.$slots.default) {
         editor = this.$slots.default(editorProps);

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/control/panel/panel/panel.cjs

@@ -66,7 +66,7 @@ function renderPanelItem(panelItem, c, ins) {
     controller: panelItemC,
     key: panelItem.id,
     style: tempStyle,
-    ...renderAttrs(panelItem, panelItemC)
+    attrs: renderAttrs(panelItem, panelItemC)
   }, children);
 }
 const PanelControl = /* @__PURE__ */ vue.defineComponent({

package/lib/control/panel/view-layout-panel/view-layout-panel.cjs

@@ -111,7 +111,7 @@ const ViewLayoutPanelControl = /* @__PURE__ */ vue.defineComponent({
         controller: panelItemC,
         key: panelItem.id,
         style: tempStyle,
-        ...renderAttrs(panelItem, panelItemC)
+        attrs: renderAttrs(panelItem, panelItemC)
       }, children);
     };
     vue.provide("renderPanelItem", renderPanelItem);