using local omi-weui

packages/omi-cli/template/weui/src/elements/app/index.js

@@ -15,6 +15,9 @@ import '../list-panel'
 import '../article-panel'
 import '../dialog-panel'
 import '../icon-panel'
+import '../loading-panel'
+import '../msg-panel'
+import '../toptip-panel'
 import route from 'omi-router'
 
 define('my-app', class extends WeElement {
@@ -45,11 +48,26 @@ define('my-app', class extends WeElement {
       this.data.atHome = false
     })
 
+    route('/msg', () => {
+      this.data.tag = 'msg-panel'
+      this.data.atHome = false
+    })
+
+    route('/toptip', () => {
+      this.data.tag = 'toptip-panel'
+      this.data.atHome = false
+    })
+
     route('/icon', () => {
       this.data.tag = 'icon-panel'
       this.data.atHome = false
     })
 
+    route('/loading', () => {
+      this.data.tag = 'loading-panel'
+      this.data.atHome = false
+    })
+
     route('/input', () => {
       alert('开发中，敬请期待')
     })
@@ -149,9 +167,12 @@ define('my-app', class extends WeElement {
                   <ow-cells class="page__category-content">
                     <ow-cell>Actionsheet</ow-cell>
                     <ow-cell href="#/dialog">Dialog</ow-cell>
-                    <ow-cell>Msg</ow-cell>
+                    <ow-cell href="#/msg">Msg</ow-cell>
+                    <ow-cell href="#/toptip">Toptip</ow-cell>
                     <ow-cell>Picker</ow-cell>
                     <ow-cell>Toast</ow-cell>
+                    <ow-cell href="#/loading">Loading</ow-cell>
+                    
                   </ow-cells>
                 </div>
               </li>

packages/omi-cli/template/weui/src/elements/article-panel/index.js

@@ -1,6 +1,6 @@
 import { define, WeElement } from 'omi'
 import style from './_index.css'
-import 'omi-weui/article'
+import '../../weui/article'
 import picArticle from './pic_article.png'
 
 define('article-panel', class extends WeElement {

packages/omi-cli/template/weui/src/elements/button-panel/index.js

@@ -1,6 +1,6 @@
 import { define, WeElement } from 'omi'
 import style from './_index.css'
-import 'omi-weui/button'
+import '../../weui/button'
 
 define('button-panel', class extends WeElement {
   css() {

packages/omi-cli/template/weui/src/elements/dialog-panel/index.js

@@ -1,7 +1,7 @@
 import { define, WeElement } from 'omi'
 import style from './_index.css'
-import 'omi-weui/dialog'
-import 'omi-weui/button'
+import '../../weui/dialog'
+import '../../weui/button'
 
 define('dialog-panel', class extends WeElement {
   static observe = true

packages/omi-cli/template/weui/src/elements/icon-panel/index.js

@@ -1,6 +1,6 @@
 import { define, WeElement } from 'omi'
 import style from './_index.css'
-import 'omi-weui/icon'
+import '../../weui/icon'
 
 define('icon-panel', class extends WeElement {
   css() {

packages/omi-cli/template/weui/src/elements/list-panel/index.js

@@ -1,6 +1,6 @@
 import { define, WeElement } from 'omi'
 import style from './_index.css'
-import 'omi-weui/list'
+import '../../weui/list'
 
 define('list-panel', class extends WeElement {
   css() {

packages/omi-cli/template/weui/src/elements/loading-panel/index.js

@@ -0,0 +1,17 @@
+import { define, WeElement } from 'omi'
+import style from './_index.css'
+import '../../weui/loading'
+
+define('loading-panel', class extends WeElement {
+  css() {
+    return style
+  }
+
+  render() {
+    return (
+      <div>
+        <ow-loading size="40px" />
+      </div>
+    )
+  }
+})

packages/omi-cli/template/weui/src/elements/msg-panel/index.js

@@ -0,0 +1,17 @@
+import { define, WeElement } from 'omi'
+import style from './_index.css'
+import '../../weui/msg'
+
+define('msg-panel', class extends WeElement {
+  css() {
+    return style
+  }
+
+  render() {
+    return (
+      <div>
+        <ow-msg type="success" title="提示" content="欢迎使用 Omi WeUI" />
+      </div>
+    )
+  }
+})

packages/omi-cli/template/weui/src/elements/toptip-panel/index.js

@@ -0,0 +1,41 @@
+import { define, WeElement } from 'omi'
+import style from './_index.css'
+import '../../weui/toptip'
+import '../../weui/button'
+
+define('toptip-panel', class extends WeElement {
+  static observe = true
+
+  css() {
+    return style
+  }
+
+  data = {
+    showToptip: false
+  }
+
+  onClick = () => {
+    this.data.showToptip = true
+  }
+
+  close = () => {
+    this.data.showToptip = false
+  }
+
+  confirm = () => {
+    this.data.showToptip = false
+  }
+  render(data) {
+    return (
+      <div>
+        <ow-button type="primary" onClick={this.onClick}>点击我显示弹窗</ow-button>
+        <ow-toptip
+          msg="出现了一个异常"
+          type="warn"
+          show={data.showToptip}
+          hide={this.hide}
+        />
+      </div>
+    )
+  }
+})

packages/omi-cli/template/weui/src/weui/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+      "env","omi"
+  ],
+  "plugins": [
+    "transform-class-properties"
+  ]
+}

packages/omi-cli/template/weui/src/weui/article/_index.scss

@@ -0,0 +1,26 @@
+.article {
+  padding: 10px;
+  text-align: left;
+  h1 {
+    font-size: 18px;
+    font-weight: normal;
+    padding: 10px 0;
+  }
+  h2 {
+    font-size: 16px;
+    font-weight: normal;
+    padding: 8px 0;
+  }
+
+  h3 {
+    font-size: 14px;
+    font-weight: normal;
+    padding: 5px auto;
+  }
+  img {
+    width: 100%;
+    min-height: 100px;
+    background: #eee;
+    display: block;
+  }
+}

packages/omi-cli/template/weui/src/weui/article/index.js

@@ -0,0 +1,11 @@
+import { define, WeElement } from 'omi'
+import style from './_index.scss'
+
+define('ow-article', class extends WeElement {
+  css() {
+    return style
+  }
+  render(props) {
+    return <div className="article">{props.children}</div>
+  }
+})

packages/omi-cli/template/weui/src/weui/button/_index.scss

@@ -0,0 +1,68 @@
+$primary-color: #1aad19;
+$primary-disabled-color: #9ed99d;
+$warn-color: #e64340;
+$warn-disabled-color: #ec8b89;
+$secondary-color: #353535;
+$secondary-disabled-color: rgba(0, 0, 0, .3);
+
+.ow-button{
+  padding: 10px 20px
+}
+
+.weui-button {
+  outline: none;
+  cursor: pointer;
+  font-size: 16px;
+  color: #fff;
+  padding: 14px;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-sizing: border-box
+}
+
+.weui-button-small {
+  outline: none;
+  cursor: pointer;
+  font-size: 14px;
+  color: #fff;
+  padding: 5px 15px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  margin: 10px;
+}
+
+.weui-button-primary {
+  background: $primary-color;
+}
+
+.weui-button-secondary {
+  background: $primary-color;
+}
+
+.weui-button-disabled {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.weui-button-warn {
+  background: $warn-color;
+}
+
+.weui-button-secondary {
+  background: transparent;
+  color: $secondary-color;
+  border: 1px solid $secondary-color;
+}
+
+.weui-button-disabled.weui-button-primary {
+  background: $primary-disabled-color;
+}
+
+.weui-button-disabled.weui-button-warn {
+  background: $warn-disabled-color;
+}
+
+.weui-button-disabled.weui-button-secondary {
+  color: $secondary-disabled-color;
+  border: 1px solid $secondary-disabled-color;
+}

packages/omi-cli/template/weui/src/weui/button/index.js

@@ -0,0 +1,20 @@
+import { define, WeElement } from 'omi'
+import style from './_index.scss'
+
+define('ow-button', class extends WeElement {
+  css() {
+    return style
+  }
+  render(props) {
+    const disabled = props.disabled ? 'weui-button-disabled' : null
+    const size = props.size&&props.size==='small'?'weui-button-small':'weui-button'
+    const type = props.type?`weui-button-${props.type}`:'weui-button-primary'
+    return (
+      <div className="ow-button">
+        <button className={`${size} ${type} ${disabled}`}>
+          {props.children}
+        </button>
+      </div>
+    )
+  }
+})

packages/omi-cli/template/weui/src/weui/cells/_index.css

@@ -0,0 +1,308 @@
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a{
+  text-decoration: none;
+}
+
+.weui-cells{
+  background-color:#FFFFFF;
+  line-height:1.47058824;
+  font-size:17px;
+  overflow:hidden;
+  position:relative;
+}
+.weui-cells: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);
+  z-index:2;
+}
+.weui-cells:after{
+  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);
+  z-index:2;
+}
+.weui-cells__title{
+  margin-top:.77em;
+  margin-bottom:.3em;
+  padding-left:15px;
+  padding-right:15px;
+  color:#808080;
+  font-size:14px;
+}
+.weui-cells__title + .weui-cells{
+  margin-top:0;
+}
+.weui-cells__tips{
+  margin-top:.3em;
+  color:#808080;
+  padding-left:15px;
+  padding-right:15px;
+  font-size:14px;
+}
+.weui-cell{
+  padding:10px 15px;
+  position:relative;
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:flex;
+  -webkit-box-align:center;
+  -webkit-align-items:center;
+          align-items:center;
+}
+.weui-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);
+  left:15px;
+  z-index:2;
+}
+.weui-cell:first-child:before{
+  display:none;
+}
+.weui-cell_primary{
+  -webkit-box-align:start;
+  -webkit-align-items:flex-start;
+          align-items:flex-start;
+}
+.weui-cell__bd{
+  -webkit-box-flex:1;
+  -webkit-flex:1;
+          flex:1;
+}
+.weui-cell__ft{
+  text-align:right;
+  color:#808080;
+}
+.weui-cell_swiped{
+  display:block;
+  padding:0;
+}
+.weui-cell_swiped > .weui-cell__bd{
+  position:relative;
+  z-index:1;
+  background-color:#FFFFFF;
+}
+.weui-cell_swiped > .weui-cell__ft{
+  position:absolute;
+  right:0;
+  top:0;
+  bottom:0;
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:flex;
+  color:#FFFFFF;
+}
+
+.weui-cells_radio .weui-cell__ft{
+  padding-left:0.35em;
+}
+.weui-cells_radio .weui-check:checked + .weui-icon-checked:before{
+  display:block;
+  content:'\EA08';
+  color:#09BB07;
+  font-size:16px;
+}
+.weui-cells_checkbox .weui-cell__hd{
+  padding-right:0.35em;
+}
+.weui-cells_checkbox .weui-icon-checked:before{
+  content:'\EA01';
+  color:#C9C9C9;
+  font-size:23px;
+  display:block;
+}
+.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{
+  content:'\EA06';
+  color:#09BB07;
+}
+
+
+.weui-cells_form .weui-cell__ft{
+  font-size:0;
+}
+.weui-cells_form .weui-icon-warn{
+  display:none;
+}
+.weui-cells_form input,
+.weui-cells_form textarea,
+.weui-cells_form label[for]{
+  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
+}
+.weui-cell_warn{
+  color:#E64340;
+}
+.weui-cell_warn .weui-icon-warn{
+  display:inline-block;
+}
+
+.weui-media-box_small-appmsg .weui-cells{
+  margin-top:0;
+}
+.weui-media-box_small-appmsg .weui-cells:before{
+  display:none;
+}
+
+
+
+.weui-cell_select-before{
+  padding-right:15px;
+}
+.weui-cell_select-before .weui-select{
+  width:105px;
+  box-sizing:border-box;
+}
+.weui-cell_select-before .weui-cell__hd{
+  position:relative;
+}
+.weui-cell_select-before .weui-cell__hd:after{
+  content:" ";
+  position:absolute;
+  right:0;
+  top:0;
+  width:1px;
+  bottom:0;
+  border-right:1px solid #e5e5e5;
+  color:#e5e5e5;
+  -webkit-transform-origin:100% 0;
+          transform-origin:100% 0;
+  -webkit-transform:scaleX(0.5);
+          transform:scaleX(0.5);
+}
+.weui-cell_select-before .weui-cell__hd:before{
+  content:" ";
+  display:inline-block;
+  height:6px;
+  width:6px;
+  border-width:2px 2px 0 0;
+  border-color:#C8C8CD;
+  border-style:solid;
+  -webkit-transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+          transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+  position:relative;
+  top:-2px;
+  position:absolute;
+  top:50%;
+  right:15px;
+  margin-top:-4px;
+}
+.weui-cell_select-before .weui-cell__bd{
+  padding-left:15px;
+}
+.weui-cell_select-before .weui-cell__bd:after{
+  display:none;
+}
+.weui-cell_select-after{
+  padding-left:15px;
+}
+.weui-cell_select-after .weui-select{
+  padding-left:0;
+}
+.weui-cell_vcode{
+  padding-top:0;
+  padding-right:0;
+  padding-bottom:0;
+}
+
+.weui-cell_switch{
+  padding-top:6.5px;
+  padding-bottom:6.5px;
+}
+
+
+.weui-cell_select{
+  padding:0;
+}
+.weui-cell_select .weui-select{
+  padding-right:30px;
+}
+.weui-cell_select .weui-cell__bd:after{
+  content:" ";
+  display:inline-block;
+  height:6px;
+  width:6px;
+  border-width:2px 2px 0 0;
+  border-color:#C8C8CD;
+  border-style:solid;
+  -webkit-transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+          transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+  position:relative;
+  top:-2px;
+  position:absolute;
+  top:50%;
+  right:15px;
+  margin-top:-4px;
+}
+
+.weui-cell_access{
+  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
+  color:inherit;
+}
+.weui-cell_access:active{
+  background-color:#ECECEC;
+}
+.weui-cell_access .weui-cell__ft{
+  padding-right:13px;
+  position:relative;
+}
+.weui-cell_access .weui-cell__ft:after{
+  content:" ";
+  display:inline-block;
+  height:6px;
+  width:6px;
+  border-width:2px 2px 0 0;
+  border-color:#C8C8CD;
+  border-style:solid;
+  -webkit-transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+          transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+  position:relative;
+  top:-2px;
+  position:absolute;
+  top:50%;
+  margin-top:-4px;
+  right:2px;
+}
+.weui-cell_link{
+  color:#586C94;
+  font-size:14px;
+}
+.weui-cell_link:first-child:before{
+  display:block;
+}
+
+
+.weui-cell_warn .weui-textarea-counter{
+  color:#E64340;
+}

packages/omi-cli/template/weui/src/weui/cells/index.js

@@ -0,0 +1,35 @@
+import { define, WeElement, getHost } from 'omi'
+import style from './_index.css'
+
+define('ow-cells', class extends WeElement {
+  css() {
+    return style + getHost(this).css()
+  }
+
+  render() {
+    return (
+      <div class="weui-cells">
+        <slot></slot>
+      </div>
+    )
+  }
+})
+
+
+define('ow-cell', class extends WeElement {
+  css() {
+    return style
+  }
+
+  render(props) {
+    return (
+      <a class='weui-cell weui-cell_access' href={props.href ? props.href : 'javascript:;'}>
+        <div class='weui-cell__bd'>
+          <p><slot></slot></p>
+        </div>
+        <div class='weui-cell__ft'>
+        </div>
+      </a>
+    )
+  }
+})

packages/omi-cli/template/weui/src/weui/dialog/_index.scss

@@ -0,0 +1,39 @@
+$primary-color: #1aad19;
+
+.ow-dialog {
+  position: fixed;
+  width: 80%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  z-index: 1;
+  text-align: center;
+  h1 {
+    font-size: 18px;
+    font-weight: normal;
+    padding: 20px;
+    margin: 0px;
+  }
+  p {
+    font-size: 16px;
+    color: #666;
+    padding-bottom: 20px;
+    margin: 0px;
+  }
+  a {
+    padding: 15px;
+    text-align: center;
+    font-size: 16px;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    border-top: 1px solid #eee;
+  }
+  .ok {
+    color: $primary-color;
+  }
+  .close {
+    border-right: 1px solid #eee;
+  }
+}

packages/omi-cli/template/weui/src/weui/dialog/index.js

@@ -0,0 +1,40 @@
+import { define, WeElement } from 'omi'
+import style from './_index.scss'
+import '../mask'
+
+define('ow-dialog', class extends WeElement {
+  close() {
+    this.props.close()
+  }
+
+  confirm(){
+    this.props.confirm()
+  }
+
+  css() {
+    return style
+  }
+
+  render(props) {
+    const display = props.show ? 'block' : 'none'
+    return (
+      <div className="wrap" style={{ display }}>
+        <div className="ow-dialog">
+          <h1>{props.title}</h1>
+          <p>{props.content}</p>
+          {props.type === 'confirm' ? (
+            <div>
+              <a className="close" onClick={this.close}>
+                取消
+              </a>
+              <a className="ok" onClick={this.confirm}>确定</a>
+            </div>
+          ) : (
+            <a className="ok" onClick={this.confirm}>确定</a>
+          )}
+        </div>
+        <ow-mask show={props.show} />
+      </div>
+    )
+  }
+})

packages/omi-cli/template/weui/src/weui/icon/_font.scss

@@ -0,0 +1,65 @@
+[class^='weui-icon-'],
+[class*=' weui-icon-'] {
+	display: inline-block;
+	vertical-align: middle;
+	font: normal normal normal 14px/1 'weui';
+	font-size: inherit;
+	text-rendering: auto;
+	-webkit-font-smoothing: antialiased;
+	&::before {
+		display: inline-block;
+		margin: 5px;
+	}
+}
+
+.weui-icon-circle:before {
+	content: '\EA01';
+}
+.weui-icon-download:before {
+	content: '\EA02';
+}
+.weui-icon-info:before {
+	content: '\EA03';
+}
+.weui-icon-safe-success:before {
+	content: '\EA04';
+}
+.weui-icon-safe-warn:before {
+	content: '\EA05';
+}
+.weui-icon-success:before {
+	content: '\EA06';
+}
+.weui-icon-success-circle:before {
+	content: '\EA07';
+}
+.weui-icon-success-no-circle:before {
+	content: '\EA08';
+}
+.weui-icon-waiting:before {
+	content: '\EA09';
+}
+.weui-icon-waiting-circle:before {
+	content: '\EA0A';
+}
+.weui-icon-warn:before {
+	content: '\EA0B';
+}
+.weui-icon-info-circle:before {
+	content: '\EA0C';
+}
+.weui-icon-cancel:before {
+	content: '\EA0D';
+}
+.weui-icon-search:before {
+	content: '\EA0E';
+}
+.weui-icon-clear:before {
+	content: '\EA0F';
+}
+.weui-icon-back:before {
+	content: '\EA10';
+}
+.weui-icon-delete:before {
+	content: '\EA11';
+}

packages/omi-cli/template/weui/src/weui/icon/_index.scss

@@ -0,0 +1,20 @@
+.weui-icon-small {
+  font-size: 24px;
+  color: #09bb07
+}
+
+.weui-icon-big {
+  font-size: 84px;
+  color: #09bb07
+}
+
+.weui-icon-info,[class^='weui-icon-waiting']{
+  color: #10aeff
+}
+.weui-icon-circle,.weui-icon-clear,.weui-icon-search{
+  color: #c9c9c9
+}
+
+.weui-icon-warn,.weui-icon-cancel{
+  color: #f43530;
+}

packages/omi-cli/template/weui/src/weui/icon/index.js

@@ -0,0 +1,15 @@
+import { define, WeElement } from 'omi'
+import './font-face.css'
+import style from './_index.scss'
+import font from './_font.scss'
+
+define('ow-icon', class extends WeElement {
+  css() {
+    return font + style
+  }
+  render(props) {
+    const size = props.size ? props.size : 'small'
+    const type = props.type ? props.type : 'success'
+    return <i className={`weui-icon-${type} weui-icon-${size}`} />
+  }
+})

packages/omi-cli/template/weui/src/weui/list-item/_index.scss

@@ -0,0 +1,109 @@
+:host-content(ow-list:host) {
+	background: #000;
+}
+
+li {
+	background: #fff;
+	position: relative;
+	display: inline-block;
+	display: flex;
+	padding: 10px;
+	align-items: center;
+  font-size: 16px;
+  &:active{
+    background: #f3f3f3
+  }
+	img {
+		height: 20px;
+		width: 20px;
+		margin: 5px;
+	}
+	.title {
+		flex: 1;
+		text-align: left;
+	}
+	.content {
+		padding: 0 5px;
+		color: #999;
+	}
+	i {
+		content: ' ';
+		display: inline-block;
+		height: 6px;
+		width: 6px;
+		border-width: 2px 2px 0 0;
+		border-color: #c8c8cd;
+		border-style: solid;
+		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+		margin: 5px;
+	}
+}
+
+.border-bottom-1px {
+	&::after {
+		content: ' ';
+		width: 100%;
+		display: block;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		border-top: 1px solid #d9d9d9;
+	}
+}
+
+@media (min-device-pixel-ratio: 1.5),(-webkit-min-device-pixel-ratio: 1.5) {
+	.border-bottom-1px {
+		&::after {
+      transform: scaleY(0.7);
+      -webkit-transform: scaleY(0.7);
+		}
+	}
+}
+
+@media (min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
+	.border-bottom-1px {
+		&::after {
+      transform: scaleY(0.5);
+      -webkit-transform: scaleY(0.5);
+		}
+	}
+}
+
+.border-1px {
+	&::after {
+		content: ' ';
+		width: 100%;
+		display: block;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		border-top: 1px solid #d9d9d9;
+  }
+  &::before {
+		content: ' ';
+		width: 100%;
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 0;
+		border-top: 1px solid #d9d9d9;
+  }
+}
+
+@media (min-device-pixel-ratio: 1.5),(-webkit-min-device-pixel-ratio: 1.5) {
+	.border-1px {
+		&::after,&::before {
+      transform: scaleY(0.7);
+      -webkit-transform: scaleY(0.7);
+		}
+	}
+}
+
+@media (min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
+	.border-1px {
+		&::after,&::before {
+      transform: scaleY(0.5);
+      -webkit-transform: scaleY(0.5);
+		}
+	}
+}

packages/omi-cli/template/weui/src/weui/list-item/index.js

@@ -0,0 +1,22 @@
+import { define, WeElement } from 'omi'
+import style from './_index.scss'
+
+define('ow-list-item', class extends WeElement {
+  css() {
+    return style
+  }
+  render(props) {
+    let border =
+    this.parentNode.className === 'ow-item'
+        ? 'border-bottom-1px'
+        : 'border-1px'
+    return (
+      <li className={border}>
+        {props.icon ? <img src={props.icon} /> : null}
+        <span class="title">{props.title}</span>
+        <span class="content">{props.content}</span>
+        {props.access ? <i /> : null}
+      </li>
+    )
+  }
+})

packages/omi-cli/template/weui/src/weui/list/_index.scss

@@ -0,0 +1,8 @@
+h2.title{
+  font-size: 14px;
+  font-weight: normal;
+  color: #999;
+  text-align: left;
+  padding: 10px 15px;
+  margin: 0
+}

packages/omi-cli/template/weui/src/weui/list/index.js

@@ -0,0 +1,19 @@
+import { define, WeElement } from 'omi'
+import style from './_index.scss'
+import '../list-item'
+
+define('ow-list', class extends WeElement {
+  css() {
+    return style
+  }
+  render(props) {
+    return (
+      <div className="ow-list">
+        <h2 className="title">{props.title}</h2>
+        <div className='ow-item'>
+          {props.children}
+        </div>
+      </div>
+    )
+  }
+})

packages/omi-cli/template/weui/src/weui/loading/_index.scss

@@ -0,0 +1,18 @@
+.ow-loading {
+  display: inline-block;
+  -webkit-animation: e 1s steps(12) infinite;
+  animation: e 1s steps(12) infinite;
+  background: url(./loading.svg);
+  background-size: 100%;
+}
+
+@keyframes e {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}

packages/omi-cli/template/weui/src/weui/loading/index.js

@@ -0,0 +1,16 @@
+import { define, WeElement } from 'omi'
+import style from './_index.scss'
+
+define('ow-loading', class extends WeElement {
+  css() {
+    return style
+  }
+  render(props) {
+    return (
+      <div
+        class="ow-loading"
+        style={{ width: props.size, height: props.size }}
+      />
+    )
+  }
+})

packages/omi-cli/template/weui/src/weui/loading/loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 100 100"><path fill="none" d="M0 0h100v100H0z"/><rect width="7" height="20" x="46.5" y="40" fill="#E9E9E9" rx="5" ry="5" transform="translate(0 -30)"/><rect width="7" height="20" x="46.5" y="40" fill="#989697" rx="5" ry="5" transform="rotate(30 105.98 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#9B999A" rx="5" ry="5" transform="rotate(60 75.98 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#A3A1A2" rx="5" ry="5" transform="rotate(90 65 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#ABA9AA" rx="5" ry="5" transform="rotate(120 58.66 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#B2B2B2" rx="5" ry="5" transform="rotate(150 54.02 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#BAB8B9" rx="5" ry="5" transform="rotate(180 50 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#C2C0C1" rx="5" ry="5" transform="rotate(-150 45.98 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#CBCBCB" rx="5" ry="5" transform="rotate(-120 41.34 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#D2D2D2" rx="5" ry="5" transform="rotate(-90 35 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#DADADA" rx="5" ry="5" transform="rotate(-60 24.02 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#E2E2E2" rx="5" ry="5" transform="rotate(-30 -5.98 65)"/></svg>

packages/omi-cli/template/weui/src/weui/mask/_index.scss

@@ -0,0 +1,11 @@
+.weui-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.8);
+}
+:host-context(#root) h1 {
+  background-color: #eef;
+}

packages/omi-cli/template/weui/src/weui/mask/index.js

@@ -0,0 +1,12 @@
+import { define, WeElement } from 'omi'
+import style from './_index.scss'
+
+define('ow-mask', class extends WeElement {
+  css() {
+    return style
+  }
+  render(props) {
+    const cls = props.show ? 'weui-mask' : ''
+    return <div className={cls} />
+  }
+})

packages/omi-cli/template/weui/src/weui/msg/_index.scss

@@ -0,0 +1,12 @@
+h2{
+  font-size: 20px;
+}
+
+p{
+  font-size: 16px;
+  color: #999
+}
+
+div{
+  text-align: center;
+}

packages/omi-cli/template/weui/src/weui/msg/index.js

@@ -0,0 +1,31 @@
+import { define, WeElement } from 'omi'
+import style from './_index.scss'
+import '../icon'
+import '../button'
+
+define('ow-msg', class extends WeElement {
+  close() {
+    this.props.close()
+  }
+
+  confirm() {
+    this.props.confirm()
+  }
+
+  css() {
+    return style
+  }
+
+  render(props) {
+    const button = props.type === 'warn' ? 'warn' : 'primary'
+    return (
+      <div className="ow-msg">
+        <ow-icon type={props.type} size='big'/>
+        <h2 className="title">{props.title}</h2>
+        <p>{props.content}</p>
+        <ow-button type={button}>Ok</ow-button>
+        <ow-button type="secondary">Cancel</ow-button>
+      </div>
+    )
+  }
+})

packages/omi-cli/template/weui/src/weui/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "omi-weui",
+  "version": "0.0.7",
+  "description": "> weui for Omi",
+  "main": "dist/index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack --config config/webpack.site.js --mode production",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.site.js --mode development",
+    "start": "npm run dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/132yse/omi-weui.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/132yse/omi-weui/issues"
+  },
+  "homepage": "https://github.com/132yse/omi-weui#readme",
+  "devDependencies": {
+    "@babel/core": "^7.1.5",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/preset-env": "^7.1.5",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.4",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.1",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.10.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "to-string-loader": "^1.1.5",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
+  },
+  "dependencies": {
+    "omi": "latest"
+  }
+}

packages/omi-cli/template/weui/src/weui/toptip/_index.scss

@@ -0,0 +1,21 @@
+$primary-color: #1aad19;
+$warn-color: #e64340;
+
+.ow-toptip{
+  position: fixed;
+  text-align: center;
+  width: 100%;
+  top: 0;
+  z-index: 1;
+  color: #fff;
+  padding: 10px 0;
+  transition: .5s ease;
+}
+
+.weui-toptip-primary{
+  background: $primary-color
+}
+
+.weui-toptip-warn{
+  background: $warn-color
+}

packages/omi-cli/template/weui/src/weui/toptip/index.js

@@ -0,0 +1,26 @@
+import { define, WeElement } from 'omi'
+import style from './_index.scss'
+
+define('ow-toptip', class extends WeElement {
+  css() {
+    return style
+  }
+  hide(){
+    clearTimeout(this.timer)
+    this.props.hide()
+  }
+  render(props) {
+    let top = props.show ? '0' : '-40px'
+    this.timer = setTimeout(() => {
+      this.hide()
+    }, 4000)
+    const type = props.type
+      ? `weui-toptip-${props.type}`
+      : 'weui-toptip-primary'
+    return (
+      <div className={`ow-toptip ${type}`} style={{top}}>
+        {props.msg}
+      </div>
+    )
+  }
+})

packages/omi-weui/src/components/msg/_index.scss

@@ -5,4 +5,8 @@ h2{
 p{
   font-size: 16px;
   color: #999
+}
+
+div{
+  text-align: center;
 }