bkui-vue 0.0.1-beta.34 → 0.0.1-beta.340

package/lib/modal/index.js

@@ -0,0 +1 @@
+!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("../shared"),require("vue"));else if("function"==typeof define&&define.amd)define(["../shared","vue"],o);else{var i="object"==typeof exports?o(require("../shared"),require("vue")):o(e["../shared"],e.vue);for(var t in i)("object"==typeof exports?exports:e)[t]=i[t]}}(self,((e,o)=>(()=>{"use strict";var i={4212:o=>{o.exports=e},748:e=>{e.exports=o}},t={};function s(e){var o=t[e];if(void 0!==o)return o.exports;var n=t[e]={exports:{}};return i[e](n,n.exports,s),n.exports}s.d=(e,o)=>{for(var i in o)s.o(o,i)&&!s.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:o[i]})},s.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{s.r(n),s.d(n,{BkModal:()=>r,default:()=>l,propsMixin:()=>i});var e=s(4212),o=s(748),i={isShow:e.PropTypes.bool.def(!1),width:e.PropTypes.oneOfType([String,Number]).def("50%"),height:e.PropTypes.oneOfType([String,Number]).def("50%"),extCls:e.PropTypes.string||e.PropTypes.array,scrollable:e.PropTypes.bool.def(!0),showMask:e.PropTypes.bool.def(!0),closeIcon:e.PropTypes.bool.def(!0),escClose:e.PropTypes.bool.def(!0),fullscreen:e.PropTypes.bool.def(!1),size:e.PropTypes.commonType(["normal","small","medium","large"],"size").def(),draggable:e.PropTypes.bool.def(!0),quickClose:e.PropTypes.bool.def(!0),transfer:e.PropTypes.bool.def(!1),zIndex:e.PropTypes.oneOfType([String,Number]).def("inherit"),maxHeight:e.PropTypes.string,direction:e.PropTypes.string,title:e.PropTypes.string.def(""),animateType:e.PropTypes.string.def("slide"),renderDirective:e.PropTypes.commonType(["show","if"],"renderDirective").def("show"),beforeClose:e.PropTypes.custom((function(){return!0})),dialogType:e.PropTypes.commonType(["show","operation","confirm","process"],"dialogType").def("operation"),multiInstance:e.PropTypes.bool.def(!0),infoType:e.PropTypes.commonType(["success","warning","danger","loading"],"infoType").def()};const t=(0,o.defineComponent)({name:"Modal",props:Object.assign({},i),emits:["quick-close","quickClose","hidden","shown","close"],data:function(){return{visible:!1,closeTimer:null}},computed:{dialogWidth:function(){return/^\d+$/.test("".concat(this.width))?"".concat(this.width,"px"):this.width},dialogHeight:function(){return/^\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(o){var i=this;o?(e.bkPopIndexManager.onMaskClick((function(e){i.handleClickOutSide()})),this.$nextTick((function(){var o=i.showMask?{}:{"background-color":"rgba(0,0,0,0)"};e.bkPopIndexManager.show(i.$el,i.showMask,o,i.transfer,i.zIndex),i.$emit("shown")}))):(null===e.bkPopIndexManager||void 0===e.bkPopIndexManager||e.bkPopIndexManager.hide(this.$el,this.transfer),null===e.bkPopIndexManager||void 0===e.bkPopIndexManager||e.bkPopIndexManager.destroy())},immediate:!0}},beforeUnmount:function(){this.visible&&(null===e.bkPopIndexManager||void 0===e.bkPopIndexManager||e.bkPopIndexManager.hide(this.$el),null===e.bkPopIndexManager||void 0===e.bkPopIndexManager||e.bkPopIndexManager.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,t,s,n,r,l,d,a,p,c,h,u=this,f=this.maxHeight?{maxHeight:this.maxHeight}:{},m="bk-modal-body ".concat("slide"===this.animateType?this.direction:"");return(0,o.createVNode)("div",{class:["bk-modal-wrapper",this.extCls,this.size,this.fullscreen?"fullscreen":""],style:[this.compStyle,this.fullscreen?this.fullscreenStyle:""]},[(0,o.createVNode)(o.Transition,{name:this.animateType},{default:function(){return[u.isShow?(0,o.createVNode)("div",{class:m},[(0,o.createVNode)("div",{class:"bk-modal-header"},[null!==(t=null===(i=(e=u.$slots).header)||void 0===i?void 0:i.call(e))&&void 0!==t?t:""]),(0,o.createVNode)("div",{class:"bk-modal-content",style:["show"===u.dialogType?"padding-bottom: 20px":"",Object.assign({},f)]},[null!==(r=null===(n=(s=u.$slots).default)||void 0===n?void 0:n.call(s))&&void 0!==r?r:""]),"show"===u.dialogType?"":(0,o.createVNode)("div",{class:"bk-modal-footer"},[null!==(a=null===(d=(l=u.$slots).footer)||void 0===d?void 0:d.call(l))&&void 0!==a?a:""]),(0,o.createVNode)("div",{class:["bk-modal-close",u.closeIcon?"":"close-icon"]},[null!==(h=null===(c=(p=u.$slots).close)||void 0===c?void 0:c.call(p))&&void 0!==h?h:""])]):""]}})])}});var r=(0,e.withInstallProps)(t,{propsMixin:i},!0);const l=r})(),n})()));

