refactor(ol-zoom-control): migrate to script setup

Author: d-koppenhagen

src/components/mapControls/OlZoomControl.vue

@@ -0,0 +1,60 @@
+<template lang="">
+  <div v-if="false"></div>
+</template>
+
+<script setup>
+import Zoom from "ol/control/Zoom";
+import useControl from "@/composables/useControl";
+import { useAttrs } from "vue";
+
+const props = defineProps({
+  duration: {
+    type: Number,
+    default: 250,
+  },
+  className: {
+    type: String,
+    default: "ol-zoom",
+  },
+  zoomInClassName: {
+    type: String,
+    default: "ol-zoom-in",
+  },
+  zoomOutClassName: {
+    type: String,
+    default: "ol-zoom-out",
+  },
+  zoomInLabel: {
+    type: String,
+    default: "+",
+  },
+  zoomOutLabel: {
+    type: String,
+    default: "-",
+  },
+  zoomInTipLabel: {
+    type: String,
+    default: "Zoom in",
+  },
+  zoomOutTipLabel: {
+    type: String,
+    default: "Zoom Out",
+  },
+  delta: {
+    type: Number,
+    default: 1,
+  },
+  target: {
+    type: HTMLElement,
+  },
+});
+
+const attrs = useAttrs();
+const { control } = useControl(Zoom, props, { attrs });
+
+defineExpose({
+  control,
+});
+</script>
+
+<style lang=""></style>

src/components/mapControls/ZoomControl.vue

@@ -14,7 +14,7 @@ import OlSwipeControl from "./OlSwipeControl.vue";
 import OlToggleControl from "./OlToggleControl.vue";
 import OlVideoRecorderControl from "./OlVideoRecorderControl.vue";
 import OlZoneControl from "./OlZoneControl.vue";
-import ZoomControl from "./ZoomControl.vue";
+import OlZoomControl from "./OlZoomControl.vue";
 import ZoomSliderControl from "./ZoomSliderControl.vue";
 import ZoomToExtentControl from "./ZoomToExtentControl.vue";
 
@@ -30,7 +30,7 @@ function install(app) {
   app.component("ol-mouseposition-control", OlMousePositionControl);
   app.component("ol-overviewmap-control", OlOverviewMapControl);
   app.component("ol-scaleline-control", OlScaleLineControl);
-  app.component(ZoomControl.name, ZoomControl);
+  app.component("ol-zoom-control", OlZoomControl);
   app.component(ZoomSliderControl.name, ZoomSliderControl);
   app.component(ZoomToExtentControl.name, ZoomToExtentControl);
   app.component("ol-rotate-control", OlRotateControl);
@@ -66,7 +66,7 @@ export {
   OlToggleControl,
   OlVideoRecorderControl,
   OlZoneControl,
-  ZoomControl,
+  OlZoomControl,
   ZoomSliderControl,
   ZoomToExtentControl,
 };