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

package/lib/input/input.css

@@ -27,6 +27,49 @@
   content: '';
   visibility: hidden;
 }
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0px 0px 6px 0px;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}
 .bk-textarea {
   display: inline-flex;
   width: 100%;
@@ -55,6 +98,7 @@
 .bk-textarea.is-readonly .bk-input--suffix-area,
 .bk-textarea.is-disabled .bk-input--suffix-icon,
 .bk-textarea.is-readonly .bk-input--suffix-icon {
+  cursor: not-allowed;
   background-color: #fafbfd;
 }
 .bk-textarea.is-disabled input,
@@ -75,7 +119,6 @@
   padding: 5px 10px;
   line-height: 1.5;
   text-align: left;
-  vertical-align: middle;
   border: 0;
   outline: none;
   resize: none;
@@ -121,6 +164,7 @@
 .bk-input.is-readonly .bk-input--suffix-area,
 .bk-input.is-disabled .bk-input--suffix-icon,
 .bk-input.is-readonly .bk-input--suffix-icon {
+  cursor: not-allowed;
   background-color: #fafbfd;
 }
 .bk-input.is-disabled input,
@@ -158,7 +202,7 @@
   display: flex;
   height: 100%;
   padding-right: 10px;
-  font-size: 16px;
+  font-size: 14px;
   color: #c4c6cc;
   background-color: white;
   align-items: center;
@@ -167,8 +211,14 @@
 .bk-input--suffix-icon.show-clear-only-hover {
   display: none;
 }
+.bk-input--clear-icon {
+  cursor: pointer;
+}
+.bk-input--clear-icon:hover {
+  color: #979ba5;
+}
 .bk-input--large {
-  height: 38px;
+  height: 40px;
   font-size: 14px;
 }
 .bk-input--large .bk-input--max-length {
@@ -284,14 +334,15 @@
   align-items: center;
 }
 .bk-input--number-control span.is-disabled {
+  color: #c4c6cc;
   cursor: not-allowed;
 }
 .bk-input--number-control svg {
-  font-size: 16px;
+  font-size: 14px;
 }
 .bk-input--number-control span:first-child {
   transform: rotate(180deg);
 }
-.bk-input--number-control span:hover {
+.bk-input--number-control span:not(.is-disabled):hover {
   background-color: #eaebf0;
 }

package/lib/input/input.less

@@ -15,6 +15,7 @@
     .@{bk-prefix}-input--prefix-area,
     .@{bk-prefix}-input--suffix-area,
     .@{bk-prefix}-input--suffix-icon {
+      cursor: not-allowed;
       background-color: @input-disabled-bg;
     }
   }
@@ -64,7 +65,6 @@
     padding: 5px 10px;
     line-height: 1.5;
     text-align: left;
-    vertical-align: middle;
     border: 0;
     outline: none;
     resize: none;
@@ -140,6 +140,15 @@
     }
   }
 
+  &--clear-icon {
+    cursor: pointer;
+
+    &:hover {
+      color: @gray-color;
+    }
+  }
+
+
   &--large {
     .component-size(@component-size-large, @font-size-medium);
 
@@ -276,6 +285,7 @@
       align-items: center;
 
       &.is-disabled {
+        color: @light-gray;
         cursor: not-allowed;
       }
     }
@@ -288,7 +298,7 @@
       transform: rotate(180deg);
     }
 
-    span:hover {
+    span:not(.is-disabled):hover {
       background-color: @input-block-hover-color;
     }
   }

package/lib/input/input.variable.css

@@ -19,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;
@@ -34,7 +34,7 @@
   --input-horizontal-padding: 10px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
-  --input-icon-size: var(--font-size-large);
+  --input-icon-size: var(--font-size-medium);
   --input-maxlength-color: #979ba5;
   --button-primary-hover-color: #5594fa;
   --button-danger-hover-color: #ff5656;
