Convert more components to composition api

src/components/SvgIcon.vue

@@ -15,45 +15,47 @@
   -->
 
 <template>
-  <svg :class="className" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+	<svg :class="className" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-    <title v-if="title">{{ title }}</title>
+		<title v-if="title">{{ title }}</title>
-    <use :xlink:href="iconPath"/>
+		<use :xlink:href="iconPath"/>
-  </svg>
+	</svg>
 </template>
 
 <script>
+import {computed} from "vue";
+
 export default {
-  name: 'svg-icon',
+	name: 'svg-icon',
 
-  props: {
+	props: {
-    name: {
+		name: {
-      type: String,
+			type: String,
-      required: true
+			required: true
-    },
+		},
 
-    title: {
+		title: {
-      type: String,
+			type: String,
-      default: null
+			default: null
-    }
+		}
-  },
+	},
 
-  computed: {
+	setup(props) {
-    iconPath() {
+		const iconPath = computed(() => `#icon--${props.name}`),
-      return `#icon--${this.name}`;
+			className = computed(() => `svg-icon svg-icon--${props.name}`);
-    },
 
-    className() {
+		return {
-      return 'svg-icon svg-icon--' + this.name;
+			iconPath,
-    }
+			className
-  }
+		}
+	}
 };
 </script>
 
 <style>
-  .svg-icon {
+	.svg-icon {
-    pointer-events: none;
+		pointer-events: none;
-	fill: currentColor;
+		fill: currentColor;
-	height: 24px;
+		height: 24px;
-	width: 24px;
+		width: 24px;
-  }
+	}
 </style>

src/components/map/layer/MarkerSetLayer.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, computed} from "@vue/runtime-core";
+import {defineComponent, computed, onMounted, onUnmounted} from "@vue/runtime-core";
 import {useStore} from "@/store";
 import Areas from "@/components/map/vector/Areas.vue";
 import Circles from "@/components/map/vector/Circles.vue";
@@ -31,6 +31,7 @@ import Markers from "@/components/map/vector/Markers.vue";
 import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
 import LiveAtlasLayerGroup from "@/leaflet/layer/LiveAtlasLayerGroup";
 import {LiveAtlasMarkerSet} from "@/index";
+import {watch} from "vue";
 
 export default defineComponent({
 	components: {
@@ -63,57 +64,45 @@ export default defineComponent({
 				priority: props.markerSet.priority,
 			});
 
+		watch(props.markerSet, newValue => {
+			if(newValue && layerGroup) {
+				layerGroup.update({
+					id: props.markerSet.id,
+					minZoom: props.markerSet.minZoom,
+					maxZoom: props.markerSet.maxZoom,
+					showLabels: props.markerSet.showLabels || store.state.components.markers.showLabels,
+					priority: props.markerSet.priority,
+				});
+
+				if(newValue.hidden) {
+					props.leaflet.getLayerManager()
+						.addHiddenLayer(layerGroup, newValue.label, props.markerSet.priority);
+				} else {
+					props.leaflet.getLayerManager()
+						.addLayer(layerGroup, true, newValue.label, props.markerSet.priority);
+				}
+			}
+		}, {deep: true});
+
+		onMounted(() => {
+			if(props.markerSet.hidden) {
+				props.leaflet.getLayerManager()
+					.addHiddenLayer(layerGroup, props.markerSet.label, props.markerSet.priority);
+			} else {
+				props.leaflet.getLayerManager()
+					.addLayer(layerGroup, true, props.markerSet.label, props.markerSet.priority);
+			}
+		});
+
+		onUnmounted(() => props.leaflet.getLayerManager().removeLayer(layerGroup));
+
 		return {
 			markerSettings,
 			layerGroup,
 		}
 	},
-
-	watch: {
-		markerSet: {
-			handler(newValue) {
-				if(newValue && this.layerGroup) {
-					this.layerGroup.update({
-						id: this.markerSet.id,
-						minZoom: this.markerSet.minZoom,
-						maxZoom: this.markerSet.maxZoom,
-						showLabels: this.markerSet.showLabels || useStore().state.components.markers.showLabels,
-						priority: this.markerSet.priority,
-					});
-
-					if(newValue.hidden) {
-						this.leaflet.getLayerManager()
-							.addHiddenLayer(this.layerGroup, newValue.label, this.markerSet.priority);
-					} else {
-						this.leaflet.getLayerManager()
-							.addLayer(this.layerGroup, true, newValue.label, this.markerSet.priority);
-					}
-				}
-			},
-			deep: true,
-		}
-	},
-
-	mounted() {
-		if(this.markerSet.hidden) {
-			this.leaflet.getLayerManager()
-				.addHiddenLayer(this.layerGroup, this.markerSet.label, this.markerSet.priority);
-		} else {
-			this.leaflet.getLayerManager()
-				.addLayer(this.layerGroup, true, this.markerSet.label, this.markerSet.priority);
-		}
-	},
-
-	unmounted() {
-		this.leaflet.getLayerManager().removeLayer(this.layerGroup);
-	},
-
 	render() {
 		return null;
 	}
 })
 </script>
-
-<style scoped>
-
-</style>

src/components/map/layer/PlayersLayer.vue

@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import PlayerMarker from "@/components/map/marker/PlayerMarker.vue";
-import {defineComponent, computed, watch} from "@vue/runtime-core";
+import {defineComponent, computed, watch, onMounted, onUnmounted} from "@vue/runtime-core";
 import {useStore} from "@/store";
 import {LayerGroup} from 'leaflet';
 import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
@@ -50,6 +50,23 @@ export default defineComponent({
 
 		watch(playerCount, (newValue) => playerPane.classList.toggle('no-animations', newValue > 150));
 
+		onMounted(() => {
+			if(!componentSettings.value!.hideByDefault) {
+				props.leaflet.getLayerManager().addLayer(
+					layerGroup,
+					true,
+					store.state.components.playerMarkers!.layerName,
+					componentSettings.value!.layerPriority);
+			} else {
+				props.leaflet.getLayerManager().addHiddenLayer(
+					layerGroup,
+					store.state.components.playerMarkers!.layerName,
+					componentSettings.value!.layerPriority);
+			}
+		});
+
+		onUnmounted(() => props.leaflet.getLayerManager().removeLayer(layerGroup));
+
 		if(playersAboveMarkers.value) {
 			playerPane.style.zIndex = '600';
 		}
@@ -61,27 +78,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		const store = useStore();
-
-		if(!this.componentSettings!.hideByDefault) {
-			this.leaflet.getLayerManager().addLayer(
-				this.layerGroup,
-				true,
-				store.state.components.playerMarkers!.layerName,
-				this.componentSettings!.layerPriority);
-		} else {
-			this.leaflet.getLayerManager().addHiddenLayer(
-				this.layerGroup,
-				store.state.components.playerMarkers!.layerName,
-				this.componentSettings!.layerPriority);
-		}
-	},
-
-	unmounted() {
-		this.leaflet.getLayerManager().removeLayer(this.layerGroup);
-	},
-
 	render() {
 		return null;
 	}

src/components/sidebar/CollapsibleSection.vue

@@ -39,6 +39,7 @@
 	import SvgIcon from "@/components/SvgIcon.vue";
 	import '@/assets/icons/arrow.svg';
 	import {MutationTypes} from "@/store/mutation-types";
+	import {computed} from "vue";
 
 	export default defineComponent({
 		name: 'CollapsibleSection',
@@ -50,19 +51,17 @@
 			}
 		},
 
-		computed: {
+		setup(props) {
-			title(): string {
+			const store = useStore(),
-				return useStore().state.messages.toggleTitle;
+				title = computed(() => store.state.messages.toggleTitle),
-			},
+				collapsed = computed(() => store.state.ui.sidebar.collapsedSections.has(props.name));
 
-			collapsed(): boolean {
+			const toggle = () => store.commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, props.name);
-				return useStore().state.ui.sidebar.collapsedSections.has(this.name);
-			},
-		},
 
-		methods: {
+			return {
-			toggle() {
+				title,
-				useStore().commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, this.name);
+				collapsed,
+				toggle
 			}
 		}
 	});

src/components/sidebar/ServerList.vue

@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import ServerListItem from './ServerListItem.vue';
-import {defineComponent} from 'vue';
+import {computed, defineComponent} from 'vue';
 import {useStore} from "@/store";
 import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
 import RadioList from "@/components/util/RadioList.vue";
@@ -40,13 +40,14 @@ export default defineComponent({
 		ServerListItem
 	},
 
-	computed: {
+	setup() {
-		heading() {
+		const store = useStore(),
-			return useStore().state.messages.serversHeading;
+			heading = computed(() => store.state.messages.serversHeading),
-		},
+			servers = computed(() => store.state.servers);
 
-		servers() {
+		return {
-			return useStore().state.servers;
+			heading,
+			servers
 		}
 	}
 });

src/components/sidebar/ServerListItem.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import {useStore} from "@/store";
-import {defineComponent} from 'vue';
+import {computed, defineComponent} from 'vue';
 import {MutationTypes} from "@/store/mutation-types";
 import {LiveAtlasServerDefinition} from "@/index";
 
@@ -34,16 +34,16 @@ export default defineComponent({
 		}
 	},
 
-	computed: {
+	setup() {
-		currentServer: {
+		const store = useStore(),
-			get() {
+			currentServer = computed({
-				const store = useStore();
+				get: () => store.state.currentServer ? store.state.currentServer.id : undefined,
-				return store.state.currentServer ? store.state.currentServer.id : undefined;
+				set: (value) => value && store.commit(MutationTypes.SET_CURRENT_SERVER, value)
-			},
+			})
-			set(value: string) {
+
-				useStore().commit(MutationTypes.SET_CURRENT_SERVER, value);
+		return {
-			}
+			currentServer,
 		}
-	},
+	}
 });
 </script>

src/components/sidebar/WorldList.vue

@@ -21,14 +21,14 @@
 			<RadioList v-if="worlds.size" class="section__content" aria-labelledby="maps-heading">
 				<WorldListItem :world="world" v-for="[name, world] in worlds" :key="`${prefix}_${currentServer}_${name}`"></WorldListItem>
 			</RadioList>
-			<div v-else class="section__content section__skeleton">{{ skeletonWorlds }}</div>
+			<div v-else class="section__content section__skeleton">{{ skeleton }}</div>
 		</template>
 	</CollapsibleSection>
 </template>
 
 <script lang="ts">
 import WorldListItem from './WorldListItem.vue';
-import {defineComponent} from 'vue';
+import {computed, defineComponent} from 'vue';
 import {useStore} from "@/store";
 import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
 import RadioList from "@/components/util/RadioList.vue";
@@ -48,22 +48,18 @@ export default defineComponent({
 		}
 	},
 
-	computed: {
+	setup() {
-		heading() {
+		const store = useStore(),
-			return useStore().state.messages.worldsHeading;
+			heading = computed(() => store.state.messages.worldsHeading),
-		},
+			skeleton = computed(() => store.state.messages.worldsSkeleton),
+			worlds = computed(() => store.state.worlds),
+			currentServer = computed(() => store.state.currentServer ? store.state.currentServer.id : undefined);
 
-		skeletonWorlds() {
+		return {
-			return useStore().state.messages.worldsSkeleton;
+			heading,
-		},
+			skeleton,
-
+			worlds,
-		worlds() {
+			currentServer
-			return useStore().state.worlds;
-		},
-
-		currentServer() {
-			const store = useStore();
-			return store.state.currentServer ? store.state.currentServer.id : undefined;
 		}
 	}
 });

src/components/sidebar/WorldListItem.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import {useStore} from "@/store";
-import {defineComponent} from 'vue';
+import {computed, defineComponent} from 'vue';
 import {MutationTypes} from "@/store/mutation-types";
 import SvgIcon from "@/components/SvgIcon.vue";
 import "@/assets/icons/block_world_surface.svg";
@@ -62,15 +62,18 @@ export default defineComponent({
 		}
 	},
 
-	computed: {
+	setup() {
-		currentMap: {
+		const store = useStore(),
-			get() {
+			currentMap = computed({
-				const store = useStore();
+				get: () => store.state.currentMap ? [store.state.currentWorld!.name, store.state.currentMap.name] : undefined,
-				return store.state.currentMap ? [store.state.currentWorld!.name, store.state.currentMap.name] : undefined;
+				set: (value) => value && store.commit(MutationTypes.SET_CURRENT_MAP, {
-			},
+					worldName: value[0],
-			set(value: string[]) {
+					mapName: value[1]
-				useStore().commit(MutationTypes.SET_CURRENT_MAP, {worldName: value[0], mapName: value[1]});
+				})
-			}
+			});
+
+		return {
+			currentMap
 		}
 	}
 });

src/components/util/RadioList.vue

@@ -27,13 +27,14 @@ export default defineComponent({
 	name: 'RadioList',
 
 	setup() {
-	},
+		const onKeydown = (e: KeyboardEvent) => {
-
-	methods: {
-		onKeydown(e: KeyboardEvent) {
 			handleKeyboardEvent(e, Array.from((e.currentTarget as HTMLFieldSetElement).elements) as HTMLElement[])
 		}
-	}
+
+		return {
+			onKeydown
+		}
+	},
 });
 </script>