Support for Vuetify props ?

[jdriesen]

Hi,

Seems I can't use the props which are available for a 'normal' v-treeview.
e.g. I would like to use the "dense" prop, though this doesn't seem to be supported.

Or am I missing something ?
Thanks in advance for your reply,

Johnny

[keyboardSmasher]

Does activatable not work? For example, clicking on an item and have it be highlighted?

[suusan2go]

@jdriesen
Hi, currently this library doesn't support all original props. The supported props are here https://github.com/suusan2go/vuetify-draggable-treeview#api.
This limitation comes from the implementation that manually constructs DOM based on the original Vuetify markup instead of using the Vuetify component.

vuetify-draggable-treeview/src/DraggableTreeviewNode.vue

Lines 1 to 66 in 16b9871

	<template>
	<div
	:class="`v-treeview-node v-treeview-node--click ${
	hasChildren ? '' : 'v-treeview-node--leaf'
	}`"
	>
	<div class="v-treeview-node__root" @click="open = !open">
	<div
	v-for="index in appendLevel"
	:key="index"
	class="v-treeview-node__level"
	/>
	<i
	v-if="hasChildren"
	role="button"
	class="v-icon notranslate v-treeview-node__toggle v-icon--link mdi"
	:class="[
	{
	'v-treeview-node__toggle--open': open,
	'theme--dark': isDark,
	'theme--light': !isDark,
	},
	expandIcon,
	]"
	/>
	<slot name="prepend" v-bind="{ item: value, open }" />
	<div class="v-treeview-node__label">
	<slot name="label" v-bind="{ item: value, open }">
	{{ value.name }}
	</slot>
	</div>
	<slot name="append" v-bind="{ item: value }" />
	</div>
	<div
	v-if="open"
	class="v-treeview-node__children v-treeview-node__children__draggable"
	>
	<draggable
	:group="group"
	:value="value.children"
	ghost-class="ghost"
	@input="updateValue"
	>
	<treeview-node
	v-for="child in value.children"
	:key="child.id"
	:group="group"
	:value="child"
	:level="level + 1"
	:expand-icon="expandIcon"
	@input="updateChildValue"
	>
	<template v-slot:prepend="{ item, open }">
	<slot name="prepend" v-bind="{ item, open }" />
	</template>
	<template v-slot:label="{ item, open }">
	<slot name="label" v-bind="{ item, open }"></slot>
	</template>
	<template v-slot:append="{ item }">
	<slot name="append" v-bind="{ item }" />
	</template>
	</treeview-node>
	</draggable>
	</div>
	</div>
	</template>

I know this is not ideal, but I couldn't find another way to make this draggable Treeview component. PRs that support more props are welcome 🙌