@gjirafatech/gj-tree-select

@gjirafatech/gj-tree-select

A hierarchical multi-select dropdown with tree connector lines for Vue 2.

Works with any flat data — folders, channels, categories, departments — you provide a dataAdapter and the component builds the tree.

Install

npm install @gjirafatech/gj-tree-select

Quick Start

Global registration

import Vue from 'vue'
import GjTreeSelect from '@gjirafatech/gj-tree-select'

Vue.use(GjTreeSelect)

Local registration

import { GjTreeSelect } from '@gjirafatech/gj-tree-select'

export default {
  components: { GjTreeSelect }
}

Basic Usage

<template>
  <GjTreeSelect
    v-model="selectedIds"
    :items="folders"
    placeholder="Select folder"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedIds: [],
      folders: [
        { id: 1, parentId: 0, name: 'Sports' },
        { id: 2, parentId: 0, name: 'News' },
        { id: 3, parentId: 1, name: 'Football' },
        { id: 4, parentId: 1, name: 'Basketball' },
        { id: 5, parentId: 3, name: 'Premier League' },
      ]
    }
  }
}
</script>

Collapsible Tree

Enable expand/collapse functionality with arrow icons. Nodes are collapsed by default when collapsible is enabled:

<GjTreeSelect
  v-model="selectedIds"
  :items="folders"
  :collapsible="true"
  placeholder="Select folder"
/>

You can also customize the expand/collapse icon:

<GjTreeSelect v-model="selectedIds" :items="folders" :collapsible="true">
  <template #expand-icon="{ node, isExpanded }">
    <GjIcon
      :name="isExpanded ? 'ChevronDown' : 'ChevronRight'"
      size="16"
    />
  </template>
</GjTreeSelect>

Custom Icons (Scoped Slots)

The component renders fallback SVG icons by default. Override them with scoped slots:

<GjTreeSelect v-model="selectedIds" :items="folders" placeholder="Select folder">
  <!-- Custom node icon -->
  <template #node-icon="{ node, isSelected }">
    <GjIcon name="FolderOutline" size="20" />
  </template>

  <!-- Custom checkbox -->
  <template #check-icon="{ node, isSelected }">
    <GjIcon
      :name="isSelected ? 'CheckButtonSquareEnabledFilled' : 'CheckButtonSquareDisabled'"
      size="16"
    />
  </template>

  <!-- Custom chevron -->
  <template #chevron-icon="{ isOpen }">
    <GjIcon name="ArrowDown" size="16" />
  </template>

  <!-- Custom tag remove -->
  <template #tag-remove-icon="{ tag }">
    <GjIcon name="Close" size="16" />
  </template>
</GjTreeSelect>

Custom Tag Pills

Note: The component handles ellipsis automatically by default. You only need this if you want custom tag styling or icons.

To fully customize tag pills, override the tag slot. Important: When overriding, you must provide your own CSS for ellipsis to work correctly:

<GjTreeSelect v-model="selectedIds" :items="folders">
  <template #tag="{ tag, remove }">
    <span class="tag-content">
      <span class="tag-label">{{ tag.name }}</span>
      <button type="button" class="tag-remove-btn" @click="remove">
        <GjIcon name="Close" size="12" />
      </button>
    </span>
  </template>
</GjTreeSelect>

<style scoped>
.tag-content {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.tag-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tag-remove-btn {
  flex-shrink: 0;
  margin-left: 4px;
}
</style>

Different Data Shapes (dataAdapter)

Your API returns channelId, parentChannelId, title? No problem:

<GjTreeSelect
  v-model="selectedChannels"
  :items="channels"
  :data-adapter="{
    idKey: 'channelId',
    parentIdKey: 'parentChannelId',
    nameKey: 'title',
    rootParentId: null,
  }"
  placeholder="Select channel"
>
  <template #node-icon>
    <GjIcon name="Broadcast" size="20" />
  </template>
</GjTreeSelect>

Props

Default Connector Geometry

{
  laneWidth: 22,
  rowHeight: 32,
  rowCenterY: 16,
  elbowRadius: 8,
  horizontalEndGap: 2,
  verticalOverflow: 10,
  parentEntryOverflow: 8
}

Events

Scoped Slots

Theming (CSS Custom Properties)

Pass a theme object to override any CSS variable:

<GjTreeSelect
  :theme="{
    '--gj-ts-control-border-active': '#3A81F6',
    '--gj-ts-row-selected-bg': '#ECF3FF',
    '--gj-ts-select-all-color': '#3A81F6',
    '--gj-ts-check-active-color': '#3A81F6',
  }"
/>

Available CSS Variables

License

MIT