bkui-vue 0.0.2-table-refactor.8 → 0.0.3-beta.1

package/lib/checkbox/checkbox.css

@@ -13,7 +13,7 @@
   user-select: none;
 }
 .bk-checkbox ~ .bk-checkbox {
-  margin-left: 30px;
+  margin-left: 24px;
 }
 .bk-checkbox.is-checked .bk-checkbox-input {
   background: #3a84ff;
@@ -76,6 +76,12 @@
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
   background: #a3c5fd;
 }
+.bk-checkbox.is-prechecking {
+  position: relative;
+}
+.bk-checkbox.is-prechecking .bk-checkbox-input {
+  visibility: hidden;
+}
 .bk-checkbox-input {
   position: relative;
   display: inline-block;
@@ -102,3 +108,9 @@
   margin-left: 6px;
   vertical-align: middle;
 }
+.bk-checkbox-checking {
+  position: absolute;
+  font-size: 16px;
+  color: #3a84ff;
+  animation: loading 1s linear infinite;
+}

package/lib/checkbox/checkbox.d.ts

@@ -24,8 +24,8 @@ export declare const checkboxProps: {
     beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large"> & {
-        default: "default" | "small" | "large";
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
+        default: "default" | "small" | "large" | "huge";
     };
     immediateEmitChange: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -59,8 +59,8 @@ declare const _default: import("vue").DefineComponent<{
     beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large"> & {
-        default: "default" | "small" | "large";
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
+        default: "default" | "small" | "large" | "huge";
     };
     immediateEmitChange: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -71,16 +71,18 @@ declare const _default: import("vue").DefineComponent<{
     inputRef: import("vue").Ref<any>;
     isFocus: import("vue").Ref<boolean>;
     isChecked: import("vue").Ref<boolean>;
+    isPrechecking: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
     setChecked: (value?: boolean) => void;
     handleBlur: () => void;
     handleFocus: () => void;
     handleChange: (event: Event) => void;
-    size: "default" | "small" | "large";
+    size: "default" | "small" | "large" | "huge";
     resolveClassName: (cls: string) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': (value: any) => boolean;
-    change: (value: any) => boolean;
+    change: (value: any, _event?: Event) => boolean;
+    click: (_event: MouseEvent) => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     modelValue: import("vue-types").VueTypeDef<string | number | boolean>;
     label: import("vue-types").VueTypeDef<string | number | boolean>;
@@ -106,8 +108,8 @@ declare const _default: import("vue").DefineComponent<{
     beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large"> & {
-        default: "default" | "small" | "large";
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
+        default: "default" | "small" | "large" | "huge";
     };
     immediateEmitChange: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -115,11 +117,12 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: (value: any) => any;
+    onChange?: (value: any, _event?: Event) => any;
+    onClick?: (_event: MouseEvent) => any;
     "onUpdate:modelValue"?: (value: any) => any;
 }, {
     disabled: boolean;
-    size: "default" | "small" | "large";
+    size: "default" | "small" | "large" | "huge";
     trueLabel: string | number | boolean;
     falseLabel: string | number | boolean;
     checked: boolean;

package/lib/checkbox/checkbox.less

@@ -16,7 +16,7 @@
   user-select: none;
 
   & ~ .@{bk-prefix}-checkbox {
-    margin-left: 30px;
+    margin-left: 24px;
   }
 
   &.is-checked {
@@ -100,6 +100,13 @@
       }
     }
   }
+
+  &.is-prechecking {
+    position: relative;
+    .@{bk-prefix}-checkbox-input {
+      visibility: hidden;
+    }
+  }
 }
 
 .@{bk-prefix}-checkbox-input {
@@ -131,3 +138,10 @@
   margin-left: 6px;
   vertical-align: middle;
 }
+
+.@{bk-prefix}-checkbox-checking {
+  position: absolute;
+  font-size: 16px;
+  color: #3a84ff;
+  animation: loading 1s linear infinite;
+}

package/lib/checkbox/checkbox.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;
@@ -135,7 +139,7 @@
   user-select: none;
 }
 .bk-checkbox ~ .bk-checkbox {
-  margin-left: 30px;
+  margin-left: 24px;
 }
 .bk-checkbox.is-checked .bk-checkbox-input {
   background: var(--primary-color);
@@ -198,6 +202,12 @@
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
   background: var(--checkbox-disabled-checked-bg);
 }
+.bk-checkbox.is-prechecking {
+  position: relative;
+}
+.bk-checkbox.is-prechecking .bk-checkbox-input {
+  visibility: hidden;
+}
 .bk-checkbox-input {
   position: relative;
   display: inline-block;
@@ -224,3 +234,9 @@
   margin-left: 6px;
   vertical-align: middle;
 }
+.bk-checkbox-checking {
+  position: absolute;
+  font-size: 16px;
+  color: #3a84ff;
+  animation: loading 1s linear infinite;
+}

package/lib/checkbox/common.d.ts

