add ts

Author: webdevnerdstuff

src/App.vue

@@ -28,67 +28,57 @@
 	</v-app>
 </template>
 
-<script setup>
-import { computed, provide, ref } from 'vue';
+<script setup lang="ts">
 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 { 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';
 
 
-const { smAndUp } = useDisplay();
+onMounted(() => {
+	Prism.highlightAll();
+});
+
 
-const isSmAndUp = computed(() => smAndUp.value);
+const { smAndUp } = useDisplay();
+const isSmAndUp = computed<boolean>(() => smAndUp.value);
 const store = useCoreStore();
-const drawer = ref(isSmAndUp.value);
-const drawerOptions = ref({
+const drawer = ref<boolean>(isSmAndUp.value);
+const drawerOptions: Ref<Docs.DrawerOptions> = ref<Docs.DrawerOptions>({
 	absolute: false,
 	color: '',
 	elevation: 10,
 });
 
+const codeBlockPlugin: string = 'prismjs';
+const codeBlockLightTheme: string = 'tomorrow';
+const codeBlockDarkTheme: string = 'tomorrow';
 
-const codeBlockPlugin = 'prismjs';
-const codeBlockLightTheme = 'tomorrow';
-const codeBlockDarkTheme = 'tomorrow';
-
-const codeBlockSettings = ref({
+const codeBlockSettings: Ref<Docs.CodeBlockSettings> = ref<Docs.CodeBlockSettings>({
 	plugin: codeBlockPlugin,
 	theme: codeBlockDarkTheme,
 });
 
-function updateCodeBlockTheme(val) {
+function updateCodeBlockTheme(val: string): void {
 	codeBlockSettings.value.theme = codeBlockLightTheme;
 
 	if (val === 'dark') {
 		codeBlockSettings.value.theme = codeBlockDarkTheme;
 	}
 }
 
-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 toggleDrawer() {
+function toggleDrawer(): void {
 	drawer.value = !drawer.value;
 }
 </script>
 
-<style lang="scss" scoped>
-: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;
-	}
-}
-</style>
-
 <style lang="scss">
 html {
 	scroll-behavior: smooth;

src/documentation/DocsPage.vue

@@ -69,16 +69,16 @@
 	</v-row>
 
 	<!-- Description -->
-	<Section.Description />
+	<Section.DescriptionSection />
 
 	<!-- Usage -->
-	<Section.Usage :codeBlockOptions="codeBlockOptions" />
+	<Section.UsageSection />
 
 	<!-- Components -->
 	<!-- <Section.Components :codeBlockOptions="codeBlockOptions" /> -->
 
 	<!-- Props -->
-	<Section.Props :codeBlockOptions="codeBlockOptions" />
+	<Section.PropsSection />
 
 	<!-- Validation -->
 	<Section.Validation />
@@ -87,51 +87,42 @@
 	<Section.Example :codeBlockOptions="codeBlockOptions" />
 
 	<!-- Events -->
-	<Section.Events :codeBlockOptions="codeBlockOptions" />
+	<Section.EventsSection />
 
 	<!-- Slots -->
-	<Section.Slots :codeBlockOptions="codeBlockOptions" />
+	<Section.SlotsSection />
 
 	<!-- Playground -->
-	<Section.Playground :codeBlockOptions="codeBlockOptions" />
+	<Section.PlaygroundSection />
 
 	<!-- Dependencies -->
-	<Section.Dependencies />
+	<Section.DependenciesSection />
 
 	<!-- License -->
-	<Section.License />
+	<Section.LicenseSection />
 
 	<!-- Legal -->
-	<Section.Legal />
+	<Section.LegalSection />
 </template>
 
-<script setup>
-import { inject, provide, reactive, ref } from 'vue';
+<script setup lang="ts">
 import packageInfo from '../../package.json';
 import * as Section from '@/documentation/sections';
 
 
-const props = defineProps({
-	codeBlockOptions: {
-		required: true,
-		type: Object,
-	},
-});
-
-const codeBlockSettings = computed(() => props.codeBlockOptions);
-const links = inject('links');
+const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
+const links = inject<Docs.Links>('links')!;
 
-const classes = reactive({
+const classes = reactive<Docs.GlobalClasses>({
 	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 componentVersion = ref<string | number>(packageInfo.version);
 
-provide('classes', classes);
-provide('codeBlockSettings', codeBlockSettings);
+provide<Docs.GlobalClasses>('classes', classes);
 </script>
 
 <style lang="scss" scoped>

src/documentation/sections/ComponentsSection.vue

@@ -19,21 +19,8 @@
 	</v-row>
 </template>
 
-<script setup>
-import { inject } from 'vue';
-// import { useCoreStore } from '@/stores/index';
-
-
-defineProps({
-	codeBlockOptions: {
-		required: true,
-		type: Object,
-	},
-});
-
-const classes = inject('classes');
-// const store = useCoreStore();
+<script setup lang="ts">
+const classes = inject<Docs.GlobalClasses>('classes')!;
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/documentation/sections/DependenciesSection.vue

@@ -38,11 +38,10 @@
 	</v-row>
 </template>
 
-<script setup>
-import { inject } from 'vue';
+<script setup lang="ts">
 import { useCoreStore } from '@/stores/index';
 
 
-const classes = inject('classes');
+const classes = inject<Docs.GlobalClasses>('classes')!;
 const store = useCoreStore();
 </script>

src/documentation/sections/DescriptionSection.vue

@@ -20,9 +20,6 @@
 	</v-row>
 </template>
 
-<script setup>
-import { inject } from 'vue';
-
-
-const classes = inject('classes');
+<script setup lang="ts">
+const classes = inject<Docs.GlobalClasses>('classes')!;
 </script>

src/documentation/sections/EventsSection.vue

@@ -68,19 +68,9 @@
 </template>
 
 
-<script setup>
-import { computed, inject } from 'vue';
-
-
-const props = defineProps({
-	codeBlockOptions: {
-		required: true,
-		type: Object,
-	},
-});
-
-const codeBlockSettings = computed(() => props.codeBlockOptions);
-const classes = inject('classes');
+<script setup lang="ts">
+const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
+const classes = inject<Docs.GlobalClasses>('classes')!;
 
 const headers = [
 	{

src/documentation/sections/ExampleSection.vue

@@ -16,7 +16,7 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('SimpleExampleRef')"
-			:codeBlockOptions="codeBlockOptions"
+			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('SimpleExampleRef');"
 		>
 			<Example.SimpleExample
@@ -27,7 +27,7 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ColumnsExampleRef')"
-			:codeBlockOptions="codeBlockOptions"
+			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ColumnsExampleRef');"
 		>
 			<Example.ColumnsExample
@@ -38,7 +38,7 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('FieldSlotExampleRef')"
-			:codeBlockOptions="codeBlockOptions"
+			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('FieldSlotExampleRef');"
 		>
 			<Example.FieldSlotExample
@@ -50,7 +50,7 @@
 		<ExampleContainer
 			id="validation-example"
 			:code="getTemplateCode('ValidationExampleRef')"
-			:codeBlockOptions="codeBlockOptions"
+			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ValidationExampleRef');"
 		>
 			<Example.ValidationExample
@@ -61,7 +61,7 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ConditionalExampleRef')"
-			:codeBlockOptions="codeBlockOptions"
+			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ConditionalExampleRef');"
 		>
 			<Example.ConditionalExample
@@ -72,7 +72,7 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('SummaryPageExampleRef')"
-			:codeBlockOptions="codeBlockOptions"
+			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('SummaryPageExampleRef');"
 		>
 			<Example.SummaryPageExample
@@ -83,21 +83,13 @@
 	</v-row>
 </template>
 
-<script setup>
-import { inject } from 'vue';
+<script setup lang="ts">
 import ExampleContainer from '../components/ExampleContainer.vue';
 import * as Example from '../components/examples';
 
 
-defineProps({
-	codeBlockOptions: {
-		required: true,
-		type: Object,
-	},
-});
-
-
-const classes = inject('classes');
+const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
+const classes = inject<Docs.GlobalClasses>('classes')!;
 
 
 const SimpleExampleRef = ref(null);