Increase adherence to Vue's Style Guide

Make components have multi-word names.
Make all <v-for>s have a 'key' attribute.
Use scoped styles.
Also add sourcemap generation.

5 files changed, 13 insertions, 12 deletions

diff --git a/src/App.vue b/src/App.vue
index 49beea4..21a4789 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,7 +39,7 @@
 				</transition>
 			</div>
 			<div class="relative grow" :style="{margin: lytOpts.tileSpacing + 'px'}"> <!-- 'Tile area' -->
-				<tile :layoutNode="layoutTree" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts"
+				<tol-tile :layoutNode="layoutTree" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts"
 					:overflownDim="overflownRoot ? tileAreaDims[1] : 0" :skipTransition="justInitialised"
 					@leaf-click="onLeafClick" @nonleaf-click="onNonleafClick"
 					@leaf-click-held="onLeafClickHeld" @nonleaf-click-held="onNonleafClickHeld"
@@ -79,7 +79,7 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 // Components
-import Tile from './components/Tile.vue';
+import TolTile from './components/TolTile.vue';
 import TileInfoModal from './components/TileInfoModal.vue';
 import SearchModal from './components/SearchModal.vue';
 import SettingsModal from './components/SettingsModal.vue';
@@ -1120,7 +1120,7 @@ export default defineComponent({
 		window.removeEventListener('keydown', this.onKeyUp);
 	},
 	components: {
-		Tile, TutorialPane, AncestryBar,
+		TolTile, TutorialPane, AncestryBar,
 		IconButton, SearchIcon, PlayIcon, PauseIcon, SettingsIcon, HelpIcon,
 		TileInfoModal, SearchModal, SettingsModal, HelpModal, LoadingModal,
 	},
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 6f2d37c..3cfd116 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -1,6 +1,6 @@
 <template>
 <div :style="styles" @wheel.stop="onWheelEvt">
-	<tile v-for="(node, idx) in dummyNodes" :key="node.name" class="shrink-0"
+	<tol-tile v-for="(node, idx) in dummyNodes" :key="node.name" class="shrink-0"
 		:layoutNode="node" :tolMap="tolMap" :nonAbsPos="true" :lytOpts="lytOpts" :uiOpts="uiOpts"
 		@leaf-click="onTileClick(nodes[idx])" @info-click="onInfoIconClick"/>
 </div>
@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
-import Tile from './Tile.vue';
+import TolTile from './TolTile.vue';
 import {TolMap} from '../tol';
 import {LayoutNode, LayoutOptions} from '../layout';
 import {UiOptions} from '../lib';
@@ -28,7 +28,7 @@ export default defineComponent({
 			return this.breadth - this.lytOpts.tileSpacing - this.uiOpts.scrollGap;
 				// Intentionally omitting extra tileSpacing, to allow for scrollGap with less image shrinkage
 		},
-		dummyNodes(){ // Childless versions of 'nodes' used to parameterise <tile>s
+		dummyNodes(){ // Childless versions of 'nodes' used to parameterise <tol-tile>s
 			return this.nodes.map(n => {
 				let newNode = new LayoutNode(n.name, []);
 				newNode.dims = [this.imgSz, this.imgSz];
@@ -86,7 +86,7 @@ export default defineComponent({
 	mounted(){
 		this.scrollToEnd();
 	},
-	components: {Tile, },
+	components: {TolTile, },
 	emits: ['ancestor-click', 'info-click', ],
 });
 </script>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index e90707a..5d6345e 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -9,7 +9,7 @@
 			<search-icon @click.stop="onSearch" class="w-8 h-8"/>
 		</div>
 		<div class="absolute top-[100%] w-full overflow-hidden" :style="suggContainerStyles">
-			<div v-for="(sugg, idx) of searchSuggs"
+			<div v-for="(sugg, idx) of searchSuggs" :key="sugg.name + '|' + sugg.canonicalName"
 				:style="{backgroundColor: idx == focusedSuggIdx ? uiOpts.bgColorAltDark : uiOpts.bgColorAlt}"
 				class="border-b p-1 px-2 hover:underline hover:cursor-pointer flex"
 				@click="resolveSearch(sugg.canonicalName || sugg.name)">
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 053604c..ca224bf 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -29,7 +29,8 @@
 				<div> (This is a compound node. The details below describe two descendants) </div>
 			</div>
 		</div>
-		<div v-for="idx in (nodes.length == 1 ? [0] : [0, 1])" class="border-t border-stone-400 p-2 md:p-3 clear-both">
+		<div v-for="idx in (nodes.length == 1 ? [0] : [0, 1])" :key="nodes[idx]!.otolId!"
+			class="border-t border-stone-400 p-2 md:p-3 clear-both">
 			<h1 v-if="nodes.length > 1" class="text-center font-bold mb-1">
 				{{getDisplayName(subNames![idx], nodes[idx])}}
 			</h1>
diff --git a/src/components/Tile.vue b/src/components/TolTile.vue
index 2edd531..afb6616 100644
--- a/src/components/Tile.vue
+++ b/src/components/TolTile.vue
@@ -36,7 +36,7 @@
 				<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 rounded-[inherit] bg-amber-500/70 z-20"/>
 			</transition>
 		</div>
-		<tile v-for="child in visibleChildren" :key="child.name"
+		<tol-tile v-for="child in visibleChildren" :key="child.name"
 			:layoutNode="child" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts" :overflownDim="overflownDim"
 			@leaf-click="onInnerLeafClick" @nonleaf-click="onInnerNonleafClick"
 			@leaf-click-held="onInnerLeafClickHeld" @nonleaf-click-held="onInnerNonleafClickHeld"
@@ -550,13 +550,13 @@ export default defineComponent({
 			}
 		},
 	},
-	name: 'tile', // Note: Need this to use self in template
+	name: 'tol-tile', // Note: Need this to use self in template
 	components: {InfoIcon, },
 	emits: ['leaf-click', 'nonleaf-click', 'leaf-click-held', 'nonleaf-click-held', 'info-click', ],
 });
 </script>
 
-<style>
+<style scoped>
 /* For making a parent-swept-area div look continuous with the tile div */
 .hide-right-edge::before {
 	content: '';