bkui-vue 0.0.2-beta.9 → 0.0.2-table-refactor.1

package/lib/affix/affix.d.ts

@@ -39,8 +39,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onChange?: (...args: any[]) => any;
 }, {
-    zIndex: number;
     target: string;
+    zIndex: number;
     offsetTop: number;
     offsetBottom: number;
 }, {}>;

package/lib/affix/index.d.ts

@@ -3,15 +3,15 @@ declare const BkAffix: {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
-            zIndex?: number;
             target?: string;
+            zIndex?: number;
             offsetTop?: number;
             offsetBottom?: number;
             class?: unknown;
             style?: unknown;
             onChange?: (...args: any[]) => any;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -88,8 +88,8 @@ declare const BkAffix: {
         }>> & {
             onChange?: (...args: any[]) => any;
         }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], string, {
-            zIndex: number;
             target: string;
+            zIndex: number;
             offsetTop: number;
             offsetBottom: number;
         }, {}, string, {}> & {
@@ -159,8 +159,8 @@ declare const BkAffix: {
 }>> & {
     onChange?: (...args: any[]) => any;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", {
-    zIndex: number;
     target: string;
+    zIndex: number;
     offsetTop: number;
     offsetBottom: number;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;

package/lib/alert/alert.css

@@ -39,6 +39,13 @@
 .bk-alert-warning .bk-alert-icon-info {
   color: #ff9c01;
 }
+.bk-alert-danger {
+  background-color: #ffeded;
+  border-color: #ffd2d2;
+}
+.bk-alert-danger .bk-alert-icon-info {
+  color: #ea3636;
+}
 .bk-alert-error {
   background-color: #ffeded;
   border-color: #ffd2d2;

package/lib/alert/alert.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<{
-    theme: import("vue-types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-        default: "info" | "success" | "warning" | "danger";
+    theme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+        default: "" | "info" | "success" | "warning" | "danger";
     };
     size: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -29,8 +29,8 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (event: Event) => Event;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    theme: import("vue-types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-        default: "info" | "success" | "warning" | "danger";
+    theme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+        default: "" | "info" | "success" | "warning" | "danger";
     };
     size: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -55,7 +55,7 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: (event: Event) => any;
 }, {
     title: string;
-    theme: "info" | "success" | "warning" | "danger";
+    theme: "" | "info" | "success" | "warning" | "danger";
     size: string;
     closable: boolean;
     closeText: string;

package/lib/alert/alert.less

@@ -12,9 +12,9 @@
 @warning-background-color: #fff4e2;
 @warning-icon-color: #ff9c01;
 
-@error-border-color: #ffd2d2;
-@error-background-color: #ffeded;
-@error-icon-color: #ea3636;
+@danger-border-color: #ffd2d2;
+@danger-background-color: #ffeded;
+@danger-icon-color: #ea3636;
 
 .@{bk-prefix}-alert {
   position: relative;
@@ -67,14 +67,24 @@
   }
 }
 
+.@{bk-prefix}-alert-danger {
+  background-color: @danger-background-color;
+  border-color: @danger-border-color;
+
+  .@{bk-prefix}-alert-icon-info {
+    color: @danger-icon-color;
+  }
+}
+// 兼容历史 prop theme 的配置 error 调整为danger
 .@{bk-prefix}-alert-error {
-  background-color: @error-background-color;
-  border-color: @error-border-color;
+  background-color: @danger-background-color;
+  border-color: @danger-border-color;
 
   .@{bk-prefix}-alert-icon-info {
-    color: @error-icon-color;
+    color: @danger-icon-color;
   }
 }
+// 兼容历史 prop theme 的配置 error 调整为danger
 
 .@{bk-prefix}-alert-content {
   display: flex;

package/lib/alert/alert.variable.css

@@ -161,6 +161,13 @@
 .bk-alert-warning .bk-alert-icon-info {
   color: #ff9c01;
 }
+.bk-alert-danger {
+  background-color: #ffeded;
+  border-color: #ffd2d2;
+}
+.bk-alert-danger .bk-alert-icon-info {
+  color: #ea3636;
+}
 .bk-alert-error {
   background-color: #ffeded;
   border-color: #ffd2d2;

package/lib/alert/index.d.ts

@@ -4,15 +4,15 @@ declare const BkAlert: {
         $data: {};
         $props: {
             title?: string;
-            theme?: "info" | "success" | "warning" | "danger";
+            theme?: "" | "info" | "success" | "warning" | "danger";
             size?: string;
             closable?: boolean;
             closeText?: string;
             showIcon?: boolean;
             class?: unknown;
             style?: unknown;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -69,8 +69,8 @@ declare const BkAlert: {
         $emit: (event: "close", event: Event) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            theme: import("vue-types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-                default: "info" | "success" | "warning" | "danger";
+            theme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+                default: "" | "info" | "success" | "warning" | "danger";
             };
             size: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -102,7 +102,7 @@ declare const BkAlert: {
             close: (event: Event) => Event;
         }, string, {
             title: string;
-            theme: "info" | "success" | "warning" | "danger";
+            theme: "" | "info" | "success" | "warning" | "danger";
             size: string;
             closable: boolean;
             closeText: string;
@@ -128,8 +128,8 @@ declare const BkAlert: {
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
-        theme: import("vue-types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-            default: "info" | "success" | "warning" | "danger";
+        theme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+            default: "" | "info" | "success" | "warning" | "danger";
         };
         size: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -162,8 +162,8 @@ declare const BkAlert: {
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    theme: import("vue-types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-        default: "info" | "success" | "warning" | "danger";
+    theme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+        default: "" | "info" | "success" | "warning" | "danger";
     };
     size: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -195,7 +195,7 @@ declare const BkAlert: {
     close: (event: Event) => Event;
 }, string, {
     title: string;
-    theme: "info" | "success" | "warning" | "danger";
+    theme: "" | "info" | "success" | "warning" | "danger";
     size: string;
     closable: boolean;
     closeText: string;

package/lib/animate-number/index.d.ts

@@ -7,8 +7,8 @@ declare const BkAnimateNumber: {
             digits?: number;
             class?: unknown;
             style?: unknown;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/lib/backtop/index.d.ts

@@ -10,8 +10,8 @@ declare const BkBacktop: {
             visibilityHeight?: number;
             class?: unknown;
             style?: unknown;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/lib/badge/badge.d.ts

@@ -101,10 +101,10 @@ declare const _default: import("vue").DefineComponent<{
     onLeave?: (...args: any[]) => any;
 }, {
     extCls: string;
-    theme: string;
     visible: boolean;
-    position: string;
+    theme: string;
     dot: boolean;
+    position: string;
     count: string | number;
     radius: string;
     valLength: number;

package/lib/badge/index.d.ts

@@ -4,18 +4,18 @@ declare const BkBadge: {
         $data: {};
         $props: {
             extCls?: string;
-            theme?: string;
             visible?: boolean;
-            position?: string;
+            theme?: string;
             dot?: boolean;
+            position?: string;
             count?: string | number;
             radius?: string;
             valLength?: number;
             overflowCount?: number;
             class?: unknown;
             style?: unknown;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -125,10 +125,10 @@ declare const BkBadge: {
             resolveClassName: (cls: string) => string;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hover" | "leave")[], string, {
             extCls: string;
-            theme: string;
             visible: boolean;
-            position: string;
+            theme: string;
             dot: boolean;
+            position: string;
             count: string | number;
             radius: string;
             valLength: number;
@@ -261,10 +261,10 @@ declare const BkBadge: {
     resolveClassName: (cls: string) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hover" | "leave")[], "hover" | "leave", {
     extCls: string;
-    theme: string;
     visible: boolean;
-    position: string;
+    theme: string;
     dot: boolean;
+    position: string;
     count: string | number;
     radius: string;
     valLength: number;

package/lib/breadcrumb/index.d.ts

@@ -13,8 +13,8 @@ declare const BkBreadcrumb: {
             };
             class?: unknown;
             style?: unknown;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -216,5 +216,5 @@ declare const BkBreadcrumb: {
         replace: boolean;
     }, {}>;
 }>;
-export { BkBreadcrumb, BreadcrumbItem as BkBreadcrumbItem, };
+export { BkBreadcrumb, BreadcrumbItem as BkBreadcrumbItem };
 export default BkBreadcrumb;

package/lib/button/button.css

@@ -41,6 +41,11 @@
   border-color: #5594fa;
   color: white;
 }
+.bk-button.bk-button-primary.is-outline:active {
+  background-color: #2c77f4;
+  border-color: #2c77f4;
+  color: white;
+}
 .bk-button.bk-button-primary.is-text {
   color: #3a84ff;
   background-color: transparent;
@@ -87,6 +92,11 @@
   border-color: #ffb848;
   color: white;
 }
+.bk-button.bk-button-warning.is-outline:active {
+  background-color: #eb9000;
+  border-color: #eb9000;
+  color: white;
+}
 .bk-button.bk-button-warning.is-text {
   color: #ff9c01;
   background-color: transparent;
@@ -133,6 +143,11 @@
   border-color: #45e35f;
   color: white;
 }
+.bk-button.bk-button-success.is-outline:active {
+  background-color: #1ab943;
+  border-color: #1ab943;
+  color: white;
+}
 .bk-button.bk-button-success.is-text {
   color: #2dcb56;
   background-color: transparent;
@@ -179,6 +194,11 @@
   border-color: #ff5656;
   color: white;
 }
+.bk-button.bk-button-danger.is-outline:active {
+  background-color: #db2626;
+  border-color: #db2626;
+  color: white;
+}
 .bk-button.bk-button-danger.is-text {
   color: #ea3636;
   background-color: transparent;

package/lib/button/button.less

@@ -33,11 +33,12 @@
   appearance: none;
   align-items: center;
   justify-content: center;
-  
+
   each(@themeSelectors, {
     @color: '@{value}-color';
     @hoverColor: 'button-@{value}-hover-color';
     @activeColor: 'button-@{value}-active-color';
+
     &.@{bk-prefix}-button-@{value} {
       background-color: @@color;
       color: @white-color;
@@ -64,22 +65,31 @@
           border-color: @@hoverColor;
           color: @white-color;
         }
+
+        &:active {
+          background-color: @@activeColor;
+          border-color: @@activeColor;
+          color: @white-color;
+        }
       }
 
       &.is-text {
         color: @@color;
         background-color: transparent;
         border: none;
+
         &:not(.is-disabled):hover {
           color: @@hoverColor;
         }
       }
+
       &.is-disabled {
         &:not(.is-text) {
           background-color: @disable-color;
           color: @white-color;
           border-color: @disable-color;
         }
+
         color: @disable-color;
         cursor: not-allowed;
       }
@@ -92,81 +102,83 @@
         color: @white-color;
       }
     }
-  })
 
-  
-    each(@sizeSelectors, {
-    @sizeBtnHeight: '@{value}BtnHeight';
-    @sizeBtnPadding: '@{value}BtnPadding';
-    @sizeBtnFontSize: '@{value}BtnFontSize';
-    &.@{bk-prefix}-button-@{value} {
-      height: @@sizeBtnHeight;
-      padding: @@sizeBtnPadding;
-      font-size: @@sizeBtnFontSize;
-    }
-  });
+  }) each(@sizeSelectors, {
+  @sizeBtnHeight: '@{value}BtnHeight';
+  @sizeBtnPadding: '@{value}BtnPadding';
+  @sizeBtnFontSize: '@{value}BtnFontSize';
 
-  .@{bk-prefix}-button-text {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
+  &.@{bk-prefix}-button-@{value} {
+    height: @@sizeBtnHeight;
+    padding: @@sizeBtnPadding;
+    font-size: @@sizeBtnFontSize;
   }
+});
 
-  &.is-loading {
-    position: relative;
-    .@{bk-prefix}-button-loading {
-      &:not(:last-child) {
-        position: absolute;
-      }
-    }
-    .@{bk-prefix}-button-text {
-      visibility: hidden;
+.@{bk-prefix}-button-text {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+&.is-loading {
+  position: relative;
+
+  .@{bk-prefix}-button-loading {
+    &:not(:last-child) {
+      position: absolute;
     }
   }
 
-  &:hover {
-    border-color: @button-default-hover-border-color;
+  .@{bk-prefix}-button-text {
+    visibility: hidden;
   }
+}
 
-  &:active {
-    color: @primary-color;
-    border-color: @primary-color;
-  }
+&:hover {
+  border-color: @button-default-hover-border-color;
+}
 
-  &.is-text {
-    height: auto;
-    padding: 0;
-    font-size: inherit;
-    color: @default-color;
-    text-decoration: none;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-    outline: none;
-  }
+&:active {
+  color: @primary-color;
+  border-color: @primary-color;
+}
 
-  &.is-disabled {
-    color: @disable-color;
-    cursor: not-allowed;
-    border-color: @disable-color;
-  }
+&.is-text {
+  height: auto;
+  padding: 0;
+  font-size: inherit;
+  color: @default-color;
+  text-decoration: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
 
-  // &.is-circle {
-  //   padding: 8px;
-  //   line-height: 1;
-  //   border-radius: 50%;
-  // }
+&.is-disabled {
+  color: @disable-color;
+  cursor: not-allowed;
+  border-color: @disable-color;
+}
+
+// &.is-circle {
+//   padding: 8px;
+//   line-height: 1;
+//   border-radius: 50%;
+// }
 }
 
 
 .@{bk-prefix}-button-group {
   display: inline-block;
   font-size: 0;
-  
+
   each(@sizeSelectors, {
     @sizeBtnHeight: '@{value}BtnHeight';
     @sizeBtnPadding: '@{value}BtnPadding';
     @sizeBtnFontSize: '@{value}BtnFontSize';
+
     &.@{bk-prefix}-button-group-@{value} {
       .@{bk-prefix}-button {
         height: @@sizeBtnHeight;
@@ -174,52 +186,51 @@
         font-size: @@sizeBtnFontSize;
       }
     }
-  })
-;
-
-  .@{bk-prefix}-button {
-    height: @btnHeight;
-    margin: 0 0 0 -1px;
-    border-radius: 0;
-
-    &:not(.is-disabled) {
-      color: @default-color;
-      background-color: @white-color;
-      border-color: @light-gray;
-    }
+  });
 
-    &.is-disabled {
-      color: @light-gray;
-    }
-    
-    &:first-child {
-      border-radius: @btnBorderRadius 0 0 @btnBorderRadius;
-    }
+.@{bk-prefix}-button {
+  height: @btnHeight;
+  margin: 0 0 0 -1px;
+  border-radius: 0;
 
-    &:last-child {
-      border-radius: 0 @btnBorderRadius @btnBorderRadius 0;
-    }
+  &:not(.is-disabled) {
+    color: @default-color;
+    background-color: @white-color;
+    border-color: @light-gray;
+  }
 
-    &:only-child {
-      border-radius: @btnBorderRadius;
-    }
+  &.is-disabled {
+    color: @light-gray;
+  }
 
-    &:hover:not(.is-disabled),
-    &.is-selected:not(.is-disabled) {
-      position: relative;
-      z-index: 1;
-      color: @primary-color;
-      background-color: @white-color;
-      border-color: @primary-color;
-    }
+  &:first-child {
+    border-radius: @btnBorderRadius 0 0 @btnBorderRadius;
+  }
 
-    &.is-selected:not(.is-disabled) {
-      background-color: @button-selected-bg-color;
-    }
+  &:last-child {
+    border-radius: 0 @btnBorderRadius @btnBorderRadius 0;
+  }
 
-    &.is-selected.is-disabled {
-      background-color: @button-disabled-selected-bg-color;
-    }
+  &:only-child {
+    border-radius: @btnBorderRadius;
+  }
 
+  &:hover:not(.is-disabled),
+  &.is-selected:not(.is-disabled) {
+    position: relative;
+    z-index: 1;
+    color: @primary-color;
+    background-color: @white-color;
+    border-color: @primary-color;
+  }
+
+  &.is-selected:not(.is-disabled) {
+    background-color: @button-selected-bg-color;
+  }
+
+  &.is-selected.is-disabled {
+    background-color: @button-disabled-selected-bg-color;
   }
+
 }
+}