bkui-vue 0.0.1-beta.466 → 0.0.1-beta.468

package/lib/message/messageConstructor.d.ts

@@ -208,8 +208,8 @@ declare const _default: import("vue").DefineComponent<{
     id: string;
     onClose: (...args: any[]) => any;
     delay: number;
+    offsetY: number;
     spacing: number;
     dismissable: boolean;
-    offsetY: number;
 }, {}>;
 export default _default;

package/lib/modal/index.d.ts

@@ -14,13 +14,13 @@ declare const BkModal: {
             height?: string | number;
             maxHeight?: string;
             extCls?: string | unknown[];
-            direction?: string;
             isShow?: boolean;
             zIndex?: string | number;
             draggable?: boolean;
             showMask?: boolean;
             multiInstance?: boolean;
-            renderDirective?: "if" | "show";
+            direction?: string;
+            renderDirective?: "show" | "if";
             quickClose?: boolean;
             scrollable?: boolean;
             closeIcon?: boolean;
@@ -29,7 +29,6 @@ declare const BkModal: {
             animateType?: string;
             class?: unknown;
             style?: unknown;
-            readonly dialogType?: "process" | "show" | "operation" | "confirm";
             key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
             ref_for?: boolean;
@@ -73,6 +72,7 @@ declare const BkModal: {
                 [key: string]: any;
             }>) => void)[];
             readonly size?: "small" | "medium" | "large" | "normal";
+            readonly dialogType?: "process" | "show" | "operation" | "confirm";
             onClose?: (...args: any[]) => any;
             onShown?: (...args: any[]) => any;
             onHidden?: (...args: any[]) => any;
@@ -169,8 +169,8 @@ declare const BkModal: {
             } & {
                 default: string;
             };
-            renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
-                default: "if" | "show";
+            renderDirective: import("vue-types").VueTypeValidableDef<"show" | "if"> & {
+                default: "show" | "if";
             };
             beforeClose: import("vue-types").VueTypeDef<unknown>;
             dialogType: import("vue-types").VueTypeDef<"process" | "show" | "operation" | "confirm">;
