chore: 🤖 add code format tool

feature-code-format
youxingzhi 3 years ago
parent 15f33d187d
commit d73b4c1829
  1. 29
      .eslintrc
  2. 3
      .huskyrc.yml
  3. 4
      babel.config.js
  4. 2144
      package-lock.json
  5. 35
      package.json
  6. 15
      prettier.config.js
  7. 6
      src/Tree.js
  8. 84
      src/VueTreeList.vue
  9. 12
      src/index.js
  10. 6
      src/tools.js
  11. 23
      tests/unit/drag.spec.js
  12. 10
      tests/unit/operation.spec.js
  13. 4
      tests/unit/render.spec.js
  14. 32
      tests/unit/slot.spec.js
  15. 2
      vue.config.js

@ -0,0 +1,29 @@
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"plugin:prettier/recommended",
"eslint:recommended"
],
"rules": {
"prettier/prettier": "error",
"no-console": "warn"
},
"parserOptions": {
"parser": "babel-eslint"
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
}

@ -1,4 +1,3 @@
hooks:
pre-commit:
- npm run standard
pre-commit: npm run lint-staged
commit-msg: commitlint -E HUSKY_GIT_PARAMS

@ -1,5 +1,3 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
presets: ['@vue/cli-plugin-babel/preset']
}

2144
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -9,6 +9,7 @@
"test:unit": "vue-cli-service test:unit --watch",
"test:coverage": "vue-cli-service test:unit --coverage",
"lint": "vue-cli-service lint",
"lint-staged": "lint-staged",
"commit": "npx git-cz",
"prepublish": "npm run build"
},
@ -23,38 +24,22 @@
"babel-eslint": "^10.0.3",
"core-js": "^3.4.3",
"eslint": "^5.16.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^5.0.0",
"husky": "^4.2.1",
"jest-serializer-vue": "^2.0.2",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"lint-staged": "^10.0.4",
"prettier": "^1.19.1",
"prettier-eslint-cli": "^5.0.0",
"vue": "^2.6.10",
"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
}
}
"lint-staged": {
"**/**.{js,json,pcss,md,vue}": [
"prettier --write"
]
},
"browserslist": [

@ -0,0 +1,15 @@
module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true,
jsxSingleQuote: true,
bracketSpacing: true,
jsxBracketSameLine: false,
rangeStart: 0,
rangeEnd: Infinity,
requirePragma: false,
insertPragma: false,
htmlWhitespaceSensitivity: 'css'
}

