New the component VaSelectTree or extend the VaSelect

[demershov]

Hi guys,

The tree selector of the dropdown menu, it combines the functions of components VaTreeView and VaSelect
Unfortunately, I haven't found a way to create a select with nesting level and the ability to select any level of this nesting.

What do you think about it?
Thanks.

[m0ksem]

You use VaDropdown and VaTreeView to make own component.

<script setup lang="ts">
  // Define props

  const vModel = // define v-model
  const selectedText = computed(() => /** Convert nodes to text */)
</script>

<template>
  <VaDropdown>
    <template #anchor>
      <VaInput :model-value=""selectedText />
    </template>


    <VaDropdownContent>
      <VaTreeView v-model="vModel" :nodes="$props.options" selectable expand-all />
    </VaDropdownContent>
  </VaDropdown>
</template>

[demershov]

Yep, it was my first idea. But it won't look like the select component.

[m0ksem]

There is no nesting in select by default. You can pass option slot with VaCollapse. And use selectOption method if user click on child option.

[demershov]

Yes, in theory I can find ways to do this, but eventually behavior, events, or accessibility will suffer to some extent. That's why I started this discussion, because often the component is implemented separately or extends an existing one.

For example:
https://primevue.org/treeselect/#checkbox
https://element-plus.org/en-US/component/tree-select.html#select-any-level

Thanks

[m0ksem]

Makes sense, I made a task (#3780). If you have something to add to it, feel free to comment any requirements.