@ibiz-template/vue3-components 0.5.7-alpha.1 → 0.5.7-alpha.10

package/lib/panel-component/user-message/internal-message/index.cjs

@@ -1,11 +1,34 @@
 'use strict';
 
+var runtime = require('@ibiz-template/runtime');
+var internalMessageDefault_provider = require('./common/internal-message-default/internal-message-default.provider.cjs');
+var internalMessageDefault = require('./common/internal-message-default/internal-message-default.cjs');
+var internalMessageJson_provider = require('./internal-message-json/internal-message-json.provider.cjs');
+var internalMessageJson = require('./internal-message-json/internal-message-json.cjs');
+var internalMessageContainer = require('./common/internal-message-container/internal-message-container.cjs');
+var internalMessageHtml = require('./internal-message-html/internal-message-html.cjs');
+var internalMessageHtml_provider = require('./internal-message-html/internal-message-html.provider.cjs');
 var internalMessageTab = require('./internal-message-tab/internal-message-tab.cjs');
-var internalMessageDefault_provider = require('./internal-message-default/internal-message-default.provider.cjs');
-var internalMessageDefault = require('./internal-message-default/internal-message-default.cjs');
 
 "use strict";
+function installInternalMessage(v) {
+  v.component(internalMessageContainer.InternalMessageContainer.name, internalMessageContainer.InternalMessageContainer);
+  v.component(internalMessageDefault.InternalMessageDefault.name, internalMessageDefault.InternalMessageDefault);
+  v.component(internalMessageJson.InternalMessageJSON.name, internalMessageJson.InternalMessageJSON);
+  v.component(internalMessageHtml.InternalMessageHTML.name, internalMessageHtml.InternalMessageHTML);
+  runtime.registerInternalMessageProvider(
+    "DEFAULT",
+    () => new internalMessageDefault_provider.InternalMessageDefaultProvider()
+  );
+  runtime.registerInternalMessageProvider(
+    "JSON",
+    () => new internalMessageJson_provider.InternalMessageJSONtProvider()
+  );
+  runtime.registerInternalMessageProvider(
+    "HTML",
+    () => new internalMessageHtml_provider.InternalMessageHTMLtProvider()
+  );
+}
 
 exports.InternalMessageTab = internalMessageTab.InternalMessageTab;
-exports.InternalMessageDefaultProvider = internalMessageDefault_provider.InternalMessageDefaultProvider;
-exports.InternalMessageDefault = internalMessageDefault.InternalMessageDefault;
+exports.installInternalMessage = installInternalMessage;

package/lib/panel-component/user-message/internal-message/internal-message-html/internal-message-html.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./internal-message-html.css');
+
+"use strict";
+const InternalMessageHTML = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizInternalMessageHTML",
+  props: {
+    message: {
+      type: Object,
+      required: true
+    },
+    provider: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    close: () => true
+  },
+  setup() {
+    const ns = vue3Util.useNamespace("internal-message-html");
+    return {
+      ns
+    };
+  },
+  render() {
+    return vue.createVNode(vue.resolveComponent("iBizInternalMessageContainer"), {
+      "class": [this.ns.b()],
+      "message": this.message,
+      "provider": this.provider,
+      "onClose": () => this.$emit("close")
+    }, {
+      default: () => [vue.createVNode("div", {
+        "class": this.ns.e("content"),
+        "innerHTML": this.message.short_content
+      }, null)]
+    });
+  }
+});
+
+exports.InternalMessageHTML = InternalMessageHTML;

package/lib/panel-component/user-message/internal-message/internal-message-html/internal-message-html.css

@@ -0,0 +1 @@
+.ibiz-internal-message-html{display:flex;flex-flow:column nowrap}.ibiz-internal-message-html__content{flex-grow:1}

package/lib/panel-component/user-message/internal-message/internal-message-html/internal-message-html.provider.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var internalMessageHtml = require('./internal-message-html.cjs');
+require('../common/index.cjs');
+var internalMessageDefault_provider = require('../common/internal-message-default/internal-message-default.provider.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class InternalMessageHTMLtProvider extends internalMessageDefault_provider.InternalMessageDefaultProvider {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "component", internalMessageHtml.InternalMessageHTML);
+  }
+  async onClick(message, event) {
+    const result = await super.onClick(message, event);
+    if (!result && message.content_type === "JSON" && message.short_content) {
+      const json = JSON.parse(message.short_content);
+      if (json.redirecturl) {
+        this.openRedirectView(message, json.redirecturl);
+        return true;
+      }
+    }
+    return true;
+  }
+}
+
+exports.InternalMessageHTMLtProvider = InternalMessageHTMLtProvider;

