feat: allow to define global options for child plugins and via provide

Author: d-koppenhagen

Diff for: docs/get-started.md

@@ -87,7 +87,7 @@ import { Map, Layers, Sources } from 'vue3-openlayers'
 
 You can activate the `debug` mode, to log events receiving from OpenLayers and props passed to OpenLayers on the console.
 
-> Note: This is currently only possible when setting up vue3-openlayers globally.
+### Plugin Usage
 
 ```ts
 import OpenLayersMap, { type Vue3OpenlayersGlobalOptions } from "vue3-openlayers";
@@ -98,3 +98,27 @@ const options: Vue3OpenlayersGlobalOptions = {
 };
 app.use(OpenLayersMap, options);
 ```
+
+### Provide for components
+
+```vue
+<script setup lang="ts">
+import { provide } from 'vue'
+import { Map, Layers, Sources, type Vue3OpenlayersGlobalOptions } from 'vue3-openlayers'
+
+const options: Vue3OpenlayersGlobalOptions = {
+  debug: true,
+};
+
+provide("ol-options", options);
+</script>
+
+<template>
+  <Map.OlMap style="min-width: 400px; min-height: 400px">
+    <Map.OlView :center="[40, 40]" :zoom="5" projection="EPSG:4326" />
+    <Layers.OlTileLayer>
+      <Sources.OlSourceOSM />
+    </Layers.OlTileLayer>
+  </Map.OlMap>
+</template>
+```

Diff for: src/components/animations/index.ts

@@ -6,15 +6,22 @@ import OlAnimationShake from "./OlAnimationShake.vue";
 import OlAnimationSlide from "./OlAnimationSlide.vue";
 import OlAnimationTeleport from "./OlAnimationTeleport.vue";
 import OlAnimationZoom from "./OlAnimationZoom.vue";
+import type { Vue3OpenlayersGlobalOptions } from "@/types";
 
-function install(app: App) {
+function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("ol-animation-drop", OLAnimationDrop);
   app.component("ol-animation-fade", OlAnimationFade);
   app.component("ol-animation-path", OlAnimationPath);
   app.component("ol-animation-shake", OlAnimationShake);
   app.component("ol-animation-slide", OlAnimationSlide);
   app.component("ol-animation-teleport", OlAnimationTeleport);
   app.component("ol-animation-zoom", OlAnimationZoom);
+
+  app.provide("ol-options", options);
+}
+
+declare module "@vue/runtime-core" {
+  export function inject(key: "ol-options"): Vue3OpenlayersGlobalOptions;
 }
 
 export default install;

Diff for: src/components/geometries/index.ts

@@ -6,15 +6,22 @@ import OlGeomMultiPoint from "./OlGeomMultiPoint.vue";
 import OlGeomMultiPolygon from "./OlGeomMultiPolygon.vue";
 import OlGeomPoint from "./OlGeomPoint.vue";
 import OlGeomPolygon from "./OlGeomPolygon.vue";
+import type { Vue3OpenlayersGlobalOptions } from "@/types";
 
-function install(app: App) {
+function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("ol-geom-circle", OlGeomCircle);
   app.component("ol-geom-line-string", OlGeomLineString);
   app.component("ol-geom-multi-line-string", OlGeomMultiLineString);
   app.component("ol-geom-multi-point", OlGeomMultiPoint);
   app.component("ol-geom-multi-polygon", OlGeomMultiPolygon);
   app.component("ol-geom-point", OlGeomPoint);
   app.component("ol-geom-polygon", OlGeomPolygon);
+
+  app.provide("ol-options", options);
+}
+
+declare module "@vue/runtime-core" {
+  export function inject(key: "ol-options"): Vue3OpenlayersGlobalOptions;
 }
 
 export default install;

Diff for: src/components/interaction/index.ts

@@ -9,8 +9,9 @@ import OlDrawInteraction from "./OlDrawInteraction.vue";
 import OlModifyInteraction from "./OlModifyInteraction.vue";
 import OlSnapInteraction from "./OlSnapInteraction.vue";
 import OlTransformInteraction from "./OlTransformInteraction.vue";
+import type { Vue3OpenlayersGlobalOptions } from "@/types";
 
