Tree

<script setup>
import { ATreeItem, ATreeRoot, ATreeVirtualizer } from 'akar';
</script>

<template>
  <ATreeRoot>
    <ATreeItem />

    <!-- or with virtual -->
    <ATreeVirtualizer>
      <ATreeItem />
    </ATreeVirtualizer>
  </ATreeRoot>
</template>

<script setup lang="ts">
import { ATreeRoot } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref([people[0], people[1]]);
</script>

<template>
  <ATreeRoot
    v-model="selectedPeople"
    multiple
  >
    ...
  </ATreeRoot>
</template>

<script setup lang="ts">
import { ATreeItem, ATreeRoot, ATreeVirtualizer } from 'akar';
import { ref } from 'vue';
</script>

<template>
  <ATreeRoot :items>
    <ATreeVirtualizer
      v-slot="{ item }"
      :text-content="(opt) => opt.name"
    >
      <ATreeItem v-bind="item.bind">
        {{ person.name }}
      </ATreeItem>
    </ATreeVirtualizer>
  </ATreeRoot>
</template>

<script setup lang="ts">
import { ATreeItem, ATreeRoot } from 'akar';
import { ref } from 'vue';
</script>

<template>
  <ATreeRoot
    v-slot="{ flattenItems }"
    :items
    multiple
    propagate-select
  >
    <ATreeItem
      v-for="item in flattenItems"
      :key="item._id"
      v-bind="item.bind"
      v-slot="{ handleSelect, isSelected, isIndeterminate }"
      @select="(event) => {
        if (event.detail.originalEvent.type === 'click')
          event.preventDefault()
      }"
      @toggle="(event) => {
        if (event.detail.originalEvent.type === 'keydown')
          event.preventDefault()
      }"
    >
      <Icon
        v-if="item.hasChildren"
        icon="radix-icons:chevron-down"
      />

      <button
        tabindex="-1"
        @click.stop
        @change="handleSelect"
      >
        <Icon
          v-if="isSelected"
          icon="radix-icons:check"
        />
        <Icon
          v-else-if="isIndeterminate"
          icon="radix-icons:dash"
        />
        <Icon
          v-else
          icon="radix-icons:box"
        />
      </button>

      <div class="pl-2">
        {{ item.value.title }}
      </div>
    </ATreeItem>
  </ATreeRoot>
</template>

<script setup lang="ts">
import { ATreeItem } from 'akar';

interface ATreeNode {
  title: string;
  icon: string;
  children?: Array<ATreeNode>;
}

withDefaults(defineProps<{
  treeItems: Array<ATreeNode>;
  level?: number;
}>(), { level: 0 });
</script>

<template>
  <li
    v-for=" tree in treeItems"
    :key="tree.title"
  >
    <ATreeItem
      v-slot="{ isExpanded }"
      as-child
      :level="level"
      :value="tree"
    >
      <button>…</button>

      <ul v-if="isExpanded && tree.children">
        <ATree
          :tree-items="tree.children"
          :level="level + 1"
        />
      </ul>
    </ATreeItem>
  </li>
</template>

<template>
  <ATreeRoot
    :items="items"
    :get-key="(item) => item.title"
  >
    <ATree :tree-items="items" />
  </ATreeRoot>
</template>

<script setup lang="ts">
import { ATreeRoot } from 'akar';
import { ref } from 'vue';

interface FileNode {
  title: string;
  icon: string;
}

interface DirectoryNode {
  title: string;
  icon: string;
  directories?: Array<DirectoryNode>;
  files?: Array<FileNode>;
}
</script>

<template>
  <ATreeRoot
    :items="items"
    :get-key="(item) => item.title"
    :get-children="(item) => (!item.files) ? item.directories : (!item.directories) ? item.files : [...item.directories, ...item.files]"
  >
    ...
  </ATreeRoot>
</template>