bkui-vue 0.0.1-beta.4 → 0.0.1-beta.400

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

@@ -9,6 +9,11 @@ declare const radioGroupProps: {
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 };
 export declare type RadioGroupProps = Readonly<ExtractPropTypes<typeof radioGroupProps>>;
 declare const _default: import("vue").DefineComponent<{
@@ -21,20 +26,32 @@ declare const _default: import("vue").DefineComponent<{
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    name?: unknown;
-    modelValue?: unknown;
-    disabled?: unknown;
-} & {
-    name: string;
-    disabled: boolean;
-} & {
-    modelValue?: string | number | boolean;
-}> & {
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    name: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    modelValue: import("vue-types").VueTypeDef<string | number | boolean>;
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     name: string;
     disabled: boolean;
+    withValidate: boolean;
 }>;
 export default _default;

package/lib/radio/radio.css

@@ -1,9 +1,12 @@
+.bk-radio-group {
+  display: inline-flex;
+  letter-spacing: normal;
+}
 .bk-radio {
-  display: inline-block;
-  margin-right: 30px;
+  display: inline-flex;
+  align-items: center;
   font-size: 12px;
   font-weight: normal;
-  line-height: 1;
   letter-spacing: normal;
   color: #63656e;
   white-space: nowrap;
@@ -11,51 +14,42 @@
   outline: none;
   user-select: none;
 }
-.bk-radio:last-child {
-  margin-right: 0;
+.bk-radio ~ .bk-radio {
+  margin-left: 30px;
 }
 .bk-radio.is-checked .bk-radio-input {
   padding: 3px;
-  color: #3a84ff;
-  background-color: #3a84ff;
-  border-color: #3a84ff;
+  color: #5594fa;
+  background-color: #5594fa;
+  border-color: #5594fa;
 }
 .bk-radio.is-disabled {
-  color: #dcdee5;
+  color: #c4c6cc;
   cursor: not-allowed;
 }
 .bk-radio.is-disabled.is-checked .bk-radio-input {
-  background-color: #dcdee5;
+  background-color: #fafbfd;
 }
 .bk-radio.is-disabled .bk-radio-input {
   cursor: not-allowed;
   border-color: #dcdee5;
 }
-.bk-radio.is-disabled .bk-radio-text {
+.bk-radio.is-disabled .bk-radio-label {
   cursor: not-allowed;
 }
-.bk-radio.is-focus .bk-radio-input {
-  border-color: #3a84ff;
-}
-.bk-radio .bk-radio-text {
-  font-size: 12px;
-  font-style: normal;
-  font-weight: normal;
-  color: #63656e;
-  vertical-align: middle;
-  cursor: pointer;
+.bk-radio.is-focused .bk-radio-input {
+  border-color: #5594fa;
 }
-.bk-radio .bk-radio-input {
+.bk-radio-input {
   position: relative;
   display: inline-block;
   width: 16px;
   height: 16px;
-  margin: 0 5px 0 0;
   color: #fff;
   vertical-align: middle;
   cursor: pointer;
   background-color: #fff;
-  border: 1px solid #63656e;
+  border: 1px solid #c4c6cc;
   border-radius: 50%;
   outline: none;
   visibility: visible;
@@ -63,13 +57,22 @@
   background-clip: content-box;
   appearance: none;
 }
+.bk-radio-input:hover {
+  border-color: #979ba5;
+}
+.bk-radio-label {
+  margin-left: 5px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  vertical-align: middle;
+  cursor: pointer;
+}
 .bk-radio-button {
   position: relative;
   z-index: 1;
-  display: inline-block;
-  font-size: 0;
+  display: inline-flex;
   font-weight: normal;
-  line-height: 1;
   letter-spacing: normal;
   color: #63656e;
   white-space: nowrap;
@@ -81,42 +84,43 @@
 .bk-radio-button:nth-child(n+2) {
   margin-left: -1px;
 }
-.bk-radio-button:first-child .bk-radio-button-text {
+.bk-radio-button:first-child .bk-radio-button-label {
   border-bottom-left-radius: 2px;
   border-top-left-radius: 2px;
 }
-.bk-radio-button:last-child .bk-radio-button-text {
+.bk-radio-button:last-child .bk-radio-button-label {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
 .bk-radio-button.is-checked {
   z-index: 2;
 }
-.bk-radio-button.is-checked .bk-radio-button-text {
-  color: #fff;
-  background: #3a84ff;
-  border-color: #3a84ff;
+.bk-radio-button.is-checked .bk-radio-button-label {
+  color: #5594fa;
+  background: #e1ecff;
+  border-color: #5594fa;
 }
 .bk-radio-button.is-disabled {
   z-index: 0;
-  color: #dcdee5;
+  color: #c4c6cc;
   cursor: not-allowed;
 }
-.bk-radio-button.is-disabled .bk-radio-button-text {
+.bk-radio-button.is-disabled .bk-radio-button-label {
   cursor: not-allowed;
-  background: #dcdee5;
+  background: #fafbfd;
   border-color: #dcdee5;
 }
-.bk-radio-button.is-focus .bk-radio-button-text {
-  border-color: #3a84ff;
+.bk-radio-button.is-focused .bk-radio-button-label {
+  border-color: #5594fa;
 }
-.bk-radio-button .bk-radio-button-input {
+.bk-radio-button-input {
   position: absolute;
   z-index: -1;
   outline: none;
   opacity: 0;
 }
-.bk-radio-button .bk-radio-button-text {
+.bk-radio-button-label {
+  width: 100%;
   height: 32px;
   padding: 0 18px;
   font-size: 12px;
@@ -127,6 +131,9 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  border: 1px solid #63656e;
+  border: 1px solid #c4c6cc;
   transition: all 0.3s;
 }
+.bk-radio-button-label:hover {
+  border-color: #979ba5;
+}

package/lib/radio/radio.d.ts

@@ -46,26 +46,36 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
-    isFocus: import("vue").Ref<boolean>;
-    realName: import("vue").ComputedRef<string>;
-    isCheck: import("vue").ComputedRef<boolean>;
+    isFocused: import("vue").Ref<boolean>;
+    isChecked: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
+    setChecked: (value?: boolean) => void;
     handleBlur: () => void;
     handleFocus: () => void;
-    handlerChange: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    name?: unknown;
-    label?: unknown;
-    modelValue?: unknown;
-    checked?: unknown;
-    disabled?: unknown;
-} & {
-    label: string | number | boolean;
-    name: string;
-    disabled: boolean;
-    modelValue: string | number | boolean;
-    checked: boolean;
-} & {}> & {
+    handleChange: (event: Event) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    name: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    label: import("vue-types").VueTypeDef<string | number | boolean> & {
+        required: true;
+    };
+    modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
+        default: string | number | boolean;
+    };
+    checked: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {

package/lib/radio/radio.less

@@ -1,166 +1,177 @@
-@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;
-  }
-}
+@import '../styles/themes/themes.less';
+
+.@{bk-prefix}-radio-group {
+  display: inline-flex;
+  letter-spacing: normal;
+}
+
+.@{bk-prefix}-radio {
+  display: inline-flex;
+  align-items: center;
+  font-size: @font-size-base;
+  font-weight: normal;
+  letter-spacing: normal;
+  color: @radio-font-color;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+
+  & ~ .@{bk-prefix}-radio {
+    margin-left: 30px;
+  }
+
+  &.is-checked {
+    .@{bk-prefix}-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-prefix}-radio-input {
+        background-color: @radio-distable-checked-bg;
+      }
+    }
+
+    .@{bk-prefix}-radio-input {
+      cursor: not-allowed;
+      border-color: @radio-disabled-border;
+    }
+
+    .@{bk-prefix}-radio-label {
+      cursor: not-allowed;
+    }
+  }
+
+  &.is-focused {
+    .@{bk-prefix}-radio-input {
+      border-color: @radio-active-color;
+    }
+  }
+}
+
+.@{bk-prefix}-radio-input {
+  position: relative;
+  display: inline-block;
+  width: @line-height-base;
+  height: @line-height-base;
+  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;
+  }
+}
+
+.@{bk-prefix}-radio-label {
+  margin-left: 5px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.@{bk-prefix}-radio-button {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  font-weight: normal;
+  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;
+  }
+
+  &:first-child {
+    .@{bk-prefix}-radio-button-label {
+      border-bottom-left-radius: @border-radius-base;
+      border-top-left-radius: @border-radius-base;
+    }
+  }
+
+  &:last-child {
+    .@{bk-prefix}-radio-button-label {
+      border-top-right-radius: @border-radius-base;
+      border-bottom-right-radius: @border-radius-base;
+    }
+  }
+
+  &.is-checked {
+    z-index: 2;
+
+    .@{bk-prefix}-radio-button-label {
+      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-prefix}-radio-button-label {
+      cursor: not-allowed;
+      background: @radio-distable-checked-bg;
+      border-color: @radio-disabled-border;
+    }
+  }
+
+  &.is-focused {
+    .@{bk-prefix}-radio-button-label {
+      border-color: @radio-active-color;
+    }
+  }
+}
+
+.@{bk-prefix}-radio-button-input {
+  position: absolute;
+  z-index: -1;
+  outline: none;
+  opacity: 0;
+}
+
+.@{bk-prefix}-radio-button-label {
+  width: 100%;
+  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;
+  }
+}
+