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

package/dist/bkui-vue.umd.js

@@ -9263,8 +9263,9 @@ ${$(r2)}`), n2;
     showControl: PropTypes.bool.def(true),
     showClearOnlyHover: PropTypes.bool.def(false),
     precision: PropTypes.number.def(0).validate((val) => val >= 0 && val < 20),
-    modelValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    size: PropTypes.size()
+    modelValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(""),
+    size: PropTypes.size(),
+    rows: PropTypes.number
   };
   const inputEvents = ["update:modelValue", "focus", "blur", "change", "clear", "input", "keypress", "keydown", "keyup", "enter", "paste"];
   const EventEnum = stringEnum([...inputEvents]);
@@ -9276,7 +9277,8 @@ ${$(r2)}`), n2;
     setup(props, ctx) {
       const isFocused = vue.ref(false);
       const isCNInput = vue.ref(false);
-      const inputClsPrefix = "bk-input";
+      const isTextArea = vue.computed(() => props.type === "textarea");
+      const inputClsPrefix = vue.computed(() => isTextArea.value ? "bk-textarea" : "bk-input");
       const _a = ctx.attrs, {
         class: cls,
         style
@@ -9285,13 +9287,13 @@ ${$(r2)}`), n2;
         "style"
       ]);
       const inputCls = vue.computed(() => classes({
-        [`${inputClsPrefix}--${props.size}`]: !!props.size,
+        [`${inputClsPrefix.value}--${props.size}`]: !!props.size,
         "is-focused": isFocused.value,
         "is-readonly": props.readonly,
         "is-disabled": props.disabled,
         "is-simplicity": props.behavior === "simplicity",
         [`${cls}`]: !!cls
-      }, inputClsPrefix));
+      }, inputClsPrefix.value));
       const suffixIconMap = {
         search: () => vue.createVNode(search, null, null),
         password: () => vue.createVNode(eye, {
@@ -9377,11 +9379,28 @@ ${$(r2)}`), n2;
         ctx.emit(EventEnum["update:modelValue"], newVal);
       }
       function getCls(name) {
-        return `${inputClsPrefix}--${name}`;
+        return `${inputClsPrefix.value}--${name}`;
       }
       function handleVisibleChange() {
         pwdVisible.value = !pwdVisible.value;
       }
