chore: init avatar and badge
This commit is contained in:
dntzhang
parent
d11fafa5d0
commit
069c5e8d2b
|
|
@ -0,0 +1,52 @@
|
|||
## ActionSheet
|
||||
|
||||
Mobile pop-up options list
|
||||
|
||||
* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ)
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/action-sheet'
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/action-sheet"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-action-sheet></o-action-sheet>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
```tsx
|
||||
{
|
||||
type: string,
|
||||
menus: any[],
|
||||
actions: any[],
|
||||
show: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
type: '',
|
||||
menus: [],
|
||||
actions: [],
|
||||
show: false
|
||||
)
|
||||
```
|
||||
### Events
|
||||
|
||||
* itemClick
|
||||
* close
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Omiu Avatar</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/index.js"></script>
|
||||
<script src="../../../badge/src/index.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.2/person.js"></script>
|
||||
|
||||
|
||||
<div>
|
||||
<m-avatar src="https://material-ui.com/static/images/avatar/1.jpg"></m-avatar>
|
||||
<m-avatar size="50" src="https://material-ui.com/static/images/avatar/1.jpg"></m-avatar>
|
||||
<m-avatar size="60" src="https://material-ui.com/static/images/avatar/1.jpg"></m-avatar>
|
||||
<m-avatar size="70" src="https://material-ui.com/static/images/avatar/1.jpg"></m-avatar>
|
||||
<m-avatar square size="70" src="https://material-ui.com/static/images/avatar/1.jpg"></m-avatar>
|
||||
<br /> <br /> <br /> <br />
|
||||
|
||||
<m-avatar icon="person"></m-avatar>
|
||||
<m-avatar icon="person" background-color="#87d068"></m-avatar>
|
||||
<m-avatar icon="person" background-color="#fde3cf" color="#f56a00"></m-avatar>
|
||||
<br /> <br /> <br /> <br />
|
||||
|
||||
|
||||
<m-avatar>DNT</m-avatar>
|
||||
|
||||
|
||||
<m-avatar background-color="#87d068">OMI</m-avatar>
|
||||
|
||||
|
||||
<m-avatar background-color="#fde3cf" color="#f56a00">User</m-avatar>
|
||||
|
||||
<br /> <br /> <br /> <br />
|
||||
|
||||
|
||||
<m-avatar square>DNT</m-avatar>
|
||||
|
||||
|
||||
<m-avatar square background-color="#87d068">OMI</m-avatar>
|
||||
|
||||
|
||||
<m-avatar square background-color="#fde3cf" color="#f56a00">User</m-avatar>
|
||||
|
||||
|
||||
<br /> <br /> <br /> <br />
|
||||
|
||||
<m-badge content="99">
|
||||
|
||||
<m-avatar>DNT</m-avatar>
|
||||
</m-badge>
|
||||
|
||||
<m-badge dot>
|
||||
|
||||
<m-avatar background-color="#87d068">OMI</m-avatar>
|
||||
</m-badge>
|
||||
|
||||
<m-badge content="new">
|
||||
|
||||
<m-avatar background-color="#fde3cf" color="#f56a00">U</m-avatar>
|
||||
</m-badge>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
{
|
||||
"name": "@omiu/badge",
|
||||
"version": "0.0.1",
|
||||
"description": "A head that symbolizes an image or personality",
|
||||
"docsExtend": {
|
||||
"cnName": "头像",
|
||||
"cnDescription": "象征着想象或者个性的头像",
|
||||
"codepen": "wvKdoNJ",
|
||||
"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 <dntzhang@qq.com>",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## 导入
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
或者直接 script 标签引入。
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## 使用
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}> </${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}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## Import
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## Usage
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}></${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(/<iframe[\s\S]*?<\/iframe>/, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`))
|
||||
// console.log(props)
|
||||
// console.log(defaultProps)
|
||||
// console.log(Object.keys(eventMap))
|
||||
|
|
@ -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,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
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { WeElement } from 'omi';
|
||||
interface Props {
|
||||
alt?: string;
|
||||
src?: string;
|
||||
size?: number;
|
||||
square?: boolean;
|
||||
icon?: string;
|
||||
color?: string;
|
||||
backgroundColor?: string;
|
||||
}
|
||||
export default class Avatar extends WeElement<Props> {
|
||||
static css: any;
|
||||
static defaultProps: {
|
||||
size: number;
|
||||
color: string;
|
||||
backgroundColor: string;
|
||||
};
|
||||
static propTypes: {
|
||||
alt: StringConstructor;
|
||||
src: StringConstructor;
|
||||
size: NumberConstructor;
|
||||
square: BooleanConstructor;
|
||||
icon: StringConstructor;
|
||||
color: StringConstructor;
|
||||
backgroundColor: StringConstructor;
|
||||
};
|
||||
_iconTag: any;
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory(require("omi"));
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define(["omi"], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["OAvatar"] = factory(require("omi"));
|
||||
else
|
||||
root["OAvatar"] = factory(root["Omi"]);
|
||||
})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
/******/ }
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // create a fake namespace object
|
||||
/******/ // mode & 1: value is a module id, require it
|
||||
/******/ // mode & 2: merge all properties of value into the ns
|
||||
/******/ // mode & 4: return value when already ns object
|
||||
/******/ // mode & 8|1: behave like require
|
||||
/******/ __webpack_require__.t = function(value, mode) {
|
||||
/******/ if(mode & 1) value = __webpack_require__(value);
|
||||
/******/ if(mode & 8) return value;
|
||||
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
||||
/******/ var ns = Object.create(null);
|
||||
/******/ __webpack_require__.r(ns);
|
||||
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||||
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
||||
/******/ return ns;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.tsx");
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./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@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\nimg {\n width: 100%;\n height: 100%; }\n\n.m-avatar.square {\n border-radius: 4px; }\n\n.material-icons {\n font-family: 'Material Icons';\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-feature-settings: 'liga';\n -webkit-font-smoothing: antialiased; }\n\n.m-avatar {\n display: inline-block;\n width: 40px;\n height: 40px;\n text-align: center;\n vertical-align: middle;\n background-color: #ccc;\n color: white;\n border-radius: 50%;\n overflow: hidden; }\n\n.m-avatar .material-icons {\n line-height: 40px; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./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) {
|
||||
|
||||
/*
|
||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||
Author Tobias Koppers @sokra
|
||||
*/
|
||||
// css base code, injected by the css-loader
|
||||
module.exports = function(useSourceMap) {
|
||||
var list = [];
|
||||
|
||||
// return the list of modules as css string
|
||||
list.toString = function toString() {
|
||||
return this.map(function (item) {
|
||||
var content = cssWithMappingToString(item, useSourceMap);
|
||||
if(item[2]) {
|
||||
return "@media " + item[2] + "{" + content + "}";
|
||||
} else {
|
||||
return content;
|
||||
}
|
||||
}).join("");
|
||||
};
|
||||
|
||||
// import a list of modules into the list
|
||||
list.i = function(modules, mediaQuery) {
|
||||
if(typeof modules === "string")
|
||||
modules = [[null, modules, ""]];
|
||||
var alreadyImportedModules = {};
|
||||
for(var i = 0; i < this.length; i++) {
|
||||
var id = this[i][0];
|
||||
if(typeof id === "number")
|
||||
alreadyImportedModules[id] = true;
|
||||
}
|
||||
for(i = 0; i < modules.length; i++) {
|
||||
var item = modules[i];
|
||||
// skip already imported module
|
||||
// this implementation is not 100% perfect for weird media query combinations
|
||||
// when a module is imported multiple times with different media queries.
|
||||
// I hope this will never occur (Hey this way we have smaller bundles)
|
||||
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
|
||||
if(mediaQuery && !item[2]) {
|
||||
item[2] = mediaQuery;
|
||||
} else if(mediaQuery) {
|
||||
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
|
||||
}
|
||||
list.push(item);
|
||||
}
|
||||
}
|
||||
};
|
||||
return list;
|
||||
};
|
||||
|
||||
function cssWithMappingToString(item, useSourceMap) {
|
||||
var content = item[1] || '';
|
||||
var cssMapping = item[3];
|
||||
if (!cssMapping) {
|
||||
return content;
|
||||
}
|
||||
|
||||
if (useSourceMap && typeof btoa === 'function') {
|
||||
var sourceMapping = toComment(cssMapping);
|
||||
var sourceURLs = cssMapping.sources.map(function (source) {
|
||||
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
|
||||
});
|
||||
|
||||
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
|
||||
}
|
||||
|
||||
return [content].join('\n');
|
||||
}
|
||||
|
||||
// Adapted from convert-source-map (MIT)
|
||||
function toComment(sourceMap) {
|
||||
// eslint-disable-next-line no-undef
|
||||
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
|
||||
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
|
||||
|
||||
return '/*# ' + data + ' */';
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/index.scss":
|
||||
/*!************************!*\
|
||||
!*** ./src/index.scss ***!
|
||||
\************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
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;
|
||||
} else {
|
||||
module.exports = result.toString();
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/index.tsx":
|
||||
/*!***********************!*\
|
||||
!*** ./src/index.tsx ***!
|
||||
\***********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
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);
|
||||
};
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(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);
|
||||
};
|
||||
var __decorate = (this && this.__decorate) || function (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;
|
||||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var omi_1 = __webpack_require__(/*! omi */ "omi");
|
||||
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
|
||||
var Avatar = /** @class */ (function (_super) {
|
||||
__extends(Avatar, _super);
|
||||
function Avatar() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Avatar.prototype.render = function (props) {
|
||||
this._iconTag = 'o-icon-' + props.icon;
|
||||
return (omi_1.h("div", __assign({}, omi_1.extractClass(props, 'm-avatar', {
|
||||
'square': props.square
|
||||
}), { style: {
|
||||
width: props.size + 'px',
|
||||
height: props.size + 'px',
|
||||
backgroundColor: props.backgroundColor,
|
||||
lineHeight: props.size + 'px'
|
||||
} }), props.icon ? omi_1.h(this._iconTag, { class: "material-icons mdc-icon-button__icon", style: { lineHeight: (props.size + 6) + 'px', color: props.color } }) : (props.src ?
|
||||
omi_1.h("img", { alt: props.alt, src: props.src }) :
|
||||
props.children ? props.children : omi_1.h("slot", null))));
|
||||
};
|
||||
Avatar.css = css;
|
||||
Avatar.defaultProps = {
|
||||
size: 40,
|
||||
color: 'white',
|
||||
backgroundColor: '#ccc'
|
||||
};
|
||||
Avatar.propTypes = {
|
||||
alt: String,
|
||||
src: String,
|
||||
size: Number,
|
||||
square: Boolean,
|
||||
icon: String,
|
||||
color: String,
|
||||
backgroundColor: String
|
||||
};
|
||||
Avatar = __decorate([
|
||||
omi_1.tag('m-avatar')
|
||||
], Avatar);
|
||||
return Avatar;
|
||||
}(omi_1.WeElement));
|
||||
exports.default = Avatar;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "omi":
|
||||
/*!******************************************************************************!*\
|
||||
!*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***!
|
||||
\******************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ })["default"];
|
||||
});
|
||||
//# sourceMappingURL=index.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,52 @@
|
|||
@import "@omiu/common/theme.scss";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.m-avatar.square {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.m-avatar {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: #ccc;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.m-avatar .material-icons {
|
||||
line-height: 40px;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { tag, h, WeElement, extractClass } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
|
||||
|
||||
interface Props {
|
||||
alt?: string,
|
||||
src?: string,
|
||||
size?: number,
|
||||
square?: boolean,
|
||||
icon?: string,
|
||||
color?: string,
|
||||
backgroundColor?: string
|
||||
}
|
||||
|
||||
@tag('m-avatar')
|
||||
export default class Avatar extends WeElement<Props>{
|
||||
static css = css
|
||||
|
||||
static defaultProps = {
|
||||
size: 40,
|
||||
color: 'white',
|
||||
backgroundColor: '#ccc'
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
alt: String,
|
||||
src: String,
|
||||
size: Number,
|
||||
square: Boolean,
|
||||
icon: String,
|
||||
color: String,
|
||||
backgroundColor: String
|
||||
}
|
||||
|
||||
_iconTag
|
||||
|
||||
render(props) {
|
||||
|
||||
this._iconTag = 'o-icon-' + props.icon
|
||||
return (
|
||||
<div {...extractClass(props, 'm-avatar', {
|
||||
'square': props.square
|
||||
})} style={{
|
||||
width: props.size + 'px',
|
||||
height: props.size + 'px',
|
||||
backgroundColor: props.backgroundColor,
|
||||
lineHeight: props.size + 'px'
|
||||
}}>
|
||||
{props.icon ? <this._iconTag class="material-icons mdc-icon-button__icon" style={{ lineHeight: (props.size + 6) + 'px', color: props.color }} /> : (props.src ?
|
||||
<img alt={props.alt} src={props.src} /> :
|
||||
props.children ? props.children : <slot />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
"target": "es5",
|
||||
"allowJs": true,
|
||||
"declaration": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
## ActionSheet
|
||||
|
||||
Mobile pop-up options list
|
||||
|
||||
* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ)
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/action-sheet'
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/action-sheet"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-action-sheet></o-action-sheet>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
```tsx
|
||||
{
|
||||
type: string,
|
||||
menus: any[],
|
||||
actions: any[],
|
||||
show: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
type: '',
|
||||
menus: [],
|
||||
actions: [],
|
||||
show: false
|
||||
)
|
||||
```
|
||||
### Events
|
||||
|
||||
* itemClick
|
||||
* close
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Omiu Avatar</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/index.js"></script>
|
||||
<script src="../../../badge/src/index.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.2/person.js"></script>
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<m-badge dot x="-10" y="10">
|
||||
<m-icon-button icon='wifi'></m-icon-button>
|
||||
</m-badge>
|
||||
|
||||
<m-badge content="99" x="-10" y="10">
|
||||
<m-icon-button icon='favorite'></m-icon-button>
|
||||
</m-badge>
|
||||
<br /><br /><br />
|
||||
|
||||
<m-badge content="8">
|
||||
<m-icon
|
||||
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
|
||||
color="#07C160" />
|
||||
</m-badge>
|
||||
|
||||
<br /><br /><br />
|
||||
<m-badge content="99">
|
||||
<m-icon
|
||||
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
|
||||
color="red" />
|
||||
</m-badge>
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
<m-badge content="new">
|
||||
<m-icon
|
||||
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
|
||||
color="black" />
|
||||
</m-badge>
|
||||
|
||||
|
||||
<br /><br /><br />
|
||||
<m-badge dot>
|
||||
<m-icon
|
||||
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
|
||||
color="black" />
|
||||
</m-badge>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
{
|
||||
"name": "@omiu/avatar",
|
||||
"version": "0.0.1",
|
||||
"description": "A head that symbolizes an image or personality",
|
||||
"docsExtend": {
|
||||
"cnName": "头像",
|
||||
"cnDescription": "象征着想象或者个性的头像",
|
||||
"codepen": "wvKdoNJ",
|
||||
"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 <dntzhang@qq.com>",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## 导入
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
或者直接 script 标签引入。
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## 使用
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}> </${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}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## Import
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## Usage
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}></${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(/<iframe[\s\S]*?<\/iframe>/, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`))
|
||||
// console.log(props)
|
||||
// console.log(defaultProps)
|
||||
// console.log(Object.keys(eventMap))
|
||||
|
|
@ -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,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
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { WeElement } from 'omi';
|
||||
import '../icon';
|
||||
import '../theme.ts';
|
||||
interface Props {
|
||||
dot?: boolean;
|
||||
content?: string;
|
||||
x?: number;
|
||||
y?: number;
|
||||
}
|
||||
export default class Badge extends WeElement<Props> {
|
||||
static css: any;
|
||||
static defaultProps: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
static propTypes: {
|
||||
dot: BooleanConstructor;
|
||||
content: StringConstructor;
|
||||
x: NumberConstructor;
|
||||
y: NumberConstructor;
|
||||
};
|
||||
installed(): void;
|
||||
uninstall(): void;
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
|
|
@ -0,0 +1,701 @@
|
|||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory(require("omi"));
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define(["omi"], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["MBadge"] = factory(require("omi"));
|
||||
else
|
||||
root["MBadge"] = factory(root["Omi"]);
|
||||
})(window, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
/******/ }
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // create a fake namespace object
|
||||
/******/ // mode & 1: value is a module id, require it
|
||||
/******/ // mode & 2: merge all properties of value into the ns
|
||||
/******/ // mode & 4: return value when already ns object
|
||||
/******/ // mode & 8|1: behave like require
|
||||
/******/ __webpack_require__.t = function(value, mode) {
|
||||
/******/ if(mode & 1) value = __webpack_require__(value);
|
||||
/******/ if(mode & 8) return value;
|
||||
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
||||
/******/ var ns = Object.create(null);
|
||||
/******/ __webpack_require__.r(ns);
|
||||
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||||
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
||||
/******/ return ns;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = "./src/badge/index.tsx");
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/badge/index.scss":
|
||||
/*!*******************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./src/badge/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);
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ".m-badge {\n position: relative;\n display: inline-block; }\n\n.badge {\n background-color: #F95050;\n color: #FFFFFF;\n line-height: 1.2;\n top: 0;\n right: 0;\n height: 20px;\n display: flex;\n padding: 0 4px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n transform: scale(1) translate(50%, -50%);\n box-sizing: border-box;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n align-items: center;\n font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;\n font-weight: 500;\n align-content: center;\n border-radius: 10px;\n flex-direction: row;\n justify-content: center;\n transform-origin: 100% 0%; }\n\n.circle {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n min-width: 8px;\n padding: 0; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/css-loader/lib/css-base.js":
|
||||
/*!*************************************************!*\
|
||||
!*** ./node_modules/css-loader/lib/css-base.js ***!
|
||||
\*************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/*
|
||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||
Author Tobias Koppers @sokra
|
||||
*/
|
||||
// css base code, injected by the css-loader
|
||||
module.exports = function(useSourceMap) {
|
||||
var list = [];
|
||||
|
||||
// return the list of modules as css string
|
||||
list.toString = function toString() {
|
||||
return this.map(function (item) {
|
||||
var content = cssWithMappingToString(item, useSourceMap);
|
||||
if(item[2]) {
|
||||
return "@media " + item[2] + "{" + content + "}";
|
||||
} else {
|
||||
return content;
|
||||
}
|
||||
}).join("");
|
||||
};
|
||||
|
||||
// import a list of modules into the list
|
||||
list.i = function(modules, mediaQuery) {
|
||||
if(typeof modules === "string")
|
||||
modules = [[null, modules, ""]];
|
||||
var alreadyImportedModules = {};
|
||||
for(var i = 0; i < this.length; i++) {
|
||||
var id = this[i][0];
|
||||
if(typeof id === "number")
|
||||
alreadyImportedModules[id] = true;
|
||||
}
|
||||
for(i = 0; i < modules.length; i++) {
|
||||
var item = modules[i];
|
||||
// skip already imported module
|
||||
// this implementation is not 100% perfect for weird media query combinations
|
||||
// when a module is imported multiple times with different media queries.
|
||||
// I hope this will never occur (Hey this way we have smaller bundles)
|
||||
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
|
||||
if(mediaQuery && !item[2]) {
|
||||
item[2] = mediaQuery;
|
||||
} else if(mediaQuery) {
|
||||
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
|
||||
}
|
||||
list.push(item);
|
||||
}
|
||||
}
|
||||
};
|
||||
return list;
|
||||
};
|
||||
|
||||
function cssWithMappingToString(item, useSourceMap) {
|
||||
var content = item[1] || '';
|
||||
var cssMapping = item[3];
|
||||
if (!cssMapping) {
|
||||
return content;
|
||||
}
|
||||
|
||||
if (useSourceMap && typeof btoa === 'function') {
|
||||
var sourceMapping = toComment(cssMapping);
|
||||
var sourceURLs = cssMapping.sources.map(function (source) {
|
||||
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
|
||||
});
|
||||
|
||||
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
|
||||
}
|
||||
|
||||
return [content].join('\n');
|
||||
}
|
||||
|
||||
// Adapted from convert-source-map (MIT)
|
||||
function toComment(sourceMap) {
|
||||
// eslint-disable-next-line no-undef
|
||||
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
|
||||
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
|
||||
|
||||
return '/*# ' + data + ' */';
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/badge/index.scss":
|
||||
/*!******************************!*\
|
||||
!*** ./src/badge/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/badge/index.scss");
|
||||
|
||||
if (typeof result === "string") {
|
||||
module.exports = result;
|
||||
} else {
|
||||
module.exports = result.toString();
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/badge/index.tsx":
|
||||
/*!*****************************!*\
|
||||
!*** ./src/badge/index.tsx ***!
|
||||
\*****************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
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);
|
||||
};
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(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);
|
||||
};
|
||||
var __decorate = (this && this.__decorate) || function (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;
|
||||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var omi_1 = __webpack_require__(/*! omi */ "omi");
|
||||
var css = __webpack_require__(/*! ./index.scss */ "./src/badge/index.scss");
|
||||
__webpack_require__(/*! ../icon */ "./src/icon/index.js");
|
||||
//@ts-ignore
|
||||
__webpack_require__(/*! ../theme.ts */ "./src/theme.ts");
|
||||
var Badge = /** @class */ (function (_super) {
|
||||
__extends(Badge, _super);
|
||||
function Badge() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Badge.prototype.installed = function () {
|
||||
};
|
||||
Badge.prototype.uninstall = function () {
|
||||
};
|
||||
Badge.prototype.render = function (props) {
|
||||
if (props.content) {
|
||||
return omi_1.h("div", __assign({}, omi_1.extractClass(props, 'm-badge')),
|
||||
props.children ? props.children[0] : omi_1.h("slot", null),
|
||||
omi_1.h("span", { class: "badge", style: "right:" + props.x * -1 + "px;top:" + props.y + "px;" }, props.content));
|
||||
}
|
||||
if (props.dot) {
|
||||
return (omi_1.h("div", { class: "m-badge" },
|
||||
props.children ? props.children[0] : omi_1.h("slot", null),
|
||||
omi_1.h("span", { style: "right:" + props.x * -1 + "px;top:" + props.y + "px;", class: "circle badge" })));
|
||||
}
|
||||
return omi_1.h("div", { class: "m-badge" }, props.children ? props.children[0] : omi_1.h("slot", null));
|
||||
};
|
||||
Badge.css = css;
|
||||
Badge.defaultProps = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
Badge.propTypes = {
|
||||
dot: Boolean,
|
||||
content: String,
|
||||
x: Number,
|
||||
y: Number
|
||||
};
|
||||
Badge = __decorate([
|
||||
omi_1.tag('m-badge')
|
||||
], Badge);
|
||||
return Badge;
|
||||
}(omi_1.WeElement));
|
||||
exports.default = Badge;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/icon/index.js":
|
||||
/*!***************************!*\
|
||||
!*** ./src/icon/index.js ***!
|
||||
\***************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if (true)
|
||||
module.exports = factory(__webpack_require__(/*! omi */ "omi"));
|
||||
else {}
|
||||
})(window, function (__WEBPACK_EXTERNAL_MODULE_omi__) {
|
||||
return /******/ (function (modules) {
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if (installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/
|
||||
};
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/
|
||||
}
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function (exports, name, getter) {
|
||||
/******/ if (!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
||||
/******/ }
|
||||
/******/
|
||||
};
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function (exports) {
|
||||
/******/ if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
/******/ }
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/
|
||||
};
|
||||
/******/
|
||||
/******/ // create a fake namespace object
|
||||
/******/ // mode & 1: value is a module id, require it
|
||||
/******/ // mode & 2: merge all properties of value into the ns
|
||||
/******/ // mode & 4: return value when already ns object
|
||||
/******/ // mode & 8|1: behave like require
|
||||
/******/ __webpack_require__.t = function (value, mode) {
|
||||
/******/ if (mode & 1)
|
||||
value = __webpack_require__(value);
|
||||
/******/ if (mode & 8)
|
||||
return value;
|
||||
/******/ if ((mode & 4) && typeof value === 'object' && value && value.__esModule)
|
||||
return value;
|
||||
/******/ var ns = Object.create(null);
|
||||
/******/ __webpack_require__.r(ns);
|
||||
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||||
/******/ if (mode & 2 && typeof value != 'string')
|
||||
for (var key in value)
|
||||
__webpack_require__.d(ns, key, function (key) { return value[key]; }.bind(null, key));
|
||||
/******/ return ns;
|
||||
/******/
|
||||
};
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function (module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/
|
||||
};
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = "./src/icon/index.tsx");
|
||||
/******/
|
||||
})({
|
||||
/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.0@resolve-url-loader/index.js!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js?!./src/icon/index.scss":
|
||||
/*!***********************************************************************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.0@resolve-url-loader!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--4-3!./src/icon/index.scss ***!
|
||||
\***********************************************************************************************************************************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function (module, exports, __webpack_require__) {
|
||||
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
|
||||
/***/
|
||||
}),
|
||||
/***/ "./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) {
|
||||
/*
|
||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||
Author Tobias Koppers @sokra
|
||||
*/
|
||||
// css base code, injected by the css-loader
|
||||
module.exports = function (useSourceMap) {
|
||||
var list = [];
|
||||
// return the list of modules as css string
|
||||
list.toString = function toString() {
|
||||
return this.map(function (item) {
|
||||
var content = cssWithMappingToString(item, useSourceMap);
|
||||
if (item[2]) {
|
||||
return "@media " + item[2] + "{" + content + "}";
|
||||
}
|
||||
else {
|
||||
return content;
|
||||
}
|
||||
}).join("");
|
||||
};
|
||||
// import a list of modules into the list
|
||||
list.i = function (modules, mediaQuery) {
|
||||
if (typeof modules === "string")
|
||||
modules = [[null, modules, ""]];
|
||||
var alreadyImportedModules = {};
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
var id = this[i][0];
|
||||
if (typeof id === "number")
|
||||
alreadyImportedModules[id] = true;
|
||||
}
|
||||
for (i = 0; i < modules.length; i++) {
|
||||
var item = modules[i];
|
||||
// skip already imported module
|
||||
// this implementation is not 100% perfect for weird media query combinations
|
||||
// when a module is imported multiple times with different media queries.
|
||||
// I hope this will never occur (Hey this way we have smaller bundles)
|
||||
if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
|
||||
if (mediaQuery && !item[2]) {
|
||||
item[2] = mediaQuery;
|
||||
}
|
||||
else if (mediaQuery) {
|
||||
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
|
||||
}
|
||||
list.push(item);
|
||||
}
|
||||
}
|
||||
};
|
||||
return list;
|
||||
};
|
||||
function cssWithMappingToString(item, useSourceMap) {
|
||||
var content = item[1] || '';
|
||||
var cssMapping = item[3];
|
||||
if (!cssMapping) {
|
||||
return content;
|
||||
}
|
||||
if (useSourceMap && typeof btoa === 'function') {
|
||||
var sourceMapping = toComment(cssMapping);
|
||||
var sourceURLs = cssMapping.sources.map(function (source) {
|
||||
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */';
|
||||
});
|
||||
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
|
||||
}
|
||||
return [content].join('\n');
|
||||
}
|
||||
// Adapted from convert-source-map (MIT)
|
||||
function toComment(sourceMap) {
|
||||
// eslint-disable-next-line no-undef
|
||||
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
|
||||
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
|
||||
return '/*# ' + data + ' */';
|
||||
}
|
||||
/***/
|
||||
}),
|
||||
/***/ "./src/icon/index.scss":
|
||||
/*!*****************************!*\
|
||||
!*** ./src/icon/index.scss ***!
|
||||
\*****************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function (module, exports, __webpack_require__) {
|
||||
var result = __webpack_require__(/*! !../../node_modules/_css-loader@1.0.1@css-loader!../../node_modules/_resolve-url-loader@3.1.0@resolve-url-loader!../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.0@resolve-url-loader/index.js!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js?!./src/icon/index.scss");
|
||||
if (typeof result === "string") {
|
||||
module.exports = result;
|
||||
}
|
||||
else {
|
||||
module.exports = result.toString();
|
||||
}
|
||||
/***/
|
||||
}),
|
||||
/***/ "./src/icon/index.tsx":
|
||||
/*!****************************!*\
|
||||
!*** ./src/icon/index.tsx ***!
|
||||
\****************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function (module, exports, __webpack_require__) {
|
||||
"use strict";
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
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);
|
||||
};
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function (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);
|
||||
};
|
||||
var __decorate = (this && this.__decorate) || function (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;
|
||||
};
|
||||
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 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')), 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)
|
||||
attrs.fill = item.color;
|
||||
return omi_1.h("path", __assign({}, attrs));
|
||||
})) : omi_1.h("path", { d: props.path })), props.children && (omi_1.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([
|
||||
omi_1.tag('m-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":
|
||||
/*!******************************************************************************!*\
|
||||
!*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***!
|
||||
\******************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function (module, exports) {
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;
|
||||
/***/
|
||||
})
|
||||
/******/
|
||||
})["default"];
|
||||
});
|
||||
//# sourceMappingURL=index.js.map
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./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":
|
||||
/*!******************************************************************************!*\
|
||||
!*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***!
|
||||
\******************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ })["default"];
|
||||
});
|
||||
//# sourceMappingURL=index.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,48 @@
|
|||
@import "../theme.scss";
|
||||
|
||||
|
||||
|
||||
.m-badge {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
||||
background-color: #F95050;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.2;
|
||||
|
||||
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
padding: 0 4px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.75rem;
|
||||
min-width: 20px;
|
||||
transform: scale(1) translate(50%, -50%);
|
||||
box-sizing: border-box;
|
||||
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
align-items: center;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
align-content: center;
|
||||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
transform-origin: 100% 0%;
|
||||
}
|
||||
|
||||
.circle {
|
||||
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
min-width: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import { tag, h, WeElement, extractClass } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
import '../icon'
|
||||
//@ts-ignore
|
||||
import '../theme.ts'
|
||||
|
||||
interface Props {
|
||||
dot?: boolean,
|
||||
content?: string,
|
||||
x?: number,
|
||||
y?: number
|
||||
}
|
||||
|
||||
|
||||
@tag('m-badge')
|
||||
export default class Badge extends WeElement<Props>{
|
||||
static css = css
|
||||
|
||||
static defaultProps = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
dot: Boolean,
|
||||
content: String,
|
||||
x: Number,
|
||||
y: Number
|
||||
}
|
||||
|
||||
|
||||
installed() {
|
||||
|
||||
}
|
||||
|
||||
uninstall() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
render(props) {
|
||||
if (props.content) {
|
||||
return <div {...extractClass(props, 'm-badge')}>
|
||||
{props.children ? props.children[0] : <slot></slot>}
|
||||
<span class="badge" style={`right:${props.x * -1}px;top:${props.y}px;`}>{props.content}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
if (props.dot) {
|
||||
return (
|
||||
<div class="m-badge">
|
||||
{props.children ? props.children[0] : <slot></slot>}
|
||||
<span style={`right:${props.x * -1}px;top:${props.y}px;`} class="circle badge"></span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <div class="m-badge">{props.children ? props.children[0] : <slot></slot>}</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
"target": "es5",
|
||||
"allowJs": true,
|
||||
"declaration": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue