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

Author: d-koppenhagen

src/components/mapControls/OlZoomSliderControl.vue

@@ -0,0 +1,32 @@
+<template lang="">
+  <div v-if="false"></div>
+</template>
+
+<script setup>
+import useControl from "@/composables/useControl";
+import ZoomSlider from "ol/control/ZoomSlider";
+import { useAttrs } from "vue";
+
+const props = defineProps({
+  duration: {
+    type: Number,
+    default: 200,
+  },
+  className: {
+    type: String,
+    default: "ol-zoomslider",
+  },
+  render: {
+    type: Function,
+  },
+});
+
+const attrs = useAttrs();
+const { control } = useControl(ZoomSlider, props, { attrs });
+
+defineExpose({
+  control,
+});
+</script>
+
+<style lang=""></style>

src/components/mapControls/ZoomSliderControl.vue

@@ -15,7 +15,7 @@ import OlToggleControl from "./OlToggleControl.vue";
 import OlVideoRecorderControl from "./OlVideoRecorderControl.vue";
 import OlZoneControl from "./OlZoneControl.vue";
 import OlZoomControl from "./OlZoomControl.vue";
-import ZoomSliderControl from "./ZoomSliderControl.vue";
+import OlZoomSliderControl from "./OlZoomSliderControl.vue";
 import ZoomToExtentControl from "./ZoomToExtentControl.vue";
 
 function install(app) {
@@ -31,7 +31,7 @@ function install(app) {
   app.component("ol-overviewmap-control", OlOverviewMapControl);
   app.component("ol-scaleline-control", OlScaleLineControl);
   app.component("ol-zoom-control", OlZoomControl);
-  app.component(ZoomSliderControl.name, ZoomSliderControl);
+  app.component("ol-zoomslider-control", OlZoomSliderControl);
   app.component(ZoomToExtentControl.name, ZoomToExtentControl);
   app.component("ol-rotate-control", OlRotateControl);
   app.component("ol-context-menu-control", OlContextMenuControl);
@@ -67,6 +67,6 @@ export {
   OlVideoRecorderControl,
   OlZoneControl,
   OlZoomControl,
-  ZoomSliderControl,
+  OlZoomSliderControl,
   ZoomToExtentControl,
 };