Vue-competency-tree NPM

Vue Competency Tree

A Vue 3 component for displaying a competency tree with nested checkboxes and search functionality.

Installation

To install the package, you can use npm or yarn:

npm install vue-competency-tree
# or
yarn add vue-competency-tree

Usage

First, you need to register the component globally in your main entry file (e.g., main.js or main.ts):

import { createApp } from "vue";
import App from "./App.vue";
import setupCompetencyTree from "vue-competency-tree";
import 'vue-competency-tree/style.css'
const app = createApp(App);

app.use(setupCompetencyTree);

app.mount("#app");

Then, you can use the CompetencyTree component in your Vue components:

<template>
  <div>
    <CompetencyTree
      :treeData="treeData"
      :isDisabled="!treeData.length"
      :allLevelsPlaceholder="'All Levels'"
      :searchInputPlaceholder="'Search...'"
      :selectAllLabel="'Select All'"
      :noResultLabel="'No results found'"
      :maxHeight="'200px'"
      v-model="selectedIds"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        // your tree data here
      ],
      selectedIds: [],
    };
  },
};
</script>

Props

Prop Name	Type	Default	Description
`isDisabled`	`boolean`	`false`	Disables the dropdown and its contents.
`treeData`	`OrganisationStructureResource[]`	`[]`	Array of objects representing the tree structure. See OrganisationStructureResource.
`allLevelsPlaceholder`	`string`	`"All Levels"`	Placeholder text when all levels are selected.
`searchInputPlaceholder`	`string`	`"Search"`	Placeholder text for the search input.
`selectAllLabel`	`string`	`"Select All"`	Label for the "Select All" checkbox.
`noResultLabel`	`string`	`"No results found"`	Message to display when no results are found in the search.
`maxHeight`	`string`	`'60vh'`	Maximum height of the tree container.
`modelValue`	`number[]`	`[]`	Array of selected IDs.

Events

Event Name	Payload Type	Description
`update:modelValue`	`number[]`	Emitted when the selected IDs are updated.

OrganisationStructureResource

interface OrganisationStructureResource {
  id?: number | null;
  name: string;
  children?: OrganisationStructureResource[] | null;
}

Custom CSS Variables

The component provides the following CSS variables for easy customization of its appearance:

Variable Name	Default Value	Description
`--ct-checkbox-checked`	`#27ae60`	Color of the checked checkbox.
`--ct-border`	`#ebeff5`	Border color.
`--ct-background`	`#fff`	Background color.
`--ct-disabled`	`#7e899a`	Color used when the dropdown is disabled.
`--ct-menu-shadow`	`0px 0px 8px 0px rgba(45, 50, 57, 0.1)`	Box shadow for the dropdown menu.

Example of Customizing Styles

You can customize the component styles by setting the CSS variables in your global CSS or a scoped style block:

:root {
  --ct-checkbox-checked: #ff6347;
  --ct-border: #ccc;
  --ct-background: #f9f9f9;
  --ct-disabled: #d3d3d3;
  --ct-menu-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}