+      const bindProps = vue.computed(() => ({
+        value: props.modelValue,
+        maxlength: props.maxlength,
+        placeholder: props.placeholder,
+        readonly: props.readonly,
+        disabled: props.disabled,
+        onInput: handleInput,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onPaste: handlePaste,
+        onChange: handleChange,
+        onKeypress: handleKeyPress,
+        onKeydown: handleKeydown,
+        onKeyup: handleKeyup,
+        onCompositionstart: handleCompositionStart,
+        onCompositionend: handleCompositionEnd
+      }));
       return () => {
         var _a2, _b, _c, _d, _e, _f;
         return vue.createVNode("div", {
@@ -9391,31 +9410,18 @@ ${$(r2)}`), n2;
           "class": getCls("prefix-area")
         }, [vue.createVNode("span", {
           "class": getCls("prefix-area--text")
-        }, [props.prefix])]), vue.createVNode("input", vue.mergeProps(inputAttrs, {
-          "class": `${inputClsPrefix}--text`,
-          "value": props.modelValue,
+        }, [props.prefix])]), isTextArea.value ? vue.createVNode("textarea", vue.mergeProps(inputAttrs, bindProps.value, {
+          "rows": props.rows
+        }), null) : vue.createVNode("input", vue.mergeProps(inputAttrs, {
+          "class": `${inputClsPrefix.value}--text`,
           "type": pwdVisible.value && props.type === "password" ? "text" : props.type,
-          "maxlength": props.maxlength,
           "step": props.step,
           "max": props.max,
-          "min": props.min,
-          "placeholder": props.placeholder,
-          "readonly": props.readonly,
-          "disabled": props.disabled,
-          "onInput": handleInput,
-          "onFocus": handleFocus,
-          "onBlur": handleBlur,
-          "onPaste": handlePaste,
-          "onChange": handleChange,
-          "onKeypress": handleKeyPress,
-          "onKeydown": handleKeydown,
-          "onKeyup": handleKeyup,
-          "onCompositionstart": handleCompositionStart,
-          "onCompositionend": handleCompositionEnd
-        }), null), props.clearable && !!props.modelValue && vue.createVNode(close$1, {
+          "min": props.min
+        }, bindProps.value), null), !isTextArea.value && props.clearable && !!props.modelValue && vue.createVNode(close$1, {
           "onClick": clear,
           "class": clearCls.value
-        }, null), suffixIcon.value, typeof props.maxlength === "number" && props.showWordLimit && vue.createVNode("p", {
+        }, null), suffixIcon.value, typeof props.maxlength === "number" && (props.showWordLimit || isTextArea.value) && vue.createVNode("p", {
           "class": getCls("max-length")
         }, [props.modelValue.toString().length, vue.createTextVNode("/"), vue.createVNode("span", null, [ceilMaxLength.value])]), isNumberInput.value && props.showControl && vue.createVNode("div", {
           "class": getCls("number-control")
@@ -12490,7 +12496,7 @@ ${$(r2)}`), n2;
     const {
       width
     } = root.getBoundingClientRect() || {};
-    let avgWidth = width;
+    let avgWidth = width - 4;
     const avgColIndexList = [];
     const resolveColNumberWidth = (col, numWidth, resetAvgWidth = true) => {
       Object.assign(col, {
@@ -12574,11 +12580,13 @@ ${$(r2)}`), n2;
   };
   class TableRender {
     constructor(props, ctx, reactiveProp, colgroups) {
+      __publicField(this, "getColumnClass", (colIndex) => `${this.uuid}-column-${colIndex}`);
       this.props = props;
       this.context = ctx;
       this.reactiveProp = reactiveProp;
       this.colgroups = colgroups;
       this.plugins = new TablePlugins(props, ctx);
+      this.uuid = random(8);
     }
     get propActiveCols() {
       return this.reactiveProp.activeColumns;
@@ -12660,12 +12668,13 @@ ${$(r2)}`), n2;
           "style": rowStyle,
           "onClick": (e) => this.handleRowClick(e, row, index, rows),
           "onDblclick": (e) => this.handleRowDblClick(e, row, index, rows)
-        }, [this.props.columns.map((column) => vue.createVNode("td", {
+        }, [this.props.columns.map((column, index2) => vue.createVNode("td", {
+          "class": this.getColumnClass(index2),
           "colspan": 1,
           "rowspan": 1
         }, [vue.createVNode("div", {
           "class": "cell"
-        }, [this.renderCell(row, column, index, rows)])]))]);
+        }, [this.renderCell(row, column, index2, rows)])]))]);
       })]);
     }
     handleRowClick(e, row, index, rows) {
@@ -12689,12 +12698,10 @@ ${$(r2)}`), n2;
         const colCls = classes({
           active: this.isColActive(index)
         });
-        const colStyle = {
-          width: resolveWidth(column.calcWidth)
-        };
+        const width = `${resolveWidth(column.calcWidth)}`.replace(/px$/i, "");
         return vue.createVNode("col", {
           "class": colCls,
-          "style": colStyle
+          "width": width
         }, null);
       })]);
     }
@@ -20092,6 +20099,125 @@ ${$(r2)}`), n2;
     }
   });
   const BkForm = withInstallProps(Form, { FormItem });
