bkui-vue 2.0.1-beta.9 → 2.0.1-beta.91

package/lib/button/button.d.ts

@@ -24,10 +24,10 @@
  * IN THE SOFTWARE.
  */
 import { ExtractPropTypes, PropType } from 'vue';
-type IButtonNativeType = PropType<'button' | 'submit' | 'reset'>;
+type IButtonNativeType = PropType<'button' | 'reset' | 'submit'>;
 declare const buttonProps: {
-    theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
-    hoverTheme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+    theme: import("vue-types").VueTypeDef<"danger" | "primary" | "success" | "warning">;
+    hoverTheme: import("vue-types").VueTypeDef<"danger" | "primary" | "success" | "warning">;
     size: {
         type: PropType<"" | "small" | "large">;
         default: "";
@@ -67,8 +67,8 @@ declare const buttonProps: {
 };
 export type ButtonPropTypes = ExtractPropTypes<typeof buttonProps>;
 declare const _default: import("vue").DefineComponent<{
-    theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
-    hoverTheme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+    theme: import("vue-types").VueTypeDef<"danger" | "primary" | "success" | "warning">;
+    hoverTheme: import("vue-types").VueTypeDef<"danger" | "primary" | "success" | "warning">;
     size: {
         type: PropType<"" | "small" | "large">;
         default: "";
@@ -106,8 +106,8 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover")[], "click" | "mouseover", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
-    theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
-    hoverTheme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+    theme: import("vue-types").VueTypeDef<"danger" | "primary" | "success" | "warning">;
+    hoverTheme: import("vue-types").VueTypeDef<"danger" | "primary" | "success" | "warning">;
     size: {
         type: PropType<"" | "small" | "large">;
         default: "";
@@ -152,8 +152,8 @@ declare const _default: import("vue").DefineComponent<{
     text: boolean;
     size: "" | "small" | "large";
     disabled: boolean;
-    icon: string;
     loading: boolean;
+    icon: string;
     iconRight: string;
     loadingMode: "default" | "spin";
     outline: boolean;

package/lib/button/button.less

@@ -34,77 +34,7 @@
   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;
-      border-color: @@color;
-
-      &:hover {
-        background-color: @@hoverColor;
-        border-color: @@hoverColor;
-      }
-
-      &:active {
-        background-color: @@activeColor;
-        border-color: @@activeColor;
-        color: @white-color;
-      }
-
-      &.is-outline {
-        color: @@color;
-        border-color: @@color;
-        background-color: @white-color;
-
-        &:hover {
-          background-color: @@hoverColor;
-          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;
-      }
-    }
-
-    &.@{bk-prefix}-button-hover-@{value} {
-      &:hover {
-        background-color: @@hoverColor;
-        border-color: @@hoverColor;
-        color: @white-color;
-      }
-    }
-  })
-
-    each(@sizeSelectors, {
+  each(@sizeSelectors, {
     @sizeBtnHeight: '@{value}BtnHeight';
     @sizeBtnPadding: '@{value}BtnPadding';
     @sizeBtnFontSize: '@{value}BtnFontSize';
@@ -239,3 +169,76 @@
 
   }
 }
+
+.@{bk-prefix}-button,
+.@{bk-prefix}-button-group .is-selected:not(.is-disabled) {
+  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;
+      border-color: @@color;
+
+      &:hover {
+        background-color: @@hoverColor;
+        border-color: @@hoverColor;
+      }
+
+      &:active {
+        background-color: @@activeColor;
+        border-color: @@activeColor;
+        color: @white-color;
+      }
+
+      &.is-outline {
+        color: @@color;
+        border-color: @@color;
+        background-color: @white-color;
+
+        &:hover {
+          background-color: @@hoverColor;
+          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;
+      }
+    }
+
+    &.@{bk-prefix}-button-hover-@{value} {
+      &:hover {
+        background-color: @@hoverColor;
+        border-color: @@hoverColor;
+        color: @white-color;
+      }
+    }
+  })
+}