@ibiz-template/vue3-util 0.6.14 → 0.6.16

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;

package/lib/panel-component/panel-field/panel-field.cjs

@@ -17,6 +17,10 @@ const PanelField = /* @__PURE__ */ vue.defineComponent({
     controller: {
       type: panelField_controller.PanelFieldController,
       required: true
+    },
+    attrs: {
+      type: Object,
+      require: false
     }
   },
   setup(props) {
@@ -52,7 +56,7 @@ const PanelField = /* @__PURE__ */ vue.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/lib/panel-component/teleport-placeholder/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+require('../../util/index.cjs');
+var teleportPlaceholder = require('./teleport-placeholder.cjs');
+var teleportPlaceholder_provider = require('./teleport-placeholder.provider.cjs');
+var install = require('../../util/install.cjs');
+
+"use strict";
+const IBizTeleportPlaceholder = install.withInstall(
+  teleportPlaceholder.TeleportPlaceholder,
+  function(v) {
+    v.component(teleportPlaceholder.TeleportPlaceholder.name, teleportPlaceholder.TeleportPlaceholder);
+    runtime.registerPanelItemProvider(
+      "RAWITEM_TELEPORT_PLACEHOLDER",
+      () => new teleportPlaceholder_provider.TeleportPlaceholderProvider()
+    );
+  }
+);
+
+exports.TeleportPlaceholderProvider = teleportPlaceholder_provider.TeleportPlaceholderProvider;
+exports.IBizTeleportPlaceholder = IBizTeleportPlaceholder;
+exports.default = IBizTeleportPlaceholder;

package/lib/panel-component/teleport-placeholder/teleport-placeholder.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+var vue = require('vue');
+require('../../use/index.cjs');
+require('./teleport-placeholder.css');
+var namespace = require('../../use/namespace/namespace.cjs');
+
+"use strict";
+const TeleportPlaceholder = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTeleportPlaceholder",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    var _a, _b;
+    const ns = namespace.useNamespace("teleport-placeholder");
+    const tempStyle = vue.ref("");
+    const {
+      rawItem
+    } = props.modelData;
+    if (rawItem && rawItem.cssStyle) {
+      tempStyle.value = rawItem.cssStyle;
+    }
+    const classArr = vue.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 vue.createVNode("div", {
+      "id": this.teleportTag,
+      "class": this.classArr,
+      "style": this.tempStyle
+    }, null);
+  }
+});
+
+exports.TeleportPlaceholder = TeleportPlaceholder;

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

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

package/lib/panel-component/teleport-placeholder/teleport-placeholder.provider.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+require('../panel-rawitem/index.cjs');
+var panelRawitem_controller = require('../panel-rawitem/panel-rawitem.controller.cjs');
+
+"use strict";
+class TeleportPlaceholderProvider {
+  constructor() {
+    this.component = "IBizTeleportPlaceholder";
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new panelRawitem_controller.PanelRawItemController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+exports.TeleportPlaceholderProvider = TeleportPlaceholderProvider;

package/lib/view/common/view.cjs

@@ -8,6 +8,9 @@ var namespace = require('../../use/namespace/namespace.cjs');
 var useViewController = require('../../use/view/use-view-controller/use-view-controller.cjs');
 
 "use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
 const View = /* @__PURE__ */ vue.defineComponent({
   name: "IBizView",
   props: {
@@ -30,10 +33,14 @@ const View = /* @__PURE__ */ vue.defineComponent({
       type: Object
     }
   },
-  setup() {
+  setup(_props, {
+    slots
+  }) {
     const ns = namespace.useNamespace("view");
     const c = useViewController.useViewController((...args) => new runtime.ViewController(...args));
-    const controls = runtime.getControlsByView(c.model);
+    const allControls = runtime.getControlsByView(c.model);
+    const teleportControls = allControls.filter((ctrl) => !!runtime.getCtrlTeleportTag(ctrl));
+    const controls = allControls.filter((ctrl) => !teleportControls.includes(ctrl));
     const {
       viewType,
       sysCss,
@@ -57,59 +64,59 @@ const View = /* @__PURE__ */ vue.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 vue.renderSlot(slots, slotKey, ctrlProps);
+      }
+      const provider = c.providers[slotKey];
+      const comp = vue.resolveComponent((provider == null ? void 0 : provider.component) || "IBizControlShell");
+      if (provider) {
+        ctrlProps.provider = provider;
+      }
+      return vue.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 = vue.resolveComponent(provider.component);
-              return vue.h(comp, {
-                modelData: ctrl,
-                ...ctrlProps,
-                provider
-              });
-            };
-          }
-        });
-      }
       if (this.c.engines.length === 0) {
         layoutPanel = vue.createVNode("span", {
           "style": "color:red;"
         }, [vue.createTextVNode("\u89C6\u56FE\u7C7B\u578B"), this.modelData.viewType, vue.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 = vue.h(vue.resolveComponent(provider.component), {
@@ -122,10 +129,22 @@ const View = /* @__PURE__ */ vue.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 vue.createVNode(vue.Teleport, {
+          "to": runtime.getCtrlTeleportTag(ctrl),
+          "disabled": !this.c.state.activated
+        }, _isSlot(_slot = this.renderControl(ctrl)) ? _slot : {
+          default: () => [_slot]
+        });
+      });
+    }
     return vue.withDirectives(vue.createVNode("div", {
       "class": this.viewClassNames,
       "id": this.c.id
-    }, [this.renderViewMessage("TOP"), layoutPanel, this.renderViewMessage("BOTTOM")]), [[vue.resolveDirective("loading"), this.c.state.isLoading]]);
+    }, [this.renderViewMessage("TOP"), layoutPanel, this.renderViewMessage("BOTTOM"), teleportContent]), [[vue.resolveDirective("loading"), this.c.state.isLoading]]);
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-util",
-  "version": "0.6.14",
+  "version": "0.6.16",
   "description": "vue3 工具包",
   "main": "lib/index.cjs",
   "types": "es/index.d.ts",
@@ -39,10 +39,10 @@
   "license": "MIT",
   "devDependencies": {
     "@ibiz-template/cli": "^0.3.10",
-    "@ibiz-template/core": "^0.6.13",
-    "@ibiz-template/runtime": "^0.6.14",
+    "@ibiz-template/core": "^0.6.16",
+    "@ibiz-template/runtime": "^0.6.16",
     "@ibiz-template/theme": "^0.6.0",
-    "@ibiz/model-core": "^0.1.18",
+    "@ibiz/model-core": "^0.1.19",
     "@types/path-browserify": "^1.0.2",
     "@types/qs": "^6.9.11",
     "@types/systemjs": "^6.13.5",
@@ -59,7 +59,7 @@
   "peerDependencies": {
     "@ibiz-template/core": "^0.6.0",
     "@ibiz-template/runtime": "^0.6.0",
-    "@ibiz/model-core": "^0.1.18",
+    "@ibiz/model-core": "^0.1.19",
     "dayjs": "^1.11.10",
     "path-browserify": "^1.0.1",
     "pinia": "^2.1.7",