+  var Dropdown = vue.defineComponent({
+    name: "BkDropdown",
+    props: {
+      isShow: PropTypes.bool.def(false),
+      placement: PropTypes.commonType(["auto", "auto-start", "auto-end", "top", "right", "bottom", "left", "top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end"], "placement").def("bottom"),
+      trigger: PropTypes.commonType(["hover", "click", "manual"], "trigger").def("hover"),
+      disabled: PropTypes.bool.def(false),
+      extCls: PropTypes.string
+    },
+    emits: ["showChange"],
+    setup(props, {
+      emit
+    }) {
+      let popoverInstance = /* @__PURE__ */ Object.create(null);
+      const reference2 = vue.ref(null);
+      const refContent = vue.ref(null);
+      vue.onMounted(() => {
+        registerDropdown();
+      });
+      vue.onBeforeUnmount(() => {
+        destoryDropdown();
+      });
+      vue.watch(() => props.isShow, (val) => {
+        vue.nextTick(() => {
+          if (props.trigger === "manual" && popoverInstance && !props.disabled) {
+            val ? popoverInstance.show() : popoverInstance.hide();
+          }
+        });
+      });
+      vue.watch(() => props.disabled, (val) => handleUpdateDisabled(val));
+      const registerDropdown = () => {
+        if (props.disabled)
+          return;
+        popoverInstance = new BKPopover(reference2.value, refContent.value, {
+          placement: props.placement,
+          trigger: props.trigger
+        });
+        props.trigger === "manual" && props.isShow && popoverInstance.show();
+      };
+      const destoryDropdown = () => {
+        if (popoverInstance) {
+          const instance = popoverInstance;
+          instance.isShow && instance.hide();
+          instance.destroy();
+          popoverInstance = null;
+          props.trigger === "manual" && emit("showChange", false);
+        }
+      };
+      const handleUpdateDisabled = (val) => {
+        const instance = popoverInstance;
+        props.trigger === "manual" && !val && emit("showChange", false);
+        instance.updateDisabled(val);
+      };
+      return {
+        reference: reference2,
+        refContent
+      };
+    },
+    render() {
+      var _a, _b, _c, _d;
+      const wrapperClasses = classes({
+        "bk-dropdown": true
+      }, this.$props.extCls);
+      return vue.createVNode("div", {
+        "class": wrapperClasses
+      }, [vue.createVNode("div", {
+        "ref": "reference",
+        "class": "bk-dropdown-reference"
+      }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), vue.createVNode("div", {
+        "ref": "refContent",
+        "class": "bk-dropdown-content"
+      }, [(_d = (_c = this.$slots).content) == null ? void 0 : _d.call(_c)])]);
+    }
+  });
+  var DropdownItem = vue.defineComponent({
+    name: "BkDropdownItem",
+    props: {
+      extCls: PropTypes.string
+    },
+    emits: ["click"],
+    setup(props, {
+      emit
+    }) {
+      const handleClick = (evt) => {
+        emit("click", evt);
+      };
+      const wrapperCLasses = vue.computed(() => ["bk-dropdown-item", props.extCls]);
+      return {
+        wrapperCLasses,
+        handleClick
+      };
+    },
+    render() {
+      var _a, _b;
+      return vue.createVNode("li", {
+        "class": this.wrapperCLasses,
+        "onClick": this.handleClick
+      }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]);
+    }
+  });
+  var DropdownMenu = vue.defineComponent({
+    name: "BkDropdownMenu",
+    props: {
+      extCls: PropTypes.string
+    },
+    setup(props) {
+      const wrapperCLasses = vue.computed(() => ["bk-dropdown-menu", props.extCls]);
+      return {
+        wrapperCLasses
+      };
+    },
+    render() {
+      var _a, _b;
+      return vue.createVNode("ul", {
+        "class": this.wrapperCLasses
+      }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]);
+    }
+  });
+  const BkDropdown = withInstallProps(Dropdown, { DropdownMenu, DropdownItem });
   var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Alert: BkAlert,
@@ -20141,7 +20267,11 @@ ${$(r2)}`), n2;
     Tree: BkTree,
     VirtualRender: BkVirtualRender,
     Form: BkForm,
-    FormItem
+    FormItem,
+    Pagination: BkPagination,
+    Dropdown: BkDropdown,
+    DropdownMenu,
+    DropdownItem
   }, Symbol.toStringTag, { value: "Module" }));
   const createInstall = (prefix = "Bk") => (app) => {
     const pre = app.config.globalProperties.bkUIPrefix || prefix;
@@ -20176,6 +20306,9 @@ ${$(r2)}`), n2;
   exports2.DatePicker = BkDatePicker;
   exports2.Dialog = BkDialog;
   exports2.Divider = BkDivider;
