bkui-vue 1.0.3-beta.62.dialog.1 → 1.0.3-beta.63

package/lib/dialog/index.js

@@ -8,7 +8,6 @@ import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ fr
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_modal_d1344388__ from "../modal";
 import "../modal/modal.less";
-import * as __WEBPACK_EXTERNAL_MODULE_lodash_cloneDeep_13f2b125__ from "lodash/cloneDeep";
 /******/ var __webpack_modules__ = ({
 
 /***/ 7609:
@@ -508,7 +507,7 @@ function _asyncToGenerator(fn) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref });
+const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
 // EXTERNAL MODULE: ../../node_modules/@babel/runtime/regenerator/index.js
 var regenerator = __webpack_require__(2841);
 var regenerator_default = /*#__PURE__*/__webpack_require__.n(regenerator);
@@ -527,7 +526,7 @@ const config_provider_namespaceObject = config_provider_x({ ["useLocale"]: () =>
 ;// CONCATENATED MODULE: external "../icon"
 var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var icon_y = x => () => x
-const icon_namespaceObject = icon_x({ ["Error"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Error });
+const icon_namespaceObject = icon_x({ ["Close"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Close, ["Error"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Error, ["Spinner"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Spinner, ["Success"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Success, ["Warn"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Warn });
 ;// CONCATENATED MODULE: external "../modal"
 var modal_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var modal_y = x => () => x
@@ -536,10 +535,6 @@ const modal_namespaceObject = modal_x({ ["default"]: () => __WEBPACK_EXTERNAL_MO
 var modal_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var modal_less_y = x => () => x
 const modal_less_namespaceObject = modal_less_x({  });
-;// CONCATENATED MODULE: external "lodash/cloneDeep"
-var cloneDeep_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var cloneDeep_y = x => () => x
-const cloneDeep_namespaceObject = cloneDeep_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_cloneDeep_13f2b125__["default"] });
 ;// CONCATENATED MODULE: ../../packages/dialog/src/props.ts
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -571,12 +566,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 
-
-var dialogProps = (0,cloneDeep_namespaceObject["default"])(modal_namespaceObject.propsMixin);
-dialogProps.width["default"] = '400';
-var props = _objectSpread(_objectSpread({}, dialogProps), {}, {
-  // 是否可拖拽
-  draggable: shared_namespaceObject.PropTypes.bool.def(true),
+var props = _objectSpread(_objectSpread({}, modal_namespaceObject.propsMixin), {}, {
   // 确认按钮文字
   // confirmText: PropTypes.string.def('确定'),
   confirmText: shared_namespaceObject.PropTypes.string,
@@ -593,13 +583,13 @@ var props = _objectSpread(_objectSpread({}, dialogProps), {}, {
   // 总步数
   totalStep: shared_namespaceObject.PropTypes.number,
   // 弹框的标题
-  title: shared_namespaceObject.PropTypes.string.def(''),
+  title: shared_namespaceObject.PropTypes.string.def('title'),
   // 显示 header 的位置
   headerAlign: (0,shared_namespaceObject.alignType)().def(shared_namespaceObject.AlignEnum.LEFT),
   // 显示 footer 的位置
   footerAlign: (0,shared_namespaceObject.alignType)().def(shared_namespaceObject.AlignEnum.RIGHT),
   // 颜色 按钮类型
-  confirmButtonTheme: shared_namespaceObject.PropTypes.theme().def(shared_namespaceObject.ThemeEnum.PRIMARY),
+  theme: shared_namespaceObject.PropTypes.theme().def(shared_namespaceObject.ThemeEnum.PRIMARY),
   // 对话框类型
   dialogType: (0,shared_namespaceObject.dialogTypeUnion)(),
   // 按钮loading
@@ -648,45 +638,13 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
 }
 /* harmony default export */ const dialog = ((0,external_vue_namespaceObject.defineComponent)({
+  // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Dialog',
   props: src_props,
-  emits: {
-    closed: function closed() {
-      return true;
-    },
-    shown: function shown() {
-      return true;
-    },
-    hidden: function hidden() {
-      return true;
-    },
-    'update:isShow': function updateIsShow(value) {
-      return value !== undefined;
-    },
-    confirm: function confirm() {
-      return true;
-    },
-    prev: function prev() {
-      return true;
-    },
-    next: function next() {
-      return true;
-    }
-  },
+  emits: ['closed', 'update:isShow', 'confirm', 'prev', 'next', 'value-change'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
     var t = (0,config_provider_namespaceObject.useLocale)('dialog');
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
-    var isMoveing = (0,external_vue_namespaceObject.ref)(false);
-    var data = (0,external_vue_namespaceObject.reactive)({
-      positionX: 0,
-      positionY: 0,
-      moveStyle: {
-        top: '50%',
-        left: '50%'
-      }
-    });
     var localConfirmText = (0,external_vue_namespaceObject.computed)(function () {
       if (props.confirmText === undefined) {
         return t.value.ok;
@@ -711,6 +669,33 @@ function _isSlot(s) {
       }
       return props.nextText;
     });
+    var data = (0,external_vue_namespaceObject.reactive)({
+      positionX: 0,
+      positionY: 0,
+      moveStyle: {
+        top: '50%',
+        left: '50%'
+      }
+    });
+    var isModalShow = (0,external_vue_namespaceObject.ref)(props.isShow);
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.isShow;
+    }, function (val) {
+      if (!val) {
+        setTimeout(function () {
+          data.moveStyle = {
+            top: '50%',
+            left: '50%'
+          };
+          data.positionX = 0;
+          data.positionY = 0;
+          isModalShow.value = false;
+        }, 250);
+      } else {
+        isModalShow.value = true;
+      }
+      emit('value-change', val);
+    });
     // 关闭弹框
     var handleClose = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
@@ -731,6 +716,7 @@ function _isSlot(s) {
               if (shouldClose) {
                 emit('update:isShow', false);
                 emit('closed');
+                isModalShow.value = false;
               }
             case 6:
             case "end":
@@ -746,11 +732,13 @@ function _isSlot(s) {
       emit('update:isShow', false);
       emit('confirm');
     };
-    var handleShown = function handleShown() {
-      emit('shown');
-    };
-    var handleHidden = function handleHidden() {
-      emit('hidden');
+    // 按 esc 关闭弹框
+    var escCloseHandler = function escCloseHandler(e) {
+      if (props.isShow && props.closeIcon) {
+        if (e.keyCode === 27) {
+          handleClose();
+        }
+      }
     };
     // 上一步
     var handlePrevStep = function handlePrevStep() {
@@ -761,7 +749,7 @@ function _isSlot(s) {
       emit('next');
     };
     // 拖拽事件
-    var handleMousedown = function handleMousedown(e) {
+    var moveHandler = function moveHandler(e) {
       if (props.fullscreen) {
         return false;
       }
@@ -780,7 +768,6 @@ function _isSlot(s) {
         disX = e.clientX - odiv.offsetLeft;
         disY = e.clientY - odiv.offsetTop;
       }
-      isMoveing.value = true;
       document.onmousemove = function (e) {
         var boxLeft = window.innerWidth - parentWidth;
         var boxTop = window.innerHeight - parentHeight;
@@ -804,36 +791,68 @@ function _isSlot(s) {
       document.onmouseup = function () {
         document.onmousemove = null;
         document.onmouseup = null;
-        isMoveing.value = false;
       };
     };
+    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    (0,external_vue_namespaceObject.onMounted)(function () {
+      if (props.escClose) {
+        addEventListener('keydown', escCloseHandler);
+      }
+    });
+    (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
+      if (props.escClose) {
+        removeEventListener('keydown', escCloseHandler);
+      }
+    });
     return {
       data: data,
+      handleClose: handleClose,
+      handleConfirm: handleConfirm,
+      escCloseHandler: escCloseHandler,
+      moveHandler: moveHandler,
+      handlePrevStep: handlePrevStep,
+      handleNextStep: handleNextStep,
+      isModalShow: isModalShow,
       localConfirmText: localConfirmText,
       localCancelText: localCancelText,
       localPrevText: localPrevText,
       localNextText: localNextText,
-      resolveClassName: resolveClassName,
-      handleHidden: handleHidden,
-      handleShown: handleShown,
-      handleClose: handleClose,
-      handleConfirm: handleConfirm,
-      handleMousedown: handleMousedown,
-      handlePrevStep: handlePrevStep,
-      handleNextStep: handleNextStep
+      resolveClassName: resolveClassName
     };
   },
   render: function render() {
     var _this = this;
+    var renderIcon = function renderIcon() {
+      var iconMap = {
+        loading: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Spinner, {
+          "class": [_this.resolveClassName('info-icon'), 'primary']
+        }, null),
+        warning: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Warn, {
+          "class": [_this.resolveClassName('info-icon'), 'warning']
+        }, null),
+        success: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Success, {
+          "class": [_this.resolveClassName('info-icon'), 'success']
+        }, null),
+        danger: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, {
+          "class": [_this.resolveClassName('info-icon'), 'danger']
+        }, null)
+      };
+      return iconMap[_this.infoType];
+    };
     var dialogSlot = {
       header: function header() {
-        var _this$$slots$tools, _this$$slots, _this$$slots$header, _this$$slots$header2, _this$$slots2;
+        var _this$$slots$tools, _this$$slots$tools2, _this$$slots, _this$$slots$header, _this$$slots$header2, _this$$slots2;
         return [(0,external_vue_namespaceObject.createVNode)("div", {
-          "class": _defineProperty(_defineProperty(_defineProperty({}, _this.resolveClassName('dialog-tool'), true), 'is-draggable', !_this.fullscreen && _this.draggable), 'is-dragging', _this.draggable),
-          "onMousedown": _this.handleMousedown
-        }, [(_this$$slots$tools = (_this$$slots = _this.$slots).tools) === null || _this$$slots$tools === void 0 ? void 0 : _this$$slots$tools.call(_this$$slots)]), (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": [_this.resolveClassName('dialog-tool'), _this.fullscreen || !_this.draggable ? '' : 'move', _this.draggable ? 'content-dragging' : ''],
+          "onMousedown": _this.moveHandler
+        }, [(_this$$slots$tools = (_this$$slots$tools2 = (_this$$slots = _this.$slots).tools) === null || _this$$slots$tools2 === void 0 ? void 0 : _this$$slots$tools2.call(_this$$slots)) !== null && _this$$slots$tools !== void 0 ? _this$$slots$tools : '']), (0,external_vue_namespaceObject.createVNode)("div", {
           "class": _this.resolveClassName('dialog-header')
-        }, [(0,external_vue_namespaceObject.createVNode)("span", {
+        }, [(0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _this.resolveClassName('dialog-header-icon')
+        }, [_this.infoType ? renderIcon() : (0,external_vue_namespaceObject.createVNode)("slot", {
+          "name": "info-icon"
+        }, null)]), (0,external_vue_namespaceObject.createVNode)("span", {
           "class": _this.resolveClassName('dialog-title'),
           "style": "text-align: ".concat(_this.headerAlign)
         }, [(_this$$slots$header = (_this$$slots$header2 = (_this$$slots2 = _this.$slots).header) === null || _this$$slots$header2 === void 0 ? void 0 : _this$$slots$header2.call(_this$$slots2)) !== null && _this$$slots$header !== void 0 ? _this$$slots$header : _this.title])])];
@@ -857,7 +876,7 @@ function _isSlot(s) {
           if (_this.dialogType === 'operation') {
             return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
               "onClick": _this.handleConfirm,
-              "theme": _this.confirmButtonTheme,
+              "theme": _this.theme,
               "loading": _this.isLoading
             }, {
               "default": function _default() {
@@ -876,7 +895,7 @@ function _isSlot(s) {
           if (_this.dialogType === 'confirm') {
             return (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
               "onClick": _this.handleConfirm,
-              "theme": _this.confirmButtonTheme,
+              "theme": _this.theme,
               "loading": _this.isLoading
             }, {
               "default": function _default() {
@@ -908,7 +927,7 @@ function _isSlot(s) {
                   }
                 }), (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
                   "onClick": _this.handleConfirm,
-                  "theme": _this.confirmButtonTheme,
+                  "theme": _this.theme,
                   "loading": _this.isLoading
                 }, {
                   "default": function _default() {
@@ -934,28 +953,18 @@ function _isSlot(s) {
         }, [renderFooterAction()]);
       },
       close: function close() {
-        return (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, null, null);
+        return (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {
+          "onClick": _this.handleClose
+        }, null);
       }
     };
-    return (0,external_vue_namespaceObject.createVNode)(modal_namespaceObject["default"], {
+    return (0,external_vue_namespaceObject.createVNode)(modal_namespaceObject["default"], (0,external_vue_namespaceObject.mergeProps)(this.$props, {
       "class": _defineProperty(_defineProperty(_defineProperty({}, this.resolveClassName('dialog'), true), this.resolveClassName('dialog-wrapper'), true), 'is-fullscreen', this.fullscreen),
-      "isShow": this.isShow,
-      "fullscreen": this.fullscreen,
-      "width": this.fullscreen ? 'auto' : this.width,
-      "animateType": "fadein",
-      "beforeClose": this.beforeClose,
-      "closeIcon": this.closeIcon,
-      "escClose": this.escClose,
-      "quickClose": this.quickClose,
-      "showMask": this.showMask,
-      "transfer": this.transfer,
-      "left": this.fullscreen ? '0px' : this.data.moveStyle.left,
-      "top": this.fullscreen ? '0px' : this.data.moveStyle.top,
-      "zIndex": this.zIndex,
       "onClose": this.handleClose,
-      "onHidden": this.handleHidden,
-      "onShown": this.handleShown
-    }, _isSlot(dialogSlot) ? dialogSlot : {
+      "isShow": this.isModalShow,
+      "left": this.data.moveStyle.left,
+      "top": this.data.moveStyle.top
+    }), _isSlot(dialogSlot) ? dialogSlot : {
       "default": function _default() {
         return [dialogSlot];
       }

package/lib/dialog/props.d.ts

@@ -1,9 +1,4 @@
 declare const props: {
-    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
     confirmText: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
@@ -35,7 +30,7 @@ declare const props: {
     footerAlign: import("vue-types").VueTypeValidableDef<"right" | "left" | "center"> & {
         default: "right" | "left" | "center";
     };
-    confirmButtonTheme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
+    theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
         default: "success" | "warning" | "danger" | "primary";
     };
     dialogType: import("vue-types").VueTypeDef<"show" | "process" | "operation" | "confirm">;
@@ -49,8 +44,18 @@ declare const props: {
     } & {
         default: boolean;
     };
-    width: import("vue-types").VueTypeDef<string | number>;
-    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    extCls: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    });
+    scrollable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
@@ -70,6 +75,17 @@ declare const props: {
     } & {
         default: boolean;
     };
+    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    size: import("vue-types").VueTypeDef<"small" | "medium" | "large" | "normal">;
+    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     quickClose: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -79,6 +95,14 @@ declare const props: {
         default: string | boolean | (() => HTMLElement);
     };
     zIndex: import("vue-types").VueTypeDef<string | number>;
+    maxHeight: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    direction: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     animateType: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -88,11 +112,27 @@ declare const props: {
         default: "show" | "if";
     };
     beforeClose: import("vue-types").VueTypeDef<unknown>;
+    multiInstance: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+    bodyClass: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    });
     left: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 };
 export default props;

package/lib/info-box/index.d.ts

@@ -1,7 +1,7 @@
-declare const BkInfoBox: ((config: Partial<import("./info-box").Props>) => {
+declare const BkInfoBox: ((config: Partial<import("./info-box").ModalFuncProps>) => {
     show: () => void;
     hide: () => void;
-    update: (config: Partial<import("./info-box").Props>) => void;
+    update: (config: Partial<import("./info-box").ModalFuncProps>) => void;
     destroy: () => void;
 }) & import("vue").Plugin<any[]>;
 export default BkInfoBox;