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

chore(@omiu): lint

This commit is contained in:
dntzhang 2021-08-28 13:21:25 +08:00
parent e5c206fb6e
commit bbff135d8b
19 changed files with 3706 additions and 8832 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/select/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/select",
"version": "0.0.13",
"version": "0.0.14",
"description": "Mobile pop-up options list",
"docsExtend": {
"cnName": "下拉菜单",

159
components/select/src/index.tsx
View File

@ -17,10 +17,10 @@ interface Props {
}
const heightMap = {
'big': 40,
'medium': 36,
'small': 32,
'mini': 28,
big: 40,
medium: 36,
small: 32,
mini: 28
}
@tag('o-select')
@ -32,7 +32,6 @@ export default class Select extends WeElement<Props> {
size: 'big',
multiple: false,
block: false
}
static propTypes = {
@ -51,7 +50,6 @@ export default class Select extends WeElement<Props> {
active: !this.props.active
})
}, 10)
}
onInputBlur = () => {
@ -69,7 +67,6 @@ export default class Select extends WeElement<Props> {
selectedItems = []
onItemClick = (item, index, evt) => {
if (this.props.multiple) {
//不自动关闭
evt.stopPropagation()
@ -82,18 +79,17 @@ export default class Select extends WeElement<Props> {
}
this.fire('item-select', this.selectedItems)
this.update()
this.resetSize()
this.popover.updatePosition()
} else {
this._refInput.focus()
this.fire('item-select', item)
this.selectedIndex = index
this.label = item.label
this.updateProps({
@ -108,7 +104,15 @@ export default class Select extends WeElement<Props> {
inputHeight
resetInputHeight() {
this.inputHeight = Math.max(heightMap[this.props.size], Number(this.tags ? (this.tags.clientHeight + (this.tags.clientHeight > heightMap[this.props.size] ? 6 : 0)) : 0))
this.inputHeight = Math.max(
heightMap[this.props.size],
Number(
this.tags
? this.tags.clientHeight +
(this.tags.clientHeight > heightMap[this.props.size] ? 6 : 0)
: 0
)
)
}
inputWidth: number = 0
@ -116,7 +120,7 @@ export default class Select extends WeElement<Props> {
tags
resetInputWidth() {
this.inputWidth = this.getBoundingClientRect().width;
this.inputWidth = this.getBoundingClientRect().width
}
installed() {
@ -151,26 +155,31 @@ export default class Select extends WeElement<Props> {
}
}
}
}
uninstall() {
removeResizeListener(this._refInput, this.resetSize);
removeResizeListener(this._refInput, this.resetSize)
}
render(props) {
return (
<div {...extractClass({}, 'o-select', {
['o-select--' + props.size]: props.size,
'block': props.block
})} >
<div
{...extractClass({}, 'o-select', {
['o-select--' + props.size]: props.size,
block: props.block
})}
>
<o-popover
block={props.block}
ref={e => this.popover = e}
position="bottom">
ref={(e) => (this.popover = e)}
position="bottom"
>
<div>
<div class="o-select__tags" ref={e => this.tags = e} style={{ width: '100%', maxWidth: (this.inputWidth - 32) + 'px' }}>
<div
class="o-select__tags"
ref={(e) => (this.tags = e)}
style={{ width: '100%', maxWidth: this.inputWidth - 32 + 'px' }}
>
<span>
{/* <span class="o-tag o-tag--info o-tag--small o-tag--light">
<span class="o-select__tags-text">omi</span><i class="o-tag__close o-icon-close"></i>
@ -179,56 +188,106 @@ export default class Select extends WeElement<Props> {
<span class="o-select__tags-text">asfsdfdsafdsafdsfbc</span><i class="o-tag__close o-icon-close"></i>
</span> */}
{this.selectedItems.map(item => {
return <span class="o-tag o-tag--info o-tag--small o-tag--light">
<span class="o-select__tags-text">{item.label}</span><i class="o-tag__close o-icon-close"></i>
</span>
{this.selectedItems.map((item) => {
return (
<span class="o-tag o-tag--info o-tag--small o-tag--light">
<span class="o-select__tags-text">{item.label}</span>
<i class="o-tag__close o-icon-close"></i>
</span>
)
})}
</span>
<input type="text" autocomplete="off" class="o-select__input" style={{ flexGrow: 1, width: '0.0961538%', maxWidth: (this.inputWidth - 32) + 'px' }} />
<input
type="text"
autocomplete="off"
class="o-select__input"
style={{
flexGrow: 1,
width: '0.0961538%',
maxWidth: this.inputWidth - 32 + 'px'
}}
/>
</div>
<div {...extractClass({}, 'o-input o-input--suffix', {
['o-input--' + props.size]: props.size,
'is-focus': props.isFocus
})} >
<input style={{ height: this.inputHeight + 'px' }} type="text" ref={e => this._refInput = e} onClick={this.onInputClick} onBlur={this.onInputBlur} readonly autocomplete="off" value={props.multiple ? '' : this.label} placeholder={Object.keys(this.selectedIndexMap).length > 0 ? '' : props.placeholder} class="o-input__inner" />
<div
{...extractClass({}, 'o-input o-input--suffix', {
['o-input--' + props.size]: props.size,
'is-focus': props.isFocus
})}
>
<input
style={{ height: this.inputHeight + 'px' }}
type="text"
ref={(e) => (this._refInput = e)}
onClick={this.onInputClick}
onBlur={this.onInputBlur}
readonly
autocomplete="off"
value={props.multiple ? '' : this.label}
placeholder={
Object.keys(this.selectedIndexMap).length > 0
? ''
: props.placeholder
}
class="o-input__inner"
/>
<span class="o-input__suffix">
<span class="o-input__suffix-inner">
<i class="o-select__caret o-input__icon o-icon-arrow-up is-reverse"></i>
</span>
</span>
<svg viewBox="0 0 24 24" class="arrow" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z">
</path>
<svg
viewBox="0 0 24 24"
class="arrow"
data-icon="caret-down"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
focusable="false"
>
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
</svg>
</div>
</div>
<div slot="popover" class="o-select-dropdown__wrap">
<ul>
{props.items.map((item, index) => {
const selected = props.multiple ? this.selectedIndexMap[index] : (index === this.selectedIndex)
return <li {...extractClass({}, 'o-select-dropdown__item', {
selected
})} onClick={evt => { this.onItemClick(item, index, evt) }}>
<span>{item.label}</span>
{selected && <svg class="a3 a2" focusable="false" viewBox="0 0 24 24" aria-hidden="true" tabindex="-1" title="Check" curr><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg>}
</li>
const selected = props.multiple
? this.selectedIndexMap[index]
: index === this.selectedIndex
return (
<li
{...extractClass({}, 'o-select-dropdown__item', {
selected
})}
onClick={(evt) => {
this.onItemClick(item, index, evt)
}}
>
<span>{item.label}</span>
{selected && (
<svg
class="a3 a2"
focusable="false"
viewBox="0 0 24 24"
aria-hidden="true"
tabindex="-1"
title="Check"
curr
>
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
</svg>
)}
</li>
)
})}
</ul>
</div>
</o-popover>
</div>
)
}
}

1
components/tree/dist/index.es.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

111
components/tree/dist/index.html vendored Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omiu Tree</title>
<script type="module" crossorigin src="/index.es.js"></script>
<link rel="stylesheet" href="/style.css">
</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="../../../icon/ac-unit-outlined.js"></script>
<script src="../../../icon/accessible-rounded.js"></script>
<div>
<o-tree
style="width: 400px"
data="[{
label: '一级 1',
expanded: true,
actionIcons: ['ac-unit-outlined', 'accessible-rounded', 'ac-unit-outlined'],
children: [{
label: '一级 1',
sign: '●',
expanded: true,
selected: true,
icon: 'ac-unit-outlined',
children: [{
sign: '1, M',
label: '二级 1-1',
children: [{
sign: 'M',
label: '三级 1-1-1(hash改变)',
icon: 'accessible-rounded',
color: 'red',
href: '#abc',
}]
}]
}, {
label: '一级 2',
icon: 'accessible-rounded',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
icon: 'accessible-rounded',
children: [{
label: '二级 3-1',
icon: 'accessible-rounded',
children: [{
label: '三级 3-1-1(链接跳转)',
icon: 'accessible-rounded',
href: 'https://tencent.github.io/omi/',
target: '_blank',
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}]
}]"
>
</o-tree>
</div>
<script>
const treeEle = document.querySelector('o-tree')
treeEle.addEventListener('node-click', function (evt) {
console.log(evt.detail)
})
treeEle.addEventListener('context-menu', function (evt) {
console.log(evt.detail)
})
treeEle.addEventListener('action-icon-click', function (evt) {
console.log(evt.detail)
})
setTimeout(function () {
treeEle.fold()
}, 1000)
</script>
</body>
</html>

1
components/tree/dist/style.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

84
components/tree/demos/js-demo/index.html → components/tree/index.html
View File

@ -1,24 +1,30 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omiu Tree</title>
<script type="module" src="/src/index.tsx"></script>
</head>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Omiu Tree</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="../../../icon/ac-unit-outlined.js"></script>
<script src="../../../icon/accessible-rounded.js"></script>
<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="../../../icon/ac-unit-outlined.js"></script>
<script src="../../../icon/accessible-rounded.js"></script>
<div>
<o-tree style="width:400px;" data="[{
<div>
<o-tree
style="width: 400px"
data="[{
label: '一级 1',
expanded: true,
@ -76,30 +82,28 @@
}]
}]
}]">
</o-tree>
</div>
}]"
>
</o-tree>
</div>
<script>
const treeEle = document.querySelector('o-tree')
treeEle.addEventListener('node-click', function (evt) {
console.log(evt.detail)
})
<script>
const treeEle = document.querySelector('o-tree')
treeEle.addEventListener('node-click', function (evt) {
console.log(evt.detail)
})
treeEle.addEventListener('context-menu', function (evt) {
console.log(evt.detail)
})
treeEle.addEventListener('context-menu', function (evt) {
console.log(evt.detail)
})
treeEle.addEventListener('action-icon-click', function (evt) {
console.log(evt.detail)
})
setTimeout(function () {
treeEle.fold()
}, 1000)
</script>
</body>
treeEle.addEventListener('action-icon-click', function (evt) {
console.log(evt.detail)
})
setTimeout(function () {
treeEle.fold()
}, 1000)
</script>
</body>
</html>

92
components/tree/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/tree",
"version": "0.0.18",
"version": "0.0.19",
"description": "Components that show tree nested data structures.",
"docsExtend": {
"cnName": "树形控件",
@ -9,24 +9,29 @@
"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",
"build": "rollup -c scripts/rollup.config.iife.js && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
"main": "dist/index.es.js",
"exports": {
".": "./dist/index.es.js"
},
"types": "types/index.d.ts",
"files": [
"dist",
"types"
],
"scripts": {
"dev": "yarn start",
"start": "yarn watch & vite",
"build": "vite build && yarn build:scss",
"build:demo": "vite build",
"build:scss": "sass src/index.scss src/index.css",
"watch": "sass --watch src/index.scss src/index.css --no-source-map",
"pretest": "yarn build",
"test": "web-test-runner \"test/*.js\" --node-resolve"
},
"typings": "./dist/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/Tencent/omi.git"
},
"files": [
"src",
"dist",
"typings.json"
],
"keywords": [
"omiu",
"omi",
@ -45,59 +50,16 @@
"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",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"omi": "latest"
},
"devDependencies": {
"@open-wc/testing": "^2.5.33",
"@types/node": "^16.4.7",
"@web/test-runner": "^0.13.13",
"sass": "^1.36.0",
"typescript": "^4.3.2",
"vite": "^2.4.3"
}
}

12
components/tree/src/global.d.ts vendored Executable file
View File

@ -0,0 +1,12 @@
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'
declare module '*.less'
declare module '*.css'
declare module '*.scss'
declare module '*.sass'
declare module '*.webp'

395
components/tree/src/index.css
View File

@ -1,5 +1,6 @@
:host {
display: block; }
display: block;
}
.o-fade-in-enter,
.o-fade-in-leave-active,
@ -9,38 +10,45 @@
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
opacity: 0; }
opacity: 0;
}
.o-checkbox,
.o-checkbox__input {
display: inline-block;
position: relative; }
position: relative;
}
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear; }
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.o-fade-in-linear-enter-active,
.o-fade-in-linear-leave-active {
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear; }
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.o-fade-in-enter-active,
.o-fade-in-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.o-zoom-in-center-enter-active,
.o-zoom-in-center-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.o-zoom-in-center-enter,
.o-zoom-in-center-leave-active {
opacity: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0); }
transform: scaleX(0);
}
.o-zoom-in-top-enter-active,
.o-zoom-in-top-leave-active {
@ -52,13 +60,15 @@
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center top;
transform-origin: center top; }
transform-origin: center top;
}
.o-zoom-in-top-enter,
.o-zoom-in-top-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0); }
transform: scaleY(0);
}
.o-zoom-in-bottom-enter-active,
.o-zoom-in-bottom-leave-active {
@ -70,13 +80,15 @@
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom; }
transform-origin: center bottom;
}
.o-zoom-in-bottom-enter,
.o-zoom-in-bottom-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0); }
transform: scaleY(0);
}
.o-zoom-in-left-enter-active,
.o-zoom-in-left-leave-active {
@ -88,36 +100,43 @@
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: top left;
transform-origin: top left; }
transform-origin: top left;
}
.o-zoom-in-left-enter,
.o-zoom-in-left-leave-active {
opacity: 0;
-webkit-transform: scale(0.45, 0.45);
transform: scale(0.45, 0.45); }
transform: scale(0.45, 0.45);
}
.collapse-transition {
-webkit-transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out;
transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out; }
-webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
-webkit-transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out;
transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out; }
-webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}
.o-list-enter-active,
.o-list-leave-active {
-webkit-transition: all 1s;
transition: all 1s; }
transition: all 1s;
}
.o-list-enter,
.o-list-leave-active {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
transform: translateY(-30px);
}
.o-opacity-transition {
-webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.o-checkbox {
color: #606266;
@ -129,167 +148,201 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 30px; }
margin-right: 30px;
}
.o-checkbox.is-bordered {
padding: 9px 20px 9px 10px;
border-radius: 4px;
border: 1px solid #DCDFE6;
border: 1px solid #dcdfe6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: normal;
height: 40px; }
height: 40px;
}
.o-checkbox.is-bordered.is-checked {
border-color: #409EFF; }
border-color: #409eff;
}
.o-checkbox.is-bordered.is-disabled {
border-color: #EBEEF5;
cursor: not-allowed; }
border-color: #ebeef5;
cursor: not-allowed;
}
.o-checkbox.is-bordered + .o-checkbox.is-bordered {
margin-left: 10px; }
margin-left: 10px;
}
.o-checkbox.is-bordered.o-checkbox--medium {
padding: 7px 20px 7px 10px;
border-radius: 4px;
height: 36px; }
height: 36px;
}
.o-checkbox.is-bordered.o-checkbox--medium .o-checkbox__label {
line-height: 17px;
font-size: 14px; }
font-size: 14px;
}
.o-checkbox.is-bordered.o-checkbox--medium .o-checkbox__inner {
height: 14px;
width: 14px; }
width: 14px;
}
.o-checkbox.is-bordered.o-checkbox--small {
padding: 5px 15px 5px 10px;
border-radius: 3px;
height: 32px; }
height: 32px;
}
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__label {
line-height: 15px;
font-size: 12px; }
font-size: 12px;
}
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__inner {
height: 12px;
width: 12px; }
width: 12px;
}
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__inner::after {
height: 6px;
width: 2px; }
width: 2px;
}
.o-checkbox.is-bordered.o-checkbox--mini {
padding: 3px 15px 3px 10px;
border-radius: 3px;
height: 28px; }
height: 28px;
}
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__label {
line-height: 12px;
font-size: 12px; }
font-size: 12px;
}
.o-checkbox-button__inner,
.o-checkbox__input {
line-height: 1;
vertical-align: middle;
white-space: nowrap;
outline: 0; }
outline: 0;
}
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__inner {
height: 12px;
width: 12px; }
width: 12px;
}
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__inner::after {
height: 6px;
width: 2px; }
width: 2px;
}
.o-checkbox__input {
cursor: pointer; }
cursor: pointer;
}
.o-checkbox__input.is-disabled .o-checkbox__inner {
background-color: #edf2fc;
border-color: #DCDFE6;
cursor: not-allowed; }
border-color: #dcdfe6;
cursor: not-allowed;
}
.o-checkbox__input.is-disabled .o-checkbox__inner::after {
cursor: not-allowed;
border-color: #C0C4CC; }
border-color: #c0c4cc;
}
.o-checkbox__input.is-disabled .o-checkbox__inner + .o-checkbox__label {
cursor: not-allowed; }
cursor: not-allowed;
}
.o-checkbox__input.is-disabled.is-checked .o-checkbox__inner {
background-color: #F2F6FC;
border-color: #DCDFE6; }
background-color: #f2f6fc;
border-color: #dcdfe6;
}
.o-checkbox__input.is-disabled.is-checked .o-checkbox__inner::after {
border-color: #C0C4CC; }
border-color: #c0c4cc;
}
.o-checkbox__input.is-disabled.is-indeterminate .o-checkbox__inner {
background-color: #F2F6FC;
border-color: #DCDFE6; }
background-color: #f2f6fc;
border-color: #dcdfe6;
}
.o-checkbox__input.is-disabled.is-indeterminate .o-checkbox__inner::before {
background-color: #C0C4CC;
border-color: #C0C4CC; }
background-color: #c0c4cc;
border-color: #c0c4cc;
}
.o-checkbox__input.is-checked .o-checkbox__inner,
.o-checkbox__input.is-indeterminate .o-checkbox__inner {
background-color: #409EFF;
border-color: #409EFF; }
background-color: #409eff;
border-color: #409eff;
}
.o-checkbox__input.is-disabled + span.o-checkbox__label {
color: #C0C4CC;
cursor: not-allowed; }
color: #c0c4cc;
cursor: not-allowed;
}
.o-checkbox__input.is-checked .o-checkbox__inner::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1); }
transform: rotate(45deg) scaleY(1);
}
.o-checkbox__input.is-checked + .o-checkbox__label {
color: #409EFF; }
color: #409eff;
}
.o-checkbox__input.is-focus .o-checkbox__inner {
border-color: #409EFF; }
border-color: #409eff;
}
.o-checkbox__input.is-indeterminate .o-checkbox__inner::before {
content: '';
content: "";
position: absolute;
display: block;
background-color: #FFF;
background-color: #fff;
height: 2px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
left: 0;
right: 0;
top: 5px; }
top: 5px;
}
.o-checkbox__input.is-indeterminate .o-checkbox__inner::after {
display: none; }
display: none;
}
.o-checkbox__inner {
display: inline-block;
position: relative;
border: 1px solid #DCDFE6;
border: 1px solid #dcdfe6;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
background-color: #FFF;
background-color: #fff;
z-index: 1;
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); }
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
.o-checkbox__inner:hover {
border-color: #409EFF; }
border-color: #409eff;
}
.o-checkbox__inner::after {
-webkit-box-sizing: content-box;
box-sizing: content-box;
content: "";
border: 1px solid #FFF;
border: 1px solid #fff;
border-left: 0;
border-top: 0;
height: 7px;
@ -299,12 +352,13 @@
-webkit-transform: rotate(45deg) scaleY(0);
transform: rotate(45deg) scaleY(0);
width: 3px;
-webkit-transition: -webkit-transform .15s ease-in .05s;
transition: -webkit-transform .15s ease-in .05s;
transition: transform .15s ease-in .05s;
transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
-webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
transition: -webkit-transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s;
-webkit-transform-origin: center;
transform-origin: center; }
transform-origin: center;
}
.o-checkbox__original {
opacity: 0;
@ -313,27 +367,31 @@
margin: 0;
width: 0;
height: 0;
z-index: -1; }
z-index: -1;
}
.o-checkbox-button,
.o-checkbox-button__inner {
display: inline-block;
position: relative; }
position: relative;
}
.o-checkbox__label {
display: inline-block;
padding-left: 10px;
line-height: 19px;
font-size: 14px; }
font-size: 14px;
}
.o-checkbox:last-of-type {
margin-right: 0; }
margin-right: 0;
}
.o-checkbox-button__inner {
font-weight: 500;
cursor: pointer;
background: #FFF;
border: 1px solid #DCDFE6;
background: #fff;
border: 1px solid #dcdfe6;
border-left: 0;
color: #606266;
-webkit-appearance: none;
@ -348,100 +406,122 @@
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 0; }
border-radius: 0;
}
.o-checkbox-button__inner.is-round {
padding: 12px 20px; }
padding: 12px 20px;
}
.o-checkbox-button__inner:hover {
color: #409EFF; }
color: #409eff;
}
.o-checkbox-button__inner [class*=el-icon-] {
line-height: .9; }
line-height: 0.9;
}
.o-checkbox-button__inner [class*=el-icon-] + span {
margin-left: 5px; }
margin-left: 5px;
}
.o-checkbox-button__original {
opacity: 0;
outline: 0;
position: absolute;
margin: 0;
z-index: -1; }
z-index: -1;
}
.o-checkbox-button.is-checked .o-checkbox-button__inner {
color: #FFF;
background-color: #409EFF;
border-color: #409EFF;
color: #fff;
background-color: #409eff;
border-color: #409eff;
-webkit-box-shadow: -1px 0 0 0 #8cc5ff;
box-shadow: -1px 0 0 0 #8cc5ff; }
box-shadow: -1px 0 0 0 #8cc5ff;
}
.o-checkbox-button.is-checked:first-child .o-checkbox-button__inner {
border-left-color: #409EFF; }
border-left-color: #409eff;
}
.o-checkbox-button.is-disabled .o-checkbox-button__inner {
color: #C0C4CC;
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #FFF;
border-color: #EBEEF5;
background-color: #fff;
border-color: #ebeef5;
-webkit-box-shadow: none;
box-shadow: none; }
box-shadow: none;
}
.o-checkbox-button.is-disabled:first-child .o-checkbox-button__inner {
border-left-color: #EBEEF5; }
border-left-color: #ebeef5;
}
.o-checkbox-button:first-child .o-checkbox-button__inner {
border-left: 1px solid #DCDFE6;
border-left: 1px solid #dcdfe6;
border-radius: 4px 0 0 4px;
-webkit-box-shadow: none !important;
box-shadow: none !important; }
box-shadow: none !important;
}
.o-checkbox-button.is-focus .o-checkbox-button__inner {
border-color: #409EFF; }
border-color: #409eff;
}
.o-checkbox-button:last-child .o-checkbox-button__inner {
border-radius: 0 4px 4px 0; }
border-radius: 0 4px 4px 0;
}
.o-checkbox-button--medium .o-checkbox-button__inner {
padding: 10px 20px;
font-size: 14px;
border-radius: 0; }
border-radius: 0;
}
.o-checkbox-button--medium .o-checkbox-button__inner.is-round {
padding: 10px 20px; }
padding: 10px 20px;
}
.o-checkbox-button--small .o-checkbox-button__inner {
padding: 9px 15px;
font-size: 12px;
border-radius: 0; }
border-radius: 0;
}
.o-checkbox-button--small .o-checkbox-button__inner.is-round {
padding: 9px 15px; }
padding: 9px 15px;
}
.o-checkbox-button--mini .o-checkbox-button__inner {
padding: 7px 15px;
font-size: 12px;
border-radius: 0; }
border-radius: 0;
}
.o-checkbox-button--mini .o-checkbox-button__inner.is-round {
padding: 7px 15px; }
padding: 7px 15px;
}
.o-checkbox-group {
font-size: 0; }
font-size: 0;
}
.o-tree {
position: relative;
cursor: default;
background: #FFF;
color: #606266; }
background: #fff;
color: #606266;
}
.o-tree__empty-block {
position: relative;
min-height: 60px;
text-align: center;
width: 100%;
height: 100%; }
height: 100%;
}
.o-tree__empty-text {
position: absolute;
@ -450,27 +530,32 @@
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #909399;
font-size: 14px; }
font-size: 14px;
}
.o-tree__drop-indicator {
position: absolute;
left: 0;
right: 0;
height: 1px;
background-color: #409EFF; }
background-color: #409eff;
}
.o-tree-node {
white-space: nowrap;
outline: 0;
position: relative;
display: block; }
display: block;
}
.o-tree-node:focus > .o-tree-node__content {
background-color: #F5F7FA; }
background-color: #f5f7fa;
}
.o-tree-node.is-drop-inner > .o-tree-node__content .o-tree-node__label {
background-color: #409EFF;
color: #fff; }
background-color: #409eff;
color: #fff;
}
.o-tree-node__content {
display: -webkit-box;
@ -480,95 +565,117 @@
-ms-flex-align: center;
align-items: center;
height: 26px;
cursor: pointer; }
cursor: pointer;
}
.o-tree-node__content > .o-tree-node__expand-icon {
padding: 6px; }
padding: 6px;
}
.o-tree-node__content > label.o-checkbox {
margin-right: 8px; }
margin-right: 8px;
}
.o-tree-node__content:hover {
background-color: #F5F7FA; }
background-color: #f5f7fa;
}
.o-tree.is-dragging .o-tree-node__content {
cursor: move; }
cursor: move;
}
.o-tree.is-dragging .o-tree-node__content * {
pointer-events: none; }
pointer-events: none;
}
.o-tree.is-dragging.is-drop-not-allow .o-tree-node__content {
cursor: not-allowed; }
cursor: not-allowed;
}
.o-tree-node__expand-icon {
cursor: pointer;
color: #C0C4CC;
color: #c0c4cc;
font-size: 12px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
transform: rotate(-90deg);
}
.o-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
transform: rotate(0deg);
}
.o-tree-node__expand-icon.is-leaf {
color: transparent;
cursor: default;
width: 12px;
height: 12px; }
height: 12px;
}
.o-tree-node__label {
font-size: 14px; }
font-size: 14px;
}
.o-tree-node__loading-icon {
margin-right: 8px;
font-size: 14px;
color: #C0C4CC; }
color: #c0c4cc;
}
.o-tree-node > .o-tree-node__children {
overflow: hidden;
background-color: transparent; }
background-color: transparent;
}
.o-tree-node.is-expanded > .o-tree-node__children {
display: block; }
display: block;
}
.o-tree-node.is-current-blur > .o-tree-node__content {
background-color: rgba(0, 0, 0, 0.1); }
background-color: rgba(0, 0, 0, 0.1);
}
.o-tree-node.is-current > .o-tree-node__content {
background-color: rgba(7, 193, 96, 0.241);
background-color: var(--o-primary-fade-more, rgba(7, 193, 96, 0.241)); }
background-color: var(--o-primary-fade-more, rgba(7, 193, 96, 0.241));
}
.sign {
position: absolute;
font-size: 10px;
top: 4px;
right: 4px; }
right: 4px;
}
.action-icons {
position: absolute;
font-size: 10px;
top: 4px;
right: 4px; }
right: 4px;
}
.action-icon {
display: inline-block;
font-size: 15px;
margin-left: 15px;
cursor: pointer; }
cursor: pointer;
}
.edit-input {
width: 100%; }
width: 100%;
}
.o-tree-node__label {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 32px; }
padding-right: 32px;
}
.o-tree-node__label.is-editing {
text-overflow: unset; }
text-overflow: unset;
}
a,
a:link,
@ -576,7 +683,11 @@ a:visited,
a:hover,
a:active {
text-decoration: none;
color: inherit; }
color: inherit;
}
a {
display: block; }
display: block;
}
/*# sourceMappingURL=index.css.map */