@@ -129,6 +129,49 @@
   content: '';
   visibility: hidden;
 }
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0px 0px 6px 0px;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}
 .bk-textarea {
   display: inline-flex;
   width: 100%;
@@ -158,6 +201,7 @@
 .bk-textarea.is-readonly .bk-input--suffix-area,
 .bk-textarea.is-disabled .bk-input--suffix-icon,
 .bk-textarea.is-readonly .bk-input--suffix-icon {
+  cursor: not-allowed;
   background-color: var(--input-disabled-bg);
 }
 .bk-textarea.is-disabled input,
@@ -178,7 +222,6 @@
   padding: 5px 10px;
   line-height: 1.5;
   text-align: left;
-  vertical-align: middle;
   border: 0;
   outline: none;
   resize: none;
@@ -224,6 +267,7 @@
 .bk-input.is-readonly .bk-input--suffix-area,
 .bk-input.is-disabled .bk-input--suffix-icon,
 .bk-input.is-readonly .bk-input--suffix-icon {
+  cursor: not-allowed;
   background-color: var(--input-disabled-bg);
 }
 .bk-input.is-disabled input,
@@ -270,6 +314,12 @@
 .bk-input--suffix-icon.show-clear-only-hover {
   display: none;
 }
+.bk-input--clear-icon {
+  cursor: pointer;
+}
+.bk-input--clear-icon:hover {
+  color: var(--gray-color);
+}
 .bk-input--large {
   height: var(--component-size-large);
   font-size: var(--font-size-medium);
@@ -387,6 +437,7 @@
   align-items: center;
 }
 .bk-input--number-control span.is-disabled {
+  color: var(--light-gray);
   cursor: not-allowed;
 }
 .bk-input--number-control svg {
@@ -395,6 +446,6 @@
 .bk-input--number-control span:first-child {
   transform: rotate(180deg);
 }
-.bk-input--number-control span:hover {
+.bk-input--number-control span:not(.is-disabled):hover {
   background-color: var(--input-block-hover-color);
 }

package/lib/link/index.d.ts

@@ -1,30 +1,134 @@
-declare const BkLink: import("vue").DefineComponent<{
-    theme: import("vue-types").VueTypeDef<string> & {
-        default: string;
-    };
-    href: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
-    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    underline: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    target: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
-}, {
-    handleClick: (event: Event) => boolean;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+declare const BkLink: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            disabled: boolean;
+            theme: string;
+            target: string;
+            underline: boolean;
+            href: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            theme: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            href: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            underline: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            target: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "theme" | "target" | "underline" | "href">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $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: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            theme: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            href: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            underline: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            target: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+        }>>, {
+            handleClick: (event: Event) => boolean;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+            disabled: boolean;
+            theme: string;
+            target: string;
+            underline: boolean;
+            href: string;
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        theme: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
+        href: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        underline: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        target: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{
+        handleClick: (event: Event) => boolean;
+    }> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     theme: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
@@ -49,10 +153,12 @@ declare const BkLink: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
+    handleClick: (event: Event) => boolean;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
     disabled: boolean;
     theme: string;
     target: string;
     underline: boolean;
     href: string;
-}>;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
 export default BkLink;

package/lib/link/link.variable.css

@@ -19,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;
@@ -34,7 +34,7 @@
   --input-horizontal-padding: 10px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
-  --input-icon-size: var(--font-size-large);
+  --input-icon-size: var(--font-size-medium);
   --input-maxlength-color: #979ba5;
   --button-primary-hover-color: #5594fa;
   --button-danger-hover-color: #ff5656;

package/lib/loading/loading.css

@@ -27,6 +27,49 @@
   content: '';
   visibility: hidden;
 }
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0px 0px 6px 0px;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}
 .bk-loading-wrapper {
   position: static;
   vertical-align: middle;
@@ -36,8 +79,6 @@
 }
 .bk-loading-wrapper.bk-nested-loading {
   position: relative;
-  width: 100%;
-  height: 100%;
 }
 .bk-loading-wrapper.bk-nested-loading.is-block {
   display: block;

package/lib/loading/loading.less

@@ -62,8 +62,8 @@
 
   &.@{bk-prefix}-nested-loading {
     position: relative;
-    width: 100%;
-    height: 100%;
+    // width: 100%;
+    // height: 100%;
 
     &.is-block {
       display: block;

package/lib/loading/loading.variable.css

@@ -19,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;
@@ -34,7 +34,7 @@
   --input-horizontal-padding: 10px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
-  --input-icon-size: var(--font-size-large);
+  --input-icon-size: var(--font-size-medium);
   --input-maxlength-color: #979ba5;
   --button-primary-hover-color: #5594fa;
   --button-danger-hover-color: #ff5656;
@@ -129,6 +129,49 @@
   content: '';
   visibility: hidden;
 }
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0px 0px 6px 0px;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}
 .bk-loading-wrapper {
   position: static;
   vertical-align: middle;
@@ -138,8 +181,6 @@
 }
 .bk-loading-wrapper.bk-nested-loading {
   position: relative;
-  width: 100%;
-  height: 100%;
 }
 .bk-loading-wrapper.bk-nested-loading.is-block {
   display: block;

package/lib/menu/menu.css

@@ -27,6 +27,49 @@
   content: '';
   visibility: hidden;
 }
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0px 0px 6px 0px;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}
 .collapse {
   width: 60px;
 }