-function install(app: App) {
+function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("ol-interaction-clusterselect", OlClusterSelectInteraction);
   app.component("ol-interaction-dragbox", OlDragBoxInteraction);
   app.component("ol-interaction-dragrotate", OlDragRotateInteraction);
@@ -21,6 +22,12 @@ function install(app: App) {
   app.component("ol-interaction-modify", OlModifyInteraction);
   app.component("ol-interaction-snap", OlSnapInteraction);
   app.component("ol-interaction-transform", OlTransformInteraction);
+
+  app.provide("ol-options", options);
+}
+
+declare module "@vue/runtime-core" {
+  export function inject(key: "ol-options"): Vue3OpenlayersGlobalOptions;
 }
 
 export default install;

Diff for: src/components/layers/index.ts

@@ -9,8 +9,9 @@ import OlVectorTileLayer from "./OlVectorTileLayer.vue";
 import OlVectorImageLayer from "./OlVectorImageLayer.vue";
 import OlWebglVectorLayer from "./OlWebglVectorLayer.vue";
 import OlWebglTileLayer from "./OlWebglTileLayer.vue";
+import type { Vue3OpenlayersGlobalOptions } from "@/types";
 
-function install(app: App) {
+function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("ol-animated-clusterlayer", OlAnimatedClusterLayer);
   app.component("ol-heatmap-layer", OlHeatmapLayer);
   app.component("ol-image-layer", OlImageLayer);
@@ -21,6 +22,12 @@ function install(app: App) {
   app.component("ol-vector-tile-layer", OlVectorTileLayer);
   app.component("ol-webgl-vector-layer", OlWebglVectorLayer);
   app.component("ol-webgl-tile-layer", OlWebglTileLayer);
+
+  app.provide("ol-options", options);
+}
+
+declare module "@vue/runtime-core" {
+  export function inject(key: "ol-options"): Vue3OpenlayersGlobalOptions;
 }
 
 export default install;

Diff for: src/components/map/index.ts

@@ -5,14 +5,21 @@ import OlMap from "./OlMap.vue";
 import OlOverlay from "./OlOverlay.vue";
 import OlProjectionRegister from "./OlProjectionRegister.vue";
 import OlView from "./OlView.vue";
+import type { Vue3OpenlayersGlobalOptions } from "@/types";
 
-function install(app: App) {
+function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("ol-feature", OlFeature);
   app.component("ol-geolocation", OlGeoLocation);
   app.component("ol-map", OlMap);
   app.component("ol-overlay", OlOverlay);
   app.component("ol-projection-register", OlProjectionRegister);
   app.component("ol-view", OlView);
+
+  app.provide("ol-options", options);
+}
+
+declare module "@vue/runtime-core" {
+  export function inject(key: "ol-options"): Vue3OpenlayersGlobalOptions;
 }
 
 export default install;

Diff for: src/components/mapControls/index.ts

@@ -20,8 +20,9 @@ import OlZoneControl from "./OlZoneControl.vue";
 import OlZoomControl from "./OlZoomControl.vue";
 import OlZoomSliderControl from "./OlZoomSliderControl.vue";
 import OlZoomToExtentControl from "./OlZoomToExtentControl.vue";
+import type { Vue3OpenlayersGlobalOptions } from "@/types";
 
-function install(app: App) {
+function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("ol-attribution-control", OlAttributionControl);
   app.component("ol-fullscreen-control", OlFullScreenControl);
   app.component("ol-mouseposition-control", OlMousePositionControl);
@@ -43,6 +44,12 @@ function install(app: App) {
   app.component("ol-layerswitcher-control", OlLayerSwitcherControl);
   app.component("ol-layerswitcherimage-control", OlLayerSwitcherImageControl);
   app.component("ol-zone-control", OlZoneControl);
+
+  app.provide("ol-options", options);
+}
+
+declare module "@vue/runtime-core" {
+  export function inject(key: "ol-options"): Vue3OpenlayersGlobalOptions;
 }
 
 export default install;

Diff for: src/components/sources/index.ts

@@ -15,8 +15,9 @@ import OlSourceVector from "./OlSourceVector.vue";
 import OlSourceVectorTile from "./OlSourceVectorTile.vue";
 import OlSourceXYZ from "./OlSourceXYZ.vue";
 import OlSourceWMTS from "./OlSourceWMTS.vue";
+import type { Vue3OpenlayersGlobalOptions } from "@/types";
 
-function install(app: App) {
+function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("ol-source-bingmaps", OlSourceBingMaps);
   app.component("ol-source-cluster", OlSourceCluster);
   app.component("ol-source-image-static", OlSourceImageStatic);
@@ -33,6 +34,12 @@ function install(app: App) {
   app.component("ol-source-vector-tile", OlSourceVectorTile);
   app.component("ol-source-xyz", OlSourceXYZ);
   app.component("ol-source-wmts", OlSourceWMTS);
+
+  app.provide("ol-options", options);
+}
+
+declare module "@vue/runtime-core" {
+  export function inject(key: "ol-options"): Vue3OpenlayersGlobalOptions;
 }
 
 export default install;

Diff for: src/components/styles/index.ts

@@ -8,21 +8,28 @@ import OlStyleText from "./OlStyleText.vue";
 import OlStyleFlowline from "./OlStyleFlowline.vue";
 import type { FeatureLike } from "ol/Feature";
 import type { Style } from "ol/style";
+import type { Vue3OpenlayersGlobalOptions } from "@/types";
 
 type OverrideStyleFunction = (
   feature: FeatureLike,
   currentStyle: Style,
   resolution: number,
 ) => Style | Style[] | void;
 
-function install(app: App) {
+function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("ol-style", OlStyle);
   app.component("ol-style-circle", OlStyleCircle);
   app.component("ol-style-stroke", OlStyleStroke);
   app.component("ol-style-fill", OlStyleFill);
   app.component("ol-style-icon", OlStyleIcon);
   app.component("ol-style-text", OlStyleText);
   app.component("ol-style-flowline", OlStyleFlowline);
+
+  app.provide("ol-options", options);
+}
+
+declare module "@vue/runtime-core" {
+  export function inject(key: "ol-options"): Vue3OpenlayersGlobalOptions;
 }
 
 export default install;

Diff for: src/index.ts

@@ -17,14 +17,14 @@ import type { App, Plugin } from "vue";
 import type { Vue3OpenlayersGlobalOptions } from "./types";
 
 const install: Plugin = (app: App, options?: Vue3OpenlayersGlobalOptions) => {
-  app.use(Map.install);
-  app.use(Layers.install);
-  app.use(Sources.install);
-  app.use(MapControls.install);
-  app.use(Geometries.install);
-  app.use(Styles.install);
-  app.use(Interactions.install);
-  app.use(Animations.install);
+  app.use(Map.install, options);
+  app.use(Layers.install, options);
+  app.use(Sources.install, options);
+  app.use(MapControls.install, options);
+  app.use(Geometries.install, options);
+  app.use(Styles.install, options);
+  app.use(Interactions.install, options);
+  app.use(Animations.install, options);
   app.use(Providers.install, options);
 };