chore: init o-select

2020-05-04 16:33:43 +08:00 · 2020-05-04 16:33:43 +08:00 · b8cd317c81
parent 8078298aff
commit b8cd317c81
16 changed files with 2755 additions and 0 deletions
--- a/components/select/README.md
+++ b/components/select/README.md
@ -0,0 +1,52 @@
+## ActionSheet
+
+Mobile pop-up options list
+
+* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ)
+
+## Import
+
+```js
+import '@omiu/action-sheet'
+```
+
+Or use script tag to ref it.
+
+
+```html
+<script src="https://unpkg.com/@omiu/action-sheet"></script>
+```
+
+## Usage
+
+```html
+<o-action-sheet></o-action-sheet>
+```
+
+## API
+
+### Props
+
+```tsx
+{
+  type: string,
+  menus: any[],
+  actions: any[],
+  show: boolean
+}
+```
+
+### 默认属性
+
+```tsx
+{
+  type: '',
+  menus: [],
+  actions: [],
+  show: false
+}
+```
+### Events
+
+* item-click
+* close
--- a/components/select/demos/js-demo/index.html
+++ b/components/select/demos/js-demo/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+  <meta charset="UTF-8" />
+  <title>Omiu ActionSheet</title>
+</head>
+
+<body>
+
+  <a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
+    <img src="//alloyteam.github.io/github.png" alt="">
+  </a>
+  <script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
+  <script src="https://unpkg.com/@omiu/button@0.0.7/src/index.js"></script>
+  <script src="../../src/index.js"></script>
+
+  <o-select items="[{label:'ItemA', value: 1},{ label:'ItemB', value: 2}]"></o-select>
+  <script>
+
+
+  </script>
+</body>
+
+</html>
--- a/components/select/package.json
+++ b/components/select/package.json
@ -0,0 +1,101 @@
+{
+  "name": "@omiu/action-sheet",
+  "version": "0.0.4",
+  "description": "Mobile pop-up options list",
+  "docsExtend": {
+    "cnName": "弹出式菜单",
+    "cnDescription": "移动端弹出式选项列表",
+    "codepen": "wvKdoNJ",
+    "codepenHeight": 351,
+    "codepenDefaultTab": "html,result"
+  },
+  "main": "src/index.js",
+  "module": "src/index.esm.js",
+  "types": "src/index.d.ts",
+  "scripts": {
+    "docs": "node ./scripts/docs-gen.js",
+    "start": "node ./scripts/webpack.build.js -- demo",
+    "build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
+  },
+  "typings": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/omi.git"
+  },
+  "files": [
+    "src",
+    "dist",
+    "typings.json"
+  ],
+  "keywords": [
+    "omiu",
+    "omi",
+    "omio",
+    "preact",
+    "react",
+    "virtual dom",
+    "vdom",
+    "components",
+    "virtual",
+    "dom"
+  ],
+  "author": "dntzhang <dntzhang@qq.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Tencent/omi/issues"
+  },
+  "homepage": "http://omijs.org",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^11.1.0",
+    "css": "^2.2.4",
+    "css-loader": "^1.0.1",
+    "file": "^0.2.2",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.4.5",
+    "node-sass": "^4.12.0",
+    "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",
+    "ts-loader": "^5.4.4",
+    "typescript": "^3.2.1",
+    "url": "^0.11.0",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-server": "^3.1.10",
+    "webpack-merge": "^4.1.4"
+  },
+  "greenkeeper": {
+    "ignore": [
+      "babel-cli",
+      "babel-core",
+      "babel-eslint",
+      "babel-loader",
+      "jscodeshift",
+      "rollup-plugin-babel"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "semi": false,
+    "tabWidth": 2,
+    "useTabs": false
+  },
+  "dependencies": {
+    "@omiu/common": "latest",
+    "omi": "latest"
+  }
+}
--- a/components/select/scripts/docs-gen.js
+++ b/components/select/scripts/docs-gen.js
@ -0,0 +1,153 @@
+//自动扫描 index.tsx 生成 readme
+const fs = require('fs')
+
+const content = fs.readFileSync('./src/index.tsx', 'utf-8')
+
+const props = extract('interface Props {', content).replace('interface Props ', '')
+
+const defaultProps = extract('static defaultProps = {', content).replace('static defaultProps = ', '').replace(/  }/g, '}').replace(/    /g, '  ')
+
+
+const eventContexts = content.match(new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g'))
+const package = require('../package.json')
+const packageName = package.name
+const name = packageName.split('/')[1]
+
+const upperCaseName = name.split('-').map(item => {
+  return item.charAt(0).toUpperCase() + item.slice(1)
+}).join('')
+const tagName = 'o-' + name
+
+//fire 附近打标标记 event.detail 类型？
+let events, eventMap
+if (eventContexts) {
+
+  events = eventContexts.map(event => {
+    return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '')
+  })
+  eventMap = {}
+  events.forEach(event => {
+    eventMap[event] = 1
+  })
+}
+
+const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName}
+
+${package.docsExtend.cnDescription}
+
+<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
+  (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+
+## 导入
+
+\`\`\`js
+import '${packageName}'
+\`\`\`
+
+或者直接 script 标签引入。
+
+
+\`\`\`html
+<script src="https://unpkg.com/${packageName}"></script>
+\`\`\`
+
+## 使用
+
+\`\`\`html
+<${tagName}></${tagName}>
+\`\`\`
+
+
+## API
+
+### 属性
+
+\`\`\`tsx
+${props}
+\`\`\`
+
+${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
+${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
+  return `* ${event}\n`
+}).join('') : ''}`
+
+fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent)
+
+
+
+const enContent = `## ${upperCaseName}
+
+${package.description}
+
+<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
+  (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+
+## Import
+
+\`\`\`js
+import '${packageName}'
+\`\`\`
+
+Or use script tag to ref it.
+
+
+\`\`\`html
+<script src="https://unpkg.com/${packageName}"></script>
+\`\`\`
+
+## Usage
+
+\`\`\`html
+<${tagName}></${tagName}>
+\`\`\`
+
+## API
+
+### Props
+
+\`\`\`tsx
+${props}
+\`\`\`
+
+${defaultProps ? '### 默认属性\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
+${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
+  return `* ${event}\n`
+}).join('') : ''}`
+
+
+fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent)
+
+
+fs.writeFileSync(`../${name}/README.md`, enContent.replace(/<iframe[\s\S]*?<\/iframe>/, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`))
+// console.log(props)
+// console.log(defaultProps)
+// console.log(Object.keys(eventMap))
+
+
+
+function extract(startWith, str) {
+  const start = str.indexOf(startWith)
+  if (start === -1) return ''
+  let end = start + startWith.length
+  let stackCount = 1
+  while (end < str.length) {
+    if (str[end] === '}') {
+      if (stackCount === 1) {
+
+        break
+      } else {
+        stackCount--
+      }
+    } else if (str[end] === '{') {
+      stackCount++
+    }
+
+    end++
+  }
+
+  return str.substring(start, end + 1)
+}
--- a/components/select/scripts/rollup.config.js
+++ b/components/select/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/select/scripts/rollup.end.js
+++ b/components/select/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/select/scripts/webpack.build.js
+++ b/components/select/scripts/webpack.build.js
@ -0,0 +1,102 @@
+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]
+
+const name = 'o-' + componentName
+const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUpperCase() + name.slice(1)).join('')
+
+
+const config = {
+  devtool: 'source-map',
+  plugins: [
+    new ProgressBarPlugin()
+  ],
+  entry: {
+    [name]: './src/index.tsx'
+  },
+  output: {
+    path: path.resolve(__dirname, '../src/'),
+    filename: 'index.js',
+    libraryTarget: 'umd',
+    library: library,
+    libraryExport: "default",
+    globalObject: 'this'
+  },
+  mode: 'development',
+  module: {
+    rules: [{
+      test: /\.scss$/,
+      use: [
+        'to-string-loader',
+        'css-loader',
+        {
+          loader: 'resolve-url-loader'
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            sourceMap: true,
+
+            // mdc-web doesn't use sass-loader's normal syntax for imports
+            // across modules, so we add all module directories containing
+            // mdc-web components to the Sass include path
+            // https://github.com/material-components/material-components-web/issues/351
+            includePaths: glob.sync(path.join(__dirname, '../node_modules/@material')).map((dir) => path.dirname(dir))
+
+          }
+        }
+      ]
+    },
+    {
+      test: /\.css$/,
+      use: [
+        'to-string-loader',
+        'css-loader',
+        {
+          loader: 'resolve-url-loader'
+        }
+      ]
+    },
+    {
+      test: /\.less$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'resolve-url-loader'
+        },
+        'less-loader'
+      ]
+    },
+    {
+      test: /\.(jpe?g|png|gif|svg)$/i,
+      loader: "url-loader"
+    },
+    {
+      test: /\.[t|j]sx?$/,
+      use: 'ts-loader',
+      exclude: /node_modules/
+    }
+    ]
+  },
+  watch: process.argv[3] === 'demo',
+  externals: {
+    'omi': {
+      commonjs: "omi",
+      commonjs2: "omi",
+      amd: "omi",
+      root: "Omi"
+    }
+  }
+}
+
+webpack(config, (err, stats) => { // Stats Object
+  if (err || stats.hasErrors()) {
+    // Handle errors here
+  }
+  // Done processing
+
+})
--- a/components/select/src/index.css
+++ b/components/select/src/index.css
@ -0,0 +1,152 @@
+.o-actionsheet {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  -webkit-transform: translate(0, 100%);
+  transform: translate(0, 100%);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 5000;
+  width: 100%;
+  background-color: #EFEFF4;
+  -webkit-transition: -webkit-transform .3s;
+  transition: -webkit-transform .3s;
+  transition: transform .3s;
+  transition: transform .3s, -webkit-transform .3s; }
+
+.o-actionsheet__title {
+  position: relative;
+  height: 65px;
+  padding: 0 20px;
+  line-height: 1.4;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  text-align: center;
+  font-size: 14px;
+  color: #808080;
+  background: #FCFCFD; }
+
+.o-actionsheet__title:before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  border-bottom: 1px solid #e5e5e5;
+  color: #e5e5e5;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5); }
+
+.o-actionsheet__title .o-actionsheet__title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; }
+
+.o-actionsheet__menu {
+  background-color: #FCFCFD; }
+
+.o-actionsheet__action {
+  margin-top: 6px;
+  background-color: #FCFCFD; }
+
+.o-actionsheet__cell {
+  position: relative;
+  padding: 10px 0;
+  text-align: center;
+  font-size: 18px; }
+
+.o-actionsheet__cell:before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1px;
+  border-top: 1px solid #e5e5e5;
+  color: #e5e5e5;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5); }
+
+.o-actionsheet__cell:active {
+  background-color: #ECECEC; }
+
+.o-actionsheet__cell:first-child:before {
+  display: none; }
+
+.o-skin_android .o-actionsheet {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  bottom: auto;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 274px;
+  box-sizing: border-box;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background: transparent;
+  -webkit-transition: -webkit-transform .3s;
+  transition: -webkit-transform .3s;
+  transition: transform .3s;
+  transition: transform .3s, -webkit-transform .3s; }
+
+.o-skin_android .o-actionsheet__action {
+  display: none; }
+
+.o-skin_android .o-actionsheet__menu {
+  border-radius: 2px;
+  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1); }
+
+.o-skin_android .o-actionsheet__cell {
+  padding: 13px 24px;
+  font-size: 16px;
+  line-height: 1.4;
+  text-align: left; }
+
+.o-skin_android .o-actionsheet__cell:first-child {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px; }
+
+.o-skin_android .o-actionsheet__cell:last-child {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px; }
+
+.o-actionsheet_toggle {
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0); }
+
+.mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  opacity: 0.4;
+  z-index: 100;
+  left: 0;
+  top: 0; }
+
+.o-skin_android .o-actionsheet_toggle {
+  opacity: 1 !important;
+  top: 50% !important;
+  bottom: auto !important; }
+
+.o-skin_android .o-actionsheet {
+  opacity: 0;
+  transition: opacity .3s;
+  top: 150%;
+  bottom: 0; }
--- a/components/select/src/index.d.ts
+++ b/components/select/src/index.d.ts
@ -0,0 +1,15 @@
+import { WeElement } from 'omi';
+interface Props {
+    items: any[];
+}
+export default class Select extends WeElement<Props> {
+    static css: any;
+    static defaultProps: {};
+    static propTypes: {
+        items: ArrayConstructor;
+    };
+    installed(): void;
+    updated(): void;
+    render(props: any): JSX.Element;
+}
+export {};
--- a/components/select/src/index.esm.js
+++ b/components/select/src/index.esm.js
@ -0,0 +1,311 @@
+/**
+ * @omiu/action-sheet v0.0.4 http://omijs.org
+ * Front End Cross-Frameworks Framework.
+ * By dntzhang https://github.com/dntzhang
+ * Github: https://github.com/Tencent/omi
+ * MIT Licensed.
+ */
+
+import { classNames, h, 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 = `.o-actionsheet {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  -webkit-transform: translate(0, 100%);
+  transform: translate(0, 100%);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 5000;
+  width: 100%;
+  background-color: #EFEFF4;
+  -webkit-transition: -webkit-transform .3s;
+  transition: -webkit-transform .3s;
+  transition: transform .3s;
+  transition: transform .3s, -webkit-transform .3s; }
+
+.o-actionsheet__title {
+  position: relative;
+  height: 65px;
+  padding: 0 20px;
+  line-height: 1.4;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  text-align: center;
+  font-size: 14px;
+  color: #808080;
+  background: #FCFCFD; }
+
+.o-actionsheet__title:before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  border-bottom: 1px solid #e5e5e5;
+  color: #e5e5e5;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5); }
+
+.o-actionsheet__title .o-actionsheet__title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; }
+
+.o-actionsheet__menu {
+  background-color: #FCFCFD; }
+
+.o-actionsheet__action {
+  margin-top: 6px;
+  background-color: #FCFCFD; }
+
+.o-actionsheet__cell {
+  position: relative;
+  padding: 10px 0;
+  text-align: center;
+  font-size: 18px; }
+
+.o-actionsheet__cell:before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1px;
+  border-top: 1px solid #e5e5e5;
+  color: #e5e5e5;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5); }
+
+.o-actionsheet__cell:active {
+  background-color: #ECECEC; }
+
+.o-actionsheet__cell:first-child:before {
+  display: none; }
+
+.o-skin_android .o-actionsheet {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  bottom: auto;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 274px;
+  box-sizing: border-box;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background: transparent;
+  -webkit-transition: -webkit-transform .3s;
+  transition: -webkit-transform .3s;
+  transition: transform .3s;
+  transition: transform .3s, -webkit-transform .3s; }
+
+.o-skin_android .o-actionsheet__action {
+  display: none; }
+
+.o-skin_android .o-actionsheet__menu {
+  border-radius: 2px;
+  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1); }
+
+.o-skin_android .o-actionsheet__cell {
+  padding: 13px 24px;
+  font-size: 16px;
+  line-height: 1.4;
+  text-align: left; }
+
+.o-skin_android .o-actionsheet__cell:first-child {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px; }
+
+.o-skin_android .o-actionsheet__cell:last-child {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px; }
+
+.o-actionsheet_toggle {
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0); }
+
+.mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  opacity: 0.4;
+  z-index: 100;
+  left: 0;
+  top: 0; }
+
+.o-skin_android .o-actionsheet_toggle {
+  opacity: 1 !important;
+  top: 50% !important;
+  bottom: auto !important; }
+
+.o-skin_android .o-actionsheet {
+  opacity: 0;
+  transition: opacity .3s;
+  top: 150%;
+  bottom: 0; }
+`
+
+
+var ActionSheet = /** @class */ (function (_super) {
+    __extends(ActionSheet, _super);
+    function ActionSheet() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleMaskClick = function (e) {
+            _this.hide();
+            _this.fire('close');
+        };
+        return _this;
+    }
+    ActionSheet.prototype.renderMenuItem = function () {
+        var _this = this;
+        return this.props.menus.map(function (menu, idx) {
+            var _a;
+            var label = menu.label, className = menu.className, others = __rest(menu, ["label", "className"]);
+            var cls = classNames((_a = {
+                    'o-actionsheet__cell': true
+                },
+                _a[className] = className,
+                _a));
+            return (h("div", __assign({ key: idx, onClick: function (_) {
+                    _this.hide();
+                    _this.fire('item-click', menu);
+                } }, others, { class: cls }), label));
+        });
+    };
+    ActionSheet.prototype.show = function () {
+        this.updateProps({
+            show: true
+        });
+    };
+    ActionSheet.prototype.hide = function () {
+        this.updateProps({
+            show: false
+        });
+    };
+    ActionSheet.prototype.renderActions = function () {
+        var _this = this;
+        return this.props.actions.map(function (action, idx) {
+            var _a;
+            var label = action.label, className = action.className, others = __rest(action, ["label", "className"]);
+            var cls = classNames((_a = {
+                    'o-actionsheet__cell': true
+                },
+                _a[className] = className,
+                _a));
+            return (h("div", __assign({ key: idx }, others, { onClick: function (_) {
+                    _this.hide();
+                    _this.fire('item-click', action);
+                }, className: cls }), label));
+        });
+    };
+    ActionSheet.prototype.render = function () {
+        var _a = this.props, show = _a.show, type = _a.type, menus = _a.menus, actions = _a.actions, others = __rest(_a, ["show", "type", "menus", "actions"]);
+        var cls = classNames({
+            'o-actionsheet': true,
+            'o-actionsheet_toggle': show
+        });
+        var styleType = type ? type : 'ios';
+        return (h("div", { className: styleType === 'android' ? 'o-skin_android' : '' },
+            h("div", { class: "mask", style: { display: show ? 'block' : 'none' }, onClick: this.handleMaskClick }),
+            h("div", __assign({ className: cls }, others),
+                h("div", { className: "o-actionsheet__menu" }, this.renderMenuItem()),
+                h("div", { className: "o-actionsheet__action" }, this.renderActions()))));
+    };
+    ActionSheet.css = css;
+    ActionSheet.defaultProps = {
+        type: '',
+        menus: [],
+        actions: [],
+        show: false
+    };
+    ActionSheet.propTypes = {
+        type: String,
+        menus: Array,
+        actions: Array,
+        show: Boolean
+    };
+    ActionSheet = __decorate([
+        tag('o-action-sheet')
+    ], ActionSheet);
+    return ActionSheet;
+}(WeElement));
+
+export default ActionSheet;
+//# sourceMappingURL=index.esm.js.map
--- a/components/select/src/index.esm.js.map
+++ b/components/select/src/index.esm.js.map
--- a/components/select/src/index.js
+++ b/components/select/src/index.js
--- a/components/select/src/index.js.map
+++ b/components/select/src/index.js.map
--- a/components/select/src/index.scss
+++ b/components/select/src/index.scss
--- a/components/select/src/index.tsx
+++ b/components/select/src/index.tsx
@ -0,0 +1,74 @@
+import { tag, WeElement, classNames, h } from 'omi'
+import * as css from './index.scss'
+
+
+interface Props {
+  items: any[]
+}
+
+
+@tag('o-select')
+export default class Select extends WeElement<Props> {
+  static css = css
+
+  static defaultProps = {
+
+  }
+
+  static propTypes = {
+    items: Array
+  }
+
+  installed() {
+    const width = this.rootNode.getBoundingClientRect().width
+
+    const dropdown = this.rootNode.querySelector('.o-select-dropdown')
+
+    dropdown.style.minWidth = width + 'px'
+  }
+
+  updated() {
+    const width = this.rootNode.getBoundingClientRect().width
+
+    const dropdown = this.rootNode.querySelector('.o-select-dropdown')
+
+    dropdown.style.minWidth = width + 'px'
+  }
+
+  render(props) {
+
+    return (
+      <div class="o-select">
+        <div class="o-input o-input--suffix is-focus">
+          <input type="text" readonly="readonly" autocomplete="off" placeholder="请选择" class="o-input__inner" />
+          <span class="o-input__suffix">
+            <span class="o-input__suffix-inner">
+              <i class="o-select__caret o-input__icon o-icon-arrow-up is-reverse"></i>
+            </span>
+          </span>
+        </div>
+
+        <div class="o-select-dropdown o-popper" style="min-width: 240px; transform-origin: center top; z-index: 2080; position: absolute; top: 35px; left: 0;" x-placement="bottom-start">
+          <div class="o-scrollbar" style="">
+            <div class="o-select-dropdown__wrap o-scrollbar__wrap o-scrollbar__wrap--hidden-default">
+              <ul class="o-scrollbar__view o-select-dropdown__list">
+                {props.items.map(item => {
+                  //hover
+                  return <li class="o-select-dropdown__item"><span>{item.label}</span></li>
+                })}
+              </ul></div><div class="o-scrollbar__bar is-horizontal">
+              <div class="o-scrollbar__thumb" style="transform: translateX(0%);">
+              </div>
+            </div><div class="o-scrollbar__bar is-vertical">
+              <div class="o-scrollbar__thumb" style="transform: translateY(0%);">
+              </div>
+            </div>
+          </div>
+          <div x-arrow="" class="popper__arrow" style="left: 35px;">
+
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
--- a/components/select/tsconfig.json
+++ b/components/select/tsconfig.json
@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "experimentalDecorators": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "target": "es5",
+    "allowJs": true,
+    "declaration": true
+  },
+  "include": [
+    "src/**/*"
+  ]
+}