bkui-vue 0.0.1-beta.16 → 0.0.1-beta.162

package/lib/input/input.d.ts

@@ -16,6 +16,8 @@ export declare const inputType: {
     };
     placeholder: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     prefixIcon: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -41,6 +43,9 @@ export declare const inputType: {
     maxlength: import("vue-types").VueTypeDef<number> & {
         default: number;
     };
+    behavior: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
     showWordLimit: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
@@ -49,6 +54,11 @@ export declare const inputType: {
     } & {
         default: boolean;
     };
+    showClearOnlyHover: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     precision: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -58,6 +68,53 @@ export declare const inputType: {
     };
     modelValue: import("vue-types").VueTypeDef<string | number>;
     size: import("vue-types").VueTypeDef<string>;
+    rows: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    selectReadonly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+};
+export declare const enum EVENTS {
+    UPDATE = "update:modelValue",
+    FOCUS = "focus",
+    BLUR = "blur",
+    CHANGE = "change",
+    CLEAR = "clear",
+    INPUT = "input",
+    KEYPRESS = "keypress",
+    KEYDOWN = "keydown",
+    KEYUP = "keyup",
+    ENTER = "enter",
+    PASTE = "paste",
+    COMPOSITIONSTART = "compositionstart",
+    COMPOSITIONUPDATE = "compositionupdate",
+    COMPOSITIONEND = "compositionend"
+}
+declare function EventFunction(_value: any, _evt?: KeyboardEvent | Event): boolean;
+declare function CompositionEventFunction(evt: CompositionEvent): CompositionEvent;
+export declare const inputEmitEventsType: {
+    "update:modelValue": typeof EventFunction;
+    focus: (evt: FocusEvent) => FocusEvent;
+    blur: (evt: FocusEvent) => FocusEvent;
+    change: typeof EventFunction;
+    clear: () => boolean;
+    input: typeof EventFunction;
+    keypress: typeof EventFunction;
+    keydown: typeof EventFunction;
+    keyup: typeof EventFunction;
+    enter: typeof EventFunction;
+    paste: typeof EventFunction;
+    compositionstart: typeof CompositionEventFunction;
+    compositionupdate: typeof CompositionEventFunction;
+    compositionend: typeof CompositionEventFunction;
 };
 export declare type InputType = ExtractPropTypes<typeof inputType>;
 declare const _default: import("vue").DefineComponent<{
@@ -77,6 +134,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     placeholder: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     prefixIcon: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -102,6 +161,9 @@ declare const _default: import("vue").DefineComponent<{
     maxlength: import("vue-types").VueTypeDef<number> & {
         default: number;
     };
+    behavior: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
     showWordLimit: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
@@ -110,6 +172,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    showClearOnlyHover: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     precision: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -119,69 +186,152 @@ declare const _default: import("vue").DefineComponent<{
     };
     modelValue: import("vue-types").VueTypeDef<string | number>;
     size: import("vue-types").VueTypeDef<string>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "focus" | "blur" | "change" | "keydown" | "clear" | "update:modelValue")[], "input" | "focus" | "blur" | "change" | "keydown" | "clear" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    type?: unknown;
-    clearable?: unknown;
-    disabled?: unknown;
-    readonly?: unknown;
-    placeholder?: unknown;
-    prefixIcon?: unknown;
-    suffixIcon?: unknown;
-    suffix?: unknown;
-    prefix?: unknown;
-    step?: unknown;
-    max?: unknown;
-    min?: unknown;
-    maxlength?: unknown;
-    showWordLimit?: unknown;
-    showControl?: unknown;
-    precision?: unknown;
-    modelValue?: unknown;
-    size?: unknown;
-} & {
-    prefix: string;
-    placeholder: string;
-    step: number;
-    disabled: boolean;
-    type: string;
-    readonly: boolean;
-    clearable: boolean;
-    max: number;
-    min: number;
-    maxlength: number;
-    prefixIcon: string;
-    suffixIcon: string;
-    suffix: string;
-    showWordLimit: boolean;
-    showControl: boolean;
-    precision: number;
-} & {
-    size?: string;
-    modelValue?: string | number;
-}> & {
-    onFocus?: (...args: any[]) => any;
-    onBlur?: (...args: any[]) => any;
-    onChange?: (...args: any[]) => any;
-    onInput?: (...args: any[]) => any;
-    onKeydown?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    onClear?: (...args: any[]) => any;
+    rows: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    selectReadonly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": typeof EventFunction;
+    focus: (evt: FocusEvent) => FocusEvent;
+    blur: (evt: FocusEvent) => FocusEvent;
+    change: typeof EventFunction;
+    clear: () => boolean;
+    input: typeof EventFunction;
+    keypress: typeof EventFunction;
+    keydown: typeof EventFunction;
+    keyup: typeof EventFunction;
+    enter: typeof EventFunction;
+    paste: typeof EventFunction;
+    compositionstart: typeof CompositionEventFunction;
+    compositionupdate: typeof CompositionEventFunction;
+    compositionend: typeof CompositionEventFunction;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    type: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    clearable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    readonly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    placeholder: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    prefixIcon: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    suffixIcon: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    suffix: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    prefix: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    step: import("vue-types").VueTypeDef<number> & {
+        default: number;
+    };
+    max: import("vue-types").VueTypeDef<number> & {
+        default: number;
+    };
+    min: import("vue-types").VueTypeDef<number> & {
+        default: number;
+    };
+    maxlength: import("vue-types").VueTypeDef<number> & {
+        default: number;
+    };
+    behavior: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    showWordLimit: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    showControl: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showClearOnlyHover: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    precision: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    } & {
+        validator: import("vue-types/dist/types").ValidatorFunction<unknown>;
+    };
+    modelValue: import("vue-types").VueTypeDef<string | number>;
+    size: import("vue-types").VueTypeDef<string>;
+    rows: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    selectReadonly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    onPaste?: (_value: any, _evt?: Event | KeyboardEvent) => any;
+    onCompositionend?: (evt: CompositionEvent) => any;
+    onCompositionstart?: (evt: CompositionEvent) => any;
+    onCompositionupdate?: (evt: CompositionEvent) => any;
+    onFocus?: (evt: FocusEvent) => any;
+    onBlur?: (evt: FocusEvent) => any;
+    onChange?: (_value: any, _evt?: Event | KeyboardEvent) => any;
+    onInput?: (_value: any, _evt?: Event | KeyboardEvent) => any;
+    onKeydown?: (_value: any, _evt?: Event | KeyboardEvent) => any;
+    onKeypress?: (_value: any, _evt?: Event | KeyboardEvent) => any;
+    onKeyup?: (_value: any, _evt?: Event | KeyboardEvent) => any;
+    onEnter?: (_value: any, _evt?: Event | KeyboardEvent) => any;
+    "onUpdate:modelValue"?: (_value: any, _evt?: Event | KeyboardEvent) => any;
+    onClear?: () => any;
 }, {
-    prefix: string;
+    type: string;
+    disabled: boolean;
     placeholder: string;
+    prefix: string;
     step: number;
-    disabled: boolean;
-    type: string;
-    readonly: boolean;
-    clearable: boolean;
     max: number;
     min: number;
     maxlength: number;
+    clearable: boolean;
+    readonly: boolean;
     prefixIcon: string;
     suffixIcon: string;
     suffix: string;
+    behavior: string;
     showWordLimit: boolean;
     showControl: boolean;
+    showClearOnlyHover: boolean;
     precision: number;
+    rows: number;
+    selectReadonly: boolean;
+    withValidate: boolean;
 }>;
 export default _default;

