bkui-vue 0.0.1-beta.13 → 0.0.1-beta.130

package/lib/button/button.variable.css

@@ -1,5 +1,6 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
@@ -8,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;
@@ -17,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;
@@ -30,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;
@@ -42,6 +45,8 @@
   --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;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -83,18 +88,26 @@
   --date-picker-disabled-bg: #fafbfd;
   --date-picker-dropdown-mb: 4px;
   --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --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: #eaf3ff;
+  --cascader-panel-active: #f4f6fa;
+  --cascader-panel-disabled-bg: #fff;
 }
 .bk-button {
-  display: inline-block;
+  display: inline-flex;
   height: 32px;
-  min-width: 64px;
-  padding: 0 15px;
+  padding: 5px 12px;
   font-size: var(--font-size-medium);
   color: var(--default-color);
-  text-align: center;
   text-decoration: none;
   white-space: nowrap;
-  vertical-align: middle;
   cursor: pointer;
   background-color: var(--white-color);
   border: 1px solid var(--light-gray);
@@ -103,6 +116,8 @@
   box-sizing: border-box;
   transition: background-color ease 0.3s;
   appearance: none;
+  align-items: center;
+  justify-content: center;
 }
 .bk-button.bk-button-primary {
   background-color: var(--primary-color);
@@ -116,10 +131,7 @@
 .bk-button.bk-button-primary:active {
   background-color: var(--button-primary-active-color);
   border-color: var(--button-primary-active-color);
-}
-.bk-button.bk-button-primary.is-disabled {
-  background-color: var(--disable-color);
-  border-color: var(--disable-color);
+  color: var(--white-color);
 }
 .bk-button.bk-button-primary.is-outline {
   color: var(--primary-color);
@@ -133,12 +145,21 @@
 }
 .bk-button.bk-button-primary.is-text {
   color: var(--primary-color);
-  background: none;
+  background-color: transparent;
   border: none;
 }
-.bk-button.bk-button-primary.is-text:hover {
+.bk-button.bk-button-primary.is-text:not(.is-disabled):hover {
   color: var(--button-primary-hover-color);
 }
+.bk-button.bk-button-primary.is-disabled {
+  color: var(--disable-color);
+  cursor: not-allowed;
+}
+.bk-button.bk-button-primary.is-disabled:not(.is-text) {
+  background-color: var(--disable-color);
+  color: var(--white-color);
+  border-color: var(--disable-color);
+}
 .bk-button.bk-button-hover-primary:hover {
   background-color: var(--button-primary-hover-color);
   border-color: var(--button-primary-hover-color);
@@ -156,10 +177,7 @@
 .bk-button.bk-button-warning:active {
   background-color: var(--button-warning-active-color);
   border-color: var(--button-warning-active-color);
-}
-.bk-button.bk-button-warning.is-disabled {
-  background-color: var(--disable-color);
-  border-color: var(--disable-color);
+  color: var(--white-color);
 }
 .bk-button.bk-button-warning.is-outline {
   color: var(--warning-color);
@@ -173,12 +191,21 @@
 }
 .bk-button.bk-button-warning.is-text {
   color: var(--warning-color);
-  background: none;
+  background-color: transparent;
   border: none;
 }
-.bk-button.bk-button-warning.is-text:hover {
+.bk-button.bk-button-warning.is-text:not(.is-disabled):hover {
   color: var(--button-warning-hover-color);
 }
+.bk-button.bk-button-warning.is-disabled {
+  color: var(--disable-color);
+  cursor: not-allowed;
+}
+.bk-button.bk-button-warning.is-disabled:not(.is-text) {
+  background-color: var(--disable-color);
+  color: var(--white-color);
+  border-color: var(--disable-color);
+}
 .bk-button.bk-button-hover-warning:hover {
   background-color: var(--button-warning-hover-color);
   border-color: var(--button-warning-hover-color);
@@ -196,10 +223,7 @@
 .bk-button.bk-button-success:active {
   background-color: var(--button-success-active-color);
   border-color: var(--button-success-active-color);
-}
-.bk-button.bk-button-success.is-disabled {
-  background-color: var(--disable-color);
-  border-color: var(--disable-color);
+  color: var(--white-color);
 }
 .bk-button.bk-button-success.is-outline {
   color: var(--success-color);
@@ -213,12 +237,21 @@
 }
 .bk-button.bk-button-success.is-text {
   color: var(--success-color);
-  background: none;
+  background-color: transparent;
   border: none;
 }
-.bk-button.bk-button-success.is-text:hover {
+.bk-button.bk-button-success.is-text:not(.is-disabled):hover {
   color: var(--button-success-hover-color);
 }
+.bk-button.bk-button-success.is-disabled {
+  color: var(--disable-color);
+  cursor: not-allowed;
+}
+.bk-button.bk-button-success.is-disabled:not(.is-text) {
+  background-color: var(--disable-color);
+  color: var(--white-color);
+  border-color: var(--disable-color);
+}
 .bk-button.bk-button-hover-success:hover {
   background-color: var(--button-success-hover-color);
   border-color: var(--button-success-hover-color);
@@ -236,10 +269,7 @@
 .bk-button.bk-button-danger:active {
   background-color: var(--button-danger-active-color);
   border-color: var(--button-danger-active-color);
-}
-.bk-button.bk-button-danger.is-disabled {
-  background-color: var(--disable-color);
-  border-color: var(--disable-color);
+  color: var(--white-color);
 }
 .bk-button.bk-button-danger.is-outline {
   color: var(--danger-color);
@@ -253,26 +283,49 @@
 }
 .bk-button.bk-button-danger.is-text {
   color: var(--danger-color);
-  background: none;
+  background-color: transparent;
   border: none;
 }
-.bk-button.bk-button-danger.is-text:hover {
+.bk-button.bk-button-danger.is-text:not(.is-disabled):hover {
   color: var(--button-danger-hover-color);
 }
+.bk-button.bk-button-danger.is-disabled {
+  color: var(--disable-color);
+  cursor: not-allowed;
+}
+.bk-button.bk-button-danger.is-disabled:not(.is-text) {
+  background-color: var(--disable-color);
+  color: var(--white-color);
+  border-color: var(--disable-color);
+}
 .bk-button.bk-button-hover-danger:hover {
   background-color: var(--button-danger-hover-color);
   border-color: var(--button-danger-hover-color);
   color: var(--white-color);
 }
 .bk-button.bk-button-small {
-  min-width: 48px;
   height: 26px;
-  padding: 0 12px;
+  padding: 3px 12px;
+  font-size: var(--font-size-base);
 }
 .bk-button.bk-button-large {
-  min-width: 74px;
   height: 38px;
-  padding: 0 20px;
+  padding: 8px 20px;
+  font-size: var(--font-size-large);
+}
+.bk-button .bk-button-text {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+.bk-button.is-loading {
+  position: relative;
+}
+.bk-button.is-loading .bk-button-loading:not(:last-child) {
+  position: absolute;
+}
+.bk-button.is-loading .bk-button-text {
+  visibility: hidden;
 }
 .bk-button:hover {
   border-color: var(--button-default-hover-border-color);
@@ -281,37 +334,39 @@
   color: var(--primary-color);
   border-color: var(--primary-color);
 }
-.bk-button.is-disabled {
-  color: var(--disable-color);
-  cursor: auto;
-  border-color: var(--disable-color);
-}
 .bk-button.is-text {
+  height: auto;
+  padding: 0;
   font-size: var(--font-size-medium);
+  font-size: inherit;
   color: var(--default-color);
   text-decoration: none;
   cursor: pointer;
-  background: none;
+  background-color: transparent;
   border: none;
   outline: none;
 }
+.bk-button.is-disabled {
+  color: var(--disable-color);
+  cursor: not-allowed;
+  border-color: var(--disable-color);
+}
 .bk-button-group {
   display: inline-block;
   font-size: 0;
 }
 .bk-button-group.bk-button-group-small .bk-button {
-  min-width: 48px;
   height: 26px;
-  padding: 0 12px;
+  padding: 3px 12px;
+  font-size: var(--font-size-base);
 }
 .bk-button-group.bk-button-group-large .bk-button {
-  min-width: 74px;
   height: 38px;
-  padding: 0 20px;
+  padding: 8px 20px;
+  font-size: var(--font-size-large);
 }
 .bk-button-group .bk-button {
   height: 32px;
-  min-width: 64px;
   margin: 0 0 0 -1px;
   border-radius: 0;
 }
@@ -320,6 +375,9 @@
   background-color: var(--white-color);
   border-color: var(--light-gray);
 }
+.bk-button-group .bk-button.is-disabled {
+  color: var(--light-gray);
+}
 .bk-button-group .bk-button:first-child {
   border-radius: 2px 0 0 2px;
 }
@@ -337,3 +395,9 @@
   background-color: var(--white-color);
   border-color: var(--primary-color);
 }
+.bk-button-group .bk-button.is-selected:not(.is-disabled) {
+  background-color: var(--button-selected-bg-color);
+}
+.bk-button-group .bk-button.is-selected.is-disabled {
+  background-color: var(--button-disabled-selected-bg-color);
+}

package/lib/button/index.d.ts

@@ -6,35 +6,59 @@ declare const BkButton: {
         $props: Partial<{
             title: string;
             text: boolean;
-            theme: string;
             disabled: boolean;
-            loading: boolean;
-            hoverTheme: string;
-            outline: boolean;
-        }> & Omit<Readonly<{
-            theme?: unknown;
-            hoverTheme?: unknown;
-            size?: unknown;
-            title?: unknown;
-            disabled?: unknown;
-            loading?: unknown;
-            outline?: unknown;
-            text?: unknown;
-            nativeType?: unknown;
-        } & {
-            title: string;
-            text: boolean;
             theme: string;
-            disabled: boolean;
+            size: string;
+            icon: string;
+            outline: boolean;
             loading: boolean;
             hoverTheme: string;
-            outline: boolean;
-        } & {
-            size?: string;
-            nativeType?: "button" | "reset" | "submit";
-        }> & {
+            iconRight: string;
+            selected: boolean;
+            nativeType: "button" | "reset" | "submit";
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            theme: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            hoverTheme: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            size: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            title: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+            icon: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+            iconRight: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            loading: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            loadingMode: import("vue-types").VueTypeDef<string>;
+            outline: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            text: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            selected: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            nativeType: {
+                type: ((new (...args: any[]) => ("button" | "reset" | "submit") & {}) | (() => "button" | "reset" | "submit")) | ((new (...args: any[]) => ("button" | "reset" | "submit") & {}) | (() => "button" | "reset" | "submit"))[];
+                default: string;
+            };
+        }>> & {
             onClick?: (...args: any[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "text" | "theme" | "disabled" | "loading" | "hoverTheme" | "outline">;
+            onMouseover?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "text" | "disabled" | "theme" | "size" | "icon" | "outline" | "loading" | "hoverTheme" | "iconRight" | "selected" | "nativeType">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -46,39 +70,63 @@ declare const BkButton: {
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
-        $emit: (event: "click", ...args: any[]) => void;
+        $emit: (event: "click" | "mouseover", ...args: any[]) => void;
         $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<{
-            theme?: unknown;
-            hoverTheme?: unknown;
-            size?: unknown;
-            title?: unknown;
-            disabled?: unknown;
-            loading?: unknown;
-            outline?: unknown;
-            text?: unknown;
-            nativeType?: unknown;
-        } & {
-            title: string;
-            text: boolean;
-            theme: string;
-            disabled: boolean;
-            loading: boolean;
-            hoverTheme: string;
-            outline: boolean;
-        } & {
-            size?: string;
-            nativeType?: "button" | "reset" | "submit";
-        }> & {
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            theme: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            hoverTheme: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            size: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            title: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+            icon: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+            iconRight: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            loading: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            loadingMode: import("vue-types").VueTypeDef<string>;
+            outline: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            text: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            selected: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            nativeType: {
+                type: ((new (...args: any[]) => ("button" | "reset" | "submit") & {}) | (() => "button" | "reset" | "submit")) | ((new (...args: any[]) => ("button" | "reset" | "submit") & {}) | (() => "button" | "reset" | "submit"))[];
+                default: string;
+            };
+        }>> & {
             onClick?: (...args: any[]) => any;
-        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], string, {
+            onMouseover?: (...args: any[]) => any;
+        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover")[], string, {
             title: string;
             text: boolean;
-            theme: string;
             disabled: boolean;
+            theme: string;
+            size: string;
+            icon: string;
+            outline: boolean;
             loading: boolean;
             hoverTheme: string;
-            outline: boolean;
+            iconRight: string;
+            selected: boolean;
+            nativeType: "button" | "reset" | "submit";
         }> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -99,72 +147,113 @@ declare const BkButton: {
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
-    } & Readonly<{
-        theme?: unknown;
-        hoverTheme?: unknown;
-        size?: unknown;
-        title?: unknown;
-        disabled?: unknown;
-        loading?: unknown;
-        outline?: unknown;
-        text?: unknown;
-        nativeType?: unknown;
-    } & {
-        title: string;
-        text: boolean;
-        theme: string;
-        disabled: boolean;
-        loading: boolean;
-        hoverTheme: string;
-        outline: boolean;
-    } & {
-        size?: string;
-        nativeType?: "button" | "reset" | "submit";
-    }> & {
+    } & Readonly<import("vue").ExtractPropTypes<{
+        theme: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
+        hoverTheme: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
+        size: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
+        title: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        };
+        icon: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        };
+        iconRight: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        };
+        disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        };
+        loading: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        };
+        loadingMode: import("vue-types").VueTypeDef<string>;
+        outline: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        };
+        text: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        };
+        selected: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        };
+        nativeType: {
+            type: ((new (...args: any[]) => ("button" | "reset" | "submit") & {}) | (() => "button" | "reset" | "submit")) | ((new (...args: any[]) => ("button" | "reset" | "submit") & {}) | (() => "button" | "reset" | "submit"))[];
+            default: string;
+        };
+    }>> & {
         onClick?: (...args: any[]) => any;
+        onMouseover?: (...args: any[]) => any;
     } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<{
-    theme?: unknown;
-    hoverTheme?: unknown;
-    size?: unknown;
-    title?: unknown;
-    disabled?: unknown;
-    loading?: unknown;
-    outline?: unknown;
-    text?: unknown;
-    nativeType?: unknown;
-} & {
-    title: string;
-    text: boolean;
-    theme: string;
-    disabled: boolean;
-    loading: boolean;
-    hoverTheme: string;
-    outline: boolean;
-} & {
-    size?: string;
-    nativeType?: "button" | "reset" | "submit";
-}> & {
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    theme: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    hoverTheme: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    icon: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    iconRight: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    loadingMode: import("vue-types").VueTypeDef<string>;
+    outline: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    text: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    selected: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    nativeType: {
+        type: ((new (...args: any[]) => ("button" | "reset" | "submit") & {}) | (() => "button" | "reset" | "submit")) | ((new (...args: any[]) => ("button" | "reset" | "submit") & {}) | (() => "button" | "reset" | "submit"))[];
+        default: string;
+    };
+}>> & {
     onClick?: (...args: any[]) => any;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", {
+    onMouseover?: (...args: any[]) => any;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover")[], "click" | "mouseover", {
     title: string;
     text: boolean;
-    theme: string;
     disabled: boolean;
+    theme: string;
+    size: string;
+    icon: string;
+    outline: boolean;
     loading: boolean;
     hoverTheme: string;
-    outline: boolean;
+    iconRight: string;
+    selected: boolean;
+    nativeType: "button" | "reset" | "submit";
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin & Readonly<{
     ButtonGroup: import("vue").DefineComponent<{
         size: import("vue-types").VueTypeDef<string>;
-    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-        size?: unknown;
-    } & {} & {
-        size?: string;
-    }> & {}, {}>;
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        size: import("vue-types").VueTypeDef<string>;
+    }>>, {}>;
 }>;
 export default BkButton;
 export { ButtonGroup as BkButtonGroup, BkButton, };