@@ -8,6 +8,7 @@ export declare function useFocus(): [Ref<boolean>, {
 export declare const useCheckbox: () => {
     inputRef: Ref<any>;
     isChecked: Ref<boolean>;
+    isPrechecking: Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
     setChecked: (value?: boolean) => void;
     handleChange: (event: Event) => void;

package/lib/checkbox/index.d.ts

@@ -6,7 +6,7 @@ declare const BkCheckbox: {
         $data: {};
         $props: {
             disabled?: boolean;
-            size?: "default" | "small" | "large";
+            size?: "default" | "small" | "large" | "huge";
             trueLabel?: string | number | boolean;
             falseLabel?: string | number | boolean;
             checked?: boolean;
@@ -16,7 +16,8 @@ declare const BkCheckbox: {
             class?: unknown;
             readonly label?: string | number | boolean;
             style?: unknown;
-            onChange?: (value: any) => any;
+            onChange?: (value: any, _event?: Event) => any;
+            onClick?: (_event: MouseEvent) => any;
             ref?: import("vue").VNodeRef;
             key?: string | number | symbol;
             ref_for?: boolean;
@@ -73,7 +74,7 @@ declare const BkCheckbox: {
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}>;
-        $emit: ((event: "change", value: any) => void) & ((event: "update:modelValue", value: any) => void);
+        $emit: ((event: "change", value: any, _event?: Event) => void) & ((event: "click", _event: MouseEvent) => void) & ((event: "update:modelValue", value: any) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             modelValue: import("vue-types").VueTypeDef<string | number | boolean>;
@@ -100,8 +101,8 @@ declare const BkCheckbox: {
             beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
                 default: (...args: any[]) => any;
             };
-            size: import("vue-types").VueTypeDef<"default" | "small" | "large"> & {
-                default: "default" | "small" | "large";
+            size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
+                default: "default" | "small" | "large" | "huge";
             };
             immediateEmitChange: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
@@ -109,25 +110,28 @@ declare const BkCheckbox: {
                 default: boolean;
             };
         }>> & {
-            onChange?: (value: any) => any;
+            onChange?: (value: any, _event?: Event) => any;
+            onClick?: (_event: MouseEvent) => any;
             "onUpdate:modelValue"?: (value: any) => any;
         }, {
             inputRef: import("vue").Ref<any>;
             isFocus: import("vue").Ref<boolean>;
             isChecked: import("vue").Ref<boolean>;
+            isPrechecking: import("vue").Ref<boolean>;
             isDisabled: import("vue").ComputedRef<boolean>;
             setChecked: (value?: boolean) => void;
             handleBlur: () => void;
             handleFocus: () => void;
             handleChange: (event: Event) => void;
-            size: "default" | "small" | "large";
+            size: "default" | "small" | "large" | "huge";
             resolveClassName: (cls: string) => string;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'update:modelValue': (value: any) => boolean;
-            change: (value: any) => boolean;
+            change: (value: any, _event?: Event) => boolean;
+            click: (_event: MouseEvent) => true;
         }, string, {
             disabled: boolean;
-            size: "default" | "small" | "large";
+            size: "default" | "small" | "large" | "huge";
             trueLabel: string | number | boolean;
             falseLabel: string | number | boolean;
             checked: boolean;
@@ -179,8 +183,8 @@ declare const BkCheckbox: {
         beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
             default: (...args: any[]) => any;
         };
-        size: import("vue-types").VueTypeDef<"default" | "small" | "large"> & {
-            default: "default" | "small" | "large";
+        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
+            default: "default" | "small" | "large" | "huge";
         };
         immediateEmitChange: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
@@ -188,18 +192,20 @@ declare const BkCheckbox: {
             default: boolean;
         };
     }>> & {
-        onChange?: (value: any) => any;
+        onChange?: (value: any, _event?: Event) => any;
+        onClick?: (_event: MouseEvent) => any;
         "onUpdate:modelValue"?: (value: any) => any;
     } & import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<any>;
         isFocus: import("vue").Ref<boolean>;
         isChecked: import("vue").Ref<boolean>;
+        isPrechecking: import("vue").Ref<boolean>;
         isDisabled: import("vue").ComputedRef<boolean>;
         setChecked: (value?: boolean) => void;
         handleBlur: () => void;
         handleFocus: () => void;
         handleChange: (event: Event) => void;
-        size: "default" | "small" | "large";
+        size: "default" | "small" | "large" | "huge";
         resolveClassName: (cls: string) => string;
     }> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
@@ -230,8 +236,8 @@ declare const BkCheckbox: {
     beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large"> & {
-        default: "default" | "small" | "large";
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
+        default: "default" | "small" | "large" | "huge";
     };
     immediateEmitChange: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -239,25 +245,28 @@ declare const BkCheckbox: {
         default: boolean;
     };
 }>> & {
-    onChange?: (value: any) => any;
+    onChange?: (value: any, _event?: Event) => any;
+    onClick?: (_event: MouseEvent) => any;
     "onUpdate:modelValue"?: (value: any) => any;
 }, {
     inputRef: import("vue").Ref<any>;
     isFocus: import("vue").Ref<boolean>;
     isChecked: import("vue").Ref<boolean>;
+    isPrechecking: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
     setChecked: (value?: boolean) => void;
     handleBlur: () => void;
     handleFocus: () => void;
     handleChange: (event: Event) => void;
-    size: "default" | "small" | "large";
+    size: "default" | "small" | "large" | "huge";
     resolveClassName: (cls: string) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': (value: any) => boolean;
-    change: (value: any) => boolean;
+    change: (value: any, _event?: Event) => boolean;
+    click: (_event: MouseEvent) => true;
 }, string, {
     disabled: boolean;
-    size: "default" | "small" | "large";
+    size: "default" | "small" | "large" | "huge";
     trueLabel: string | number | boolean;
     falseLabel: string | number | boolean;
     checked: boolean;