package updates and add ts to docs

Author: webdevnerdstuff

src/App.vue

@@ -144,29 +144,27 @@
 	</v-app>
 </template>
 
-<script setup>
-import { onMounted, computed, provide, ref } from 'vue';
+<script setup lang="ts">
+import Prism from 'prismjs';
 import { useDisplay } from 'vuetify';
-import AppBar from './documentation/layout/AppBar.vue';
 import MenuComponent from './documentation/components/MenuComponent.vue';
 import DocsPage from './documentation/DocsPage.vue';
+import AppBar from './documentation/layout/AppBar.vue';
 import { useCoreStore } from './stores/index';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-import Prism from 'prismjs';
 import 'prismjs/components/prism-typescript.js';
 
 
 onMounted(() => {
+	Prism.highlightAll();
 	getLocalStorage();
 });
 
 const { smAndUp } = useDisplay();
-
-const isSmAndUp = computed(() => smAndUp.value);
+const isSmAndUp = computed<boolean>(() => smAndUp.value);
 const store = useCoreStore();
-const drawer = ref(isSmAndUp.value);
+const drawer = ref<boolean>(isSmAndUp.value);
 const drawerOffset = ref('256px');
-const drawerOptions = ref({
+const drawerOptions: Ref<Docs.DrawerOptions> = ref<Docs.DrawerOptions>({
 	absolute: false,
 	color: '',
 	dark: true,
@@ -177,10 +175,10 @@ const drawerOptions = ref({
 	handleColor: 'primary',
 	handlePosition: 'center',
 	location: 'left',
-	maxHeight: "50%",
-	maxWidth: "50%",
-	minHeight: "256",
-	minWidth: "256",
+	maxHeight: '50%',
+	maxWidth: '50%',
+	minHeight: '256',
+	minWidth: '256',
 	rail: false,
 	railWidth: 56,
 	resizable: true,
@@ -209,11 +207,11 @@ const gridDrawerOptions = ref({
 const gridDrawerWidth = ref('256px');
 const computedWidth = ref(gridDrawerWidth.value);
 
-const codeBlockPlugin = 'prismjs';
-const codeBlockLightTheme = 'tomorrow';
-const codeBlockDarkTheme = 'tomorrow';
+const codeBlockPlugin: string = 'prismjs';
+const codeBlockLightTheme: string = 'tomorrow';
+const codeBlockDarkTheme: string = 'tomorrow';
 
-const codeBlockSettings = ref({
+const codeBlockSettings: Ref<Docs.CodeBlockSettings> = ref<Docs.CodeBlockSettings>({
 	plugin: codeBlockPlugin,
 	theme: codeBlockDarkTheme,
 });
@@ -229,8 +227,9 @@ function updateCodeBlockTheme(val) {
 	drawerOptions.value.dark = val === 'dark';
 }
 
-provide('drawerOptions', drawerOptions);
-provide('links', store.links);
+provide<Docs.CodeBlockSettings>('codeBlockSettings', codeBlockSettings.value);
+provide<Docs.DrawerOptions>('drawerOptions', drawerOptions.value);
+provide<Docs.Links>('links', store.links);
 
 function drawerClose(val) {
 	eventTriggered('drawerClose', val);
@@ -304,11 +303,38 @@ function gridHandleDoubleClick(evt) {
 </script>
 
 <style lang="scss">
+:root {
+	--list-item-padding-left: 50px;
+	--list-item-level-3-padding-left: 26px;
+}
+
 html {
 	scroll-behavior: smooth;
 	scroll-padding-top: 70px;
 }
 
+a {
+	&:not(.v-list-item, .v-btn, .v-icon, .app-link) {
+		color: #bb86fc;
+
+		&:hover {
+			color: #b39ddb;
+		}
+	}
+}
+
+.v-theme--light {
+	a {
+		&:not(.v-list-item, .v-btn, .v-icon, .app-link) {
+			color: #6200ee;
+
+			&:hover {
+				color: #3700b3;
+			}
+		}
+	}
+}
+
 .top-app-bar {
 	z-index: 99 !important;
 
@@ -330,10 +356,20 @@ html {
 		margin: 0 -0.7em;
 		position: absolute;
 
+		&:hover {
+			color: rgb(var(--v-theme-primary));
+		}
+
 		&:not(:hover, :focus) {
 			opacity: 0;
 		}
 	}
+
+	&.text-secondary {
+		> a {
+			color: rgb(var(--v-theme-secondary));
+		}
+	}
 }
 
 .name-item:not(:hover, :focus) span {
@@ -344,3 +380,25 @@ html {
 	margin: 0;
 }
 </style>
+
+<style lang="scss" scoped>
+:deep(pre),
+:deep(code) {
+	&.ic {
+		background-color: rgb(255 255 255 / 10%) !important;
+		border-radius: 3px;
+		font-size: 85%;
+		font-weight: normal;
+		padding: 0.2em 0.4em;
+	}
+}
+
+.v-theme--light {
+	:deep(pre),
+	:deep(code) {
+		&.ic {
+			background-color: rgb(0 0 0 / 10%) !important;
+		}
+	}
+}
+</style>

src/documentation/DocsPage.vue

@@ -13,6 +13,7 @@
 			<h1 class="v-heading text-h3 text-sm-h3 mb-4">
 				Vuetify 3 Resize Drawer
 			</h1>
+			<p class="mb-4 text-grey-darken-1">by WebDevNerdStuff</p>
 			<v-chip
 				color="primary"
 				size="small"
@@ -39,7 +40,7 @@
 
 			<v-row>
 				<v-col cols="12">
-					<CodeBlock
+					<VCodeBlock
 						code="pnpm add @wdns/vuetify-resize-drawer"
 						:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
 						lang="plain"
@@ -52,105 +53,80 @@
 								target="_blank"
 							>pnpm</a>:
 						</template>
-					</CodeBlock>
+					</VCodeBlock>
 				</v-col>
 				<v-col cols="12">
-					<CodeBlock
+					<VCodeBlock
 						code="npm i @wdns/vuetify-resize-drawer"
 						highlightjs
 						lang="plain"
 					>
 						<template #label>Using npm:</template>
-					</CodeBlock>
+					</VCodeBlock>
 				</v-col>
 			</v-row>
 		</v-col>
 	</v-row>
 
 	<!-- Description -->
-	<DescriptionSection
-		:classes="classes"
-		:drawerOptions="drawerOptions"
-		:links="links"
-	/>
+	<Section.DescriptionSection />
 
 	<!-- Usage -->
-	<UsageSection :codeBlockOptions="codeBlockOptions" />
+	<Section.UsageSection />
 
 	<!-- Props -->
-	<PropsSection @updateOptions="updatedOptions" />
+	<Section.PropsSection @updateOptions="updatedOptions" />
 
 	<!-- Grid -->
-	<GridSection @toggle-grid-drawer="toggleGridDrawer" />
+	<Section.GridSection @toggle-grid-drawer="toggleGridDrawer" />
 
 	<!-- Events -->
-	<EventsSection :codeBlockOptions="codeBlockOptions" />
+	<Section.EventsSection />
 
 	<!-- Slots -->
-	<SlotsSection />
+	<Section.SlotsSection />
 
 	<!-- SASS Variables -->
-	<SassVariablesSection />
+	<Section.SassVariablesSection />
 
 	<!-- Example -->
-	<ExampleSection :codeBlockOptions="codeBlockOptions" />
+	<Section.ExampleSection />
 
 	<!-- Playground -->
-	<PlaygroundSection :codeBlockOptions="codeBlockOptions" />
+	<Section.PlaygroundSection />
 
 	<!-- Dependencies -->
-	<DependenciesSection />
+	<Section.DependenciesSection />
 
 	<!-- License -->
-	<LicenseSection />
+	<Section.LicenseSection />
 
 	<!-- Legal -->
-	<LegalSection />
+	<Section.LegalSection />
 </template>
 
-<script setup>
-import { computed, inject, provide, reactive, ref } from 'vue';
+<script setup lang="ts">
+import * as Section from '@/documentation/sections';
 import packageInfo from '../../package.json';
-import {
-	DependenciesSection,
-	DescriptionSection,
-	EventsSection,
-	ExampleSection,
-	GridSection,
-	LegalSection,
-	LicenseSection,
-	PlaygroundSection,
-	PropsSection,
-	SassVariablesSection,
-	SlotsSection,
-	UsageSection,
-} from '@/documentation/sections';
 
 const emit = defineEmits([
 	'toggleGridDrawer',
 	'updateOptions',
 ]);
 
-const props = defineProps({
-	codeBlockOptions: {
-		required: true,
-		type: Object,
-	},
-});
+const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
+const links = inject<Docs.Links>('links')!;
 
-const codeBlockSettings = computed(() => props.codeBlockOptions);
-const links = inject('links');
 const classes = reactive({
 	appLink: 'app-link text-decoration-none primary--text font-weight-medium d-inline-block font-weight-bold',
 	h2: 'text-primary v-heading text-h4 text-sm-h4 mb-2',
 	h3: 'text-blue-darken-2 v-heading text-h5 text-sm-h5 mb-0',
+	h4: 'text-secondary v-heading text-h6 text-sm-h6 mb-0',
 	headerA: 'text-decoration-none text-right text-md-left d-none d-sm-flex',
 });
-const componentVersion = ref(packageInfo.version);
-
-const drawerOptions = inject('drawerOptions');
-provide('classes', classes);
+const componentVersion = ref<string | number>(packageInfo.version);
 
+provide<Docs.GlobalClasses>('classes', classes);
 
 function updatedOptions(event) {
 	emit('updateOptions', event);
@@ -161,32 +137,4 @@ function toggleGridDrawer() {
 }
 </script>
 
-<style lang="scss">
-:deep(code) {
-	&.ic {
-		background-color: rgb(255 255 255 / 10%) !important;
-		border-radius: 3px;
-		font-size: 85%;
-		font-weight: normal;
-		padding: 0.2em 0.4em;
-	}
-}
-
-code {
-	&.ic {
-		background-color: rgb(255 255 255 / 10%) !important;
-		border-radius: 3px;
-		font-size: 85%;
-		font-weight: normal;
-		padding: 0.2em 0.4em;
-	}
-}
-
-.v-theme--light {
-	code {
-		&.ic {
-			background-color: rgb(0 0 0 / 10%) !important;
-		}
-	}
-}
-</style>
+<style lang="scss"></style>