Remove v-model on groups and make docs nav linear

app/src/components/v-list/v-list-group.vue

@@ -19,10 +19,6 @@ import { defineComponent, nextTick, toRefs, watch, PropType, ref } from '@vue/co
 import { useGroupableParent, useGroupable } from '@/composables/groupable';
 
 export default defineComponent({
-	model: {
-		prop: 'activeItems',
-		event: 'input'
-	},
 	props: {
 		multiple: {
 			type: Boolean,
@@ -32,10 +28,6 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
-		activeItems: {
-			type: Array as PropType<(number | string)[]>,
-			default: null
-		},
 		active: {
 			type: Boolean,
 			default: false,
@@ -62,7 +54,7 @@ export default defineComponent({
 		}
 	},
 	setup(props, { listeners, emit }) {
-		const {activeItems, multiple} = toRefs(props)
+		const {multiple} = toRefs(props)
 
 		const { active: groupActive, toggle, activate, deactivate } = useGroupable({
 			group: props.scope,
@@ -71,12 +63,7 @@ export default defineComponent({
 
 		if (props.disableGroupableParent !== true) {
 			useGroupableParent(
-				{
-					selection: activeItems,
-					onSelectionChange: (newSelection) => {
-						emit('input', newSelection)
-					}
-				},
+				{},
 				{
 					multiple
 				}

app/src/components/v-list/v-list.vue

@@ -54,7 +54,7 @@ export default defineComponent({
 				}
 			},
 			{
-				mandatory: ref(false),
+				mandatory: ref(true),
 				multiple
 			}
 		);

app/src/modules/docs/components/navigation-item.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :value="itemValue">
+	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :value="section.to">
 		<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 		<v-list-item-content>
 			<v-list-item-title>{{ section.name }}</v-list-item-title>
@@ -14,7 +14,7 @@
 			dense
 		/>
 	</div>
-	<v-list-group v-else :multiple="false" v-model="rootSelection" :value="itemValue">
+	<v-list-group v-else :multiple="false" :value="section.to" disableGroupableParent>
 		<template #activator>
 			<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 			<v-list-item-content>
@@ -25,7 +25,6 @@
 			v-for="(child, index) in section.children"
 			:key="index"
 			:section="child"
-			v-model="childSelection"
 			dense
 		/>
 	</v-list-group>
@@ -45,38 +44,7 @@ export default defineComponent({
 		dense: {
 			type: Boolean,
 			default: false,
-		},
-		value: {
-			type: Array as PropType<string[]>,
-			default: () => []
 		}
-	},
-	setup(props, {emit}) {
-		const rootSelection = computed({
-			get() {
-				if(props.value.length === 0) return []
-				return [props.value[0]]
-			},
-			set(newVal: string[]) {
-				emit('input', newVal);
-			}
-		})
-
-		const childSelection = computed({
-			get() {
-				if(props.value.length < 2) return []
-				return props.value.slice(1)
-			},
-			set(newVal: string[]) {
-				emit('input', [props.value[0], ...newVal])
-			}
-		})
- 
-		const itemValue = computed(() => {
-			return props.section.to.split('/').pop()
-		})
-
-		return {rootSelection, childSelection, itemValue}
 	}
 });
 </script>

app/src/modules/docs/components/navigation.vue

@@ -1,11 +1,12 @@
 <template>
-	<v-list nav :multiple="false" v-model="rootSelection">
-		<navigation-item v-for="item in sections" :key="item.to" :section="item" v-model="childSelection"></navigation-item>
+	<v-list nav :multiple="false" v-model="selection">
+		<navigation-item v-for="item in sections" :key="item.to" :section="item"></navigation-item>
 	</v-list>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from '@vue/composition-api';
+import { spread } from 'lodash';
 import NavigationItem from './navigation-item.vue';
 import sections, {Section} from './sections';
 
@@ -18,34 +19,44 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const active = ref<string[]>(props.section.to.replace('/docs/','').split('/'))
+		const _selection = ref<string[]>(spreadPath(props.section.to))
 
 		watch(props.section, (newSection) => {
 			if(newSection !== null)
-				active.value = newSection.to.replace('/docs/','').split('/')
+				_selection.value = spreadPath(newSection.to)
 		})
 
-		const rootSelection = computed({
+		const selection = computed({
 			get() {
-				if(active.value.length === 0) return []
-				return [active.value[0]]
+				return _selection.value
 			},
-			set(newVal: string[]) {
-				active.value = newVal
+			set(newSelection: string[]) {
+				if(newSelection.length === 0) {
+					_selection.value =  []
+				} else {
+					if(_selection.value.includes(newSelection[0])) {
+						_selection.value = _selection.value.filter(s => s !== newSelection[0])
+					} else {
+						_selection.value = spreadPath(newSelection[0])
+					}
+					
+				}
 			}
 		})
 
-		const childSelection = computed({
-			get() {
-				if(active.value.length < 2) return []
-				return active.value.slice(1)
-			},
-			set(newVal: string[]) {
-				active.value = [active.value[0], ...newVal]
-			}
-		})
+		function spreadPath(path: string) {
+			const sections = path.substr(1).split('/')
+			if(sections.length === 0) return []
 
-		return { sections, active, childSelection, rootSelection };
+			const paths: string[] = ['/'+sections[0]]
+
+			for(let i = 1; i < sections.length; i++) {
+				paths.push(paths[i - 1] + '/' + sections[i])
+			}
+			return paths
+		}
+
+		return { sections, selection };
 	},
 });
 </script>