@kiva/kv-components 3.36.0 → 3.38.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Features
+
+* kvmap ported to kv components library ([#286](https://github.com/kiva/kv-ui-elements/issues/286)) ([373e53f](https://github.com/kiva/kv-ui-elements/commit/373e53fd407d161e79033826a6063fbd5ca5b2ce))
+
+
+
+
+
+# [3.37.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.36.0...@kiva/kv-components@3.37.0) (2023-08-18)
+
+
+### Features
+
+* update header icon ([a593f2c](https://github.com/kiva/kv-ui-elements/commit/a593f2c4ba2285a1917622db55a88ff68097fe89))
+
+
+
+
+
 # [3.36.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.35.1...@kiva/kv-components@3.36.0) (2023-08-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.36.0",
+  "version": "3.38.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,6 +42,7 @@
     "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"
   },
@@ -75,5 +76,5 @@
       "optional": true
     }
   },
-  "gitHead": "f5f8204eda9dec08144129ed6d9ce151495b136e"
+  "gitHead": "00704fdebcb089c0ad690f58a3d9790c76d69e3f"
 }

package/vue/.storybook/preview.js

@@ -3,6 +3,7 @@ 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';
 
@@ -11,6 +12,9 @@ Vue.use(VueCompositionApi);
 
 Vue.use(VueRouter);
 
+// initialize vue-meta
+Vue.use(Meta);
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

package/vue/KvImpactDashboardHeader.vue

@@ -0,0 +1,40 @@
+<!-- eslint-disable max-len -->
+<template>
+	<nav class="tw-bg-primary">
+		<div
+			class="header__full tw-h-9 tw-grid xl:tw-gap-x-4 tw-items-center tw-mx-auto tw-px-2.5 md:tw-px-4 lg:tw-px-8"
+			style="max-width: 1200px;"
+		>
+			<div class="header__full__logo tw-w-6 tw-text-brand">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 57 23"
+				>
+					<path
+						d="M4.695.391H0v22.141h4.695V.391zm12.899 22.141h4.695V7.011h-4.695v15.521zm12.159 0h5.413l5.413-15.521h-4.662s-2.544 8.445-3.293 11.119h-.066c-.75-2.674-3.326-11.119-3.326-11.119h-4.956l5.477 15.521zm-23.537-8.31c7.37 0 9.092-6.158 9.092-7.21h-.637c-7.372 0-9.094 6.157-9.094 7.21h.639zm-.639.969c0 1.117 1.276 7.403 9.222 7.403h.638c0-1.119-1.277-7.403-9.221-7.403h-.639zM22.746 2.739C22.746 1.272 21.671 0 19.941 0c-1.727 0-2.804 1.272-2.804 2.739 0 1.468 1.077 2.739 2.804 2.739 1.73 0 2.805-1.271 2.805-2.739M57 7.011h-4.532V9.13c-.783-1.631-2.608-2.543-4.729-2.543-3.848 0-6.88 3.129-6.88 8.184 0 5.087 2.935 8.185 6.652 8.185 2.608 0 4.173-1.272 4.956-2.675v2.25H57V7.011zm-4.663 8.151c0 2.871-1.76 4.208-3.522 4.208-1.924 0-3.163-1.956-3.163-4.598 0-2.608 1.305-4.598 3.326-4.598 1.663 0 3.359 1.37 3.359 4.206v.782z"
+						fill="currentColor"
+					/>
+				</svg>
+			</div>
+
+			<div class="header__full__right">
+				<slot></slot>
+			</div>
+		</div>
+	</nav>
+</template>
+
+<style scoped>
+.header__full {
+  grid-template-areas: 'logo right';
+  grid-template-columns: 1fr auto;
+}
+
+.header__full__logo {
+  grid-area: logo;
+}
+
+.header__full__right {
+  grid-area: right;
+}
+</style>

package/vue/KvMap.vue