@ -1,4 +1,4 @@
import {traverseTree} from './tools'
import { traverseTree } from './tools'
/**
* Tree data struct
* Created by ayou on 2017/7/20.
@ -11,7 +11,7 @@ import {traverseTree} from './tools'
*/
export class TreeNode {
constructor(data) {
const {id, isLeaf} = data
const { id, isLeaf } = data
this.id = typeof id === 'undefined' ? new Date().valueOf() : id
this.parent = null
this.children = null
@ -149,7 +149,7 @@ export class TreeNode {
export class Tree {
constructor(data) {
this.root = new TreeNode({name: 'root', isLeaf: false, id: 0})
this.root = new TreeNode({ name: 'root', isLeaf: false, id: 0 })
this.initNode(this.root, data)
return this.root
}

@ -4,11 +4,11 @@
v-if="model.name !== 'root'"
:id="model.id"
class="vtl-node"
:class="{'vtl-leaf-node': model.isLeaf, 'vtl-tree-node': !model.isLeaf}"
:class="{ 'vtl-leaf-node': model.isLeaf, 'vtl-tree-node': !model.isLeaf }"
>
<div
class="vtl-border vtl-up"
:class="{'vtl-active': isDragEnterUp}"
:class="{ 'vtl-active': isDragEnterUp }"
@drop="dropBefore"
@dragenter="dragEnterUp"
@dragover="dragOverUp"
@ -27,34 +27,17 @@
@mouseout="mouseOut"
@click.stop="click"
>
<span
class="vtl-caret vtl-is-small"
v-if="model.children && model.children.length > 0"
>
<i
class="vtl-icon"
:class="caretClass"
@click.prevent.stop="toggle"
></i>
<span class="vtl-caret vtl-is-small" v-if="model.children && model.children.length > 0">
<i class="vtl-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
</span>
<span v-if="model.isLeaf">
<slot
name="leafNodeIcon"
:expanded="expanded"
:model="model"
:root="rootNode"
>
<slot name="leafNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
<i class="vtl-icon vtl-menu-icon vtl-icon-file"></i>
</slot>
</span>
<span v-else>
<slot
name="treeNodeIcon"
:expanded="expanded"
:model="model"
:root="rootNode"
>
<slot name="treeNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
<i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i>
</slot>
</span>
@ -77,12 +60,7 @@
@click.stop.prevent="addChild(false)"
v-if="!model.isLeaf && !model.addTreeNodeDisabled"
>
<slot
name="addTreeNodeIcon"
:expanded="expanded"
:model="model"
:root="rootNode"
>
<slot name="addTreeNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
<i class="vtl-icon vtl-icon-folder-plus-e"></i>
</slot>
</span>
@ -91,40 +69,17 @@
@click.stop.prevent="addChild(true)"
v-if="!model.isLeaf && !model.addLeafNodeDisabled"
>
<slot
name="addLeafNodeIcon"
:expanded="expanded"
:model="model"
:root="rootNode"
>
<slot name="addLeafNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
<i class="vtl-icon vtl-icon-plus"></i>
</slot>
</span>
<span
title="edit"
@click.stop.prevent="setEditable"
v-if="!model.editNodeDisabled"
>
<slot
name="editNodeIcon"
:expanded="expanded"
:model="model"
:root="rootNode"
>
<span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
<slot name="editNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
<i class="vtl-icon vtl-icon-edit"></i>
</slot>
</span>
<span
title="delete"
@click.stop.prevent="delNode"
v-if="!model.delNodeDisabled"
>
<slot
name="delNodeIcon"
:expanded="expanded"
:model="model"
:root="rootNode"
>
<span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
<slot name="delNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
<i class="vtl-icon vtl-icon-trash"></i>
</slot>
</span>
@ -134,7 +89,7 @@
<div
v-if="model.children && model.children.length > 0 && expanded"
class="vtl-border vtl-bottom"
:class="{'vtl-active': isDragEnterBottom}"
:class="{ 'vtl-active': isDragEnterBottom }"
@drop="dropAfter"
@dragenter="dragEnterBottom"
@dragover="dragOverBottom"
@ -143,7 +98,7 @@
</div>
<div
:class="{'vtl-tree-margin': model.name !== 'root'}"
:class="{ 'vtl-tree-margin': model.name !== 'root' }"
v-show="model.name === 'root' || expanded"
v-if="isFolder"
>
@ -179,8 +134,8 @@
</template>
<script>
import {TreeNode} from './Tree.js'
import {addHandler, removeHandler} from './tools.js'
import { TreeNode } from './Tree.js'
import { addHandler, removeHandler } from './tools.js'
let compInOperation = null
@ -232,7 +187,7 @@ export default {
treeNodeClass() {
const {
model: {dragDisabled, disabled},
model: { dragDisabled, disabled },
isDragEnterNode
} = this
@ -309,7 +264,7 @@ export default {
addChild(isLeaf) {
const name = isLeaf ? this.defaultLeafNodeName : this.defaultTreeNodeName
this.expanded = true
var node = new TreeNode({name, isLeaf})
var node = new TreeNode({ name, isLeaf })
this.model.addChildren(node, true)
this.rootNode.$emit('add-node', node)
},
@ -332,7 +287,8 @@ export default {
return true
},
dragEnter() {
if (compInOperation.model.id === this.model.id || !compInOperation || this.model.isLeaf) return
if (compInOperation.model.id === this.model.id || !compInOperation || this.model.isLeaf)
return
this.isDragEnterNode = true
},
dragLeave() {

@ -2,12 +2,12 @@
* Created by ayou on 17/7/21.
*/
import VueTreeList from "./VueTreeList";
import { Tree, TreeNode } from "./Tree";
import VueTreeList from './VueTreeList'
import { Tree, TreeNode } from './Tree'
VueTreeList.install = Vue => {
Vue.component(VueTreeList.name, VueTreeList);
};
Vue.component(VueTreeList.name, VueTreeList)
}
export default VueTreeList;
export { Tree, TreeNode, VueTreeList };
export default VueTreeList
export { Tree, TreeNode, VueTreeList }

@ -4,7 +4,7 @@
var handlerCache
export const addHandler = function (element, type, handler) {
export const addHandler = function(element, type, handler) {
handlerCache = handler
if (element.addEventListener) {
element.addEventListener(type, handler, false)
@ -15,7 +15,7 @@ export const addHandler = function (element, type, handler) {
}
}
export const removeHandler = function (element, type) {
export const removeHandler = function(element, type) {
if (element.removeEventListener) {
element.removeEventListener(type, handlerCache, false)
} else if (element.detachEvent) {
@ -26,7 +26,7 @@ export const removeHandler = function (element, type) {
}
// depth first search
export const traverseTree = (root) => {
export const traverseTree = root => {
var newRoot = {}
for (var k in root) {

@ -1,6 +1,6 @@
import Vue from 'vue'
import {mount} from '@vue/test-utils'
import {Tree, VueTreeList} from '@/index'
import { mount } from '@vue/test-utils'
import { Tree, VueTreeList } from '@/index'
describe('Drag', () => {
let wrapper
@ -36,14 +36,14 @@ describe('Drag', () => {
pid: 0
}
])
wrapper = mount(VueTreeList, {propsData: {model: new Tree([])}})
wrapper.setProps({model: tree})
wrapper = mount(VueTreeList, { propsData: { model: new Tree([]) } })
wrapper.setProps({ model: tree })
})
it('drag before', done => {
const $tree2 = wrapper.find('#t2 .vtl-node-main')
const $tree1Up = wrapper.find('#t1 .vtl-up')
$tree2.trigger('dragstart', { dataTransfer: { setData: () => {} }})
$tree2.trigger('dragstart', { dataTransfer: { setData: () => {} } })
$tree1Up.trigger('drop')
Vue.nextTick(() => {
expect(wrapper.find('.vtl-node').attributes('id')).toBe('t2')
@ -54,10 +54,15 @@ describe('Drag', () => {
it('drag after', done => {
const $tree3 = wrapper.find('#t3 .vtl-node-main')
const $tree1Bottom = wrapper.find('#t1 .vtl-bottom')
$tree3.trigger('dragstart', { dataTransfer: { setData: () => {} }})
$tree3.trigger('dragstart', { dataTransfer: { setData: () => {} } })
$tree1Bottom.trigger('drop')
Vue.nextTick(() => {
expect(wrapper.findAll('.vtl-tree-node').at(2).attributes('id')).toBe('t3')
expect(
wrapper
.findAll('.vtl-tree-node')
.at(2)
.attributes('id')
).toBe('t3')
done()
})
})
@ -65,7 +70,7 @@ describe('Drag', () => {
it('drag into', done => {
const $tree3 = wrapper.find('#t3 .vtl-node-main')
const $tree1 = wrapper.find('#t1 .vtl-node-main')
$tree3.trigger('dragstart', { dataTransfer: { setData: () => {} }})
$tree3.trigger('dragstart', { dataTransfer: { setData: () => {} } })
$tree1.trigger('drop')
Vue.nextTick(() => {
expect(wrapper.find('#t1 + .vtl-tree-margin .vtl-node').attributes('id')).toBe('t3')
@ -77,7 +82,7 @@ describe('Drag', () => {
const snapshot = wrapper.html()
const $tree1 = wrapper.find('#t1 .vtl-node-main')
const $tree1Child = wrapper.find('#t12 .vtl-node-main')
$tree1.trigger('dragstart', { dataTransfer: { setData: () => {} }})
$tree1.trigger('dragstart', { dataTransfer: { setData: () => {} } })
$tree1Child.trigger('drop')
Vue.nextTick(() => {
expect(wrapper.html()).toBe(snapshot)

@ -1,6 +1,6 @@
import Vue from 'vue'
import {mount} from '@vue/test-utils'
import {Tree, VueTreeList} from '@/index'
import { mount } from '@vue/test-utils'
import { Tree, VueTreeList } from '@/index'
describe('Operation', () => {
let wrapper
@ -26,8 +26,8 @@ describe('Operation', () => {
pid: 0
}
])
wrapper = mount(VueTreeList, {propsData: {model: new Tree([])}})
wrapper.setProps({model: tree})
wrapper = mount(VueTreeList, { propsData: { model: new Tree([]) } })
wrapper.setProps({ model: tree })
})
it('delete leaf node', done => {
@ -75,7 +75,7 @@ describe('Operation', () => {
const $input = wrapper.find('#t1 .vtl-input')
$input.element.value = 'New Node 1'
$input.trigger('input')
var event = new KeyboardEvent('keyup', {keyCode: 13})
var event = new KeyboardEvent('keyup', { keyCode: 13 })
window.dispatchEvent(event)
Vue.nextTick(() => {
expect(wrapper.find('#t1').text()).toBe('New Node 1')

@ -1,5 +1,5 @@
import {mount} from '@vue/test-utils'
import {Tree, VueTreeList} from '@/index'
import { mount } from '@vue/test-utils'
import { Tree, VueTreeList } from '@/index'
describe('Render', () => {
it('render correctly', () => {

@ -1,6 +1,6 @@
import Vue from 'vue'
import {mount} from '@vue/test-utils'
import {Tree, VueTreeList} from '@/index'
import { mount } from '@vue/test-utils'
import { Tree, VueTreeList } from '@/index'
describe('Slot', () => {
let wrapper
@ -27,29 +27,41 @@ describe('Slot', () => {
}
])
wrapper = mount(VueTreeList, {
propsData: {model: new Tree([])},
propsData: { model: new Tree([]) },
scopedSlots: {
addTreeNodeIcon() {
return <span class="add-tree-node-icon">📂</span>
return <span class='add-tree-node-icon'>📂</span>
},
addLeafNodeIcon() {
return <span class="icon"></span>
return <span class='icon'></span>
},
editNodeIcon() {
return <span class="icon">📃</span>
return <span class='icon'>📃</span>
},
delNodeIcon(slotProps) {
return (slotProps.model.isLeaf || !slotProps.model.children) ? <span class="del-node-icon"></span> : <span />
return slotProps.model.isLeaf || !slotProps.model.children ? (
<span class='del-node-icon'></span>
) : (
<span />
)
},
leafNodeIcon() {
return <span class="icon">🍃</span>
return <span class='icon'>🍃</span>
},
treeNodeIcon(slotProps) {
return <span class="tree-node-icon icon">{ slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded ? '🌲' : '❀' }</span>
return (
<span class='tree-node-icon icon'>
{slotProps.model.children &&
slotProps.model.children.length > 0 &&
!slotProps.expanded
? '🌲'
: '❀'}
</span>
)
}
}
})
wrapper.setProps({model: tree})
wrapper.setProps({ model: tree })
})
it('render slot correctly', () => {

@ -2,4 +2,4 @@ module.exports = {
css: {
extract: false
}
};
}

Loading…
Cancel
Save