@ibiz-template/vue3-util 0.6.14 → 0.6.15

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.15",
   "description": "vue3 工具包",
   "main": "lib/index.cjs",
   "types": "es/index.d.ts",
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "dev": "ibiz-temp build -w",
-    "build": "ibiz-temp build -c && vue-tsc --declaration --emitDeclarationOnly",
+    "build": "npm run test:run && ibiz-temp build -c && vue-tsc --declaration --emitDeclarationOnly",
     "lint": "vue-tsc --noEmit && eslint 'src/**/*.tsx' 'src/**/*.ts'",
     "lint:fix": "vue-tsc --noEmit && eslint --fix 'src/**/*.tsx' 'src/**/*.ts'",
     "clean": "rimraf es dist",
@@ -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.15",
+    "@ibiz-template/runtime": "^0.6.15",
     "@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",