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

Author: d-koppenhagen

src/components/mapControls/OlScaleLineControl.vue

@@ -0,0 +1,57 @@
+<template lang="">
+  <div v-if="false"></div>
+</template>
+
+<script setup>
+import useControl from "@/composables/useControl";
+
+import { ScaleLine } from "ol/control";
+import { useAttrs } from "vue";
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: "ol-scale-line",
+  },
+  minWidth: {
+    type: Number,
+    default: 64,
+  },
+  render: {
+    type: Function,
+  },
+  target: {
+    type: HTMLElement,
+  },
+  units: {
+    type: String,
+    default: "metric",
+  },
+  bar: {
+    type: Boolean,
+    default: false,
+  },
+
+  steps: {
+    type: Number,
+    default: 4,
+  },
+  text: {
+    type: Boolean,
+    default: false,
+  },
+  dpi: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+const attrs = useAttrs();
+const { control } = useControl(ScaleLine, props, { attrs });
+
+defineExpose({
+  control,
+});
+</script>
+
+<style lang=""></style>

src/components/mapControls/ScaleLineControl.vue

@@ -9,7 +9,7 @@ import OlMousePositionControl from "./OlMousePositionControl.vue";
 import OlOverviewMapControl from "./OlOverviewMapControl.vue";
 import OlPrintDialogControl from "./OlPrintDialogControl.vue";
 import OlRotateControl from "./OlRotateControl.vue";
-import ScaleLineControl from "./ScaleLineControl.vue";
+import OlScaleLineControl from "./OlScaleLineControl.vue";
 import ZoomControl from "./ZoomControl.vue";
 import ZoomSliderControl from "./ZoomSliderControl.vue";
 import ZoomToExtentControl from "./ZoomToExtentControl.vue";
@@ -29,7 +29,7 @@ function install(app) {
   app.component("ol-fullscreen-control", OlFullScreenControl);
   app.component("ol-mouseposition-control", OlMousePositionControl);
   app.component("ol-overviewmap-control", OlOverviewMapControl);
-  app.component(ScaleLineControl.name, ScaleLineControl);
+  app.component("ol-scaleline-control", OlScaleLineControl);
   app.component(ZoomControl.name, ZoomControl);
   app.component(ZoomSliderControl.name, ZoomSliderControl);
   app.component(ZoomToExtentControl.name, ZoomToExtentControl);
@@ -61,7 +61,7 @@ export {
   OlOverviewMapControl,
   OlPrintDialogControl,
   OlRotateControl,
-  ScaleLineControl,
+  OlScaleLineControl,
   ZoomControl,
   ZoomSliderControl,
   ZoomToExtentControl,