@@ -0,0 +1,370 @@
+<template>
+	<div
+		class="tw-relative tw-block tw-w-full"
+		:style="mapDimensions"
+	>
+		<div
+			:id="`kv-map-holder-${mapId}`"
+			:ref="refString"
+			class="tw-w-full tw-h-full tw-bg-black"
+			:style="{ position: 'absolute' }"
+		></div>
+	</div>
+</template>
+
+<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
+		 * We'll divide the container width by this to determine the height
+		 */
+		aspectRatio: {
+			type: Number,
+			default: 1,
+		},
+		/**
+		 * Control how quickly the autoZoom occurs
+		 */
+		autoZoomDelay: {
+			type: Number,
+			default: 1500,
+		},
+		/**
+		 * Set the height to override aspect ratio driven and/or default dimensions
+		 */
+		height: {
+			type: Number,
+			default: null,
+		},
+		/**
+		 * Setting this initialZoom will zoom the map from initialZoom to zoom when the map enters the viewport
+		 */
+		initialZoom: {
+			type: Number,
+			default: null,
+		},
+		/**
+		 * Set the center point latitude
+		 */
+		lat: {
+			type: Number,
+			default: null,
+		},
+		/**
+		 * Set the center point longitude
+		 */
+		long: {
+			type: Number,
+			default: null,
+		},
+		/**
+		 * Set this if there are more than one map on the page
+		 */
+		mapId: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * Force use of Leaflet
+		 */
+		useLeaflet: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Set the width to override aspect ratio driven and/or default dimensions
+		 */
+		width: {
+			type: Number,
+			default: null,
+		},
+		/**
+		 * Default zoom level
+		 */
+		zoomLevel: {
+			type: Number,
+			default: 4,
+		},
+	},
+	data() {
+		return {
+			hasWebGL: false,
+			leafletReady: false,
+			mapInstance: null,
+			mapLibreReady: false,
+			mapLoaded: false,
+			zoomActive: false,
+		};
+	},
+	computed: {
+		mapDimensions() {
+			// Use container to derive height based on aspect ration + width
+			const container = this.$el?.getBoundingClientRect();
+			const height = container ? `${container.width / this.aspectRatio}px` : '300px';
+			const width = container ? `${container.width}px` : '100%';
+			// Override values if deliberate height or width are provided
+			return {
+				height: this.height ? `${this.height}px` : height,
+				width: this.width ? `${this.width}px` : width,
+				paddingBottom: this.height ? `${this.height}px` : `${100 / this.aspectRatio}%`,
+			};
+		},
+		refString() {
+			return `mapholder${this.mapId}`;
+		},
+	},
+	watch: {
+		lat(next, prev) {
+			if (prev === null && this.long && !this.mapLibreReady && !this.leafletReady) {
+				this.initializeMap();
+			}
+		},
+		long(next, prev) {
+			if (prev === null && this.lat && !this.mapLibreReady && !this.leafletReady) {
+				this.initializeMap();
+			}
+		},
+	},
+	mounted() {
+		if (!this.mapLibreReady && !this.leafletReady) {
+			this.initializeMap();
+		}
+	},
+	beforeDestroy() {
+		if (this.mapInstance) {
+			if (!this.hasWebGL && !this.leafletReady) {
+				// turn off the leaflet instance
+				this.mapInstance.off();
+			}
+			// remove either leaflet or maplibregl
+			this.mapInstance.remove();
+		}
+		this.destroyWrapperObserver();
+	},
+	methods: {
+		activateZoom(zoomOut = false) {
+			const { mapInstance, hasWebGL, mapLibreReady } = this;
+			const currentZoomLevel = mapInstance.getZoom();
+			// exit if already zoomed in (getZoom() works for both leaflet + maplibregl)
+			if ((!zoomOut && currentZoomLevel === this.zoomLevel)
+				|| (zoomOut && currentZoomLevel === this.initialZoom)) return false;
+
+			this.zoomActive = true;
+			// establish delayed zoom duration
+			const timedZoom = window.setTimeout(() => {
+				if (hasWebGL && mapLibreReady) {
+					// maplibregl specific zoom method
+					mapInstance.zoomTo(
+						zoomOut ? this.initialZoom : this.zoomLevel,
+						{ duration: 1200 },
+					);
+				} else {
+					// leaflet specific zoom method
+					mapInstance.setZoom(zoomOut ? this.initialZoom : this.zoomLevel);
+				}
+
+				clearTimeout(timedZoom);
+				this.zoomActive = false;
+			}, this.autoZoomDelay);
+		},
+		createWrapperObserver() {
+			// Watch for the wrapper element moving in and out of the viewport
+			this.wrapperObserver = this.createIntersectionObserver({
+				targets: [this.$refs?.[this.refString]],
+				callback: (entries) => {
+					entries.forEach((entry) => {
+						if (entry.target === this.$refs?.[this.refString] && !this.zoomActive) {
+							if (entry.intersectionRatio > 0) {
+								this.activateZoom();
+							}
+						}
+					});
+				},
+			});
+		},
+		destroyWrapperObserver() {
+			if (this.wrapperObserver) {
+				this.wrapperObserver.disconnect();
+			}
+		},
+		checkWebGL() {
+			// exit and use leaflet if specified or document isn't present
+			if (this.useLeaflet || typeof document === 'undefined') return false;
+			// via. https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Detect_WebGL
+			// Create canvas element. The canvas is not added to the document itself,
+			// so it is never displayed in the browser window.
+			const canvas = document.createElement('canvas');
+			// Get WebGLRenderingContext from canvas element.
+			const gl = canvas.getContext('webgl')
+			|| canvas.getContext('experimental-webgl');
+			// Report the result.
+			if (gl && gl instanceof WebGLRenderingContext) {
+				this.hasWebGL = true;
+				return true;
+			}
+			return false;
+		},
+		initializeMap() {
+			/**
+			 * This initial checkWebGL() call kicks off the vue-meta asset inclusion
+			 * We then start polling for the readiness of our selected map library and initialize it once ready
+			 */
+			if (this.checkWebGL()) {
+				this.testDelayedGlobalLibrary('maplibregl').then((response) => {
+					if (response.loaded && !this.mapLoaded && !this.useLeaflet && this.lat && this.long) {
+						this.initializeMapLibre();
+						this.mapLibreReady = true;
+					}
+				});
+			} else {
+				this.testDelayedGlobalLibrary('L').then((leafletTest) => {
+					if (leafletTest.loaded && !this.mapLoaded && this.lat && this.long) {
+						this.initializeLeaflet();
+						this.leafletReady = true;
+					}
+				});
+			}
+		},
+		initializeLeaflet() {
+			/* eslint-disable no-undef, max-len */
+			// Initialize primary mapInstance
+			this.mapInstance = L.map(`kv-map-holder-${this.mapId}`, {
+				center: [this.lat, this.long],
+				zoom: this.initialZoom || this.zoomLevel,
+				// todo make props for the following options
+				dragging: false,
+				zoomControl: false,
+				animate: true,
+				scrollWheelZoom: false,
+				doubleClickZoom: false,
+				attributionControl: false,
+			});
+			/* eslint-disable quotes */
+			// Add our tileset to the mapInstance
+			L.tileLayer('https://api.maptiler.com/maps/bright/{z}/{x}/{y}.png?key=n1Mz5ziX3k6JfdjFe7mx', {
+				tileSize: 512,
+				zoomOffset: -1,
+				minZoom: 1,
+				crossOrigin: true,
+			}).addTo(this.mapInstance);
+			/* eslint-enable quotes */
+			/* eslint-enable no-undef, max-len */
+
+			// signify map has loaded
+			this.mapLoaded = true;
+			// only activate autoZoom if we have an initialZoom set
+			if (this.initialZoom !== null) {
+				this.createWrapperObserver();
+			}
+		},
+		initializeMapLibre() {
+			// Initialize primary mapInstance
+			// eslint-disable-next-line no-undef
+			this.mapInstance = new maplibregl.Map({
+				container: `kv-map-holder-${this.mapId}`,
+				style: 'https://api.maptiler.com/maps/bright/style.json?key=n1Mz5ziX3k6JfdjFe7mx',
+				center: [this.long, this.lat],
+				zoom: this.initialZoom || this.zoomLevel,
+				attributionControl: false,
+				dragPan: false,
+				scrollZoom: false,
+				doubleClickZoom: false,
+				dragRotate: false,
+			});
+
+			// signify map has loaded
+			this.mapLoaded = true;
+
+			// only activate autoZoom if we have an initialZoom set
+			if (this.initialZoom !== null) {
+				this.createWrapperObserver();
+			}
+		},
+		checkIntersectionObserverSupport() {
+			if (typeof window === 'undefined'
+				|| !('IntersectionObserver' in window)
+				|| !('IntersectionObserverEntry' in window)
+				|| !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
+				return false;
+			}
+			return true;
+		},
+		createIntersectionObserver({ callback, options, targets } = {}) {
+			if (this.checkIntersectionObserverSupport()) {
+				const observer = new IntersectionObserver(callback, options);
+				targets.forEach((target) => observer.observe(target));
+				return observer;
+			}
+		},
+		testDelayedGlobalLibrary(library, timeout = 3000) {
+			// return a promise
+			return new Promise((resolve, reject) => {
+				if (typeof window === 'undefined') {
+					reject(new Error('window object not available'));
+				}
+				// establish timeout to limit time until promise resolution
+				let readyStateTimeout;
+				// establish interval to check for library presence
+				const readyStateInterval = window.setInterval(() => {
+					// determine if library is present on window
+					if (typeof window[library] !== 'undefined') {
+						// cleanup timers
+						clearInterval(readyStateInterval);
+						clearTimeout(readyStateTimeout);
+						// resolve the promise
+						resolve({ loaded: true });
+					}
+				}, 100);
+
+				// activate timeout
+				readyStateTimeout = window.setTimeout(() => {
+					// clean up interval and timeout
+					clearInterval(readyStateInterval);
+					clearTimeout(readyStateTimeout);
+					// resolve the promise
+					resolve({ loaded: false });
+				}, timeout);
+			});
+		},
+	},
+};
+</script>

