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

package/lib/input/index.d.ts

@@ -0,0 +1,275 @@
+declare const BkInput: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            placeholder: string;
+            prefix: 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;
+        }> & Omit<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;
+        } & {
+            placeholder: string;
+            prefix: 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;
+            "onUpdate:modelValue"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "placeholder" | "prefix" | "step" | "disabled" | "type" | "readonly" | "clearable" | "max" | "min" | "maxlength" | "prefixIcon" | "suffixIcon" | "suffix" | "showWordLimit" | "showControl" | "precision">;
+        $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: "input" | "focus" | "blur" | "change" | "update:modelValue", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<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;
+        } & {
+            placeholder: string;
+            prefix: 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;
+            "onUpdate:modelValue"?: (...args: any[]) => any;
+        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "focus" | "blur" | "change" | "update:modelValue")[], string, {
+            placeholder: string;
+            prefix: 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;
+        }> & {
+            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<{
+        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;
+    } & {
+        placeholder: string;
+        prefix: 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;
+        "onUpdate:modelValue"?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<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;
+} & {
+    placeholder: string;
+    prefix: 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;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "focus" | "blur" | "change" | "update:modelValue")[], "input" | "focus" | "blur" | "change" | "update:modelValue", {
+    placeholder: string;
+    prefix: 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;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkInput;

package/lib/input/index.js

@@ -1,60 +1,15 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('../button'), require('../checkbox')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '../button', '../checkbox'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.bkuiVue = {}, global.Vue, global.Button, global.Checkbox));
-}(this, (function (exports, vue, Button, Checkbox) { 'use strict';
-
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-  var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
-
-  var Input = vue.defineComponent({
-    name: 'BkInput',
-    components: {
-      Button: Button__default['default'],
-      Checkbox: Checkbox__default['default']
-    },
-    props: {
-      type: {
-        type: String,
-        default: 'text'
-      },
-      size: {
-        type: String,
-        default: 'normal',
-        validator: val => ['small', 'normal', 'large'].includes(val)
-      }
-    },
-
-    render() {
-      return vue.createVNode("div", {
-        "class": "bk-input"
-      }, [this.type === 'textarea' ? vue.createVNode("textarea", {
-        "class": "bk-input-textarea"
-      }, null) : vue.createVNode(vue.Fragment, null, [this.$slots.prepend ? vue.createVNode("div", {
-        "class": "bk-input-prepend"
-      }, [this.$slots.prepend()]) : undefined, vue.createVNode("input", {
-        "class": "bk-input-text",
-        "type": this.type
-      }, null), this.$slots.append ? vue.createVNode("div", {
-        "class": "bk-input-append"
-      }, [vue.createVNode(vue.resolveComponent("bk-checkbox"), null, null), vue.createVNode(vue.resolveComponent("bk-button"), {
-        "theme": "primary",
-        "size": "small"
-      }, {
-        default: () => [vue.createTextVNode("ss")]
-      }), this.$slots.append()]) : undefined])]);
-    }
-
-  });
-
-  Input.install = Vue => {
-    Vue.component(Input.name, Input);
-  };
-
-  exports.default = Input;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("@bkui-vue/icon")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","@bkui-vue/icon"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e["@bkui-vue/icon/icons"])}(this,(function(e,t,o,n){"use strict";function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var l={exports:{}};!function(e){e.exports=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e},e.exports.default=e.exports,e.exports.__esModule=!0}(l);var a=r(l.exports);
+/*! *****************************************************************************
+	Copyright (c) Microsoft Corporation.
+
+	Permission to use, copy, modify, and/or distribute this software for any
+	purpose with or without fee is hereby granted.
+
+	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+	REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+	AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+	INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+	LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+	OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+	PERFORMANCE OF THIS SOFTWARE.
+	***************************************************************************** */var i={type:o.PropTypes.string.def("text"),clearable:o.PropTypes.bool,disabled:o.PropTypes.bool,readonly:o.PropTypes.bool,placeholder:o.PropTypes.string,prefixIcon:o.PropTypes.string,suffixIcon:o.PropTypes.string,suffix:o.PropTypes.string,prefix:o.PropTypes.string,step:o.PropTypes.integer,max:o.PropTypes.integer,min:o.PropTypes.integer,maxlength:o.PropTypes.integer,showWordLimit:o.PropTypes.bool,showControl:o.PropTypes.bool.def(!0),precision:o.PropTypes.number.def(0).validate((function(e){return e>=0&&e<20})),modelValue:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.number]),size:o.PropTypes.size()},u=t.defineComponent({name:"BkInput",inheritAttrs:!1,emits:["update:modelValue","focus","blur","change","input"],props:i,setup:function(e,r){var l=t.ref(!1),i="bk-input",u=r.attrs,s=u.class,p=u.style,c=function(e,t){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(o[n[r]]=e[n[r]])}return o}(u,["class","style"]),d=t.computed((function(){var t;return o.classes((a(t={},"".concat(i,"--").concat(e.size),!!e.size),a(t,"is-focused",l.value),a(t,"is-readonly",e.readonly),a(t,"is-disabled",e.disabled),a(t,"".concat(s),!!s),t),i)})),f={search:function(){return t.createVNode(n.Search,null,null)},password:function(){return t.createVNode(n.Eye,{onClick:k},null)}},m=I("suffix-icon"),v=t.computed((function(){var o=f[e.type];return x.value?t.createVNode(n.Unvisible,{onClick:k,class:m},null):o?t.createVNode(o,{class:m},null):null})),y=t.computed((function(){return"number"===e.type})),b=t.computed((function(){return Math.floor(e.maxlength)})),x=t.ref(!1);function g(){r.emit("update:modelValue",""),r.emit("change","")}function h(e){l.value=!0,r.emit("focus",e)}function V(e){l.value=!1,r.emit("blur",e)}function P(e){r.emit("update:modelValue",y.value?+e.target.value:e.target.value),r.emit("input",e.target.value)}function T(e){r.emit("change",e.target.value,e)}function N(t){var o=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=Number.isInteger(e.precision)?e.precision:0,r=parseFloat(e.modelValue.toString()),l=Number.isInteger(t)?t:1,a=r+(o?l:-1*l);return Number.isInteger(e.max)&&(a=Math.min(a,e.max)),Number.isInteger(e.min)&&(a=Math.max(a,e.min)),+a.toFixed(n)}function w(){var t=N(parseInt(String(e.step),10));r.emit("update:modelValue",t)}function O(){var t=N(parseInt(String(e.step),10),!1);r.emit("update:modelValue",t)}function I(e){return"".concat(i,"--").concat(e)}function k(){x.value=!x.value}return function(){var o,l,a,u,s,f;return t.createVNode("div",{class:d.value,style:p},[null!==(a=null===(l=null===(o=r.slots)||void 0===o?void 0:o.prefix)||void 0===l?void 0:l.call(o))&&void 0!==a?a:e.prefix&&t.createVNode("div",{class:I("prefix-area")},[t.createVNode("span",{class:I("prefix-area--text")},[e.prefix])]),t.createVNode("input",t.mergeProps(c,{class:"".concat(i,"--text"),value:e.modelValue,type:x.value&&"password"===e.type?"text":e.type,maxlength:e.maxlength,step:e.step,max:e.max,min:e.min,placeholder:e.placeholder,readonly:e.readonly,disabled:e.disabled,onInput:P,onFocus:h,onBlur:V,onChange:T}),null),e.clearable&&!!e.modelValue&&t.createVNode(n.Close,{onClick:g,class:m},null),v.value,"number"==typeof e.maxlength&&e.showWordLimit&&t.createVNode("p",{class:I("max-length")},[e.modelValue.toString().length,t.createTextVNode("/"),t.createVNode("span",null,[b.value])]),y.value&&e.showControl&&t.createVNode("div",{class:I("number-control")},[t.createVNode(n.DownSmall,{onClick:w},null),t.createVNode(n.DownSmall,{onClick:O},null)]),null!==(f=null===(s=null===(u=r.slots)||void 0===u?void 0:u.suffix)||void 0===s?void 0:s.call(u))&&void 0!==f?f:e.suffix&&t.createVNode("div",{class:I("suffix-area")},[t.createVNode("span",{class:I("suffix-area--text")},[e.suffix])])])}}}),s=o.withInstall(u);e.default=s,Object.defineProperty(e,"__esModule",{value:!0})}));