1
components/tree/src/index.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AAEA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EAEA;EAEA;EAEA;EAGA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EAEA;EAEA;EAEA;EAGA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EAEA;EAEA;EAEA;EAGA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EAEA;;;AAIF;EACE;EAEA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAIF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAOF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBClpBoB;EDmpBpB;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;;AAGF;EACE","file":"index.css"}

33
components/tree/src/index.d.ts vendored
View File

@ -1,33 +0,0 @@
import { WeElement } from 'omi';
interface Props {
data?: any[];
padding: number;
}
export default class Tree extends WeElement<Props> {
static css: any;
static defaultProps: {
padding: number;
};
static propTypes: {
data: ArrayConstructor;
padding: NumberConstructor;
};
onNodeClick: (node: any) => void;
_tempTagName: string;
prevSelectedNode: any;
onNodeArrowClick: (node: any) => void;
onContextMenu: (evt: any, node: any) => void;
onActionIcon: (evt: any, icon: any) => void;
fold(): void;
_fold(node: any): void;
onEditInputBlur: () => void;
onEditInputChange: (evt: any) => void;
editInput: any;
prevBlurSelectedNode: any;
installed(): void;
_nodeTagName: string;
isURL(str: any): boolean;
renderNode(node: any, level: any): JSX.Element;
render(props: any): JSX.Element;
}
export {};

