Merge pull request #2 from webdevnerdstuff/dev

Dev

Author: webdevnerdstuff

README.md

@@ -2,7 +2,9 @@
 
 
 ## Development Playground
-`pnpm i && pnpm play`
+`pnpm i && pnpm play`  
+
+Playground file can be found in `./src/playground/PlaygroundPage.vue`
 
 
 ## Description

package.json

@@ -2,7 +2,7 @@
 	"name": "vuetify-drilldown-table",
 	"version": "0.0.0-alpha1",
 	"description": "The vuetify-drilldown-table",
-	"private": true,
+	"private": false,
 	"main": "dist/vuetify-drilldown-table.js",
 	"module": "dist/vuetify-drilldown-table.es.js",
 	"types": "dist/types/index.d.ts",

src/App.vue

@@ -41,15 +41,10 @@ import AppBar from '@/layout/AppBar.vue';
 import MenuComponent from '@/components/MenuComponent.vue';
 import DocsComponent from '@/components/DocsComponent.vue';
 import { useCoreStore } from '@/stores/index';
+import { DrawerOptions } from '@/components/types';
 
 const store = useCoreStore();
 
-type DrawerOptions = {
-	absolute: boolean;
-	color: string;
-	elevation: number;
-};
-
 const drawer = ref<boolean>(true);
 const drawerOptions = ref<DrawerOptions>({
 	absolute: true,

src/components/DocsComponent.vue

@@ -113,16 +113,17 @@ import {
 	SlotsComponent,
 	UsageComponent,
 } from '@/components/docs';
+import { DocClasses } from '@/components/types';
 
-const links: string[] = inject('links');
+const links = inject('links');
 
-const classes: string[] = reactive({
+const classes = reactive<DocClasses>({
 	h2: 'v-heading text-h4 text-sm-h4 mb-3',
 	h3: 'v-heading text-h5 text-sm-h5 mb-1',
 	headerA: 'text-decoration-none text-right text-md-left',
 	appLink: 'app-link text-decoration-none primary--text font-weight-medium d-inline-block font-weight-bold',
 });
-const componentVersion: number = ref(packageInfo.version);
+const componentVersion = ref<string>(packageInfo.version);
 
 provide('classes', classes);
 </script>

src/components/MenuComponent.vue

@@ -23,8 +23,12 @@ import { inject, onMounted, reactive, ref } from 'vue';
 
 const drawerOptions = inject('drawerOptions');
 
-const active = ref(true);
-const menuItems = reactive([
+const active = ref<string>('');
+const menuItems = reactive<{
+	title: string;
+	icon: string;
+	href: string;
+}[]>([
 	{ title: 'Home', icon: 'mdi-home', href: '#home' },
 	{ title: 'Installation', icon: 'mdi-plus-thick', href: '#installation' },
 	{ title: 'Description', icon: 'mdi-information-outline', href: '#description' },
@@ -65,4 +69,5 @@ function smoothScroll() {
 
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+</style>

src/components/docs/DependenciesComponent.vue

@@ -1,16 +1,29 @@
 <template>
 	<v-row>
-		<v-col id="dependencies" class="mb-5" cols="12">
+		<v-col
+			id="dependencies"
+			class="mb-5"
+			cols="12"
+		>
 			<h2 :class="classes.h2">
-				<a :class="classes.headerA" href="#dependencies">#</a>
+				<a
+					:class="classes.headerA"
+					href="#dependencies"
+				>#</a>
 				Dependencies
 			</h2>
 
 			<v-row>
 				<v-col cols="12">
-					<a :href="store.links.vuetify" target="_blank">Vuetify v3</a>
+					<a
+						:href="store.links.vuetify"
+						target="_blank"
+					>Vuetify v3</a>
 					<br />
-					<a :href="store.links.vue" target="_blank">Vue 3</a>
+					<a
+						:href="store.links.vue"
+						target="_blank"
+					>Vue 3</a>
 				</v-col>
 			</v-row>
 		</v-col>
@@ -20,8 +33,9 @@
 <script setup lang="ts">
 import { inject } from 'vue';
 import { useCoreStore } from '@/stores/index';
+import { DocClasses } from '@/components/types';
 
-const classes: string[] = inject('classes');
+const classes = inject<DocClasses>('classes');
 
 const store = useCoreStore();
 </script>

src/components/docs/DescriptionComponent.vue

@@ -1,8 +1,15 @@
 <template>
 	<v-row>
-		<v-col id="description" class="mb-5" cols="12">
+		<v-col
+			id="description"
+			class="mb-5"
+			cols="12"
+		>
 			<h2 :class="classes.h2">
-				<a :class="classes.headerA" href="#description">#</a>
+				<a
+					:class="classes.headerA"
+					href="#description"
+				>#</a>
 				Description
 			</h2>
 
@@ -17,7 +24,8 @@
 
 <script setup lang="ts">
 import { inject } from 'vue';
+import { DocClasses } from '@/components/types';
 
-const links: string[] = inject('links');
-const classes: string[] = inject('classes');
+const classes = inject<DocClasses>('classes');
+const links = inject('links');
 </script>

src/components/docs/EventsComponent.vue

@@ -1,8 +1,15 @@
 <template>
 	<v-row>
-		<v-col id="events" class="mb-5" cols="12">
+		<v-col
+			id="events"
+			class="mb-5"
+			cols="12"
+		>
 			<h2 :class="classes.h2">
-				<a :class="classes.headerA" href="#events">#</a>
+				<a
+					:class="classes.headerA"
+					href="#events"
+				>#</a>
 				Events
 			</h2>
 
@@ -58,8 +65,9 @@
 
 <script setup lang="ts">
 import { inject, ref } from 'vue';
+import { DocClasses } from '@/components/types';
 
-const classes: string[] = inject('classes');
+const classes = inject<DocClasses>('classes');
 
 const headers: object[] = [
 	{
@@ -84,5 +92,5 @@ const items: object[] = [
 		desc: 'TBD',
 	},
 ];
-const search: string = ref('');
+const search = ref<string>('');
 </script>

src/components/docs/ExampleComponent.vue

@@ -1,8 +1,15 @@
 <template>
 	<v-row>
-		<v-col id="example" class="mb-5" cols="12">
+		<v-col
+			id="example"
+			class="mb-5"
+			cols="12"
+		>
 			<h2 :class="classes.h2">
-				<a :class="classes.headerA" href="#example">#</a>
+				<a
+					:class="classes.headerA"
+					href="#example"
+				>#</a>
 				Example
 			</h2>
 
@@ -17,6 +24,7 @@
 
 <script setup lang="ts">
 import { inject } from 'vue';
+import { DocClasses } from '@/components/types';
 
-const classes: string[] = inject('classes');
+const classes = inject<DocClasses>('classes');
 </script>

src/components/docs/LegalComponent.vue

@@ -1,8 +1,15 @@
 <template>
 	<v-row>
-		<v-col id="legal" class="mb-5" cols="12">
+		<v-col
+			id="legal"
+			class="mb-5"
+			cols="12"
+		>
 			<h2 :class="classes.h2">
-				<a :class="classes.headerA" href="#legal">#</a>
+				<a
+					:class="classes.headerA"
+					href="#legal"
+				>#</a>
 				Legal
 			</h2>
 
@@ -20,6 +27,7 @@
 
 <script setup lang="ts">
 import { inject } from 'vue';
+import { DocClasses } from '@/components/types';
 
-const classes: string[] = inject('classes');
+const classes = inject<DocClasses>('classes');
 </script>