├── .gitignore ├── .pnpmfile.cjs ├── .prettierignore ├── .vscode └── tasks.json ├── README.md ├── examples ├── example-vue2-no-ts │ ├── .gitignore │ ├── index.html │ ├── package.json │ └── src │ │ ├── App.vue │ │ └── main.js ├── example-vue2 │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── data.json │ │ ├── main.ts │ │ ├── shims-tsx.d.ts │ │ └── shims-vue.d.ts │ ├── tsconfig.json │ └── vue.config.js ├── example-vue3 │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── data.json │ │ ├── env.d.ts │ │ └── main.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── iife │ ├── package.json │ ├── vue2.html │ └── vue3.html ├── lerna.json ├── package.json ├── packages ├── dnd-utils │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.MD │ ├── index.html │ ├── package.json │ ├── rogo.config.ts │ ├── src │ │ └── index.ts │ ├── test │ │ ├── main.ts │ │ └── vite-env.d.ts │ └── tsconfig.json ├── docs-site │ ├── .eslintrc │ ├── .gitignore │ ├── .prettierrc │ ├── .stylelintrc │ ├── CHANGELOG.md │ ├── README.md │ ├── docs │ │ ├── config.ts │ │ ├── en │ │ │ ├── hire-me.md │ │ │ ├── index.md │ │ │ ├── pro.md │ │ │ ├── quick-support.md │ │ │ ├── v1 │ │ │ │ ├── api.md │ │ │ │ ├── guide.md │ │ │ │ └── index.md │ │ │ └── v2 │ │ │ │ ├── api.md │ │ │ │ └── guide.md │ │ ├── style.scss │ │ └── zh │ │ │ ├── hire-me.md │ │ │ ├── index.md │ │ │ ├── pro.md │ │ │ ├── quick-support.md │ │ │ ├── v1 │ │ │ ├── api.md │ │ │ ├── guide.md │ │ │ └── index.md │ │ │ └── v2 │ │ │ ├── api.md │ │ │ └── guide.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── prerender.config.ts │ ├── public │ │ ├── sponsors │ │ │ └── edoobox.svg │ │ └── videos │ │ │ ├── he-tree-cross-tree-drag.mp4 │ │ │ ├── he-tree-drag-copy.mp4 │ │ │ └── he-tree-drag-table.mp4 │ ├── scripts │ │ ├── compile-docs.ts │ │ ├── deploy.ts │ │ ├── tpl │ │ │ ├── CodeDemoWrapper.vue │ │ │ ├── deploy.tpl.sh │ │ │ └── doc-template.vue │ │ └── utils.ts │ ├── src │ │ ├── @type │ │ │ ├── shim-vue.d.ts │ │ │ ├── shims-vue.d.ts │ │ │ ├── source.d.ts │ │ │ └── vue-extend.d.ts │ │ ├── App.vue │ │ ├── HTMLHead.tsx │ │ ├── analytics.ts │ │ ├── assets │ │ │ ├── img │ │ │ │ └── coffee.jpg │ │ │ └── style │ │ │ │ ├── site.scss │ │ │ │ ├── tailwind.css │ │ │ │ └── transitions │ │ │ │ └── fade.scss │ │ ├── components │ │ │ ├── Anchor.vue │ │ │ ├── AspectBox.vue │ │ │ ├── BackToTop.vue │ │ │ ├── Badge.vue │ │ │ ├── Broadcast.ts │ │ │ ├── Caret.vue │ │ │ ├── CodeContainer.vue │ │ │ ├── I18n.vue │ │ │ ├── Icon.vue │ │ │ ├── PageProgressBar.vue │ │ │ ├── VA.vue │ │ │ ├── VClose.vue │ │ │ ├── VIconMDI.vue │ │ │ ├── VInput.vue │ │ │ ├── VModal.vue │ │ │ ├── VModals.vue │ │ │ └── globalComponents.ts │ │ ├── config.ts │ │ ├── current.ts │ │ ├── directives.ts │ │ ├── docsSubmenu.ts │ │ ├── http.ts │ │ ├── i18n.ts │ │ ├── layouts │ │ │ └── default_layout.vue │ │ ├── main.ts │ │ ├── parts │ │ │ ├── DocTemplateBase.vue │ │ │ ├── DocsMenuItem.vue │ │ │ ├── SearchModal.vue │ │ │ └── vheading.vue │ │ ├── plugins │ │ │ ├── floating-vue.ts │ │ │ ├── fuzzySearch.ts │ │ │ ├── searchData.ts │ │ │ ├── useWindowSize.ts │ │ │ └── vue-router-scroll-container.tsx │ │ ├── router.ts │ │ ├── scroll-to-hash.ts │ │ ├── store.ts │ │ ├── utils.ts │ │ └── views │ │ │ └── NotFound.vue │ ├── tailwind.config.js │ ├── tsconfig.json │ └── vite.config.js ├── he-tree-vue │ ├── .npmignore │ ├── .vscode │ │ └── extensions.json │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── .gitignore │ │ ├── App.vue │ │ ├── assets │ │ │ └── material-design.css │ │ ├── components │ │ │ ├── BaseTree.vue │ │ │ ├── DraggableTree.ts │ │ │ ├── OpenIcon.vue │ │ │ ├── TreeNode.vue │ │ │ └── TreeProcessorVue.ts │ │ ├── examples │ │ │ ├── Base.vue │ │ │ ├── CrossDrag.vue │ │ │ ├── Draggable.vue │ │ │ ├── MaterialDesign.vue │ │ │ ├── Other1.vue │ │ │ ├── Other2.vue │ │ │ ├── Other3.vue │ │ │ ├── Refresh.vue │ │ │ ├── TableTree.vue │ │ │ ├── Virtualization.vue │ │ │ ├── WithOpenAndCheckBox.vue │ │ │ ├── data.json │ │ │ ├── data.yaml │ │ │ └── table.json │ │ ├── index.ts │ │ ├── main.js │ │ └── shims-vue.d.ts │ ├── style │ │ ├── default.css │ │ └── material-design.css │ ├── sub-vue2 │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── App.vue │ │ │ └── main.js │ │ ├── tsconfig.json │ │ ├── vite.config.js │ │ └── vite.dev.js │ ├── switch-virtual-list.js │ ├── tsconfig.json │ ├── vite.config.js │ ├── vite.dev.js │ └── vue2 │ │ ├── index.d.ts │ │ ├── index.js │ │ └── index.mjs └── tree-utils │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.MD │ ├── index.html │ ├── package.json │ ├── rogo.config.ts │ ├── src │ └── index.ts │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── sponsors └── edoobox.svg /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/ 3 | 4 | # yarn 5 | .yarn/* 6 | !.yarn/patches 7 | !.yarn/releases 8 | !.yarn/plugins 9 | !.yarn/sdks 10 | !.yarn/versions 11 | .pnp.* 12 | 13 | # log 14 | *.log 15 | 16 | # edtior 17 | .vscode/* 18 | !.vscode/tasks.json -------------------------------------------------------------------------------- /.pnpmfile.cjs: -------------------------------------------------------------------------------- 1 | function readPackage(pkg, context) { 2 | // Override the manifest of foo@1.x after downloading it from the registry 3 | if (pkg.name === "vue-template-compiler") { 4 | pkg.dependencies = { 5 | ...pkg.dependencies, 6 | vue: pkg.version, 7 | }; 8 | console.log("Force set dependence vue for vue-template-compiler.\n"); 9 | } 10 | 11 | return pkg; 12 | } 13 | 14 | module.exports = { 15 | hooks: { 16 | readPackage, 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "type": "npm", 6 | "script": "dev", 7 | "path": "packages/docs-site", 8 | "group": "build", 9 | "problemMatcher": [], 10 | "label": "npm: dev - packages/docs-site" 11 | }, 12 | { 13 | "type": "npm", 14 | "script": "watch-compile-docs", 15 | "path": "packages/docs-site", 16 | "group": "build", 17 | "problemMatcher": [], 18 | "label": "npm: watch-compile-docs - packages/docs-site" 19 | }, 20 | { 21 | "label": "Document Dev", 22 | "dependsOn": ["npm: watch-compile-docs - packages/docs-site", "npm: dev - packages/docs-site"] 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # he-tree 2 | 3 | ![NPM](https://img.shields.io/npm/l/@he-tree/vue?style=for-the-badge) 4 | ![npm](https://img.shields.io/npm/v/@he-tree/vue?style=for-the-badge) 5 | ![npm](https://img.shields.io/npm/dm/%40he-tree/vue?style=for-the-badge) 6 | ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@he-tree/vue?style=for-the-badge) 7 | 8 | Vue tree component. [React click here](https://github.com/phphe/he-tree-react). Features: Vue2, Vue3, TypeScript, SSR, nested, virtual list, draggable, sortable, placeholder for drag, table tree, based on Drag and Drop API, deal with any other code based on Drag and Drop API. 9 | 10 | Vue 树组件. [React 点这](https://github.com/phphe/he-tree-react). 特点: 支持 Vue2, Vue3, TypeScript, SSR, 嵌套, 虚拟列表, 可拖拽, 拖拽排序, 拖拽时使用占位节点表示可放置位置, 表格模式, 基于 Drag and Drop API, 可与其他基于 Drag and Drop API 的代码交互. 11 | 12 | [Docs & Demo](https://hetree.phphe.com) | [文档和示例](https://hetree.phphe.com/zh) 13 | 14 | [React Tree](https://github.com/phphe/he-tree-react) | [React 版树组件](https://github.com/phphe/he-tree-react) 👑👑👑 15 | 16 | ## Sponsors 17 | 18 |