795
components/tree/src/index.esm.js
View File

@ -1,795 +0,0 @@
/**
* @omiu/tree v0.0.18 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 } 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 = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
var css = `:host {
display: block; }
.o-fade-in-enter,
.o-fade-in-leave-active,
.o-fade-in-linear-enter,
.o-fade-in-linear-leave,
.o-fade-in-linear-leave-active,
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
opacity: 0; }
.o-checkbox,
.o-checkbox__input {
display: inline-block;
position: relative; }
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear; }
.o-fade-in-linear-enter-active,
.o-fade-in-linear-leave-active {
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear; }
.o-fade-in-enter-active,
.o-fade-in-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
.o-zoom-in-center-enter-active,
.o-zoom-in-center-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
.o-zoom-in-center-enter,
.o-zoom-in-center-leave-active {
opacity: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0); }
.o-zoom-in-top-enter-active,
.o-zoom-in-top-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center top;
transform-origin: center top; }
.o-zoom-in-top-enter,
.o-zoom-in-top-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0); }
.o-zoom-in-bottom-enter-active,
.o-zoom-in-bottom-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom; }
.o-zoom-in-bottom-enter,
.o-zoom-in-bottom-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0); }
.o-zoom-in-left-enter-active,
.o-zoom-in-left-leave-active {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: top left;
transform-origin: top left; }
.o-zoom-in-left-enter,
.o-zoom-in-left-leave-active {
opacity: 0;
-webkit-transform: scale(0.45, 0.45);
transform: scale(0.45, 0.45); }
.collapse-transition {
-webkit-transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out;
transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out; }
.horizontal-collapse-transition {
-webkit-transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out;
transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out; }
.o-list-enter-active,
.o-list-leave-active {
-webkit-transition: all 1s;
transition: all 1s; }
.o-list-enter,
.o-list-leave-active {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
.o-opacity-transition {
-webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
.o-checkbox {
color: #606266;
font-weight: 500;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 30px; }
.o-checkbox.is-bordered {
padding: 9px 20px 9px 10px;
border-radius: 4px;
border: 1px solid #DCDFE6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: normal;
height: 40px; }
.o-checkbox.is-bordered.is-checked {
border-color: #409EFF; }
.o-checkbox.is-bordered.is-disabled {
border-color: #EBEEF5;
cursor: not-allowed; }
.o-checkbox.is-bordered + .o-checkbox.is-bordered {
margin-left: 10px; }
.o-checkbox.is-bordered.o-checkbox--medium {
padding: 7px 20px 7px 10px;
border-radius: 4px;
height: 36px; }
.o-checkbox.is-bordered.o-checkbox--medium .o-checkbox__label {
line-height: 17px;
font-size: 14px; }
.o-checkbox.is-bordered.o-checkbox--medium .o-checkbox__inner {
height: 14px;
width: 14px; }
.o-checkbox.is-bordered.o-checkbox--small {
padding: 5px 15px 5px 10px;
border-radius: 3px;
height: 32px; }
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__label {
line-height: 15px;
font-size: 12px; }
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__inner {
height: 12px;
width: 12px; }
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__inner::after {
height: 6px;
width: 2px; }
.o-checkbox.is-bordered.o-checkbox--mini {
padding: 3px 15px 3px 10px;
border-radius: 3px;
height: 28px; }
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__label {
line-height: 12px;
font-size: 12px; }
.o-checkbox-button__inner,
.o-checkbox__input {
line-height: 1;
vertical-align: middle;
white-space: nowrap;
outline: 0; }
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__inner {
height: 12px;
width: 12px; }
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__inner::after {
height: 6px;
width: 2px; }
.o-checkbox__input {
cursor: pointer; }
.o-checkbox__input.is-disabled .o-checkbox__inner {
background-color: #edf2fc;
border-color: #DCDFE6;
cursor: not-allowed; }
.o-checkbox__input.is-disabled .o-checkbox__inner::after {
cursor: not-allowed;
border-color: #C0C4CC; }
.o-checkbox__input.is-disabled .o-checkbox__inner + .o-checkbox__label {
cursor: not-allowed; }
.o-checkbox__input.is-disabled.is-checked .o-checkbox__inner {
background-color: #F2F6FC;
border-color: #DCDFE6; }
.o-checkbox__input.is-disabled.is-checked .o-checkbox__inner::after {
border-color: #C0C4CC; }
.o-checkbox__input.is-disabled.is-indeterminate .o-checkbox__inner {
background-color: #F2F6FC;
border-color: #DCDFE6; }
.o-checkbox__input.is-disabled.is-indeterminate .o-checkbox__inner::before {
background-color: #C0C4CC;
border-color: #C0C4CC; }
.o-checkbox__input.is-checked .o-checkbox__inner,
.o-checkbox__input.is-indeterminate .o-checkbox__inner {
background-color: #409EFF;
border-color: #409EFF; }
.o-checkbox__input.is-disabled + span.o-checkbox__label {
color: #C0C4CC;
cursor: not-allowed; }
.o-checkbox__input.is-checked .o-checkbox__inner::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1); }
.o-checkbox__input.is-checked + .o-checkbox__label {
color: #409EFF; }
.o-checkbox__input.is-focus .o-checkbox__inner {
border-color: #409EFF; }
.o-checkbox__input.is-indeterminate .o-checkbox__inner::before {
content: '';
position: absolute;
display: block;
background-color: #FFF;
height: 2px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
left: 0;
right: 0;
top: 5px; }
.o-checkbox__input.is-indeterminate .o-checkbox__inner::after {
display: none; }
.o-checkbox__inner {
display: inline-block;
position: relative;
border: 1px solid #DCDFE6;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
background-color: #FFF;
z-index: 1;
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); }
.o-checkbox__inner:hover {
border-color: #409EFF; }
.o-checkbox__inner::after {
-webkit-box-sizing: content-box;
box-sizing: content-box;
content: "";
border: 1px solid #FFF;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
-webkit-transform: rotate(45deg) scaleY(0);
transform: rotate(45deg) scaleY(0);
width: 3px;
-webkit-transition: -webkit-transform .15s ease-in .05s;
transition: -webkit-transform .15s ease-in .05s;
transition: transform .15s ease-in .05s;
transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
-webkit-transform-origin: center;
transform-origin: center; }
.o-checkbox__original {
opacity: 0;
outline: 0;
position: absolute;
margin: 0;
width: 0;
height: 0;
z-index: -1; }
.o-checkbox-button,
.o-checkbox-button__inner {
display: inline-block;
position: relative; }
.o-checkbox__label {
display: inline-block;
padding-left: 10px;
line-height: 19px;
font-size: 14px; }
.o-checkbox:last-of-type {
margin-right: 0; }
.o-checkbox-button__inner {
font-weight: 500;
cursor: pointer;
background: #FFF;
border: 1px solid #DCDFE6;
border-left: 0;
color: #606266;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 0; }
.o-checkbox-button__inner.is-round {
padding: 12px 20px; }
.o-checkbox-button__inner:hover {
color: #409EFF; }
.o-checkbox-button__inner [class*=el-icon-] {
line-height: .9; }
.o-checkbox-button__inner [class*=el-icon-] + span {
margin-left: 5px; }
.o-checkbox-button__original {
opacity: 0;
outline: 0;
position: absolute;
margin: 0;
z-index: -1; }
.o-checkbox-button.is-checked .o-checkbox-button__inner {
color: #FFF;
background-color: #409EFF;
border-color: #409EFF;
-webkit-box-shadow: -1px 0 0 0 #8cc5ff;
box-shadow: -1px 0 0 0 #8cc5ff; }
.o-checkbox-button.is-checked:first-child .o-checkbox-button__inner {
border-left-color: #409EFF; }
.o-checkbox-button.is-disabled .o-checkbox-button__inner {
color: #C0C4CC;
cursor: not-allowed;
background-image: none;
background-color: #FFF;
border-color: #EBEEF5;
-webkit-box-shadow: none;
box-shadow: none; }
.o-checkbox-button.is-disabled:first-child .o-checkbox-button__inner {
border-left-color: #EBEEF5; }
.o-checkbox-button:first-child .o-checkbox-button__inner {
border-left: 1px solid #DCDFE6;
border-radius: 4px 0 0 4px;
-webkit-box-shadow: none !important;
box-shadow: none !important; }
.o-checkbox-button.is-focus .o-checkbox-button__inner {
border-color: #409EFF; }
.o-checkbox-button:last-child .o-checkbox-button__inner {
border-radius: 0 4px 4px 0; }
.o-checkbox-button--medium .o-checkbox-button__inner {
padding: 10px 20px;
font-size: 14px;
border-radius: 0; }
.o-checkbox-button--medium .o-checkbox-button__inner.is-round {
padding: 10px 20px; }
.o-checkbox-button--small .o-checkbox-button__inner {
padding: 9px 15px;
font-size: 12px;
border-radius: 0; }
.o-checkbox-button--small .o-checkbox-button__inner.is-round {
padding: 9px 15px; }
.o-checkbox-button--mini .o-checkbox-button__inner {
padding: 7px 15px;
font-size: 12px;
border-radius: 0; }
.o-checkbox-button--mini .o-checkbox-button__inner.is-round {
padding: 7px 15px; }
.o-checkbox-group {
font-size: 0; }
.o-tree {
position: relative;
cursor: default;
background: #FFF;
color: #606266; }
.o-tree__empty-block {
position: relative;
min-height: 60px;
text-align: center;
width: 100%;
height: 100%; }
.o-tree__empty-text {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #909399;
font-size: 14px; }
.o-tree__drop-indicator {
position: absolute;
left: 0;
right: 0;
height: 1px;
background-color: #409EFF; }
.o-tree-node {
white-space: nowrap;
outline: 0;
position: relative;
display: block; }
.o-tree-node:focus > .o-tree-node__content {
background-color: #F5F7FA; }
.o-tree-node.is-drop-inner > .o-tree-node__content .o-tree-node__label {
background-color: #409EFF;
color: #fff; }
.o-tree-node__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 26px;
cursor: pointer; }
.o-tree-node__content > .o-tree-node__expand-icon {
padding: 6px; }
.o-tree-node__content > label.o-checkbox {
margin-right: 8px; }
.o-tree-node__content:hover {
background-color: #F5F7FA; }
.o-tree.is-dragging .o-tree-node__content {
cursor: move; }
.o-tree.is-dragging .o-tree-node__content * {
pointer-events: none; }
.o-tree.is-dragging.is-drop-not-allow .o-tree-node__content {
cursor: not-allowed; }
.o-tree-node__expand-icon {
cursor: pointer;
color: #C0C4CC;
font-size: 12px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
.o-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
.o-tree-node__expand-icon.is-leaf {
color: transparent;
cursor: default;
width: 12px;
height: 12px; }
.o-tree-node__label {
font-size: 14px; }
.o-tree-node__loading-icon {
margin-right: 8px;
font-size: 14px;
color: #C0C4CC; }
.o-tree-node > .o-tree-node__children {
overflow: hidden;
background-color: transparent; }
.o-tree-node.is-expanded > .o-tree-node__children {
display: block; }
.o-tree-node.is-current-blur > .o-tree-node__content {
background-color: rgba(0, 0, 0, 0.1); }
.o-tree-node.is-current > .o-tree-node__content {
background-color: rgba(7, 193, 96, 0.241);
background-color: var(--o-primary-fade-more, rgba(7, 193, 96, 0.241)); }
.sign {
position: absolute;
font-size: 10px;
top: 4px;
right: 4px; }
.action-icons {
position: absolute;
font-size: 10px;
top: 4px;
right: 4px; }
.action-icon {
display: inline-block;
font-size: 15px;
margin-left: 15px;
cursor: pointer; }
.edit-input {
width: 100%; }
.o-tree-node__label {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 32px; }
.o-tree-node__label.is-editing {
text-overflow: unset; }
a,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: inherit; }
a {
display: block; }
`
var Tree = /** @class */ (function (_super) {
__extends(Tree, _super);
function Tree() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onNodeClick = function (node) {
node.expanded = !node.expanded;
if (_this.prevSelectedNode) {
_this.prevSelectedNode.selected = false;
}
// if (this.prevBlurSelectedNode) {
// this.prevBlurSelectedNode.selectedBlur = false
// }
node.selected = true;
_this.forceUpdate();
_this.fire('node-click', node);
};
_this.onNodeArrowClick = function (node) {
_this.fire('node-arrow-click', node);
_this.fire('node-click', node);
};
_this.onContextMenu = function (evt, node) {
evt.stopPropagation();
evt.preventDefault();
_this.fire('context-menu', {
evt: evt,
node: node
});
};
_this.onActionIcon = function (evt, icon) {
evt.stopPropagation();
_this.fire('action-icon-click', icon);
};
_this.onEditInputBlur = function () {
//这个if防止 enter 和这失去焦点冲突
if (_this.prevSelectedNode.editing) {
_this.prevSelectedNode.editing = false;
_this.forceUpdate();
}
};
_this.onEditInputChange = function (evt) {
_this.prevSelectedNode.label = evt.target.value;
_this.forceUpdate();
};
return _this;
}
Tree.prototype.fold = function () {
var _this = this;
this.props.data.forEach(function (node) {
_this._fold(node);
});
this.forceUpdate();
this.fire('fold');
};
Tree.prototype._fold = function (node) {
var _this = this;
node.expanded = false;
if (node.children) {
node.children.forEach(function (child) {
_this._fold(child);
});
}
};
Tree.prototype.installed = function () {
// window.addEventListener('click', (evt) => {
// this.prevSelectedNode.selected = false
// this.prevSelectedNode.selectedBlur = true
// this.prevBlurSelectedNode = this.prevSelectedNode
// this.prevSelectedNode = null
// this.forceUpdate()
// })
// window.addEventListener('keydown', (evt) => {
// //enter
// if (evt.keyCode === 13) {
// if (this.prevSelectedNode) {
// if (this.prevSelectedNode.editing) {
// this.prevSelectedNode.editing = false
// this.prevSelectedNode.label = this.editInput.value
// //防止这个错误 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?
// this.editInput.blur()
// this.forceUpdate()
// } else {
// this.prevSelectedNode.editing = true
// this.forceUpdate()
// this.editInput.focus()
// }
// }
// }
// })
};
Tree.prototype.isURL = function (str) {
return str.indexOf('http') === 0 || str.indexOf('//') === 0;
};
Tree.prototype.renderNode = function (node, level) {
var _this = this;
if (node.selected) {
this.prevSelectedNode = node;
}
this._tempTagName = 'o-icon-' + node.icon;
this._nodeTagName = node.href ? 'a' : 'div';
return (h(this._nodeTagName, __assign({ href: node.href, target: node.target, role: "treeitem", onContextMenu: function (evt) { _this.onContextMenu(evt, node); }, onClick: function (evt) {
evt.stopPropagation();
if (!(node.href && _this.isURL(node.href))) {
_this.onNodeClick(node);
}
} }, extractClass({}, 'o-tree-node', {
'is-expanded': node.expanded,
'is-current': node.selected,
})),
h("div", { class: "o-tree-node__content", style: "padding-left: " + level * this.props.padding + "px;" },
(node.children && node.children.length > 0) ? h("svg", __assign({ onClick: function (_) { return _this.onNodeArrowClick(node); }, viewBox: "0 0 1024 1024" }, extractClass({}, 'o-tree-node__expand-icon', {
'expanded': node.expanded,
}), { "data-icon": "caret-down", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", focusable: "false" }),
h("path", { d: "M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z" })) : h("span", { class: "is-leaf o-tree-node__expand-icon" }),
h("span", __assign({ style: node.color && { color: node.color } }, extractClass({}, 'o-tree-node__label', {
'is-editing': node.editing
})),
node.icon && h(this._tempTagName, null),
node.editing ? h("input", { value: node.label, onChange: this.onEditInputChange, onBlur: this.onEditInputBlur, ref: function (_) { return _this.editInput = _; }, class: "edit-input", onClick: function (evt) { return evt.stopPropagation(); } }) : node.label)),
node.expanded && node.children && node.children.length > 0 && h("div", { role: "group", class: "o-tree-node__children", style: "", "aria-expanded": "true", "data-old-padding-top": "", "data-old-padding-bottom": "", "data-old-overflow": "" }, node.children.map(function (child) {
return _this.renderNode(child, level + 1);
})),
(!node.editing && node.actionIcons) &&
h("div", { class: "action-icons" }, node.actionIcons.map(function (actionIcon) {
_this._tempTagName = 'o-icon-' + actionIcon;
return h(_this._tempTagName, { onclick: function (_) { return _this.onActionIcon(_, actionIcon); }, class: "action-icon" });
})),
(!node.editing && node.sign) && h("span", { style: node.color && { color: node.color }, class: "sign" }, node.sign)));
};
Tree.prototype.render = function (props) {
var _this = this;
return (h("div", { role: "tree", class: "o-tree" }, props.data.map(function (node) {
return _this.renderNode(node, 0);
})));
};
Tree.css = css;
Tree.defaultProps = {
padding: 10
};
Tree.propTypes = {
data: Array,
padding: Number
};
Tree = __decorate([
tag('o-tree')
], Tree);
return Tree;
}(WeElement));
export default Tree;
//# sourceMappingURL=index.esm.js.map

1
components/tree/src/index.esm.js.map
View File

File diff suppressed because one or more lines are too long

431
components/tree/src/index.js
View File

File diff suppressed because one or more lines are too long

1
components/tree/src/index.js.map
View File

File diff suppressed because one or more lines are too long

355
components/tree/src/index.scss
View File

@ -1,10 +1,9 @@
@import "@omiu/common/theme.scss";
@import '../../common/theme.scss';
:host {
display: block;
}
.o-fade-in-enter,
.o-fade-in-leave-active,
.o-fade-in-linear-enter,
@ -13,44 +12,44 @@
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
opacity: 0
opacity: 0;
}
.o-checkbox,
.o-checkbox__input {
display: inline-block;
position: relative
position: relative;
}
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.o-fade-in-linear-enter-active,
.o-fade-in-linear-leave-active {
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.o-fade-in-enter-active,
.o-fade-in-leave-active {
-webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
transition: all .3s cubic-bezier(.55, 0, .1, 1)
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.o-zoom-in-center-enter-active,
.o-zoom-in-center-leave-active {
-webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
transition: all .3s cubic-bezier(.55, 0, .1, 1)
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.o-zoom-in-center-enter,
.o-zoom-in-center-leave-active {
opacity: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0)
transform: scaleX(0);
}
.o-zoom-in-top-enter-active,
@ -58,19 +57,24 @@
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center top;
transform-origin: center top
transform-origin: center top;
}
.o-zoom-in-top-enter,
.o-zoom-in-top-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0)
transform: scaleY(0);
}
.o-zoom-in-bottom-enter-active,
@ -78,19 +82,24 @@
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom
transform-origin: center bottom;
}
.o-zoom-in-bottom-enter,
.o-zoom-in-bottom-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0)
transform: scaleY(0);
}
.o-zoom-in-left-enter-active,
@ -98,47 +107,56 @@
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: top left;
transform-origin: top left
transform-origin: top left;
}
.o-zoom-in-left-enter,
.o-zoom-in-left-leave-active {
opacity: 0;
-webkit-transform: scale(.45, .45);
transform: scale(.45, .45)
-webkit-transform: scale(0.45, 0.45);
transform: scale(0.45, 0.45);
}
.collapse-transition {
-webkit-transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out;
transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out
-webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
0.3s padding-bottom ease-in-out;
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
0.3s padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
-webkit-transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out;
transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out
-webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
0.3s padding-right ease-in-out;
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
0.3s padding-right ease-in-out;
}
.o-list-enter-active,
.o-list-leave-active {
-webkit-transition: all 1s;
transition: all 1s
transition: all 1s;
}
.o-list-enter,
.o-list-leave-active {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px)
transform: translateY(-30px);
}
.o-opacity-transition {
-webkit-transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
transition: opacity .3s cubic-bezier(.55, 0, .1, 1)
-webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.o-checkbox {
@ -151,78 +169,78 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 30px
margin-right: 30px;
}
.o-checkbox.is-bordered {
padding: 9px 20px 9px 10px;
border-radius: 4px;
border: 1px solid #DCDFE6;
border: 1px solid #dcdfe6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: normal;
height: 40px
height: 40px;
}
.o-checkbox.is-bordered.is-checked {
border-color: #409EFF
border-color: #409eff;
}
.o-checkbox.is-bordered.is-disabled {
border-color: #EBEEF5;
cursor: not-allowed
border-color: #ebeef5;
cursor: not-allowed;
}
.o-checkbox.is-bordered+.o-checkbox.is-bordered {
margin-left: 10px
.o-checkbox.is-bordered + .o-checkbox.is-bordered {
margin-left: 10px;
}
.o-checkbox.is-bordered.o-checkbox--medium {
padding: 7px 20px 7px 10px;
border-radius: 4px;
height: 36px
height: 36px;
}
.o-checkbox.is-bordered.o-checkbox--medium .o-checkbox__label {
line-height: 17px;
font-size: 14px
font-size: 14px;
}
.o-checkbox.is-bordered.o-checkbox--medium .o-checkbox__inner {
height: 14px;
width: 14px
width: 14px;
}
.o-checkbox.is-bordered.o-checkbox--small {
padding: 5px 15px 5px 10px;
border-radius: 3px;
height: 32px
height: 32px;
}
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__label {
line-height: 15px;
font-size: 12px
font-size: 12px;
}
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__inner {
height: 12px;
width: 12px
width: 12px;
}
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__inner::after {
height: 6px;
width: 2px
width: 2px;
}
.o-checkbox.is-bordered.o-checkbox--mini {
padding: 3px 15px 3px 10px;
border-radius: 3px;
height: 28px
height: 28px;
}
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__label {
line-height: 12px;
font-size: 12px
font-size: 12px;
}
.o-checkbox-button__inner,
@ -230,122 +248,124 @@
line-height: 1;
vertical-align: middle;
white-space: nowrap;
outline: 0
outline: 0;
}
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__inner {
height: 12px;
width: 12px
width: 12px;
}
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__inner::after {
height: 6px;
width: 2px
width: 2px;
}
.o-checkbox__input {
cursor: pointer
cursor: pointer;
}
.o-checkbox__input.is-disabled .o-checkbox__inner {
background-color: #edf2fc;
border-color: #DCDFE6;
cursor: not-allowed
border-color: #dcdfe6;
cursor: not-allowed;
}
.o-checkbox__input.is-disabled .o-checkbox__inner::after {
cursor: not-allowed;
border-color: #C0C4CC
border-color: #c0c4cc;
}
.o-checkbox__input.is-disabled .o-checkbox__inner+.o-checkbox__label {
cursor: not-allowed
.o-checkbox__input.is-disabled .o-checkbox__inner + .o-checkbox__label {
cursor: not-allowed;
}
.o-checkbox__input.is-disabled.is-checked .o-checkbox__inner {
background-color: #F2F6FC;
border-color: #DCDFE6
background-color: #f2f6fc;
border-color: #dcdfe6;
}
.o-checkbox__input.is-disabled.is-checked .o-checkbox__inner::after {
border-color: #C0C4CC
border-color: #c0c4cc;
}
.o-checkbox__input.is-disabled.is-indeterminate .o-checkbox__inner {
background-color: #F2F6FC;
border-color: #DCDFE6
background-color: #f2f6fc;
border-color: #dcdfe6;
}
.o-checkbox__input.is-disabled.is-indeterminate .o-checkbox__inner::before {
background-color: #C0C4CC;
border-color: #C0C4CC
background-color: #c0c4cc;
border-color: #c0c4cc;
}
.o-checkbox__input.is-checked .o-checkbox__inner,
.o-checkbox__input.is-indeterminate .o-checkbox__inner {
background-color: #409EFF;
border-color: #409EFF
background-color: #409eff;
border-color: #409eff;
}
.o-checkbox__input.is-disabled+span.o-checkbox__label {
color: #C0C4CC;
cursor: not-allowed
.o-checkbox__input.is-disabled + span.o-checkbox__label {
color: #c0c4cc;
cursor: not-allowed;
}
.o-checkbox__input.is-checked .o-checkbox__inner::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1)
transform: rotate(45deg) scaleY(1);
}
.o-checkbox__input.is-checked+.o-checkbox__label {
color: #409EFF
.o-checkbox__input.is-checked + .o-checkbox__label {
color: #409eff;
}
.o-checkbox__input.is-focus .o-checkbox__inner {
border-color: #409EFF
border-color: #409eff;
}
.o-checkbox__input.is-indeterminate .o-checkbox__inner::before {
content: '';
position: absolute;
display: block;
background-color: #FFF;
background-color: #fff;
height: 2px;
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
left: 0;
right: 0;
top: 5px
top: 5px;
}
.o-checkbox__input.is-indeterminate .o-checkbox__inner::after {
display: none
display: none;
}
.o-checkbox__inner {
display: inline-block;
position: relative;
border: 1px solid #DCDFE6;
border: 1px solid #dcdfe6;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
background-color: #FFF;
background-color: #fff;
z-index: 1;
-webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46)
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
.o-checkbox__inner:hover {
border-color: #409EFF
border-color: #409eff;
}
.o-checkbox__inner::after {
-webkit-box-sizing: content-box;
box-sizing: content-box;
content: "";
border: 1px solid #FFF;
content: '';
border: 1px solid #fff;
border-left: 0;
border-top: 0;
height: 7px;
@ -355,12 +375,13 @@
-webkit-transform: rotate(45deg) scaleY(0);
transform: rotate(45deg) scaleY(0);
width: 3px;
-webkit-transition: -webkit-transform .15s ease-in .05s;
transition: -webkit-transform .15s ease-in .05s;
transition: transform .15s ease-in .05s;
transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
-webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
transition: -webkit-transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s,
-webkit-transform 0.15s ease-in 0.05s;
-webkit-transform-origin: center;
transform-origin: center
transform-origin: center;
}
.o-checkbox__original {
@ -370,31 +391,31 @@
margin: 0;
width: 0;
height: 0;
z-index: -1
z-index: -1;
}
.o-checkbox-button,
.o-checkbox-button__inner {
display: inline-block;
position: relative
position: relative;
}
.o-checkbox__label {
display: inline-block;
padding-left: 10px;
line-height: 19px;
font-size: 14px
font-size: 14px;
}
.o-checkbox:last-of-type {
margin-right: 0
margin-right: 0;
}
.o-checkbox-button__inner {
font-weight: 500;
cursor: pointer;
background: #FFF;
border: 1px solid #DCDFE6;
background: #fff;
border: 1px solid #dcdfe6;
border-left: 0;
color: #606266;
-webkit-appearance: none;
@ -402,30 +423,30 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 0
border-radius: 0;
}
.o-checkbox-button__inner.is-round {
padding: 12px 20px
padding: 12px 20px;
}
.o-checkbox-button__inner:hover {
color: #409EFF
color: #409eff;
}
.o-checkbox-button__inner [class*=el-icon-] {
line-height: .9
.o-checkbox-button__inner [class*='el-icon-'] {
line-height: 0.9;
}
.o-checkbox-button__inner [class*=el-icon-]+span {
margin-left: 5px
.o-checkbox-button__inner [class*='el-icon-'] + span {
margin-left: 5px;
}
.o-checkbox-button__original {
@ -433,89 +454,89 @@
outline: 0;
position: absolute;
margin: 0;
z-index: -1
z-index: -1;
}
.o-checkbox-button.is-checked .o-checkbox-button__inner {
color: #FFF;
background-color: #409EFF;
border-color: #409EFF;
color: #fff;
background-color: #409eff;
border-color: #409eff;
-webkit-box-shadow: -1px 0 0 0 #8cc5ff;
box-shadow: -1px 0 0 0 #8cc5ff
box-shadow: -1px 0 0 0 #8cc5ff;
}
.o-checkbox-button.is-checked:first-child .o-checkbox-button__inner {
border-left-color: #409EFF
border-left-color: #409eff;
}
.o-checkbox-button.is-disabled .o-checkbox-button__inner {
color: #C0C4CC;
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #FFF;
border-color: #EBEEF5;
background-color: #fff;
border-color: #ebeef5;
-webkit-box-shadow: none;
box-shadow: none
box-shadow: none;
}
.o-checkbox-button.is-disabled:first-child .o-checkbox-button__inner {
border-left-color: #EBEEF5
border-left-color: #ebeef5;
}
.o-checkbox-button:first-child .o-checkbox-button__inner {
border-left: 1px solid #DCDFE6;
border-left: 1px solid #dcdfe6;
border-radius: 4px 0 0 4px;
-webkit-box-shadow: none !important;
box-shadow: none !important
box-shadow: none !important;
}
.o-checkbox-button.is-focus .o-checkbox-button__inner {
border-color: #409EFF
border-color: #409eff;
}
.o-checkbox-button:last-child .o-checkbox-button__inner {
border-radius: 0 4px 4px 0
border-radius: 0 4px 4px 0;
}
.o-checkbox-button--medium .o-checkbox-button__inner {
padding: 10px 20px;
font-size: 14px;
border-radius: 0
border-radius: 0;
}
.o-checkbox-button--medium .o-checkbox-button__inner.is-round {
padding: 10px 20px
padding: 10px 20px;
}
.o-checkbox-button--small .o-checkbox-button__inner {
padding: 9px 15px;
font-size: 12px;
border-radius: 0
border-radius: 0;
}
.o-checkbox-button--small .o-checkbox-button__inner.is-round {
padding: 9px 15px
padding: 9px 15px;
}
.o-checkbox-button--mini .o-checkbox-button__inner {
padding: 7px 15px;
font-size: 12px;
border-radius: 0
border-radius: 0;
}
.o-checkbox-button--mini .o-checkbox-button__inner.is-round {
padding: 7px 15px
padding: 7px 15px;
}
.o-checkbox-group {
font-size: 0
font-size: 0;
}
.o-tree {
position: relative;
cursor: default;
background: #FFF;
color: #606266
background: #fff;
color: #606266;
}
.o-tree__empty-block {
@ -523,7 +544,7 @@
min-height: 60px;
text-align: center;
width: 100%;
height: 100%
height: 100%;
}
.o-tree__empty-text {
@ -533,7 +554,7 @@
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #909399;
font-size: 14px
font-size: 14px;
}
.o-tree__drop-indicator {
@ -541,7 +562,7 @@
left: 0;
right: 0;
height: 1px;
background-color: #409EFF
background-color: #409eff;
}
.o-tree-node {
@ -551,13 +572,13 @@
display: block;
}
.o-tree-node:focus>.o-tree-node__content {
background-color: #F5F7FA
.o-tree-node:focus > .o-tree-node__content {
background-color: #f5f7fa;
}
.o-tree-node.is-drop-inner>.o-tree-node__content .o-tree-node__label {
background-color: #409EFF;
color: #fff
.o-tree-node.is-drop-inner > .o-tree-node__content .o-tree-node__label {
background-color: #409eff;
color: #fff;
}
.o-tree-node__content {
@ -568,36 +589,36 @@
-ms-flex-align: center;
align-items: center;
height: 26px;
cursor: pointer
cursor: pointer;
}
.o-tree-node__content>.o-tree-node__expand-icon {
padding: 6px
.o-tree-node__content > .o-tree-node__expand-icon {
padding: 6px;
}
.o-tree-node__content>label.o-checkbox {
margin-right: 8px
.o-tree-node__content > label.o-checkbox {
margin-right: 8px;
}
.o-tree-node__content:hover {
background-color: #F5F7FA
background-color: #f5f7fa;
}
.o-tree.is-dragging .o-tree-node__content {
cursor: move
cursor: move;
}
.o-tree.is-dragging .o-tree-node__content * {
pointer-events: none
pointer-events: none;
}
.o-tree.is-dragging.is-drop-not-allow .o-tree-node__content {
cursor: not-allowed
cursor: not-allowed;
}
.o-tree-node__expand-icon {
cursor: pointer;
color: #C0C4CC;
color: #c0c4cc;
font-size: 12px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
@ -609,7 +630,7 @@
.o-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
transform: rotate(0deg);
}
.o-tree-node__expand-icon.is-leaf {
@ -620,29 +641,29 @@
}
.o-tree-node__label {
font-size: 14px
font-size: 14px;
}
.o-tree-node__loading-icon {
margin-right: 8px;
font-size: 14px;
color: #C0C4CC
color: #c0c4cc;
}
.o-tree-node>.o-tree-node__children {
.o-tree-node > .o-tree-node__children {
overflow: hidden;
background-color: transparent
background-color: transparent;
}
.o-tree-node.is-expanded>.o-tree-node__children {
display: block
.o-tree-node.is-expanded > .o-tree-node__children {
display: block;
}
.o-tree-node.is-current-blur>.o-tree-node__content {
background-color: rgba(0, 0, 0, .1)
.o-tree-node.is-current-blur > .o-tree-node__content {
background-color: rgba(0, 0, 0, 0.1);
}
.o-tree-node.is-current>.o-tree-node__content {
.o-tree-node.is-current > .o-tree-node__content {
background-color: $o-primary-fade-more;
background-color: var(--o-primary-fade-more, $o-primary-fade-more);
}
@ -654,7 +675,6 @@
right: 4px;
}
.action-icons {
position: absolute;
font-size: 10px;
@ -669,7 +689,6 @@
cursor: pointer;
}
.edit-input {
width: 100%;
}

143
components/tree/src/index.tsx
View File

@ -6,11 +6,9 @@ interface Props {
padding: number
}
@tag('o-tree')
export default class Tree extends WeElement<Props>{
static css = css
export default class Tree extends WeElement<Props> {
static css = css.default ? css.default : css
static defaultProps = {
padding: 10
@ -57,7 +55,7 @@ export default class Tree extends WeElement<Props>{
}
fold() {
this.props.data.forEach(node => {
this.props.data.forEach((node) => {
this._fold(node)
})
@ -69,7 +67,7 @@ export default class Tree extends WeElement<Props>{
_fold(node) {
node.expanded = false
if (node.children) {
node.children.forEach(child => {
node.children.forEach((child) => {
this._fold(child)
})
}
@ -92,35 +90,26 @@ export default class Tree extends WeElement<Props>{
prevBlurSelectedNode
installed() {
// window.addEventListener('click', (evt) => {
// this.prevSelectedNode.selected = false
// this.prevSelectedNode.selectedBlur = true
// this.prevBlurSelectedNode = this.prevSelectedNode
// this.prevSelectedNode = null
// this.forceUpdate()
// })
// window.addEventListener('keydown', (evt) => {
// //enter
// if (evt.keyCode === 13) {
// if (this.prevSelectedNode) {
// if (this.prevSelectedNode.editing) {
// this.prevSelectedNode.editing = false
// this.prevSelectedNode.label = this.editInput.value
// //防止这个错误 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?
// this.editInput.blur()
// this.forceUpdate()
// } else {
// this.prevSelectedNode.editing = true
// this.forceUpdate()
// this.editInput.focus()
// }
// }
@ -141,52 +130,110 @@ export default class Tree extends WeElement<Props>{
this._tempTagName = 'o-icon-' + node.icon
this._nodeTagName = node.href ? 'a' : 'div'
return (
<this._nodeTagName href={node.href} target={node.target} role="treeitem" onContextMenu={(evt) => { this.onContextMenu(evt, node) }} onClick={(evt) => {
evt.stopPropagation()
if (!(node.href && this.isURL(node.href))) {
this.onNodeClick(node)
}
}}
<this._nodeTagName
href={node.href}
target={node.target}
role="treeitem"
onContextMenu={(evt) => {
this.onContextMenu(evt, node)
}}
onClick={(evt) => {
evt.stopPropagation()
if (!(node.href && this.isURL(node.href))) {
this.onNodeClick(node)
}
}}
{...extractClass({}, 'o-tree-node', {
'is-expanded': node.expanded,
'is-current': node.selected,
'is-current': node.selected
//'is-current-blur': node.selectedBlur
})}>
<div class="o-tree-node__content" style={`padding-left: ${level * this.props.padding}px;`}>
{(node.children && node.children.length > 0) ? <svg onClick={_ => this.onNodeArrowClick(node)} viewBox="0 0 1024 1024" {...extractClass({}, 'o-tree-node__expand-icon', {
'expanded': node.expanded,
})} data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
</svg> : <span class="is-leaf o-tree-node__expand-icon"></span>}
<span style={node.color && { color: node.color }} {...extractClass({}, 'o-tree-node__label', {
'is-editing': node.editing
})} >{node.icon && <this._tempTagName />}
{node.editing ? <input value={node.label} onChange={this.onEditInputChange} onBlur={this.onEditInputBlur} ref={_ => this.editInput = _} class="edit-input" onClick={evt => evt.stopPropagation()} /> : node.label}</span>
})}
>
<div
class="o-tree-node__content"
style={`padding-left: ${level * this.props.padding}px;`}
>
{node.children && node.children.length > 0 ? (
<svg
onClick={(_) => this.onNodeArrowClick(node)}
viewBox="0 0 1024 1024"
{...extractClass({}, 'o-tree-node__expand-icon', {
expanded: node.expanded
})}
data-icon="caret-down"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
focusable="false"
>
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
</svg>
) : (
<span class="is-leaf o-tree-node__expand-icon"></span>
)}
<span
style={node.color && { color: node.color }}
{...extractClass({}, 'o-tree-node__label', {
'is-editing': node.editing
})}
>
{node.icon && <this._tempTagName />}
{node.editing ? (
<input
value={node.label}
onChange={this.onEditInputChange}
onBlur={this.onEditInputBlur}
ref={(_) => (this.editInput = _)}
class="edit-input"
onClick={(evt) => evt.stopPropagation()}
/>
) : (
node.label
)}
</span>
</div>
{node.expanded && node.children && node.children.length > 0 && <div role="group" class="o-tree-node__children" style="" aria-expanded="true" data-old-padding-top="" data-old-padding-bottom="" data-old-overflow="">
{node.children.map(child => {
return this.renderNode(child, level + 1)
})}
</div>}
{
(!node.editing && node.actionIcons) &&
<div class="action-icons">
{node.actionIcons.map(actionIcon => {
this._tempTagName = 'o-icon-' + actionIcon
return <this._tempTagName onclick={_ => this.onActionIcon(_, actionIcon)} class="action-icon" />
{node.expanded && node.children && node.children.length > 0 && (
<div
role="group"
class="o-tree-node__children"
style=""
aria-expanded="true"
data-old-padding-top=""
data-old-padding-bottom=""
data-old-overflow=""
>
{node.children.map((child) => {
return this.renderNode(child, level + 1)
})}
</div>
}
{(!node.editing && node.sign) && <span style={node.color && { color: node.color }} class="sign">{node.sign}</span>}
)}
{!node.editing && node.actionIcons && (
<div class="action-icons">
{node.actionIcons.map((actionIcon) => {
this._tempTagName = 'o-icon-' + actionIcon
return (
<this._tempTagName
onclick={(_) => this.onActionIcon(_, actionIcon)}
class="action-icon"
/>
)
})}
</div>
)}
{!node.editing && node.sign && (
<span style={node.color && { color: node.color }} class="sign">
{node.sign}
</span>
)}
</this._nodeTagName>
)
}
render(props) {
return (
<div role="tree" class="o-tree">
{props.data.map(node => {
{props.data.map((node) => {
return this.renderNode(node, 0)
})}
</div>

24
components/tree/vite.config.ts Normal file
View File

@ -0,0 +1,24 @@
import { resolve } from 'path'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.tsx'),
name: 'index',
formats: ['es'],
fileName: (format) => `index.${format}.js`,
},
rollupOptions: {
external: /^omi/,
input: {
main: resolve(__dirname, 'index.html'),
},
},
},
esbuild: {
jsxFactory: 'h',
jsxFragment: 'h.f',
},
})

9897
components/tree/yarn.lock
View File

File diff suppressed because it is too large Load Diff