From 9038bfe5c381baf4b387270a29a8ccd5b58435a8 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 27 Jun 2022 04:40:27 +1000
Subject: In .vue files, move <template> sections to top

---
 src/components/Tile.vue | 101 ++++++++++++++++++++++++------------------------
 1 file changed, 50 insertions(+), 51 deletions(-)

(limited to 'src/components/Tile.vue')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 608938e..607b7e9 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,5 +1,54 @@
-<script lang="ts">
+<template>
+<div :style="styles" @transitionend="onTransitionEnd" @scroll="onScroll"> <!-- Need enclosing div for transitions -->
+	<div v-if="isLeaf" :class="[hasOneImage ? 'flex' : 'grid', {'hover:cursor-pointer': isExpandableLeaf}]"
+		class="w-full h-full flex-col grid-cols-1" :style="leafStyles"
+		@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
+		<template v-if="hasOneImage">
+			<h1 :style="leafHeaderStyles">{{displayName}}</h1>
+			<info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
+				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+		</template>
+		<template v-else>
+			<div :style="leafFirstImgStyles" class="col-start-1 row-start-1"></div>
+			<div :style="leafSecondImgStyles" class="col-start-1 row-start-1"></div>
+			<h1 :style="leafHeaderStyles" class="col-start-1 row-start-1 z-10">{{displayName}}</h1>
+			<info-icon v-if="infoIconDisabled" class="col-start-1 row-start-1 z-10"
+				:style="infoIconStyles" :class="infoIconClasses"
+				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+		</template>
+	</div>
+	<div v-else :style="nonleafStyles" ref="nonleaf">
+		<div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
+			@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
+			<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
+			<info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
+				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+		</div>
+		<div :style="sepSweptAreaStyles" :class="sepSweptAreaHideEdgeClass" ref="sepSweptArea">
+			<div v-if="layoutNode.sepSweptArea?.sweptLeft === false"
+				:style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
+				@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
+				<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
+				<info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
+					@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+			</div>
+			<transition name="fadein">
+				<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70 z-20"></div>
+			</transition>
+		</div>
+		<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"
+			@info-click="onInnerInfoIconClick"/>
+	</div>
+	<transition name="fadein">
+		<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70"></div>
+	</transition>
+</div>
+</template>
 
+<script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import InfoIcon from './icon/InfoIcon.vue';
 import {TolNode, TolMap, UiOptions} from '../lib';
@@ -478,56 +527,6 @@ export default defineComponent({
 });
 </script>
 
-<template>
-<div :style="styles" @transitionend="onTransitionEnd" @scroll="onScroll"> <!-- Need enclosing div for transitions -->
-	<div v-if="isLeaf" :class="[hasOneImage ? 'flex' : 'grid', {'hover:cursor-pointer': isExpandableLeaf}]"
-		class="w-full h-full flex-col grid-cols-1" :style="leafStyles"
-		@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
-		<template v-if="hasOneImage">
-			<h1 :style="leafHeaderStyles">{{displayName}}</h1>
-			<info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
-				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
-		</template>
-		<template v-else>
-			<div :style="leafFirstImgStyles" class="col-start-1 row-start-1"></div>
-			<div :style="leafSecondImgStyles" class="col-start-1 row-start-1"></div>
-			<h1 :style="leafHeaderStyles" class="col-start-1 row-start-1 z-10">{{displayName}}</h1>
-			<info-icon v-if="infoIconDisabled" class="col-start-1 row-start-1 z-10"
-				:style="infoIconStyles" :class="infoIconClasses"
-				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
-		</template>
-	</div>
-	<div v-else :style="nonleafStyles" ref="nonleaf">
-		<div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
-			@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
-			<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
-			<info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
-				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
-		</div>
-		<div :style="sepSweptAreaStyles" :class="sepSweptAreaHideEdgeClass" ref="sepSweptArea">
-			<div v-if="layoutNode.sepSweptArea?.sweptLeft === false"
-				:style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
-				@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
-				<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
-				<info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
-					@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
-			</div>
-			<transition name="fadein">
-				<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70 z-20"></div>
-			</transition>
-		</div>
-		<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"
-			@info-click="onInnerInfoIconClick"/>
-	</div>
-	<transition name="fadein">
-		<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70"></div>
-	</transition>
-</div>
-</template>
-
 <style>
 .hide-right-edge::before {
 	content: '';
-- 
cgit v1.2.3

