Compare commits
13 Commits
Author | SHA1 | Date | |
---|---|---|---|
![]() |
57be520b99 | ||
![]() |
7b70e8dbf2 | ||
![]() |
b9402076ec | ||
![]() |
669e84fdc5 | ||
![]() |
146b61e70d | ||
![]() |
b3e238208b | ||
![]() |
4b8bbcbfde | ||
![]() |
0723294c7b | ||
![]() |
22988f0c81 | ||
![]() |
c46c570c30 | ||
![]() |
cfe90c7f81 | ||
![]() |
7e0184f7f5 | ||
![]() |
a78ff3f904 |
10
.babelrc
10
.babelrc
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"presets": ["es2015", "stage-2"],
|
||||
"plugins": ["transform-runtime"],
|
||||
"comments": false,
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": [ "istanbul" ]
|
||||
}
|
||||
}
|
||||
}
|
22
.gitignore
vendored
22
.gitignore
vendored
@@ -1,5 +1,21 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
npm-debug.log
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
coverage
|
||||
package-lock.json
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
@@ -1,38 +0,0 @@
|
||||
var path = require('path')
|
||||
|
||||
var projectRoot = path.resolve(__dirname, '../')
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel',
|
||||
include: [path.join(projectRoot, 'src'), path.join(projectRoot, 'dev')],
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'fonts/[name].[hash:7].[ext]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
vue: {
|
||||
loaders: {
|
||||
less: 'vue-style!css!less'
|
||||
},
|
||||
postcss: [
|
||||
require('autoprefixer')({
|
||||
browsers: ['iOS >= 7', 'Android >= 4.1']
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
@@ -1,23 +0,0 @@
|
||||
var webpack = require('webpack')
|
||||
var merge = require('webpack-merge')
|
||||
var baseConfig = require('./webpack.base.conf')
|
||||
var path = require('path')
|
||||
|
||||
var projectRoot = path.resolve(__dirname, '../')
|
||||
|
||||
module.exports = merge(baseConfig, {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
path: path.resolve(projectRoot, 'dist'),
|
||||
filename: 'vue-tree-list.min.js',
|
||||
library: 'VueTreeList',
|
||||
libraryTarget: 'umd'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
@@ -1,25 +0,0 @@
|
||||
var webpack = require('webpack')
|
||||
var merge = require('webpack-merge')
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
var baseConfig = require('./webpack.base.conf')
|
||||
|
||||
module.exports = merge(baseConfig, {
|
||||
entry: './dev/index.js',
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true,
|
||||
overlay: true,
|
||||
open: true,
|
||||
hot: true,
|
||||
inline: true
|
||||
},
|
||||
devtool: '#eval-source-map',
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: './dev/index.html',
|
||||
filename: 'index.html',
|
||||
inject: true
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin()
|
||||
]
|
||||
})
|
14
dev/App.vue
14
dev/App.vue
@@ -13,10 +13,12 @@
|
||||
default-tree-node-name="new node"
|
||||
default-leaf-node-name="new leaf"
|
||||
v-bind:default-expanded="false">
|
||||
<span class="icon" slot="addTreeNode">addTreeNode</span>
|
||||
<span class="icon" slot="addLeafNode">addLeafNode</span>
|
||||
<span class="icon" slot="editNode">editNode</span>
|
||||
<span class="icon" slot="delNode">delNode</span>
|
||||
<span class="icon" slot="addTreeNodeIcon">📂</span>
|
||||
<span class="icon" slot="addLeafNodeIcon">+</span>
|
||||
<span class="icon" slot="editNodeIcon">📃</span>
|
||||
<span class="icon" slot="delNodeIcon">✂️</span>
|
||||
<span class="icon" slot="leafNodeIcon">🍃</span>
|
||||
<span class="icon" slot="treeNodeIcon">🌲</span>
|
||||
</vue-tree-list>
|
||||
<button @click="getNewTree">Get new tree</button>
|
||||
<pre>
|
||||
@@ -123,10 +125,6 @@
|
||||
}
|
||||
|
||||
vm.newTree = _dfs(vm.data)
|
||||
},
|
||||
|
||||
onClick(model) {
|
||||
console.log(model)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="with=device-width,initial-scale=1.0,
|
||||
maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
|
||||
<title>vue-tree-list</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
1
dist/vue-tree-list.min.js
vendored
1
dist/vue-tree-list.min.js
vendored
File diff suppressed because one or more lines are too long
4
jest.config.js
Normal file
4
jest.config.js
Normal file
@@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
preset: "@vue/cli-plugin-unit-jest",
|
||||
snapshotSerializers: ["jest-serializer-vue"]
|
||||
};
|
13806
package-lock.json
generated
Normal file
13806
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
125
package.json
125
package.json
@@ -1,68 +1,77 @@
|
||||
{
|
||||
"name": "vue-tree-list",
|
||||
"version": "1.3.2",
|
||||
"version": "1.4.1",
|
||||
"description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
|
||||
"main": "dist/vue-tree-list.min.js",
|
||||
"scripts": {
|
||||
"commit": "npx git-cz",
|
||||
"standard": "standard",
|
||||
"test": "karma start --single-run",
|
||||
"unit": "karma start --watch",
|
||||
"coveralls": "npm run test -- --report lcovonly && cat ./coverage/lcov.info | coveralls",
|
||||
"build": "webpack --config build/webpack.build.conf.js",
|
||||
"dev": "webpack-dev-server --config build/webpack.dev.conf.js",
|
||||
"prepublishOnly": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/ParadeTo/vue-tree-list.git"
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"tree"
|
||||
],
|
||||
"author": "ayou",
|
||||
"license": "ISC",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve dev",
|
||||
"build": "vue-cli-service build --target lib src/index.js",
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"lint": "vue-cli-service lint",
|
||||
"commit": "npx git-cz",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"main": "dist/vue-tree-list.umd.min.js",
|
||||
"dependencies": {
|
||||
"core-js": "^3.4.3",
|
||||
"vue": "^2.6.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.1.0",
|
||||
"@vue/cli-plugin-eslint": "^4.1.0",
|
||||
"@vue/cli-plugin-unit-jest": "^4.1.1",
|
||||
"@vue/cli-service": "^4.1.0",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"jest-serializer-vue": "^2.0.2",
|
||||
"less": "^3.10.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"rules": {
|
||||
"no-console": "warn"
|
||||
},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"**/__tests__/*.{j,t}s?(x)",
|
||||
"**/tests/unit/**/*.spec.{j,t}s?(x)"
|
||||
],
|
||||
"env": {
|
||||
"jest": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/ParadeTo/vue-tree-list/issues"
|
||||
},
|
||||
"homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^7.2.1",
|
||||
"@commitlint/config-conventional": "^7.1.2",
|
||||
"autoprefixer": "^6.4.0",
|
||||
"babel-core": "^6.0.0",
|
||||
"babel-eslint": "^7.0.0",
|
||||
"babel-loader": "^6.0.0",
|
||||
"babel-plugin-istanbul": "^3.0.0",
|
||||
"babel-plugin-transform-runtime": "^6.0.0",
|
||||
"babel-preset-es2015": "^6.0.0",
|
||||
"babel-preset-stage-2": "^6.0.0",
|
||||
"babel-register": "^6.0.0",
|
||||
"chai": "^3.5.0",
|
||||
"cross-env": "^5.0.1",
|
||||
"css-loader": "^0.26.2",
|
||||
"file-loader": "^0.10.1",
|
||||
"html-webpack-plugin": "^2.8.1",
|
||||
"husky": "^1.2.0",
|
||||
"isparta": "^4.0.0",
|
||||
"isparta-loader": "^2.0.0",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^2.2.3",
|
||||
"sinon": "^2.3.5",
|
||||
"sinon-chai": "^2.11.0",
|
||||
"sourcemap": "^0.1.0",
|
||||
"standard": "^12.0.1",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue": "^2.6.6",
|
||||
"vue-loader": "^11.1.3",
|
||||
"vue-style-loader": "^2.0.3",
|
||||
"vue-template-compiler": "^2.6.6",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-server": "1.14.0",
|
||||
"webpack-merge": "^0.14.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"cz-conventional-changelog": "^2.1.0"
|
||||
"keywords": [
|
||||
"vue",
|
||||
"tree"
|
||||
],
|
||||
"license": "ISC",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/ParadeTo/vue-tree-list.git"
|
||||
}
|
||||
}
|
||||
|
17
public/index.html
Normal file
17
public/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>vue-tree-list</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but vue-tree-list doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
26
readme.md
26
readme.md
@@ -8,7 +8,7 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
|
||||
# use
|
||||
``npm install vue-tree-list``
|
||||
|
||||
```javascript
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<button @click="addNode">Add Node</button>
|
||||
@@ -21,10 +21,12 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
|
||||
default-tree-node-name="new node"
|
||||
default-leaf-node-name="new leaf"
|
||||
v-bind:default-expanded="false">
|
||||
<span class="icon" slot="addTreeNode">addTreeNode</span>
|
||||
<span class="icon" slot="addLeafNode">addLeafNode</span>
|
||||
<span class="icon" slot="editNode">editNode</span>
|
||||
<span class="icon" slot="delNode">delNode</span>
|
||||
<span class="icon" slot="addTreeNodeIcon">📂</span>
|
||||
<span class="icon" slot="addLeafNodeIcon">+</span>
|
||||
<span class="icon" slot="editNodeIcon">📃</span>
|
||||
<span class="icon" slot="delNodeIcon">✂️</span>
|
||||
<span class="icon" slot="leafNodeIcon">🍃</span>
|
||||
<span class="icon" slot="treeNodeIcon">🌲</span>
|
||||
</vue-tree-list>
|
||||
<button @click="getNewTree">Get new tree</button>
|
||||
<pre>
|
||||
@@ -32,6 +34,7 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
|
||||
</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
|
||||
export default {
|
||||
@@ -124,6 +127,7 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" rel="stylesheet/less">
|
||||
.vtl {
|
||||
.vtl-drag-disabled {
|
||||
@@ -193,11 +197,13 @@ drop-before | {node, src, target} | Trigger after dropping a node before another
|
||||
drop-after | {node, src, target} | Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after
|
||||
|
||||
# customize operation icons
|
||||
The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:
|
||||
The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them:
|
||||
|
||||
```html
|
||||
<span class="icon" slot="addTreeNode">addTreeNode</span>
|
||||
<span class="icon" slot="addLeafNode">addLeafNode</span>
|
||||
<span class="icon" slot="editNode">editNode</span>
|
||||
<span class="icon" slot="delNode">delNode</span>
|
||||
<span class="icon" slot="addTreeNodeIcon">📂</span>
|
||||
<span class="icon" slot="addLeafNodeIcon">+</span>
|
||||
<span class="icon" slot="editNodeIcon">📃</span>
|
||||
<span class="icon" slot="delNodeIcon">✂️</span>
|
||||
<span class="icon" slot="leafNodeIcon">🍃</span>
|
||||
<span class="icon" slot="treeNodeIcon">🌲</span>
|
||||
```
|
||||
|
@@ -38,22 +38,22 @@
|
||||
<input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
|
||||
<div class="vtl-operation" v-show="isHover">
|
||||
<span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
|
||||
<slot name="addTreeNode">
|
||||
<slot name="addTreeNodeIcon">
|
||||
<i class="vtl-icon vtl-icon-folder-plus-e"></i>
|
||||
</slot>
|
||||
</span>
|
||||
<span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
|
||||
<slot name="addLeafNode">
|
||||
<slot name="addLeafNodeIcon">
|
||||
<i class="vtl-icon vtl-icon-plus"></i>
|
||||
</slot>
|
||||
</span>
|
||||
<span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
|
||||
<slot name="editNode">
|
||||
<slot name="editNodeIcon">
|
||||
<i class="vtl-icon vtl-icon-edit"></i>
|
||||
</slot>
|
||||
</span>
|
||||
<span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
|
||||
<slot name="delNode">
|
||||
<slot name="delNodeIcon">
|
||||
<i class="vtl-icon vtl-icon-trash"></i>
|
||||
</slot>
|
||||
</span>
|
||||
@@ -76,17 +76,19 @@
|
||||
v-bind:default-expanded="defaultExpanded"
|
||||
:model="model"
|
||||
:key='model.id'>
|
||||
<slot name="addTreeNode" slot="addTreeNode" />
|
||||
<slot name="addLeafNode" slot="addLeafNode" />
|
||||
<slot name="editNode" slot="editNode" />
|
||||
<slot name="delNode" slot="delNode" />
|
||||
<slot name="addTreeNodeIcon" slot="addTreeNodeIcon" />
|
||||
<slot name="addLeafNodeIcon" slot="addLeafNodeIcon" />
|
||||
<slot name="editNodeIcon" slot="editNodeIcon" />
|
||||
<slot name="delNodeIcon" slot="delNodeIcon" />
|
||||
<slot name="leafNodeIcon" slot="leafNodeIcon" />
|
||||
<slot name="treeNodeIcon" slot="treeNodeIcon" />
|
||||
</item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tree, TreeNode } from './Tree.js'
|
||||
import { TreeNode } from './Tree.js'
|
||||
import { addHandler, removeHandler } from './tools.js'
|
||||
|
||||
let compInOperation = null
|
||||
@@ -150,6 +152,9 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.$options.components.item = require('./VueTreeList').default
|
||||
},
|
||||
mounted () {
|
||||
const vm = this
|
||||
addHandler(window, 'keyup', function (e) {
|
||||
@@ -194,12 +199,12 @@
|
||||
}
|
||||
},
|
||||
|
||||
mouseOver(e) {
|
||||
mouseOver() {
|
||||
if (this.model.disabled) return
|
||||
this.isHover = true
|
||||
},
|
||||
|
||||
mouseOut(e) {
|
||||
mouseOut() {
|
||||
this.isHover = false
|
||||
},
|
||||
|
||||
@@ -227,22 +232,22 @@
|
||||
}
|
||||
return false
|
||||
},
|
||||
dragEnd(e) {
|
||||
dragEnd() {
|
||||
compInOperation = null
|
||||
},
|
||||
dragOver(e) {
|
||||
e.preventDefault()
|
||||
return true
|
||||
},
|
||||
dragEnter(e) {
|
||||
dragEnter() {
|
||||
if (!compInOperation) return
|
||||
if (this.model.isLeaf) return
|
||||
this.isDragEnterNode = true
|
||||
},
|
||||
dragLeave(e) {
|
||||
dragLeave() {
|
||||
this.isDragEnterNode = false
|
||||
},
|
||||
drop(e) {
|
||||
drop() {
|
||||
if (!compInOperation) return
|
||||
const oldParent = compInOperation.model.parent;
|
||||
compInOperation.model.moveInto(this.model)
|
||||
@@ -299,9 +304,6 @@
|
||||
}
|
||||
return node;
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.$options.components.item = require('./VueTreeList.vue')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Created by ayou on 17/7/21.
|
||||
*/
|
||||
exports.VueTreeList = require('./VueTreeList.vue')
|
||||
exports.TreeNode = require('./Tree.js').TreeNode
|
||||
exports.Tree = require('./Tree.js').Tree
|
||||
// exports.Record = require('./Tree.js').Record
|
||||
|
||||
import VueTreeList from "./VueTreeList";
|
||||
import { Tree, TreeNode } from "./Tree";
|
||||
|
||||
export { Tree, TreeNode, VueTreeList };
|
||||
|
72
tests/unit/__snapshots__/example.spec.js.snap
Normal file
72
tests/unit/__snapshots__/example.spec.js.snap
Normal file
@@ -0,0 +1,72 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`VueTreeList renders correctly 1`] = `
|
||||
<div class="vtl">
|
||||
<!---->
|
||||
<div class="">
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="1" draggable="false" class="vtl-tree-node vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl-tree-margin" style="display: none;">
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="2" draggable="true" class="vtl-tree-node">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1-2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!----> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="3" draggable="true" class="vtl-tree-node vtl-disabled">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="4" draggable="true" class="vtl-tree-node">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 3
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
49
tests/unit/example.spec.js
Normal file
49
tests/unit/example.spec.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import { mount } from "@vue/test-utils";
|
||||
import { Tree, VueTreeList } from "@/index";
|
||||
|
||||
describe("VueTreeList", () => {
|
||||
it("renders correctly", () => {
|
||||
const tree = new Tree([
|
||||
{
|
||||
name: "Node 1",
|
||||
id: 1,
|
||||
pid: 0,
|
||||
dragDisabled: true,
|
||||
addTreeNodeDisabled: true,
|
||||
addLeafNodeDisabled: true,
|
||||
editNodeDisabled: true,
|
||||
delNodeDisabled: true,
|
||||
children: [
|
||||
{
|
||||
name: "Node 1-2",
|
||||
id: 2,
|
||||
isLeaf: true,
|
||||
pid: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Node 2",
|
||||
id: 3,
|
||||
pid: 0,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: "Node 3",
|
||||
id: 4,
|
||||
pid: 0
|
||||
}
|
||||
]);
|
||||
|
||||
const wrapper = mount(VueTreeList, {
|
||||
propsData: {
|
||||
model: tree,
|
||||
defaultTreeNodeName: "new node",
|
||||
defaultLeafNodeName: "new leaf",
|
||||
defaultExpanded: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
Reference in New Issue
Block a user