+  exports2.Dropdown = BkDropdown;
+  exports2.DropdownItem = DropdownItem;
+  exports2.DropdownMenu = DropdownMenu;
   exports2.Exception = BkException;
   exports2.FixedNavbar = BkFixedNavbar;
   exports2.Form = BkForm;
@@ -20188,6 +20321,7 @@ ${$(r2)}`), n2;
   exports2.Modal = BkModal;
   exports2.Navigation = Navigation;
   exports2.Notify = Notify;
+  exports2.Pagination = BkPagination;
   exports2.Popover = BkPopover;
   exports2.Progress = BkProgress;
   exports2.Radio = BkRadio;

package/dist/style.css

@@ -789,7 +789,10 @@ optgroup {
   border-color: #dcdee5;
 }
 .bk-button.is-text {
+  height: auto;
   font-size: 14px;
+  font-size: inherit;
+  line-height: 1;
   color: #63656e;
   text-decoration: none;
   cursor: pointer;
@@ -1159,6 +1162,35 @@ optgroup {
 .bk-fade-transtion .bk-fade-leave-to {
   opacity: 0;
 }
+.bk-textarea {
+  width: 100%;
+  min-height: 70px;
+  font-size: 12px;
+  line-height: 20px;
+  background-color: white;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  box-sizing: border-box;
+  transition: all 0.3s;
+}
+.bk-textarea > textarea {
+  width: 100%;
+  padding: 5px 10px;
+  line-height: 1.5;
+  text-align: left;
+  vertical-align: middle;
+  border: 0;
+  outline: none;
+  resize: none;
+}
+.bk-textarea--max-length {
+  align-self: center;
+  padding-right: 10px;
+  margin: 0;
+}
+.bk-textarea--max-length span {
+  color: #979ba5;
+}
 .bk-input {
   display: flex;
   align-items: stretch;
@@ -1188,12 +1220,24 @@ optgroup {
 }
 .bk-input--large {
   height: 38px;
+  font-size: 14px;
+}
+.bk-input--large--max-length {
   font-size: 16px;
 }
 .bk-input--small {
   height: 26px;
   font-size: 12px;
 }
+.bk-input--small--max-length {
+  font-size: 12px;
+}
+.bk-input--default {
+  font-size: 12px;
+}
+.bk-input--default--max-length {
+  font-size: 12px;
+}
 .bk-input.is-focused:not(.is-readonly) {
   border-color: #3a84ff;
   outline: 0;
@@ -1231,7 +1275,6 @@ optgroup {
 }
 .bk-input--text {
   padding: 0 10px;
-  font-size: 12px;
   line-height: 1;
   color: #63656e;
   background-color: white;
@@ -2763,6 +2806,7 @@ optgroup {
 .bk-table .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
+  table-layout: fixed;
 }
 .bk-table .bk-table-head table th,
 .bk-table .bk-table-body table th,
@@ -2774,7 +2818,6 @@ optgroup {
 .bk-table .bk-table-body table th .cell,
 .bk-table .bk-table-head table td .cell,
 .bk-table .bk-table-body table td .cell {
-  height: var(--row-height);
   padding: 0 15px;
   overflow: hidden;
   line-height: var(--row-height);
@@ -2804,23 +2847,24 @@ optgroup {
 .bk-table .bk-table-footer {
   line-height: 40px;
 }
-.bk-table.bordered-row .cell {
+.bk-table.bordered-row td,
+.bk-table.bordered-row th {
   border-bottom: 1px solid #dcdee5;
 }
 .bk-table.bordered-outer {
   border-right: 1px solid #dcdee5;
   border-left: 1px solid #dcdee5;
 }
-.bk-table.bordered-col th .cell,
-.bk-table.bordered-col td .cell {
+.bk-table.bordered-col th,
+.bk-table.bordered-col td {
   border-right: 1px solid #dcdee5;
 }
-.bk-table.bordered-col th:last-child .cell,
-.bk-table.bordered-col td:last-child .cell {
+.bk-table.bordered-col th:last-child,
+.bk-table.bordered-col td:last-child {
   border-right: none;
 }
-.bk-table.bordered-none th .cell,
-.bk-table.bordered-none td .cell {
+.bk-table.bordered-none th,
+.bk-table.bordered-none td {
   border-top: none;
   border-right: none;
   border-bottom: none;
@@ -4689,23 +4733,16 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
   scrollbar-width: thin;
 }
 .bk-virtual-render.bk-scroll-x::-webkit-scrollbar {
-  height: 8px;
-  background-color: transparent;
-}
-.bk-virtual-render.bk-scroll-x::-webkit-scrollbar-thumb {
-  background-color: #a0a0a0;
-  border-radius: 8px;
+  height: 6px;
 }
 .bk-virtual-render.bk-scroll-y {
   overflow-y: auto;
 }
 .bk-virtual-render.bk-scroll-y::-webkit-scrollbar {
-  width: 6px;
-  background-color: transparent;
+  width: 4px;
 }
 .bk-virtual-render.bk-scroll-y::-webkit-scrollbar-thumb {
-  background-color: #dcdee5;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 /* 边框色 */
 /* 按钮、表单边框颜色、禁用时文本颜色 */

package/lib/button/button.css

@@ -210,7 +210,10 @@
   border-color: #dcdee5;
 }
 .bk-button.is-text {
+  height: auto;
   font-size: 14px;
+  font-size: inherit;
+  line-height: 1;
   color: #63656e;
   text-decoration: none;
   cursor: pointer;

package/lib/button/button.less

@@ -127,7 +127,10 @@
   }
 
   &.is-text {
+    height: auto;
     font-size: @font-size-medium;
+    font-size: inherit;
+    line-height: 1;
     color: @default-color;
     text-decoration: none;
     cursor: pointer;

package/lib/button/button.variable.css

@@ -303,7 +303,10 @@
   border-color: var(--disable-color);
 }
 .bk-button.is-text {
+  height: auto;
   font-size: var(--font-size-medium);
+  font-size: inherit;
+  line-height: 1;
   color: var(--default-color);
   text-decoration: none;
   cursor: pointer;

package/lib/components.d.ts

@@ -37,3 +37,5 @@ export { default as Transfer } from './transfer';
 export { default as Tree } from './tree';
 export { default as VirtualRender } from './virtual-render';
 export { default as Form, BkFormItem as FormItem } from './form';
+export { default as Pagination } from './pagination';
+export { default as Dropdown, BkDropdownMenu as DropdownMenu, BkDropdownItem as DropdownItem } from './dropdown';

package/lib/input/index.d.ts

@@ -8,6 +8,7 @@ declare const BkInput: {
             prefix: string;
             step: number;
             disabled: boolean;
+            modelValue: string | number;
             readonly: boolean;
             clearable: boolean;
             behavior: string;
@@ -21,6 +22,7 @@ declare const BkInput: {
             showControl: boolean;
             showClearOnlyHover: boolean;
             precision: number;
+            rows: number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             type: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -86,8 +88,13 @@ declare const BkInput: {
             } & {
                 validator: import("vue-types/dist/types").ValidatorFunction<unknown>;
             };
-            modelValue: import("vue-types").VueTypeDef<string | number>;
+            modelValue: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
             size: import("vue-types").VueTypeDef<string>;
+            rows: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
         }>> & {
             onPaste?: (...args: any[]) => any;
             onFocus?: (...args: any[]) => any;
@@ -100,7 +107,7 @@ declare const BkInput: {
             "onUpdate:modelValue"?: (...args: any[]) => any;
             onClear?: (...args: any[]) => any;
             onEnter?: (...args: any[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "placeholder" | "prefix" | "step" | "disabled" | "readonly" | "clearable" | "behavior" | "max" | "min" | "maxlength" | "prefixIcon" | "suffixIcon" | "suffix" | "showWordLimit" | "showControl" | "showClearOnlyHover" | "precision">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "placeholder" | "prefix" | "step" | "disabled" | "modelValue" | "readonly" | "clearable" | "behavior" | "max" | "min" | "maxlength" | "prefixIcon" | "suffixIcon" | "suffix" | "showWordLimit" | "showControl" | "showClearOnlyHover" | "precision" | "rows">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -179,8 +186,13 @@ declare const BkInput: {
             } & {
                 validator: import("vue-types/dist/types").ValidatorFunction<unknown>;
             };
-            modelValue: import("vue-types").VueTypeDef<string | number>;
+            modelValue: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
             size: import("vue-types").VueTypeDef<string>;
+            rows: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
         }>> & {
             onPaste?: (...args: any[]) => any;
             onFocus?: (...args: any[]) => any;
@@ -199,6 +211,7 @@ declare const BkInput: {
             prefix: string;
             step: number;
             disabled: boolean;
+            modelValue: string | number;
             readonly: boolean;
             clearable: boolean;
             behavior: string;
@@ -212,6 +225,7 @@ declare const BkInput: {
             showControl: boolean;
             showClearOnlyHover: boolean;
             precision: number;
+            rows: number;
         }> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -297,8 +311,13 @@ declare const BkInput: {
         } & {
             validator: import("vue-types/dist/types").ValidatorFunction<unknown>;
         };
-        modelValue: import("vue-types").VueTypeDef<string | number>;
+        modelValue: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
         size: import("vue-types").VueTypeDef<string>;
+        rows: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        };
     }>> & {
         onPaste?: (...args: any[]) => any;
         onFocus?: (...args: any[]) => any;
@@ -380,8 +399,13 @@ declare const BkInput: {
     } & {
         validator: import("vue-types/dist/types").ValidatorFunction<unknown>;
     };
-    modelValue: import("vue-types").VueTypeDef<string | number>;
+    modelValue: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
     size: import("vue-types").VueTypeDef<string>;
+    rows: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
 }>> & {
     onPaste?: (...args: any[]) => any;
     onFocus?: (...args: any[]) => any;
@@ -400,6 +424,7 @@ declare const BkInput: {
     prefix: string;
     step: number;
     disabled: boolean;
+    modelValue: string | number;
     readonly: boolean;
     clearable: boolean;
     behavior: string;
@@ -413,5 +438,6 @@ declare const BkInput: {
     showControl: boolean;
     showClearOnlyHover: boolean;
     precision: number;
+    rows: number;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
 export default BkInput;

package/lib/input/input.css

@@ -19,6 +19,35 @@
 .bk-fade-transtion .bk-fade-leave-to {
   opacity: 0;
 }
+.bk-textarea {
+  width: 100%;
+  min-height: 70px;
+  font-size: 12px;
+  line-height: 20px;
+  background-color: white;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  box-sizing: border-box;
+  transition: all 0.3s;
+}
+.bk-textarea > textarea {
+  width: 100%;
+  padding: 5px 10px;
+  line-height: 1.5;
+  text-align: left;
+  vertical-align: middle;
+  border: 0;
+  outline: none;
+  resize: none;
+}
+.bk-textarea--max-length {
+  align-self: center;
+  padding-right: 10px;
+  margin: 0;
+}
+.bk-textarea--max-length span {
+  color: #979ba5;
+}
 .bk-input {
   display: flex;
   align-items: stretch;
@@ -48,12 +77,24 @@
 }
 .bk-input--large {
   height: 38px;
+  font-size: 14px;
+}
+.bk-input--large--max-length {
   font-size: 16px;
 }
 .bk-input--small {
   height: 26px;
   font-size: 12px;
 }
+.bk-input--small--max-length {
+  font-size: 12px;
+}
+.bk-input--default {
+  font-size: 12px;
+}
+.bk-input--default--max-length {
+  font-size: 12px;
+}
 .bk-input.is-focused:not(.is-readonly) {
   border-color: #3a84ff;
   outline: 0;
@@ -91,7 +132,6 @@
 }
 .bk-input--text {
   padding: 0 10px;
-  font-size: 12px;
   line-height: 1;
   color: #63656e;
   background-color: white;