@kiva/kv-components 3.38.0 → 3.38.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.38.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.38.0...@kiva/kv-components@3.38.1) (2023-08-30)
+
+
+### Bug Fixes
+
+* kvmap component refactor to avoid using vue meta package ([#287](https://github.com/kiva/kv-ui-elements/issues/287)) ([72f5240](https://github.com/kiva/kv-ui-elements/commit/72f524037358f039032ebd1c8d1f4e106ab6ff10))
+
+
+
+
+
 # [3.38.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.37.0...@kiva/kv-components@3.38.0) (2023-08-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.38.0",
+  "version": "3.38.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,6 @@
     "tailwindcss": "^3.0.18",
     "vue": "^2.6.14",
     "vue-loader": "^15.9.6",
-    "vue-meta": "^2.4.0",
     "vue-router": "^3.5.2",
     "vue-template-compiler": "^2.6.12"
   },
@@ -76,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "00704fdebcb089c0ad690f58a3d9790c76d69e3f"
+  "gitHead": "75d76cdba8cf94ff0ae555f9933fcbd038df8404"
 }

package/vue/.storybook/preview.js

@@ -3,7 +3,6 @@ import addons from '@storybook/addons';
 import KvThemeProvider from '../KvThemeProvider.vue';
 import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors.cjs';
 import Vue from 'vue';
-import Meta from 'vue-meta';
 import VueCompositionApi from '@vue/composition-api';
 import VueRouter from 'vue-router';
 
@@ -12,9 +11,6 @@ Vue.use(VueCompositionApi);
 
 Vue.use(VueRouter);
 
-// initialize vue-meta
-Vue.use(Meta);
-
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

package/vue/KvMap.vue

@@ -15,43 +15,6 @@
 <script>
 export default {
 	name: 'KvMap',
-	metaInfo() {
-		return {
-			script: [].concat(!this.hasWebGL ? [
-				// leaflet - uses raster tiles for additional browser coverage
-				{
-					vmid: `leafletjs${this.mapId}`,
-					src: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',
-					async: true,
-					defer: true,
-				},
-			] : []).concat(this.hasWebGL ? [
-				// maplibregl - uses vector tiles and webgl for rendering
-				{
-					vmid: `maplibregljs${this.mapId}`,
-					src: 'https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js',
-					async: true,
-					defer: true,
-				},
-			] : []),
-			link: [
-			].concat(!this.hasWebGL ? [
-				// leaflet - uses raster tiles for additional browser coverage
-				{
-					vmid: `leafletcss${this.mapId}`,
-					rel: 'stylesheet',
-					href: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css',
-				},
-			] : []).concat(this.hasWebGL ? [
-				// maplibregl - uses vector tiles and webgl for rendering
-				{
-					vmid: `maplibreglcss${this.mapId}`,
-					rel: 'stylesheet',
-					href: 'https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css',
-				},
-			] : []),
-		};
-	},
 	props: {
 		/**
 		 * Aspect Ration for computed map dimensions
@@ -245,10 +208,20 @@ export default {
 		},
 		initializeMap() {
 			/**
-			 * This initial checkWebGL() call kicks off the vue-meta asset inclusion
+			 * This initial checkWebGL() call kicks off the library asset inclusion
 			 * We then start polling for the readiness of our selected map library and initialize it once ready
 			 */
+			const mapScript = document.createElement('script');
+			const mapStyle = document.createElement('link');
+			mapScript.setAttribute('async', true);
+			mapScript.setAttribute('defer', true);
+			mapStyle.setAttribute('rel', 'stylesheet');
 			if (this.checkWebGL()) {
+				mapScript.setAttribute('vmid', `maplibregljs${this.mapId}`);
+				mapStyle.setAttribute('vmid', `maplibreglcss${this.mapId}`);
+				mapScript.setAttribute('src', 'https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js');
+				mapStyle.setAttribute('href', 'https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css');
+
 				this.testDelayedGlobalLibrary('maplibregl').then((response) => {
 					if (response.loaded && !this.mapLoaded && !this.useLeaflet && this.lat && this.long) {
 						this.initializeMapLibre();
@@ -256,6 +229,11 @@ export default {
 					}
 				});
 			} else {
+				mapScript.setAttribute('vmid', `leafletjs${this.mapId}`);
+				mapStyle.setAttribute('vmid', `leaftletcss${this.mapId}`);
+				mapScript.setAttribute('src', 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js');
+				mapStyle.setAttribute('href', 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');
+
 				this.testDelayedGlobalLibrary('L').then((leafletTest) => {
 					if (leafletTest.loaded && !this.mapLoaded && this.lat && this.long) {
 						this.initializeLeaflet();
@@ -263,6 +241,8 @@ export default {
 					}
 				});
 			}
+			document.head.appendChild(mapScript);
+			document.head.appendChild(mapStyle);
 		},
 		initializeLeaflet() {
 			/* eslint-disable no-undef, max-len */