ascx-tree-composition v1.1.3

ASCXTree

The <ASCXTree /> Component is a tree component that renders a tree given an array of data with the data structure: TreeData

Getting started

Installation

Installation

To be able to install the private package you need to add the following line in the .npmrc file of your project

//registry.npmjs.org/:_authToken=${NPM_TOKEN}

then you need to add the token to your environment

export NPM_TOKEN=XXXXXXXXXXXXXXXXX

In order to install the component, run the command:

npm install @rdss-mono/ascx-tree

Usage

You can use the ASCX Tree as you'd use any other Vue component, just import it in and then register it in your component. After that just add it to your template.

<template>
  <div class="my-component">
    <ascx-tree
      :tree-data="treeData"
      :drag-drop="dragDrop"
      :search-criteria="searchCriteria"
    >
    </ascx-tree>
  </div>
</template>

<script>
import ASCXTree from 'ascx-tree'
import { someAsyncFunction } from '@/lib/utils/api';

export default {
  components: {
    ASCXTree
  },
  data() {
    return {
      treeData: [],
      dragDrop: false,
      searchCriteria: '',
    }
  },
  methods: {
    async populateTree() {
      // For demonstration purposes only, you can populate the tree
      // however you want.
      this.treeData = await someAsyncFunction();
    }
  }
}
</script>

API

Custom data types

TreeData:

treeData: [
  {
    title: string;
    data: {
      account_id: number;
      account_type: string;
      account_uuid: string;
    },
    direct_children: [ . . . ]: TreeData
  }
]