bkui-vue 0.0.1-beta.34 → 0.0.1-beta.340

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;
@@ -66,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<{
@@ -85,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;
@@ -135,7 +186,35 @@ 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" | "paste" | "change" | "keydown" | "keypress" | "keyup" | "clear" | "update:modelValue" | "enter")[], "input" | "focus" | "blur" | "paste" | "change" | "keydown" | "keypress" | "keyup" | "clear" | "update:modelValue" | "enter", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    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;
     } & {
@@ -152,6 +231,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;
@@ -202,36 +283,55 @@ declare const _default: import("vue").DefineComponent<{
     };
     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?: (...args: any[]) => any;
-    onFocus?: (...args: any[]) => any;
-    onBlur?: (...args: any[]) => any;
-    onChange?: (...args: any[]) => any;
-    onInput?: (...args: any[]) => any;
-    onKeydown?: (...args: any[]) => any;
-    onKeypress?: (...args: any[]) => any;
-    onKeyup?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    onClear?: (...args: any[]) => any;
-    onEnter?: (...args: any[]) => any;
+    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;
 }, {
     type: string;
+    disabled: boolean;
     placeholder: string;
     prefix: string;
     step: number;
-    disabled: boolean;
-    readonly: boolean;
-    clearable: boolean;
-    behavior: string;
     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

@@ -8,23 +8,105 @@
 }
 
 .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;
 
-  &:hover {
     .show-clear-only-hover {
-      display: block;
+      display: flex;
     }
   }
 
@@ -32,13 +114,26 @@
     background-color: transparent;
     border-color: transparent;
     border-bottom-color: @input-border-color;
+
+    &:hover:not(.is-disabled) {
+      background-color: @input-block-color;
+      border-color: transparent;
+      border-bottom-color: @light-gray;
+      box-shadow: none;
+      .@{bk-prefix}-input--text, .@{bk-prefix}-input--suffix-icon {
+        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 {
@@ -46,12 +141,42 @@
     }
   }
 
+  &--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) {
@@ -61,12 +186,13 @@
       border-color: transparent;
       border-bottom-color: @primary-color;
       box-shadow: none;
+      .@{bk-prefix}-input--text, .@{bk-prefix}-input--suffix-icon {
+        background-color: @input-block-color;
+      }
     }
   }
 
-  &.is-disabled {
-    .disabled();
-  }
+
 
   &--prefix-area,
   &--suffix-area {
@@ -86,6 +212,8 @@
   &--max-length {
     align-self: center;
     padding-right: @input-horizontal-padding;
+    font-size: 12px;
+    transform: scale(.8);
 
     span {
       color: @input-maxlength-color;
@@ -93,8 +221,8 @@
   }
 
   &--text {
+    width: 100%;
     padding: 0 @input-horizontal-padding;
-    font-size: @font-size-base;
     line-height: 1;
     color: @input-color;
     background-color: @input-bg;
@@ -137,17 +265,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 {
@@ -158,8 +299,8 @@
       transform: rotate(180deg);
     }
 
-    span:hover {
-      background-color: #f4f6fa;
+    span:not(.is-disabled):hover {
+      background-color: @input-block-hover-color;
     }
   }
 }