bkui-vue 0.0.1-beta.18 → 0.0.1-beta.180

package/lib/radio/radio.less

@@ -1,173 +1,182 @@
-@import '../styles/themes/themes.less';
-
-.bk-radio {
-  display: inline-block;
-  margin-right: 30px;
-  font-size: @font-size-base;
-  font-weight: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  color: @default-color;
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &.is-checked {
-    .bk-radio-input {
-      padding: 3px;
-      color: @primary-color;
-      background-color: @primary-color;
-      border-color: @primary-color;
-    }
-  }
-
-  &.is-disabled {
-    color: @disable-color;
-    cursor: not-allowed;
-
-    &.is-checked {
-      .bk-radio-input {
-        background-color: @disable-color;
-      }
-    }
-
-    .bk-radio-input {
-      cursor: not-allowed;
-      border-color: @disable-color;
-    }
-
-    .bk-radio-text {
-      cursor: not-allowed;
-    }
-  }
-
-  &.is-focus {
-    .bk-radio-input {
-      border-color: @primary-color;
-    }
-  }
-
-  .bk-radio-text {
-    font-size: 12px;
-    font-style: normal;
-    font-weight: normal;
-    color: @default-color;
-    vertical-align: middle;
-    cursor: pointer;
-  }
-
-  .bk-radio-input {
-    position: relative;
-    display: inline-block;
-    width: @line-height-base;
-    height: @line-height-base;
-    margin: 0 5px 0 0;
-    color: #fff;
-    vertical-align: middle;
-    cursor: pointer;
-    background-color: #fff;
-    border: @border-width-base @border-style-base @default-color;
-    border-radius: 50%;
-    outline: none;
-    visibility: visible;
-    transition: all .3s;
-    background-clip: content-box;
-    appearance: none;
-  }
-}
-
-.bk-radio-button {
-  position: relative;
-  z-index: 1;
-  display: inline-block;
-  font-size: 0;
-  font-weight: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  color: @default-color;
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  opacity: 1;
-  user-select: none;
-
-  &:nth-child(n+2) {
-    margin-left: -1px;
-  }
-
-  &:first-child {
-    .bk-radio-button-text {
-      border-bottom-left-radius: @border-radius-base;
-      border-top-left-radius: @border-radius-base;
-    }
-  }
-
-  &:last-child {
-    .bk-radio-button-text {
-      border-top-right-radius: @border-radius-base;
-      border-bottom-right-radius: @border-radius-base;
-    }
-  }
-
-  &.is-checked {
-    z-index: 2;
-
-    .bk-radio-button-text {
-      color: #fff;
-      background: @primary-color;
-      border-color: @primary-color;
-    }
-  }
-
-  &.is-disabled {
-    z-index: 0;
-    color: @disable-color;
-    cursor: not-allowed;
-
-    .bk-radio-button-text {
-      cursor: not-allowed;
-      background: @disable-color;
-      border-color: @disable-color;
-    }
-  }
-
-  &.is-focus {
-    .bk-radio-button-text {
-      border-color: @primary-color;
-    }
-  }
-
-  .bk-radio-button-input {
-    position: absolute;
-    z-index: -1;
-    outline: none;
-    opacity: 0;
-  }
-
-  .bk-radio-button-text {
-    height: @component-size-base;
-    padding: 0 18px;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: normal;
-    line-height: @component-size-base;
-    color: @default-color;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-    border: @border-width-base @border-style-base @default-color;
-    transition: all .3s;
-  }
-}
-
-.bk-radio-group {
-  display: inline-block;
-  font-size: 0;
-  line-height: 0;
-  letter-spacing: normal;
+@import '../styles/themes/themes.less';
+
+.bk-radio {
+  display: inline-flex;
+  align-items: center;
+  font-size: @font-size-base;
+  font-weight: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  color: @radio-font-color;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+
+  &~.bk-radio {
+    margin-left: 30px;
+  }
+
+  .bk-radio-text {
+    font-size: 12px;
+    font-style: normal;
+    font-weight: normal;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .bk-radio-input {
+    position: relative;
+    display: inline-block;
+    width: @line-height-base;
+    height: @line-height-base;
+    margin: 0 5px 0 0;
+    color: #fff;
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: #fff;
+    border: @border-width-base @border-style-base @light-gray;
+    border-radius: 50%;
+    outline: none;
+    visibility: visible;
+    transition: all .3s;
+    background-clip: content-box;
+    appearance: none;
+
+    &:hover {
+      border-color: @radio-hover-border-color;
+    }
+  }
+
+  &.is-checked {
+    .bk-radio-input {
+      padding: 3px;
+      color: @radio-active-color;
+      background-color: @radio-active-color;
+      border-color: @radio-active-color;
+    }
+  }
+
+  &.is-disabled {
+    color: @radio-disabled-font-color;
+    cursor: not-allowed;
+
+    &.is-checked {
+      .bk-radio-input {
+        background-color: @radio-distable-checked-bg;
+      }
+    }
+
+    .bk-radio-input {
+      cursor: not-allowed;
+      border-color: @radio-disabled-border;
+    }
+
+    .bk-radio-text {
+      cursor: not-allowed;
+    }
+  }
+
+  &.is-focused {
+    .bk-radio-input {
+      border-color: @radio-active-color;
+    }
+  }
+}
+
+.bk-radio-button {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  font-size: 0;
+  font-weight: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  color: @radio-font-color;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  opacity: 1;
+  user-select: none;
+
+  &:nth-child(n+2) {
+    margin-left: -1px;
+  }
+
+  .bk-radio-button-input {
+    position: absolute;
+    z-index: -1;
+    outline: none;
+    opacity: 0;
+  }
+
+  .bk-radio-button-text {
+    height: @component-size-base;
+    padding: 0 18px;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: normal;
+    line-height: @component-size-base;
+    color: @default-color;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    border: @border-width-base @border-style-base @light-gray;
+    transition: all .3s;
+
+    &:hover {
+      border-color: @radio-hover-border-color;
+    }
+  }
+
+  &:first-child {
+    .bk-radio-button-text {
+      border-bottom-left-radius: @border-radius-base;
+      border-top-left-radius: @border-radius-base;
+    }
+  }
+
+  &:last-child {
+    .bk-radio-button-text {
+      border-top-right-radius: @border-radius-base;
+      border-bottom-right-radius: @border-radius-base;
+    }
+  }
+
+  &.is-checked {
+    z-index: 2;
+
+    .bk-radio-button-text {
+      color: @radio-active-color;
+      background: @radio-button-checked-bg;
+      border-color: @radio-active-color;
+    }
+  }
+
+  &.is-disabled {
+    z-index: 0;
+    color: @radio-disabled-font-color;
+    cursor: not-allowed;
+
+    .bk-radio-button-text {
+      cursor: not-allowed;
+      background: currentColor;
+      border-color: currentColor;
+    }
+  }
+
+  &.is-focused {
+    .bk-radio-button-text {
+      border-color: @radio-active-color;
+    }
+  }
+
+  
+}
+
+.bk-radio-group {
+  display: inline-block;
+  font-size: 0;
+  line-height: 0;
+  letter-spacing: normal;
 }

package/lib/radio/radio.variable.css

@@ -9,6 +9,7 @@
   --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
+  --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
@@ -18,7 +19,7 @@
   --line-height-large: 18px;
   --component-size-small: 26px;
   --component-size-base: 32px;
-  --component-size-large: 38px;
+  --component-size-large: 40px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -31,8 +32,9 @@
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
   --input-horizontal-padding: 10px;
-  --input-block-color: #f4f6fa;
-  --input-icon-size: var(--font-size-large);
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
   --input-maxlength-color: #979ba5;
   --button-primary-hover-color: #5594fa;
   --button-danger-hover-color: #ff5656;
@@ -43,6 +45,15 @@
   --button-danger-active-color: #db2626;
   --button-success-active-color: #1ab943;
   --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6c;
+  --radio-distable-checked-bg: #fafbfd;
+  --radio-button-checked-bg: #e1ecff;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -63,12 +74,16 @@
   --message-color: var(--default-color);
   --message-primary-bg-color: #f0f8ff;
   --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
   --message-warning-bg-color: #fff4e2;
   --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
   --message-success-bg-color: #f2fff4;
   --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
   --message-danger-bg-color: #ffeded;
   --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
   --slider-default-bg: #dcdee5;
   --slider-disable-bar-bg: #979ba5;
   --menu-bg-color: #182132;
@@ -90,51 +105,32 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
+  --cascader-panel-disabled-bg: #fff;
 }
 .bk-radio {
-  display: inline-block;
-  margin-right: 30px;
+  display: inline-flex;
+  align-items: center;
   font-size: var(--font-size-base);
   font-weight: normal;
   line-height: 1;
   letter-spacing: normal;
-  color: var(--default-color);
+  color: var(--radio-font-color);
   white-space: nowrap;
   cursor: pointer;
   outline: none;
   user-select: none;
 }
-.bk-radio:last-child {
-  margin-right: 0;
-}
-.bk-radio.is-checked .bk-radio-input {
-  padding: 3px;
-  color: var(--primary-color);
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-.bk-radio.is-disabled {
-  color: var(--disable-color);
-  cursor: not-allowed;
-}
-.bk-radio.is-disabled.is-checked .bk-radio-input {
-  background-color: var(--disable-color);
-}
-.bk-radio.is-disabled .bk-radio-input {
-  cursor: not-allowed;
-  border-color: var(--disable-color);
-}
-.bk-radio.is-disabled .bk-radio-text {
-  cursor: not-allowed;
-}
-.bk-radio.is-focus .bk-radio-input {
-  border-color: var(--primary-color);
+.bk-radio ~ .bk-radio {
+  margin-left: 30px;
 }
 .bk-radio .bk-radio-text {
   font-size: 12px;
   font-style: normal;
   font-weight: normal;
-  color: var(--default-color);
   vertical-align: middle;
   cursor: pointer;
 }
@@ -148,7 +144,7 @@
   vertical-align: middle;
   cursor: pointer;
   background-color: #fff;
-  border: var(--border-width-base) var(--border-style-base) var(--default-color);
+  border: var(--border-width-base) var(--border-style-base) var(--light-gray);
   border-radius: 50%;
   outline: none;
   visibility: visible;
@@ -156,6 +152,32 @@
   background-clip: content-box;
   appearance: none;
 }
+.bk-radio .bk-radio-input:hover {
+  border-color: var(--radio-hover-border-color);
+}
+.bk-radio.is-checked .bk-radio-input {
+  padding: 3px;
+  color: var(--radio-active-color);
+  background-color: var(--radio-active-color);
+  border-color: var(--radio-active-color);
+}
+.bk-radio.is-disabled {
+  color: var(--radio-disabled-font-color);
+  cursor: not-allowed;
+}
+.bk-radio.is-disabled.is-checked .bk-radio-input {
+  background-color: var(--radio-distable-checked-bg);
+}
+.bk-radio.is-disabled .bk-radio-input {
+  cursor: not-allowed;
+  border-color: var(--radio-disabled-border);
+}
+.bk-radio.is-disabled .bk-radio-text {
+  cursor: not-allowed;
+}
+.bk-radio.is-focused .bk-radio-input {
+  border-color: var(--radio-active-color);
+}
 .bk-radio-button {
   position: relative;
   z-index: 1;
@@ -164,7 +186,7 @@
   font-weight: normal;
   line-height: 1;
   letter-spacing: normal;
-  color: var(--default-color);
+  color: var(--radio-font-color);
   white-space: nowrap;
   cursor: pointer;
   outline: none;
@@ -174,6 +196,29 @@
 .bk-radio-button:nth-child(n+2) {
   margin-left: -1px;
 }
+.bk-radio-button .bk-radio-button-input {
+  position: absolute;
+  z-index: -1;
+  outline: none;
+  opacity: 0;
+}
+.bk-radio-button .bk-radio-button-text {
+  height: var(--component-size-base);
+  padding: 0 18px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: var(--component-size-base);
+  color: var(--default-color);
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: var(--border-width-base) var(--border-style-base) var(--light-gray);
+  transition: all 0.3s;
+}
+.bk-radio-button .bk-radio-button-text:hover {
+  border-color: var(--radio-hover-border-color);
+}
 .bk-radio-button:first-child .bk-radio-button-text {
   border-bottom-left-radius: var(--border-radius-base);
   border-top-left-radius: var(--border-radius-base);
@@ -186,42 +231,22 @@
   z-index: 2;
 }
 .bk-radio-button.is-checked .bk-radio-button-text {
-  color: #fff;
-  background: var(--primary-color);
-  border-color: var(--primary-color);
+  color: var(--radio-active-color);
+  background: var(--radio-button-checked-bg);
+  border-color: var(--radio-active-color);
 }
 .bk-radio-button.is-disabled {
   z-index: 0;
-  color: var(--disable-color);
+  color: var(--radio-disabled-font-color);
   cursor: not-allowed;
 }
 .bk-radio-button.is-disabled .bk-radio-button-text {
   cursor: not-allowed;
-  background: var(--disable-color);
-  border-color: var(--disable-color);
-}
-.bk-radio-button.is-focus .bk-radio-button-text {
-  border-color: var(--primary-color);
+  background: currentColor;
+  border-color: currentColor;
 }
-.bk-radio-button .bk-radio-button-input {
-  position: absolute;
-  z-index: -1;
-  outline: none;
-  opacity: 0;
-}
-.bk-radio-button .bk-radio-button-text {
-  height: var(--component-size-base);
-  padding: 0 18px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: var(--component-size-base);
-  color: var(--default-color);
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  border: var(--border-width-base) var(--border-style-base) var(--default-color);
-  transition: all 0.3s;
+.bk-radio-button.is-focused .bk-radio-button-text {
+  border-color: var(--radio-active-color);
 }
 .bk-radio-group {
   display: inline-block;

package/lib/radio/type.d.ts

@@ -1,9 +1,14 @@
-import type { RadioGroupProps } from './radio-group';
+import type { ComponentPublicInstance } from 'vue';
 import type { RadioProps } from './radio';
+import type { RadioGroupProps } from './radio-group';
+export declare type IRadioInstance = ComponentPublicInstance<RadioProps, {
+    isChecked: boolean;
+    label: string;
+    setChecked: (value: boolean) => void;
+}>;
 export interface IRadioGroupContext {
     props: RadioGroupProps;
-    state: {
-        localValue: RadioProps['label'];
-    };
-    handleChange: (value: RadioProps['label']) => void;
+    register: (radioInstance: IRadioInstance) => void;
+    unregister: (radioInstance: IRadioInstance) => void;
+    handleChange: (radioInstance: IRadioInstance) => void;
 }