Add v-modal component (#274)

* Start on v-modal, fix layering in v-dialog

* Add shadow to v-dialog content

* Add optional group identifier to groupable compositions

This allows groupable parents to be nested more flexibly:

tabs group
  item group
    item
      tab

In the case above, we only want the tab to trigger for tabs group, not item group.

* Add active prop support to v-list-item

Allows us to manually indicate that a list item is active, useful in v-menu

* Use v-list in vertical tabs

* Finish v-modal

* Update readme for groupable composition

src/components/v-tabs/v-tab/v-tab.vue

@@ -1,11 +1,20 @@
 <template>
-	<div class="v-tab" :class="{ active, disabled }" @click="onClick">
+	<v-list-item
+		v-if="vertical"
+		class="v-tab vertical"
+		:active="active"
+		:disabled="disabled"
+		@click="onClick"
+	>
+		<slot v-bind="{ active, toggle }" />
+	</v-list-item>
+	<div v-else class="v-tab horizontal" :class="{ active, disabled }" @click="onClick">
 		<slot v-bind="{ active, toggle }" />
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, inject, ref } from '@vue/composition-api';
 import { useGroupable } from '@/compositions/groupable';
 
 export default defineComponent({
@@ -20,8 +29,10 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const { active, toggle } = useGroupable(props.value);
-		return { active, toggle, onClick };
+		const { active, toggle } = useGroupable(props.value, 'v-tabs');
+		const vertical = inject('v-tabs-vertical', ref(false));
+
+		return { active, toggle, onClick, vertical };
 
 		function onClick() {
 			if (props.disabled === false) toggle();
@@ -31,7 +42,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.v-tab {
+.v-tab.horizontal {
 	--v-tab-color: var(--input-foreground-color);
 	--v-tab-background-color: var(--input-background-color);
 	--v-tab-color-active: var(--input-foreground-color);

src/components/v-tabs/v-tabs.vue

@@ -1,12 +1,15 @@
 <template>
-	<div class="v-tabs" :class="{ vertical }">
+	<v-list class="v-tabs vertical alt-colors" v-if="vertical" nav>
 		<slot />
-		<div class="slider" :style="slideStyle"></div>
+	</v-list>
+	<div v-else class="v-tabs horizontal">
+		<slot />
+		<div class="slider" :style="slideStyle" />
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, toRefs, computed } from '@vue/composition-api';
+import { defineComponent, PropType, toRefs, computed, provide, ref } from '@vue/composition-api';
 import { useGroupableParent } from '@/compositions/groupable';
 
 export default defineComponent({
@@ -21,20 +24,20 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const { value: selection } = toRefs(props);
+		const { value: selection, vertical } = toRefs(props);
 
-		const options = toRefs({
-			multiple: false,
-			max: -1,
-			mandatory: true,
-		});
+		provide('v-tabs-vertical', vertical);
 
 		const { items } = useGroupableParent(
 			{
 				selection: selection,
 				onSelectionChange: update,
 			},
-			options
+			{
+				multiple: ref(false),
+				mandatory: ref(true),
+			},
+			'v-tabs'
 		);
 
 		const slideStyle = computed(() => {
@@ -50,12 +53,12 @@ export default defineComponent({
 			emit('input', newSelection);
 		}
 
-		return { update, slideStyle };
+		return { update, slideStyle, items };
 	},
 });
 </script>
 <style lang="scss" scoped>
-.v-tabs {
+.v-tabs.horizontal {
 	--v-tabs-underline-color: var(--foreground-color);
 
 	position: relative;
@@ -83,20 +86,5 @@ export default defineComponent({
 		transition: var(--medium) cubic-bezier(0.66, 0, 0.33, 1);
 		transition-property: left, top;
 	}
-
-	&.vertical {
-		flex-direction: column;
-
-		::v-deep .v-tab {
-			justify-content: flex-start;
-		}
-
-		.slider {
-			top: calc(100% / var(--_v-tabs-items) * var(--_v-tabs-selected));
-			left: 0;
-			width: 2px;
-			height: calc(100% / var(--_v-tabs-items));
-		}
-	}
 }
 </style>