bkui-vue 0.0.2-table-refactor.8 → 0.0.3-beta.1

package/lib/button/button.less

@@ -1,15 +1,15 @@
 @import '../styles/themes/themes.less';
 
-@btnHeight: 32px;
-@btnPadding: 5px 12px;
-@btnBorderRadius: 2px;
+@btnHeight: @component-size-base;
+@btnPadding: @component-size-base-padding;
+@btnBorderRadius: @border-radius-base;
 
-@smallBtnHeight: 26px;
-@smallBtnPadding: 3px 12px;
+@smallBtnHeight: @component-size-small;
+@smallBtnPadding: @component-size-small-padding;
 @smallBtnFontSize: @font-size-base;
 
-@largeBtnHeight: 38px;
-@largeBtnPadding: 8px 20px;
+@largeBtnHeight: @component-size-large;
+@largeBtnPadding: @component-size-large-padding;
 @largeBtnFontSize: @font-size-large;
 
 @themeSelectors: primary, warning, success, danger;
@@ -102,71 +102,76 @@
         color: @white-color;
       }
     }
+  })
 
-  }) each(@sizeSelectors, {
-  @sizeBtnHeight: '@{value}BtnHeight';
-  @sizeBtnPadding: '@{value}BtnPadding';
-  @sizeBtnFontSize: '@{value}BtnFontSize';
+    each(@sizeSelectors, {
+    @sizeBtnHeight: '@{value}BtnHeight';
+    @sizeBtnPadding: '@{value}BtnPadding';
+    @sizeBtnFontSize: '@{value}BtnFontSize';
+
+    &.@{bk-prefix}-button-@{value} {
+      height: @@sizeBtnHeight;
+      padding: @@sizeBtnPadding;
+      font-size: @@sizeBtnFontSize;
+    }
+  });
 
-  &.@{bk-prefix}-button-@{value} {
-    height: @@sizeBtnHeight;
-    padding: @@sizeBtnPadding;
-    font-size: @@sizeBtnFontSize;
+  .@{bk-prefix}-button-text {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
   }
-});
 
-.@{bk-prefix}-button-text {
-  display: inline-flex;
-  align-items: center;
-  line-height: 1;
-}
+  &.is-loading {
+    position: relative;
 
-&.is-loading {
-  position: relative;
+    .@{bk-prefix}-button-loading {
+      &:not(:last-child) {
+        position: absolute;
+      }
+    }
 
-  .@{bk-prefix}-button-loading {
-    &:not(:last-child) {
-      position: absolute;
+    .@{bk-prefix}-button-text {
+      visibility: hidden;
     }
   }
 
-  .@{bk-prefix}-button-text {
-    visibility: hidden;
+  &:hover {
+    border-color: @button-default-hover-border-color;
   }
-}
 
-&:hover {
-  border-color: @button-default-hover-border-color;
-}
+  &:active {
+    color: @primary-color;
+    border-color: @primary-color;
+  }
 
-&:active {
-  color: @primary-color;
-  border-color: @primary-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-text {
-  height: auto;
-  padding: 0;
-  font-size: inherit;
-  color: @default-color;
-  text-decoration: none;
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
+  &.is-disabled {
+    color: @disable-color;
+    cursor: not-allowed;
+    border-color: @disable-color;
 
-&.is-disabled {
-  color: @disable-color;
-  cursor: not-allowed;
-  border-color: @disable-color;
-}
+    &:not(.is-text) {
+      background-color: @disable-bg-color;
+    }
+  }
 
-// &.is-circle {
-//   padding: 8px;
-//   line-height: 1;
-//   border-radius: 50%;
-// }
+  // &.is-circle {
+  //   padding: 8px;
+  //   line-height: 1;
+  //   border-radius: 50%;
+  // }
 }
 
 
@@ -188,49 +193,49 @@
     }
   });
 
-.@{bk-prefix}-button {
-  height: @btnHeight;
-  margin: 0 0 0 -1px;
-  border-radius: 0;
+  .@{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;
-  }
+    &:not(.is-disabled) {
+      color: @default-color;
+      background-color: @white-color;
+      border-color: @light-gray;
+    }
 
-  &.is-disabled {
-    color: @light-gray;
-  }
+    &.is-disabled {
+      color: @light-gray;
+    }
 
-  &:first-child {
-    border-radius: @btnBorderRadius 0 0 @btnBorderRadius;
-  }
+    &:first-child {
+      border-radius: @btnBorderRadius 0 0 @btnBorderRadius;
+    }
 
-  &:last-child {
-    border-radius: 0 @btnBorderRadius @btnBorderRadius 0;
-  }
+    &:last-child {
+      border-radius: 0 @btnBorderRadius @btnBorderRadius 0;
+    }
 
-  &:only-child {
-    border-radius: @btnBorderRadius;
-  }
+    &: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;
-  }
+    &: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:not(.is-disabled) {
+      background-color: @button-selected-bg-color;
+    }
 
-  &.is-selected.is-disabled {
-    background-color: @button-disabled-selected-bg-color;
-  }
+    &.is-selected.is-disabled {
+      background-color: @button-disabled-selected-bg-color;
+    }
 
+  }
 }
