bkui-vue 0.0.1-beta.35 → 0.0.1-beta.350

package/lib/tag/tag.d.ts

@@ -1,14 +1,14 @@
 declare const _default: import("vue").DefineComponent<{
-    theme: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    theme: import("vue-types").VueTypeDef<"success" | "info" | "warning" | "danger"> & {
+        default: "success" | "info" | "warning" | "danger";
     };
     closable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    type: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    type: import("vue-types").VueTypeDef<"" | "stroke" | "filled"> & {
+        default: "" | "stroke" | "filled";
     };
     checkable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -37,17 +37,17 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     handleClose: (e: Event) => void;
     handleClick: (e: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "change")[], "close" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    theme: import("vue-types").VueTypeDef<string> & {
-        default: string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], "change" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    theme: import("vue-types").VueTypeDef<"success" | "info" | "warning" | "danger"> & {
+        default: "success" | "info" | "warning" | "danger";
     };
     closable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    type: import("vue-types").VueTypeDef<string> & {
-        default: string;
+    type: import("vue-types").VueTypeDef<"" | "stroke" | "filled"> & {
+        default: "" | "stroke" | "filled";
     };
     checkable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -73,10 +73,10 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: (...args: any[]) => any;
     onClose?: (...args: any[]) => any;
 }, {
-    type: string;
-    theme: string;
-    closable: boolean;
+    type: "" | "stroke" | "filled";
+    theme: "success" | "info" | "warning" | "danger";
     extCls: string;
+    closable: boolean;
     radius: string;
     checked: boolean;
     checkable: boolean;

package/lib/tag/tag.less

@@ -6,18 +6,33 @@
 @tag-warning-color: #fe9c00;
 @tag-danger-color: @danger-color;
 
-@tag-success-bg-color: rgba(20,165,104,.1);
-@tag-info-bg-color: rgba(58,132,255,.1);
-@tag-warning-bg-color: rgba(254,156,0,.1);
-@tag-danger-bg-color: rgba(234,53,54,.1);
-@tag-filled-bg-color: #979ba5;
+@tag-success-bg-color: #E4FAF0;
+@tag-info-bg-color: #EDF4FF;
+@tag-warning-bg-color: #FFF1DB;
+@tag-danger-bg-color: #FEEBEA;
+@tag-stroke-bg-color: #FAFBFD;
+@tag-filled-bg-color: #979BA5;
+@tag-filled-success-bg-color: #14A568;
+@tag-filled-info-bg-color: #3A84FF;
+@tag-filled-warning-bg-color: #FE9C00;
+@tag-filled-danger-bg-color: #EA3536;
 
 @tag-success-border-color: rgba(20,165,104,.3);
 @tag-info-border-color: rgba(58,132,255,.3);
 @tag-warning-border-color: rgba(254,165,0,.3);
 @tag-danger-border-color: rgba(234,53,54,.3);
 
-@tag-checkable-hover-bg-color: rgba(151,155,165,.15);
+@tag-success-hover-bg-color: #C9F5E2;
+@tag-info-hover-bg-color: #E1ECFF;
+@tag-warning-hover-bg-color: #FFE8C3;
+@tag-danger-hover-bg-color: #FEDDDC;
+@tag-stroke-hover-bg-color: #F0F1F5;
+@tag-filled-hover-bg-color: #ACAFB6;
+@tag-filled-success-hover-bg-color: #42B685;
+@tag-filled-info-hover-bg-color: #609CFE;
+@tag-filled-warning-hover-bg-color: #FDAF32;
+@tag-filled-danger-hover-bg-color: #ED5C5D;
+@tag-checkable-hover-bg-color: #F0F1F5;
 
 @themeSelectors: success, info, warning, danger;
 
@@ -31,31 +46,44 @@
   line-height: 22px;
   color: @default-color;
   cursor: default;
-  background-color: rgba(151,155,165,.1);
-  border-color: rgba(217, 220, 230, .6);
+  background-color: #f0f1f5;
+  border-color: rgba(151,155,165,.3);
   box-sizing: border-box;
 
   each(@themeSelectors, {
     @color: 'tag-@{value}-color';
     @borderColor: 'tag-@{value}-border-color';
     @bgColor: 'tag-@{value}-bg-color';
+    @bgHoverColor: 'tag-@{value}-hover-bg-color';
+    @filledBgColor: 'tag-filled-@{value}-bg-color';
+    @filledBgHoverColor: 'tag-filled-@{value}-hover-bg-color';
     &.bk-tag-@{value} {
       color: @@color;
       border-color: @@borderColor;
       background-color: @@bgColor;
       &.bk-tag-filled {
-        background-color: @@color;
+        background-color: @@filledBgColor;
+        &:hover {
+          background-color: @@filledBgHoverColor;
+        }
+      }
+      &:hover:not(.bk-tag-filled) {
+        background-color: @@bgHoverColor;
       }
     }
   });
 
   &:hover {
-    opacity: .8;
+    background-color: #dcdee5;
   }
 
   &.bk-tag-filled {
     color: @tag-base-color;
     background-color: @tag-filled-bg-color;
+
+    &:hover {
+      background-color: @tag-filled-hover-bg-color;
+    }
   }
 
   &.bk-tag-stroke {
@@ -63,6 +91,14 @@
     line-height: 20px;
     border-style: solid;
     border-width: 1px;
+
+    &:not(.bk-tag-success, .bk-tag-warning, .bk-tag-info, .bk-tag-danger) {
+      background-color: @tag-stroke-bg-color;
+
+      &:hover {
+        background-color: @tag-stroke-hover-bg-color;
+      }
+    }
   }
 
   &.bk-tag-closable {