package/lib/panel-component/user-message/internal-message/internal-message-json/internal-message-json.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./internal-message-json.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const InternalMessageJSON = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizInternalMessageJSON",
+  props: {
+    message: {
+      type: Object,
+      required: true
+    },
+    provider: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    close: () => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("internal-message-json");
+    const jsonContent = vue.computed(() => {
+      if (props.message.short_content && props.message.content_type === "JSON") {
+        return JSON.parse(props.message.short_content);
+      }
+      return null;
+    });
+    const redirectUrl = vue.computed(() => {
+      var _a;
+      const url = ibiz.env.isMob ? props.message.mobile_url : props.message.url;
+      return url || ((_a = jsonContent.value) == null ? void 0 : _a.redirecturl);
+    });
+    const toolbarItems = vue.computed(() => {
+      if (!redirectUrl.value) {
+        return void 0;
+      }
+      return [{
+        icon: "link-outline",
+        key: "openRedirectView",
+        tooltip: "\u8DF3\u8F6C\u5230\u89C6\u56FE"
+      }];
+    });
+    const onToolbarClick = (key) => {
+      if (key === "openRedirectView") {
+        props.provider.openRedirectView(props.message, redirectUrl.value);
+        emit("close");
+      }
+    };
+    return {
+      ns,
+      jsonContent,
+      toolbarItems,
+      redirectUrl,
+      onToolbarClick
+    };
+  },
+  render() {
+    var _a;
+    let content = null;
+    if ((_a = this.jsonContent) == null ? void 0 : _a.html) {
+      content = vue.createVNode("div", {
+        "class": this.ns.e("content"),
+        "innerHTML": this.jsonContent.html
+      }, null);
+    } else {
+      content = vue.createVNode("div", {
+        "class": this.ns.e("content")
+      }, [vue.createTextVNode("\u6570\u636E\u7684short_content\u91CC\u7F3A\u5C11html")]);
+    }
+    return vue.createVNode(vue.resolveComponent("iBizInternalMessageContainer"), {
+      "class": [this.ns.b()],
+      "message": this.message,
+      "provider": this.provider,
+      "clickable": !!this.redirectUrl,
+      "toolbarItems": this.toolbarItems,
+      "onToolbarClick": this.onToolbarClick,
+      "onClose": () => this.$emit("close")
+    }, _isSlot(content) ? content : {
+      default: () => [content]
+    });
+  }
+});
+
+exports.InternalMessageJSON = InternalMessageJSON;

package/lib/panel-component/user-message/internal-message/internal-message-json/internal-message-json.css

@@ -0,0 +1 @@
+.ibiz-internal-message-json{display:flex;flex-flow:column nowrap}.ibiz-internal-message-json__content{flex-grow:1}

package/lib/panel-component/user-message/internal-message/internal-message-json/internal-message-json.provider.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var internalMessageJson = require('./internal-message-json.cjs');
+require('../common/index.cjs');
+var internalMessageDefault_provider = require('../common/internal-message-default/internal-message-default.provider.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class InternalMessageJSONtProvider extends internalMessageDefault_provider.InternalMessageDefaultProvider {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "component", internalMessageJson.InternalMessageJSON);
+  }
+  async onClick(message, event) {
+    const result = await super.onClick(message, event);
+    if (!result && message.content_type === "JSON" && message.short_content) {
+      const json = JSON.parse(message.short_content);
+      if (json.redirecturl) {
+        this.openRedirectView(message, json.redirecturl);
+        return true;
+      }
+    }
+    return true;
+  }
+}
+
+exports.InternalMessageJSONtProvider = InternalMessageJSONtProvider;

package/lib/panel-component/user-message/internal-message/internal-message-tab/internal-message-tab.cjs

