OS X Finder Like Tree Component – vue-finder

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

Add Comment