package/vue/stories/KvImpactDashboardHeader.stories.js

@@ -0,0 +1,22 @@
+import KvImpactDashboardHeader from '../KvImpactDashboardHeader.vue';
+
+export default {
+	title: 'KvImpactDashboardHeader',
+	component: KvImpactDashboardHeader,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvImpactDashboardHeader },
+		template: `
+			<div class="tw-bg-secondary tw-pb-7">
+				<kv-impact-dashboard-header />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story();

package/vue/stories/KvMap.stories.js

@@ -0,0 +1,69 @@
+import KvMap from '../KvMap.vue';
+
+export default {
+	title: 'KvMap',
+	component: KvMap,
+	args: {
+		autoZoomDelay: 1000,
+		height: null,
+		initialZoom: null,
+		lat: 37.700091,
+		long: -123.013243,
+		mapId: 0,
+		useLeaflet: false,
+		width: null,
+		zoomLevel: 4,
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvMap },
+	template: `<kv-map
+		class="tw-rounded tw-overflow-hidden"
+		:auto-zoom-delay="autoZoomDelay"
+		:height="height"
+		:lat="lat"
+		:long="long"
+		:initial-zoom="initialZoom"
+		:map-id="mapId"
+		:use-leaflet="useLeaflet"
+		:width="width"
+		:zoom-level="zoomLevel"
+	/>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	initialZoom: null,
+	mapId: 1,
+	zoomLevel: 14,
+};
+
+export const AutoZoom = Template.bind({});
+AutoZoom.args = {
+	initialZoom: 1,
+	lat: -0.023559,
+	long: 37.906193,
+	mapId: 2,
+	zoomLevel: 4,
+};
+
+export const FixedDimensions = Template.bind({});
+FixedDimensions.args = {
+	initialZoom: null,
+	height: 250,
+	mapId: 3,
+	width: 250,
+	zoomLevel: 14,
+};
+
+export const Leaflet = Template.bind({});
+Leaflet.args = {
+	initialZoom: null,
+	lat: -0.023559,
+	long: 37.906193,
+	mapId: 4,
+	useLeaflet: true,
+	zoomLevel: 6,
+};

