feat(ol-interaction-mouse-wheel-zoom): provide new interaction to disable / customize mouse zoom behavior

closes #356

Author: d-koppenhagen

docs/.vitepress/config.ts

@@ -384,6 +384,10 @@ export const config: UserConfig = {
                 text: "ol-interaction-modify",
                 link: "/componentsguide/interactions/modify/",
               },
+              {
+                text: "ol-interaction-mouse-wheel-zoom",
+                link: "/componentsguide/interactions/mousewheelzoom/",
+              },
               {
                 text: "ol-interaction-pointer",
                 link: "/componentsguide/interactions/pointer/",

docs/componentsguide/animations.plugin.md

@@ -10,11 +10,10 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 import {
-  // [!code focus:6]
   Map,
   Layers,
   Sources,
-  Animations,
+  Animations,// [!code focus]
 } from "vue3-openlayers";
 
 const app = createApp(App);

docs/componentsguide/geometries.plugin.md

@@ -10,11 +10,10 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 import {
-  // [!code focus:6]
   Map,
   Layers,
   Sources,
-  Geometries,
+  Geometries,// [!code focus]
 } from "vue3-openlayers";
 
 const app = createApp(App);

docs/componentsguide/interactions.plugin.md

@@ -10,11 +10,10 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 import {
-  // [!code focus:6]
   Map,
   Layers,
   Sources,
-  Interactions,
+  Interactions,// [!code focus]
 } from "vue3-openlayers";
 
 const app = createApp(App);

docs/componentsguide/interactions/mousewheelzoom/index.md

@@ -0,0 +1,82 @@
+# ol-interaction-mouse-wheel-zoom
+
+> Define the mouse wheel zoom behaviour
+
+[[toc]]
+
+## Demo
+
+<script setup>
+import MouseWheelZoomDemo from "@demos/MouseWheelZoomDemo.vue"
+</script>
+
+<ClientOnly>
+<MouseWheelZoomDemo/>
+</ClientOnly>
+
+## Setup
+
+<!--@include: ../../interactions.plugin.md-->
+
+## Usage
+
+| Plugin Usage                        |               Explicit Import                |
+|-------------------------------------|:--------------------------------------------:|
+| `<ol-interaction-mouse-wheel-zoom>` | `<Interactions.OlInteractionMouseWheelZoom>` |
+
+::: code-group
+
+<<< ../../../../src/demos/MouseWheelZoomDemo.vue
+
+:::
+
+## Properties
+
+### Props from OpenLayers
+
+Properties are passed-trough from OpenLayers directly.
+Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_interaction_MouseWheelZoom.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
+
+### Deviating Properties
+
+None.
+
+## Events
+
+You have access to all Events from the underlying interaction.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_interaction_MouseWheelZoom.html) to see the available events tht will be fired.
+
+```html
+<ol-interaction-mouse-wheel-zoom @error="handleEvent" />
+```
+
+## Methods
+
+You have access to all Methods from the underlying interaction.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_interaction_MouseWheelZoom.html) to see the available methods.
+
+To access the source, you can use a `ref()` as shown below:
+
+```vue
+<template>
+  <!-- ... -->
+  <ol-interaction-mouse-wheel-zoom ref="interactionRef" />
+  <!-- ... -->
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type MouseWheelZoom from "ol/interaction/MouseWheelZoom";
+
+const interactionRef = ref<{ mouseWheelZoom: MouseWheelZoom } | null>(null);
+
+onMounted(() => {
+  const mouseWheelZoom: MouseWheelZoom = interactionRef.value?.mouseWheelZoom;
+  // call your method on `mouseWheelZoom`
+});
+</script>
+```
+
+

docs/componentsguide/layers.plugin.md

@@ -10,9 +10,8 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 import {
-  // [!code focus:6]
   Map,
-  Layers,
+  Layers,// [!code focus]
   Sources,
 } from "vue3-openlayers";
 

docs/componentsguide/map.plugin.md

@@ -10,8 +10,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 import {
-  // [!code focus:5]
-  Map,
+  Map,// [!code focus]
   Layers,
   Sources,
 } from "vue3-openlayers";

docs/componentsguide/mapcontrols.plugin.md

@@ -10,11 +10,10 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 import {
-  // [!code focus:6]
   Map,
   Layers,
   Sources,
-  MapControls,
+  MapControls,// [!code focus]
 } from "vue3-openlayers";
 
 const app = createApp(App);

docs/componentsguide/sources.plugin.md

@@ -10,10 +10,9 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 import {
-  // [!code focus:6]
   Map,
   Layers,
-  Sources,
+  Sources,// [!code focus]
 } from "vue3-openlayers";
 
 const app = createApp(App);

docs/componentsguide/styles.plugin.md

@@ -10,11 +10,10 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 import {
-  // [!code focus:6]
   Map,
   Layers,
   Sources,
-  Styles,
+  Styles,// [!code focus]
 } from "vue3-openlayers";
 
 const app = createApp(App);