feat(OlScalelineControl): support all props with defaults from OpenLayers

Author: d-koppenhagen

docs/componentsguide/mapcontrols/scaleline/index.md

@@ -9,6 +9,7 @@
 <script setup>
 import ScalelineControlDemo from "@demos/ScalelineControlDemo.vue"
 </script>
+
 <ClientOnly>
 <ScalelineControlDemo />
 </ClientOnly>
@@ -31,45 +32,13 @@ import ScalelineControlDemo from "@demos/ScalelineControlDemo.vue"
 
 ## Properties
 
-### 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
+### Props from OpenLayers
 
-- **Type**: `Boolean`
-- **Default**: `false`
+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_control_ScaleLine-ScaleLine.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
 
-### dpi
+### Deviating Properties
 
-- **Type**: `Number`
-- **Default**: `undefined`
+None.

src/components/mapControls/OlScaleLineControl.vue

@@ -2,34 +2,12 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import { ScaleLine } from "ol/control";
+import ScaleLine, { type Options } from "ol/control/ScaleLine";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    minWidth?: number;
-    maxWidth?:number;
-    render?: (...args: unknown[]) => unknown;
-    target?: HTMLElement;
-    units?: string;
-    bar?: boolean;
-    steps?: number;
-    text?: string;
-    dpi?: number;
-  }>(),
-  {
-    className: "ol-scale-line",
-    minWidth: 64,
-    units: "metric",
-    bar: false,
-    steps: 4,
-    text: "",
-    dpi: undefined,
-  },
-);
+const props = defineProps<Options>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);

src/components/mapControls/OlScalelineControl.vue

@@ -1,17 +1,24 @@
 <template>
+  <form>
+    <fieldset>
+      <label for="checkbox">Show as bar</label>
+      <input type="checkbox" id="checkbox" v-model="showAsBar" />
+    </fieldset>
+  </form>
   <ol-map style="height: 400px" :controls="[]">
     <ol-view :center="center" :zoom="zoom" :projection="projection" />
-
     <ol-tile-layer>
       <ol-source-osm />
     </ol-tile-layer>
-    <ol-scaleline-control />
+    <ol-scaleline-control :bar="showAsBar" />
   </ol-map>
 </template>
 
 <script setup>
 import { ref } from "vue";
+
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(8);
+const showAsBar = ref(false);
 </script>

src/demos/ScalelineControlDemo.vue

@@ -144,10 +144,19 @@ test.describe("ol-search-control", () => {
 });
 
 test.describe("ol-scaleline-control", () => {
-  test("should render", async ({ page }) => {
+  test("should render as ScaleLine", async ({ page }) => {
+    const map = new MapPage(page);
+    await map.goto("/componentsguide/mapcontrols/scaleline/");
+    await map.waitUntilReady();
+    await map.waitUntilCanvasLoaded();
+    await map.checkCanvasScreenshot();
+  });
+
+  test("should render as ScaleBar", async ({ page }) => {
     const map = new MapPage(page);
     await map.goto("/componentsguide/mapcontrols/scaleline/");
     await map.waitUntilReady();
+    await map.page.getByLabel("Show as bar").check();
     await map.waitUntilCanvasLoaded();
     await map.checkCanvasScreenshot();
   });