package/lib/modal/modal.css

@@ -1,11 +1,73 @@
+.bk-modal-wrapper.bk-info-wrapper {
+  width: 440px;
+}
+.bk-modal-wrapper.bk-info-wrapper.normal {
+  width: 440px;
+}
+.bk-modal-wrapper.bk-info-wrapper.small {
+  width: 400px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+  border-radius: 2px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+  padding: 24px 24px 0;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+  height: 27px;
+  margin: 15px 0 10px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  padding: 0 50px 10px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+  margin-bottom: 10px;
+  text-align: center;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+  padding: 0 65px 33px;
+  background-color: #fff;
+  border-top: none;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+  min-width: 88px;
+}
 .bk-modal-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
-  background: #fff;
+  width: 480px;
+  border-radius: 2px;
   transform: translate(-50%, -50%);
 }
+.bk-modal-wrapper .bk-modal-outside {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bk-modal-wrapper.normal {
+  width: 480px;
+  height: 240px;
+}
+.bk-modal-wrapper.small {
+  width: 400px;
+  height: 200px;
+}
+.bk-modal-wrapper.medium {
+  width: 640px;
+  height: 400px;
+}
+.bk-modal-wrapper.large {
+  width: 960px;
+  height: 720px;
+}
 .bk-modal-wrapper .bk-modal-body {
   height: 100%;
+  background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

package/lib/modal/modal.d.ts

@@ -1,65 +1,229 @@
 declare const _default: import("vue").DefineComponent<{
-    isShow: {
-        type: BooleanConstructor;
+    isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    width: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
     };
-    height: {
-        type: (NumberConstructor | StringConstructor)[];
+    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;
+    };
+    showMask: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
     };
-    customClass: {
-        type: (ArrayConstructor | StringConstructor)[];
+    escClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    size: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    scrollable: {
-        type: BooleanConstructor;
+    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    quickClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    transfer: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    showMask: {
-        type: BooleanConstructor;
+    zIndex: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    maxHeight: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    direction: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    animateType: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    renderDirective: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    beforeClose: import("vue-types").VueTypeDef<unknown>;
+    dialogType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    multiInstance: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
+    } & {
+        default: boolean;
+    };
+    infoType: import("vue-types").VueTypeDef<string> & {
+        default: string;
     };
 }, unknown, {
     visible: boolean;
+    closeTimer: any;
 }, {
     dialogWidth(): String | Number;
     dialogHeight(): String | Number;
     compStyle(): any;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    isShow: {
-        type: BooleanConstructor;
+    fullscreenStyle(): any;
+}, {
+    handleClickOutSide(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "quick-close" | "quickClose" | "shown")[], "close" | "hidden" | "quick-close" | "quickClose" | "shown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    width: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
     };
-    height: {
-        type: (NumberConstructor | StringConstructor)[];
+    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;
+    };
+    showMask: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    escClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
     };
-    customClass: {
-        type: (ArrayConstructor | StringConstructor)[];
+    size: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    scrollable: {
-        type: BooleanConstructor;
+    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    quickClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    transfer: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
+    } & {
+        default: boolean;
+    };
+    zIndex: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    maxHeight: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    direction: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    animateType: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    renderDirective: import("vue-types").VueTypeDef<string> & {
+        default: string;
     };
-    showMask: {
-        type: BooleanConstructor;
+    beforeClose: import("vue-types").VueTypeDef<unknown>;
+    dialogType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    multiInstance: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-}>>, {
+    infoType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+}>> & {
+    onClose?: (...args: any[]) => any;
+    onHidden?: (...args: any[]) => any;
+    "onQuick-close"?: (...args: any[]) => any;
+    onQuickClose?: (...args: any[]) => any;
+    onShown?: (...args: any[]) => any;
+}, {
+    title: string;
+    multiInstance: boolean;
+    zIndex: string | number;
+    showMask: boolean;
+    extCls: string | unknown[];
     width: string | number;
     height: string | number;
-    showMask: boolean;
     isShow: boolean;
-    customClass: string | unknown[];
+    draggable: boolean;
+    transfer: boolean;
+    size: string;
+    direction: string;
+    maxHeight: string;
+    renderDirective: string;
+    dialogType: string;
+    infoType: string;
+    quickClose: boolean;
     scrollable: boolean;
+    closeIcon: boolean;
+    escClose: boolean;
+    fullscreen: boolean;
+    animateType: string;
 }>;
 export default _default;

package/lib/modal/modal.less

@@ -1,12 +1,47 @@
+@import '../info-box/info-box.less';
+
 .bk-modal-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
-  background: #fff;
+  width: 480px;
+  border-radius: 2px;
+  // background: #fff;
   transform: translate(-50%, -50%);
 
+  .bk-modal-outside {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &.normal {
+    width: 480px;
+    height: 240px;
+  }
+
+  &.small {
+    width: 400px;
+    height: 200px;
+  }
+
+  &.medium {
+    width: 640px;
+    height: 400px;
+  }
+
+  &.large {
+    width: 960px;
+    height: 720px;
+  }
+
   .bk-modal-body {
     height: 100%;
+    background: #fff;
     box-shadow: 0 4px 12px rgba(0,0,0,.15);
   }
 }
+
+

package/lib/modal/modal.variable.css

@@ -1,11 +1,73 @@
+.bk-modal-wrapper.bk-info-wrapper {
+  width: 440px;
+}
+.bk-modal-wrapper.bk-info-wrapper.normal {
+  width: 440px;
+}
+.bk-modal-wrapper.bk-info-wrapper.small {
+  width: 400px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+  border-radius: 2px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+  padding: 24px 24px 0;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+  height: 27px;
+  margin: 15px 0 10px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  padding: 0 50px 10px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+  margin-bottom: 10px;
+  text-align: center;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+  padding: 0 65px 33px;
+  background-color: #fff;
+  border-top: none;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+  min-width: 88px;
+}
 .bk-modal-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
-  background: #fff;
+  width: 480px;
+  border-radius: 2px;
   transform: translate(-50%, -50%);
 }
+.bk-modal-wrapper .bk-modal-outside {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bk-modal-wrapper.normal {
+  width: 480px;
+  height: 240px;
+}
+.bk-modal-wrapper.small {
+  width: 400px;
+  height: 200px;
+}
+.bk-modal-wrapper.medium {
+  width: 640px;
+  height: 400px;
+}
+.bk-modal-wrapper.large {
+  width: 960px;
+  height: 720px;
+}
 .bk-modal-wrapper .bk-modal-body {
   height: 100%;
+  background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

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

@@ -1,26 +1,95 @@
 export declare const propsMixin: {
-    isShow: {
-        type: BooleanConstructor;
+    isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    width: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
     };
-    height: {
-        type: (NumberConstructor | StringConstructor)[];
+    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;
+    };
+    showMask: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
     };
-    customClass: {
-        type: (ArrayConstructor | StringConstructor)[];
+    escClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    size: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    scrollable: {
-        type: BooleanConstructor;
+    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    quickClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    transfer: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    showMask: {
-        type: BooleanConstructor;
+    zIndex: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    maxHeight: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    direction: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    animateType: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    renderDirective: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    beforeClose: import("vue-types").VueTypeDef<unknown>;
+    dialogType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    multiInstance: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
+    infoType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
 };