package/lib/input/input.css

@@ -1,166 +1,132 @@
-:root {
-  --primary-color: #3a84ff;
-  --success-color: #2dcb56;
-  --warning-color: #ff9c01;
-  --danger-color: #ea3636;
-  --default-color: #63656e;
-  --font-size-base: 12px;
-  --font-size-medium: 14px;
-  --font-size-large: 16px;
-  --line-height-base: 16px;
-  --line-height-medium: 16px;
-  --line-height-large: 18px;
-  --component-size-small: 26px;
-  --component-size-base: 32px;
-  --component-size-large: 38px;
-  --border-color-base: #dcdee5;
-  --border-color-disable: #dcdee5;
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-radius-base: 2px;
-  --input-disabled-bg: #fafbfd;
-  --input-disabled-border: #dcdee5;
-  --input-height-base: var(--component-size-base);
-  --input-color: var(--default-color);
-  --input-bg: white;
-  --input-border-color: var(--border-color-base);
-}
-/* 存放常用变量 */
-/********************** 字体 **********************/
-/********************** 主题色 **********************/
-/* 重点表示、强调、链接以及带有明确指示性 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 辅助色 **********************/
-/* 退出、删除、错误、严重警告等否定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 警示灯引起注意类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 成功、完成、进行等肯定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 中性色 **********************/
-/* 重要级文字信息、内容标题信息 */
-/* 次级标题、内容文字 主要文字使用颜色 */
-/* 三级文字标题、内容文字 */
-/* 边框内说明文字 */
-/* 按钮、表单边框颜色、禁用时文本颜色 */
-/* 表格线颜色区别表单，大描边颜色、线性色 */
-/* 表格头部背景色、禁用底色 */
-/* 大面积背景色 */
-/********************** 基础颜色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-鼠标移上 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-激活 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-相应谈色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 图标大小 **********************/
-/* 最小尺寸图标 */
-/* 更小尺寸图标 */
-/* 小尺寸图标 */
-/* 正常尺寸图标 */
-/* 大尺寸图标 */
-/* 最大尺寸图标 */
-/********************** 文案 **********************/
-/* 字体 */
-/* 正常尺寸 */
-/* 小尺寸 */
-/* 大尺寸 */
-/* 主要颜色 */
-/* 次要颜色 用于 plaeholder 等 */
-/********************** 边框 **********************/
-/* 边框色 */
-/* 表单输入框色 */
-/* 表单输入框激活色 */
-/********************** 其它 **********************/
-/* 滚动条背景色 */
-/********************** 层级管理 **********************/
-/* 下拉菜单层 */
-/* @dropdownMenuZIndex: 50; */
-/* 下拉选框层 */
-/* @selectorZIndex: 100; */
-/* 日期选框层 */
-/* @dateZIndex: 200; */
-/* 文字提示层 */
-/* @tooltipZIndex: 500; */
-/* 确认提示层 */
-/* @toolboxZIndex: 700; */
-/* 加载层 */
-/* @loadingZIndex: 1000; */
-/* 消息提示层 */
-/* @messageZIndex: 2000; */
-/* 侧弹层 */
-/* @sideSliderZIndex: 1500; */
-/* 对话框层 */
-/* @dialogZIndex: 2000; */
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
 .bk-input {
   display: flex;
-  align-items: center;
+  align-items: stretch;
+  height: 32px;
   font-size: 12px;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  transition: all 0.3s;
 }
