bkui-vue 0.0.2-table-refactor.9 → 0.0.3-beta.2

package/lib/radio/radio-group.d.ts

@@ -17,6 +17,7 @@ declare const radioGroupProps: {
     type: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 };
 export type RadioGroupProps = Readonly<ExtractPropTypes<typeof radioGroupProps>>;
 declare const _default: import("vue").DefineComponent<{
@@ -37,6 +38,7 @@ declare const _default: import("vue").DefineComponent<{
     type: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 }, {
     resolveClassName: (cls: string) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -60,6 +62,7 @@ declare const _default: import("vue").DefineComponent<{
     type: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
 }>> & {
     onChange?: (value: any) => any;
     "onUpdate:modelValue"?: (value: any) => any;

package/lib/radio/radio.css

@@ -5,7 +5,6 @@
 .bk-radio {
   display: inline-flex;
   align-items: center;
-  font-size: 12px;
   font-weight: normal;
   letter-spacing: normal;
   color: #63656e;
@@ -15,13 +14,16 @@
   user-select: none;
 }
 .bk-radio ~ .bk-radio {
-  margin-left: 30px;
+  margin-left: 24px;
+}
+.bk-radio.bk-radio-small .bk-radio-label {
+  font-size: 12px;
 }
 .bk-radio.is-checked .bk-radio-input {
   padding: 3px;
-  color: #5594fa;
-  background-color: #5594fa;
-  border-color: #5594fa;
+  color: #3a84ff;
+  background-color: #3a84ff;
+  border-color: #3a84ff;
 }
 .bk-radio.is-disabled {
   color: #c4c6cc;
@@ -39,7 +41,7 @@
   cursor: not-allowed;
 }
 .bk-radio.is-focused .bk-radio-input {
-  border-color: #5594fa;
+  border-color: #3a84ff;
 }
 .bk-radio-input {
   position: relative;
@@ -63,7 +65,7 @@
 }
 .bk-radio-label {
   margin-left: 6px;
-  font-size: 12px;
+  font-size: 14px;
   font-style: normal;
   font-weight: normal;
   vertical-align: middle;
@@ -82,7 +84,19 @@
   opacity: 1;
   user-select: none;
 }
-.bk-radio-button-input {
+.bk-radio-button.bk-radio-button-small .bk-radio-button-label {
+  height: 26px;
+  padding: 0 12px;
+  font-size: 12px;
+  line-height: 26px;
+}
+.bk-radio-button.bk-radio-button-large .bk-radio-button-label {
+  height: 40px;
+  padding: 0 16px;
+  font-size: 16px;
+  line-height: 40px;
+}
+.bk-radio-button .bk-radio-button-input {
   position: absolute;
   z-index: -1;
   width: 100%;
@@ -94,7 +108,7 @@
 }
 .bk-radio-button .bk-radio-button-label {
   width: 100%;
-  padding: 0 18px;
+  padding: 0 14px;
   font-size: 12px;
   font-style: normal;
   font-weight: normal;
@@ -109,7 +123,7 @@
   z-index: 2;
 }
 .bk-radio-button.is-checked .bk-radio-button-label {
-  color: #5594fa;
+  color: #3a84ff;
 }
 .bk-radio-button.is-disabled {
   z-index: 0;
@@ -178,7 +192,7 @@
 .bk-radio-tab .bk-radio-button.is-checked .bk-radio-button-label,
 .bk-radio-card .bk-radio-button.is-checked .bk-radio-button-label {
   background: #e1ecff;
-  border-color: #5594fa;
+  border-color: #3a84ff;
 }
 .bk-radio-tab .bk-radio-button.is-disabled .bk-radio-button-label,
 .bk-radio-card .bk-radio-button.is-disabled .bk-radio-button-label {
@@ -187,7 +201,7 @@
 }
 .bk-radio-tab .bk-radio-button.is-focused .bk-radio-button-label,
 .bk-radio-card .bk-radio-button.is-focused .bk-radio-button-label {
-  border-color: #5594fa;
+  border-color: #3a84ff;
 }
 .bk-radio-tab .bk-radio-button-label,
 .bk-radio-card .bk-radio-button-label {

package/lib/radio/radio.d.ts

@@ -46,6 +46,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
+    size: import("vue").Ref<string>;
     isFocused: import("vue").Ref<boolean>;
     isChecked: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;

package/lib/radio/radio.less

@@ -9,7 +9,6 @@
 .@{bk-prefix}-radio {
   display: inline-flex;
   align-items: center;
-  font-size: @font-size-base;
   font-weight: normal;
   letter-spacing: normal;
   color: @radio-font-color;
@@ -19,7 +18,12 @@
   user-select: none;
 
   & ~ .@{bk-prefix}-radio {
-    margin-left: 30px;
+    margin-left: 24px;
+  }
+  &.@{bk-prefix}-radio-small {
+    .@{bk-prefix}-radio-label {
+      font-size: @font-size-base;
+    }
   }
 
   &.is-checked {
@@ -83,7 +87,7 @@
 
 .@{bk-prefix}-radio-label {
   margin-left: 6px;
-  font-size: 12px;
+  font-size: @font-size-medium;
   font-style: normal;
   font-weight: normal;
   vertical-align: middle;
@@ -104,7 +108,37 @@
   opacity: 1;
   user-select: none;
 
-  &-input {
+  @sizeSelectors: small, large;
+
+  @btnHeight: @component-size-base;
+  @btnPadding: @component-size-base-padding;
+  @btnBorderRadius: @border-radius-base;
+
+  @smallBtnHeight: @component-size-small;
+  @smallBtnPadding: @component-size-small-padding;
+  @smallBtnFontSize: @font-size-base;
+
+  @largeBtnHeight: @component-size-large;
+  @largeBtnPadding: @component-size-large-padding;
+  @largeBtnFontSize: @font-size-large;
+
+  each(@sizeSelectors, {
+    @sizeBtnHeight: '@{value}BtnHeight';
+    @sizeBtnPadding: '@{value}BtnPadding';
+    @sizeBtnFontSize: '@{value}BtnFontSize';
+
+    &.@{bk-prefix}-radio-button-@{value}{
+      .@{bk-prefix}-radio-button-label{
+        height: @@sizeBtnHeight;
+        padding: @@sizeBtnPadding;
+        font-size: @@sizeBtnFontSize;
+        line-height: @@sizeBtnHeight;
+      }
+    }
+  });
+
+
+  .@{bk-prefix}-radio-button-input {
     position: absolute;
     z-index: -1;
     width: 100%;
@@ -117,8 +151,8 @@
 
   .@{bk-prefix}-radio-button-label {
     width: 100%;
-    padding: 0 18px;
-    font-size: 12px;
+    padding: @btnPadding;
+    font-size: @font-size-base;
     font-style: normal;
     font-weight: normal;
     line-height: @component-size-base;
@@ -149,7 +183,6 @@
   }
 }
 
-
 .@{bk-prefix}-radio-capsule {
   padding: 4px;
   background: #f0f1f5;
@@ -192,7 +225,8 @@
   }
 }
 
-.@{bk-prefix}-radio-tab,.@{bk-prefix}-radio-card {
+.@{bk-prefix}-radio-tab,
+.@{bk-prefix}-radio-card {
 
   .@{bk-prefix}-radio-button {
     overflow: hidden;

package/lib/radio/radio.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;
@@ -127,7 +131,6 @@
 .bk-radio {
   display: inline-flex;
   align-items: center;
-  font-size: var(--font-size-base);
   font-weight: normal;
   letter-spacing: normal;
   color: var(--radio-font-color);
@@ -137,7 +140,10 @@
   user-select: none;
 }
 .bk-radio ~ .bk-radio {
-  margin-left: 30px;
+  margin-left: 24px;
+}
+.bk-radio.bk-radio-small .bk-radio-label {
+  font-size: var(--font-size-base);
 }
 .bk-radio.is-checked .bk-radio-input {
   padding: 3px;
@@ -185,7 +191,7 @@
 }
 .bk-radio-label {
   margin-left: 6px;
-  font-size: 12px;
+  font-size: var(--font-size-medium);
   font-style: normal;
   font-weight: normal;
   vertical-align: middle;
@@ -204,7 +210,19 @@
   opacity: 1;
   user-select: none;
 }
-.bk-radio-button-input {
+.bk-radio-button.bk-radio-button-small .bk-radio-button-label {
+  height: var(--component-size-small);
+  padding: var(--component-size-small-padding);
+  font-size: var(--font-size-base);
+  line-height: var(--component-size-small);
+}
+.bk-radio-button.bk-radio-button-large .bk-radio-button-label {
+  height: var(--component-size-large);
+  padding: var(--component-size-large-padding);
+  font-size: var(--font-size-large);
+  line-height: var(--component-size-large);
+}
+.bk-radio-button .bk-radio-button-input {
   position: absolute;
   z-index: -1;
   width: 100%;
@@ -216,8 +234,8 @@
 }
 .bk-radio-button .bk-radio-button-label {
   width: 100%;
-  padding: 0 18px;
-  font-size: 12px;
+  padding: var(--component-size-base-padding);
+  font-size: var(--font-size-base);
   font-style: normal;
   font-weight: normal;
   line-height: var(--component-size-base);

package/lib/rate/index.d.ts

@@ -51,7 +51,7 @@ declare const BkRate: {
             }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
                 [key: string]: any;
             }>) => void)[];
-            readonly size?: "default" | "small" | "large";
+            readonly size?: "default" | "small" | "large" | "huge";
             "onUpdate:modelValue"?: (...args: any[]) => any;
             "onHover-change"?: (...args: any[]) => any;
         };
@@ -74,7 +74,7 @@ declare const BkRate: {
             } & {
                 default: number;
             };
-            size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+            size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
             editable: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             } & {
@@ -119,7 +119,7 @@ declare const BkRate: {
         } & {
             default: number;
         };
-        size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
         editable: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -144,7 +144,7 @@ declare const BkRate: {
     } & {
         default: number;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     editable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {