[Feature Request] expose activitable for list-items

[pcornelissen]

Problem to solve

When you are using v-list-goups with an #activator, then it seems to be almost impossible to be able to select the list-items acting as activator. After spending hours trying to solve that, this is what I came up with: (simplified it a bit)

<script setup lang="ts">
 defineProps<{
  folder: any;
}>();

const model = defineModel<string[]>('selected', {});
</script>

<template>
  <v-list-group
    v-if="folder.children.length > 0"
    :sub-group="true"
    select-strategy="independent"
    :value="folder.id"
  >
    <template #activator="{ props }">
      <v-list-item
        v-bind="props"
        select-strategy="independent"
        class="v-treeview-item--activetable-group-activator"
        :active="model && model[0] === folder.id"
        :class="{ 'v-list-item--active': model && model[0] === folder.id }"
        @click="model = [folder.id]"
      >
        <template #prepend>
          <v-icon icon="mdi-folder-outline" style="margin-right: -1em; margin-bottom: 16px" />
        </template>
        <v-list-item-title>{{ folder.name }} </v-list-item-title>
      </v-list-item>
    </template>
    <folder-tree-item v-for="(child) in folder.children" :key="child.id" v-model:selected="model" :folder="child" style="margin-left: -40px" />
  </v-list-group>
  <v-list-item
    v-else
    :value="folder.id"
    select-strategy="independent"
  >
    <template #prepend>
      <v-icon icon="mdi-folder-outline" style="margin-right: -1em; margin-bottom: 16px" />
    </template>
    <v-list-item-title>{{ folder.name }}</v-list-item-title>
  </v-list-item>
</template>

<style scoped />

Proposed solution

Having the class v-treeview-item--activetable-group-activator on the list item and the v-list-item--active class for the active state enables the visual selection effect. The v-model hack is also required to pass the value around, so it behaves in the same way as the regular v-list-item with the v-else.

As far as I have seen, this all leads to the fact that the property "activatable" which is included via the nested.ts is not changeable somehow.

I have no clue what you need to do to achieve that, but having actuvtors that behave like regular list-items would be great.

[yuwu9145]

VList doesn't support activatable group activator yet