-.bk-input-text {
-  line-height: normal;
-  outline: none;
-  resize: none;
-  box-sizing: border-box;
-  position: relative;
+.bk-input--suffix-icon {
+  padding-right: 10px;
+  font-size: 16px;
+  color: #c4c6cc;
+  align-self: center;
+}
+.bk-input--large {
+  height: 38px;
+  font-size: 16px;
+}
+.bk-input--small {
+  height: 26px;
+  font-size: 12px;
+}
+.bk-input.is-focused:not(.is-readonly) {
+  border-color: #3a84ff;
+  outline: 0;
+  box-shadow: 0px 0px 3px 0px #a3c5fd;
+}
+.bk-input.is-disabled {
+  cursor: not-allowed;
+  background-color: #fafbfd;
+  opacity: 1;
+}
+.bk-input--prefix-area,
+.bk-input--suffix-area {
   display: flex;
-  align-items: center;
-  flex: 1;
-  height: 32px;
   padding: 0 10px;
   color: #63656e;
+  background-color: #f4f6fa;
+  border-right: 1px solid #c4c6cc;
+  align-items: center;
+}
+.bk-input--suffix-area {
+  border: 0;
+  border-left: 1px solid #c4c6cc;
+}
+.bk-input--max-length {
+  align-self: center;
+  padding-right: 10px;
+}
+.bk-input--max-length span {
+  color: #979ba5;
+}
+.bk-input--text {
+  padding: 0 10px;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 1;
+  color: #63656e;
   background-color: white;
   background-image: none;
-  border: 1px solid #dcdee5;
-  border-radius: 2px;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
   transition: all 0.3s;
+  flex: 1;
 }
-.bk-input-text:focus {
-  border-color: var(--primary-color);
-  outline: 0;
+.bk-input--text[type='search']::-webkit-search-decoration,
+.bk-input--text[type='search']::-webkit-search-cancel-button,
+.bk-input--text[type='search']::-webkit-search-results-button,
+.bk-input--text[type='search']::-webkit-search-results-decoration {
+  appearance: none;
 }
-.bk-input-text-disabled {
-  background-color: #fafbfd;
-  cursor: not-allowed;
-  opacity: 1;
+.bk-input--text [type=search]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
 }
-.bk-input-text[disabled] {
-  background-color: #fafbfd;
-  cursor: not-allowed;
-  opacity: 1;
+.bk-input--text [type=search]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.bk-input--text[type='number']::-webkit-inner-spin-button,
+.bk-input--text[type='number']::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+.bk-input--text::placeholder {
+  color: #c4c6cc;
 }
-.bk-input-text-lg {
+.bk-input--number-control {
+  width: 26px;
+  height: 100%;
+  font-size: 0;
+  flex-direction: column;
+}
+.bk-input--number-control span {
+  display: block;
+  height: 50%;
+  overflow: hidden;
+  color: #c4c6cc;
+}
+.bk-input--number-control svg {
   font-size: 16px;
-  height: 38px;
 }
-.bk-input-text-sm {
-  font-size: 12px;
-  height: 26px;
+.bk-input--number-control span:first-child {
+  transform: rotate(180deg);
+}
+.bk-input--number-control span:hover {
+  background-color: #f4f6fa;
 }