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

package/lib/sideslider/sideslider.d.ts

@@ -4,72 +4,220 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
-    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;
+    };
+    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, unknown, {}, {
-    handleClose(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("closed" | "update:isShow")[], "closed" | "update:isShow", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hidden" | "shown" | "closed" | "update:isShow" | "animation-end")[], "hidden" | "shown" | "closed" | "update:isShow" | "animation-end", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     direction: {
         type: StringConstructor;
         default: string;
         validator: (value: string) => boolean;
     };
-    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: {
-        type: (NumberConstructor | StringConstructor)[];
+    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;
+    };
+    showMask: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
     };
-    customClass: {
-        type: (ArrayConstructor | StringConstructor)[];
+    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;
+    };
+    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;
     };
-    showMask: {
-        type: BooleanConstructor;
+    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;
     };
 }>> & {
+    onHidden?: (...args: any[]) => any;
+    onShown?: (...args: any[]) => any;
     onClosed?: (...args: any[]) => any;
     "onUpdate:isShow"?: (...args: any[]) => any;
+    "onAnimation-end"?: (...args: any[]) => any;
 }, {
+    title: string;
+    multiInstance: boolean;
+    zIndex: string | number;
+    showMask: boolean;
+    extCls: string | unknown[];
     width: string | number;
     height: string | number;
-    showMask: boolean;
-    direction: string;
     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/sideslider/sideslider.less

@@ -1,14 +1,63 @@
 @import '../styles/themes/themes.less';
 
+.bk-sideslider {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/* fade-center */
+
+/* slide过渡动画 */
+.slide-enter-active,
+.slide-leave-active,
+.bk-modal-body {
+  transform: translateX(0);
+  transition: transform .25s;
+}
+
+.slide-enter-active {
+  animation: slider-fade-in .25s;
+}
+
+.slide-leave-active {
+  animation: slider-fade-in .25s reverse;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  &.left {
+    transform: translateX(-100%);
+    transition: transform .25s;
+  }
+
+  &.right {
+    transform: translateX(100%);
+    transition: transform .25s;
+  }
+}
+
+@keyframes slider-fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 .bk-modal-wrapper {
   &.bk-sideslider-wrapper {
-    position: fixed;
+    position: absolute;
     top: 0;
     bottom: 0;
     left: auto;
-    background: #fff;
+    //background: #fff;
     transform: initial;
-    box-shadow: -5px 0 8px -5px rgb(0 0 0 / 20%);
+    //box-shadow: -5px 0 8px -5px rgb(0 0 0 / 20%);
 
     &.scroll-able {
       .bk-modal-content {
@@ -18,17 +67,17 @@
 
     .bk-sideslider-header {
       width: 100%;
-      height: 60px;
+      height: 52px;
       background: #fff;
       border-bottom: 1px solid #dcdee5;
 
       .bk-sideslider-close {
-        position: absolute;        
+        position: absolute;
         top: 0;
         width: 30px;
-        height: 60px;
+        height: 52px;
         font-size: 24px;
-        line-height: 60px;
+        line-height: 52px;
         color: #fff;
         text-align: center;
         cursor: pointer;
@@ -66,21 +115,31 @@
           }
         }
 
-        
+
       }
 
       .bk-sideslider-title {
-        height: 60px;
+        height: 52px;
         padding-left: 30px;
         font-size: 16px;
-        font-weight: 700;
-        line-height: 60px;
-        color: #666;
+        line-height: 52px;
+        color: #313238;
 
         &.right {
           padding: 0px 0px 0px 50px;
         }
       }
     }
+
+    .bk-sideslider-footer {
+      display: flex;
+      width: 100%;
+      height: 54px;
+      background: #fff;
+      border-top: 1px solid transparent;
+      align-items: center;
+      box-shadow: rgb(0 0 0 / 6%) 0px -2px 4px 0px;
+    }
   }
-}
+}
+