DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(omiu): support esm

This commit is contained in:
dntzhang 2020-04-22 11:20:35 +08:00
parent 3dba7c9ba2
commit d65cf1de78
14 changed files with 2704 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/button/package.json
View File

@ -1,12 +1,13 @@
{
"name": "@omiu/button",
"version": "0.0.3",
"version": "0.0.4",
"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",
@ -51,6 +53,10 @@
"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",

38
components/button/scripts/rollup.config.js Normal file
View File

@ -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']
};

16
components/button/scripts/rollup.end.js Normal file
View File

@ -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}\`
`)
)

152
components/button/src/index.css Normal file
View File

@ -0,0 +1,152 @@
:host {
display: inline-block; }
:host([block]) {
display: block; }
.o-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px; }
.o-button:hover {
border-color: rgba(7, 193, 96, 0.382);
border-color: var(--o-primary-hover-border, rgba(7, 193, 96, 0.382));
color: #07c160;
color: var(--o-primary, #07c160);
background-color: rgba(7, 193, 96, 0.1);
background-color: var(--o-primary-hover-bg, rgba(7, 193, 96, 0.1)); }
.o-button:active {
color: #07c160;
color: var(--o-primary, #07c160);
border-color: #07c160;
border-color: var(--o-primary, #07c160);
outline: none; }
.o-button-primary {
color: #fff;
background-color: #07c160;
border-color: #07c160;
background-color: var(--o-primary, #07c160);
border-color: var(--o-primary, #07c160); }
.o-button-primary.is-plain {
color: #07c160;
color: var(--o-primary, #07c160);
background-color: rgba(7, 193, 96, 0.1);
background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1));
border-color: rgba(7, 193, 96, 0.382);
border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382)); }
.o-button-primary:hover {
background-color: rgba(7, 193, 96, 0.618);
border-color: rgba(7, 193, 96, 0.618);
background-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618));
border-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618));
color: #fff; }
.o-button-primary:active {
background-color: #059048;
border-color: #059048;
background-color: var(--o-primary-active, #059048);
border-color: var(--o-primary-active, #059048);
color: #fff; }
.o-button-danger {
color: #fff;
background-color: #fa5151;
border-color: #fa5151;
background-color: var(--o-danger, #fa5151);
border-color: var(--o-danger, #fa5151); }
.o-button-danger.is-plain {
color: #fa5151;
color: var(--o-danger, #fa5151);
background-color: rgba(250, 81, 81, 0.1);
background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, 0.1));
border-color: rgba(250, 81, 81, 0.382);
border-color: var(--o-danger-fade-some, rgba(250, 81, 81, 0.382)); }
.o-button-danger:hover {
background-color: rgba(250, 81, 81, 0.618);
border-color: rgba(250, 81, 81, 0.618);
background-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618));
border-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618));
color: #fff; }
.o-button-danger:active {
background-color: #f91f1f;
border-color: #f91f1f;
background-color: var(--o-danger-active, #f91f1f);
border-color: var(--o-danger-active, #f91f1f);
color: #fff; }
.loading {
width: 1em;
height: 1em;
display: inline-block;
animation: loading 1s steps(12, end) infinite;
vertical-align: -0.125em; }
@-webkit-keyframes loading {
0% {
transform: rotate3d(0, 0, 1, 0deg); }
100% {
transform: rotate3d(0, 0, 1, 360deg); } }
@keyframes loading {
0% {
transform: rotate3d(0, 0, 1, 0deg); }
100% {
transform: rotate3d(0, 0, 1, 360deg); } }
.o-button-medium {
padding: 10px 20px;
font-size: 14px;
border-radius: 4px; }
.o-button-small {
padding: 9px 15px;
font-size: 12px;
border-radius: 3px; }
.o-button-mini {
padding: 7px 15px;
font-size: 12px;
border-radius: 3px; }
.o-button.is-round {
border-radius: 20px; }
.o-button.is-circle {
border-radius: 20px;
padding: 12px; }
.o-button.is-disabled, .o-button.is-disabled:focus, .o-button.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5; }
.o-button.is-block {
display: block;
width: 100%; }

2
components/button/src/index.d.ts vendored
View File

@ -1,5 +1,5 @@
import { WeElement } from 'omi';
import '@omiu/common/theme.ts';
import '@omiu/common';
interface Props {
size?: 'medium' | 'small' | 'mini';
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';

2449
components/button/src/index.esm.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
components/button/src/index.esm.js.map Normal file
View File

File diff suppressed because one or more lines are too long

52
components/button/src/index.js
View File

@ -100,10 +100,12 @@ return /******/ (function(modules) { // webpackBootstrap
/*!****************************************************************!*\
!*** ./node_modules/_@omiu_common@0.0.1@@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,14 +589,27 @@ function zeroArray(arr, length) {
return arr;
}
module.exports = Color;
/***/ }),
/***/ "./node_modules/_@omiu_common@0.0.1@@omiu/common/index.js":
/*!****************************************************************!*\
!*** ./node_modules/_@omiu_common@0.0.1@@omiu/common/index.js ***!
\****************************************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _theme_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./theme.js */ "./node_modules/_@omiu_common@0.0.1@@omiu/common/theme.js");
/***/ }),
/***/ "./node_modules/_@omiu_common@0.0.1@@omiu/common/theme.ts":
/***/ "./node_modules/_@omiu_common@0.0.1@@omiu/common/theme.js":
/*!****************************************************************!*\
!*** ./node_modules/_@omiu_common@0.0.1@@omiu/common/theme.ts ***!
!*** ./node_modules/_@omiu_common@0.0.1@@omiu/common/theme.js ***!
\****************************************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
@ -602,7 +617,6 @@ module.exports = Color;
"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__);
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.1@@omiu/common/index.js");
var Button = /** @class */ (function (_super) {
__extends(Button, _super);
function Button() {

2
components/button/src/index.js.map
View File

File diff suppressed because one or more lines are too long

2
components/button/src/index.tsx
View File

@ -1,6 +1,6 @@
import { tag, WeElement, h, extractClass } from 'omi'
import * as css from './index.scss'
import '@omiu/common/theme.ts'
import '@omiu/common'
interface Props {
size?: 'medium' | 'small' | 'mini',

4
components/common/color.js
View File

@ -23,7 +23,7 @@ Object.keys(convert).forEach(function (model) {
var limiters = {};
function Color(obj, model) {
export function Color(obj, model) {
if (!(this instanceof Color)) {
return new Color(obj, model);
}
@ -480,5 +480,3 @@ function zeroArray(arr, length) {
return arr;
}
module.exports = Color;

1
components/common/index.js
View File

@ -0,0 +1 @@
import './theme.js'

2
components/common/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/common",
"version": "0.0.1",
"version": "0.0.2",
"description": "Omi UI Components.",
"main": "index.js",
"scripts": {

2
components/common/theme.ts → components/common/theme.js
View File

@ -1,4 +1,4 @@
import * as Color from './color'
import { Color } from './color'
theme()