package/vue/KvKivaPartnerHeader.vue

@@ -1,44 +0,0 @@
-<!-- eslint-disable max-len -->
-<template>
-	<nav class="tw-bg-primary">
-		<div
-			class="header__full tw-grid xl:tw-gap-x-4 tw-items-center tw-mx-auto tw-px-2.5 md:tw-px-4 lg:tw-px-8"
-			style="height: 96px; max-width: 1200px;"
-		>
-			<div class="header__full__logo">
-				<!-- kivaPartner logo SVG -->
-				<svg
-					width="163"
-					height="48"
-					viewBox="0 0 55 24"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<path
-						d="M4.56965 0.399536H0V23.1675H4.57195V0.399536H4.56965ZM16.5793 23.1675H21.1513V7.69252H16.5793V23.1675ZM28.2721 23.1675H33.533L38.7938 7.69252H34.2219C34.2219 7.69252 31.7786 16.083 31.0346 18.7523H30.9818C30.2378 16.083 27.7394 7.69252 27.7394 7.69252H22.9034L28.2721 23.1675ZM54.7371 7.69252H50.3259V9.81649C49.5819 8.18284 47.8367 7.25719 45.7539 7.25719C42.0362 7.25719 39.0579 10.3618 39.0579 15.43C39.0579 20.4982 41.9283 23.6005 45.5404 23.6005C48.0938 23.6005 49.5796 22.3472 50.3764 20.9312V23.1675H54.7876L54.7371 7.69252ZM50.2202 15.8103C50.2202 18.6446 48.521 20.0056 46.8194 20.0056C44.9594 20.0056 43.7378 18.0443 43.7378 15.4231C43.7378 12.802 45.0122 10.8407 46.9801 10.8407C48.5738 10.8407 50.2202 12.2017 50.2202 15.0359V15.8103ZM5.73847 15.0474C13.0729 15.0474 14.7744 8.78314 14.7744 7.69252H14.1361C6.80166 7.69252 5.10239 13.959 5.10239 15.0474H5.73847ZM5.10239 15.595C5.10239 16.7406 6.37684 23.1148 14.2417 23.1148H14.8801C14.8801 21.9692 13.6056 15.595 5.73847 15.595H5.10239ZM21.6358 3.45145C21.6358 1.97819 20.5198 0.727182 19.0846 0.727182H18.9239C18.2242 0.7087 17.5458 0.968118 17.0377 1.44844C16.5296 1.92875 16.2334 2.59068 16.2142 3.28878V3.45145C16.2142 4.92471 17.3302 6.17572 18.7654 6.17572H18.9239C19.6239 6.19482 20.3029 5.93568 20.8115 5.4553C21.3201 4.97492 21.6166 4.31264 21.6358 3.61413V3.45145Z"
-						fill="#2AA967"
-					/>
-				</svg>
-			</div>
-
-			<div class="header__full__right">
-				<slot></slot>
-			</div>
-		</div>
-	</nav>
-</template>
-
-<style scoped>
-.header__full {
-  grid-template-areas: 'logo right';
-  grid-template-columns: 1fr auto;
-}
-
-.header__full__logo {
-  grid-area: logo;
-}
-
-.header__full__right {
-  grid-area: right;
-}
-</style>

package/vue/stories/KvKivaPartnerHeader.stories.js

@@ -1,20 +0,0 @@
-import KvKivaPartnerHeader from '../KvKivaPartnerHeader.vue';
-
-export default {
-	title: 'KvKivaPartnerHeader',
-	component: KvKivaPartnerHeader,
-};
-
-const story = (args) => {
-	const template = (_args, { argTypes }) => ({
-		props: Object.keys(argTypes),
-		components: { KvKivaPartnerHeader },
-		template: `
-			<kv-kiva-partner-header />
-		`,
-	});
-	template.args = args;
-	return template;
-};
-
-export const Default = story();