19 | Silver Sponsors 20 |
21 | edoobox
22 | edoobox 23 | 24 |

25 | 26 | Sponsors' logos and links will be displayed here and in the documentation. [Become a Sponsor](https://www.patreon.com/phphe). 27 | 28 | ## License 29 | 30 | [MIT](http://opensource.org/licenses/MIT) 31 | -------------------------------------------------------------------------------- /examples/example-vue2-no-ts/.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | pnpm-debug.log* 9 | lerna-debug.log* 10 | 11 | node_modules 12 | .DS_Store 13 | dist 14 | dist-ssr 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /examples/example-vue2-no-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/example-vue2-no-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "he-tree-example-vue2-no-ts", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "vue": "~2.6.11", 11 | "@he-tree/vue": "^2.7.8", 12 | "@vue/composition-api": "^1.4.6" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~5.0.0", 16 | "@vue/cli-service": "~5.0.0", 17 | "typescript": "~4.5.5", 18 | "vue-template-compiler": "~2.6.14" 19 | }, 20 | "browserslist": [ 21 | "> 1%", 22 | "last 2 versions", 23 | "not ie <= 8" 24 | ] 25 | } -------------------------------------------------------------------------------- /examples/example-vue2-no-ts/src/App.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 118 | -------------------------------------------------------------------------------- /examples/example-vue2-no-ts/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | 5 | new Vue({ 6 | render: (h) => h(App) 7 | }).$mount('#app') 8 | -------------------------------------------------------------------------------- /examples/example-vue2/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /examples/example-vue2/.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | 3 | .DS_Store 4 | node_modules 5 | /dist 6 | 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | pnpm-debug.log* 17 | 18 | # Editor directories and files 19 | .idea 20 | .vscode 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /examples/example-vue2/README.md: -------------------------------------------------------------------------------- 1 | # example-vue2 2 | 3 | Created with vue-cli. 4 | 5 | ## This example is ignored by pnpm. Run `npm install` to install dependencies. 6 | 7 | ## Project setup 8 | 9 | ``` 10 | npm install 11 | ``` 12 | 13 | ### Compiles and hot-reloads for development 14 | 15 | ``` 16 | npm run serve 17 | ``` 18 | 19 | ### Compiles and minifies for production 20 | 21 | ``` 22 | npm run build 23 | ``` 24 | 25 | ### Customize configuration 26 | 27 | See [Configuration Reference](https://cli.vuejs.org/config/). 28 | -------------------------------------------------------------------------------- /examples/example-vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /examples/example-vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-vue2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "@he-tree/vue": "^2.7.8", 11 | "@vue/composition-api": "^1.4.6", 12 | "core-js": "^3.8.3", 13 | "vue": "~2.6.14", 14 | "vue-class-component": "^7.2.3", 15 | "vue-property-decorator": "^9.1.2" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-typescript": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "typescript": "~4.5.5", 22 | "vue-template-compiler": "~2.6.14" 23 | } 24 | } -------------------------------------------------------------------------------- /examples/example-vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phphe/he-tree/ab53bb210ee669eb09cfc4582cdf283673efd357/examples/example-vue2/public/favicon.ico -------------------------------------------------------------------------------- /examples/example-vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/example-vue2/src/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/example-vue2/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 59 | -------------------------------------------------------------------------------- /examples/example-vue2/src/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "text": "Projects", 4 | "children": [ 5 | { 6 | "text": "Frontend", 7 | "children": [ 8 | { 9 | "text": "Vue", 10 | "children": [ 11 | { 12 | "text": "Nuxt" 13 | } 14 | ] 15 | }, 16 | { 17 | "text": "React", 18 | "children": [ 19 | { 20 | "text": "Next" 21 | } 22 | ] 23 | }, 24 | { 25 | "text": "Angular" 26 | } 27 | ] 28 | }, 29 | { 30 | "text": "Backend" 31 | } 32 | ] 33 | }, 34 | { 35 | "text": "Videos", 36 | "children": [ 37 | { 38 | "text": "Movie", 39 | "children": [ 40 | { 41 | "text": "The Godfather" 42 | }, 43 | { 44 | "text": "La Dolce Vita" 45 | }, 46 | { 47 | "text": "In the Mood for Love" 48 | } 49 | ] 50 | }, 51 | { 52 | "text": "AD" 53 | }, 54 | { 55 | "text": "Shorts" 56 | } 57 | ] 58 | }, 59 | { 60 | "text": "Photos", 61 | "children": [ 62 | { 63 | "text": "Animals" 64 | }, 65 | { 66 | "text": "Buildings" 67 | }, 68 | { 69 | "text": "Sky" 70 | }, 71 | { 72 | "text": "Sea" 73 | } 74 | ] 75 | }, 76 | { 77 | "text": "Music", 78 | "children": [ 79 | { 80 | "text": "My Happy Melodies." 81 | }, 82 | { 83 | "text": "Hello Summer." 84 | }, 85 | { 86 | "text": "An Overture To Happiness." 87 | }, 88 | { 89 | "text": "Sunny Days." 90 | }, 91 | { 92 | "text": "Every One Need Adventure." 93 | }, 94 | { 95 | "text": "Happy, Chill Radio." 96 | }, 97 | { 98 | "text": "I Found My Way." 99 | }, 100 | { 101 | "text": "Early, Early Morning." 102 | } 103 | ] 104 | }, 105 | { 106 | "text": "Games", 107 | "children": [ 108 | { 109 | "text": "swimming" 110 | }, 111 | { 112 | "text": "cycling" 113 | }, 114 | { 115 | "text": "tennis" 116 | }, 117 | { 118 | "text": "boxing" 119 | } 120 | ] 121 | }, 122 | { 123 | "text": "Download" 124 | } 125 | ] -------------------------------------------------------------------------------- /examples/example-vue2/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /examples/example-vue2/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | interface Element extends VNode {} 6 | interface ElementClass extends Vue {} 7 | interface IntrinsicElements { 8 | [elem: string]: any 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/example-vue2/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue' 3 | export default Vue 4 | } 5 | -------------------------------------------------------------------------------- /examples/example-vue2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "moduleResolution": "node", 8 | "resolveJsonModule": true, 9 | "experimentalDecorators": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "useDefineForClassFields": true, 15 | "sourceMap": true, 16 | "baseUrl": ".", 17 | "types": ["webpack-env"], 18 | "paths": { 19 | "@/*": ["src/*"] 20 | }, 21 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"] 22 | }, 23 | "include": [ 24 | "src/**/*.ts", 25 | "src/**/*.tsx", 26 | "src/**/*.vue", 27 | "tests/**/*.ts", 28 | "tests/**/*.tsx" 29 | ], 30 | "exclude": ["node_modules"] 31 | } 32 | -------------------------------------------------------------------------------- /examples/example-vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /examples/example-vue3/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/example-vue3/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Typescript + Vite 2 | 3 | ## This example is ignored by pnpm. Run `npm install` to install dependencies. 4 | 5 | This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/example-vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-vue3", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vue-tsc --noEmit && vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@he-tree/vue": "^2.7.7", 12 | "vue": "^3.2.25" 13 | }, 14 | "devDependencies": { 15 | "@vitejs/plugin-vue": "^2.2.0", 16 | "typescript": "^4.5.4", 17 | "vite": "^2.8.0", 18 | "vue-tsc": "^0.29.8" 19 | } 20 | } -------------------------------------------------------------------------------- /examples/example-vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phphe/he-tree/ab53bb210ee669eb09cfc4582cdf283673efd357/examples/example-vue3/public/favicon.ico -------------------------------------------------------------------------------- /examples/example-vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/example-vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phphe/he-tree/ab53bb210ee669eb09cfc4582cdf283673efd357/examples/example-vue3/src/assets/logo.png -------------------------------------------------------------------------------- /examples/example-vue3/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 35 | 36 | 53 | -------------------------------------------------------------------------------- /examples/example-vue3/src/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "text": "Projects", 4 | "children": [ 5 | { 6 | "text": "Frontend", 7 | "children": [ 8 | { 9 | "text": "Vue", 10 | "children": [ 11 | { 12 | "text": "Nuxt" 13 | } 14 | ] 15 | }, 16 | { 17 | "text": "React", 18 | "children": [ 19 | { 20 | "text": "Next" 21 | } 22 | ] 23 | }, 24 | { 25 | "text": "Angular" 26 | } 27 | ] 28 | }, 29 | { 30 | "text": "Backend" 31 | } 32 | ] 33 | }, 34 | { 35 | "text": "Videos", 36 | "children": [ 37 | { 38 | "text": "Movie", 39 | "children": [ 40 | { 41 | "text": "The Godfather" 42 | }, 43 | { 44 | "text": "La Dolce Vita" 45 | }, 46 | { 47 | "text": "In the Mood for Love" 48 | } 49 | ] 50 | }, 51 | { 52 | "text": "AD" 53 | }, 54 | { 55 | "text": "Shorts" 56 | } 57 | ] 58 | }, 59 | { 60 | "text": "Photos", 61 | "children": [ 62 | { 63 | "text": "Animals" 64 | }, 65 | { 66 | "text": "Buildings" 67 | }, 68 | { 69 | "text": "Sky" 70 | }, 71 | { 72 | "text": "Sea" 73 | } 74 | ] 75 | }, 76 | { 77 | "text": "Music", 78 | "children": [ 79 | { 80 | "text": "My Happy Melodies." 81 | }, 82 | { 83 | "text": "Hello Summer." 84 | }, 85 | { 86 | "text": "An Overture To Happiness." 87 | }, 88 | { 89 | "text": "Sunny Days." 90 | }, 91 | { 92 | "text": "Every One Need Adventure." 93 | }, 94 | { 95 | "text": "Happy, Chill Radio." 96 | }, 97 | { 98 | "text": "I Found My Way." 99 | }, 100 | { 101 | "text": "Early, Early Morning." 102 | } 103 | ] 104 | }, 105 | { 106 | "text": "Games", 107 | "children": [ 108 | { 109 | "text": "swimming" 110 | }, 111 | { 112 | "text": "cycling" 113 | }, 114 | { 115 | "text": "tennis" 116 | }, 117 | { 118 | "text": "boxing" 119 | } 120 | ] 121 | }, 122 | { 123 | "text": "Download" 124 | } 125 | ] -------------------------------------------------------------------------------- /examples/example-vue3/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /examples/example-vue3/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /examples/example-vue3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /examples/example-vue3/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /examples/example-vue3/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }) 8 | -------------------------------------------------------------------------------- /examples/iife/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-iife", 3 | "private": true, 4 | "dependencies": { 5 | "vue-demi": "latest", 6 | "vue2": "npm:vue@^2", 7 | "vue": "^3", 8 | "@vue/composition-api": "^1.4.6", 9 | "@he-tree/vue": "latest" 10 | } 11 | } -------------------------------------------------------------------------------- /examples/iife/vue2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 28 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /examples/iife/vue3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 18 | 19 |
20 | 21 | 22 | 23 | 27 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "node_modules/lerna/schemas/lerna-schema.json", 3 | "npmClient": "pnpm", 4 | "packages": [ 5 | "packages/*", 6 | "packages/he-tree-vue/sub-vue2" 7 | ], 8 | "command": { 9 | "version": { 10 | "conventionalCommits": true 11 | } 12 | }, 13 | "version": "independent" 14 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root", 3 | "private": true, 4 | "devDependencies": { 5 | "commitizen": "^4.1.2", 6 | "cz-conventional-changelog-lerna": "^0.1.0", 7 | "lerna": "^8.0.0" 8 | }, 9 | "scripts": { 10 | "commit": "cz", 11 | "commit-all": "git add . && cz", 12 | "publish": "lerna publish" 13 | }, 14 | "config": { 15 | "commitizen": { 16 | "path": "./node_modules/cz-conventional-changelog-lerna" 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /packages/dnd-utils/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | dist/ -------------------------------------------------------------------------------- /packages/dnd-utils/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # [0.1.0-alpha.4](https://github.com/phphe/he-tree/compare/@he-tree/dnd-utils@0.1.0-alpha.3...@he-tree/dnd-utils@0.1.0-alpha.4) (2023-12-20) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * **undraggable:** fix: click a draggable node, then you can drag undraggable nodes ([46a0611](https://github.com/phphe/he-tree/commit/46a06116901cb266af42e416f5cf1e18a8e10f2e)) 12 | 13 | 14 | 15 | 16 | 17 | # [0.1.0-alpha.3](https://github.com/phphe/he-tree/compare/@he-tree/dnd-utils@0.1.0-alpha.2...@he-tree/dnd-utils@0.1.0-alpha.3) (2023-06-03) 18 | 19 | 20 | ### Bug Fixes 21 | 22 | * **cross tree drag:** fix: placeholder does not disappear when drag cross trees ([86bc0e6](https://github.com/phphe/he-tree/commit/86bc0e6b5d552f8e9ef315fcb93ac208ecceb219)), closes [#59](https://github.com/phphe/he-tree/issues/59) 23 | 24 | 25 | 26 | 27 | 28 | # [0.1.0-alpha.2](https://github.com/phphe/he-tree/compare/@he-tree/dnd-utils@0.1.0-alpha.1...@he-tree/dnd-utils@0.1.0-alpha.2) (2022-11-14) 29 | 30 | 31 | ### Features 32 | 33 | * **dnd-utils:** allow control preventDefault easily ([f4a7959](https://github.com/phphe/he-tree/commit/f4a7959c92a8b3ecd8ac091172f88a92e477e0a0)) 34 | 35 | 36 | 37 | 38 | 39 | # [0.1.0-alpha.1](https://github.com/phphe/he-tree/compare/@he-tree/dnd-utils@0.1.0-alpha.0...@he-tree/dnd-utils@0.1.0-alpha.1) (2022-11-06) 40 | 41 | 42 | ### Bug Fixes 43 | 44 | * **onleave:** fix onLeave ([6d6285f](https://github.com/phphe/he-tree/commit/6d6285f91ae90e4f9d38736bc400f7e1294bf067)) 45 | 46 | 47 | 48 | 49 | 50 | # [0.1.0-alpha.0](https://github.com/phphe/he-tree/compare/@he-tree/dnd-utils@0.0.3-alpha.0...@he-tree/dnd-utils@0.1.0-alpha.0) (2022-11-01) 51 | 52 | 53 | ### Features 54 | 55 | * **lerna:** update to lerna 5 ([48ec436](https://github.com/phphe/he-tree/commit/48ec436bbd398e6b90575f90131a50ded5cdf1fb)) 56 | -------------------------------------------------------------------------------- /packages/dnd-utils/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 phphe 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/dnd-utils/README.MD: -------------------------------------------------------------------------------- 1 | # one-drag 2 | -------------------------------------------------------------------------------- /packages/dnd-utils/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /packages/dnd-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@he-tree/dnd-utils", 3 | "version": "0.1.0-alpha.4", 4 | "description": "", 5 | "main": "dist/index.cjs.js", 6 | "module": "dist/index.esm.js", 7 | "types": "dist/index.d.ts", 8 | "jsdelivr": "dist/index.iife.js", 9 | "unpkg": "dist/index.iife.js", 10 | "files": [ 11 | "dist", 12 | "src" 13 | ], 14 | "publishConfig": { 15 | "access": "public" 16 | }, 17 | "scripts": { 18 | "dev": "vite", 19 | "build": "rogo", 20 | "watch": "rogo -w" 21 | }, 22 | "author": "phphe (https://github.com/phphe)", 23 | "devDependencies": { 24 | "rogo": "^3.1.5", 25 | "typescript": "^4", 26 | "vite": "^2.8.6" 27 | }, 28 | "dependencies": { 29 | "@babel/runtime": "^7.7.7", 30 | "drag-event-service": "^2.0.0", 31 | "helper-js": "^3.1.2" 32 | }, 33 | "license": "MIT" 34 | } 35 | -------------------------------------------------------------------------------- /packages/dnd-utils/rogo.config.ts: -------------------------------------------------------------------------------- 1 | import { getConfig, GetConfigOptions } from "rogo"; 2 | 3 | const options: GetConfigOptions = { 4 | name: "dndUtils", 5 | handleTypescript2Config(config) { 6 | if (!config.tsconfigOverride) { 7 | config.tsconfigOverride = {}; 8 | } 9 | config.tsconfigOverride["exclude"] = ["test"]; 10 | return config; 11 | }, 12 | }; 13 | 14 | export default [ 15 | getConfig({ ...options, format: "esm" }), 16 | getConfig({ ...options, format: "cjs" }), 17 | getConfig({ 18 | ...options, 19 | format: "iife", 20 | minify: true, 21 | sourcemap: true, 22 | targets: "defaults", // include ie11 23 | }), 24 | ]; 25 | -------------------------------------------------------------------------------- /packages/dnd-utils/test/main.ts: -------------------------------------------------------------------------------- 1 | // for test only 2 | import oneDrag from "../src/index"; 3 | import * as hp from "helper-js"; 4 | 5 | // @ts-ignore 6 | const app = document.querySelector("#app")!; 7 | 8 | app.innerHTML = document.getElementById("template").innerHTML; 9 | const list = document.getElementById("list"); 10 | 11 | let destroy; 12 | window["initOnFirst"] = () => { 13 | destroy?.(); 14 | const r = oneDrag(list.firstElementChild as HTMLElement, { 15 | onDrop(ctx) { 16 | ctx.moveElement.setAttribute("style", ctx.styleBackup); 17 | }, 18 | }); 19 | destroy = r.destroy; 20 | }; 21 | window["initOnRoot"] = () => { 22 | destroy?.(); 23 | const r = oneDrag(list, { 24 | resolveElements(ctx) { 25 | if (ctx.triggerElement.tagName !== "LI") { 26 | return null; 27 | } else { 28 | return [ctx.triggerElement, ctx.triggerElement]; 29 | } 30 | }, 31 | onDrop(ctx) { 32 | ctx.moveElement.setAttribute("style", ctx.styleBackup); 33 | }, 34 | }); 35 | destroy = r.destroy; 36 | }; 37 | window["initClone"] = () => { 38 | destroy?.(); 39 | const r = oneDrag(list, { 40 | beforeDrag(ctx) { 41 | if (ctx.triggerElement.tagName !== "LI") { 42 | return null; 43 | } else { 44 | const cloned = ctx.triggerElement.cloneNode(true); 45 | hp.insertAfter(cloned, ctx.triggerElement); 46 | return { dragElement: ctx.triggerElement }; 47 | } 48 | }, 49 | onDrop(ctx) { 50 | hp.removeEl(ctx.moveElement); 51 | }, 52 | }); 53 | destroy = r.destroy; 54 | }; 55 | -------------------------------------------------------------------------------- /packages/dnd-utils/test/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/dnd-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2015", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "declaration": true, 17 | "jsx": "react" 18 | }, 19 | "include": ["src", "test"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/docs-site/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "browser": true, 5 | "es2021": true, 6 | "node": true 7 | }, 8 | "extends": [ 9 | "plugin:vue/vue3-recommended", 10 | "eslint:recommended", 11 | "@vue/typescript/recommended", 12 | "@vue/prettier", 13 | "@vue/prettier/@typescript-eslint" 14 | ], 15 | "parserOptions": { 16 | "ecmaVersion": 2021 17 | }, 18 | "plugins": [], 19 | "rules": { 20 | "@typescript-eslint/ban-ts-comment": "off" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/docs-site/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | dist-prerendered 6 | *.local 7 | .tmp/ 8 | compiled-docs/ -------------------------------------------------------------------------------- /packages/docs-site/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": false, 4 | "vueIndentScriptAndStyle": true 5 | } -------------------------------------------------------------------------------- /packages/docs-site/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-recommended", "stylelint-config-standard"] 3 | } -------------------------------------------------------------------------------- /packages/docs-site/README.md: -------------------------------------------------------------------------------- 1 | ## build and preprender 2 | 3 | ```sh 4 | npm run compile-docs 5 | npm run build # build to folder 'dist' 6 | npm run preprender # preprender to folder 'dist-preprender' 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/docs-site/docs/config.ts: -------------------------------------------------------------------------------- 1 | // Don't modify config when runtime 2 | // 'path' should't contains locale and must start with '/' 3 | 4 | import { urlHasDir } from '../src/utils' 5 | 6 | export default { 7 | APP_NAME: 'he-tree', 8 | ANALYTICS_ID: 'G-L74NT4DL5X', 9 | ORIGIN_PROD: 'https://hetree.phphe.com', // production host name 10 | GIT_NAME: 'phphe/he-tree', 11 | DONATE_URL: 'https://www.paypal.com/paypalme/phphe', 12 | SPONSOR_URL: 'https://www.patreon.com/phphe', 13 | VERSION: '2.x', 14 | MENU: [ 15 | { 16 | text: 'Guide', 17 | path: '/v2/guide', 18 | }, 19 | { 20 | text: 'API', 21 | path: '/v2/api', 22 | }, 23 | { 24 | text: 'Pro', 25 | path: '/pro', 26 | }, 27 | { 28 | text: 'Quick support', 29 | path: '/quick-support', 30 | }, 31 | { 32 | text: 'Hire Me', 33 | path: '/hire-me', 34 | }, 35 | ], 36 | SUBPATH: [ 37 | { 38 | match: (url: string) => urlHasDir(url, 'v1'), 39 | version: '1.x', 40 | homePath: '/v1', 41 | menu: [ 42 | { 43 | text: 'Guide', 44 | path: '/v1/guide', 45 | }, 46 | { 47 | text: 'API', 48 | path: '/v1/api', 49 | }, 50 | ], 51 | search: ['/v1/guide', '/v1/api'], 52 | }, 53 | ], 54 | SEARCH: ['/v2/guide', '/v2/api'], 55 | I18N: { 56 | locale: 'en', 57 | fallbackLocale: 'en', 58 | locales: { en: 'English', zh: '简体中文' }, 59 | messages: { 60 | en: {}, 61 | zh: { 62 | Languages: '语言', 63 | Home: '首页', 64 | Works: '作品', 65 | About: '关于', 66 | Version: '版本', 67 | Guide: '使用指南', 68 | API: 'API', 69 | Examples: '例子', 70 | 'Get Started': '快速开始', 71 | 'More Examples': '更多例子', 72 | Search: '搜索', 73 | 'No search results': '没有匹配的结果', 74 | Pro: 'Pro', 75 | 'Quick support': '快速支持', 76 | 'Hire Me': '雇佣我', 77 | }, 78 | }, 79 | }, 80 | UI: { 81 | github_buttons: true, 82 | }, 83 | } 84 | -------------------------------------------------------------------------------- /packages/docs-site/docs/en/hire-me.md: -------------------------------------------------------------------------------- 1 | # Hire Me 2 | 3 | I can work on the custom made of he-tree. Advanced Vue custom components. And other work about Vue. Please contact me by email. My commission is $30 per hour for tasks under 4 hours and $25 per hour for tasks over 4 hours. 4 | -------------------------------------------------------------------------------- /packages/docs-site/docs/en/index.md: -------------------------------------------------------------------------------- 1 | # he-tree 2 | 3 | [中文](/zh) | [English](/) 4 | 5 | **Vue tree component**. **_Free, open-source, MIT_**. Features: Vue2, Vue3, TypeScript, SSR, nested, virtual, list, draggable, sortable, placeholder for drag, table tree, based on Drag and Drop API, deal with any other code based on Drag and Drop API. 6 | 7 | [Guide](./v2/guide.md) | [Demo](./v2/guide.md#Examples) 8 | 9 | 10 | 11 | ```vue 12 | 30 | 31 | 80 | ``` 81 | 82 | ## Sponsors 83 | 84 |
85 |

86 | Silver Sponsors 87 |
88 | edoobox
89 | edoobox 90 | 91 |

92 |
93 | 94 | Sponsors' logos and links will be displayed in the documentation and github page. [Become a Sponsor](https://www.patreon.com/phphe). 95 | 96 | ## React 97 | 98 | If you use React, check [React draggable tree component](https://he-tree-react.phphe.com) 99 | -------------------------------------------------------------------------------- /packages/docs-site/docs/en/pro.md: -------------------------------------------------------------------------------- 1 | # Pro 2 | 3 | The he-tree follows the MIT license, and you can use it for free. The he-tree pro is a commercial plugin that contains several advanced features, such as cross-tree dragging, clone when dragging, and draggable table. Below is the demo. 4 | 5 | **The Pro plugin does not connect to the internet.** 6 | 7 | ## Demo 8 | 9 | ### Drag cross trees 10 | 11 |