chore: remove dead files
This commit is contained in:
dntzhang
parent
19e37720ec
commit
e29132bf47
70
README.CN.md
70
README.CN.md
|
|
@ -5,6 +5,76 @@
|
|||
<h2 align="center">Omi - 前端跨框架跨平台框架</h2>
|
||||
<p align="center"><b>基于 Web Components 并支持 IE8+(omio)，小程序(omi-kbone) 和 任意前端框架集成</b></p>
|
||||
|
||||
|
||||
## 使用 TypeScript 开发自定义组件
|
||||
|
||||
```ts
|
||||
import { tag, WeElement, h, extractClass } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
|
||||
interface Props {
|
||||
size?: 'medium' | 'small' | 'mini',
|
||||
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
|
||||
plain?: boolean,
|
||||
round?: boolean,
|
||||
circle?: boolean,
|
||||
loading?: boolean,
|
||||
disabled?: boolean,
|
||||
icon?: string,
|
||||
autofocus?: boolean,
|
||||
nativeType?: 'button' | 'submit' | 'reset',
|
||||
block?: boolean
|
||||
text?: string
|
||||
}
|
||||
|
||||
@tag('o-button')
|
||||
export default class Button extends WeElement<Props>{
|
||||
static css = css
|
||||
|
||||
static defaultProps = {
|
||||
plain: false,
|
||||
round: false,
|
||||
circle: false,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
autofocus: false,
|
||||
nativeType: 'button',
|
||||
block: false
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
size: String,
|
||||
type: String,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
circle: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
icon: String,
|
||||
autofocus: Boolean,
|
||||
nativeType: String,
|
||||
block: Boolean,
|
||||
text: String
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return <button disabled={props.disabled} {...extractClass(props, 'o-button', {
|
||||
['o-button-' + props.type]: props.type,
|
||||
['o-button-' + props.size]: props.size,
|
||||
'is-plain': props.plain,
|
||||
'is-round': props.round,
|
||||
'is-circle': props.circle,
|
||||
'is-disabled': props.disabled,
|
||||
'is-block': props.block
|
||||
})} type={props.nativeType} >
|
||||
{props.loading && <i class='icon-loading'></i>}
|
||||
{props.text}
|
||||
<slot></slot>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Omiu
|
||||
|
||||
> Omi 打造的跨框架、[跨主题](https://tencent.github.io/omi/components/docs/cn.html#/theme?index=0&subIndex=1) UI 组件库
|
||||
|
|
|
|||
69
README.md
69
README.md
|
|
@ -5,6 +5,75 @@ English | [简体中文](./README.CN.md)
|
|||
<h2 align="center">Omi - Front End Cross-Frameworks Framework</h2>
|
||||
<p align="center">Merge Web Components, JSX, Virtual DOM, Functional style, observe or Proxy into one framework with tiny size and high performance. Write components once, using in everywhere, such as Omi, React, Preact, Vue or Angular.</p>
|
||||
|
||||
## With TypeScript
|
||||
|
||||
```ts
|
||||
import { tag, WeElement, h, extractClass } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
|
||||
interface Props {
|
||||
size?: 'medium' | 'small' | 'mini',
|
||||
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
|
||||
plain?: boolean,
|
||||
round?: boolean,
|
||||
circle?: boolean,
|
||||
loading?: boolean,
|
||||
disabled?: boolean,
|
||||
icon?: string,
|
||||
autofocus?: boolean,
|
||||
nativeType?: 'button' | 'submit' | 'reset',
|
||||
block?: boolean
|
||||
text?: string
|
||||
}
|
||||
|
||||
@tag('o-button')
|
||||
export default class Button extends WeElement<Props>{
|
||||
static css = css
|
||||
|
||||
static defaultProps = {
|
||||
plain: false,
|
||||
round: false,
|
||||
circle: false,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
autofocus: false,
|
||||
nativeType: 'button',
|
||||
block: false
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
size: String,
|
||||
type: String,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
circle: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
icon: String,
|
||||
autofocus: Boolean,
|
||||
nativeType: String,
|
||||
block: Boolean,
|
||||
text: String
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return <button disabled={props.disabled} {...extractClass(props, 'o-button', {
|
||||
['o-button-' + props.type]: props.type,
|
||||
['o-button-' + props.size]: props.size,
|
||||
'is-plain': props.plain,
|
||||
'is-round': props.round,
|
||||
'is-circle': props.circle,
|
||||
'is-disabled': props.disabled,
|
||||
'is-block': props.block
|
||||
})} type={props.nativeType} >
|
||||
{props.loading && <i class='icon-loading'></i>}
|
||||
{props.text}
|
||||
<slot></slot>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Omiu
|
||||
|
||||
> Cross-Frameworks and [Cross-Themes](https://tencent.github.io/omi/components/docs/#/theme?index=0&subIndex=1) UI Components powered by Omi
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"loose": true,
|
||||
"exclude": ["transform-es2015-typeof-symbol"],
|
||||
"targets": {
|
||||
"browsers": ["last 2 versions", "IE >= 9"]
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
"transform-class-properties",
|
||||
["transform-react-jsx", { "pragma": "Omi.h" }],
|
||||
"transform-object-rest-spread",
|
||||
"syntax-dynamic-import"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
examples/*/b.js
|
||||
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
{
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"semi": 2,
|
||||
"indent": ["error", 2]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
[ignore]
|
||||
<PROJECT_ROOT>/dist/.*
|
||||
|
||||
[include]
|
||||
|
||||
[libs]
|
||||
|
||||
[lints]
|
||||
|
||||
[options]
|
||||
|
|
@ -1 +0,0 @@
|
|||
src/package.json
|
||||
|
|
@ -1,2 +1,7 @@
|
|||
* 使用新版 weui 样式
|
||||
* 优先兼容 omio，为了兼容小程序，web和PC
|
||||
## OMIU-NEXT
|
||||
|
||||
* 使用 TS
|
||||
* 使用 Vite
|
||||
* 使用 tailwindcss
|
||||
* 单一组件隔离开发单独发布
|
||||
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
{
|
||||
"name": "omiu",
|
||||
"version": "0.1.1",
|
||||
"description": "Omi ui.",
|
||||
"main": "dist/omiu.js",
|
||||
"minified:main": "dist/omiu.min.js",
|
||||
"scripts": {
|
||||
"simple": "webpack -w",
|
||||
"build": "webpack",
|
||||
"build-min": "webpack"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/omi.git"
|
||||
},
|
||||
"keywords": [
|
||||
"omi",
|
||||
"omiu",
|
||||
"webcomponents",
|
||||
"jsx",
|
||||
"proxy",
|
||||
"preact",
|
||||
"react",
|
||||
"virtual dom",
|
||||
"vdom",
|
||||
"components",
|
||||
"virtual",
|
||||
"dom"
|
||||
],
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
|
||||
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.23.0",
|
||||
"babel-plugin-transform-react-jsx": "^6.24.1",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-omi": "^0.1.1",
|
||||
"cax": "^1.2.10",
|
||||
"css-loader": "^2.1.0",
|
||||
"esprima-fb": "^15001.1001.0-dev-harmony-fb",
|
||||
"file-loader": "^2.0.0",
|
||||
"omi": "latest",
|
||||
"progressbar.js": "latest",
|
||||
"to-string-loader": "^1.1.5",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^3.4.1"
|
||||
},
|
||||
"author": "dntzhang <dntzhang@qq.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Tencent/omi/issues"
|
||||
},
|
||||
"homepage": "https://github.com/Tencent/omi"
|
||||
}
|
||||
|
|
@ -1,172 +0,0 @@
|
|||
.weui-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;
|
||||
}
|
||||
|
||||
.weui-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;
|
||||
}
|
||||
|
||||
.weui-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);
|
||||
}
|
||||
|
||||
.weui-actionsheet__title .weui-actionsheet__title-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.weui-actionsheet__menu {
|
||||
background-color: #FCFCFD;
|
||||
}
|
||||
|
||||
.weui-actionsheet__action {
|
||||
margin-top: 6px;
|
||||
background-color: #FCFCFD;
|
||||
}
|
||||
|
||||
.weui-actionsheet__cell {
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.weui-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);
|
||||
}
|
||||
|
||||
.weui-actionsheet__cell:active {
|
||||
background-color: #ECECEC;
|
||||
}
|
||||
|
||||
.weui-actionsheet__cell:first-child:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.weui-skin_android .weui-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;
|
||||
}
|
||||
|
||||
.weui-skin_android .weui-actionsheet__action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.weui-skin_android .weui-actionsheet__menu {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.weui-skin_android .weui-actionsheet__cell {
|
||||
padding: 13px 24px;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.weui-skin_android .weui-actionsheet__cell:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.weui-skin_android .weui-actionsheet__cell:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
.weui-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;
|
||||
}
|
||||
|
||||
.weui-skin_android .weui-actionsheet_toggle {
|
||||
opacity: 1 !important;
|
||||
top: 50% !important;
|
||||
bottom: auto !important;
|
||||
}
|
||||
|
||||
.weui-skin_android .weui-actionsheet {
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
top: 150%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import { define, WeElement, classNames } from 'omi'
|
||||
import css from './_index.css'
|
||||
|
||||
define('o-action-sheet', class extends WeElement {
|
||||
static defaultProps = {
|
||||
type: '',
|
||||
menus: [],
|
||||
actions: [],
|
||||
show: false
|
||||
}
|
||||
|
||||
static css = css
|
||||
|
||||
renderMenuItem() {
|
||||
return this.props.menus.map((menu, idx) => {
|
||||
const { label, className, ...others } = menu
|
||||
const cls = classNames({
|
||||
'weui-actionsheet__cell': true,
|
||||
[className]: className
|
||||
})
|
||||
|
||||
return (
|
||||
<div key={idx} {...others} className={cls}>
|
||||
{label}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
renderActions() {
|
||||
return this.props.actions.map((action, idx) => {
|
||||
const { label, className, ...others } = action
|
||||
const cls = classNames({
|
||||
'weui-actionsheet__cell': true,
|
||||
[className]: className
|
||||
})
|
||||
|
||||
return (
|
||||
<div key={idx} {...others} className={cls}>
|
||||
{label}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
handleMaskClick = e => {
|
||||
if (this.props.onClose) this.props.onClose(e)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { show, type, onClose, menus, actions, ...others } = this.props
|
||||
const cls = classNames({
|
||||
'weui-actionsheet': true,
|
||||
'weui-actionsheet_toggle': show
|
||||
})
|
||||
|
||||
let styleType = type ? type : 'ios'
|
||||
|
||||
return (
|
||||
<div className={styleType === 'android' ? 'weui-skin_android' : ''}>
|
||||
<div
|
||||
class="mask"
|
||||
style={{ display: show ? 'block' : 'none' }}
|
||||
onClick={this.handleMaskClick}
|
||||
/>
|
||||
<div className={cls} {...others}>
|
||||
<div className="weui-actionsheet__menu">{this.renderMenuItem()}</div>
|
||||
<div className="weui-actionsheet__action">{this.renderActions()}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.o-badge {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
padding: .15em .4em;
|
||||
min-width: 8px;
|
||||
border-radius: 18px;
|
||||
background-color: #F95050;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 35px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: #F95050;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { define, WeElement, extractClass } from 'omi'
|
||||
import css from './_index.css'
|
||||
|
||||
define('o-badge', class extends WeElement {
|
||||
static css = css
|
||||
|
||||
render(props) {
|
||||
if (props.content !== undefined) {
|
||||
return <div {...extractClass(props, 'o-badge')}>
|
||||
{props.children[0]}
|
||||
<span class="badge" style="top: -.7em;right: -1em;">{props.content}</span>
|
||||
</div>
|
||||
|
||||
}
|
||||
if (props.dot) {
|
||||
return (
|
||||
<div class="o-badge">
|
||||
{props.children[0]}
|
||||
<span class="circle" style="position: absolute;top: -.2em;right: -.2em;"></span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <div class="o-badge">{props.children[0]}</div>
|
||||
}
|
||||
})
|
||||
|
|
@ -1,248 +0,0 @@
|
|||
.weui-btn {
|
||||
background-color: #9CE6BF;
|
||||
color: #D7F5E5;
|
||||
}
|
||||
|
||||
.weui-btn_disabled.weui-btn {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.weui-btn_plain-disabled.weui-btn {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button.weui-btn,
|
||||
input.weui-btn {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
border-width: 0;
|
||||
outline: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
button.weui-btn:focus,
|
||||
input.weui-btn:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
button.weui-btn_inline,
|
||||
input.weui-btn_inline,
|
||||
button.weui-btn_mini,
|
||||
input.weui-btn_mini {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
button.weui-btn_plain-primary,
|
||||
input.weui-btn_plain-primary,
|
||||
button.weui-btn_plain-default,
|
||||
input.weui-btn_plain-default {
|
||||
border-width: 1px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.weui-btn {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
box-sizing: border-box;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
line-height: 2.55555556;
|
||||
border-radius: 3px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.weui-btn:after {
|
||||
content: " ";
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* border:1px solid rgba(0, 0, 0, 0.2); */
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.weui-btn_inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.weui-btn_default {
|
||||
background-color: #F8F7F8;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.weui-btn_default:not(.weui-btn_disabled):visited {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.weui-btn_default:not(.weui-btn_disabled):active {
|
||||
background-color: rgb(243, 239, 239);
|
||||
}
|
||||
|
||||
.weui-btn_primary {
|
||||
background-color: #07C160;
|
||||
}
|
||||
|
||||
.weui-btn_primary:not(.weui-btn_disabled):visited {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.weui-btn_primary:not(.weui-btn_disabled):active {
|
||||
background-color: rgb(5, 202, 100);
|
||||
;
|
||||
}
|
||||
|
||||
.weui-btn_warn {
|
||||
background-color: #F95050;
|
||||
}
|
||||
|
||||
.weui-btn_warn:not(.weui-btn_disabled):visited {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.weui-btn_warn:not(.weui-btn_disabled):active {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background-color: #F95050;
|
||||
}
|
||||
|
||||
.weui-btn_disabled {
|
||||
background-color: #9CE6BF;
|
||||
color: #D7F5E5;
|
||||
}
|
||||
|
||||
.weui-btn_disabled.weui-btn_default {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.weui-btn_disabled.weui-btn_primary {
|
||||
background-color: #9CE6BF;
|
||||
color: #D7F5E5;
|
||||
}
|
||||
|
||||
.weui-btn_disabled.weui-btn_warn {
|
||||
background-color: rgb(240, 158, 157);
|
||||
}
|
||||
|
||||
.weui-btn_loading .weui-loading {
|
||||
margin: -0.2em 0.34em 0 0;
|
||||
}
|
||||
|
||||
.weui-btn_loading.weui-btn_primary,
|
||||
.weui-btn_loading.weui-btn_warn {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.weui-btn_loading.weui-btn_warn {
|
||||
background-color: #F95050;
|
||||
}
|
||||
|
||||
.weui-btn_plain-primary {
|
||||
color: #07C160;
|
||||
border: 1px solid #07C160;
|
||||
}
|
||||
|
||||
.weui-btn_plain-primary:not(.weui-btn_plain-disabled):active {
|
||||
color: #9ED99D;
|
||||
border-color: #9ED99D;
|
||||
}
|
||||
|
||||
.weui-btn_plain-primary:after {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.weui-btn_plain-default {
|
||||
color: #353535;
|
||||
border: 1px solid #353535;
|
||||
}
|
||||
|
||||
.weui-btn_plain-default:not(.weui-btn_plain-disabled):active {
|
||||
color: rgba(53, 53, 53, 0.6);
|
||||
border-color: rgba(53, 53, 53, 0.6);
|
||||
}
|
||||
|
||||
.weui-btn_plain-default:after {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.weui-btn_plain-disabled {
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button.weui-btn {
|
||||
width: 100%;
|
||||
border-width: 0;
|
||||
outline: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
button.weui-btn:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
button.weui-btn_inline,
|
||||
input.weui-btn_inline,
|
||||
button.weui-btn_mini,
|
||||
input.weui-btn_mini {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
button.weui-btn_plain-primary,
|
||||
input.weui-btn_plain-primary,
|
||||
button.weui-btn_plain-default,
|
||||
input.weui-btn_plain-default {
|
||||
border-width: 1px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.weui-btn_mini {
|
||||
display: inline-block;
|
||||
padding: 0 1.32em;
|
||||
line-height: 2.3;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.weui-btn+.weui-btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.weui-btn.weui-btn_inline+.weui-btn.weui-btn_inline {
|
||||
margin-top: auto;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.weui-btn-area {
|
||||
margin: 1.17647059em 15px 0.3em;
|
||||
}
|
||||
|
||||
.weui-btn-area_inline {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.weui-btn-area_inline .weui-btn {
|
||||
margin-top: auto;
|
||||
margin-right: 15px;
|
||||
width: 100%;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.weui-btn-area_inline .weui-btn:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import { define, WeElement, extractClass } from 'omi'
|
||||
import css from './_index.css'
|
||||
|
||||
define('o-button', class extends WeElement {
|
||||
static defaultProps = {
|
||||
disabled: false,
|
||||
type: 'primary',
|
||||
size: 'normal'
|
||||
}
|
||||
|
||||
static css = css
|
||||
|
||||
render(props) {
|
||||
//fix omi render
|
||||
if(this instanceof HTMLElement){
|
||||
delete props['onClick']
|
||||
delete props['onclick']
|
||||
}
|
||||
let cls = extractClass(props) || {}
|
||||
const {
|
||||
component,
|
||||
type,
|
||||
size,
|
||||
plain,
|
||||
children,
|
||||
...others
|
||||
} = this.props
|
||||
|
||||
|
||||
const Component = component
|
||||
? component
|
||||
: this.props.href || type === 'vcode'
|
||||
? 'a'
|
||||
: 'button'
|
||||
cls =
|
||||
type === 'vcode'
|
||||
? extractClass(cls, 'weui-vcode-btn')
|
||||
: extractClass(cls, {
|
||||
'weui-btn': true,
|
||||
'weui-btn_mini': size === 'small',
|
||||
'weui-btn_primary': type === 'primary' && !plain,
|
||||
'weui-btn_default': type === 'default' && !plain,
|
||||
'weui-btn_warn': type === 'warn',
|
||||
'weui-btn_plain-primary': type === 'primary' && plain,
|
||||
'weui-btn_plain-default': type === 'default' && plain,
|
||||
'weui-btn_disabled': this.props.disabled && !plain,
|
||||
'weui-btn_plain-disabled': this.props.disabled && plain
|
||||
})
|
||||
|
||||
return (
|
||||
<Component {...others} {...cls}>
|
||||
{children}
|
||||
</Component>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import './badge'
|
||||
import './button'
|
||||
import './action-sheet'
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
var packageJSON = require('./package.json');
|
||||
/**
|
||||
* Env
|
||||
* Get npm lifecycle event to identify the environment
|
||||
*/
|
||||
var ENV = process.env.npm_lifecycle_event;
|
||||
|
||||
var config = {
|
||||
entry: './examples/' + ENV + '/main.js',
|
||||
output: {
|
||||
// path: __dirname,
|
||||
path: path.join(__dirname, './examples/' + ENV + '/'),
|
||||
filename: 'bundler.js'
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
test: /\.js$/,
|
||||
query: {
|
||||
presets: ['env','omi'],
|
||||
plugins : [
|
||||
"transform-es3-property-literals",
|
||||
"transform-es3-member-expression-literals",
|
||||
"transform-class-properties",
|
||||
"transform-object-rest-spread"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 8192
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
// Avoid publishing files when compilation fails
|
||||
new webpack.NoEmitOnErrorsPlugin()
|
||||
],
|
||||
stats: {
|
||||
// Nice colored output
|
||||
colors: true
|
||||
},
|
||||
// Create Sourcemaps for the bundle
|
||||
// devtool: 'source-map',
|
||||
};
|
||||
|
||||
if(ENV === 'build'||ENV === 'build-min'){
|
||||
config = {
|
||||
entry: {
|
||||
'omiu': './src/index.js'
|
||||
},
|
||||
output: {
|
||||
// path: __dirname,
|
||||
path: path.join(__dirname, 'src/dist/'),
|
||||
library:'Omiu',
|
||||
libraryTarget: 'umd',
|
||||
filename: '[name].js'
|
||||
//umdNamedDefine: true
|
||||
},
|
||||
externals: {
|
||||
"omi": 'omi',
|
||||
"omio": 'omi'
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
test: path.join(__dirname, 'src'),
|
||||
query: {
|
||||
presets: ['env','omi'],
|
||||
plugins : [
|
||||
"transform-es3-property-literals",
|
||||
"transform-es3-member-expression-literals",
|
||||
"transform-class-properties",
|
||||
"transform-object-rest-spread"
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /[\\|\/]_[\S]*\.css$/,
|
||||
use: [
|
||||
'to-string-loader',
|
||||
'css-loader'
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
// Avoid publishing files when compilation fails
|
||||
new webpack.BannerPlugin(" omiu v"+packageJSON.version+" By dntzhang \r\n Github: https://github.com/AlloyTeam/omi\r\n MIT Licensed."),
|
||||
new webpack.NoEmitOnErrorsPlugin()
|
||||
],
|
||||
stats: {
|
||||
// Nice colored output
|
||||
colors: true
|
||||
},
|
||||
// Create Sourcemaps for the bundle
|
||||
// devtool: 'source-map',
|
||||
};
|
||||
|
||||
if(ENV === 'build-min'){
|
||||
config.plugins.push(new webpack.optimize.UglifyJsPlugin());
|
||||
config.entry = {
|
||||
'omiu.min': './src/index.js'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = config;
|
||||
Loading…
Reference in New Issue