OS X Finder Like Tree Component - vue-finder

Install & Download:

# NPM
$ npm install @jledentu/vue-finder --save

Description:

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
}