feat(input): support events

2020-04-25 09:09:13 +08:00 · 2020-04-25 09:09:13 +08:00 · a94edf9d7e
parent d1b4e862fb
commit a94edf9d7e
14 changed files with 1106 additions and 2155 deletions
--- a/components/input/demos/js-demo/index.html
+++ b/components/input/demos/js-demo/index.html
@ -39,7 +39,7 @@
 		</div>

 		<div>
-				<o-input max-length="20"  placeholder="请输入用户名"></o-input>
+				<o-input max-length="10"  placeholder="请输入用户名"></o-input>

 			</div>

--- a/components/input/package.json
+++ b/components/input/package.json
@ -1,12 +1,13 @@
 {
  "name": "@omiu/input",
-  "version": "0.0.1",
+  "version": "0.0.2",
  "description": "Omi UI Components.",
  "main": "src/index.js",
+  "module": "src/index.esm.js",
  "types": "src/index.d.ts",
  "scripts": {
    "start": "node ./scripts/webpack.build.js -- demo",
-    "build": "node ./scripts/webpack.build.js -- build"
+    "build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
  },
  "typings": "./dist/index.d.ts",
  "repository": {
@ -37,6 +38,7 @@
  },
  "homepage": "http://omijs.org",
  "devDependencies": {
+    "@rollup/plugin-commonjs": "^11.1.0",
    "css": "^2.2.4",
    "css-loader": "^1.0.1",
    "file": "^0.2.2",
@ -49,7 +51,13 @@
    "omi": "latest",
    "omio": "latest",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "progress-bar-webpack-plugin": "^2.1.0",
    "resolve-url-loader": "^3.1.0",
+    "rollup": "^2.7.1",
+    "rollup-plugin-license": "^2.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-scss": "^2.4.0",
+    "rollup-plugin-typescript": "^1.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "to-string-loader": "^1.1.5",
--- a/components/input/scripts/docs-gen.js
+++ b/components/input/scripts/docs-gen.js
@ -0,0 +1 @@
+自动扫描 index.tsx 生成 readme
--- a/components/input/scripts/rollup.config.js
+++ b/components/input/scripts/rollup.config.js
@ -0,0 +1,38 @@
+import nodeResolve from "rollup-plugin-node-resolve";
+
+import typescript from 'rollup-plugin-typescript';
+import scss from 'rollup-plugin-scss'
+import commonjs from '@rollup/plugin-commonjs';
+const fs = require('fs')
+const license = require("rollup-plugin-license");
+const pkg = require("../package.json");
+const licensePlugin = license({
+  banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.`
+});
+
+export default {
+  input: "src/index.tsx",
+  output: {
+    format: "es",
+    file: "./src/index.esm.js",
+    name: pkg.name,
+    sourcemap: true,
+    strict: true
+  },
+  plugins: [
+    nodeResolve({
+    	main: true
+    }),
+    scss({
+      //output: false,
+      output: function (styles, styleNodes) {
+        fs.writeFileSync('./src/index.css', styles)
+      },
+    }),
+    typescript(),
+    commonjs(),
+
+    licensePlugin
+  ],
+  external: ['omi']
+};
--- a/components/input/scripts/rollup.end.js
+++ b/components/input/scripts/rollup.end.js
@ -0,0 +1,16 @@
+const fs = require('fs')
+
+const css = fs.readFileSync('./src/index.css')
+
+const js = fs.readFileSync('./src/index.esm.js', 'utf-8')
+
+
+fs.writeFileSync('./src/index.esm.js',
+js.replace(`var css = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});`, `
+var css = \`${css}\`
+`)
+)
+
+
--- a/components/input/scripts/webpack.build.js
+++ b/components/input/scripts/webpack.build.js
@ -1,7 +1,7 @@
 const path = require('path')
 const glob = require('glob')
 const webpack = require('webpack')
-
+const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 const pkgName = require('../package.json')
 const componentName = pkgName.name.split('/')[1]

