bkui-vue 0.0.1-beta.45 → 0.0.1-beta.451

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

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes } from 'vue';
-import { PropTypes } from '@bkui-vue/shared';
 declare const radioButtonProps: {
     name: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -22,7 +21,7 @@ declare const radioButtonProps: {
     } & {
         default: boolean;
     };
-    size: typeof PropTypes.size;
+    size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
 };
 export declare type RadioButtonProps = Readonly<ExtractPropTypes<typeof radioButtonProps>>;
 declare const _default: import("vue").DefineComponent<{
@@ -47,15 +46,15 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    size: typeof PropTypes.size;
+    size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
 }, {
-    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;
+    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;
@@ -78,7 +77,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    size: typeof PropTypes.size;
+    size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
 }>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;

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

@@ -9,6 +9,14 @@ declare const radioGroupProps: {
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    type: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
 };
 export declare type RadioGroupProps = Readonly<ExtractPropTypes<typeof radioGroupProps>>;
 declare const _default: import("vue").DefineComponent<{
@@ -21,6 +29,14 @@ declare const _default: import("vue").DefineComponent<{
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    type: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
 }, {}, 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;
@@ -31,11 +47,21 @@ declare const _default: import("vue").DefineComponent<{
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    type: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
 }>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     name: string;
+    type: 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,43 @@
   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: #a3c5fd;
+  border-color: #a3c5fd;
 }
 .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-focusd .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 +58,22 @@
   background-clip: content-box;
   appearance: none;
 }
+.bk-radio-input:hover {
+  border-color: #979ba5;
+}
+.bk-radio-label {
+  margin-left: 6px;
+  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;
@@ -78,61 +82,128 @@
   opacity: 1;
   user-select: none;
 }
-.bk-radio-button:nth-child(n+2) {
-  margin-left: -1px;
-}
-.bk-radio-button:first-child .bk-radio-button-text {
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
+.bk-radio-button-input {
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  opacity: 0;
 }
-.bk-radio-button:last-child .bk-radio-button-text {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
+.bk-radio-button .bk-radio-button-label {
+  width: 100%;
+  padding: 0 18px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 32px;
+  color: #63656e;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 .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;
 }
 .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;
-  border-color: #dcdee5;
 }
-.bk-radio-button.is-focusd .bk-radio-button-text {
-  border-color: #3a84ff;
+.bk-radio-capsule {
+  padding: 4px;
+  background: #f0f1f5;
+  border-radius: 2px;
+}
+.bk-radio-capsule .bk-radio-button {
+  border-radius: 2px;
 }
-.bk-radio-button .bk-radio-button-input {
+.bk-radio-capsule .bk-radio-button:before {
   position: absolute;
-  z-index: -1;
-  outline: none;
-  opacity: 0;
+  top: 50%;
+  right: -1px;
+  display: block;
+  width: 1px;
+  height: 12px;
+  margin-top: -6px;
+  background: #dcdee5;
+  content: '';
+}
+.bk-radio-capsule .bk-radio-button:last-of-type::before {
+  display: none;
+}
+.bk-radio-capsule .bk-radio-button-label {
+  position: relative;
+  height: 24px;
+  padding: 0 12px;
+  line-height: 24px;
+}
+.bk-radio-capsule .is-checked {
+  background: #fff;
+}
+.bk-radio-capsule .is-checked:before {
+  display: none;
+}
+.bk-radio-tab .bk-radio-button,
+.bk-radio-card .bk-radio-button {
+  overflow: hidden;
+}
+.bk-radio-tab .bk-radio-button:nth-child(n+2),
+.bk-radio-card .bk-radio-button:nth-child(n+2) {
+  margin-left: -1px;
+}
+.bk-radio-tab .bk-radio-button:first-child .bk-radio-button-label,
+.bk-radio-card .bk-radio-button:first-child .bk-radio-button-label {
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+}
+.bk-radio-tab .bk-radio-button:last-child .bk-radio-button-label,
+.bk-radio-card .bk-radio-button:last-child .bk-radio-button-label {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
 }
-.bk-radio-button .bk-radio-button-text {
+.bk-radio-tab .bk-radio-button.is-checked,
+.bk-radio-card .bk-radio-button.is-checked {
+  z-index: 2;
+}
+.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;
+}
+.bk-radio-tab .bk-radio-button.is-disabled .bk-radio-button-label,
+.bk-radio-card .bk-radio-button.is-disabled .bk-radio-button-label {
+  background: #fafbfd;
+  border-color: #dcdee5;
+}
+.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;
+}
+.bk-radio-tab .bk-radio-button-label,
+.bk-radio-card .bk-radio-button-label {
   height: 32px;
-  padding: 0 18px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 32px;
-  color: #63656e;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid #63656e;
+  border: 1px solid #c4c6cc;
   transition: all 0.3s;
 }
-.bk-radio-group {
-  display: inline-block;
-  font-size: 0;
-  line-height: 0;
-  letter-spacing: normal;
+.bk-radio-tab .bk-radio-button-label:hover,
+.bk-radio-card .bk-radio-button-label:hover {
+  border-color: #979ba5;
+}
+.bk-radio-card {
+  display: flex;
+  width: 100%;
+}
+.bk-radio-card .bk-radio-button {
+  flex: 1;
+  display: block;
 }

package/lib/radio/radio.d.ts

@@ -46,13 +46,13 @@ 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;
+    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;