├── .github └── workflows │ ├── build.yml │ ├── docs.yml │ └── tests.yml ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── deploy.sh ├── docs ├── .vitepress │ ├── config.js │ └── theme │ │ └── index.js ├── guide │ ├── async.md │ ├── events.md │ ├── getting-started.md │ ├── properties.md │ ├── slots.md │ └── transitions.md ├── index.md └── public │ ├── add.png │ ├── minus.png │ └── screenshot.png ├── index.html ├── jest.config.js ├── package.json ├── public ├── favicon.ico └── screenshot.png ├── src ├── assets │ └── logo.png ├── components │ ├── Icon.vue │ ├── Tree.vue │ ├── TreeIcons.vue │ ├── TreeLevel.vue │ └── TreeNode.vue ├── css │ └── material.css ├── dev.js ├── dev.vue ├── index.ts ├── misc │ ├── default.ts │ ├── helpers.ts │ └── nodeEvents.ts ├── setup │ ├── checkbox │ │ ├── auto.ts │ │ └── manual.ts │ ├── store.ts │ ├── useCheckBox.ts │ ├── useCommon.ts │ ├── useDragAndDrop.ts │ ├── useIcon.ts │ ├── useInput.ts │ ├── useLevel.ts │ ├── useNode.ts │ └── useTree.ts ├── shims-vue.d.ts └── structure │ ├── IConfiguration.ts │ ├── IDragContext.ts │ ├── IIcon.ts │ ├── INode.ts │ ├── INodeProps.ts │ ├── INodeState.ts │ ├── ITreeProps.ts │ ├── IUseCheck.ts │ ├── IUseCommon.ts │ └── IUseNode.ts ├── tests └── unit │ ├── auto.spec.ts │ ├── default.spec.ts │ ├── helpers.spec.ts │ ├── nodeEvents.spec.ts │ ├── store.spec.ts │ ├── useCheckBox.spec.ts │ ├── useCommon.spec.ts │ ├── useDragAndDrop.spec.ts │ ├── useIcon.spec.ts │ ├── useInput.spec.ts │ ├── useLevel.spec.ts │ ├── useNode.spec.ts │ └── useTree.spec.ts ├── todo.txt ├── tsconfig.json ├── vite.config.js └── yarn.lock /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: build 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v2 12 | - name: Use Node.js ${{ matrix.node-version }} 13 | uses: actions/setup-node@v1 14 | with: 15 | node-version: ${{ matrix.node-version }} 16 | - run: yarn install 17 | - run: yarn bundle -------------------------------------------------------------------------------- /.github/workflows/docs.yml: -------------------------------------------------------------------------------- 1 | name: docs 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | workflow_dispatch: 7 | 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - name: Checkout Git repository 14 | uses: actions/checkout@v2 15 | 16 | - name: Build and Deploy 17 | uses: jenkey2011/vuepress-deploy@master 18 | env: 19 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 20 | TARGET_BRANCH: gh-pages 21 | BUILD_SCRIPT: npm install && npm run docs:build 22 | BUILD_DIR: docs/.vuepress/dist -------------------------------------------------------------------------------- /.github/workflows/tests.yml: -------------------------------------------------------------------------------- 1 | name: tests 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | tests: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v2 12 | - name: Use Node.js ${{ matrix.node-version }} 13 | uses: actions/setup-node@v1 14 | with: 15 | node-version: ${{ matrix.node-version }} 16 | - run: yarn install 17 | - run: yarn test 18 | - run: yarn istanbul-badges-readme -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # VuePress files 2 | docs/.vitepress/dist/ 3 | 4 | .DS_Store 5 | node_modules 6 | /dist 7 | /coverage 8 | 9 | # local env files 10 | .env.local 11 | .env.*.local 12 | 13 | # Log files 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | pnpm-debug.log* 18 | 19 | # Editor directories and files 20 | .idea 21 | .vscode 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw? 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021-present, Tristan Fontaine 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 13 | all 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 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## vue3-treeview 2 | 3 | ![build](https://github.com/N00ts/vue3-treeview/actions/workflows/build.yml//badge.svg) ![tests](https://github.com/N00ts/vue3-treeview/actions/workflows/tests.yml//badge.svg) ![Statements](https://img.shields.io/badge/statements-97.31%25-brightgreen.svg) [![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/) 4 | 5 | ![Screenshot](./public/screenshot.png) 6 | 7 | Vue3 treeview is a treeview project. 8 | 9 | [Documentation](https://n00ts.github.io/vue3-treeview) 10 | 11 | __Features:__ 12 | 13 | - Made with vue3 14 | - Fully reactive 15 | - Typings 16 | - Normalized data (not deeply nested) 17 | - Full composition API 18 | - Lazy load 19 | - Editable text 20 | - Events for all actions 21 | - Node slots 22 | - Loading slot 23 | - Keyboard navigation 24 | - Checkboxes (auto / manual) 25 | - Drag and drop 26 | - Customizable style 27 | - Customizable icons 28 | 29 | ## Installation 30 | 31 | ```shell 32 | npm install vue3-treeview 33 | yarn add vue3-treeview 34 | ``` 35 | 36 | ## Play with repo 37 | 38 | * Clone this repository 39 | * `yarn install` 40 | * `yarn dev` 41 | 42 | ## License 43 | 44 | [MIT](https://github.com/N00ts/vue3-treeview/blob/master/LICENSE) 45 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', {targets: {node: 'current'}}], 5 | '@babel/preset-typescript', 6 | ], 7 | plugins: ["dynamic-import-node"] 8 | }; 9 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # abort on errors 4 | set -e 5 | 6 | # build 7 | npm run docs:build 8 | 9 | # navigate into the build output directory 10 | cd docs/.vitepress/dist 11 | 12 | git init 13 | git add -A 14 | git commit -m 'deploy' 15 | git push -f git@github.com:N00ts/vue3-treeview.git master:gh-pages 16 | 17 | cd - -------------------------------------------------------------------------------- /docs/.vitepress/config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | title: "vue3-treeview", 5 | description: "vue3-treeview documentation", 6 | base: "/vue3-treeview/", 7 | themeConfig: { 8 | repo: "N00ts/vue3-treeview", 9 | docsDir: "docs", 10 | editLinks: true, 11 | editLinkText: "Edit this page on GitHub", 12 | nav: [ 13 | { 14 | text: "Guide", 15 | link: "/guide/getting-started", 16 | } 17 | ], 18 | sidebar: { 19 | "/guide/": getSidebar() 20 | }, 21 | }, 22 | alias: { 23 | "@docs": path.resolve(__dirname, "..") 24 | }, 25 | }; 26 | 27 | function getSidebar() { 28 | return [ 29 | { 30 | text: "Introduction", 31 | link: "/guide/getting-started", 32 | }, 33 | { 34 | text: "Properties", 35 | link: "/guide/properties", 36 | }, 37 | { 38 | text: "Events", 39 | link: "/guide/events", 40 | }, 41 | { 42 | text: "Slots", 43 | link: "/guide/slots", 44 | }, 45 | { 46 | text: "Async loading", 47 | link: "/guide/async", 48 | }, 49 | { 50 | text: "Transitions", 51 | link: '/guide/transitions' 52 | } 53 | ]; 54 | } 55 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.js: -------------------------------------------------------------------------------- 1 | import DefaultTheme from 'vitepress/theme'; 2 | 3 | export default { 4 | ...DefaultTheme 5 | } 6 | -------------------------------------------------------------------------------- /docs/guide/async.md: -------------------------------------------------------------------------------- 1 | ## Async loading 2 | 3 | In some case you might have a very large amount of nodes to display. 4 | In this case you can to use "async loading" and update treeview with data coming from the server and have infinite nodes. 5 | 6 | ::: warning 7 | When using async loading, checkbox mode auto will reload all parents state. If the node coming from the server is unchecked it will uncheck all parents when added 8 | ::: 9 | 10 | -------------------------------------------------------------------------------- /docs/guide/events.md: -------------------------------------------------------------------------------- 1 | ## Event list 2 | 3 | | Event | Arguments | Description | 4 | |----------------|------------------------------|-------------------------------------------------| 5 | | node-opened | [node](./properties.md#node) | Triggered when node is opened | 6 | | node-closed | [node](./properties.md#node) | Triggered when node is closed | 7 | | node-focus | [node](./properties.md#node) | Triggered when node is focused | 8 | | node-toggle | [node](./properties.md#node) | Triggered when node is opened or node is closed | 9 | | node-blur | [node](./properties.md#node) | Triggered when blur node text | 10 | | node-edit | [node](./properties.md#node) | Triggered when node text is getting focused | 11 | | node-checked | [node](./properties.md#node) | Triggered when node is checked | 12 | | node-unchecked | [node](./properties.md#node) | Triggered when node is unchecked | 13 | | node-dragstart | [context](#context) | Trigerred when drag start | 14 | | node-dragenter | [context](#context) | Triggered when drag enter | 15 | | node-dragleave | [context](#context) | Triggered when drag leave | 16 | | node-dragend | [context](#context) | Triggered when drag end | 17 | | node-over | [context](#context) | Triggered when drag over | 18 | | node-drop | [context](#context) | Triggered when drop | 19 | 20 | ::: tip 21 | Try events yourself (go check the console with F12) 22 | ::: 23 | 24 | 30 | 31 | ## Context 32 | Drag context, is composed of dragged element and target element which are both "IDragContext" 33 | 34 | | Variable | Type | Description | 35 | |--------------|-------------------------------|------------------------------------| 36 | | dragged | [IDragContext](#idragcontext) | Dragged context | 37 | | target | [IDragContext](#idragcontext) | Target context | 38 | | evt | DragEvent | Drag Event | 39 | | external | Boolean | Determine if the node is external | 40 | | dataTransfer | Object | String | null | Event dataTransfer content | 41 | 42 | ::: warning 43 | In function of the drag event, target may be null 44 | ::: 45 | 46 | ## IDragContext 47 | 48 | | Variable | Type | Description | 49 | |----------|------------------------------|---------------------------------------| 50 | | node | [node](./properties.md#node) | Related node | 51 | | element | Element | Html element of the related node | 52 | | wrapper | Element | Wrapper of the related node's element | 53 | | parentId | String | Id of parent node | 54 | 55 | -------------------------------------------------------------------------------- /docs/guide/getting-started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | a vue 3 pluggin to display treeview 4 | 5 | ### Installation 6 | 7 | ``` sh 8 | npm install vue3-treeview 9 | ``` 10 | 11 | ### Usage 12 | 13 | ``` js 14 | import Tree from "vue3-treeview"; 15 | ``` 16 | 17 | ### Styling 18 | 19 | ::: tip 20 | By default the project comes without any styling. A default stylesheet is included in the project. 21 | ::: 22 | 23 | ::: warning 24 | In the following documentation all examples will use default styling 25 | ::: 26 | 27 | To import the default stylesheet: 28 | 29 | ``` js 30 | import "vue3-treeview/dist/style.css"; 31 | ``` 32 | -------------------------------------------------------------------------------- /docs/guide/properties.md: -------------------------------------------------------------------------------- 1 | ## Tree 2 | 3 | | Prop | Type | Default | Required | Description | 4 | |--------|----------------------------------|---------|----------|--------------------| 5 | | nodes | [Object](#nodes) | {} | true | Nodes | 6 | | config | [IConfiguration](#configuration) | {} | true | Tree configuration | 7 | 8 | 14 | 15 | ## Nodes 16 | Type: `{ [id]: Node }` 17 | Default: Empty Object 18 | 19 | > If no node defined nothing will be displayed 20 | ``` js 21 | { 22 | id1: { 23 | text: "textid1", 24 | children: ["id11"], 25 | state: { ... } 26 | }, 27 | id11: { 28 | text: "textid11", 29 | children: [], 30 | state: { ... } 31 | }, 32 | id2: { 33 | text 34 | } 35 | } 36 | ``` 37 | 38 | ## Node 39 | Type: `Object` 40 | Default: Empty Object 41 | 42 | > A node has the following structure: 43 | 44 | | Prop | Type | Default | Required | Description | 45 | |----------|----------------------|---------|----------|----------------------------| 46 | | text | String | "" | false | Text displayed in the node | 47 | | children | Array | [] | false | Array of children | 48 | | state | [INodeState](#state) | null | false | State of the node | 49 | 50 | ``` js 51 | { 52 | text: "text example", 53 | children: [ "childrenid1", "childrenid2" ], 54 | state: { 55 | opened: true, 56 | disabled: false 57 | ... 58 | } 59 | } 60 | ``` 61 | 62 | ## State 63 | Type: `Object` 64 | Default: Empty Object 65 | 66 | | Prop | Type | Default | Required | Description | 67 | |---------------|---------|---------|----------|--------------------------------------------------| 68 | | opened | Boolean | false | false | Open or close the node | 69 | | disabled | Boolean | false | false | Disable checkbox, node edition and Drag and drop | 70 | | editable | Boolean | true | false | Node field can be edited | 71 | | draggable | Boolean | true | false | Determine if a node is draggable or not | 72 | | dropable | Boolean | true | false | Determine if a node is dropable or not | 73 | | checked | Boolean | false | false | Node checkbox state | 74 | | indeterminate | Boolean | false | false | Node checkbox indeterminate state | 75 | | isLoading | Boolean | false | false | Used for [async loading](./async.md) | 76 | 77 | ## Configuration 78 | 79 | Tree Configuration 80 | Type: `Object` 81 | Default: Empty Object 82 | 83 | | Prop | Type | Default | Required | Description | 84 | |--------------------|-----------------|-----------------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 85 | | roots | Array | [] | true | Roots of the tree, this property is mandaroty to build the tree | 86 | | leaves | Array | [] | false | Leaves of the tree, if empty leaves will be nodes without children. Leaves does not have any Open / Close icon | 87 | | padding | Number | 25 | false | Padding for each new level | 88 | | editable | Boolean | false | false | Determine globally if nodes are editable. When false, no node is editable even if node state is editable | 89 | | editing | String | null | false | The id of the current editing node | 90 | | editableClass | String | "editable" | false | Customize node class when node is editable | 91 | | checkboxes | Boolean | false | false | Show or hide checkboxes | 92 | | checkMode | String | "manual" | false | Checkmode can be **"manual"** or **"auto"**. When auto mode is enabled, it triggers an event to check children | 93 | | dragAndDrop | Boolean | false | false | Enable or disable globally drag and drop | 94 | | keyboardNavigation | Boolean | false | false | Enable or disable keyboard navigation.
**enter**: edit
**esc**: stop edit
**up**: previous
**down**: next
**space**: check | 95 | | disabled | Boolean | false | false | Disable all tree nodes | 96 | | disabledClass | String | "disabled" | false | Customize node class when node is disabled | 97 | | openedIcon | [IIcon](#icons) | {} | false | Customize icon when node is opened | 98 | | closedIcon | [IIcon](#icons) | {} | false | Customize icon when node is closed | 99 | | focusClass | String | "focused" | false | Customize node class when node is focused | 100 | | checkedClass | String | "checked" | false | Customize node class when node is checked | 101 | | indeterminateClass | String | "indeterminate" | false | Customize node class when node is indeterminate | 102 | 103 | 109 | 110 | ## Icons 111 | Type: `Object` 112 | Default: Empty Object 113 | 114 | Open and close icons are customizable 115 | Icons can be: 116 | - "shape" you can import a custom SVG shape. 117 | - "class" class svg icon (fontawsome like) 118 | - "image" a classic image coming from web or local image 119 | 120 | The following table describe properties by "type" but they are all included in the same interface 121 | 122 | ### shape 123 | 124 | Shape is a custom drawn shape. 125 | For more information you can consult [SVG icon docs](https://developer.mozilla.org/en-US/docs/Web/SVG). 126 | 127 | | Prop | Type | Default | Required | Description | 128 | |---------|-----------------|---------|----------|--------------------------------------------------------------------| 129 | | type | String | "shape" | false | type can be "shape", "class", "img" | 130 | | width | Number | null | false | width of the icon | 131 | | height | Number | null | false | height of the icon | 132 | | class | String / Array | null | false | Even if your icon is drawn you can add a class to it | 133 | | style | String / Object | null | false | Inline icon style | 134 | | viewbox | String | null | false | Viewbox of the drawn icon, for more information check svg icon doc | 135 | | d | String | null | false | Icon drawn coordinates | 136 | | fill | String | null | false | Fill color of the svg icon | 137 | | stroke | String | null | false | SVG icon stroke property | 138 | 139 | 145 | 146 | ### Class 147 | 148 | A simple way to use svg icons is to design them with classes. 149 | To se how it work you can check [Front Awsome](https://fontawesome.com/) 150 | 151 | | Prop | Type | Default | Required | Description | 152 | |-------|-----------------|---------|----------|-------------------------------------| 153 | | type | String | "class" | false | type can be "shape", "class", "img" | 154 | | class | String / Array | null | false | The corresponding svg class | 155 | | style | String / Object | | | | 156 | 157 | 163 | 164 | ### img 165 | 166 | You can also decide to use an image as Icon. 167 | 168 | | Prop | Type | Default | Required | Description | 169 | |--------|-----------------|---------|----------|--------------------------------------------------------| 170 | | type | String | "img" | false | type can be "shape", "class", "img" | 171 | | src | String | null | false | The image source | 172 | | alt | String | null | false | The alt tag | 173 | | width | Number | null | false | width of the icon | 174 | | height | Number | null | false | height of the icon | 175 | | class | String / Array | null | false | ven if your icon is an image you can add a class to it | 176 | | style | String / Object | null | false | Inline icon style | 177 | 178 | -------------------------------------------------------------------------------- /docs/guide/slots.md: -------------------------------------------------------------------------------- 1 | ## Slots 2 | 3 | The treeview has two slots: 4 | - before-input 5 | - after-input 6 | - [loading-slot](./async.md) 7 | 8 | ### before-input / after-input 9 | 10 | They are normal slots that can be used to add some inline content to the treeview. 11 | 12 | The argument of the slots is a [node](./properties#node). 13 | 14 | -------------------------------------------------------------------------------- /docs/guide/transitions.md: -------------------------------------------------------------------------------- 1 | ## Transitions 2 | 3 | :::warning 4 | If you are not comfortable with transition in vue 3 please check [this link](https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components) first. 5 | ::: 6 | 7 | If you want to make some fancy open/close effects. vue3-treeview provide a transition on levels. 8 | 9 | 15 | 16 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | # Vue-3-Treeview 2 | 3 | ![Screenshot](/screenshot.png) 4 | 5 | `Vue-3-Treeview` is a simple treeview with all the required feature. 6 | 7 | To get start, please navigate to the [Guide](guide/getting-started.md) section. 8 | -------------------------------------------------------------------------------- /docs/public/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/N00ts/vue3-treeview/817381498255900a94e2a32c84ebf459ec11c3b2/docs/public/add.png -------------------------------------------------------------------------------- /docs/public/minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/N00ts/vue3-treeview/817381498255900a94e2a32c84ebf459ec11c3b2/docs/public/minus.png -------------------------------------------------------------------------------- /docs/public/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/N00ts/vue3-treeview/817381498255900a94e2a32c84ebf459ec11c3b2/docs/public/screenshot.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', 3 | moduleDirectories: [ 4 | 'node_modules' 5 | ], 6 | moduleFileExtensions: [ 7 | 'js', 8 | 'ts', 9 | 'json', 10 | 'vue' 11 | ], 12 | transform: { 13 | '^.+\\.vue$': 'vue-jest', 14 | '\\.(js|ts|jsx|tsx)$': 'babel-jest', 15 | }, 16 | transformIgnorePatterns: [ 17 | "[/\\\\]node_modules[/\\\\](?!lodash-es/).+\\.js$" 18 | ], 19 | collectCoverage: true, 20 | collectCoverageFrom: [ 21 | "src/**/*.ts", 22 | "!src/dev.js", 23 | "!src/dev.vue", 24 | "!src/index.ts", 25 | "!src/structure/**", 26 | "!src/shims-vue.d.ts", 27 | "!**/node_modules/**", 28 | ], 29 | coverageReporters: ["json-summary", "json", "lcov", "text", 'html'], 30 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-treeview", 3 | "version": "0.4.2", 4 | "private": false, 5 | "library": "vue3-treeview", 6 | "license": "MIT", 7 | "description": "A simple vue js 3 treeview component", 8 | "author": "Tristan Fontaine ", 9 | "scripts": { 10 | "test": "jest", 11 | "dev": "vite", 12 | "build": "vite build", 13 | "types": "tsc --emitDeclarationOnly", 14 | "bundle": "yarn run build && yarn run types", 15 | "lint": "eslint ./src --ext .vue,.js,.ts", 16 | "lint-fix": "eslint --fix ./src --ext .vue,.js,.ts", 17 | "all": "yarn run test && yarn run lint && yarn run bundle", 18 | "docs:dev": "vitepress dev docs", 19 | "docs:build": "vitepress build docs" 20 | }, 21 | "main": "dist/vue3-treeview.umd.js", 22 | "module": "dist/vue3-treeview.es.js", 23 | "style": "dist/style.css", 24 | "types": "dist/**.d.ts", 25 | "files": [ 26 | "dist/*" 27 | ], 28 | "dependencies": { 29 | "lodash.eq": "^4.0.0", 30 | "lodash.isnil": "^4.0.0", 31 | "lodash.tointeger": "^4.0.4", 32 | "lodash.uniqueid": "^4.0.1", 33 | "vue": "^3.4.4" 34 | }, 35 | "devDependencies": { 36 | "@babel/preset-typescript": "^7.14.5", 37 | "@types/jest": "^24.0.19", 38 | "@typescript-eslint/eslint-plugin": "^6.17.0", 39 | "@typescript-eslint/parser": "^6.17.0", 40 | "@vue/cli-plugin-babel": "^4.5.12", 41 | "@vue/cli-plugin-eslint": "^4.5.12", 42 | "@vue/cli-plugin-typescript": "^4.5.12", 43 | "@vue/cli-plugin-unit-jest": "~4.5.0", 44 | "@vue/cli-service": "^4.5.12", 45 | "@vue/compiler-sfc": "^3.0.11", 46 | "@vue/eslint-config-typescript": "^5.0.2", 47 | "@vue/test-utils": "^2.0.0-0", 48 | "eslint": "^8.56.0", 49 | "eslint-plugin-vue": "^7.10.0", 50 | "istanbul-badges-readme": "^1.4.0", 51 | "typescript": "^5.3.3", 52 | "vite": "^2.6.1", 53 | "vitepress": "^0.15.6", 54 | "vue-jest": "^5.0.0-alpha.10" 55 | }, 56 | "eslintConfig": { 57 | "root": true, 58 | "env": { 59 | "node": true 60 | }, 61 | "extends": [ 62 | "plugin:vue/vue3-strongly-recommended", 63 | "eslint:recommended", 64 | "@vue/typescript" 65 | ], 66 | "parserOptions": { 67 | "parser": "@typescript-eslint/parser" 68 | }, 69 | "rules": { 70 | "no-unused-vars": "off", 71 | "vue/no-ref-as-operand": "off" 72 | } 73 | }, 74 | "browserslist": [ 75 | "> 1%", 76 | "last 2 versions", 77 | "not dead" 78 | ], 79 | "css": "dist/vue3-treeview.css", 80 | "keywords": [ 81 | "treeview", 82 | "vue", 83 | "vue3", 84 | "javascript" 85 | ], 86 | "repository": { 87 | "type": "git", 88 | "url": "git+https://github.com/N00ts/vue3-treeview.git" 89 | }, 90 | "bugs": { 91 | "url": "https://github.com/N00ts/vue3-treeview/issues" 92 | }, 93 | "homepage": "https://github.com/N00ts/vue3-treeview#readme", 94 | "directories": { 95 | "doc": "docs", 96 | "test": "tests" 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/N00ts/vue3-treeview/817381498255900a94e2a32c84ebf459ec11c3b2/public/favicon.ico -------------------------------------------------------------------------------- /public/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/N00ts/vue3-treeview/817381498255900a94e2a32c84ebf459ec11c3b2/public/screenshot.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/N00ts/vue3-treeview/817381498255900a94e2a32c84ebf459ec11c3b2/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/Icon.vue: -------------------------------------------------------------------------------- 1 | 36 | 46 | -------------------------------------------------------------------------------- /src/components/Tree.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 68 |