typings

Author: webdevnerdstuff

src/documentation/components/AnswersDialog.vue

@@ -27,9 +27,6 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
-
-
 const modelValue = defineModel<boolean>();
 const { answers } = defineProps<{ answers: any; }>();
 

src/documentation/components/ExampleContainer.vue

@@ -110,21 +110,20 @@
 	</v-col>
 </template>
 
-<script setup>
+<script setup lang="ts">
 
 const emit = defineEmits(['closePicker']);
-const props = defineProps({
-	code: {
-		required: true,
-		type: Object,
-	},
-	codeBlockOptions: {
-		required: true,
-		type: Object,
-	},
-});
 
-const codeBlockSettings = computed(() => props.codeBlockOptions);
+export interface ExampleCode {
+	desc?: string;
+	name?: string;
+	script?: string;
+	template: string;
+}
+
+const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
+const { code } = defineProps<{ code: ExampleCode; }>();
+
 const hasRendered = ref(true);
 const showCode = ref(false);
 const template = ref('template');
@@ -135,10 +134,10 @@ function showCodeBlocks() {
 }
 
 const getHrefId = computed(() => {
-	const id = props.code.name?.toLowerCase().replace(/\s+/g, '-');
+	const id = code.name?.toLowerCase().replace(/\s+/g, '-');
 
 	return `examples-${id}`;
-})
+});
 
 </script>
 

src/documentation/components/MenuComponent.vue

@@ -3,10 +3,10 @@
 		:color="drawerOptions.color ? 'white' : 'primary'"
 		density="compact"
 	>
-		<template v-for="item in menuItems">
+		<template v-for="item, k in menuItems">
 			<v-list-group
 				v-if="item.items"
-				:key="item.items"
+				:key="k"
 				:value="item.title"
 			>
 				<template v-slot:activator="{ props }">
@@ -51,41 +51,42 @@
 	</v-list>
 </template>
 
-<script setup>
-import { inject, onMounted, ref } from 'vue';
+<script setup lang="ts">
 import { useMenuStore } from '@/stores/menu';
 
-const drawerOptions = inject('drawerOptions');
-const store = useMenuStore();
 
-const active = ref('');
-const menuItems = store.menuItems;
+const drawerOptions = inject<Docs.DrawerOptions>('drawerOptions')!;
+const store = useMenuStore();
+const active = ref<string>('');
+const menuItems: Docs.MenuItem[] = store.menuItems;
 
 onMounted(() => {
 	smoothScroll();
 
 	active.value = window.location.hash || '#home';
 });
 