-}

package/lib/button/button.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;
@@ -122,8 +126,8 @@
 }
 .bk-button {
   display: inline-flex;
-  height: 32px;
-  padding: 5px 12px;
+  height: var(--component-size-base);
+  padding: var(--component-size-base-padding);
   font-size: var(--font-size-medium);
   color: var(--default-color);
   text-decoration: none;
@@ -131,7 +135,7 @@
   cursor: pointer;
   background-color: var(--white-color);
   border: 1px solid var(--light-gray);
-  border-radius: 2px;
+  border-radius: var(--border-radius-base);
   outline: none;
   box-sizing: border-box;
   transition: background-color ease 0.3s;
@@ -344,13 +348,13 @@
   color: var(--white-color);
 }
 .bk-button.bk-button-small {
-  height: 26px;
-  padding: 3px 12px;
+  height: var(--component-size-small);
+  padding: var(--component-size-small-padding);
   font-size: var(--font-size-base);
 }
 .bk-button.bk-button-large {
-  height: 38px;
-  padding: 8px 20px;
+  height: var(--component-size-large);
+  padding: var(--component-size-large-padding);
   font-size: var(--font-size-large);
 }
 .bk-button .bk-button-text {
@@ -390,22 +394,25 @@
   cursor: not-allowed;
   border-color: var(--disable-color);
 }
+.bk-button.is-disabled:not(.is-text) {
+  background-color: var(--disable-bg-color);
+}
 .bk-button-group {
   display: inline-block;
   font-size: 0;
 }
 .bk-button-group.bk-button-group-small .bk-button {
-  height: 26px;
-  padding: 3px 12px;
+  height: var(--component-size-small);
+  padding: var(--component-size-small-padding);
   font-size: var(--font-size-base);
 }
 .bk-button-group.bk-button-group-large .bk-button {
-  height: 38px;
-  padding: 8px 20px;
+  height: var(--component-size-large);
+  padding: var(--component-size-large-padding);
   font-size: var(--font-size-large);
 }
 .bk-button-group .bk-button {
-  height: 32px;
+  height: var(--component-size-base);
   margin: 0 0 0 -1px;
   border-radius: 0;
 }
@@ -418,13 +425,13 @@
   color: var(--light-gray);
 }
 .bk-button-group .bk-button:first-child {
-  border-radius: 2px 0 0 2px;
+  border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
 }
 .bk-button-group .bk-button:last-child {
-  border-radius: 0 2px 2px 0;
+  border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
 }
 .bk-button-group .bk-button:only-child {
-  border-radius: 2px;
+  border-radius: var(--border-radius-base);
 }
 .bk-button-group .bk-button:hover:not(.is-disabled),
 .bk-button-group .bk-button.is-selected:not(.is-disabled) {

package/lib/button/index.d.ts

@@ -9,8 +9,8 @@ declare const BkButton: {
             disabled?: boolean;
             size?: "" | "small" | "large";
             icon?: string;
-            outline?: boolean;
             loading?: boolean;
+            outline?: boolean;
             iconRight?: string;
             loadingMode?: "default" | "spin";
             selected?: boolean;
@@ -125,8 +125,8 @@ declare const BkButton: {
             disabled: boolean;
             size: "" | "small" | "large";
             icon: string;
-            outline: boolean;
             loading: boolean;
+            outline: boolean;
             iconRight: string;
             loadingMode: "default" | "spin";
             selected: boolean;
@@ -245,17 +245,17 @@ declare const BkButton: {
     disabled: boolean;
     size: "" | "small" | "large";
     icon: string;
-    outline: boolean;
     loading: boolean;
+    outline: boolean;
     iconRight: string;
     loadingMode: "default" | "spin";
     selected: boolean;
     nativeType: "reset" | "submit" | "button";
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]> & Readonly<{
     ButtonGroup: import("vue").DefineComponent<{
-        size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     }>>, {}, {}>;
 }>;
 export default BkButton;