diff --git a/components/docs-src/src/docs/en/o-icon.md b/components/docs-src/src/docs/en/o-icon.md new file mode 100644 index 000000000..03c4490fe --- /dev/null +++ b/components/docs-src/src/docs/en/o-icon.md @@ -0,0 +1,51 @@ +## OIcon + +SVG Icon + + + +## Import + +```js +import '@omiu/o-icon' +``` + +Or use script tag to ref it. + + +```html + +``` + +## Usage + +```html + +``` + +## API + +### Props + +```tsx +{ + path?: string, + paths?: object, + view?: number, + scale?: number, + color?: string, + rotate?: boolean +} +``` + +### 默认属性 + +```tsx +{ + view: 1024, + scale: 2 +) +``` diff --git a/components/docs-src/src/docs/zh-cn/o-icon.md b/components/docs-src/src/docs/zh-cn/o-icon.md new file mode 100644 index 000000000..00831c368 --- /dev/null +++ b/components/docs-src/src/docs/zh-cn/o-icon.md @@ -0,0 +1,51 @@ +## OIcon 矢量图标 + +SVG 矢量图标 + + + +## 导入 + +```js +import '@omiu/o-icon' +``` + +或者直接 script 标签引入。 + + +```html + +``` + +## 使用 + +```html + +``` + + +## API + +### 属性 + +```tsx +{ + path?: string, + paths?: object, + view?: number, + scale?: number, + color?: string, + rotate?: boolean +} +``` + +### 默认属性 +```tsx +{ + view: 1024, + scale: 2 +) +``` diff --git a/components/o-icon/README.md b/components/o-icon/README.md new file mode 100644 index 000000000..4471e408d --- /dev/null +++ b/components/o-icon/README.md @@ -0,0 +1,48 @@ +## OIcon + +SVG Icon + +* [→ CodePen](https://codepen.io/omijs/pen/QWjgapY) + +## Import + +```js +import '@omiu/o-icon' +``` + +Or use script tag to ref it. + + +```html + +``` + +## Usage + +```html + +``` + +## API + +### Props + +```tsx +{ + path?: string, + paths?: object, + view?: number, + scale?: number, + color?: string, + rotate?: boolean +} +``` + +### 默认属性 + +```tsx +{ + view: 1024, + scale: 2 +) +``` diff --git a/components/o-icon/demos/js-demo/index.html b/components/o-icon/demos/js-demo/index.html new file mode 100644 index 000000000..2af607f69 --- /dev/null +++ b/components/o-icon/demos/js-demo/index.html @@ -0,0 +1,84 @@ + + + + + + + Omiu ActionSheet + + + + + + + + + + + + +

Scale=2

+
+ + + + + + + + + + + + + + + + +

+

Scale=3

