bkui-vue 0.0.1-beta.46 → 0.0.1-beta.460

package/lib/sideslider/sideslider.css

@@ -1,18 +1,55 @@
-.bk-modal-wrapper.bk-sideslider-wrapper {
+.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 0.25s;
+}
+.slide-enter-active {
+  animation: slider-fade-in 0.25s;
+}
+.slide-leave-active {
+  animation: slider-fade-in 0.25s reverse;
+}
+.slide-enter-from.left,
+.slide-leave-to.left {
+  transform: translateX(-100%);
+  transition: transform 0.25s;
+}
+.slide-enter-from.right,
+.slide-leave-to.right {
+  transform: translateX(100%);
+  transition: transform 0.25s;
+}
+@keyframes slider-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.bk-modal-wrapper.bk-sideslider-wrapper {
+  position: absolute;
+  top: 0;
   bottom: 0;
   left: auto;
-  background: #fff;
   transform: initial;
-  box-shadow: -5px 0 8px -5px rgba(0, 0, 0, 0.2);
 }
 .bk-modal-wrapper.bk-sideslider-wrapper.scroll-able .bk-modal-content {
   overflow: auto;
 }
 .bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header {
   width: 100%;
-  height: 60px;
+  height: 52px;
   background: #fff;
   border-bottom: 1px solid #dcdee5;
 }
@@ -20,9 +57,9 @@
   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;
@@ -57,13 +94,23 @@
   transform: translate(50%, -50%) rotate(-45deg);
 }
 .bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title {
-  height: 60px;
+  display: flex;
+  height: 52px;
   padding-left: 30px;
   font-size: 16px;
-  font-weight: 700;
-  line-height: 60px;
-  color: #666;
+  color: #313238;
+  align-items: center;
 }
 .bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title.right {
-  padding: 0px 0px 0px 50px;
+  width: 100%;
+  padding: 0 0 0 46px;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-footer {
+  display: flex;
+  width: 100%;
+  height: 54px;
+  background: #fff;
+  border-top: 1px solid transparent;
+  align-items: center;
+  box-shadow: rgba(0, 0, 0, 0.06) 0 -2px 4px 0;
 }

package/lib/sideslider/sideslider.d.ts

@@ -4,130 +4,201 @@ 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: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
     };
-    customClass: {
-        type: (ArrayConstructor | 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;
     };
-    scrollable: {
-        type: BooleanConstructor;
+    showMask: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    showMask: {
-        type: BooleanConstructor;
+    closeIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    closeIcon: {
-        type: BooleanConstructor;
+    escClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    escClose: {
-        type: BooleanConstructor;
+    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    maskClose: {
-        type: BooleanConstructor;
+    size: import("vue-types").VueTypeDef<"small" | "medium" | "large" | "normal">;
+    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    fullscreen: {
-        type: BooleanConstructor;
+    quickClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    size: {
-        type: StringConstructor;
+    transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
+        default: string | boolean | (() => HTMLElement);
+    };
+    zIndex: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    maxHeight: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
-        validator: (value: string) => boolean;
     };
-    renderDirective: {
-        type: StringConstructor;
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
         default: string;
-        validator: (value: string) => boolean;
     };
-}, 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<{
+    animateType: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+        default: "if" | "show";
+    };
+    beforeClose: import("vue-types").VueTypeDef<unknown>;
+    dialogType: import("vue-types").VueTypeDef<"process" | "show" | "operation" | "confirm">;
+    multiInstance: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hidden" | "shown" | "closed" | "update:isShow" | "animation-end")[], "shown" | "hidden" | "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)[];
-        default: string;
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
     };
-    customClass: {
-        type: (ArrayConstructor | 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;
     };
-    scrollable: {
-        type: BooleanConstructor;
+    showMask: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    showMask: {
-        type: BooleanConstructor;
+    closeIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    closeIcon: {
-        type: BooleanConstructor;
+    escClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    escClose: {
-        type: BooleanConstructor;
+    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    maskClose: {
-        type: BooleanConstructor;
+    size: import("vue-types").VueTypeDef<"small" | "medium" | "large" | "normal">;
+    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    fullscreen: {
-        type: BooleanConstructor;
+    quickClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
         default: boolean;
     };
-    size: {
-        type: StringConstructor;
+    transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
+        default: string | boolean | (() => HTMLElement);
+    };
+    zIndex: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    maxHeight: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
-        validator: (value: string) => boolean;
     };
-    renderDirective: {
-        type: StringConstructor;
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    animateType: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
         default: string;
-        validator: (value: string) => boolean;
     };
+    renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+        default: "if" | "show";
+    };
+    beforeClose: import("vue-types").VueTypeDef<unknown>;
+    dialogType: import("vue-types").VueTypeDef<"process" | "show" | "operation" | "confirm">;
+    multiInstance: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
 }>> & {
+    onHidden?: (...args: any[]) => any;
+    onShown?: (...args: any[]) => any;
     onClosed?: (...args: any[]) => any;
     "onUpdate:isShow"?: (...args: any[]) => any;
+    "onAnimation-end"?: (...args: any[]) => any;
 }, {
+    title: string;
+    transfer: string | boolean | HTMLElement;
     width: string | number;
     height: string | number;
-    showMask: boolean;
-    size: string;
+    maxHeight: string;
+    extCls: string | unknown[];
     direction: string;
     isShow: boolean;
-    customClass: string | unknown[];
+    zIndex: string | number;
+    draggable: boolean;
+    showMask: boolean;
+    multiInstance: boolean;
+    renderDirective: "if" | "show";
+    quickClose: boolean;
     scrollable: boolean;
     closeIcon: boolean;
     escClose: boolean;
-    maskClose: boolean;
     fullscreen: boolean;
-    renderDirective: string;
+    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,33 @@
           }
         }
 
-        
+
       }
 
       .bk-sideslider-title {
-        height: 60px;
+        display: flex;
+        height: 52px;
         padding-left: 30px;
         font-size: 16px;
-        font-weight: 700;
-        line-height: 60px;
-        color: #666;
+        color: #313238;
+        align-items: center;
 
         &.right {
-          padding: 0px 0px 0px 50px;
+          width: 100%;
+          padding: 0 0 0 30+16px;
         }
       }
     }
+
+    .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%) 0 -2px 4px 0;
+    }
   }
