About hasChildren in TreeItem component

[lilijh]

I'm using a tree component, but I'm encountering an unexpected result. In my opinion, if children is an empty array, hasChildren should be false. However, the actual behavior is the opposite. I'd like to know if this is the intended design.

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { TreeRoot, TreeItem } from 'radix-vue';

const items = [
  {
    title: 'composables',
    children: [{ title: 'useAuth.ts' }],
  },
  {
    title: 'components',
    children: [],
  },
];
</script>
<template>
  <TreeRoot
    class="list-none select-none w-56 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
    :get-key="(item) => item.title"
    v-slot="{ flattenItems }"
    :items="items"
  >
    <TreeItem
      v-for="item in flattenItems"
      v-slot="{ isExpanded }"
      :key="item._id"
      :style="{ 'padding-left': `${item.level - 0.5}rem` }"
      v-bind="item.bind"
      class="flex items-center py-1 px-2 my-0.5 rounded outline-none focus:ring-grass8 focus:ring-2 data-[selected]:bg-grass4 gap-x-1"
    >
      <Icon
        v-if="item.hasChildren"
        :icon="isExpanded ? 'mdi:chevron-down' : 'mdi:chevron-right'"
      />
      <Icon v-else />

      <input type="checkbox" /> <span>{{ item.value.title }}</span>
    </TreeItem>
  </TreeRoot>
</template>

My expected result is that if children is an empty array, then the Icon chevron-* shouldn't be rendered

demo

[zernonia]

This is intended. Specifically for cases where we are fetching children dynamically. You can always modify the conditional to render if it has non-empty array 😁