+
+ + + + + + + + + + + + + + + + + + diff --git a/components/o-icon/package.json b/components/o-icon/package.json new file mode 100644 index 000000000..ff9395243 --- /dev/null +++ b/components/o-icon/package.json @@ -0,0 +1,101 @@ +{ + "name": "@omiu/o-icon", + "version": "0.0.1", + "description": "SVG Icon", + "docsExtend": { + "cnName": "矢量图标", + "cnDescription": "SVG 矢量图标", + "codepen": "QWjgapY", + "codepenHeight": 351, + "codepenDefaultTab": "html,result" + }, + "main": "src/index.js", + "module": "src/index.esm.js", + "types": "src/index.d.ts", + "scripts": { + "docs": "node ./scripts/docs-gen.js", + "start": "node ./scripts/webpack.build.js -- demo", + "build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js" + }, + "typings": "./dist/index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/Tencent/omi.git" + }, + "files": [ + "src", + "dist", + "typings.json" + ], + "keywords": [ + "omiu", + "omi", + "omio", + "preact", + "react", + "virtual dom", + "vdom", + "components", + "virtual", + "dom" + ], + "author": "dntzhang ", + "license": "MIT", + "bugs": { + "url": "https://github.com/Tencent/omi/issues" + }, + "homepage": "http://omijs.org", + "devDependencies": { + "@rollup/plugin-commonjs": "^11.1.0", + "css": "^2.2.4", + "css-loader": "^1.0.1", + "file": "^0.2.2", + "file-loader": "^2.0.0", + "html-webpack-plugin": "^3.2.0", + "less": "^3.9.0", + "less-loader": "^4.1.0", + "mini-css-extract-plugin": "^0.4.5", + "node-sass": "^4.12.0", + "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-node-resolve": "^5.2.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", + "ts-loader": "^5.4.4", + "typescript": "^3.2.1", + "url": "^0.11.0", + "url-loader": "^1.1.2", + "webpack": "^4.42.1", + "webpack-cli": "^3.3.1", + "webpack-dev-server": "^3.1.10", + "webpack-merge": "^4.1.4" + }, + "greenkeeper": { + "ignore": [ + "babel-cli", + "babel-core", + "babel-eslint", + "babel-loader", + "jscodeshift", + "rollup-plugin-babel" + ] + }, + "prettier": { + "singleQuote": true, + "semi": false, + "tabWidth": 2, + "useTabs": false + }, + "dependencies": { + "@omiu/common": "latest", + "omi": "latest" + } +} diff --git a/components/o-icon/scripts/docs-gen.js b/components/o-icon/scripts/docs-gen.js new file mode 100644 index 000000000..b3b4af1c7 --- /dev/null +++ b/components/o-icon/scripts/docs-gen.js @@ -0,0 +1,134 @@ +//自动扫描 index.tsx 生成 readme +const fs = require('fs') + +const content = fs.readFileSync('./src/index.tsx', 'utf-8') + +const props = content.match(new RegExp('interface Props \\{[\\s\\S]*?}'))[0].replace('interface Props ', '') + +const defaultPropsContext = content.match(new RegExp('static defaultProps = \\{[\\s\\S]*?}')) +let defaultProps + +if (defaultPropsContext) { + + defaultProps = defaultPropsContext[0].replace('static defaultProps = ', '').replace(/ /g, ' ').replace(/ }/g, ')') +} + + +const eventContexts = content.match(new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g')) +const package = require('../package.json') +const packageName = package.name +const name = packageName.split('/')[1] + +const upperCaseName = name.split('-').map(item => { + return item.charAt(0).toUpperCase() + item.slice(1) +}).join('') +const tagName = 'o-' + name + +//fire 附近打标标记 event.detail 类型？ +let events, eventMap +if (eventContexts) { + + events = eventContexts.map(event => { + return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '') + }) + eventMap = {} + events.forEach(event => { + eventMap[event] = 1 + }) +} + +const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName} + +${package.docsExtend.cnDescription} + + + +## 导入 + +\`\`\`js +import '${packageName}' +\`\`\` + +或者直接 script 标签引入。 + + +\`\`\`html + +\`\`\` + +## 使用 + +\`\`\`html +<${tagName}> +\`\`\` + + +## API + +### 属性 + +\`\`\`tsx +${props} +\`\`\` + +${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''} +${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => { + return `* ${event}\n` +}).join('') : ''}` + +fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent) + + + +const enContent = `## ${upperCaseName} + +${package.description} + + + +## Import + +\`\`\`js +import '${packageName}' +\`\`\` + +Or use script tag to ref it. + + +\`\`\`html + +\`\`\` + +## Usage + +\`\`\`html +<${tagName}> +\`\`\` + +## API + +### Props + +\`\`\`tsx +${props} +\`\`\` + +${defaultProps ? '### 默认属性\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''} +${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => { + return `* ${event}\n` +}).join('') : ''}` + + +fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent) + + +fs.writeFileSync(`../${name}/README.md`, enContent.replace(//, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`)) +// console.log(props) +// console.log(defaultProps) +// console.log(Object.keys(eventMap)) diff --git a/components/o-icon/scripts/rollup.config.js b/components/o-icon/scripts/rollup.config.js new file mode 100644 index 000000000..1829eeeb9 --- /dev/null +++ b/components/o-icon/scripts/rollup.config.js @@ -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'] +}; diff --git a/components/o-icon/scripts/rollup.end.js b/components/o-icon/scripts/rollup.end.js new file mode 100644 index 000000000..14327af1a --- /dev/null +++ b/components/o-icon/scripts/rollup.end.js @@ -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}\` +`) +) + + diff --git a/components/o-icon/scripts/webpack.build.js b/components/o-icon/scripts/webpack.build.js new file mode 100644 index 000000000..ff4b7bdc4 --- /dev/null +++ b/components/o-icon/scripts/webpack.build.js @@ -0,0 +1,102 @@ +const path = require('path') +const glob = require('glob') +const webpack = require('webpack') +const ProgressBarPlugin = require('progress-bar-webpack-plugin') +const pkgName = require('../package.json') +const componentName = pkgName.name.split('/')[1] + +const name = 'o-' + componentName +const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUpperCase() + name.slice(1)).join('') + + +const config = { + devtool: 'source-map', + plugins: [ + new ProgressBarPlugin() + ], + entry: { + [name]: './src/index.tsx' + }, + output: { + path: path.resolve(__dirname, '../src/'), + filename: 'index.js', + libraryTarget: 'umd', + library: library, + libraryExport: "default", + globalObject: 'this' + }, + mode: 'development', + module: { + rules: [{ + test: /\.scss$/, + use: [ + 'to-string-loader', + 'css-loader', + { + loader: 'resolve-url-loader' + }, + { + loader: 'sass-loader', + options: { + sourceMap: true, + + // mdc-web doesn't use sass-loader's normal syntax for imports + // across modules, so we add all module directories containing + // mdc-web components to the Sass include path + // https://github.com/material-components/material-components-web/issues/351 + includePaths: glob.sync(path.join(__dirname, '../node_modules/@material')).map((dir) => path.dirname(dir)) + + } + } + ] + }, + { + test: /\.css$/, + use: [ + 'to-string-loader', + 'css-loader', + { + loader: 'resolve-url-loader' + } + ] + }, + { + test: /\.less$/, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'resolve-url-loader' + }, + 'less-loader' + ] + }, + { + test: /\.(jpe?g|png|gif|svg)$/i, + loader: "url-loader" + }, + { + test: /\.[t|j]sx?$/, + use: 'ts-loader', + exclude: /node_modules/ + } + ] + }, + watch: process.argv[3] === 'demo', + externals: { + 'omi': { + commonjs: "omi", + commonjs2: "omi", + amd: "omi", + root: "Omi" + } + } +} + +webpack(config, (err, stats) => { // Stats Object + if (err || stats.hasErrors()) { + // Handle errors here + } + // Done processing + +}) diff --git a/components/svg-icon/src/index.css b/components/o-icon/src/index.css similarity index 54% rename from components/svg-icon/src/index.css rename to components/o-icon/src/index.css index 2956ac346..9fc834d23 100644 --- a/components/svg-icon/src/index.css +++ b/components/o-icon/src/index.css @@ -1,31 +1,28 @@ :host { - display: inline-block; -} -.m-icon { + display: inline-block; } + +.o-icon { text-align: center; + display: inline-block; } + +.o-icon svg { display: inline-block; -} -.m-icon svg { - display: inline-block; - vertical-align: top; -} + vertical-align: top; } + .rotate { display: inline-block; -webkit-animation: rotate 1s infinite linear; - animation: rotate 1s infinite linear; -} + animation: rotate 1s infinite linear; } + i div { - font-style: normal; -} + font-style: normal; } + @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} + transform: rotate(360deg); } } + @keyframes rotate { 100% { -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} + transform: rotate(360deg); } } diff --git a/components/svg-icon/src/index.d.ts b/components/o-icon/src/index.d.ts similarity index 96% rename from components/svg-icon/src/index.d.ts rename to components/o-icon/src/index.d.ts index d4b865474..96e7c50d4 100644 --- a/components/svg-icon/src/index.d.ts +++ b/components/o-icon/src/index.d.ts @@ -1,5 +1,4 @@ import { WeElement } from 'omi'; -import '../theme.ts'; interface Props { path?: string; paths?: object; diff --git a/components/o-icon/src/index.esm.js b/components/o-icon/src/index.esm.js new file mode 100644 index 000000000..f194b28d3 --- /dev/null +++ b/components/o-icon/src/index.esm.js @@ -0,0 +1,125 @@ +/** + * @omiu/o-icon v0.0.1 http://omijs.org + * Front End Cross-Frameworks Framework. + * By dntzhang https://github.com/dntzhang + * Github: https://github.com/Tencent/omi + * MIT Licensed. + */ + +import { h, extractClass, classNames, tag, WeElement } from 'omi'; + +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. All rights reserved. +Licensed under the Apache License, Version 2.0 (the "License"); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at http://www.apache.org/licenses/LICENSE-2.0 + +THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED +WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, +MERCHANTABLITY OR NON-INFRINGEMENT. + +See the Apache Version 2.0 License for specific language governing permissions +and limitations under the License. +***************************************************************************** */ +/* global Reflect, Promise */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + + +var css = `:host { + display: inline-block; } + +.o-icon { + text-align: center; + display: inline-block; } + +.o-icon svg { + display: inline-block; + vertical-align: top; } + +.rotate { + display: inline-block; + -webkit-animation: rotate 1s infinite linear; + animation: rotate 1s infinite linear; } + +i div { + font-style: normal; } + +@-webkit-keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } +` + + +var Icon = /** @class */ (function (_super) { + __extends(Icon, _super); + function Icon() { + return _super !== null && _super.apply(this, arguments) || this; + } + Icon.prototype.render = function (props) { + return (h("i", __assign({}, extractClass(props, 'o-icon')), + h("svg", { viewBox: '0 0 ' + props.view + ' ' + props.view, class: classNames({ rotate: props.rotate }), width: props.scale + 'em', height: props.scale + 'em', fill: props.color, "aria-hidden": "true" }, props.paths ? (props.paths.map(function (item) { + var attrs = { d: item.path, fill: props.color || 'black' }; + if (item.color) + attrs.fill = item.color; + return h("path", __assign({}, attrs)); + })) : h("path", { d: props.path })), + props.children && (h("div", { style: "color:" + (props.color || 'black') + ";" }, props.children[0])))); + }; + Icon.css = css; + Icon.defaultProps = { + view: 1024, + scale: 2 + }; + Icon.propTypes = { + path: String, + paths: Object, + view: Number, + scale: Number, + color: String, + rotate: Boolean + }; + Icon = __decorate([ + tag('o-icon') + ], Icon); + return Icon; +}(WeElement)); + +export default Icon; +//# sourceMappingURL=index.esm.js.map diff --git a/components/o-icon/src/index.esm.js.map b/components/o-icon/src/index.esm.js.map new file mode 100644 index 000000000..3ec5d522c --- /dev/null +++ b/components/o-icon/src/index.esm.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.esm.js","sources":["../node_modules/_tslib@1.11.1@tslib/tslib.es6.js","index.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n};\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result.default = mod;\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, privateMap) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to get private field on non-instance\");\r\n }\r\n return privateMap.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, privateMap, value) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to set private field on non-instance\");\r\n }\r\n privateMap.set(receiver, value);\r\n return value;\r\n}\r\n","import { tag, WeElement, h, extractClass, classNames } from 'omi'\nimport * as css from './index.scss'\n\n\ninterface Props {\n path?: string,\n paths?: object,\n view?: number,\n scale?: number,\n color?: string,\n rotate?: boolean\n}\n\n@tag('o-icon')\nexport default class Icon extends WeElement{\n static css = css\n\n static defaultProps = {\n view: 1024,\n scale: 2\n }\n\n static propTypes = {\n path: String,\n paths: Object,\n view: Number,\n scale: Number,\n color: String,\n rotate: Boolean\n }\n\n render(props) {\n return (\n \n \n {props.paths ? (\n props.paths.map(item => {\n const attrs = { d: item.path, fill: props.color || 'black' }\n if (item.color) attrs.fill = item.color\n return \n })\n ) : }\n \n {props.children && (\n
\n {props.children[0]}\n
\n )}\n \n )\n }\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/components/svg-icon/src/index.js b/components/o-icon/src/index.js similarity index 77% rename from components/svg-icon/src/index.js rename to components/o-icon/src/index.js index 0351f742b..5c6664a42 100644 --- a/components/svg-icon/src/index.js +++ b/components/o-icon/src/index.js @@ -4,10 +4,10 @@ else if(typeof define === 'function' && define.amd) define(["omi"], factory); else if(typeof exports === 'object') - exports["MIcon"] = factory(require("omi")); + exports["OOIcon"] = factory(require("omi")); else - root["MIcon"] = factory(root["Omi"]); -})(window, function(__WEBPACK_EXTERNAL_MODULE_omi__) { + root["OOIcon"] = factory(root["Omi"]); +})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -91,34 +91,34 @@ return /******/ (function(modules) { // webpackBootstrap /******/ /******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = "./src/icon/index.tsx"); +/******/ return __webpack_require__(__webpack_require__.s = "./src/index.tsx"); /******/ }) /************************************************************************/ /******/ ({ -/***/ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/icon/index.scss": -/*!******************************************************************************************************************************************!*\ - !*** ./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./src/icon/index.scss ***! - \******************************************************************************************************************************************/ +/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss": +/*!****************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./src/index.scss ***! + \****************************************************************************************************************************************************************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false); +exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false); // imports // module -exports.push([module.i, ":host {\n display: inline-block; }\n\n.m-icon {\n text-align: center;\n display: inline-block; }\n\n.m-icon svg {\n display: inline-block;\n vertical-align: top; }\n\n.rotate {\n display: inline-block;\n -webkit-animation: rotate 1s infinite linear;\n animation: rotate 1s infinite linear; }\n\ni div {\n font-style: normal; }\n\n@-webkit-keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n@keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n", ""]); +exports.push([module.i, ":host {\n display: inline-block; }\n\n.o-icon {\n text-align: center;\n display: inline-block; }\n\n.o-icon svg {\n display: inline-block;\n vertical-align: top; }\n\n.rotate {\n display: inline-block;\n -webkit-animation: rotate 1s infinite linear;\n animation: rotate 1s infinite linear; }\n\ni div {\n font-style: normal; }\n\n@-webkit-keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n@keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n", ""]); // exports /***/ }), -/***/ "./node_modules/css-loader/lib/css-base.js": -/*!*************************************************!*\ - !*** ./node_modules/css-loader/lib/css-base.js ***! - \*************************************************/ +/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js": +/*!*******************************************************************!*\ + !*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***! + \*******************************************************************/ /*! no static exports found */ /***/ (function(module, exports) { @@ -202,15 +202,15 @@ function toComment(sourceMap) { /***/ }), -/***/ "./src/icon/index.scss": -/*!*****************************!*\ - !*** ./src/icon/index.scss ***! - \*****************************/ +/***/ "./src/index.scss": +/*!************************!*\ + !*** ./src/index.scss ***! + \************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { - var result = __webpack_require__(/*! !../../node_modules/css-loader!../../node_modules/resolve-url-loader!../../node_modules/sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/icon/index.scss"); + var result = __webpack_require__(/*! !../node_modules/_css-loader@1.0.1@css-loader!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss"); if (typeof result === "string") { module.exports = result; @@ -221,10 +221,10 @@ function toComment(sourceMap) { /***/ }), -/***/ "./src/icon/index.tsx": -/*!****************************!*\ - !*** ./src/icon/index.tsx ***! - \****************************/ +/***/ "./src/index.tsx": +/*!***********************!*\ + !*** ./src/index.tsx ***! + \***********************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { @@ -262,16 +262,14 @@ 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/icon/index.scss"); -//@ts-ignore -__webpack_require__(/*! ../theme.ts */ "./src/theme.ts"); +var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss"); var Icon = /** @class */ (function (_super) { __extends(Icon, _super); function Icon() { return _super !== null && _super.apply(this, arguments) || this; } Icon.prototype.render = function (props) { - return (omi_1.h("i", __assign({}, omi_1.extractClass(props, 'm-icon')), + return (omi_1.h("i", __assign({}, omi_1.extractClass(props, 'o-icon')), omi_1.h("svg", { viewBox: '0 0 ' + props.view + ' ' + props.view, class: omi_1.classNames({ rotate: props.rotate }), width: props.scale + 'em', height: props.scale + 'em', fill: props.color, "aria-hidden": "true" }, props.paths ? (props.paths.map(function (item) { var attrs = { d: item.path, fill: props.color || 'black' }; if (item.color) @@ -294,45 +292,13 @@ var Icon = /** @class */ (function (_super) { rotate: Boolean }; Icon = __decorate([ - omi_1.tag('m-icon') + omi_1.tag('o-icon') ], Icon); return Icon; }(omi_1.WeElement)); exports.default = Icon; -/***/ }), - -/***/ "./src/theme.ts": -/*!**********************!*\ - !*** ./src/theme.ts ***! - \**********************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -theme(); -document.addEventListener('DOMContentLoaded', function () { - theme(); -}); -function theme() { - if (document.body && !document.body.style.getPropertyValue('--mdc-theme-primary')) { - document.body.style.setProperty('--mdc-theme-primary', '#0072d9'); - document.body.style.setProperty('--mdc-theme-secondary', '#2170b8'); - document.body.style.setProperty('--mdc-theme-error', '#f5222d'); - document.body.style.setProperty('--mdc-theme-surface', '#ffffff'); - document.body.style.setProperty('--mdc-theme-on-primary', '#ffffff'); - document.body.style.setProperty('--mdc-theme-on-secondary', '#ffffff'); - document.body.style.setProperty('--mdc-theme-on-error', '#ffffff'); - document.body.style.setProperty('--mdc-theme-on-surface', '#000000'); - document.body.style.setProperty('--mdc-theme-background', '#ffffff'); - document.body.style.setProperty('--mdc-shape-small-component-radius', '4px'); - document.body.style.setProperty('--mdc-shape-medium-component-radius', '4px'); - document.body.style.setProperty('--mdc-shape-large-component-radius', '0px'); - document.body.style.setProperty('--mdc-typography--font-family', 'Roboto, sans-serif'); - } -} - - /***/ }), /***/ "omi": diff --git a/components/o-icon/src/index.js.map b/components/o-icon/src/index.js.map new file mode 100644 index 000000000..af8850a9f --- /dev/null +++ b/components/o-icon/src/index.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack://OOIcon/webpack/universalModuleDefinition","webpack://OOIcon/webpack/bootstrap","webpack://OOIcon/./src/index.scss","webpack://OOIcon/./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js","webpack://OOIcon/./src/index.scss?56db","webpack://OOIcon/./src/index.tsx","webpack://OOIcon/external {\"commonjs\":\"omi\",\"commonjs2\":\"omi\",\"amd\":\"omi\",\"root\":\"Omi\"}"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;QCVA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;AClFA,2BAA2B,mBAAO,CAAC,iIAA8D;AACjG;;;AAGA;AACA,cAAc,QAAS,UAAU,0BAA0B,EAAE,aAAa,uBAAuB,0BAA0B,EAAE,iBAAiB,0BAA0B,wBAAwB,EAAE,aAAa,0BAA0B,iDAAiD,yCAAyC,EAAE,WAAW,uBAAuB,EAAE,+BAA+B,UAAU,wCAAwC,gCAAgC,EAAE,EAAE,uBAAuB,UAAU,wCAAwC,gCAAgC,EAAE,EAAE;;AAE3kB;;;;;;;;;;;;ACPA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,mCAAmC,gBAAgB;AACnD,IAAI;AACJ;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA,gBAAgB,iBAAiB;AACjC;AACA;AACA;AACA;AACA,YAAY,oBAAoB;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,oDAAoD,cAAc;;AAElE;AACA;;;;;;;;;;;;;AC1EA,qBAAqB,mBAAO,CAAC,2YAAiN;;AAE9O;AACA;AACA,SAAS;AACT;AACA;;;;;;;;;;;;;ACPa;AACb;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD;AACA;AACA,gDAAgD,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4C,QAAQ;AACpD;AACA;AACA,8CAA8C,cAAc;AAC5D,YAAY,mBAAO,CAAC,gBAAK;AACzB,UAAU,mBAAO,CAAC,sCAAc;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwC;AACxC,4BAA4B,2EAA2E,uBAAuB,oGAAoG;AAClO,6BAA6B;AAC7B;AACA;AACA,kDAAkD;AAClD,aAAa,sBAAsB,gBAAgB;AACnD,+CAA+C,gDAAgD,GAAG;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;;;;;;;;;;;;ACnEA,iD","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"omi\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"omi\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"OOIcon\"] = factory(require(\"omi\"));\n\telse\n\t\troot[\"OOIcon\"] = factory(root[\"Omi\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.tsx\");\n","exports = module.exports = require(\"../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \":host {\\n display: inline-block; }\\n\\n.o-icon {\\n text-align: center;\\n display: inline-block; }\\n\\n.o-icon svg {\\n display: inline-block;\\n vertical-align: top; }\\n\\n.rotate {\\n display: inline-block;\\n -webkit-animation: rotate 1s infinite linear;\\n animation: rotate 1s infinite linear; }\\n\\ni div {\\n font-style: normal; }\\n\\n@-webkit-keyframes rotate {\\n 100% {\\n -webkit-transform: rotate(360deg);\\n transform: rotate(360deg); } }\\n\\n@keyframes rotate {\\n 100% {\\n -webkit-transform: rotate(360deg);\\n transform: rotate(360deg); } }\\n\", \"\"]);\n\n// exports\n","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n","\n var result = require(\"!!../node_modules/_css-loader@1.0.1@css-loader/index.js!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss\");\n\n if (typeof result === \"string\") {\n module.exports = result;\n } else {\n module.exports = result.toString();\n }\n ","\"use strict\";\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omi_1 = require(\"omi\");\nvar css = require(\"./index.scss\");\nvar Icon = /** @class */ (function (_super) {\n __extends(Icon, _super);\n function Icon() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Icon.prototype.render = function (props) {\n return (omi_1.h(\"i\", __assign({}, omi_1.extractClass(props, 'o-icon')),\n omi_1.h(\"svg\", { viewBox: '0 0 ' + props.view + ' ' + props.view, class: omi_1.classNames({ rotate: props.rotate }), width: props.scale + 'em', height: props.scale + 'em', fill: props.color, \"aria-hidden\": \"true\" }, props.paths ? (props.paths.map(function (item) {\n var attrs = { d: item.path, fill: props.color || 'black' };\n if (item.color)\n attrs.fill = item.color;\n return omi_1.h(\"path\", __assign({}, attrs));\n })) : omi_1.h(\"path\", { d: props.path })),\n props.children && (omi_1.h(\"div\", { style: \"color:\" + (props.color || 'black') + \";\" }, props.children[0]))));\n };\n Icon.css = css;\n Icon.defaultProps = {\n view: 1024,\n scale: 2\n };\n Icon.propTypes = {\n path: String,\n paths: Object,\n view: Number,\n scale: Number,\n color: String,\n rotate: Boolean\n };\n Icon = __decorate([\n omi_1.tag('o-icon')\n ], Icon);\n return Icon;\n}(omi_1.WeElement));\nexports.default = Icon;\n","module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;"],"sourceRoot":""} \ No newline at end of file diff --git a/components/svg-icon/src/index.scss b/components/o-icon/src/index.scss similarity index 95% rename from components/svg-icon/src/index.scss rename to components/o-icon/src/index.scss index 56ce2bdfc..a3119b97c 100644 --- a/components/svg-icon/src/index.scss +++ b/components/o-icon/src/index.scss @@ -2,12 +2,12 @@ display: inline-block; } -.m-icon { +.o-icon { text-align: center; display: inline-block; } -.m-icon svg{ +.o-icon svg { display: inline-block; vertical-align: top; } @@ -34,4 +34,4 @@ i div { -webkit-transform: rotate(360deg); transform: rotate(360deg) } -} \ No newline at end of file +} diff --git a/components/svg-icon/src/index.tsx b/components/o-icon/src/index.tsx similarity index 93% rename from components/svg-icon/src/index.tsx rename to components/o-icon/src/index.tsx index abc5f7945..33312d91b 100644 --- a/components/svg-icon/src/index.tsx +++ b/components/o-icon/src/index.tsx @@ -1,8 +1,6 @@ import { tag, WeElement, h, extractClass, classNames } from 'omi' import * as css from './index.scss' -//@ts-ignore -import '../theme.ts' interface Props { path?: string, @@ -13,7 +11,7 @@ interface Props { rotate?: boolean } -@tag('m-icon') +@tag('o-icon') export default class Icon extends WeElement{ static css = css @@ -33,7 +31,7 @@ export default class Icon extends WeElement{ render(props) { return ( - + = 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omi_1 = require(\"omi\");\nvar css = require(\"./index.scss\");\n//@ts-ignore\nrequire(\"../theme.ts\");\nvar Icon = /** @class */ (function (_super) {\n __extends(Icon, _super);\n function Icon() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Icon.prototype.render = function (props) {\n return (omi_1.h(\"i\", __assign({}, omi_1.extractClass(props, 'm-icon')),\n omi_1.h(\"svg\", { viewBox: '0 0 ' + props.view + ' ' + props.view, class: omi_1.classNames({ rotate: props.rotate }), width: props.scale + 'em', height: props.scale + 'em', fill: props.color, \"aria-hidden\": \"true\" }, props.paths ? (props.paths.map(function (item) {\n var attrs = { d: item.path, fill: props.color || 'black' };\n if (item.color)\n attrs.fill = item.color;\n return omi_1.h(\"path\", __assign({}, attrs));\n })) : omi_1.h(\"path\", { d: props.path })),\n props.children && (omi_1.h(\"div\", { style: \"color:\" + (props.color || 'black') + \";\" }, props.children[0]))));\n };\n Icon.css = css;\n Icon.defaultProps = {\n view: 1024,\n scale: 2\n };\n Icon.propTypes = {\n path: String,\n paths: Object,\n view: Number,\n scale: Number,\n color: String,\n rotate: Boolean\n };\n Icon = __decorate([\n omi_1.tag('m-icon')\n ], Icon);\n return Icon;\n}(omi_1.WeElement));\nexports.default = Icon;\n","theme();\ndocument.addEventListener('DOMContentLoaded', function () {\n theme();\n});\nfunction theme() {\n if (document.body && !document.body.style.getPropertyValue('--mdc-theme-primary')) {\n document.body.style.setProperty('--mdc-theme-primary', '#0072d9');\n document.body.style.setProperty('--mdc-theme-secondary', '#2170b8');\n document.body.style.setProperty('--mdc-theme-error', '#f5222d');\n document.body.style.setProperty('--mdc-theme-surface', '#ffffff');\n document.body.style.setProperty('--mdc-theme-on-primary', '#ffffff');\n document.body.style.setProperty('--mdc-theme-on-secondary', '#ffffff');\n document.body.style.setProperty('--mdc-theme-on-error', '#ffffff');\n document.body.style.setProperty('--mdc-theme-on-surface', '#000000');\n document.body.style.setProperty('--mdc-theme-background', '#ffffff');\n document.body.style.setProperty('--mdc-shape-small-component-radius', '4px');\n document.body.style.setProperty('--mdc-shape-medium-component-radius', '4px');\n document.body.style.setProperty('--mdc-shape-large-component-radius', '0px');\n document.body.style.setProperty('--mdc-typography--font-family', 'Roboto, sans-serif');\n }\n}\n","module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;"],"sourceRoot":""} \ No newline at end of file