https://github.com/amsik/liquor-tree

Tree component based on Vue.js
https://github.com/amsik/liquor-tree

component tree tree-component treeview vue vue-components

Last synced: about 2 months ago
JSON representation

Tree component based on Vue.js

• Host: GitHub
• URL: https://github.com/amsik/liquor-tree
• Owner: amsik
• License: mit
• Created: 2017-12-11T13:35:03.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T21:40:46.000Z (over 1 year ago)
• Last Synced: 2024-07-25T17:52:14.536Z (about 2 months ago)
• Topics: component, tree, tree-component, treeview, vue, vue-components
• Language: JavaScript
• Homepage:
• Size: 1.52 MB
• Stars: 396
• Watchers: 16
• Forks: 96
• Open Issues: 103
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Liquor Tree

A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.

[documentation](https://amsik.github.io/liquor-tree/) | [demos](https://amsik.github.io/liquor-tree/#Examples)

## Features

* drag&drop

* mobile friendly

* events for every action

* flexible configuration

* any number of instances per page

* multi selection

* keyboard navigation

* filtering

* sorting

* integration with Vuex

## Installation

**Npm:**

```shell

$ npm install liquor-tree

```

**Yarn:**

```shell

$ yarn add liquor-tree

```

## Live Playground

To run that demo on your own computer:

* Clone this repository

* `npm install`

* `npm run build` 

* `npm run storybook` 

* Visit `http://localhost:9001/`

There are a lot of examples for you. All sources of stories are located in `liquor-tree/docs/storybook/stories`.

## Usage

```html

  

  

    

  

  

    import Vue from 'Vue'

    import LiquorTree from 'liquor-tree'

    Vue.use(LiquorTree)

    export default {

      ...

      data() {

        return {

          items: [

            {text: 'Item 1'},

            {text: 'Item 2'},

            {text: 'Item 3', children: [

              {text: 'Item 3.1'},

              {text: 'Item 3.2'}

            ]}

          ],

          options: {

            checkbox: true

          }

        }

      }

      ...

    }

  

```

## Development

Check out the `package.json`s script section. There are 2 scripts:

- `npm run dev` - it will open browser and you can *play* with code

- `npm run build` - it will craete a module file in `production` mode 

## License

[MIT](https://opensource.org/licenses/MIT)