From bce4ab3facf63f70a0dd3cefa1f8c82453dba2d4 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 24 Jun 2022 19:12:13 +1000
Subject: Add type annotations for UI options

---
 src/components/AncestryBar.vue   | 7 +++----
 src/components/HelpModal.vue     | 3 ++-
 src/components/SearchModal.vue   | 4 ++--
 src/components/SettingsModal.vue | 5 +++--
 src/components/Tile.vue          | 8 +++-----
 src/components/TileInfoModal.vue | 8 +++-----
 src/components/TutorialPane.vue  | 6 +++---
 7 files changed, 19 insertions(+), 22 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index e11725f..85a8f99 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -1,9 +1,8 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import Tile from './Tile.vue'
-import {LayoutNode} from '../layout';
-import type {LayoutOptions} from '../layout';
-import type {TolMap} from '../lib';
+import {LayoutNode, LayoutOptions} from '../layout';
+import {TolMap, UiOptions} from '../lib';
 
 // Displays a sequence of nodes, representing ancestors from a tree-of-life root to a currently-active root
 export default defineComponent({
@@ -13,7 +12,7 @@ export default defineComponent({
 		// Other
 		tolMap: {type: Object as PropType<TolMap>, required: true},
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	computed: {
 		usedNodes(){ // Childless versions of 'nodes' used to parameterise <tile>
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 009f694..8644a26 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -2,11 +2,12 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import RButton from './RButton.vue';
+import {UiOptions} from '../lib';
 
 // Displays help information
 export default defineComponent({
 	props: {
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	methods: {
 		onCloseClick(evt: Event){
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index dc9da4c..7b0c23e 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -4,7 +4,7 @@ import SearchIcon from './icon/SearchIcon.vue';
 import LogInIcon from './icon/LogInIcon.vue';
 import InfoIcon from './icon/InfoIcon.vue';
 import {LayoutNode} from '../layout';
-import type {TolMap, SearchSugg, SearchSuggResponse} from '../lib';
+import {TolMap, SearchSugg, SearchSuggResponse, UiOptions} from '../lib';
 
 // Displays a search box, and sends search requests
 export default defineComponent({
@@ -20,7 +20,7 @@ export default defineComponent({
 	},
 	props: {
 		tolMap: {type: Object as PropType<TolMap>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	computed: {
 		infoIconStyles(): Record<string,string> {
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 1426a36..36e3564 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -2,13 +2,14 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import RButton from './RButton.vue';
-import type {LayoutOptions} from '../layout';
+import {LayoutOptions} from '../layout';
+import {UiOptions} from '../lib';
 
 // Displays configurable options, and sends option-change requests
 export default defineComponent({
 	props: {
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	data(){
 		return {
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 33eb62f..22a7333 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,10 +1,8 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import InfoIcon from './icon/InfoIcon.vue';
-import {LayoutNode} from '../layout';
-import type {LayoutOptions} from '../layout';
-import type {TolMap} from '../lib';
-import {TolNode} from '../lib';
+import {LayoutNode, LayoutOptions} from '../layout';
+import {TolNode, TolMap, UiOptions} from '../lib';
 import {capitalizeWords} from '../lib';
 
 // Displays one, or a hierarchy of, tree-of-life nodes, as a 'tile'
@@ -14,7 +12,7 @@ export default defineComponent({
 		tolMap: {type: Object as PropType<TolMap>, required: true},
 		// Options
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 		// Other
 		skipTransition: {type: Boolean, default: false},
 		nonAbsPos: {type: Boolean, default: false},
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 83155ba..6fcb023 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -2,10 +2,8 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import Tile from './Tile.vue'
-import {LayoutNode} from '../layout';
-import type {LayoutOptions} from '../layout';
-import type {TolMap} from '../lib';
-import {TolNode, DescInfo, ImgInfo, TileInfoResponse} from '../lib';
+import {LayoutNode, LayoutOptions} from '../layout';
+import {TolNode, TolMap, UiOptions, DescInfo, ImgInfo, TileInfoResponse} from '../lib';
 import {capitalizeWords} from '../lib';
 
 // Displays information about a tree-of-life node
@@ -25,7 +23,7 @@ export default defineComponent({
 		nodeName: {type: String, required: true},
 		tolMap: {type: Object as PropType<TolMap>, required: true},
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	computed: {
 		displayName(): string {
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 3cc1eb6..0bbe8e9 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -2,11 +2,11 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import RButton from './RButton.vue';
-import {Action} from '../lib';
+import {Action, UiOptions} from '../lib';
 
 export default defineComponent({
 	props: {
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 		triggerFlag: {type: Boolean, required: true},
 		skipWelcome: {type: Boolean, default: false},
 		height: {type: String, default: 'auto'},
@@ -73,7 +73,7 @@ export default defineComponent({
 			let disabledActions = this.uiOpts.disabledActions;
 			let currentAction = stageActions[this.stage];
 			for (let i = 1; i <= this.maxStage; i++){
-				let action = stageActions[i];
+				let action = stageActions[i] as Action;
 				if (i <= this.stage){
 					if (disabledActions.has(action)){
 						disabledActions.delete(action);
-- 
cgit v1.2.3