@jledentu/vue finder

A Vue.js component to display hierarchical data

Version: 1.21.0 Updated: 09/03/2020

By: jledentu License: MIT

Downloads Last 30 Days: 1.7k

Install

npm i @jledentu/vue-finder
yarn add @jledentu/vue-finder

Repository: https://github.com/jledentu/vue-finder

CDNs

bundle.run: https://bundle.run/@jledentu/vue-finder

jsDelivr: https://cdn.jsdelivr.net/npm/@jledentu/vue-finder

unpkg: https://unpkg.com/@jledentu/vue-finder

Vue Finder

A Vue.js component to display hierarchical data (like the MacOS X finder)

Build Status Npm badge Codecov CodeFactor semantic-release

Screenshot

Documentation

The documentation is available on the website.

Getting Started

npm install --save @jledentu/vue-finder

An example of Vue Single File component:

<template>
  <Finder :tree="tree" />
</template>
<script>
  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
                }
              ]
            }
          ]
        }
      };
    }
  };
</script>

<style src="@jledentu/vue-finder/dist/vue-finder.css" />

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>
  <head>
    <!-- Include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- Include vue-finder & its styles -->
    <script src="https://cdn.jsdelivr.net/npm/@jledentu/vue-finder@1.20.0/dist/vue-finder.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@jledentu/vue-finder@1.20.0/dist/vue-finder.css"
    />
  </head>

  <body>
    <div id="app">
      <finder :tree="tree" />
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        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
                }
              ]
            }
          ]
        }
      }
    });
  </script>
</html>

Changelog

See the GitHub release history.

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 in watch mode
  • yarn docs:dev to run the Vuepress documentation in watch mode

License

MIT

Contributors



jledentu
commits

Dependencies


DevDependencies


Categories: Vue js