@ -11,6 +11,9 @@ const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUppe

 const config = {
  devtool: 'source-map',
+  plugins: [
+    new ProgressBarPlugin()
+  ],
  entry: {
    [name]: './src/index.tsx'
  },
--- a/components/input/src/index.css
+++ b/components/input/src/index.css
@ -0,0 +1,397 @@
+:host {
+  display: inline-block; }
+
+.o-textarea {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+  font-size: 14px; }
+
+.o-textarea__inner {
+  display: block;
+  resize: vertical;
+  padding: 5px 15px;
+  line-height: 1.5;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: inherit;
+  color: #606266;
+  background-color: #FFF;
+  background-image: none;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
+
+.o-textarea__inner::-webkit-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea__inner:-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea__inner::-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea__inner::placeholder {
+  color: #C0C4CC; }
+
+.o-textarea__inner:hover {
+  border-color: #C0C4CC; }
+
+.o-textarea__inner:focus {
+  outline: 0;
+  border-color: #07c160;
+  border-color: var(--o-primary, #07c160); }
+
+.o-textarea .o-input__count {
+  color: #909399;
+  background: #FFF;
+  position: absolute;
+  font-size: 12px;
+  bottom: 5px;
+  right: 10px; }
+
+.o-textarea.is-disabled .o-textarea__inner {
+  background-color: #F5F7FA;
+  border-color: #E4E7ED;
+  color: #C0C4CC;
+  cursor: not-allowed; }
+
+.o-textarea.is-disabled .o-textarea__inner::-webkit-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea.is-disabled .o-textarea__inner:-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea.is-disabled .o-textarea__inner::-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea.is-disabled .o-textarea__inner::placeholder {
+  color: #C0C4CC; }
+
+.o-textarea.is-exceed .o-textarea__inner {
+  border-color: #F56C6C; }
+
+.o-textarea.is-exceed .o-input__count {
+  color: #F56C6C; }
+
+.o-input {
+  position: relative;
+  font-size: 14px;
+  display: inline-block;
+  width: 100%; }
+
+.o-input::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px; }
+
+.o-input::-webkit-scrollbar:horizontal {
+  height: 6px; }
+
+.o-input::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  width: 6px;
+  background: #b4bccc; }
+
+.o-input::-webkit-scrollbar-corner {
+  background: #fff; }
+
+.o-input::-webkit-scrollbar-track {
+  background: #fff; }
+
+.o-input::-webkit-scrollbar-track-piece {
+  background: #fff;
+  width: 6px; }
+
+.o-input .o-input__clear {
+  color: #C0C4CC;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
+
+.o-input .o-input__clear:hover {
+  color: #909399; }
+
+.o-input .o-input__count {
+  height: 100%;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  color: #909399;
+  font-size: 12px; }
+
+.o-input .o-input__count .o-input__count-inner {
+  background: #FFF;
+  line-height: initial;
+  display: inline-block;
+  padding: 0 5px; }
+
+.o-input__inner {
+  -webkit-appearance: none;
+  background-color: #FFF;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #606266;
+  display: inline-block;
+  font-size: inherit;
+  height: 40px;
+  line-height: 40px;
+  outline: 0;
+  padding: 0 15px;
+  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%; }
+
+.o-input__prefix,
+.o-input__suffix {
+  position: absolute;
+  top: 0;
+  -webkit-transition: all .3s;
+  text-align: center;
+  height: 100%;
+  color: #C0C4CC; }
+
+.o-input__inner::-webkit-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input__inner:-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input__inner::-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input__inner::placeholder {
+  color: #C0C4CC; }
+
+.o-input__inner:hover {
+  border-color: #C0C4CC; }
+
+.o-input.is-active .o-input__inner,
+.o-input__inner:focus {
+  border-color: #07c160;
+  border-color: var(--o-primary, #07c160);
+  outline: 0; }
+
+.o-input__suffix {
+  right: 5px;
+  transition: all .3s;
+  pointer-events: none; }
+
+.o-input__suffix-inner {
+  pointer-events: all; }
+
+.o-input__prefix {
+  left: 5px;
+  transition: all .3s; }
+
+.o-input__icon {
+  position: absolute;
+  width: 35px;
+  height: 100%;
+  right: 0;
+  top: 0;
+  padding-top: 0.215em;
+  text-align: center;
+  color: #bfcbd9;
+  transition: all .3s; }
+
+.o-input--small .o-input__icon,
+.o-input--medium .o-input__icon {
+  padding-top: 0.135em; }
+
+.o-input--mini .o-input__icon {
+  padding-top: 0.125em; }
+
+.o-input__icon.is-prefix {
+  left: 0; }
+
+.o-input.o-input-prefix input {
+  padding-left: 30px; }
+
+.o-input.o-input-suffix input {
+  padding-right: 30px; }
+
+.o-input__icon:after {
+  content: '';
+  height: 100%;
+  width: 0;
+  display: inline-block;
+  vertical-align: middle; }
+
+.o-input__validateIcon {
+  pointer-events: none; }
+
+.o-input.is-disabled .o-input__inner {
+  background-color: #F5F7FA;
+  border-color: #E4E7ED;
+  color: #C0C4CC;
+  cursor: not-allowed; }
+
+.o-input.is-disabled .o-input__inner::-webkit-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input.is-disabled .o-input__inner:-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input.is-disabled .o-input__inner::-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input.is-disabled .o-input__inner::placeholder {
+  color: #C0C4CC; }
+
+.o-input.is-disabled .o-input__icon {
+  cursor: not-allowed; }
+
+.o-input.is-exceed .o-input__inner {
+  border-color: #F56C6C; }
+
+.o-input.is-exceed .o-input__suffix .o-input__count {
+  color: #F56C6C; }
+
+.o-input--suffix .o-input__inner {
+  padding-right: 30px; }
+
+.o-input--prefix .o-input__inner {
+  padding-left: 30px; }
+
+.o-input--medium {
+  font-size: 14px; }
+
+.o-input--medium .o-input__inner {
+  height: 36px;
+  line-height: 36px; }
+
+.o-input--medium .o-input__icon {
+  line-height: 36px; }
+
+.o-input--small {
+  font-size: 13px; }
+
+.o-input--small .o-input__inner {
+  height: 32px;
+  line-height: 32px; }
+
+.o-input--small .o-input__icon {
+  line-height: 32px; }
+
+.o-input--mini {
+  font-size: 12px; }
+
+.o-input--mini .o-input__inner {
+  height: 28px;
+  line-height: 28px; }
+
+.o-input--mini .o-input__icon {
+  line-height: 28px; }
+
+.o-input-group {
+  line-height: normal;
+  display: inline-table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0; }
+
+.o-input-group > .o-input__inner {
+  vertical-align: middle;
+  display: table-cell; }
+
+.o-input-group__append,
+.o-input-group__prepend {
+  background-color: #F5F7FA;
+  color: #909399;
+  vertical-align: middle;
+  display: table-cell;
+  position: relative;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  padding: 0 20px;
+  width: 1px;
+  white-space: nowrap; }
+
+.o-input-group--prepend .o-input__inner,
+.o-input-group__append {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0; }
+
+.o-input-group--append .o-input__inner,
+.o-input-group__prepend {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.o-input-group__append:focus,
+.o-input-group__prepend:focus {
+  outline: 0; }
+
+.o-input-group__append .o-button,
+.o-input-group__append .o-select,
+.o-input-group__prepend .o-button,
+.o-input-group__prepend .o-select {
+  display: inline-block;
+  margin: -10px -20px; }
+
+.o-input-group__append button.o-button,
+.o-input-group__append div.o-select .o-input__inner,
+.o-input-group__append div.o-select:hover .o-input__inner,
+.o-input-group__prepend button.o-button,
+.o-input-group__prepend div.o-select .o-input__inner,
+.o-input-group__prepend div.o-select:hover .o-input__inner {
+  border-color: transparent;
+  background-color: transparent;
+  color: inherit;
+  border-top: 0;
+  border-bottom: 0; }
+
+.o-input-group__append .o-button,
+.o-input-group__append .o-input,
+.o-input-group__prepend .o-button,
+.o-input-group__prepend .o-input {
+  font-size: inherit; }
+
+.o-input-group__prepend {
+  border-right: 0; }
+
+.o-input-group__append {
+  border-left: 0; }
+
+.o-input-group--append .o-select .o-input.is-focus .o-input__inner,
+.o-input-group--prepend .o-select .o-input.is-focus .o-input__inner {
+  border-color: transparent; }
+
+.o-input__inner::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0; }
+
+.o-icon-clear {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  margin-top: -0.5em;
+  cursor: pointer;
+  color: #bfcbd9;
+  display: none;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em; }
+
+.o-icon-clear:hover {
+  background: #b1b4b9;
+  color: white; }
+
+.o-input:hover .o-icon-clear {
+  display: block;
+  cursor: pointer; }
+
+.o-input .o-input__count {
+  position: absolute;
+  top: 0px;
+  right: 4px; }
--- a/components/input/src/index.d.ts
+++ b/components/input/src/index.d.ts
@ -1,6 +1,6 @@
 import { WeElement } from 'omi';
-import '@omiu/common/theme.ts';
 interface Props {
+    value?: string;
    disabled?: boolean;
    type?: string;
    placeholder?: string;
@ -10,6 +10,7 @@ interface Props {
    prefixIcon?: string;
    maxLength?: number;
    autoComplete?: string;
+    block?: boolean;
 }
 export default class Input extends WeElement<Props> {
    static css: any;
@ -19,6 +20,7 @@ export default class Input extends WeElement<Props> {
        rows: number;
        trim: boolean;
        autoComplete: string;
+        block: boolean;
    };
    static propTypes: {
        disabled: BooleanConstructor;
@ -30,9 +32,14 @@ export default class Input extends WeElement<Props> {
        prefixIcon: StringConstructor;
        maxLength: NumberConstructor;
        autoComplete: StringConstructor;
+        block: BooleanConstructor;
    };
    _tempTagName: string;
    valueLength: number;
+    handleBlur: () => void;
+    handleFocus: () => void;
+    handleChange: (evt: any) => void;
+    handleInput: (evt: any) => void;
    clearInput: () => void;
    render(props: any): JSX.Element;
 }
--- a/components/input/src/index.esm.js
+++ b/components/input/src/index.esm.js
@ -0,0 +1,554 @@
+/**
+ * @omiu/input v0.0.2 http://omijs.org
+ * Front End Cross-Frameworks Framework.
+ * By dntzhang https://github.com/dntzhang
+ * Github: https://github.com/Tencent/omi
+ * MIT Licensed.
+ */
+
+import { h, extractClass, tag, WeElement } from 'omi';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+
+var css = `:host {
+  display: inline-block; }
+
+.o-textarea {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+  font-size: 14px; }
+
+.o-textarea__inner {
+  display: block;
+  resize: vertical;
+  padding: 5px 15px;
+  line-height: 1.5;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: inherit;
+  color: #606266;
+  background-color: #FFF;
+  background-image: none;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
+
+.o-textarea__inner::-webkit-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea__inner:-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea__inner::-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea__inner::placeholder {
+  color: #C0C4CC; }
+
+.o-textarea__inner:hover {
+  border-color: #C0C4CC; }
+
+.o-textarea__inner:focus {
+  outline: 0;
+  border-color: #07c160;
+  border-color: var(--o-primary, #07c160); }
+
+.o-textarea .o-input__count {
+  color: #909399;
+  background: #FFF;
+  position: absolute;
+  font-size: 12px;
+  bottom: 5px;
+  right: 10px; }
+
+.o-textarea.is-disabled .o-textarea__inner {
+  background-color: #F5F7FA;
+  border-color: #E4E7ED;
+  color: #C0C4CC;
+  cursor: not-allowed; }
+
+.o-textarea.is-disabled .o-textarea__inner::-webkit-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea.is-disabled .o-textarea__inner:-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea.is-disabled .o-textarea__inner::-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-textarea.is-disabled .o-textarea__inner::placeholder {
+  color: #C0C4CC; }
+
+.o-textarea.is-exceed .o-textarea__inner {
+  border-color: #F56C6C; }
+
+.o-textarea.is-exceed .o-input__count {
+  color: #F56C6C; }
+
+.o-input {
+  position: relative;
+  font-size: 14px;
+  display: inline-block;
+  width: 100%; }
+
+.o-input::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px; }
+
+.o-input::-webkit-scrollbar:horizontal {
+  height: 6px; }
+
+.o-input::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  width: 6px;
+  background: #b4bccc; }
+
+.o-input::-webkit-scrollbar-corner {
+  background: #fff; }
+
+.o-input::-webkit-scrollbar-track {
+  background: #fff; }
+
+.o-input::-webkit-scrollbar-track-piece {
+  background: #fff;
+  width: 6px; }
+
+.o-input .o-input__clear {
+  color: #C0C4CC;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
+
+.o-input .o-input__clear:hover {
+  color: #909399; }
+
+.o-input .o-input__count {
+  height: 100%;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  color: #909399;
+  font-size: 12px; }
+
+.o-input .o-input__count .o-input__count-inner {
+  background: #FFF;
+  line-height: initial;
+  display: inline-block;
+  padding: 0 5px; }
+
+.o-input__inner {
+  -webkit-appearance: none;
+  background-color: #FFF;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #606266;
+  display: inline-block;
+  font-size: inherit;
+  height: 40px;
+  line-height: 40px;
+  outline: 0;
+  padding: 0 15px;
+  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%; }
+
+.o-input__prefix,
+.o-input__suffix {
+  position: absolute;
+  top: 0;
+  -webkit-transition: all .3s;
+  text-align: center;
+  height: 100%;
+  color: #C0C4CC; }
+
+.o-input__inner::-webkit-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input__inner:-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input__inner::-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input__inner::placeholder {
+  color: #C0C4CC; }
+
+.o-input__inner:hover {
+  border-color: #C0C4CC; }
+
+.o-input.is-active .o-input__inner,
+.o-input__inner:focus {
+  border-color: #07c160;
+  border-color: var(--o-primary, #07c160);
+  outline: 0; }
+
+.o-input__suffix {
+  right: 5px;
+  transition: all .3s;
+  pointer-events: none; }
+
+.o-input__suffix-inner {
+  pointer-events: all; }
+
+.o-input__prefix {
+  left: 5px;
+  transition: all .3s; }
+
+.o-input__icon {
+  position: absolute;
+  width: 35px;
+  height: 100%;
+  right: 0;
+  top: 0;
+  padding-top: 0.215em;
+  text-align: center;
+  color: #bfcbd9;
+  transition: all .3s; }
+
+.o-input--small .o-input__icon,
+.o-input--medium .o-input__icon {
+  padding-top: 0.135em; }
+
+.o-input--mini .o-input__icon {
+  padding-top: 0.125em; }
+
+.o-input__icon.is-prefix {
+  left: 0; }
+
+.o-input.o-input-prefix input {
+  padding-left: 30px; }
+
+.o-input.o-input-suffix input {
+  padding-right: 30px; }
+
+.o-input__icon:after {
+  content: '';
+  height: 100%;
+  width: 0;
+  display: inline-block;
+  vertical-align: middle; }
+
+.o-input__validateIcon {
+  pointer-events: none; }
+
+.o-input.is-disabled .o-input__inner {
+  background-color: #F5F7FA;
+  border-color: #E4E7ED;
+  color: #C0C4CC;
+  cursor: not-allowed; }
+
+.o-input.is-disabled .o-input__inner::-webkit-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input.is-disabled .o-input__inner:-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input.is-disabled .o-input__inner::-ms-input-placeholder {
+  color: #C0C4CC; }
+
+.o-input.is-disabled .o-input__inner::placeholder {
+  color: #C0C4CC; }
+
+.o-input.is-disabled .o-input__icon {
+  cursor: not-allowed; }
+
+.o-input.is-exceed .o-input__inner {
+  border-color: #F56C6C; }
+
+.o-input.is-exceed .o-input__suffix .o-input__count {
+  color: #F56C6C; }
+
+.o-input--suffix .o-input__inner {
+  padding-right: 30px; }
+
+.o-input--prefix .o-input__inner {
+  padding-left: 30px; }
+
+.o-input--medium {
+  font-size: 14px; }
+
+.o-input--medium .o-input__inner {
+  height: 36px;
+  line-height: 36px; }
+
+.o-input--medium .o-input__icon {
+  line-height: 36px; }
+
+.o-input--small {
+  font-size: 13px; }
+
+.o-input--small .o-input__inner {
+  height: 32px;
+  line-height: 32px; }
+
+.o-input--small .o-input__icon {
+  line-height: 32px; }
+
+.o-input--mini {
+  font-size: 12px; }
+
+.o-input--mini .o-input__inner {
+  height: 28px;
+  line-height: 28px; }
+
+.o-input--mini .o-input__icon {
+  line-height: 28px; }
+
+.o-input-group {
+  line-height: normal;
+  display: inline-table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0; }
+
+.o-input-group > .o-input__inner {
+  vertical-align: middle;
+  display: table-cell; }
+
+.o-input-group__append,
+.o-input-group__prepend {
+  background-color: #F5F7FA;
+  color: #909399;
+  vertical-align: middle;
+  display: table-cell;
+  position: relative;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  padding: 0 20px;
+  width: 1px;
+  white-space: nowrap; }
+
+.o-input-group--prepend .o-input__inner,
+.o-input-group__append {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0; }
+
+.o-input-group--append .o-input__inner,
+.o-input-group__prepend {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.o-input-group__append:focus,
+.o-input-group__prepend:focus {
+  outline: 0; }
+
+.o-input-group__append .o-button,
+.o-input-group__append .o-select,
+.o-input-group__prepend .o-button,
+.o-input-group__prepend .o-select {
+  display: inline-block;
+  margin: -10px -20px; }
+
+.o-input-group__append button.o-button,
+.o-input-group__append div.o-select .o-input__inner,
+.o-input-group__append div.o-select:hover .o-input__inner,
+.o-input-group__prepend button.o-button,
+.o-input-group__prepend div.o-select .o-input__inner,
+.o-input-group__prepend div.o-select:hover .o-input__inner {
+  border-color: transparent;
+  background-color: transparent;
+  color: inherit;
+  border-top: 0;
+  border-bottom: 0; }
+
+.o-input-group__append .o-button,
+.o-input-group__append .o-input,
+.o-input-group__prepend .o-button,
+.o-input-group__prepend .o-input {
+  font-size: inherit; }
+
+.o-input-group__prepend {
+  border-right: 0; }
+
+.o-input-group__append {
+  border-left: 0; }
+
+.o-input-group--append .o-select .o-input.is-focus .o-input__inner,
+.o-input-group--prepend .o-select .o-input.is-focus .o-input__inner {
+  border-color: transparent; }
+
+.o-input__inner::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0; }
+
+.o-icon-clear {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  margin-top: -0.5em;
+  cursor: pointer;
+  color: #bfcbd9;
+  display: none;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em; }
+
+.o-icon-clear:hover {
+  background: #b1b4b9;
+  color: white; }
+
+.o-input:hover .o-icon-clear {
+  display: block;
+  cursor: pointer; }
+
+.o-input .o-input__count {
+  position: absolute;
+  top: 0px;
+  right: 4px; }
+`
+
+
+var Input = /** @class */ (function (_super) {
+    __extends(Input, _super);
+    function Input() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.valueLength = 0;
+        _this.handleBlur = function () {
+            _this.fire('blur', _this.props.value);
+        };
+        _this.handleFocus = function () {
+            _this.fire('focus', _this.props.value);
+        };
+        _this.handleChange = function (evt) {
+            _this.props.value = evt.target.value;
+            _this.fire('change', _this.props.value);
+        };
+        _this.handleInput = function (evt) {
+            _this.props.value = evt.target.value;
+            _this.fire('change', _this.props.value);
+            if (_this.props.maxLength) {
+                _this.valueLength = evt.target.value.length;
+                _this.update();
+            }
+        };
+        _this.clearInput = function () {
+            _this.updateProps({
+                value: ''
+            });
+        };
+        return _this;
+    }
+    Input.prototype.render = function (props) {
+        var _a;
+        var type = props.type, size = props.size, suffixIcon = props.suffixIcon, prefixIcon = props.prefixIcon, autoComplete = props.autoComplete, validating = props.validating, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, trim = props.trim, otherProps = __rest(props, ["type", "size", "suffixIcon", "prefixIcon", "autoComplete", "validating", "onMouseEnter", "onMouseLeave", "trim"]);
+        this._tempTagName = 'o-icon-' + (suffixIcon || prefixIcon);
+        return (h("div", __assign({}, extractClass(props, 'o-input', (_a = {},
+            _a["o-input--" + size] = props.size,
+            _a['is-disabled'] = this.props.disabled,
+            _a['o-input-suffix'] = suffixIcon,
+            _a['o-input-prefix'] = prefixIcon,
+            _a)), { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
+            (prefixIcon || suffixIcon) && h(this._tempTagName, __assign({ css: "svg{\n\t\t\t\t\t\twidth: 1em;\n\t\t\t\t\t}" }, extractClass(props, 'o-input__icon', {
+                'is-prefix': prefixIcon,
+                'is-suffix': suffixIcon
+            }))),
+            h("input", __assign({}, otherProps, { 
+                // ref="input"
+                type: type, className: "o-input__inner", autocomplete: autoComplete, maxLength: props.maxLength, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput })),
+            props.clearable && h("svg", { onClick: this.clearInput, class: "o-icon-clear", fill: "currentColor", width: "1em", height: "1em", focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" },
+                h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })),
+            props.maxLength && h("span", { class: "o-input__count" },
+                h("span", { class: "o-input__count-inner" },
+                    this.valueLength,
+                    "/",
+                    props.maxLength))));
+    };
+    Input.css = css;
+    Input.defaultProps = {
+        type: 'text',
+        autosize: false,
+        rows: 2,
+        trim: false,
+        autoComplete: 'off',
+        block: false
+    };
+    Input.propTypes = {
+        disabled: Boolean,
+        type: String,
+        placeholder: String,
+        clearable: Boolean,
+        suffixIcon: String,
+        size: String,
+        prefixIcon: String,
+        maxLength: Number,
+        autoComplete: String,
+        block: Boolean
+    };
+    Input = __decorate([
+        tag('o-input')
+    ], Input);
+    return Input;
+}(WeElement));
+
+export default Input;
+//# sourceMappingURL=index.esm.js.map
--- a/components/input/src/index.esm.js.map
+++ b/components/input/src/index.esm.js.map
--- a/components/input/src/index.js
+++ b/components/input/src/index.js
--- a/components/input/src/index.js.map
+++ b/components/input/src/index.js.map
--- a/components/input/src/index.scss
+++ b/components/input/src/index.scss
@ -477,7 +477,8 @@
 }

 .o-input:hover .o-icon-clear {
-  display: block;
+	display: block;
+	cursor: pointer;
 }

 .o-input .o-input__count{
--- a/components/input/src/index.tsx
+++ b/components/input/src/index.tsx
@ -1,9 +1,8 @@
 import { tag, WeElement, h, extractClass, classNames } from 'omi'
 import * as css from './index.scss'
-//@ts-ignore
-import '@omiu/common/theme.ts'

 interface Props {
+	value?: string
 	disabled?: boolean
 	type?: string
 	placeholder?: string
@ -13,6 +12,7 @@ interface Props {
 	prefixIcon?: string
 	maxLength?: number
 	autoComplete?: string
+	block?: boolean
 }


@ -26,7 +26,8 @@ export default class Input extends WeElement<Props>{
 		autosize: false,
 		rows: 2,
 		trim: false,
-		autoComplete: 'off'
+		autoComplete: 'off',
+		block: false
 	}


@ -39,14 +40,37 @@ export default class Input extends WeElement<Props>{
 		size: String,
 		prefixIcon: String,
 		maxLength: Number,
-		autoComplete: String
+		autoComplete: String,
+		block: Boolean
 	}

 	_tempTagName: string
 	valueLength = 0

-	clearInput = () => {
+	handleBlur = () => {
+		this.fire('blur', this.props.value)
+	}
+	handleFocus = () => {
+		this.fire('focus', this.props.value)
+	}
+	handleChange = (evt) => {

+		this.props.value = evt.target.value
+		this.fire('change', this.props.value)
+	}
+
+	handleInput = (evt) => {
+		this.props.value = evt.target.value
+		this.fire('change', this.props.value)
+		if (this.props.maxLength) {
+			this.valueLength = evt.target.value.length
+			this.update()
+		}
+	}
+	clearInput = () => {
+		this.updateProps({
+			value: ''
+		})
 	}

 	render(props) {
@ -89,11 +113,13 @@ export default class Input extends WeElement<Props>{
 					type={type}
 					className="o-input__inner"
 					autocomplete={autoComplete}
-				// onChange={this.handleChange.bind(this)}
-				// onFocus={this.handleFocus.bind(this)}
-				// onBlur={this.handleBlur.bind(this)}
+					maxLength={props.maxLength}
+					onChange={this.handleChange}
+					onFocus={this.handleFocus}
+					onBlur={this.handleBlur}
+					onInput={this.handleInput}
 				/>
-				{props.clearable && <svg onClick={_ => { this.clearInput() }} class="o-icon-clear" fill="currentColor" width="1em" height="1em" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>}
+				{props.clearable && <svg onClick={this.clearInput} class="o-icon-clear" fill="currentColor" width="1em" height="1em" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>}

 				{props.maxLength && <span class="o-input__count"><span class="o-input__count-inner">
 					{this.valueLength}/{props.maxLength}