https://github.com/jledentu/vue-finder
📁 A Vue.js component to display hierarchical data (like the MacOS X finder)
https://github.com/jledentu/vue-finder
finder hierarchy tree treeview ui vue
Last synced: 8 months ago
JSON representation
📁 A Vue.js component to display hierarchical data (like the MacOS X finder)
- Host: GitHub
- URL: https://github.com/jledentu/vue-finder
- Owner: jledentu
- License: mit
- Created: 2018-02-03T18:13:26.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-09-17T07:54:48.000Z (about 1 year ago)
- Last Synced: 2025-04-02T02:11:40.916Z (8 months ago)
- Topics: finder, hierarchy, tree, treeview, ui, vue
- Language: JavaScript
- Homepage: https://vue-finder.netlify.app
- Size: 4.41 MB
- Stars: 161
- Watchers: 2
- Forks: 17
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue - vue-finder - A component to display hierarchical data, with selection, filtering and drag & drop (Components & Libraries / UI Components)
- awesome-vue - vue-finder - A Vue.js component to display hierarchical data (like the MacOS X finder) ` 📝 3 months ago` (UI Components [🔝](#readme))
- awesome-vue - vue-finder - A component to display hierarchical data, with selection, filtering and drag & drop (Components & Libraries / UI Components)
- fucking-awesome-vue - vue-finder - A component to display hierarchical data, with selection, filtering and drag & drop (Components & Libraries / UI Components)
README
**A Vue 3 component to display hierarchical data (like the MacOS X finder)**
[](https://travis-ci.org/jledentu/vue-finder)
[](https://www.npmjs.com/package/@jledentu/vue-finder)
[](https://codecov.io/gh/jledentu/vue-finder)
[](https://www.codefactor.io/repository/github/jledentu/vue-finder/overview/master)
[](https://github.com/semantic-release/semantic-release)
## Documentation
The documentation is available on the [website](https://vue-finder.netlify.app/).
## Getting Started
```sh
npm install --save @jledentu/vue-finder
```
An example of Vue Single File component:
```html
import { Finder } from "@jledentu/vue-finder";
export default {
components: {
Finder,
},
data() {
return {
tree: {
id: "root",
children: [
{
id: "fruits",
label: "Fruits",
children: [
{
id: "apple",
label: "Apple",
selectable: false,
},
{
id: "banana",
label: "Banana",
},
{
id: "grape",
label: "Grape",
selected: true,
},
{
id: "lemon",
label: "Lemon",
selectable: false,
},
{
id: "orange",
label: "Orange",
selected: true,
},
],
},
{
id: "vegetables",
label: "Vegetables",
children: [
{
id: "bean",
label: "Beans",
},
{
id: "carrot",
label: "Carrot",
selected: true,
},
{
id: "eggplant",
label: "Eggplant",
selectable: false,
},
{
id: "parsnip",
label: "Parsnip",
},
{
id: "tomato",
label: "Tomato",
selectable: false,
},
],
},
],
},
};
},
};
```
### Browser
You can also include the standalone UMD build in your page from the jsdeliver CDN. Make sure to import Vue as a dependency before vue-finder.
```html
const { createApp } = Vue;
createApp({
components: {
Finder: Finder.Finder,
},
data() {
return {
tree: {
id: "root",
children: [
{
id: "fruits",
label: "Fruits",
children: [
{
id: "apple",
label: "Apple",
selectable: false,
},
{
id: "banana",
label: "Banana",
},
{
id: "grape",
label: "Grape",
selected: true,
},
{
id: "lemon",
label: "Lemon",
selectable: false,
},
{
id: "orange",
label: "Orange",
selected: true,
},
],
},
{
id: "vegetables",
label: "Vegetables",
children: [
{
id: "bean",
label: "Beans",
},
{
id: "carrot",
label: "Carrot",
selected: true,
},
{
id: "eggplant",
label: "Eggplant",
selectable: false,
},
{
id: "parsnip",
label: "Parsnip",
},
{
id: "tomato",
label: "Tomato",
selectable: false,
},
],
},
],
},
};
},
}).mount("#app");
```
## Changelog
See the GitHub [release history](https://github.com/jledentu/vue-finder/releases).
## Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
### Development scripts
- `yarn build` to build the library
- `yarn test` to run the unit tests
- `yarn storybook` to run the [Storybook](https://github.com/storybookjs/storybook) in watch mode
- `yarn docs:dev` to run the [Vuepress](https://github.com/vuejs/vuepress) documentation in watch mode
## Credits
- [Lodash](https://lodash.com/) for some utility functions
- [Vue-treeselect](https://vue-treeselect.js.org/), [Vue-data-tables](https://www.njleonzhang.com/vue-data-tables) and [Vue-multiselect](https://vue-multiselect.js.org) as inspiration for naming and documentation
## License
[MIT](https://choosealicense.com/licenses/mit/)