@@ -204,13 +204,13 @@ declare const BkModal: {
             height: string | number;
             maxHeight: string;
             extCls: string | unknown[];
-            direction: string;
             isShow: boolean;
             zIndex: string | number;
             draggable: boolean;
             showMask: boolean;
             multiInstance: boolean;
-            renderDirective: "if" | "show";
+            direction: string;
+            renderDirective: "show" | "if";
             quickClose: boolean;
             scrollable: boolean;
             closeIcon: boolean;
@@ -312,8 +312,8 @@ declare const BkModal: {
         } & {
             default: string;
         };
-        renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
-            default: "if" | "show";
+        renderDirective: import("vue-types").VueTypeValidableDef<"show" | "if"> & {
+            default: "show" | "if";
         };
         beforeClose: import("vue-types").VueTypeDef<unknown>;
         dialogType: import("vue-types").VueTypeDef<"process" | "show" | "operation" | "confirm">;
@@ -419,8 +419,8 @@ declare const BkModal: {
     } & {
         default: string;
     };
-    renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
-        default: "if" | "show";
+    renderDirective: import("vue-types").VueTypeValidableDef<"show" | "if"> & {
+        default: "show" | "if";
     };
     beforeClose: import("vue-types").VueTypeDef<unknown>;
     dialogType: import("vue-types").VueTypeDef<"process" | "show" | "operation" | "confirm">;
@@ -454,13 +454,13 @@ declare const BkModal: {
     height: string | number;
     maxHeight: string;
     extCls: string | unknown[];
-    direction: string;
     isShow: boolean;
     zIndex: string | number;
     draggable: boolean;
     showMask: boolean;
     multiInstance: boolean;
-    renderDirective: "if" | "show";
+    direction: string;
+    renderDirective: "show" | "if";
     quickClose: boolean;
     scrollable: boolean;
     closeIcon: boolean;
@@ -543,8 +543,8 @@ declare const BkModal: {
         } & {
             default: string;
         };
-        renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
-            default: "if" | "show";
+        renderDirective: import("vue-types").VueTypeValidableDef<"show" | "if"> & {
+            default: "show" | "if";
         };
         beforeClose: import("vue-types").VueTypeDef<unknown>;
         dialogType: import("vue-types").VueTypeDef<"process" | "show" | "operation" | "confirm">;

package/lib/modal/index.js

@@ -1 +1,397 @@
-!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("../shared"),require("vue"),require("vue-types"));else if("function"==typeof define&&define.amd)define(["../shared","vue","vue-types"],o);else{var t="object"==typeof exports?o(require("../shared"),require("vue"),require("vue-types")):o(e["../shared"],e.vue,e["vue-types"]);for(var i in t)("object"==typeof exports?exports:e)[i]=t[i]}}(self,((e,o,t)=>(()=>{"use strict";var i={4212:o=>{o.exports=e},748:e=>{e.exports=o},210:e=>{e.exports=t}},s={};function r(e){var o=s[e];if(void 0!==o)return o.exports;var t=s[e]={exports:{}};return i[e](t,t.exports,r),t.exports}r.d=(e,o)=>{for(var t in o)r.o(o,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},r.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{r.r(n),r.d(n,{BkModal:()=>a,default:()=>d,propsMixin:()=>s});var e,o=r(4212),t=r(748),i=r(210);!function(e){e.NORMAL="normal",e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(e||(e={}));var s={isShow:o.PropTypes.bool.def(!1),width:o.PropTypes.oneOfType([String,Number]).def("50%"),height:o.PropTypes.oneOfType([String,Number]).def("50%"),extCls:o.PropTypes.string||o.PropTypes.array,scrollable:o.PropTypes.bool.def(!0),showMask:o.PropTypes.bool.def(!0),closeIcon:o.PropTypes.bool.def(!0),escClose:o.PropTypes.bool.def(!0),fullscreen:o.PropTypes.bool.def(!1),size:(0,i.toType)("size",{}),draggable:o.PropTypes.bool.def(!0),quickClose:o.PropTypes.bool.def(!0),transfer:o.PropTypes.oneOfType([Boolean,String,HTMLElement]).def(!1),zIndex:o.PropTypes.oneOfType([String,Number]).def("inherit"),maxHeight:o.PropTypes.string,direction:o.PropTypes.string,title:o.PropTypes.string.def(""),animateType:o.PropTypes.string.def("slide"),renderDirective:(0,o.renderDirectiveType)(),beforeClose:o.PropTypes.custom((function(){return!0})),dialogType:(0,o.dialogTypeUnion)(),multiInstance:o.PropTypes.bool.def(!0),infoType:o.PropTypes.theme()};const l=(0,t.defineComponent)({name:"Modal",props:Object.assign({},s),emits:["quick-close","quickClose","hidden","shown","close"],data:function(){return{visible:!1,closeTimer:null,bkPopIndexManager:null}},computed:{dialogWidth:function(){return/^\d+\.?\d*$/.test("".concat(this.width))?"".concat(this.width,"px"):this.width},dialogHeight:function(){return/^\d+\.?\d*$/.test("".concat(this.height))?"".concat(this.height,"px"):this.height},compStyle:function(){return{width:this.dialogWidth,height:this.dialogHeight,minHeigth:"".concat(200,"px"),display:this.visible?"inherit":"none",zIndex:this.zIndex||"inherit"}},fullscreenStyle:function(){return{width:"".concat(100,"%"),height:"".concat(100,"%")}}},watch:{isShow:{handler:function(e){var o=this;e?(this.closeTimer&&clearTimeout(this.closeTimer),this.closeTimer=null,this.visible=e):this.closeTimer=setTimeout((function(){o.$emit("hidden"),o.visible=e}),250)},immediate:!0},visible:{handler:function(e){var o,t,i=this;e?this.$nextTick((function(){i.bkPopIndexManager.onMaskClick((function(e){i.handleClickOutSide()}),i.$el);var e=i.showMask?{}:{"background-color":"rgba(0,0,0,0)"};i.bkPopIndexManager.show(i.$el,i.showMask,e,!!i.transfer,i.zIndex),i.$emit("shown")})):(null===(o=this.bkPopIndexManager)||void 0===o||o.hide(this.$el,!!this.transfer),null===(t=this.bkPopIndexManager)||void 0===t||t.destroy())},immediate:!0}},created:function(){},mounted:function(){var e,t=Object.assign(Object.assign({},this.$props),{transfer:"parent"===this.transfer?null===(e=this.$el)||void 0===e?void 0:e.parentElement:this.transfer});this.bkPopIndexManager=new o.BKPopIndexManager(t)},beforeUnmount:function(){var e,o;this.visible&&(null===(e=this.bkPopIndexManager)||void 0===e||e.hide(this.$el),null===(o=this.bkPopIndexManager)||void 0===o||o.destroy())},methods:{handleClickOutSide:function(){this.quickClose&&(this.$emit("close"),this.$emit("quick-close",this.$el),this.$emit("quickClose",this.$el))}},render:function(){var e,i,s,r,n,l,a,d,c,p,h,u,f=this,m=this.maxHeight?{maxHeight:this.maxHeight}:{},v="".concat((0,o.resolveClassName)("modal-body")," ").concat("slide"===this.animateType?this.direction:"");return(0,t.createVNode)("div",{class:[(0,o.resolveClassName)("modal-wrapper"),this.extCls,this.size,this.fullscreen?"fullscreen":""],style:[this.compStyle,this.fullscreen?this.fullscreenStyle:""]},[(0,t.createVNode)(t.Transition,{name:this.animateType},{default:function(){return[f.isShow?(0,t.createVNode)("div",{class:v},[(0,t.createVNode)("div",{class:(0,o.resolveClassName)("modal-header")},[null!==(s=null===(i=(e=f.$slots).header)||void 0===i?void 0:i.call(e))&&void 0!==s?s:""]),(0,t.createVNode)("div",{class:(0,o.resolveClassName)("modal-content"),style:["show"===f.dialogType?"padding-bottom: 20px":"",Object.assign({},m)]},[null!==(l=null===(n=(r=f.$slots).default)||void 0===n?void 0:n.call(r))&&void 0!==l?l:""]),"show"===f.dialogType?"":(0,t.createVNode)("div",{class:(0,o.resolveClassName)("modal-footer")},[null!==(c=null===(d=(a=f.$slots).footer)||void 0===d?void 0:d.call(a))&&void 0!==c?c:""]),(0,t.createVNode)("div",{class:[(0,o.resolveClassName)("modal-close"),f.closeIcon?"":"close-icon"]},[null!==(u=null===(h=(p=f.$slots).close)||void 0===h?void 0:h.call(p))&&void 0!==u?u:""])]):""]}})])}});var a=(0,o.withInstallProps)(l,{propsMixin:s},!0);const d=a})(),n})()));
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("../shared"), require("vue"), require("vue-types"));
+	else if(typeof define === 'function' && define.amd)
+		define(["../shared", "vue", "vue-types"], factory);
+	else {
+		var a = typeof exports === 'object' ? factory(require("../shared"), require("vue"), require("vue-types")) : factory(root["../shared"], root["vue"], root["vue-types"]);
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(self, (__WEBPACK_EXTERNAL_MODULE__4212__, __WEBPACK_EXTERNAL_MODULE__748__, __WEBPACK_EXTERNAL_MODULE__210__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 4212:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__4212__;
+
+/***/ }),
+
+/***/ 748:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__748__;
+
+/***/ }),
+
+/***/ 210:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__210__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  BkModal: () => (/* binding */ BkModal),
+  "default": () => (/* binding */ src),
+  propsMixin: () => (/* reexport */ propsMixin)
+});
+
+// EXTERNAL MODULE: external "../shared"
+var external_shared_ = __webpack_require__(4212);
+// EXTERNAL MODULE: external "vue"
+var external_vue_ = __webpack_require__(748);
+// EXTERNAL MODULE: external "vue-types"
+var external_vue_types_ = __webpack_require__(210);
+;// CONCATENATED MODULE: ../../packages/modal/src/props.mixin.ts
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+*/
+
+var ModalSizeEnum;
+(function (ModalSizeEnum) {
+  ModalSizeEnum["NORMAL"] = "normal";
+  ModalSizeEnum["SMALL"] = "small";
+  ModalSizeEnum["MEDIUM"] = "medium";
+  ModalSizeEnum["LARGE"] = "large";
+})(ModalSizeEnum || (ModalSizeEnum = {}));
+var propsMixin = {
+  // 是否显示弹框
+  isShow: external_shared_.PropTypes.bool.def(false),
+  width: external_shared_.PropTypes.oneOfType([String, Number]).def('50%'),
+  height: external_shared_.PropTypes.oneOfType([String, Number]).def('50%'),
+  // 配置自定义样式类名
+  extCls: external_shared_.PropTypes.string || external_shared_.PropTypes.array,
+  // 弹框出现时，是否允许页面滚动
+  scrollable: external_shared_.PropTypes.bool.def(true),
+  // 是否允许出现遮罩
+  showMask: external_shared_.PropTypes.bool.def(true),
+  // 是否显示右上角的关闭 icon
+  closeIcon: external_shared_.PropTypes.bool.def(true),
+  // 是否允许 esc 按键关闭弹框
+  escClose: external_shared_.PropTypes.bool.def(true),
+  // 是否全屏
+  fullscreen: external_shared_.PropTypes.bool.def(false),
+  // 弹框尺寸
+  size: (0,external_vue_types_.toType)('size', {}),
+  // 是否可拖拽
+  draggable: external_shared_.PropTypes.bool.def(true),
+  // 是否允许点击遮罩关闭弹窗
+  quickClose: external_shared_.PropTypes.bool.def(true),
+  // 是否显示在body内（即与id#app同级
+  transfer: external_shared_.PropTypes.oneOfType([Boolean, String, HTMLElement]).def(false),
+  // 弹出层z-index，实际显示的值会自动+1。为了抱证在遮罩上正常显示
+  zIndex: external_shared_.PropTypes.oneOfType([String, Number]).def('inherit'),
+  // 内容区最大高度
+  maxHeight: external_shared_.PropTypes.string,
+  // 弹出方向
+  direction: external_shared_.PropTypes.string,
+  // title
+  title: external_shared_.PropTypes.string.def(''),
+  // 动画类型
+  animateType: external_shared_.PropTypes.string.def('slide'),
+  // 弹框的渲染方式
+  renderDirective: (0,external_shared_.renderDirectiveType)(),
+  // 关闭前回调
+  beforeClose: external_shared_.PropTypes.custom(function () {
+    return true;
+  }),
+  // 对话框类型
+  dialogType: (0,external_shared_.dialogTypeUnion)(),
+  // 是否允许多个弹框同时存在
+  multiInstance: external_shared_.PropTypes.bool.def(true),
+  // info-box
+  infoType: external_shared_.PropTypes.theme()
+};
+;// CONCATENATED MODULE: ../../packages/modal/src/modal.tsx
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+*/
+
+
+
+/* harmony default export */ const modal = ((0,external_vue_.defineComponent)({
+  name: 'Modal',
+  props: Object.assign({}, propsMixin),
+  emits: ['quick-close', 'quickClose', 'hidden', 'shown', 'close'],
+  data: function data() {
+    return {
+      visible: false,
+      closeTimer: null,
+      bkPopIndexManager: null
+    };
+  },
+  computed: {
+    dialogWidth: function dialogWidth() {
+      return /^\d+\.?\d*$/.test("".concat(this.width)) ? "".concat(this.width, "px") : this.width;
+    },
+    dialogHeight: function dialogHeight() {
+      return /^\d+\.?\d*$/.test("".concat(this.height)) ? "".concat(this.height, "px") : this.height;
+    },
+    compStyle: function compStyle() {
+      return {
+        width: this.dialogWidth,
+        height: this.dialogHeight,
+        minHeigth: "".concat(200, "px"),
+        display: this.visible ? 'inherit' : 'none',
+        zIndex: this.zIndex || 'inherit'
+      };
+    },
+    fullscreenStyle: function fullscreenStyle() {
+      return {
+        width: "".concat(100, "%"),
+        height: "".concat(100, "%")
+      };
+    }
+  },
+  watch: {
+    isShow: {
+      handler: function handler(val) {
+        var _this = this;
+        if (val) {
+          // 避免is-show: false执行覆盖
+          this.closeTimer && clearTimeout(this.closeTimer);
+          this.closeTimer = null;
+          this.visible = val;
+        } else {
+          this.closeTimer = setTimeout(function () {
+            _this.$emit('hidden'); // 为false直接触发hidden事件，在上层有200ms的延时
+            _this.visible = val;
+          }, 250);
+        }
+      },
+      immediate: true
+    },
+    // isShow 初始化为 true 的时候，防止直接展示
+    visible: {
+      handler: function handler(val) {
+        var _this2 = this;
+        var _a, _b;
+        if (val) {
+          this.$nextTick(function () {
+            // isShow初始化为true的时候，放在nextTick才能获取$el
+            _this2.bkPopIndexManager.onMaskClick(function (_e) {
+              _this2.handleClickOutSide();
+            }, _this2.$el);
+            var hideMaskStyle = {
+              'background-color': 'rgba(0,0,0,0)'
+            };
+            var appendStyle = _this2.showMask ? {} : hideMaskStyle;
+            _this2.bkPopIndexManager.show(_this2.$el, _this2.showMask, appendStyle, !!_this2.transfer, _this2.zIndex);
+            _this2.$emit('shown');
+          });
+        } else {
+          (_a = this.bkPopIndexManager) === null || _a === void 0 ? void 0 : _a.hide(this.$el, !!this.transfer);
+          (_b = this.bkPopIndexManager) === null || _b === void 0 ? void 0 : _b.destroy();
+        }
+      },
+      immediate: true
+    }
+  },
+  created: function created() {
+    // this.bkPopIndexManager = new BKPopIndexManager({ ...this.$props });
+  },
+  mounted: function mounted() {
+    var _a;
+    var popConfig = Object.assign(Object.assign({}, this.$props), {
+      transfer: this.transfer === 'parent' ? (_a = this.$el) === null || _a === void 0 ? void 0 : _a.parentElement : this.transfer
+    });
+    this.bkPopIndexManager = new external_shared_.BKPopIndexManager(popConfig);
+  },
+  beforeUnmount: function beforeUnmount() {
+    var _a, _b;
+    if (this.visible) {
+      (_a = this.bkPopIndexManager) === null || _a === void 0 ? void 0 : _a.hide(this.$el);
+      (_b = this.bkPopIndexManager) === null || _b === void 0 ? void 0 : _b.destroy();
+    }
+  },
+  methods: {
+    handleClickOutSide: function handleClickOutSide() {
+      if (this.quickClose) {
+        this.$emit('close');
+        this.$emit('quick-close', this.$el);
+        this.$emit('quickClose', this.$el);
+      }
+    }
+  },
+  render: function render() {
+    var _this3 = this;
+    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o;
+    var maxHeight = this.maxHeight ? {
+      maxHeight: this.maxHeight
+    } : {};
+    var bodyClass = "".concat((0,external_shared_.resolveClassName)('modal-body'), " ").concat(this.animateType === 'slide' ? this.direction : '');
+    return (0,external_vue_.createVNode)("div", {
+      "class": [(0,external_shared_.resolveClassName)('modal-wrapper'), this.extCls, this.size, this.fullscreen ? 'fullscreen' : ''],
+      "style": [this.compStyle, this.fullscreen ? this.fullscreenStyle : '']
+    }, [(0,external_vue_.createVNode)(external_vue_.Transition, {
+      "name": this.animateType
+    }, {
+      "default": function _default() {
+        return [_this3.isShow ? (0,external_vue_.createVNode)("div", {
+          "class": bodyClass
+        }, [(0,external_vue_.createVNode)("div", {
+          "class": (0,external_shared_.resolveClassName)('modal-header')
+        }, [(_c = (_b = (_a = _this3.$slots).header) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : '']), (0,external_vue_.createVNode)("div", {
+          "class": (0,external_shared_.resolveClassName)('modal-content'),
+          "style": [_this3.dialogType === 'show' ? 'padding-bottom: 20px' : '', Object.assign({}, maxHeight)]
+        }, [(_g = (_f = (_d = _this3.$slots)["default"]) === null || _f === void 0 ? void 0 : _f.call(_d)) !== null && _g !== void 0 ? _g : '']), _this3.dialogType === 'show' ? '' : (0,external_vue_.createVNode)("div", {
+          "class": (0,external_shared_.resolveClassName)('modal-footer')
+        }, [(_k = (_j = (_h = _this3.$slots).footer) === null || _j === void 0 ? void 0 : _j.call(_h)) !== null && _k !== void 0 ? _k : '']), (0,external_vue_.createVNode)("div", {
+          "class": [(0,external_shared_.resolveClassName)('modal-close'), _this3.closeIcon ? '' : 'close-icon']
+        }, [(_o = (_m = (_l = _this3.$slots).close) === null || _m === void 0 ? void 0 : _m.call(_l)) !== null && _o !== void 0 ? _o : ''])]) : ''];
+      }
+    })]);
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/modal/src/index.ts
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+*/
+
+
+
+var BkModal = (0,external_shared_.withInstallProps)(modal, {
+  propsMixin: propsMixin
+}, true);
+/* harmony default export */ const src = (BkModal);
+
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/lib/modal/modal.d.ts

@@ -73,8 +73,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: string;
     };
-    renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
-        default: "if" | "show";
+    renderDirective: import("vue-types").VueTypeValidableDef<"show" | "if"> & {
+        default: "show" | "if";
     };
     beforeClose: import("vue-types").VueTypeDef<unknown>;
     dialogType: import("vue-types").VueTypeDef<"process" | "show" | "operation" | "confirm">;
@@ -170,8 +170,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: string;
     };
-    renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
-        default: "if" | "show";
+    renderDirective: import("vue-types").VueTypeValidableDef<"show" | "if"> & {
+        default: "show" | "if";
     };
     beforeClose: import("vue-types").VueTypeDef<unknown>;
     dialogType: import("vue-types").VueTypeDef<"process" | "show" | "operation" | "confirm">;
@@ -194,13 +194,13 @@ declare const _default: import("vue").DefineComponent<{
     height: string | number;
     maxHeight: string;
     extCls: string | unknown[];
-    direction: string;
     isShow: boolean;
     zIndex: string | number;
     draggable: boolean;
     showMask: boolean;
     multiInstance: boolean;
-    renderDirective: "if" | "show";
+    direction: string;
+    renderDirective: "show" | "if";
     quickClose: boolean;
     scrollable: boolean;
     closeIcon: boolean;

package/lib/modal/props.mixin.d.ts

@@ -73,8 +73,8 @@ export declare const propsMixin: {
     } & {
         default: string;
     };
-    renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
-        default: "if" | "show";
+    renderDirective: import("vue-types").VueTypeValidableDef<"show" | "if"> & {
+        default: "show" | "if";
     };
     beforeClose: import("vue-types").VueTypeDef<unknown>;
     dialogType: import("vue-types").VueTypeDef<"process" | "show" | "operation" | "confirm">;

package/lib/navigation/index.d.ts

@@ -3,7 +3,6 @@ declare const Navigation: {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
-            headHeight?: string | number;
             sideTitle?: string;
             navigationType?: import("./navigation").BkNavigationType;
             navWidth?: string | number;
@@ -13,6 +12,7 @@ declare const Navigation: {
             hoverLeaveDelay?: number;
             hoverEnterDelay?: number;
             defaultOpen?: boolean;
+            headHeight?: string | number;
             needMenu?: boolean;
             class?: unknown;
             style?: unknown;
@@ -143,7 +143,6 @@ declare const Navigation: {
             handleMouseLeave: () => void;
             handleClick: () => void;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("toggle" | "hover" | "leave" | "toggle-click")[], string, {
-            headHeight: string | number;
             sideTitle: string;
             navigationType: import("./navigation").BkNavigationType;
             navWidth: string | number;
@@ -153,6 +152,7 @@ declare const Navigation: {
             hoverLeaveDelay: number;
             hoverEnterDelay: number;
             defaultOpen: boolean;
+            headHeight: string | number;
             needMenu: boolean;
         }, {}, string, import("vue").SlotsType<{
             default?: () => HTMLElement;
@@ -308,7 +308,6 @@ declare const Navigation: {
     handleMouseLeave: () => void;
     handleClick: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("toggle" | "hover" | "leave" | "toggle-click")[], "toggle" | "hover" | "leave" | "toggle-click", {
-    headHeight: string | number;
     sideTitle: string;
     navigationType: import("./navigation").BkNavigationType;
     navWidth: string | number;
@@ -318,6 +317,7 @@ declare const Navigation: {
     hoverLeaveDelay: number;
     hoverEnterDelay: number;
     defaultOpen: boolean;
+    headHeight: string | number;
     needMenu: boolean;
 }, {}, string, import("vue").SlotsType<{
     default?: () => HTMLElement;