chore(@omiu/step): publish
This commit is contained in:
dntzhang
parent
811a703048
commit
4f0451a58b
|
|
@ -1,23 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" >
|
||||
<title>Omiu</title>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>HTML Mode</h1>
|
||||
<o-counter count="2"></o-counter>
|
||||
<script>
|
||||
document.querySelector('o-counter').addEventListener('CountChanged', function (evt) {
|
||||
console.log(evt.detail)
|
||||
})
|
||||
</script>
|
||||
<h1>HTML Mode <a href="./demo.html">JSX Mode</a></h1>
|
||||
<div>
|
||||
<m-step items="[
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 },
|
||||
{ name: 'In Progress', description: 'This is a description.', state: 2 },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: 3 }
|
||||
]" ></m-step>
|
||||
<m-step items="[
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 },
|
||||
{ name: 'Error', description: 'This is a description.', state: 1 },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: 3 }
|
||||
]" ></m-step>
|
||||
<m-step items="[
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 },
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 },
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 }
|
||||
]" ></m-step>
|
||||
|
||||
<m-step items="[
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 },
|
||||
{ name: 'In Progress', description: 'This is a description.', state: 2 },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: 3 }
|
||||
]" vertical ></m-step>
|
||||
<m-step items="[
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 },
|
||||
{ name: 'Error', description: 'This is a description.', state: 1 },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: 3 }
|
||||
]" vertical ></m-step>
|
||||
<m-step items="[
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 },
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 },
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 }
|
||||
]" vertical ></m-step>
|
||||
</div>
|
||||
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/step/index.js"></script>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
"test": "npm run build && web-test-runner \"test/*.js\" --node-resolve"
|
||||
},
|
||||
"dependencies": {
|
||||
"@omiu/common": "^0.0.9",
|
||||
"@omiu/icon": "^0.0.3",
|
||||
"omi": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,50 @@
|
|||
import { tag, h, WeElement, render } from 'omi'
|
||||
|
||||
import { define, render, h, WeElement } from 'omi'
|
||||
import './index.tsx'
|
||||
|
||||
export type Props = {
|
||||
|
||||
const state = {
|
||||
DONE: 0,
|
||||
ERROR: 1,
|
||||
DOING: 2,
|
||||
TODO: 3
|
||||
}
|
||||
|
||||
const tagName = 'my-demo'
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
itemsA = [
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'In Progress', description: 'This is a description.', state: state.DOING },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: state.TODO }
|
||||
]
|
||||
|
||||
itemsB = [
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'Error', description: 'This is a description.', state: state.ERROR },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: state.TODO }
|
||||
]
|
||||
|
||||
@tag(tagName)
|
||||
export default class MyDemo extends WeElement<Props> {
|
||||
itemsC = [
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE }
|
||||
]
|
||||
|
||||
count = 2
|
||||
|
||||
onChanged = (evt: CustomEvent) => {
|
||||
//同步内部状态到外部，这样防止父刷新覆盖子的 count
|
||||
this.count = evt.detail
|
||||
}
|
||||
|
||||
render(props: Props) {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1 onclick={() => {
|
||||
this.update()
|
||||
}}>JSX Mode</h1>
|
||||
<o-counter count={this.count} onCountChanged={this.onChanged}></o-counter>
|
||||
<m-step items={this.itemsA} />
|
||||
<m-step items={this.itemsB} />
|
||||
<m-step items={this.itemsC} />
|
||||
|
||||
<m-step items={this.itemsA} vertical />
|
||||
<m-step items={this.itemsB} vertical />
|
||||
<m-step items={this.itemsC} vertical />
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(<my-demo></my-demo>, 'body', {
|
||||
ignoreAttrs: true
|
||||
})
|
||||
|
||||
|
||||
render(<my-app />, 'body')
|
||||
|
|
|
|||
|
|
@ -1,94 +1,170 @@
|
|||
.is-success {
|
||||
color: #07C160;
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.is-wait {
|
||||
color: #c0c4cc;
|
||||
.m-step {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.is-process {
|
||||
color: #303133;
|
||||
o-icon-done {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.line-success {
|
||||
background-color: #07C160;
|
||||
o-icon-clear {
|
||||
color: #fa5151;
|
||||
}
|
||||
|
||||
.line-wait {
|
||||
background-color: #c0c4cc;
|
||||
*, *::before, *::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.line-process {
|
||||
background-color: #c0c4cc;
|
||||
._item-icon {
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
border-radius: 32px;
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.o-step {
|
||||
._item-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
flex-shrink: 1;
|
||||
top: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.o-step__head {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
._item-finish ._item-icon {
|
||||
border-color: #07c160;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.o-step__line {
|
||||
height: 2px;
|
||||
top: 11px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
border-color: inherit;
|
||||
._item-process ._item-icon {
|
||||
color: white;
|
||||
border-color: #07c160;
|
||||
background-color: #07c160;
|
||||
}
|
||||
|
||||
.o-step__line-inner {
|
||||
._item-wait {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
._item-block ._item-icon {
|
||||
border-color: #fa5151;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
._item-block {
|
||||
color: #fa5151;
|
||||
}
|
||||
|
||||
._item-block ._item-description {
|
||||
color: #fa5151;
|
||||
}
|
||||
|
||||
._item-description {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
._item-finish > ._item-content > ._item-title:after {
|
||||
background-color: #07c160;
|
||||
}
|
||||
|
||||
._item.next-error ._item-title:after {
|
||||
background: #fa5151;
|
||||
}
|
||||
|
||||
._item-title:after {
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 9999px;
|
||||
background: #e8e8e8;
|
||||
display: block;
|
||||
border: 1px solid;
|
||||
border-color: inherit;
|
||||
transition: 0.15s ease-out;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.o-step__icon {
|
||||
._item {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
transition: 0.15s ease-out;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
height: 60px;
|
||||
margin-right: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.is-text {
|
||||
border-radius: 50%;
|
||||
border: 2px solid;
|
||||
border-color: inherit;
|
||||
._item:last-child ._item-title:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.o-step__main {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
._item-title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.o-step__title {
|
||||
font-size: 16px;
|
||||
line-height: 38px;
|
||||
.vertical ._item {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.o-step__description {
|
||||
padding-right: 10%;
|
||||
margin-top: -5px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
.vertical ._item-tail::after {
|
||||
display: inline-block;
|
||||
background: #e8e8e8;
|
||||
border-radius: 1px;
|
||||
-webkit-transition: background 0.3s;
|
||||
transition: background 0.3s;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vertical ._item-finish ._item-tail::after {
|
||||
background: #07c160;
|
||||
}
|
||||
|
||||
.vertical .next-error ._item-tail::after {
|
||||
background: #fa5151;
|
||||
}
|
||||
|
||||
.vertical ._item-title:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical > ._item:not(:last-child) > ._item-tail {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vertical > ._item > ._item-tail {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 16px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
padding: 38px 0 6px;
|
||||
}
|
||||
|
||||
._item-tail {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical > _item:not(:last-child) > ._item-tail {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"index.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["index.scss","../node_modules/@omiu/common/theme.scss"],"names":[],"mappings":"AAGA;EACE;;;AAGF;EACC;EACA;EACA;;;AAGD;EACE,OCdU;;;ADiBZ;EACE,OCXS;;;ADcX;EACC;EACA;;;AAGD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;EACA;;;AAGD;EACE;EACA;EACD;EACA;;;AAGD;EACE,cC/CU;EDgDV;;;AAIF;EACE;EACA,cCtDU;EDuDV,kBCvDU;;;AD2DZ;EACE;;;AAIF;EACE,cC1DS;ED2DT;;;AAIF;EACE,OChES;;;ADmEX;EACE,OCpES;;;ADuEX;EACE;EACA;;;AAIF;EACE,kBCrFU;;;ADwFZ;EACE,YClFS;;;ADqFX;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACD;EACA;EACA;EACA;EACA;;;AAGD;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC,YC5IW;;;ADgJZ;EACC,YC1IU;;;AD6IX;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC","file":"index.css"}
|
||||
|
|
@ -1,79 +1,177 @@
|
|||
.is-success {
|
||||
color: #07C160;
|
||||
@import "../node_modules/@omiu/common/theme.scss";
|
||||
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.is-wait {
|
||||
color: #c0c4cc;
|
||||
|
||||
.m-step {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.is-process {
|
||||
color: #303133;
|
||||
|
||||
o-icon-done{
|
||||
color: $o-primary
|
||||
}
|
||||
.line-success {
|
||||
background-color: #07C160;
|
||||
|
||||
o-icon-clear{
|
||||
color: $o-danger
|
||||
}
|
||||
.line-wait {
|
||||
background-color: #c0c4cc;
|
||||
|
||||
*, *::before, *::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.line-process {
|
||||
background-color: #c0c4cc;
|
||||
|
||||
._item-icon {
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
border-radius: 32px;
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.o-step {
|
||||
|
||||
._item-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
flex-shrink: 1;
|
||||
top: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.o-step__head {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.o-step__line {
|
||||
height: 2px;
|
||||
top: 11px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
border-color: inherit;
|
||||
}
|
||||
.o-step__line-inner {
|
||||
display: block;
|
||||
border: 1px solid;
|
||||
border-color: inherit;
|
||||
transition: .15s ease-out;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.o-step__icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
transition: .15s ease-out;
|
||||
padding: 0;
|
||||
}
|
||||
.is-text {
|
||||
border-radius: 50%;
|
||||
border: 2px solid;
|
||||
border-color: inherit;
|
||||
}
|
||||
.o-step__main {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
|
||||
._item-finish ._item-icon {
|
||||
border-color: $o-primary;
|
||||
background-color: #fff;
|
||||
}
|
||||
.o-step__title {
|
||||
font-size: 16px;
|
||||
line-height: 38px;
|
||||
|
||||
|
||||
._item-process ._item-icon {
|
||||
color: white;
|
||||
border-color: $o-primary;
|
||||
background-color: $o-primary;
|
||||
}
|
||||
|
||||
|
||||
._item-wait {
|
||||
color:rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
|
||||
._item-block ._item-icon {
|
||||
border-color: $o-danger;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
._item-block {
|
||||
color:$o-danger;
|
||||
}
|
||||
|
||||
._item-block ._item-description {
|
||||
color: $o-danger;
|
||||
}
|
||||
|
||||
._item-description {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
._item-finish>._item-content>._item-title:after {
|
||||
background-color: $o-primary;
|
||||
}
|
||||
|
||||
._item.next-error ._item-title:after {
|
||||
background: $o-danger;
|
||||
}
|
||||
|
||||
._item-title:after {
|
||||
content: '';
|
||||
height: 1px;
|
||||
width: 9999px;
|
||||
background: #e8e8e8;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
._item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
height: 60px;
|
||||
margin-right: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
._item:last-child ._item-title:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
._item-title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.vertical ._item {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.vertical ._item-tail::after {
|
||||
display: inline-block;
|
||||
background: #e8e8e8;
|
||||
border-radius: 1px;
|
||||
-webkit-transition: background .3s;
|
||||
transition: background .3s;
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vertical ._item-finish ._item-tail::after {
|
||||
background: $o-primary;
|
||||
}
|
||||
|
||||
|
||||
.vertical .next-error ._item-tail::after {
|
||||
background: $o-danger;
|
||||
}
|
||||
|
||||
.vertical ._item-title:after{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical>._item:not(:last-child)>._item-tail {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vertical>._item>._item-tail {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 16px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
padding: 38px 0 6px;
|
||||
}
|
||||
|
||||
._item-tail {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical>_item:not(:last-child)>._item-tail {
|
||||
display: block;
|
||||
}
|
||||
.o-step__description {
|
||||
padding-right: 10%;
|
||||
margin-top: -5px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -1,109 +1,69 @@
|
|||
import { tag, h, WeElement, OverwriteProps } from 'omi'
|
||||
import '../../icon/esm/cancel'
|
||||
import '../../icon/esm/check-circle-outline'
|
||||
import '../../icon/esm/check'
|
||||
import { tag, WeElement, extractClass, classNames, h } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
|
||||
export type Attrs = {
|
||||
title?: string,
|
||||
description?: string,
|
||||
active?: number,
|
||||
isFinish?: boolean,
|
||||
isProcess?: boolean,
|
||||
lineIsFinsh?: boolean,
|
||||
}
|
||||
import '@omiu/icon/done'
|
||||
import '@omiu/icon/clear'
|
||||
|
||||
const tagName = 'o-step'
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
[tagName]: Omi.Props & Attrs
|
||||
}
|
||||
}
|
||||
const state = {
|
||||
DONE: 0,
|
||||
ERROR: 1,
|
||||
DOING: 2,
|
||||
TODO: 3
|
||||
}
|
||||
|
||||
|
||||
export type Props = OverwriteProps<Attrs, { title: string, active?: number, description?: string, isFinish?: boolean, isProcess?: boolean, lineIsFinsh?: boolean, }>
|
||||
|
||||
@tag(tagName)
|
||||
export default class Step extends WeElement<Props> {
|
||||
|
||||
static css = css.default ? css.default : css
|
||||
|
||||
static defaultProps = {
|
||||
title: '',
|
||||
description: '',
|
||||
isFinish: false,
|
||||
isProcess: false,
|
||||
lineIsFinsh: false,
|
||||
}
|
||||
@tag('m-step')
|
||||
export default class Step extends WeElement {
|
||||
static css = css.default
|
||||
|
||||
static propTypes = {
|
||||
title: String,
|
||||
description: String,
|
||||
isFinish: Boolean,
|
||||
isProcess: Boolean,
|
||||
lineIsFinsh: Boolean,
|
||||
items: Object,
|
||||
vertical: Boolean
|
||||
}
|
||||
|
||||
inject = ['active']
|
||||
|
||||
beforeRender = () => {
|
||||
let findSibling = ( tag: any ) => {
|
||||
let parentEl = tag.parentNode ;
|
||||
let childs = parentEl.children ;
|
||||
for( let i = 0; i <= childs.length - 1 ; i++ ){
|
||||
if( childs[i] === tag ){
|
||||
return i
|
||||
}
|
||||
}
|
||||
};
|
||||
if((findSibling(this) - 1) === this.injection.active) {
|
||||
this.props.lineIsFinsh = true
|
||||
}
|
||||
|
||||
if(findSibling(this) < this.injection.active) {
|
||||
this.props.isFinish = true
|
||||
} else if (findSibling(this) === this.injection.active) {
|
||||
this.props.isProcess = true
|
||||
}
|
||||
}
|
||||
|
||||
// 当前状态下标
|
||||
currentStatus = () => {
|
||||
if (this.props.isFinish) return ['is-success'].join(' ')
|
||||
if (this.props.isProcess) return ['is-process'].join(' ')
|
||||
return ['is-wait'].join(' ')
|
||||
}
|
||||
|
||||
lineStatus = () => {
|
||||
if (this.props.lineIsFinsh) return ['line-success'].join(' ')
|
||||
if (this.props.isFinish) return ['line-process'].join(' ')
|
||||
return ['line-wait'].join(' ')
|
||||
}
|
||||
|
||||
render(props: Props) {
|
||||
render(props) {
|
||||
return (
|
||||
<h.f>
|
||||
<div class={'o-step ' + this.currentStatus()}>
|
||||
<div class={"o-step__head " + this.currentStatus()}>
|
||||
<div class={'o-step__line ' + this.lineStatus()}>
|
||||
<i className='o-step__line-inner'></i>
|
||||
<div {...extractClass(props, 'm-step', {
|
||||
'vertical': props.vertical
|
||||
})}>
|
||||
{props.items.map((item, index) => {
|
||||
return <div class={classNames('_item', {
|
||||
'_item-finish': item.state === state.DONE,
|
||||
'_item-block': item.state === state.ERROR,
|
||||
'_item-process': item.state === state.DOING,
|
||||
'_item-wait': item.state === state.TODO,
|
||||
'next-error': props.items[index + 1] && props.items[index + 1].state === state.ERROR
|
||||
})}>
|
||||
<div class="_item-tail">
|
||||
</div>
|
||||
<div class='o-step__icon is-text'>
|
||||
<o-icon-check></o-icon-check>
|
||||
<div class="_item-icon">
|
||||
<span class="icon">
|
||||
{item.state === state.DONE && <i class="anticon anticon-check finish-icon">
|
||||
|
||||
<o-icon-done ></o-icon-done>
|
||||
|
||||
|
||||
</i>}
|
||||
|
||||
{item.state === state.ERROR && <i class="anticon anticon-close error-icon">
|
||||
|
||||
<o-icon-clear></o-icon-clear>
|
||||
|
||||
</i>}
|
||||
|
||||
{(item.state === state.DOING || item.state === state.TODO) && <span class="icon">{index + 1}</span>}
|
||||
</span>
|
||||
</div>
|
||||
<div class="_item-content">
|
||||
<div class="_item-title">{item.name}</div>
|
||||
<div class="_item-description">{item.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="o-step__main">
|
||||
<div class="o-step__title">
|
||||
{props.title}
|
||||
</div>
|
||||
<div class="o-step__description">
|
||||
{props.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h.f>
|
||||
|
||||
})}
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,14 @@ import '../dist/index.es.js'
|
|||
|
||||
describe('o-counter ', () => {
|
||||
it('default prop', async () => {
|
||||
const el = await fixture(html`<o-counter></o-counter>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(`<button>-</button><span>1</span><button>+</button>`)
|
||||
const el = await fixture(html` <m-step items="[
|
||||
{ name: 'Finished', description: 'This is a description.', state: 0 },
|
||||
{ name: 'In Progress', description: 'This is a description.', state: 2 },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: 3 }
|
||||
]" ></m-step>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(`<div class="m-step"><div class="_item _item-finish"><div class="_item-tail"></div><div class="_item-icon"><span class="icon"><i class="anticon anticon-check finish-icon"><o-icon-done></o-icon-done></i></span></div><div class="_item-content"><div class="_item-title">Finished</div><div class="_item-description">This is a description.</div></div></div><div class="_item _item-process"><div class="_item-tail"></div><div class="_item-icon"><span class="icon"><span class="icon">2</span></span></div><div class="_item-content"><div class="_item-title">In Progress</div><div class="_item-description">This is a description.</div></div></div><div class="_item _item-wait"><div class="_item-tail"></div><div class="_item-icon"><span class="icon"><span class="icon">3</span></span></div><div class="_item-content"><div class="_item-title">Waiting</div><div class="_item-description">This is a description.</div></div></div></div>`)
|
||||
})
|
||||
|
||||
it('count prop', async () => {
|
||||
const el = await fixture(html`<o-counter count="2"></o-counter>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(`<button>-</button><span>2</span><button>+</button>`)
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
types
|
||||
*.local
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
## Counter
|
||||
|
||||
> Counter
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm i
|
||||
```
|
||||
|
||||
## Dev
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
## Preview
|
||||
|
||||
```
|
||||
//html mode demo
|
||||
http://localhost:3000
|
||||
|
||||
//jsx mode demo
|
||||
http://localhost:3000/demo.html
|
||||
```
|
||||
|
||||
## Release
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Omiu</title>
|
||||
<script type="module" src="/src/demo.tsx"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Omiu</title>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>HTML Mode</h1>
|
||||
<o-counter count="2"></o-counter>
|
||||
<script>
|
||||
document.querySelector('o-counter').addEventListener('CountChanged', function (evt) {
|
||||
console.log(evt.detail)
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
{
|
||||
"name": "@omiu/counter",
|
||||
"version": "0.0.0",
|
||||
"main": "dist/index.es.js",
|
||||
"exports": {
|
||||
".": "./dist/index.es.js"
|
||||
},
|
||||
"types": "types/index.d.ts",
|
||||
"scripts": {
|
||||
"start": "yarn watch & vite",
|
||||
"dev": "yarn watch & vite",
|
||||
"build": "vite build && yarn build:scss",
|
||||
"build:demo": "vite build",
|
||||
"build:scss": "sass src/index.scss src/index.css",
|
||||
"watch": "sass --watch src/index.scss src/index.css --no-source-map",
|
||||
"test": "npm run build && web-test-runner \"test/*.js\" --node-resolve"
|
||||
},
|
||||
"dependencies": {
|
||||
"omi": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@open-wc/testing": "^2.5.33",
|
||||
"@types/node": "^16.4.7",
|
||||
"@web/test-runner": "^0.13.13",
|
||||
"node-watch": "^0.7.1",
|
||||
"sass": "^1.36.0",
|
||||
"typescript": "^4.3.2",
|
||||
"vite": "^2.4.3"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"omi",
|
||||
"omiu",
|
||||
"form"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { tag, h, WeElement, render } from 'omi'
|
||||
|
||||
import './index.tsx'
|
||||
import '../../step'
|
||||
|
||||
export type Props = {
|
||||
|
||||
}
|
||||
|
||||
const tagName = 'my-demo'
|
||||
|
||||
|
||||
|
||||
@tag(tagName)
|
||||
export default class MyDemo extends WeElement<Props> {
|
||||
|
||||
count = 2
|
||||
|
||||
onChanged = (evt: CustomEvent) => {
|
||||
//同步内部状态到外部，这样防止父刷新覆盖子的 count
|
||||
this.count = evt.detail
|
||||
}
|
||||
|
||||
render(props: Props) {
|
||||
return (
|
||||
<div style="display: block">
|
||||
<h1 onclick={() => {
|
||||
this.update()
|
||||
}}>JSX Mode</h1>
|
||||
<o-steps active={1}>
|
||||
<o-step title="步骤一" description="这是一段不重要的描述性文字"></o-step>
|
||||
<o-step title="步骤二" description="这是一段不重要的描述性文字"></o-step>
|
||||
<o-step title="步骤三" description="这是一段不重要的描述性文字"></o-step>
|
||||
</o-steps>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(<my-demo></my-demo>, 'body', {
|
||||
ignoreAttrs: true
|
||||
})
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
declare module '*.svg'
|
||||
declare module '*.png'
|
||||
declare module '*.jpg'
|
||||
declare module '*.jpeg'
|
||||
declare module '*.gif'
|
||||
declare module '*.bmp'
|
||||
declare module '*.tiff'
|
||||
declare module '*.less'
|
||||
declare module '*.css'
|
||||
declare module '*.scss'
|
||||
declare module '*.sass'
|
||||
declare module '*.webp'
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.o-steps {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.o-step--horizontal {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.o-step--vertical {
|
||||
height: 100%;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA","file":"index.css"}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.o-steps {
|
||||
display: flex;
|
||||
}
|
||||
.o-step--horizontal {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.o-step--vertical {
|
||||
height: 100%;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import { tag, h, WeElement, OverwriteProps } from 'omi'
|
||||
|
||||
import * as css from './index.scss'
|
||||
import '../../step'
|
||||
|
||||
export type Attrs = {
|
||||
active?: number,
|
||||
}
|
||||
|
||||
const tagName = 'o-steps'
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
[tagName]: Omi.Props & Attrs
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export type Props = OverwriteProps<Attrs, { active: number }>
|
||||
|
||||
@tag(tagName)
|
||||
export default class Steps extends WeElement<Props> {
|
||||
|
||||
static css = css.default ? css.default : css
|
||||
|
||||
static defaultProps = {
|
||||
active: 0
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
active: Number
|
||||
}
|
||||
|
||||
|
||||
beforeRender = () => {
|
||||
console.log('this.props.active', this.props.active)
|
||||
|
||||
this.provide = {
|
||||
active: this.props.active
|
||||
}
|
||||
}
|
||||
|
||||
render(props: Props) {
|
||||
return (
|
||||
<h.f>
|
||||
<div className='o-steps'>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</h.f>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { html, fixture, expect } from '@open-wc/testing'
|
||||
|
||||
import '../dist/index.es.js'
|
||||
|
||||
|
||||
describe('o-counter ', () => {
|
||||
it('default prop', async () => {
|
||||
const el = await fixture(html`<o-counter></o-counter>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(`<button>-</button><span>1</span><button>+</button>`)
|
||||
})
|
||||
|
||||
it('count prop', async () => {
|
||||
const el = await fixture(html`<o-counter count="2"></o-counter>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(`<button>-</button><span>2</span><button>+</button>`)
|
||||
})
|
||||
|
||||
})
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom",
|
||||
"dom.iterable"
|
||||
],
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "./types",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'src/index.tsx'),
|
||||
name: 'index',
|
||||
formats: ['es'],
|
||||
fileName: (format) => `index.${format}.js`
|
||||
},
|
||||
rollupOptions: {
|
||||
external: /^omi/,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
admin: resolve(__dirname, "demo.html")
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
jsxFactory: 'h',
|
||||
jsxFragment: 'Fragment'
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue