bkui-vue 0.0.1-beta.99 → 0.0.1

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,9 +21,9 @@ declare const radioButtonProps: {
     } & {
         default: boolean;
     };
-    size: typeof PropTypes.size;
+    size: import("vue-types").VueTypeDef<"small" | "large" | "default">;
 };
-export declare type RadioButtonProps = Readonly<ExtractPropTypes<typeof radioButtonProps>>;
+export type RadioButtonProps = Readonly<ExtractPropTypes<typeof radioButtonProps>>;
 declare const _default: import("vue").DefineComponent<{
     name: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -47,7 +46,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    size: typeof PropTypes.size;
+    size: import("vue-types").VueTypeDef<"small" | "large" | "default">;
 }, {
     isFocused: import("vue").Ref<boolean>;
     isChecked: import("vue").Ref<boolean>;
@@ -56,7 +55,11 @@ declare const _default: import("vue").DefineComponent<{
     handleBlur: () => void;
     handleFocus: () => 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<{
+    resolveClassName: (cls: string) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (value: RadioButtonProps['modelValue']) => boolean;
+    change: (value: RadioButtonProps['modelValue']) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     name: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -78,14 +81,14 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    size: typeof PropTypes.size;
+    size: import("vue-types").VueTypeDef<"small" | "large" | "default">;
 }>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onChange?: (value: string | number | boolean) => any;
+    "onUpdate:modelValue"?: (value: string | number | boolean) => any;
 }, {
     name: string;
     disabled: boolean;
     modelValue: string | number | boolean;
     checked: boolean;
-}>;
+}, {}>;
 export default _default;

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

@@ -9,8 +9,16 @@ 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>>;
+export type RadioGroupProps = Readonly<ExtractPropTypes<typeof radioGroupProps>>;
 declare const _default: import("vue").DefineComponent<{
     name: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -21,7 +29,20 @@ 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<ExtractPropTypes<{
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    type: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+}, {
+    resolveClassName: (cls: string) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (value: RadioGroupProps['modelValue']) => boolean;
+    change: (value: RadioGroupProps['modelValue']) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     name: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -31,11 +52,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;
+    onChange?: (value: string | number | boolean) => any;
+    "onUpdate:modelValue"?: (value: string | number | boolean) => any;
 }, {
+    type: string;
     name: string;
     disabled: boolean;
-}>;
+    withValidate: boolean;
+}, {}>;
 export default _default;

package/lib/radio/radio.css

@@ -1,10 +1,12 @@
+.bk-radio-group {
+  display: inline-flex;
+  letter-spacing: normal;
+}
 .bk-radio {
   display: inline-flex;
   align-items: center;
-  margin-right: 30px;
   font-size: 12px;
   font-weight: normal;
-  line-height: 1;
   letter-spacing: normal;
   color: #63656e;
   white-space: nowrap;
@@ -12,50 +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: #c4c6cc;
   cursor: not-allowed;
 }
 .bk-radio.is-disabled.is-checked .bk-radio-input {
-  background-color: #fafbfd;
+  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-focused .bk-radio-input {
-  border-color: #3a84ff;
+  border-color: #5594fa;
 }
-.bk-radio .bk-radio-text {
-  font-size: 12px;
-  font-style: normal;
-  font-weight: normal;
-  vertical-align: middle;
-  cursor: pointer;
-}
-.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 #979ba5;
+  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-focused .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 #979ba5;
+  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

@@ -22,7 +22,7 @@ declare const radioProps: {
         default: boolean;
     };
 };
-export declare type RadioProps = Readonly<ExtractPropTypes<typeof radioProps>>;
+export type RadioProps = Readonly<ExtractPropTypes<typeof radioProps>>;
 declare const _default: import("vue").DefineComponent<{
     name: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -53,7 +53,11 @@ declare const _default: import("vue").DefineComponent<{
     handleBlur: () => void;
     handleFocus: () => 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<{
+    resolveClassName: (cls: string) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (value: RadioProps['modelValue']) => boolean;
+    change: (value: RadioProps['modelValue']) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     name: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -76,12 +80,12 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onChange?: (value: string | number | boolean) => any;
+    "onUpdate:modelValue"?: (value: string | number | boolean) => any;
 }, {
     name: string;
     disabled: boolean;
     modelValue: string | number | boolean;
     checked: boolean;
-}>;
+}, {}>;
 export default _default;