package/lib/input/input.less

@@ -1,4 +1,3 @@
-
 @import '../styles/themes/themes.less';
 @import '../styles/mixins/mixins.less';
 
@@ -9,44 +8,191 @@
 }
 
 .disabled() {
-  cursor: not-allowed;
-  background-color: @input-disabled-bg;
-  opacity: 1;
+  &.is-disabled,
+  &.is-readonly {
+    background-color: @input-disabled-bg;
+    border-color: @disable-color;
+    .@{bk-prefix}-input--prefix-area,
+    .@{bk-prefix}-input--suffix-area,
+    .@{bk-prefix}-input--suffix-icon {
+      cursor: not-allowed;
+      background-color: @input-disabled-bg;
+    }
+  }
+
+  &.is-disabled input,
+  &.is-readonly input,
+  &.is-disabled textarea,
+  &.is-readonly textarea {
+    cursor: not-allowed;
+    background-color: @input-disabled-bg;
+    opacity: 1;
+  }
+
+  &.is-readonly input,
+  &.is-readonly textarea {
+    cursor: auto;
+  }
+
+}
+
+.placeholder() {
+  ::placeholder {
+    color: @light-gray;
+  }
+}
+
+.@{bk-prefix}-textarea {
+  .placeholder();
+  display: inline-flex;
+  width: 100%;
+  min-height: 70px;
+  font-size: @font-size-base;
+  line-height: 20px;
+  color: @input-color;
+  background-color: white;
+  border: @border-width-base @border-style-base @input-border-color;
+  border-radius: 2px;
+  border-radius: @border-radius-base;
+  box-sizing: border-box;
+  transition: all .3s;
+  flex-direction: column;
+  .disabled();
+
+  > textarea {
+    width: 100%;
+    flex: 1;
+    padding: 5px 10px;
+    line-height: 1.5;
+    text-align: left;
+    border: 0;
+    outline: none;
+    resize: none;
+  }
+
+  &--max-length {
+    padding-right: @input-horizontal-padding;
+    margin: 0;
+    margin-left: auto;
+    font-size: 12px;
+    text-align: right;
+    transform: scale(.8);
+    justify-content: flex-end;
+
+    span {
+      color: @input-maxlength-color;
+
+    }
+  }
+
+  &.is-focused:not(.is-readonly) {
+    .active();
+  }
 }
 
 .@{bk-prefix}-input {
-  display: flex;
+  display: inline-flex;
   align-items: stretch;
+  width: 100%;
   height: @input-height-base;
   font-size: @font-size-base;
   border: @border-width-base @border-style-base @input-border-color;
   border-radius: @border-radius-base;
   transition: all .3s;
+  .placeholder();
+  .disabled();
+
+  &:hover:not(.is-disabled) {
+    border-color: @gray-color;
+
+    .show-clear-only-hover {
+      display: flex;
+    }
+  }
+
+  &.is-simplicity {
+    background-color: transparent;
+    border-color: transparent;
+    border-bottom-color: @input-border-color;
+
+    &:hover:not(.is-disabled) {
+      border-color: transparent;
+      border-bottom-color: @light-gray;
+      box-shadow: none;
+      .@{bk-prefix}-input--text {
+        background-color: @input-block-color;
+      }
+    }
+  }
 
   &--suffix-icon {
+    display: flex;
+    height: 100%;
     padding-right: @input-horizontal-padding;
     font-size: @input-icon-size;
-    line-height: 1;
     color: @light-gray;
+    background-color: @input-bg;
+    align-items: center;
     align-self: center;
+
+    &.show-clear-only-hover {
+      display: none;
+    }
   }
 
+  &--clear-icon {
+    cursor: pointer;
+
+    &:hover {
+      color: @gray-color;
+    }
+  }
+
+
   &--large {
-    .component-size(@component-size-large, @font-size-large);
+    .component-size(@component-size-large, @font-size-medium);
+
+    .@{bk-prefix}-input--max-length {
+      font-size: @font-size-large;
+    }
+    .@{bk-prefix}-input--number-control {
+      span:first-child {
+        margin-bottom: 4px;
+      }
+    }
   }
 
   &--small {
     .component-size(@component-size-small, @font-size-base);
+
+    .@{bk-prefix}-input--max-length {
+      font-size: @font-size-base;
+    }
+  }
+
+  &--default {
+    font-size: @font-size-base;
+
+    .@{bk-prefix}-input--max-length {
+      font-size: @font-size-base;
+    }
   }
 
   &.is-focused:not(.is-readonly) {
     .active();
-  }
 
-  &.is-disabled {
-    .disabled();
+    &.is-simplicity {
+      border-color: transparent;
+      border-bottom-color: @primary-color;
+      box-shadow: none;
+      .@{bk-prefix}-input--text {
+        background-color: @input-block-color;
+      }
+    }
   }
 
+
+
   &--prefix-area,
   &--suffix-area {
     display: flex;
@@ -65,6 +211,8 @@
   &--max-length {
     align-self: center;
     padding-right: @input-horizontal-padding;
+    font-size: 12px;
+    transform: scale(.8);
 
     span {
       color: @input-maxlength-color;
@@ -72,8 +220,8 @@
   }
 
   &--text {
+    width: 100%;
     padding: 0 @input-horizontal-padding;
-    font-size: @font-size-base;
     line-height: 1;
     color: @input-color;
     background-color: @input-bg;
@@ -92,13 +240,13 @@
       appearance: none;
     }
     // IE
-    [type=search]::-ms-clear {
+    [type='search']::-ms-clear {
       display: none;
       width: 0;
       height: 0;
     }
 
-    [type=search]::-ms-reveal {
+    [type='search']::-ms-reveal {
       display: none;
       width: 0;
       height: 0;
@@ -116,16 +264,30 @@
   }
 
   &--number-control {
+    display: flex;
     width: 26px;
     height: 100%;
+    padding: 4px 0;
     font-size: 0;
+    user-select: none;
     flex-direction: column;
+    align-items: center;
 
     span {
-      display: block;
-      height: 50%;
+      display: flex;
       overflow: hidden;
-      color: @light-gray;
+      line-height: 1;
+      color: @gray-color;
+      text-align: center;
+      cursor: pointer;
+      background-color: @input-block-color;
+      flex: 1;
+      align-items: center;
+
+      &.is-disabled {
+        color: @light-gray;
+        cursor: not-allowed;
+      }
     }
 
     svg {
@@ -136,8 +298,8 @@
       transform: rotate(180deg);
     }
 
-    span:hover {
-      background-color: #f4f6fa;
+    span:not(.is-disabled):hover {
+      background-color: @input-block-hover-color;
     }
   }
 }