-function smoothScroll() {
-	document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-		anchor.addEventListener('click', (e) => {
+function smoothScroll(): void {
+	document.querySelectorAll<HTMLAnchorElement>('a[href^="#"]').forEach((anchor) => {
+		anchor.addEventListener('click', (e: MouseEvent) => {
 			e.preventDefault();
 
-			const hash = anchor.hash;
-			const id = hash.replace('#', '');
-			const yOffset = -55;
-			const element = document.getElementById(id);
-			const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+			const hash: string = anchor.hash;
+			const id: string = hash.replace('#', '');
+			const yOffset: number = -55;
+			const element: HTMLElement | null = document.getElementById(id);
 
-			active.value = hash;
+			if (element) {
+				const y: number = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
 
-			window.location.hash = hash;
-			window.scrollTo({ behavior: 'smooth', top: y });
+				active.value = hash;
+
+				window.location.hash = hash;
+				window.scrollTo({ behavior: 'smooth', top: y });
+			}
 		});
 	});
 }
-
 </script>
 
 <style lang="scss" scoped>

src/documentation/components/PropsTable.vue

@@ -79,36 +79,27 @@
 	</v-row>
 </template>
 
-<script setup>
-import { inject } from 'vue';
+<script setup lang="ts">
+const classes = inject<Docs.GlobalClasses>('classes')!;
 
+interface Item {
+	name: string;
+	type: string;
+	default: string;
+	desc: string;
+}
 
-const classes = inject('classes');
+interface Props {
+	headers: any;
+	items?: Item[];
+	sectionId?: string;
+	sectionTitle?: string;
+	subtitle?: string;
+}
 
-defineProps({
-	headers: {
-		default: () => [],
-		type: Array,
-	},
-	items: {
-		default: () => [],
-		type: Array,
-	},
-	sectionId: {
-		default: '',
-		type: String,
-	},
-	sectionTitle: {
-		default: null,
-		type: String,
-	},
-	subtitle: {
-		default: null,
-		type: String,
-	},
-});
+defineProps<Props>();
 
-const search = ref('');
+const search = ref<string>('');
 </script>
 
 <style lang="scss" scoped></style>

src/documentation/components/examples/ColumnsExample.vue

@@ -18,12 +18,11 @@
 	/>
 </template>
 
-<script setup>
-import { inject, ref } from 'vue';
+<script setup lang="ts">
 import AnswersDialog from '../AnswersDialog.vue';
 
 
-const links = inject('links');
+const links = inject<Docs.Links>('links')!;
 const dialog = ref(false);
 
 const answers = ref({
@@ -43,7 +42,7 @@ const pages = [
 				},
 				label: 'Foo',
 				name: 'foo',
-				type: 'text',
+				type: 'text' as const,
 			},
 			{
 				columns: {
@@ -52,7 +51,7 @@ const pages = [
 				},
 				label: 'Bar',
 				name: 'bar',
-				type: 'text',
+				type: 'text' as const,
 			},
 		],
 	},
@@ -61,12 +60,12 @@ const pages = [
 			{
 				label: 'Biz',
 				name: 'biz',
-				type: 'text',
+				type: 'text' as const,
 			},
 			{
 				label: 'Baz',
 				name: 'baz',
-				type: 'text',
+				type: 'text' as const,
 			},
 		],
 		pageFieldColumns: {
@@ -76,7 +75,7 @@ const pages = [
 	},
 ];
 
-function submitForm() {
+function submitForm(): void {
 	dialog.value = true;
 }
 
@@ -165,7 +164,7 @@ defineExpose({
 		name: 'Columns',
 		script: scriptCode,
 		template: templateCode,
-	}
+	},
 });
 </script>
 

src/documentation/components/examples/ConditionalExample.vue

@@ -62,7 +62,7 @@ const pages = [
 	},
 ];
 
-function submitForm() {
+function submitForm(): void {
 	dialog.value = true;
 }
 
@@ -135,7 +135,7 @@ defineExpose({
 		name: 'Conditional Fields',
 		script: scriptCode,
 		template: templateCode,
-	}
+	},
 });
 </script>
 

src/documentation/components/examples/FieldSlotExample.vue

@@ -70,18 +70,18 @@ const pages = [
 			{
 				label: 'Foo',
 				name: 'foo',
-				type: 'field',
+				type: 'field' as const,
 			},
 			{
 				label: 'Bar',
 				name: 'bar',
-				type: 'field',
+				type: 'field' as const,
 			},
 		],
 	},
 ];
 
-function submitForm() {
+function submitForm(): void {
 	dialog.value = true;
 }
 
@@ -172,7 +172,7 @@ defineExpose({
 		name: 'Field Slots',
 		script: scriptCode,
 		template: templateCode,
-	}
+	},
 });
 </script>
 

src/documentation/components/examples/SimpleExample.vue

@@ -29,7 +29,7 @@ const pages = [
 			{
 				label: 'Foo',
 				name: 'foo',
-				type: 'text',
+				type: 'text' as const,
 			},
 		],
 		title: 'Page 1',
@@ -39,14 +39,14 @@ const pages = [
 			{
 				label: 'Bar',
 				name: 'bar',
-				type: 'text',
+				type: 'text' as const,
 			},
 		],
 		title: 'Page 2',
-	}
+	},
 ];
 
-function submitForm() {
+function submitForm(): void {
 	dialog.value = true;
 }
 
@@ -76,7 +76,7 @@ const pages = [
       {
         label: 'Foo',
         name: 'foo',
-        type: 'text',
+        type: 'text' as const,
       },
     ],
   },
@@ -86,7 +86,7 @@ const pages = [
         {
         label: 'Bar',
         name: 'bar',
-        type: 'text',
+        type: 'text' as const,
         },
       ],
   }
@@ -102,7 +102,7 @@ defineExpose({
 		desc: 'A simple example of the <code class="ic">VStepperForm</code> component.',
 		script: scriptCode,
 		template: templateCode,
-	}
+	},
 });
 </script>