vue-finder is a Vue.js 3/2 component that renders an OS X Find app-style interface to showcase your hierarchical data (e.g. folders, files, etc) just like a tree.
More features:
- Draggable
- Filterable
- Customizable
- Themeable
How to use it:
1. Import the component and define the hierarchical data.
import { Finder } from "@jledentu/vue-finder";
export default {
components: {
Finder
},
data() {
return {
tree: {
id: "root",
children: [
{
id: "child1",
label: "Child 1",
children: [
{
id: "Child11",
label: "Child 1.1"
}
]
},
{
id: "child2",
label: "Child 2"
},
{
id: "child3",
label: "Child 3"
}
]
}
};
}
};
2. Insert the component into your template.
<template>
<div>
<Finder :tree="tree"></Finder>
</div>
</template>
3. All default props.
/**
* Data of the tree.
*/
tree: {
type: Object,
required: true
},
/**
* Enable the selection of items.
*/
selectable: {
type: Boolean,
default: false
},
/**
* Enable the drag & drop of items.
*/
dragEnabled: {
type: Boolean,
default: false
},
/**
* Function to filter displayed items.
*/
filter: {
type: Function,
default: undefined
},
/**
* Function to sort displayed items.
*/
sortBy: {
type: Function,
default: undefined
},
/**
* ID of the item expanded when loaded.
*/
defaultExpanded: {
type: String,
default: undefined
},
/**
* Custom component to render items.
*/
itemComponent: {
type: [String, Object],
default: undefined
},
/**
* Styling options.
*
* ```js
* const theme = {
* primaryColor: '#2196f3',
* arrowColor: 'black',
* separatorColor: '#ccc',
* separatorWidth: '1px',
* dropZoneBgColor: 'rgba(33, 150, 243, 0.2)',
* draggedItemBgColor: 'rgba(33, 150, 243, 0.5)',
* };
* ```
*/
theme: {
type: Object,
default: () => ({})
},
/**
* Duration of the scroll animation (in milliseconds).
* When an item is expanded, the finder is scrolled to the right,
* using an animation. This parameter defines the duration of this animation.
*
* Set `0` for no animation.
*/
scrollAnimationDuration: {
type: Number,
default: 200
}
Changelog:
05/06/2023
- v4.1.1: Performance Improvements
04/12/2023
- v4.1.0: accept dragEnabled as function
03/30/2023
- v4.0.0: support Vue 3;events: pass items in events
03/14/2022
- v2.0.1: Bugfix
09/09/2021
- v2.0.0: Bugfix
09/02/2020
- v1.21.0
05/14/2020
- v1.12.0
Download Details:
Author: jledentu
Live Demo: https://vue-finder.netlify.com/examples.html#basic-example
Download Link: https://github.com/jledentu/vue-finder/archive/master.zip
Official Website: https://github.com/jledentu/vue-finder
Install & Download:
# NPM
$ npm install @jledentu/vue-finder --save