-}
+}
+

package/lib/sideslider/sideslider.variable.css

@@ -9,6 +9,7 @@
   --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
+  --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
@@ -18,10 +19,11 @@
   --line-height-large: 18px;
   --component-size-small: 26px;
   --component-size-base: 32px;
-  --component-size-large: 38px;
+  --component-size-large: 40px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
   --input-disabled-bg: #fafbfd;
   --input-disabled-border: var(--disable-color);
   --input-height-base: var(--component-size-base);
@@ -31,8 +33,9 @@
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
   --input-horizontal-padding: 10px;
-  --input-block-color: #f4f6fa;
-  --input-icon-size: var(--font-size-large);
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
   --input-maxlength-color: #979ba5;
   --button-primary-hover-color: #5594fa;
   --button-danger-hover-color: #ff5656;
@@ -43,6 +46,17 @@
   --button-danger-active-color: #db2626;
   --button-success-active-color: #1ab943;
   --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6cc;
+  --radio-disabled-checked-bg: #a3c5fd;
+  --radio-button-checked-bg: #e1ecff;
+  --radio-button-disabled-checked-bg: #fafbfd;
+  --checkbox-disabled-checked-bg: #a3c5fd;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -63,12 +77,16 @@
   --message-color: var(--default-color);
   --message-primary-bg-color: #f0f8ff;
   --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
   --message-warning-bg-color: #fff4e2;
   --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
   --message-success-bg-color: #f2fff4;
   --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
   --message-danger-bg-color: #ffeded;
   --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
   --slider-default-bg: #dcdee5;
   --slider-disable-bar-bg: #979ba5;
   --menu-bg-color: #182132;
@@ -88,25 +106,72 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #575961;
+  --table-body-font-color: #63656E;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
+  --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
+  --search-select-menu-border-color: var(--disable-color);
 }
-.bk-modal-wrapper.bk-sideslider-wrapper {
+.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 0.25s;
+}
+.slide-enter-active {
+  animation: slider-fade-in 0.25s;
+}
+.slide-leave-active {
+  animation: slider-fade-in 0.25s reverse;
+}
+.slide-enter-from.left,
+.slide-leave-to.left {
+  transform: translateX(-100%);
+  transition: transform 0.25s;
+}
+.slide-enter-from.right,
+.slide-leave-to.right {
+  transform: translateX(100%);
+  transition: transform 0.25s;
+}
+@keyframes slider-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.bk-modal-wrapper.bk-sideslider-wrapper {
+  position: absolute;
+  top: 0;
   bottom: 0;
   left: auto;
-  background: #fff;
   transform: initial;
-  box-shadow: -5px 0 8px -5px rgba(0, 0, 0, 0.2);
 }
 .bk-modal-wrapper.bk-sideslider-wrapper.scroll-able .bk-modal-content {
   overflow: auto;
 }
 .bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header {
   width: 100%;
-  height: 60px;
+  height: 52px;
   background: #fff;
   border-bottom: 1px solid #dcdee5;
 }
@@ -114,9 +179,9 @@
   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;
@@ -151,13 +216,23 @@
   transform: translate(50%, -50%) rotate(-45deg);
 }
 .bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title {
-  height: 60px;
+  display: flex;
+  height: 52px;
   padding-left: 30px;
   font-size: 16px;
-  font-weight: 700;
-  line-height: 60px;
-  color: #666;
+  color: #313238;
+  align-items: center;
 }
 .bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title.right {
-  padding: 0px 0px 0px 50px;
+  width: 100%;
+  padding: 0 0 0 46px;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-footer {
+  display: flex;
+  width: 100%;
+  height: 54px;
+  background: #fff;
+  border-top: 1px solid transparent;
+  align-items: center;
+  box-shadow: rgba(0, 0, 0, 0.06) 0 -2px 4px 0;
 }