@@ -4,11 +4,16 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 require('./internal-message-tab.css');
+var ramda = require('ramda');
 
 "use strict";
 const InternalMessageTab = /* @__PURE__ */ vue.defineComponent({
   name: "IBizInternalMessageTab",
   props: {
+    controller: {
+      type: Object,
+      required: true
+    },
     showPopover: {
       type: Boolean,
       required: true
@@ -24,39 +29,25 @@ const InternalMessageTab = /* @__PURE__ */ vue.defineComponent({
     const hiddenPopover = () => {
       emit("hiddenPopover");
     };
+    const c = props.controller;
     const allItems = vue.ref([]);
     const state = vue.reactive({
       total: 0,
-      curPage: 0,
-      pageSize: 20
+      pageSize: 0
     });
-    const load = async (params) => {
-      const res = await ibiz.internalMessage.fetch({
-        page: 0,
-        size: state.pageSize,
-        ...params
-      });
-      console.log(res);
-      if (res.ok) {
-        if (typeof res.total === "number") {
-          state.total = res.total;
-        }
-        if (typeof res.page === "number") {
-          state.curPage = res.page;
-        }
-        if (state.curPage === 0) {
-          allItems.value = res.data;
-        } else {
-          allItems.value.push(...res.data);
-        }
-      }
+    const updateData = () => {
+      allItems.value = ramda.clone(c.messages);
+      state.total = c.total;
+      state.pageSize = c.size;
     };
+    updateData();
+    c.evt.on("dataChange", updateData);
+    vue.onUnmounted(() => {
+      c.evt.off("dataChange", updateData);
+    });
     const showMore = () => {
-      load({
-        page: state.curPage + 1
-      });
+      c.loadMore();
     };
-    load();
     return {
       ns,
       allItems,
@@ -77,20 +68,15 @@ const InternalMessageTab = /* @__PURE__ */ vue.defineComponent({
         ibiz.log.error(error);
       }
       if (provider) {
-        return vue.h(vue.resolveComponent(provider.component), {
-          class: this.ns.e("item"),
-          onClick: (event) => {
-            const isClose = provider.onClick(msg, event);
-            if (isClose) {
-              this.hiddenPopover();
-            }
-          },
-          message: msg
+        return provider.render({
+          class: [this.ns.e("item")],
+          message: msg,
+          onClose: this.hiddenPopover
         });
       }
       return vue.createVNode("div", {
         "class": this.ns.e("item")
-      }, ["\u7AD9\u5185\u6D88\u606F\u7C7B\u578B".concat(msg.message_type, "\u6682\u672A\u652F\u6301")]);
+      }, ["\u7AD9\u5185\u6D88\u606F\u7C7B\u578B".concat(msg.content_type, "\u6682\u672A\u652F\u6301")]);
     }), this.allItems.length === 0 && vue.createVNode("div", {
       "class": this.ns.e("nodata")
     }, [vue.createTextVNode("\u6682\u65E0\u901A\u77E5")]), restLength > 0 && vue.createVNode("div", {

package/lib/panel-component/user-message/internal-message/internal-message-tab/internal-message-tab.css

@@ -1 +1 @@
-.ibiz-internal-message-tab{--ibiz-internal-message-tab-load-more-height:30px;width:100%;height:100%}.ibiz-internal-message-tab__item{min-height:60px;padding:6px 0}.ibiz-internal-message-tab__nodata{display:flex;align-items:center;justify-content:center;height:calc(100% - var(--ibiz-internal-message-tab-load-more-height))}.ibiz-internal-message-tab__load-more{height:var(--ibiz-internal-message-tab-load-more-height);line-height:var(--ibiz-internal-message-tab-load-more-height);text-align:center}.ibiz-internal-message-tab__load-more:hover{color:var(--ibiz-color-primary-hover);cursor:pointer}
+.ibiz-internal-message-tab{--ibiz-internal-message-tab-load-more-height:30px;width:100%;height:100%}.ibiz-internal-message-tab__item{min-height:60px;padding:var(--ibiz-spacing-tight)}.ibiz-internal-message-tab__item:hover{background-color:var(--ibiz-color-fill-1)}.ibiz-internal-message-tab__nodata{display:flex;align-items:center;justify-content:center;height:calc(100% - var(--ibiz-internal-message-tab-load-more-height))}.ibiz-internal-message-tab__load-more{height:var(--ibiz-internal-message-tab-load-more-height);line-height:var(--ibiz-internal-message-tab-load-more-height);text-align:center}.ibiz-internal-message-tab__load-more:hover{color:var(--ibiz-color-primary-hover);cursor:pointer}

package/lib/panel-component/user-message/user-message.cjs

@@ -24,6 +24,7 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = vue3Util.useNamespace("user-message");
     const c = props.controller;
+    const noticeController = ibiz.hub.notice;
     const showPopover = vue.ref(false);
     const currentTab = vue.ref("notification");
     const sysImage = props.modelData.sysImage || {
@@ -33,10 +34,18 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
     const hiddenPopover = () => {
       popoverRef.value.hide();
     };
-    const noticeNum = vue.ref(0);
+    const noticeNum = vue.ref(noticeController.total);
+    const onNumChange = (total) => {
+      noticeNum.value = total;
+    };
+    noticeController.evt.on("totalChange", onNumChange);
+    vue.onUnmounted(() => {
+      noticeController.evt.off("totalChange", onNumChange);
+    });
     return {
       ns,
       c,
+      noticeController,
       noticeNum,
       popoverRef,
       showPopover,
@@ -47,6 +56,7 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
   },
   render() {
     return vue.createVNode("div", {
+      "title": "\u901A\u77E5",
       "class": [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass]
     }, [vue.createVNode(vue.resolveComponent("el-popover"), {
       "ref": "popoverRef",
@@ -63,6 +73,7 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
           "hidden": this.noticeNum === 0
         }, {
           default: () => [vue.createVNode(vue.resolveComponent("i-biz-icon"), {
+            "id": runtime.PresetIdentifier.MESSAGE,
             "class": [this.ns.e("image")],
             "icon": this.sysImage
           }, null)]
@@ -79,6 +90,7 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
             "name": "notification"
           }, {
             default: () => [vue.createVNode(internalMessageTab.InternalMessageTab, {
+              "controller": this.noticeController.internalMessage,
               "showPopover": this.showPopover,
               "onHiddenPopover": this.hiddenPopover
             }, null)]
@@ -87,6 +99,7 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
             "name": "async-action"
           }, {
             default: () => [vue.createVNode(asyncActionTab.AsyncActionTab, {
+              "controller": this.noticeController.asyncAction,
               "showPopover": this.showPopover,
               "onHiddenPopover": this.hiddenPopover
             }, null)]

package/lib/panel-component/user-message/user-message.css

@@ -1 +1 @@
-.ibiz-user-message{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.ibiz-user-message__image{width:28px;height:28px;cursor:pointer}.ibiz-user-message__badge .el-badge__content{top:4px;right:calc(2px + var(--el-badge-size)/ 2);border-width:0}.ibiz-user-message-popover{width:500px!important;height:500px!important}.ibiz-user-message-popover.el-popover{padding-top:2px}.ibiz-user-message-popover-content{height:100%}.ibiz-user-message-popover-content>.el-tabs__content{height:calc(100% - 55px)}.ibiz-user-message-popover-content>.el-tabs__content>.el-tab-pane{height:100%;overflow:auto}
+.ibiz-user-message{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.ibiz-user-message__image{width:28px;height:28px;cursor:pointer}.ibiz-user-message__badge .el-badge__content{top:4px;right:calc(7px + var(--el-badge-size)/ 2);border-width:0}.ibiz-user-message-popover{width:500px!important;height:500px!important}.ibiz-user-message-popover.el-popover{padding-top:2px}.ibiz-user-message-popover-content{height:100%}.ibiz-user-message-popover-content>.el-tabs__content{height:calc(100% - 55px)}.ibiz-user-message-popover-content>.el-tabs__content>.el-tab-pane{height:100%;overflow:auto}

package/lib/panel-component/view-message/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+var viewMessage = require('./view-message.cjs');
+var viewMessage_provider = require('./view-message.provider.cjs');
+
+"use strict";
+const IBizViewMessage = vue3Util.withInstall(viewMessage.ViewMessage, function(v) {
+  v.component(viewMessage.ViewMessage.name, viewMessage.ViewMessage);
+  runtime.registerPanelItemProvider(
+    "RAWITEM_VIEW_MESSAGE",
+    () => new viewMessage_provider.ViewMessageProvider()
+  );
+});
+
+exports.IBizViewMessage = IBizViewMessage;
+exports.default = IBizViewMessage;

package/lib/panel-component/view-message/view-message.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+const ViewMessage = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizViewMessage",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: runtime.PanelItemController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("view-message");
+    const c = props.controller;
+    const ctx = vue3Util.useCtx();
+    const {
+      view
+    } = ctx;
+    return {
+      ns,
+      c,
+      view
+    };
+  },
+  render() {
+    const c = this.view;
+    if (c.state.isCreated) {
+      const viewMessages = c.state.viewMessages.BODY;
+      if (viewMessages == null ? void 0 : viewMessages.length) {
+        return vue.createVNode(vue.resolveComponent("view-message"), {
+          "class": [this.ns.e("body-message")],
+          "messages": viewMessages
+        }, null);
+      }
+    }
+    return null;
+  }
+});
+
+exports.ViewMessage = ViewMessage;

package/{es/panel-component/user-message/internal-message/internal-message-default/internal-message-default.provider.mjs → lib/panel-component/view-message/view-message.provider.cjs}

@@ -1,3 +1,7 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
 "use strict";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -5,13 +9,15 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-class InternalMessageDefaultProvider {
+class ViewMessageProvider {
   constructor() {
-    __publicField(this, "component", "IBizInternalMessageDefault");
+    __publicField(this, "component", "IBizViewMessage");
   }
-  onClick(_msg, _event) {
-    return false;
+  async createController(panelItem, panel, parent) {
+    const c = new runtime.PanelItemController(panelItem, panel, parent);
+    await c.init();
+    return c;
   }
 }
 
-export { InternalMessageDefaultProvider };
+exports.ViewMessageProvider = ViewMessageProvider;

package/lib/util/app-drawer/app-drawer-component.cjs

@@ -5,6 +5,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 var lodashEs = require('lodash-es');
 require('./app-drawer-component.css');
+var core = require('@ibiz-template/core');
 
 "use strict";
 const AppDrawerComponent = /* @__PURE__ */ vue.defineComponent({
@@ -30,14 +31,14 @@ const AppDrawerComponent = /* @__PURE__ */ vue.defineComponent({
     } = props.opts;
     if (placement === "top" || placement === "bottom") {
       if (lodashEs.isNumber(height)) {
-        size.value = height;
+        size.value = core.calcOpenModeStyle(height, "drawer");
       } else {
         size.value = "100%";
       }
     }
     if (placement === "left" || placement === "right") {
       if (lodashEs.isNumber(width)) {
-        size.value = width;
+        size.value = core.calcOpenModeStyle(width, "drawer");
       } else {
         size.value = 800;
       }
@@ -94,21 +95,19 @@ const AppDrawerComponent = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
-    return vue.createVNode(vue.resolveComponent("el-drawer"), {
-      "model-value": this.isShow,
-      "lock-scroll": true,
-      "size": this.size,
-      "class": this.ns.b(),
-      "z-index": this.drawerZIndex,
-      "direction": this.direction,
-      "before-close": this.onBeforeClose,
-      "onClosed": this.onClosed
-    }, {
-      default: () => {
-        var _a, _b;
-        return [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, this.modal)];
-      }
-    });
+    var _a, _b;
+    const option = this.opts || {};
+    return vue.h(vue.resolveComponent("el-drawer"), {
+      modelValue: this.isShow,
+      lockScroll: true,
+      size: this.size,
+      class: this.ns.b(),
+      zIndex: this.drawerZIndex,
+      direction: this.direction,
+      beforeClose: this.onBeforeClose,
+      onClosed: this.onClosed,
+      ...option
+    }, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, this.modal));
   }
 });
 function createDrawer(render, opts) {

package/lib/util/app-modal/app-modal-component.cjs

@@ -5,6 +5,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var lodashEs = require('lodash-es');
 var runtime = require('@ibiz-template/runtime');
 require('./app-modal-component.css');
+var core = require('@ibiz-template/core');
 
 "use strict";
 const AppModalComponent = /* @__PURE__ */ vue.defineComponent({
@@ -28,10 +29,18 @@ const AppModalComponent = /* @__PURE__ */ vue.defineComponent({
       height
     } = props.opts;
     if (width) {
-      customStyle.width = lodashEs.isNumber(width) ? "".concat(width, "px") : width;
+      if (lodashEs.isNumber(width)) {
+        customStyle.width = core.calcOpenModeStyle(width, "modal");
+      } else {
+        customStyle.width = width;
+      }
     }
     if (height) {
-      customStyle.height = lodashEs.isNumber(height) ? "".concat(height, "px") : height;
+      if (lodashEs.isNumber(height)) {
+        customStyle.height = core.calcOpenModeStyle(height, "modal");
+      } else {
+        customStyle.height = height;
+      }
     }
     const options = vue.ref({
       footerHide: true,
@@ -78,20 +87,17 @@ const AppModalComponent = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
-    return vue.createVNode(vue.resolveComponent("el-dialog"), {
-      "model-value": this.isShow,
-      "align-center": true,
-      "class": [this.ns.b(), this.options.placement && this.ns.m(this.options.placement), this.options.modalClass],
-      "style": this.customStyle,
-      "z-index": this.modalZIndex,
-      "onClosed": this.onClosed,
-      "before-close": this.onBeforeClose
-    }, {
-      default: () => {
-        var _a, _b;
-        return [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, this.modal)];
-      }
-    });
+    var _a, _b;
+    return vue.h(vue.resolveComponent("el-dialog"), {
+      modelValue: this.isShow,
+      alignCenter: true,
+      class: [this.ns.b(), this.options.placement && this.ns.m(this.options.placement), this.options.modalClass],
+      style: this.customStyle,
+      zIndex: this.modalZIndex,
+      onClosed: this.onClosed,
+      onBeforeClose: this.onBeforeClose,
+      ...this.options
+    }, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, this.modal));
   }
 });
 function createModal(render, opts) {