diff --git a/packages/omi-cli/template/weui/src/elements/app/index.js b/packages/omi-cli/template/weui/src/elements/app/index.js index 4957272f4..22a9cb261 100644 --- a/packages/omi-cli/template/weui/src/elements/app/index.js +++ b/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 { Actionsheet Dialog - Msg + Msg + Toptip Picker Toast + Loading + diff --git a/packages/omi-cli/template/weui/src/elements/article-panel/index.js b/packages/omi-cli/template/weui/src/elements/article-panel/index.js index 0f80032c9..1e4689b24 100644 --- a/packages/omi-cli/template/weui/src/elements/article-panel/index.js +++ b/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 { diff --git a/packages/omi-cli/template/weui/src/elements/button-panel/index.js b/packages/omi-cli/template/weui/src/elements/button-panel/index.js index d9245ac0d..29427943f 100644 --- a/packages/omi-cli/template/weui/src/elements/button-panel/index.js +++ b/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() { diff --git a/packages/omi-cli/template/weui/src/elements/dialog-panel/index.js b/packages/omi-cli/template/weui/src/elements/dialog-panel/index.js index 2643ca894..4e43ab79f 100644 --- a/packages/omi-cli/template/weui/src/elements/dialog-panel/index.js +++ b/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 diff --git a/packages/omi-cli/template/weui/src/elements/icon-panel/index.js b/packages/omi-cli/template/weui/src/elements/icon-panel/index.js index d4da07400..799edd465 100644 --- a/packages/omi-cli/template/weui/src/elements/icon-panel/index.js +++ b/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() { diff --git a/packages/omi-cli/template/weui/src/elements/list-panel/index.js b/packages/omi-cli/template/weui/src/elements/list-panel/index.js index effd7d0ea..9b69712d4 100644 --- a/packages/omi-cli/template/weui/src/elements/list-panel/index.js +++ b/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() { diff --git a/packages/omi-cli/template/weui/src/elements/loading-panel/_index.css b/packages/omi-cli/template/weui/src/elements/loading-panel/_index.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/omi-cli/template/weui/src/elements/loading-panel/index.js b/packages/omi-cli/template/weui/src/elements/loading-panel/index.js new file mode 100644 index 000000000..2f01f501d --- /dev/null +++ b/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 ( +
+ +
+ ) + } +}) \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/elements/msg-panel/_index.css b/packages/omi-cli/template/weui/src/elements/msg-panel/_index.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/omi-cli/template/weui/src/elements/msg-panel/index.js b/packages/omi-cli/template/weui/src/elements/msg-panel/index.js new file mode 100644 index 000000000..87096608a --- /dev/null +++ b/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 ( +
+ +
+ ) + } +}) \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/elements/toptip-panel/_index.css b/packages/omi-cli/template/weui/src/elements/toptip-panel/_index.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/omi-cli/template/weui/src/elements/toptip-panel/index.js b/packages/omi-cli/template/weui/src/elements/toptip-panel/index.js new file mode 100644 index 000000000..fc4b5c6af --- /dev/null +++ b/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 ( +
+ 点击我显示弹窗 + +
+ ) + } +}) \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/.babelrc b/packages/omi-cli/template/weui/src/weui/.babelrc new file mode 100644 index 000000000..f283d5837 --- /dev/null +++ b/packages/omi-cli/template/weui/src/weui/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "env","omi" + ], + "plugins": [ + "transform-class-properties" + ] +} \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/article/_index.scss b/packages/omi-cli/template/weui/src/weui/article/_index.scss new file mode 100644 index 000000000..32e53a99a --- /dev/null +++ b/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; + } +} diff --git a/packages/omi-cli/template/weui/src/weui/article/index.js b/packages/omi-cli/template/weui/src/weui/article/index.js new file mode 100644 index 000000000..812c56033 --- /dev/null +++ b/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
{props.children}
+ } +}) diff --git a/packages/omi-cli/template/weui/src/weui/button/_index.scss b/packages/omi-cli/template/weui/src/weui/button/_index.scss new file mode 100644 index 000000000..375e24292 --- /dev/null +++ b/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; +} diff --git a/packages/omi-cli/template/weui/src/weui/button/index.js b/packages/omi-cli/template/weui/src/weui/button/index.js new file mode 100644 index 000000000..4bef8a1b6 --- /dev/null +++ b/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 ( +
+ +
+ ) + } +}) diff --git a/packages/omi-cli/template/weui/src/weui/cells/_index.css b/packages/omi-cli/template/weui/src/weui/cells/_index.css new file mode 100644 index 000000000..7eba93b0a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/cells/index.js b/packages/omi-cli/template/weui/src/weui/cells/index.js new file mode 100644 index 000000000..01c94e392 --- /dev/null +++ b/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 ( +
+ +
+ ) + } +}) + + +define('ow-cell', class extends WeElement { + css() { + return style + } + + render(props) { + return ( + +
+

+
+
+
+ + ) + } +}) \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/dialog/_index.scss b/packages/omi-cli/template/weui/src/weui/dialog/_index.scss new file mode 100644 index 000000000..a874a7878 --- /dev/null +++ b/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; + } +} diff --git a/packages/omi-cli/template/weui/src/weui/dialog/index.js b/packages/omi-cli/template/weui/src/weui/dialog/index.js new file mode 100644 index 000000000..e6c5ba3c4 --- /dev/null +++ b/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 ( +
+
+

{props.title}

+

{props.content}

+ {props.type === 'confirm' ? ( +
+ + 取消 + + 确定 +
+ ) : ( + 确定 + )} +
+ +
+ ) + } +}) diff --git a/packages/omi-cli/template/weui/src/weui/icon/_font.scss b/packages/omi-cli/template/weui/src/weui/icon/_font.scss new file mode 100644 index 000000000..53a2780c9 --- /dev/null +++ b/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'; +} diff --git a/packages/omi-cli/template/weui/src/weui/icon/_index.scss b/packages/omi-cli/template/weui/src/weui/icon/_index.scss new file mode 100644 index 000000000..d16f55d21 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/icon/font-face.css b/packages/omi-cli/template/weui/src/weui/icon/font-face.css new file mode 100644 index 000000000..b91765b61 --- /dev/null +++ b/packages/omi-cli/template/weui/src/weui/icon/font-face.css @@ -0,0 +1,7 @@ + +@font-face { + font-weight: normal; + font-style: normal; + font-family: "weui"; + src: url('data:application/octet-stream;base64,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') format('truetype'); +} diff --git a/packages/omi-cli/template/weui/src/weui/icon/index.js b/packages/omi-cli/template/weui/src/weui/icon/index.js new file mode 100644 index 000000000..b2e4cb7af --- /dev/null +++ b/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 + } +}) diff --git a/packages/omi-cli/template/weui/src/weui/list-item/_index.scss b/packages/omi-cli/template/weui/src/weui/list-item/_index.scss new file mode 100644 index 000000000..003e67922 --- /dev/null +++ b/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); + } + } +} diff --git a/packages/omi-cli/template/weui/src/weui/list-item/index.js b/packages/omi-cli/template/weui/src/weui/list-item/index.js new file mode 100644 index 000000000..d14cdf850 --- /dev/null +++ b/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 ( +
  • + {props.icon ? : null} + {props.title} + {props.content} + {props.access ? : null} +
    • + ) + } +}) diff --git a/packages/omi-cli/template/weui/src/weui/list/_index.scss b/packages/omi-cli/template/weui/src/weui/list/_index.scss new file mode 100644 index 000000000..d04f118c6 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/list/index.js b/packages/omi-cli/template/weui/src/weui/list/index.js new file mode 100644 index 000000000..7316f835f --- /dev/null +++ b/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 ( +
    +

    {props.title}

    +
    + {props.children} +
    +
    + ) + } +}) diff --git a/packages/omi-cli/template/weui/src/weui/loading/_index.scss b/packages/omi-cli/template/weui/src/weui/loading/_index.scss new file mode 100644 index 000000000..d8c13a318 --- /dev/null +++ b/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); + } +} diff --git a/packages/omi-cli/template/weui/src/weui/loading/index.js b/packages/omi-cli/template/weui/src/weui/loading/index.js new file mode 100644 index 000000000..977e137a5 --- /dev/null +++ b/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 ( +
    + ) + } +}) diff --git a/packages/omi-cli/template/weui/src/weui/loading/loading.svg b/packages/omi-cli/template/weui/src/weui/loading/loading.svg new file mode 100644 index 000000000..070fa079a --- /dev/null +++ b/packages/omi-cli/template/weui/src/weui/loading/loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/mask/_index.scss b/packages/omi-cli/template/weui/src/weui/mask/_index.scss new file mode 100644 index 000000000..f82c5f0c3 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/mask/index.js b/packages/omi-cli/template/weui/src/weui/mask/index.js new file mode 100644 index 000000000..53cd13c25 --- /dev/null +++ b/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
    + } +}) diff --git a/packages/omi-cli/template/weui/src/weui/msg/_index.scss b/packages/omi-cli/template/weui/src/weui/msg/_index.scss new file mode 100644 index 000000000..2f29d7678 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/msg/index.js b/packages/omi-cli/template/weui/src/weui/msg/index.js new file mode 100644 index 000000000..266631939 --- /dev/null +++ b/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 ( +
    + +

    {props.title}

    +

    {props.content}

    + Ok + Cancel +
    + ) + } +}) diff --git a/packages/omi-cli/template/weui/src/weui/package.json b/packages/omi-cli/template/weui/src/weui/package.json new file mode 100644 index 000000000..114f28436 --- /dev/null +++ b/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" + } +} diff --git a/packages/omi-cli/template/weui/src/weui/toptip/_index.scss b/packages/omi-cli/template/weui/src/weui/toptip/_index.scss new file mode 100644 index 000000000..f2a8dd0ce --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/weui/toptip/index.js b/packages/omi-cli/template/weui/src/weui/toptip/index.js new file mode 100644 index 000000000..f138fe05a --- /dev/null +++ b/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 ( +
    + {props.msg} +
    + ) + } +}) diff --git a/packages/omi-weui/src/components/msg/_index.scss b/packages/omi-weui/src/components/msg/_index.scss index f07bfbbb9..2f29d7678 100644 --- a/packages/omi-weui/src/components/msg/_index.scss +++ b/packages/omi-weui/src/components/msg/_index.scss @@ -5,4 +5,8 @@ h2{ p{ font-size: 16px; color: #999 +} + +div{ + text-align: center; } \ No newline at end of file