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