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

feat(omiu): init tip component

This commit is contained in:
dntzhang 2021-06-26 18:03:55 +08:00
parent 885e5e8950
commit e6fbbdd26a
31 changed files with 7499 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/table/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/table",
"version": "0.0.4",
"version": "0.0.5",
"description": "Components that show list data structures.",
"docsExtend": {
"cnName": "表格控件",

2
components/table/src/demo.tsx
View File

@ -1,4 +1,6 @@
import { tag, WeElement, h, render } from 'omi'
options.ignoreAttrs = true
import './index.tsx'
@tag('table-demo')

5
components/table/src/index.esm.js
View File

@ -1,12 +1,12 @@
/**
* @omiu/table v0.0.4 http://omijs.org
* @omiu/table v0.0.5 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, tag, WeElement, options, classNames } from 'omi';
import { h, extractClass, tag, WeElement, classNames } from 'omi';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
@ -393,7 +393,6 @@ o-checkbox {
`
options.ignoreAttrs = true;
var Table = /** @class */ (function (_super) {
__extends$1(Table, _super);
function Table() {

2
components/table/src/index.esm.js.map
View File

File diff suppressed because one or more lines are too long

3
components/table/src/index.js
View File

@ -1,5 +1,5 @@
/**
* @omiu/table v0.0.4 http://omijs.org
* @omiu/table v0.0.5 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
@ -307,7 +307,6 @@
var css = ":host {\n display: block; }\n\n.o-table {\n background: white;\n margin: auto;\n padding: 5px;\n width: 100%;\n animation: float 5s infinite;\n border-spacing: 0;\n border-collapse: collapse;\n color: #606266;\n font-weight: 400; }\n\n.o-table-checkbox th:first-child,\n.o-table-checkbox td:first-child {\n padding: 2px 10px 2px; }\n\nth {\n border-bottom: 1px solid #E0E0E0;\n text-align: left;\n vertical-align: middle;\n padding: 10px 10px 10px;\n color: rgba(0, 0, 0, 0.54);\n font-size: 0.75rem;\n line-height: 1.3125rem;\n font-weight: 500;\n background: #fafafa; }\n\n.o-table-border td,\n.o-table-border th {\n border-right: 1px solid #ebeef5; }\n\n.o-table-border td:first-child,\n.o-table-border th:first-child {\n border-left: 1px solid #ebeef5; }\n\n.o-table-border th {\n border-top: 1px solid #ebeef5; }\n\ntr {\n border-bottom: 1px solid #E0E0E0; }\n\ntr:hover td {\n background: #f5f5f5; }\n\ntd {\n text-align: left;\n vertical-align: middle;\n font-size: 0.875rem;\n padding: 10px 10px 10px; }\n\ntd.compact,\nth.compact {\n padding: 4px 10px 4px; }\n\na {\n text-decoration: none; }\n\n.o-table-align-left {\n text-align: left; }\n\n.o-table-align-center {\n text-align: center; }\n\n.o-table-align-right {\n text-align: right; }\n\na,\na:link,\na:visited,\na:active {\n text-decoration: none;\n color: inherit; }\n\na:hover {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\no-checkbox {\n margin-right: 5px; }\n\n.o-table-stripe tr:nth-of-type(odd) {\n background: white; }\n\n.o-table-stripe tr:nth-of-type(even) {\n background: #fafafa; }\n";
omi.options.ignoreAttrs = true;
var Table = /** @class */ (function (_super) {
__extends$1(Table, _super);
function Table() {

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

File diff suppressed because one or more lines are too long

1
components/table/src/index.tsx
View File

@ -1,7 +1,6 @@
import { tag, WeElement, h, extractClass, classNames, options } from 'omi'
import '@omiu/checkbox'
options.ignoreAttrs = true
import * as css from './index.scss'

43
components/tip/README.md Normal file
View File

@ -0,0 +1,43 @@
## Table
Components that show tree nested data structures.
* [→ CodePen](https://codepen.io/omijs/pen/yLYMrdg)
## Import
```js
import '@omiu/table'
```
Or use script tag to ref it.
```html
<script src="https://unpkg.com/@omiu/table"></script>
```
## Usage
```html
<o-table></o-table>
```
## API
### Props
```tsx
{
dataSource: any[],
columns: object,
checkbox: boolean,
border: boolean
}
```
### Events
* changeall
* change

23
components/tip/demos/demo.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Add Omi in One Minute</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body style="background-color: #fefefe;">
<script src="../src/demo.js"></script>
<script src="https://unpkg.com/@omiu/icon@0.0.2/delete.js"></script>
<div>
</div>
</body>
</html>

84
components/tip/demos/index.html Normal file
View File

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Add Omi in One Minute</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body style="background-color: #fefefe;">
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script src="../src/index.js"></script>
<div>
<o-table id="myTable"></o-table>
</div>
<script>
const table = document.querySelector('#myTable')
table.props.checkbox = true
table.props.border = true
table.props.dataSource = [{
id: 1,
name: 'xwang',
age: 18,
address: 'Tencent'
}, {
id: 2,
name: 'dntzhang',
age: 12,
address: 'Tencent'
}, {
id: 3,
name: 'lucy',
age: 12,
address: 'Tencent'
}, {
id: 4,
name: 'john',
age: 12,
address: 'Tencent'
}, {
id: 5,
name: 'tim',
age: 12,
address: 'Tencent'
}]
table.props.columns = [{
title: 'ID',
render: item => (
Omi.h('strong', null, Omi.h(
'i', null, item.id
))
),
}, {
title: 'Name',
key: 'name',
}, {
title: 'Age',
key: 'age',
}, {
title: 'Address',
key: 'address',
}, {
title: '操作',
render: item => (
Omi.html`<span>
<a href="javascript:;" onClick=${e => {
table.props.dataSource.splice(table.props.dataSource.indexOf(item), 1)
table.update()
}}>Delete</a>
</span>`
)
}]
table.update()
</script>
</body>
</html>

106
components/tip/package.json Normal file
View File

@ -0,0 +1,106 @@
{
"name": "@omiu/tip",
"version": "0.0.1",
"description": "Components that show tooptip or popover.",
"docsExtend": {
"cnName": "提示",
"cnDescription": "提示",
"codepen": "yLYMrdg",
"codepenHeight": 391,
"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",
"demo": "node ./scripts/webpack.demo.js -- demo",
"build": "rollup -c scripts/rollup.config.iife.js && 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/checkbox": "latest",
"@omiu/common": "latest",
"@popperjs/core": "^2.9.2",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"omi": "latest"
}
}

153
components/tip/scripts/docs-gen.js Normal file
View File

@ -0,0 +1,153 @@
//自动扫描 index.tsx 生成 readme
const fs = require('fs')
const content = fs.readFileSync('./src/index.tsx', 'utf-8')
const props = extract('interface Props {', content).replace('interface Props ', '')
const defaultProps = extract('static defaultProps = {', content).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 ? '### 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))
function extract(startWith, str) {
const start = str.indexOf(startWith)
if (start === -1) return ''
let end = start + startWith.length
let stackCount = 1
while (end < str.length) {
if (str[end] === '}') {
if (stackCount === 1) {
break
} else {
stackCount--
}
} else if (str[end] === '{') {
stackCount++
}
end++
}
return str.substring(start, end + 1)
}

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

@ -0,0 +1,38 @@
import nodeResolve from "rollup-plugin-node-resolve";
import typescript from 'rollup-plugin-typescript';
import scss from 'rollup-plugin-scss'
import commonjs from '@rollup/plugin-commonjs';
const fs = require('fs')
const license = require("rollup-plugin-license");
const pkg = require("../package.json");
const licensePlugin = license({
banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.`
});
export default {
input: "src/index.tsx",
output: {
format: "iife",
file: "./src/index.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']
};

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

@ -0,0 +1,38 @@
import nodeResolve from "rollup-plugin-node-resolve";
import typescript from 'rollup-plugin-typescript';
import scss from 'rollup-plugin-scss'
import commonjs from '@rollup/plugin-commonjs';
const fs = require('fs')
const license = require("rollup-plugin-license");
const pkg = require("../package.json");
const licensePlugin = license({
banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.`
});
export default {
input: "src/index.tsx",
output: {
format: "es",
file: "./src/index.esm.js",
name: pkg.name,
sourcemap: true,
strict: true
},
plugins: [
nodeResolve({
main: true
}),
scss({
//output: false,
output: function (styles, styleNodes) {
fs.writeFileSync('./src/index.css', styles)
},
}),
typescript(),
commonjs(),
licensePlugin
],
external: ['omi']
};

24
components/tip/scripts/rollup.end.js Normal file
View File

@ -0,0 +1,24 @@
const fs = require('fs')
const css = fs.readFileSync('./src/index.css')
const babel = require("babel-core");
let 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}\`
`)
)
js = fs.readFileSync('./src/index.js', 'utf-8')
fs.writeFileSync('./src/index.js', js.replace(`var css = /*#__PURE__*/Object.freeze({
__proto__: null
});`, babel.transform(`var css = \`${css.toString()}\``, {
presets: ['es2015']
}).code))

102
components/tip/scripts/webpack.build.js Normal file
View File

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

90
components/tip/scripts/webpack.demo.js Normal file
View File

@ -0,0 +1,90 @@
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 config = {
devtool: 'source-map',
plugins: [
new ProgressBarPlugin()
],
entry: {
'demo': './src/demo.tsx'
},
output: {
path: path.resolve(__dirname, '../src/'),
filename: 'demo.js',
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',
}
webpack(config, (err, stats) => { // Stats Object
if (err || stats.hasErrors()) {
// Handle errors here
}
// Done processing
})

5
components/tip/src/demo.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
import { WeElement } from 'omi';
import './index.tsx';
export default class Table extends WeElement {
render(props: any): JSX.Element;
}

5688
components/tip/src/demo.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
components/tip/src/demo.js.map Normal file
View File

File diff suppressed because one or more lines are too long

16
components/tip/src/demo.tsx Normal file
View File

@ -0,0 +1,16 @@
import { tag, WeElement, h, render } from 'omi'
import './index.tsx'
@tag('table-demo')
export default class Table extends WeElement {
render(props) {
return < o-tip>
<div> 提示！！</div>
</o-tip>
}
}
render(<table-demo></table-demo>, 'body')

87
components/tip/src/index.css Normal file
View File

@ -0,0 +1,87 @@
:host {
display: block; }
.o-table {
background: white;
margin: auto;
padding: 5px;
width: 100%;
animation: float 5s infinite;
border-spacing: 0;
border-collapse: collapse;
color: #606266;
font-weight: 400; }
.o-table-checkbox th:first-child,
.o-table-checkbox td:first-child {
padding: 2px 10px 2px; }
th {
border-bottom: 1px solid #E0E0E0;
text-align: left;
vertical-align: middle;
padding: 10px 10px 10px;
color: rgba(0, 0, 0, 0.54);
font-size: 0.75rem;
line-height: 1.3125rem;
font-weight: 500;
background: #fafafa; }
.o-table-border td,
.o-table-border th {
border-right: 1px solid #ebeef5; }
.o-table-border td:first-child,
.o-table-border th:first-child {
border-left: 1px solid #ebeef5; }
.o-table-border th {
border-top: 1px solid #ebeef5; }
tr {
border-bottom: 1px solid #E0E0E0; }
tr:hover td {
background: #f5f5f5; }
td {
text-align: left;
vertical-align: middle;
font-size: 0.875rem;
padding: 10px 10px 10px; }
td.compact,
th.compact {
padding: 4px 10px 4px; }
a {
text-decoration: none; }
.o-table-align-left {
text-align: left; }
.o-table-align-center {
text-align: center; }
.o-table-align-right {
text-align: right; }
a,
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit; }
a:hover {
color: #07c160;
color: var(--o-primary, #07c160); }
o-checkbox {
margin-right: 5px; }
.o-table-stripe tr:nth-of-type(odd) {
background: white; }
.o-table-stripe tr:nth-of-type(even) {
background: #fafafa; }

11
components/tip/src/index.d.ts vendored Normal file
View File

@ -0,0 +1,11 @@
import { WeElement } from 'omi';
interface Props {
}
export default class Table extends WeElement<Props> {
static css: any;
static defaultProps: {};
static propTypes: {};
installed(): void;
render(): JSX.Element;
}
export {};

503
components/tip/src/index.esm.js Normal file
View File

@ -0,0 +1,503 @@
/**
* @omiu/table v0.0.4 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, tag, WeElement, options, classNames } from 'omi';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics$1 = function(d, b) {
extendStatics$1 = 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$1(d, b);
};
function __extends$1(d, b) {
extendStatics$1(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign$1 = function() {
__assign$1 = 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$1.apply(this, arguments);
};
function __decorate$1(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;
}
/**
* @omiu/checkbox v0.0.7 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
* MIT Licensed.
*/
/*! *****************************************************************************
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$1 = `:host {
display: inline-block; }
* {
box-sizing: border-box; }
.o-checkbox {
position: relative;
font-size: 14px;
color: rgba(0, 0, 0, 0.87);
white-space: nowrap; }
.o-checkbox:hover {
cursor: pointer; }
.o-checkbox__native-control:enabled:checked ~ .o-checkbox__background,
.o-checkbox__native-control:enabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-primary, #07c160);
background-color: #07c160;
background-color: var(--o-primary, #07c160);
opacity: 1; }
.o-checkbox__indeterminate .o-checkbox__checkmark {
opacity: 0; }
.o-checkbox__checkmark {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
color: #ffffff; }
.o-checkbox__checkmark-path {
transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
stroke: currentColor;
stroke-width: 3.12px;
stroke-dashoffset: 29.78334;
stroke-dasharray: 29.78334; }
.o-checkbox__native-control:checked ~ .o-checkbox__background .o-checkbox__checkmark-path,
.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__checkmark-path {
stroke-dashoffset: 0; }
.o-checkbox__background {
position: relative;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 45%;
height: 45%;
border: 2px solid currentColor;
border-radius: 2px;
background-color: transparent;
pointer-events: none;
will-change: background-color, border-color;
transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }
.o-checkbox__background,
.o-checkbox__label {
display: inline-block;
height: 18px;
vertical-align: middle; }
.o-checkbox__background {
width: 18px; }
.o-checkbox__label {
margin-left: 10px; }
.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__mixedmark {
transform: scaleX(1) rotate(0deg);
opacity: 1; }
.o-checkbox__mixedmark {
width: 100%;
height: 0;
transform: scaleX(0) rotate(0deg);
border: 1px solid white;
top: 50%;
position: relative;
margin-top: -1px;
opacity: 0;
transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }
.o-checkbox__native-control {
appearance: none;
-webkit-appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: inherit; }
.o-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.54);
color: white; }
.o-checkbox__native-control:disabled:checked ~ .o-checkbox__background,
.o-checkbox__native-control:disabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-primary, #07c160);
background-color: #07c160;
background-color: var(--o-primary, #07c160);
opacity: 0.5; }
.o-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.34);
color: white; }
.o-checkbox__disabled .o-checkbox__label {
color: #888; }
.o-checkbox__disabled:hover {
cursor: not-allowed; }
`;
/** @class */ ((function (_super) {
__extends(Table, _super);
function Table() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.changeHandler = function (e) {
if (_this.props.disabled) {
return;
}
_this.fire('change', e.currentTarget.checked);
if (_this.props.indeterminate) {
_this.props.checked = true;
_this.props.indeterminate = false;
if (_this.prevProps) {
_this.prevProps.checked = true;
_this.prevProps.indeterminate = false;
}
_this.update(true);
}
};
return _this;
}
Table.prototype.render = function (props) {
return (h("div", __assign({}, extractClass(props, 'o-checkbox', {
'o-checkbox__disabled': props.disabled,
'o-checkbox__indeterminate': props.indeterminate
})),
h("input", __assign({ type: "checkbox", disabled: props.disabled, onChange: this.changeHandler }, extract(props, ['checked', 'value', 'indeterminate']), { class: "o-checkbox__native-control", id: "checkbox" })),
h("div", { class: "o-checkbox__background" },
h("svg", { class: "o-checkbox__checkmark", viewBox: "0 0 24 24" },
h("path", { class: "o-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
h("div", { class: "o-checkbox__mixedmark" })),
props.label && h("label", { class: "o-checkbox__label", for: "checkbox" }, props.label)));
};
Table.css = css$1;
Table.propTypes = {
label: String,
disabled: Boolean,
indeterminate: Boolean,
checked: Boolean,
value: String
};
Table = __decorate([
tag('o-checkbox')
], Table);
return Table;
})(WeElement));
function extract(props, prop) {
var _a;
if (typeof prop === 'string') {
if (props.hasOwnProperty(prop)) {
return _a = {}, _a[prop] = props[prop], _a;
}
}
else {
var res_1 = {};
prop.forEach(function (key) {
if (props.hasOwnProperty(key)) {
res_1[key] = props[key];
}
});
return res_1;
}
}
var css = `:host {
display: block; }
.o-table {
background: white;
margin: auto;
padding: 5px;
width: 100%;
animation: float 5s infinite;
border-spacing: 0;
border-collapse: collapse;
color: #606266;
font-weight: 400; }
.o-table-checkbox th:first-child,
.o-table-checkbox td:first-child {
padding: 2px 10px 2px; }
th {
border-bottom: 1px solid #E0E0E0;
text-align: left;
vertical-align: middle;
padding: 10px 10px 10px;
color: rgba(0, 0, 0, 0.54);
font-size: 0.75rem;
line-height: 1.3125rem;
font-weight: 500;
background: #fafafa; }
.o-table-border td,
.o-table-border th {
border-right: 1px solid #ebeef5; }
.o-table-border td:first-child,
.o-table-border th:first-child {
border-left: 1px solid #ebeef5; }
.o-table-border th {
border-top: 1px solid #ebeef5; }
tr {
border-bottom: 1px solid #E0E0E0; }
tr:hover td {
background: #f5f5f5; }
td {
text-align: left;
vertical-align: middle;
font-size: 0.875rem;
padding: 10px 10px 10px; }
td.compact,
th.compact {
padding: 4px 10px 4px; }
a {
text-decoration: none; }
.o-table-align-left {
text-align: left; }
.o-table-align-center {
text-align: center; }
.o-table-align-right {
text-align: right; }
a,
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit; }
a:hover {
color: #07c160;
color: var(--o-primary, #07c160); }
o-checkbox {
margin-right: 5px; }
.o-table-stripe tr:nth-of-type(odd) {
background: white; }
.o-table-stripe tr:nth-of-type(even) {
background: #fafafa; }
`
options.ignoreAttrs = true;
var Table = /** @class */ (function (_super) {
__extends$1(Table, _super);
function Table() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.removeItem = function (item) {
_this.props.dataSource.splice(_this.props.dataSource.indexOf(item), 1);
_this.update();
};
_this._changeHandlerTh = function (e, item) {
_this.fire('changeall', { item: item, checked: e.detail });
_this.props.dataSource.forEach(function (item) {
item.checked = e.detail;
});
_this.update();
};
_this._changeHandlerTd = function (e, item) {
_this.fire('change', { item: item, checked: e.detail });
item.checked = e.detail;
_this.update();
};
return _this;
}
Table.prototype._getCheckedState = function () {
var c = 0, uc = 0;
for (var i = 0, len = this.props.dataSource.length; i < len; i++) {
if (this.props.dataSource[i].checked) {
c++;
}
else {
uc++;
}
if (c > 0 && uc > 0) {
return { 'indeterminate': true };
}
}
if (c === 0)
return { 'unchecked': true };
return { 'checked': true };
};
Table.prototype.render = function (props) {
var _this = this;
if (!props.columns)
return;
if (!props.dataSource)
return;
return (h("table", __assign$1({}, extractClass(props, 'o-table', {
'o-table-checkbox': props.checkbox,
'o-table-border': props.border,
'o-table-stripe': props.stripe
})),
h("thead", null,
h("tr", null, props.columns.map(function (column, index) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return h("th", __assign$1({}, obj, { class: classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
index === 0 && props.checkbox && h("o-checkbox", __assign$1({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, column); } })),
column.title);
}))),
h("tbody", { class: "o-table-tbody" }, props.dataSource.map(function (item) { return (h("tr", { key: item.id, style: {
background: item.$config && item.$config.bgColor
} }, props.columns.map(function (column, subIndex) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return h("td", __assign$1({}, obj, { class: classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
subIndex === 0 && props.checkbox && h("o-checkbox", { checked: item.checked, onChange: function (_) { return _this._changeHandlerTd(_, item); } }),
column.render ? column.render(item) : item[column.key]);
}))); }))));
};
Table.css = css;
Table.defaultProps = {
dataSource: [],
columns: [],
checkbox: false,
border: false,
stripe: false,
compact: false
};
Table.propTypes = {
dataSource: Object,
columns: Object,
checkbox: Boolean,
border: Boolean,
stripe: Boolean,
compact: Boolean
};
Table = __decorate$1([
tag('o-table')
], Table);
return Table;
}(WeElement));
export default Table;
//# sourceMappingURL=index.esm.js.map

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

File diff suppressed because one or more lines are too long

419
components/tip/src/index.js Normal file
View File

@ -0,0 +1,419 @@
/**
* @omiu/table v0.0.4 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
* MIT Licensed.
*/
(function (omi) {
'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics$1 = function(d, b) {
extendStatics$1 = 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$1(d, b);
};
function __extends$1(d, b) {
extendStatics$1(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign$1 = function() {
__assign$1 = 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$1.apply(this, arguments);
};
function __decorate$1(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;
}
/**
* @omiu/checkbox v0.0.7 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
* MIT Licensed.
*/
/*! *****************************************************************************
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$1 = `:host {
display: inline-block; }
* {
box-sizing: border-box; }
.o-checkbox {
position: relative;
font-size: 14px;
color: rgba(0, 0, 0, 0.87);
white-space: nowrap; }
.o-checkbox:hover {
cursor: pointer; }
.o-checkbox__native-control:enabled:checked ~ .o-checkbox__background,
.o-checkbox__native-control:enabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-primary, #07c160);
background-color: #07c160;
background-color: var(--o-primary, #07c160);
opacity: 1; }
.o-checkbox__indeterminate .o-checkbox__checkmark {
opacity: 0; }
.o-checkbox__checkmark {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
color: #ffffff; }
.o-checkbox__checkmark-path {
transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
stroke: currentColor;
stroke-width: 3.12px;
stroke-dashoffset: 29.78334;
stroke-dasharray: 29.78334; }
.o-checkbox__native-control:checked ~ .o-checkbox__background .o-checkbox__checkmark-path,
.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__checkmark-path {
stroke-dashoffset: 0; }
.o-checkbox__background {
position: relative;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 45%;
height: 45%;
border: 2px solid currentColor;
border-radius: 2px;
background-color: transparent;
pointer-events: none;
will-change: background-color, border-color;
transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }
.o-checkbox__background,
.o-checkbox__label {
display: inline-block;
height: 18px;
vertical-align: middle; }
.o-checkbox__background {
width: 18px; }
.o-checkbox__label {
margin-left: 10px; }
.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__mixedmark {
transform: scaleX(1) rotate(0deg);
opacity: 1; }
.o-checkbox__mixedmark {
width: 100%;
height: 0;
transform: scaleX(0) rotate(0deg);
border: 1px solid white;
top: 50%;
position: relative;
margin-top: -1px;
opacity: 0;
transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }
.o-checkbox__native-control {
appearance: none;
-webkit-appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: inherit; }
.o-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.54);
color: white; }
.o-checkbox__native-control:disabled:checked ~ .o-checkbox__background,
.o-checkbox__native-control:disabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-primary, #07c160);
background-color: #07c160;
background-color: var(--o-primary, #07c160);
opacity: 0.5; }
.o-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.34);
color: white; }
.o-checkbox__disabled .o-checkbox__label {
color: #888; }
.o-checkbox__disabled:hover {
cursor: not-allowed; }
`;
/** @class */ ((function (_super) {
__extends(Table, _super);
function Table() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.changeHandler = function (e) {
if (_this.props.disabled) {
return;
}
_this.fire('change', e.currentTarget.checked);
if (_this.props.indeterminate) {
_this.props.checked = true;
_this.props.indeterminate = false;
if (_this.prevProps) {
_this.prevProps.checked = true;
_this.prevProps.indeterminate = false;
}
_this.update(true);
}
};
return _this;
}
Table.prototype.render = function (props) {
return (omi.h("div", __assign({}, omi.extractClass(props, 'o-checkbox', {
'o-checkbox__disabled': props.disabled,
'o-checkbox__indeterminate': props.indeterminate
})),
omi.h("input", __assign({ type: "checkbox", disabled: props.disabled, onChange: this.changeHandler }, extract(props, ['checked', 'value', 'indeterminate']), { class: "o-checkbox__native-control", id: "checkbox" })),
omi.h("div", { class: "o-checkbox__background" },
omi.h("svg", { class: "o-checkbox__checkmark", viewBox: "0 0 24 24" },
omi.h("path", { class: "o-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
omi.h("div", { class: "o-checkbox__mixedmark" })),
props.label && omi.h("label", { class: "o-checkbox__label", for: "checkbox" }, props.label)));
};
Table.css = css$1;
Table.propTypes = {
label: String,
disabled: Boolean,
indeterminate: Boolean,
checked: Boolean,
value: String
};
Table = __decorate([
omi.tag('o-checkbox')
], Table);
return Table;
})(omi.WeElement));
function extract(props, prop) {
var _a;
if (typeof prop === 'string') {
if (props.hasOwnProperty(prop)) {
return _a = {}, _a[prop] = props[prop], _a;
}
}
else {
var res_1 = {};
prop.forEach(function (key) {
if (props.hasOwnProperty(key)) {
res_1[key] = props[key];
}
});
return res_1;
}
}
"use strict";
var css = ":host {\n display: block; }\n\n.o-table {\n background: white;\n margin: auto;\n padding: 5px;\n width: 100%;\n animation: float 5s infinite;\n border-spacing: 0;\n border-collapse: collapse;\n color: #606266;\n font-weight: 400; }\n\n.o-table-checkbox th:first-child,\n.o-table-checkbox td:first-child {\n padding: 2px 10px 2px; }\n\nth {\n border-bottom: 1px solid #E0E0E0;\n text-align: left;\n vertical-align: middle;\n padding: 10px 10px 10px;\n color: rgba(0, 0, 0, 0.54);\n font-size: 0.75rem;\n line-height: 1.3125rem;\n font-weight: 500;\n background: #fafafa; }\n\n.o-table-border td,\n.o-table-border th {\n border-right: 1px solid #ebeef5; }\n\n.o-table-border td:first-child,\n.o-table-border th:first-child {\n border-left: 1px solid #ebeef5; }\n\n.o-table-border th {\n border-top: 1px solid #ebeef5; }\n\ntr {\n border-bottom: 1px solid #E0E0E0; }\n\ntr:hover td {\n background: #f5f5f5; }\n\ntd {\n text-align: left;\n vertical-align: middle;\n font-size: 0.875rem;\n padding: 10px 10px 10px; }\n\ntd.compact,\nth.compact {\n padding: 4px 10px 4px; }\n\na {\n text-decoration: none; }\n\n.o-table-align-left {\n text-align: left; }\n\n.o-table-align-center {\n text-align: center; }\n\n.o-table-align-right {\n text-align: right; }\n\na,\na:link,\na:visited,\na:active {\n text-decoration: none;\n color: inherit; }\n\na:hover {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\no-checkbox {\n margin-right: 5px; }\n\n.o-table-stripe tr:nth-of-type(odd) {\n background: white; }\n\n.o-table-stripe tr:nth-of-type(even) {\n background: #fafafa; }\n";
omi.options.ignoreAttrs = true;
var Table = /** @class */ (function (_super) {
__extends$1(Table, _super);
function Table() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.removeItem = function (item) {
_this.props.dataSource.splice(_this.props.dataSource.indexOf(item), 1);
_this.update();
};
_this._changeHandlerTh = function (e, item) {
_this.fire('changeall', { item: item, checked: e.detail });
_this.props.dataSource.forEach(function (item) {
item.checked = e.detail;
});
_this.update();
};
_this._changeHandlerTd = function (e, item) {
_this.fire('change', { item: item, checked: e.detail });
item.checked = e.detail;
_this.update();
};
return _this;
}
Table.prototype._getCheckedState = function () {
var c = 0, uc = 0;
for (var i = 0, len = this.props.dataSource.length; i < len; i++) {
if (this.props.dataSource[i].checked) {
c++;
}
else {
uc++;
}
if (c > 0 && uc > 0) {
return { 'indeterminate': true };
}
}
if (c === 0)
return { 'unchecked': true };
return { 'checked': true };
};
Table.prototype.render = function (props) {
var _this = this;
if (!props.columns)
return;
if (!props.dataSource)
return;
return (omi.h("table", __assign$1({}, omi.extractClass(props, 'o-table', {
'o-table-checkbox': props.checkbox,
'o-table-border': props.border,
'o-table-stripe': props.stripe
})),
omi.h("thead", null,
omi.h("tr", null, props.columns.map(function (column, index) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi.h("th", __assign$1({}, obj, { class: omi.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
index === 0 && props.checkbox && omi.h("o-checkbox", __assign$1({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, column); } })),
column.title);
}))),
omi.h("tbody", { class: "o-table-tbody" }, props.dataSource.map(function (item) { return (omi.h("tr", { key: item.id, style: {
background: item.$config && item.$config.bgColor
} }, props.columns.map(function (column, subIndex) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi.h("td", __assign$1({}, obj, { class: omi.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
subIndex === 0 && props.checkbox && omi.h("o-checkbox", { checked: item.checked, onChange: function (_) { return _this._changeHandlerTd(_, item); } }),
column.render ? column.render(item) : item[column.key]);
}))); }))));
};
Table.css = css;
Table.defaultProps = {
dataSource: [],
columns: [],
checkbox: false,
border: false,
stripe: false,
compact: false
};
Table.propTypes = {
dataSource: Object,
columns: Object,
checkbox: Boolean,
border: Boolean,
stripe: Boolean,
compact: Boolean
};
Table = __decorate$1([
omi.tag('o-table')
], Table);
return Table;
}(omi.WeElement));
return Table;
}(omi));
//# sourceMappingURL=index.js.map

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

File diff suppressed because one or more lines are too long

5
components/tip/src/index.scss Normal file
View File

@ -0,0 +1,5 @@
@import "@omiu/common/theme.scss";
:host {
display: inline-block;
}

38
components/tip/src/index.tsx Normal file
View File

@ -0,0 +1,38 @@
import { tag, WeElement, h, extractClass, classNames, options } from 'omi'
import { createPopper } from '@popperjs/core';
import * as css from './index.scss'
interface Props {
}
@tag('o-tip')
export default class Table extends WeElement<Props> {
static css = css
static defaultProps = {
}
static propTypes = {
}
installed() {
const tip = this.shadowRoot.querySelector('slot').assignedNodes()[0]
const tooltip = document.createElement('div')
tooltip.innerHTML = 'af'
this.shadowRoot.appendChild(tooltip)
createPopper(tip, tooltip, {
placement: 'bottom',
});
}
render() {
return <slot></slot>
}
}

14
components/tip/tsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"baseUrl": ".",
"experimentalDecorators": true,
"jsx": "react",
"jsxFactory": "h",
"target": "es5",
"allowJs": true,
"declaration": true
},
"include": [
"src/**/*"
]
}

2
packages/admin/package.json
View File

@ -14,7 +14,7 @@
"@omiu/avatar": "^0.0.1",
"@omiu/button": "^0.0.8",
"@omiu/pagination": "^0.0.2",
"@omiu/table": "^0.0.4",
"@omiu/table": "^0.0.5",
"@omiu/tree": "^0.0.14",
"omi": "latest",
"omi-router": "^3.0.0",