publish(omiu) tabs, support esm
This commit is contained in:
dntzhang
parent
c5b0d882dd
commit
d8958090bd
|
|
@ -1,12 +1,13 @@
|
|||
{
|
||||
"name": "@omiu/tabs",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.5",
|
||||
"description": "Omi UI Components.",
|
||||
"main": "src/index.js",
|
||||
"module": "src/index.esm.js",
|
||||
"types": "src/index.d.ts",
|
||||
"scripts": {
|
||||
"start": "node ./scripts/webpack.build.js -- demo",
|
||||
"build": "node ./scripts/webpack.build.js -- build"
|
||||
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
|
||||
},
|
||||
"typings": "./dist/index.d.ts",
|
||||
"repository": {
|
||||
|
|
@ -37,6 +38,7 @@
|
|||
},
|
||||
"homepage": "http://omijs.org",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^11.1.0",
|
||||
"css": "^2.2.4",
|
||||
"css-loader": "^1.0.1",
|
||||
"file": "^0.2.2",
|
||||
|
|
@ -49,7 +51,12 @@
|
|||
"omi": "latest",
|
||||
"omio": "latest",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"progress-bar-webpack-plugin": "^2.1.0",
|
||||
"resolve-url-loader": "^3.1.0",
|
||||
"rollup": "^2.7.1",
|
||||
"rollup-plugin-license": "^2.0.0",
|
||||
"rollup-plugin-scss": "^2.4.0",
|
||||
"rollup-plugin-typescript": "^1.0.1",
|
||||
"sass-loader": "^7.1.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"to-string-loader": "^1.1.5",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
//import nodeResolve from "rollup-plugin-node-resolve";
|
||||
|
||||
import typescript from 'rollup-plugin-typescript';
|
||||
import scss from 'rollup-plugin-scss'
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
const fs = require('fs')
|
||||
const license = require("rollup-plugin-license");
|
||||
const pkg = require("../package.json");
|
||||
const licensePlugin = license({
|
||||
banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.`
|
||||
});
|
||||
|
||||
export default {
|
||||
input: "src/index.tsx",
|
||||
output: {
|
||||
format: "es",
|
||||
file: "./src/index.esm.js",
|
||||
name: pkg.name,
|
||||
sourcemap: true,
|
||||
strict: true
|
||||
},
|
||||
plugins: [
|
||||
// nodeResolve({
|
||||
// main: true
|
||||
// }),
|
||||
scss({
|
||||
//output: false,
|
||||
output: function (styles, styleNodes) {
|
||||
fs.writeFileSync('./src/index.css', styles)
|
||||
},
|
||||
}),
|
||||
typescript(),
|
||||
commonjs(),
|
||||
|
||||
licensePlugin
|
||||
],
|
||||
external: ['omi']
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
const fs = require('fs')
|
||||
|
||||
const css = fs.readFileSync('./src/index.css')
|
||||
|
||||
const js = fs.readFileSync('./src/index.esm.js', 'utf-8')
|
||||
|
||||
|
||||
fs.writeFileSync('./src/index.esm.js',
|
||||
js.replace(`var css = /*#__PURE__*/Object.freeze({
|
||||
__proto__: null
|
||||
});`, `
|
||||
var css = \`${css}\`
|
||||
`)
|
||||
)
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,663 @@
|
|||
:host {
|
||||
display: block; }
|
||||
|
||||
.o-tabs__header {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin: 0 0 15px; }
|
||||
|
||||
.o-tabs__active-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background-color: #07c160;
|
||||
z-index: 1;
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
list-style: none; }
|
||||
|
||||
.o-tabs__new-tab {
|
||||
float: right;
|
||||
border: 1px solid #d3dce6;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
line-height: 18px;
|
||||
margin: 12px 0 9px 10px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #d3dce6;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all .15s;
|
||||
transition: all .15s; }
|
||||
|
||||
.o-tabs__new-tab .o-icon-plus {
|
||||
-webkit-transform: scale(0.8, 0.8);
|
||||
transform: scale(0.8, 0.8); }
|
||||
|
||||
.o-tabs__new-tab:hover {
|
||||
color: #07c160; }
|
||||
|
||||
.o-tabs__nav-wrap {
|
||||
overflow: hidden;
|
||||
margin-bottom: -1px;
|
||||
position: relative; }
|
||||
|
||||
.o-tabs__nav-wrap::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #E4E7ED;
|
||||
z-index: 1; }
|
||||
|
||||
.o-tabs--border-card > .o-tabs__header .o-tabs__nav-wrap::after,
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__nav-wrap::after {
|
||||
content: none; }
|
||||
|
||||
.o-tabs__nav-wrap.is-scrollable {
|
||||
padding: 0 20px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.o-tabs__nav-scroll {
|
||||
overflow: hidden; }
|
||||
|
||||
.o-tabs__nav-next,
|
||||
.o-tabs__nav-prev {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
line-height: 44px;
|
||||
font-size: 12px;
|
||||
color: #909399; }
|
||||
|
||||
.o-tabs__nav-next {
|
||||
right: 0; }
|
||||
|
||||
.o-tabs__nav-prev {
|
||||
left: 0; }
|
||||
|
||||
.o-tabs__nav {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
-webkit-transition: -webkit-transform .3s;
|
||||
transition: -webkit-transform .3s;
|
||||
transition: transform .3s;
|
||||
transition: transform .3s, -webkit-transform .3s;
|
||||
float: left;
|
||||
z-index: 2; }
|
||||
|
||||
.o-tabs__nav.is-stretch {
|
||||
min-width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex; }
|
||||
|
||||
.o-tabs__nav.is-stretch > * {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center; }
|
||||
|
||||
.o-tabs__item {
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
position: relative; }
|
||||
|
||||
.o-tabs__item:focus,
|
||||
.o-tabs__item:focus:active {
|
||||
outline: 0; }
|
||||
|
||||
.o-tabs__item:focus.is-active.is-focus:not(:active) {
|
||||
-webkit-box-shadow: 0 0 2px 2px #07c160 inset;
|
||||
box-shadow: 0 0 2px 2px #07c160 inset;
|
||||
border-radius: 3px; }
|
||||
|
||||
.o-tabs__item:hover .o-icon-close {
|
||||
visibility: visible; }
|
||||
|
||||
.o-tabs__item .o-icon-close {
|
||||
visibility: hidden;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
margin-left: 5px; }
|
||||
|
||||
.o-tabs__item .o-icon-close:before {
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
display: inline-block; }
|
||||
|
||||
.o-tabs__item .o-icon-close:hover {
|
||||
background-color: #C0C4CC;
|
||||
color: #FFF; }
|
||||
|
||||
.o-tabs__item.is-active {
|
||||
color: #07c160; }
|
||||
|
||||
.o-tabs__item:hover {
|
||||
color: #07c160;
|
||||
cursor: pointer; }
|
||||
|
||||
.o-tabs__item.is-disabled {
|
||||
color: #C0C4CC;
|
||||
cursor: default; }
|
||||
|
||||
.o-tabs__content {
|
||||
overflow: hidden;
|
||||
position: relative; }
|
||||
|
||||
.o-tabs--card > .o-tabs__header {
|
||||
border-bottom: 1px solid #E4E7ED; }
|
||||
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__nav {
|
||||
border: 1px solid #E4E7ED;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__active-bar {
|
||||
display: none; }
|
||||
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__item .o-icon-close {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
width: 0;
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
line-height: 15px;
|
||||
overflow: hidden;
|
||||
top: -1px;
|
||||
right: -2px;
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%; }
|
||||
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__item.is-active.is-closable .o-icon-close,
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__item.is-closable:hover .o-icon-close {
|
||||
width: 14px; }
|
||||
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__item {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-left: 1px solid #E4E7ED;
|
||||
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
|
||||
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__item:first-child {
|
||||
border-left: none; }
|
||||
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__item.is-closable:hover {
|
||||
padding-left: 13px;
|
||||
padding-right: 13px; }
|
||||
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__item.is-active {
|
||||
border-bottom-color: #FFF; }
|
||||
|
||||
.o-tabs--card > .o-tabs__header .o-tabs__item.is-active.is-closable {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px; }
|
||||
|
||||
.o-tabs--border-card {
|
||||
background: #FFF;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-bottom: none; }
|
||||
|
||||
.o-tabs--border-card.o-tabs--bottom {
|
||||
border: 1px solid #DCDFE6; }
|
||||
|
||||
.o-tabs--border-card > .o-tabs__content {
|
||||
padding: 15px; }
|
||||
|
||||
.o-tabs--border-card > .o-tabs__header {
|
||||
background-color: #F5F7FA;
|
||||
border-bottom: 1px solid #E4E7ED;
|
||||
margin: 0; }
|
||||
|
||||
.o-tabs--border-card > .o-tabs__header .o-tabs__item {
|
||||
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
border: 1px solid transparent;
|
||||
margin-top: -1px;
|
||||
color: #909399; }
|
||||
|
||||
.o-tabs--border-card > .o-tabs__header .o-tabs__item + .o-tabs__item,
|
||||
.o-tabs--border-card > .o-tabs__header .o-tabs__item:first-child {
|
||||
margin-left: -1px; }
|
||||
|
||||
.o-tabs--border-card > .o-tabs__header .o-tabs__item.is-active {
|
||||
color: #07c160;
|
||||
background-color: #FFF;
|
||||
border-right-color: #DCDFE6;
|
||||
border-left-color: #DCDFE6; }
|
||||
|
||||
.o-tabs--border-card > .o-tabs__header .o-tabs__item:not(.is-disabled):hover {
|
||||
color: #07c160; }
|
||||
|
||||
.o-tabs--border-card > .o-tabs__header .o-tabs__item.is-disabled {
|
||||
color: #C0C4CC; }
|
||||
|
||||
.o-tabs--border-card > .o-tabs__header .is-scrollable .o-tabs__item:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
.o-tabs--bottom .o-tabs__item.is-bottom:nth-child(2),
|
||||
.o-tabs--bottom .o-tabs__item.is-top:nth-child(2),
|
||||
.o-tabs--top .o-tabs__item.is-bottom:nth-child(2),
|
||||
.o-tabs--top .o-tabs__item.is-top:nth-child(2) {
|
||||
padding-left: 0; }
|
||||
|
||||
.o-tabs--bottom .o-tabs__item.is-bottom:last-child,
|
||||
.o-tabs--bottom .o-tabs__item.is-top:last-child,
|
||||
.o-tabs--top .o-tabs__item.is-bottom:last-child,
|
||||
.o-tabs--top .o-tabs__item.is-top:last-child {
|
||||
padding-right: 0; }
|
||||
|
||||
.o-tabs--bottom .o-tabs--left > .o-tabs__header .o-tabs__item:nth-child(2),
|
||||
.o-tabs--bottom .o-tabs--right > .o-tabs__header .o-tabs__item:nth-child(2),
|
||||
.o-tabs--bottom.o-tabs--border-card > .o-tabs__header .o-tabs__item:nth-child(2),
|
||||
.o-tabs--bottom.o-tabs--card > .o-tabs__header .o-tabs__item:nth-child(2),
|
||||
.o-tabs--top .o-tabs--left > .o-tabs__header .o-tabs__item:nth-child(2),
|
||||
.o-tabs--top .o-tabs--right > .o-tabs__header .o-tabs__item:nth-child(2),
|
||||
.o-tabs--top.o-tabs--border-card > .o-tabs__header .o-tabs__item:nth-child(2),
|
||||
.o-tabs--top.o-tabs--card > .o-tabs__header .o-tabs__item:nth-child(2) {
|
||||
padding-left: 20px; }
|
||||
|
||||
.o-tabs--bottom .o-tabs--left > .o-tabs__header .o-tabs__item:last-child,
|
||||
.o-tabs--bottom .o-tabs--right > .o-tabs__header .o-tabs__item:last-child,
|
||||
.o-tabs--bottom.o-tabs--border-card > .o-tabs__header .o-tabs__item:last-child,
|
||||
.o-tabs--bottom.o-tabs--card > .o-tabs__header .o-tabs__item:last-child,
|
||||
.o-tabs--top .o-tabs--left > .o-tabs__header .o-tabs__item:last-child,
|
||||
.o-tabs--top .o-tabs--right > .o-tabs__header .o-tabs__item:last-child,
|
||||
.o-tabs--top.o-tabs--border-card > .o-tabs__header .o-tabs__item:last-child,
|
||||
.o-tabs--top.o-tabs--card > .o-tabs__header .o-tabs__item:last-child {
|
||||
padding-right: 20px; }
|
||||
|
||||
.o-tabs--bottom.o-tabs--border-card {
|
||||
border-top: none; }
|
||||
|
||||
.o-tabs--bottom.o-tabs--border-card .o-tabs__header.is-bottom {
|
||||
border-bottom: 0;
|
||||
border-top: 1px solid #DCDFE6; }
|
||||
|
||||
.o-tabs--bottom.o-tabs--border-card .o-tabs__nav-wrap.is-bottom {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0; }
|
||||
|
||||
.o-tabs--bottom.o-tabs--border-card .o-tabs__item.is-bottom:not(.is-active) {
|
||||
border: 1px solid transparent; }
|
||||
|
||||
.o-tabs--bottom.o-tabs--border-card .o-tabs__item.is-bottom {
|
||||
margin: 0 -1px -1px; }
|
||||
|
||||
.o-tabs--left,
|
||||
.o-tabs--right {
|
||||
overflow: hidden; }
|
||||
|
||||
.o-tabs--left .o-tabs__header.is-left,
|
||||
.o-tabs--left .o-tabs__header.is-right,
|
||||
.o-tabs--left .o-tabs__nav-scroll,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right,
|
||||
.o-tabs--right .o-tabs__header.is-left,
|
||||
.o-tabs--right .o-tabs__header.is-right,
|
||||
.o-tabs--right .o-tabs__nav-scroll,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right {
|
||||
height: 100%; }
|
||||
|
||||
.o-tabs--left .o-tabs__active-bar.is-left,
|
||||
.o-tabs--left .o-tabs__active-bar.is-right,
|
||||
.o-tabs--right .o-tabs__active-bar.is-left,
|
||||
.o-tabs--right .o-tabs__active-bar.is-right {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
width: 2px;
|
||||
height: auto; }
|
||||
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right {
|
||||
margin-bottom: 0; }
|
||||
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-next,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-next,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-next i,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev i,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-next i,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev i,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-next i,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev i,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-next i,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev i {
|
||||
-webkit-transform: rotateZ(90deg);
|
||||
transform: rotateZ(90deg); }
|
||||
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev {
|
||||
left: auto;
|
||||
top: 0; }
|
||||
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-next,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-next {
|
||||
right: auto;
|
||||
bottom: 0; }
|
||||
|
||||
.o-tabs--left .o-tabs__active-bar.is-left,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left::after {
|
||||
right: 0;
|
||||
left: auto; }
|
||||
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left.is-scrollable,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right.is-scrollable,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left.is-scrollable,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right.is-scrollable {
|
||||
padding: 30px 0; }
|
||||
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left::after,
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-right::after,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-left::after,
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right::after {
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
bottom: auto;
|
||||
top: 0; }
|
||||
|
||||
.o-tabs--left .o-tabs__nav.is-left,
|
||||
.o-tabs--left .o-tabs__nav.is-right,
|
||||
.o-tabs--right .o-tabs__nav.is-left,
|
||||
.o-tabs--right .o-tabs__nav.is-right {
|
||||
float: none; }
|
||||
|
||||
.o-tabs--left .o-tabs__item.is-left,
|
||||
.o-tabs--left .o-tabs__item.is-right,
|
||||
.o-tabs--right .o-tabs__item.is-left,
|
||||
.o-tabs--right .o-tabs__item.is-right {
|
||||
display: block; }
|
||||
|
||||
.o-tabs--left.o-tabs--card .o-tabs__active-bar.is-left,
|
||||
.o-tabs--right.o-tabs--card .o-tabs__active-bar.is-right {
|
||||
display: none; }
|
||||
|
||||
.o-tabs--left .o-tabs__header.is-left {
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px; }
|
||||
|
||||
.o-tabs--left .o-tabs__nav-wrap.is-left {
|
||||
margin-right: -1px; }
|
||||
|
||||
.o-tabs--left .o-tabs__item.is-left {
|
||||
text-align: right; }
|
||||
|
||||
.o-tabs--left.o-tabs--card .o-tabs__item.is-left {
|
||||
border-left: none;
|
||||
border-right: 1px solid #E4E7ED;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid #E4E7ED;
|
||||
text-align: left; }
|
||||
|
||||
.o-tabs--left.o-tabs--card .o-tabs__item.is-left:first-child {
|
||||
border-right: 1px solid #E4E7ED;
|
||||
border-top: none; }
|
||||
|
||||
.o-tabs--left.o-tabs--card .o-tabs__item.is-left.is-active {
|
||||
border: 1px solid #E4E7ED;
|
||||
border-right-color: #fff;
|
||||
border-left: none;
|
||||
border-bottom: none; }
|
||||
|
||||
.o-tabs--left.o-tabs--card .o-tabs__item.is-left.is-active:first-child {
|
||||
border-top: none; }
|
||||
|
||||
.o-tabs--left.o-tabs--card .o-tabs__item.is-left.is-active:last-child {
|
||||
border-bottom: none; }
|
||||
|
||||
.o-tabs--left.o-tabs--card .o-tabs__nav {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-bottom: 1px solid #E4E7ED;
|
||||
border-right: none; }
|
||||
|
||||
.o-tabs--left.o-tabs--card .o-tabs__new-tab {
|
||||
float: none; }
|
||||
|
||||
.o-tabs--left.o-tabs--border-card .o-tabs__header.is-left {
|
||||
border-right: 1px solid #dfe4ed; }
|
||||
|
||||
.o-tabs--left.o-tabs--border-card .o-tabs__item.is-left {
|
||||
border: 1px solid transparent;
|
||||
margin: -1px 0 -1px -1px; }
|
||||
|
||||
.o-tabs--left.o-tabs--border-card .o-tabs__item.is-left.is-active {
|
||||
border-color: #d1dbe5 transparent; }
|
||||
|
||||
.o-tabs--right .o-tabs__header.is-right {
|
||||
float: right;
|
||||
margin-bottom: 0;
|
||||
margin-left: 10px; }
|
||||
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right {
|
||||
margin-left: -1px; }
|
||||
|
||||
.o-tabs--right .o-tabs__nav-wrap.is-right::after {
|
||||
left: 0;
|
||||
right: auto; }
|
||||
|
||||
.o-tabs--right .o-tabs__active-bar.is-right {
|
||||
left: 0; }
|
||||
|
||||
.o-tabs--right.o-tabs--card .o-tabs__item.is-right {
|
||||
border-bottom: none;
|
||||
border-top: 1px solid #E4E7ED; }
|
||||
|
||||
.o-tabs--right.o-tabs--card .o-tabs__item.is-right:first-child {
|
||||
border-left: 1px solid #E4E7ED;
|
||||
border-top: none; }
|
||||
|
||||
.o-tabs--right.o-tabs--card .o-tabs__item.is-right.is-active {
|
||||
border: 1px solid #E4E7ED;
|
||||
border-left-color: #fff;
|
||||
border-right: none;
|
||||
border-bottom: none; }
|
||||
|
||||
.o-tabs--right.o-tabs--card .o-tabs__item.is-right.is-active:first-child {
|
||||
border-top: none; }
|
||||
|
||||
.o-tabs--right.o-tabs--card .o-tabs__item.is-right.is-active:last-child {
|
||||
border-bottom: none; }
|
||||
|
||||
.o-tabs--right.o-tabs--card .o-tabs__nav {
|
||||
border-radius: 0 4px 4px 0;
|
||||
border-bottom: 1px solid #E4E7ED;
|
||||
border-left: none; }
|
||||
|
||||
.o-tabs--right.o-tabs--border-card .o-tabs__header.is-right {
|
||||
border-left: 1px solid #dfe4ed; }
|
||||
|
||||
.o-tabs--right.o-tabs--border-card .o-tabs__item.is-right {
|
||||
border: 1px solid transparent;
|
||||
margin: -1px -1px -1px 0; }
|
||||
|
||||
.o-tabs--right.o-tabs--border-card .o-tabs__item.is-right.is-active {
|
||||
border-color: #d1dbe5 transparent; }
|
||||
|
||||
.slideInLeft-transition,
|
||||
.slideInRight-transition {
|
||||
display: inline-block; }
|
||||
|
||||
.slideInRight-enter {
|
||||
-webkit-animation: slideInRight-enter .3s;
|
||||
animation: slideInRight-enter .3s; }
|
||||
|
||||
.slideInRight-leave {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
-webkit-animation: slideInRight-leave .3s;
|
||||
animation: slideInRight-leave .3s; }
|
||||
|
||||
.slideInLeft-enter {
|
||||
-webkit-animation: slideInLeft-enter .3s;
|
||||
animation: slideInLeft-enter .3s; }
|
||||
|
||||
.slideInLeft-leave {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
-webkit-animation: slideInLeft-leave .3s;
|
||||
animation: slideInLeft-leave .3s; }
|
||||
|
||||
@-webkit-keyframes slideInRight-enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%); }
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0); } }
|
||||
|
||||
@keyframes slideInRight-enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%); }
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0); } }
|
||||
|
||||
@-webkit-keyframes slideInRight-leave {
|
||||
0% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1; }
|
||||
100% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
opacity: 0; } }
|
||||
|
||||
@keyframes slideInRight-leave {
|
||||
0% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1; }
|
||||
100% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
opacity: 0; } }
|
||||
|
||||
@-webkit-keyframes slideInLeft-enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%); }
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0); } }
|
||||
|
||||
@keyframes slideInLeft-enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%); }
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0); } }
|
||||
|
||||
@-webkit-keyframes slideInLeft-leave {
|
||||
0% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1; }
|
||||
100% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
opacity: 0; } }
|
||||
|
||||
@keyframes slideInLeft-leave {
|
||||
0% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1; }
|
||||
100% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
opacity: 0; } }
|
||||
|
||||
.o-icon-close {
|
||||
display: inline-block;
|
||||
vertical-align: -0.125em; }
|
||||
|
||||
.o-icon-add {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5em;
|
||||
margin-left: 0.5em;
|
||||
cursor: pointer; }
|
||||
|
||||
.o-icon-add:hover {
|
||||
color: #07c160; }
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { WeElement } from 'omi';
|
||||
import '@omiu/common/theme.ts';
|
||||
import '@omiu/common';
|
||||
interface Props {
|
||||
list?: any[];
|
||||
activeIndex: number;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -96,14 +96,16 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./node_modules/_@omiu_common@0.0.1@@omiu/common/color.js":
|
||||
/***/ "./node_modules/_@omiu_common@0.0.2@@omiu/common/color.js":
|
||||
/*!****************************************************************!*\
|
||||
!*** ./node_modules/_@omiu_common@0.0.1@@omiu/common/color.js ***!
|
||||
!*** ./node_modules/_@omiu_common@0.0.2@@omiu/common/color.js ***!
|
||||
\****************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
/*! exports provided: Color */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Color", function() { return Color; });
|
||||
|
||||
|
||||
var colorString = __webpack_require__(/*! color-string */ "./node_modules/_color-string@1.5.3@color-string/index.js");
|
||||
|
|
@ -587,22 +589,34 @@ function zeroArray(arr, length) {
|
|||
return arr;
|
||||
}
|
||||
|
||||
module.exports = Color;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/_@omiu_common@0.0.1@@omiu/common/theme.ts":
|
||||
/***/ "./node_modules/_@omiu_common@0.0.2@@omiu/common/index.js":
|
||||
/*!****************************************************************!*\
|
||||
!*** ./node_modules/_@omiu_common@0.0.1@@omiu/common/theme.ts ***!
|
||||
!*** ./node_modules/_@omiu_common@0.0.2@@omiu/common/index.js ***!
|
||||
\****************************************************************/
|
||||
/*! no exports provided */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./color */ "./node_modules/_@omiu_common@0.0.1@@omiu/common/color.js");
|
||||
/* harmony import */ var _color__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_color__WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony import */ var _theme_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./theme.js */ "./node_modules/_@omiu_common@0.0.2@@omiu/common/theme.js");
|
||||
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/_@omiu_common@0.0.2@@omiu/common/theme.js":
|
||||
/*!****************************************************************!*\
|
||||
!*** ./node_modules/_@omiu_common@0.0.2@@omiu/common/theme.js ***!
|
||||
\****************************************************************/
|
||||
/*! no exports provided */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./color */ "./node_modules/_@omiu_common@0.0.2@@omiu/common/color.js");
|
||||
|
||||
|
||||
theme()
|
||||
|
|
@ -633,22 +647,22 @@ function setTheme(key, value) {
|
|||
style.setProperty('--o-' + key, value)
|
||||
switch (key) {
|
||||
case 'primary':
|
||||
style.setProperty('--o-primary-fade-little', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.382))
|
||||
style.setProperty('--o-primary-fade-some', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.618))
|
||||
style.setProperty('--o-primary-fade-more', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.759))
|
||||
style.setProperty('--o-primary-fade-lot', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.9))
|
||||
style.setProperty('--o-primary-active', _color__WEBPACK_IMPORTED_MODULE_0__(value).darken(0.1))
|
||||
style.setProperty('--o-primary-fade-little', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.382))
|
||||
style.setProperty('--o-primary-fade-some', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.618))
|
||||
style.setProperty('--o-primary-fade-more', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.759))
|
||||
style.setProperty('--o-primary-fade-lot', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.9))
|
||||
style.setProperty('--o-primary-active', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).darken(0.1))
|
||||
|
||||
style.setProperty('--o-primary-hover-border', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.618))
|
||||
style.setProperty('--o-primary-hover-bg', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.9))
|
||||
style.setProperty('--o-primary-hover-border', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.618))
|
||||
style.setProperty('--o-primary-hover-bg', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.9))
|
||||
|
||||
break
|
||||
case 'danger':
|
||||
style.setProperty('--o-danger-fade-little', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.382))
|
||||
style.setProperty('--o-danger-fade-some', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.618))
|
||||
style.setProperty('--o-danger-fade-more', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.759))
|
||||
style.setProperty('--o-danger-fade-lot', _color__WEBPACK_IMPORTED_MODULE_0__(value).fade(0.9))
|
||||
style.setProperty('--o-danger-active', _color__WEBPACK_IMPORTED_MODULE_0__(value).darken(0.1))
|
||||
style.setProperty('--o-danger-fade-little', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.382))
|
||||
style.setProperty('--o-danger-fade-some', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.618))
|
||||
style.setProperty('--o-danger-fade-more', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.759))
|
||||
style.setProperty('--o-danger-fade-lot', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).fade(0.9))
|
||||
style.setProperty('--o-danger-active', Object(_color__WEBPACK_IMPORTED_MODULE_0__["Color"])(value).darken(0.1))
|
||||
break
|
||||
|
||||
}
|
||||
|
|
@ -2548,7 +2562,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var omi_1 = __webpack_require__(/*! omi */ "omi");
|
||||
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
|
||||
__webpack_require__(/*! @omiu/common/theme.ts */ "./node_modules/_@omiu_common@0.0.1@@omiu/common/theme.ts");
|
||||
__webpack_require__(/*! @omiu/common */ "./node_modules/_@omiu_common@0.0.2@@omiu/common/index.js");
|
||||
var Tabs = /** @class */ (function (_super) {
|
||||
__extends(Tabs, _super);
|
||||
function Tabs() {
|
||||
|
|
@ -2587,10 +2601,10 @@ var Tabs = /** @class */ (function (_super) {
|
|||
this.setActiveBar(this['$tab' + this.props.activeIndex], this.props.activeIndex);
|
||||
};
|
||||
Tabs.prototype.removeTab = function (index) {
|
||||
var removedTab = this.props.list.splice(index, 1)[0];
|
||||
var tab = this.props.list.splice(index, 1)[0];
|
||||
this.forceUpdate();
|
||||
this.fire('removed', {
|
||||
removedTab: removedTab,
|
||||
this.fire('remove', {
|
||||
tab: tab,
|
||||
index: index
|
||||
});
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
import { tag, WeElement, h, extractClass, classNames } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
import '@omiu/common/theme.ts'
|
||||
import '@omiu/common'
|
||||
|
||||
interface Props {
|
||||
list?: any[]
|
||||
|
|
@ -68,10 +68,10 @@ export default class Tabs extends WeElement<Props>{
|
|||
}
|
||||
|
||||
removeTab(index) {
|
||||
const removedTab = this.props.list.splice(index, 1)[0]
|
||||
const tab = this.props.list.splice(index, 1)[0]
|
||||
this.forceUpdate()
|
||||
this.fire('removed', {
|
||||
removedTab: removedTab,
|
||||
this.fire('remove', {
|
||||
tab: tab,
|
||||
index: index
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue