fixes leaving div wehn removing custom control

.gitignore

@@ -19,3 +19,4 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+.vuepress

dev/serve.vue

@@ -17,7 +17,7 @@
 			<mgl-navigation-control/>
 			<mgl-scale-control/>
 			<mgl-geolocation-control/>
-			<mgl-custom-control position="top-left" :no-classes="!useClasses">
+			<mgl-custom-control v-if="showCustomControl" position="top-left" :no-classes="!useClasses">
 				<mgl-button type="mdi" :path="buttonIcon" style="color: deepskyblue"/>
 			</mgl-custom-control>
 			<mgl-style-switch-control :map-styles="mapStyles" :position="controlPosition"/>
@@ -56,6 +56,10 @@
 			<input type="checkbox" v-model="useClasses" id="noclasses">
 			<label for="noclasses">Use Custom Control Classes</label>
 		</div>
+		<div>
+			<input type="checkbox" v-model="showCustomControl" id="showcustom">
+			<label for="showcustom">Show Custom Control</label>
+		</div>
 	</div>
 </template>
 
@@ -72,12 +76,14 @@
 		name: 'ServeDev',
 		setup() {
 
-			const map = useMap();
+			const map               = useMap(),
+				  showCustomControl = ref(true);
 
 			watch(toRef(map, 'isLoaded'), () => (console.log('IS LOADED', map)), { immediate: true });
 			watch(toRef(map, 'isMounted'), v => (console.log('IS MOUNTED', v)), { immediate: true });
 
 			return {
+				showCustomControl,
 				loaded           : ref(0),
 				isZooming        : false,
 				controlPosition  : ref('top-left'),

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "1.0.0-beta.19",
+	"version": "1.0.0-beta.20",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",
@@ -49,22 +49,24 @@
 		"mitt": "^3.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.15.0",
-		"@babel/preset-env": "^7.15.0",
+		"@babel/core": "^7.15.5",
+		"@babel/preset-env": "^7.15.6",
 		"@babel/preset-typescript": "^7.15.0",
-		"@mdi/js": "^5.9.55",
+		"@mdi/js": "^6.1.95",
 		"@rollup/plugin-alias": "^3.1.5",
 		"@rollup/plugin-babel": "^5.3.0",
 		"@rollup/plugin-commonjs": "^20.0.0",
 		"@rollup/plugin-node-resolve": "^13.0.4",
 		"@rollup/plugin-replace": "^3.0.0",
 		"@types/geojson": "^7946.0.8",
+		"@vue/babel-preset-app": "^4.5.13",
 		"@vue/cli-plugin-babel": "^4.5.13",
 		"@vue/cli-plugin-typescript": "^4.5.13",
 		"@vue/cli-service": "^4.5.13",
-		"@vue/compiler-sfc": "^3.2.4",
+		"@vue/compiler-sfc": "^3.2.11",
 		"@zerollup/ts-transform-paths": "^1.7.18",
 		"autoprefixer": "^9.8.6",
+		"babel-loader": "^8.2.2",
 		"cross-env": "^7.0.3",
 		"geojson": "^0.5.0",
 		"maplibre-gl": "^1.15.2",
@@ -79,12 +81,12 @@
 		"rollup-plugin-terser": "^7.0.2",
 		"rollup-plugin-typescript2": "^0.30.0",
 		"rollup-plugin-vue": "^6.0.0",
-		"sass": "^1.38.1",
+		"sass": "^1.39.2",
 		"sass-loader": "^10.2.0",
 		"ttypescript": "^1.5.12",
-		"typescript": "^4.3.5",
+		"typescript": "^4.4.2",
 		"vue": "^3.0.5",
-		"vue-cli-plugin-webpack-bundle-analyzer": "~4.0.0"
+		"vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0"
 	},
 	"peerDependencies": {
 		"maplibre-gl": "^1.15.2",

src/components/controls/custom.control.ts

@@ -27,6 +27,7 @@ export class CustomControl implements IControl {
 
 	onRemove(): void {
 		this.isAdded.value = false;
+		this.container.remove();
 	}
 
 	setClasses(noClasses: boolean) {
@@ -62,7 +63,10 @@ export default defineComponent({
 			  control = new CustomControl(isAdded, props.noClasses);
 		usePositionWatcher(() => props.position, map, control);
 		watch(() => props.noClasses, v => control.setClasses(v));
-		onBeforeUnmount(() => map.value.removeControl(control));
+		onBeforeUnmount(() => {
+			console.log('onBeforeUnmount');
+			map.value.removeControl(control);
+		});
 
 		return { isAdded, container: control.container };