[Feature Request] expose activitable for list-items
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with nested.ts and the v-list-group activator example in the issue, then trace how activatable behavior reaches v-list-item. Done means a group activator can be selected and display the active state like a regular v-list-item without the workaround shown.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100