docs: fix several selectors in documentation

d-koppenhagen · d-koppenhagen · commit 9e5bb23d9452 · 2025-09-06T20:07:53.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -608,7 +608,7 @@ Please check your app carefully when updating to the new major version.
 
 ### Features
 
-* **ol-interaction-dragbox:** add DragBox component wrapper ([3eb1fff](https://github.com/MelihAltintas/vue3-openlayers/commit/3eb1fff345b81c2990e5aa84eaedea3b39164e19)), closes [#307](https://github.com/MelihAltintas/vue3-openlayers/issues/307)
+* **ol-interaction-drag-box:** add DragBox component wrapper ([3eb1fff](https://github.com/MelihAltintas/vue3-openlayers/commit/3eb1fff345b81c2990e5aa84eaedea3b39164e19)), closes [#307](https://github.com/MelihAltintas/vue3-openlayers/issues/307)
 * **ol-vector-layer:** add `background` property ([f51cd25](https://github.com/MelihAltintas/vue3-openlayers/commit/f51cd25d93820459209892d817c34be73094faf1))
 
 ## [6.2.1](https://github.com/MelihAltintas/vue3-openlayers/compare/v6.2.0...v6.2.1) (2024-03-25)
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -255,7 +255,7 @@ export const config: UserConfig = {
                 link: "/componentsguide/mapcontrols/search/",
               },
               {
-                text: "ol-scaleline-control",
+                text: "ol-scale-line-control",
                 link: "/componentsguide/mapcontrols/scaleline/",
               },
               {
@@ -339,7 +339,7 @@ export const config: UserConfig = {
                 link: "/componentsguide/styles/fill/",
               },
               {
-                text: "ol-style-flowline",
+                text: "ol-style-flow-line",
                 link: "/componentsguide/styles/flowline/",
               },
               {
@@ -369,15 +369,15 @@ export const config: UserConfig = {
                 link: "/componentsguide/interactions/draw/",
               },
               {
-                text: "ol-interaction-dragbox",
+                text: "ol-interaction-drag-box",
                 link: "/componentsguide/interactions/dragbox/",
               },
               {
-                text: "ol-interaction-dragrotate",
+                text: "ol-interaction-drag-rotate",
                 link: "/componentsguide/interactions/dragrotate/",
               },
               {
-                text: "ol-interaction-dragrotatezoom",
+                text: "ol-interaction-drag-rotate-and-zoom",
                 link: "/componentsguide/interactions/dragrotatezoom/",
               },
               {
diff --git a/docs/componentsguide/interactions/dragbox/index.md b/docs/componentsguide/interactions/dragbox/index.md
@@ -1,4 +1,4 @@
-# ol-interaction-dragbox
+# ol-interaction-drag-box
 
 > Allows the user to draw a vector box by clicking and dragging on the map,
 > normally combined with a _condition_ that limits it to when the `shift` or other key is held down.
@@ -21,9 +21,9 @@ import VectorSourceDemo1 from "@demos/VectorSourceDemo1.vue"
 
 ## Usage
 
-| Plugin Usage               |            Explicit Import            |
-| -------------------------- | :-----------------------------------: |
-| `<ol-interaction-dragbox>` | `<Interactions.OlInteractionDragbox>` |
+| Plugin Usage                |            Explicit Import            |
+| --------------------------- | :-----------------------------------: |
+| `<ol-interaction-drag-box>` | `<Interactions.OlInteractionDragbox>` |
 
 ::: code-group
 
@@ -50,9 +50,9 @@ 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_DragBox-DragBox.html) to see the available events tht will be fired.
 
 ```html
-<ol-interaction-dragbox @error="handleEvent">
+<ol-interaction-drag-box @error="handleEvent">
   <!-- ... -->
-</ol-interaction-dragbox>
+</ol-interaction-drag-box>
 ```
 
 ## Methods
@@ -65,7 +65,7 @@ To access the source, you can use a `ref()` as shown below:
 ```vue
 <template>
   <!-- ... -->
-  <ol-interaction-dragbox ref="dragboxRef" @error="handleEvent" />
+  <ol-interaction-drag-box ref="dragboxRef" @error="handleEvent" />
   <!-- ... -->
 </template>
 
diff --git a/docs/componentsguide/interactions/dragrotate/index.md b/docs/componentsguide/interactions/dragrotate/index.md
@@ -1,4 +1,4 @@
-# ol-interaction-dragrotate
+# ol-interaction-drag-rotate
 
 > Rotate the map by clicking and dragging on the map, normally combined with an `ol/events/condition` that limits it to when the `alt` and `shift` keys are held down.
 
@@ -20,9 +20,9 @@ import DragRotateDemo from "@demos/DragRotateDemo.vue"
 
 ## Usage
 
-| Plugin Usage                  |             Explicit Import              |
-| ----------------------------- | :--------------------------------------: |
-| `<ol-interaction-dragrotate>` | `<Interactions.OlInteractionDragrotate>` |
+| Plugin Usage                   |             Explicit Import              |
+| ------------------------------ | :--------------------------------------: |
+| `<ol-interaction-drag-rotate>` | `<Interactions.OlInteractionDragrotate>` |
 
 ::: code-group
 
diff --git a/docs/componentsguide/interactions/dragrotatezoom/index.md b/docs/componentsguide/interactions/dragrotatezoom/index.md
@@ -1,4 +1,4 @@
-# ol-interaction-dragrotatezoom
+# ol-interaction-drag-rotate-and-zoom
 
 > Zoom and rotate the map by clicking and dragging on the map. By default, this interaction is limited to when the `shift` key is held down.
 
@@ -20,9 +20,9 @@ import DragRotateZoomDemo from "@demos/DragRotateZoomDemo.vue"
 
 ## Usage
 
-| Plugin Usage                      |               Explicit Import                |
-| --------------------------------- | :------------------------------------------: |
-| `<ol-interaction-dragrotatezoom>` | `<Interactions.OlInteractionDragrotatezoom>` |
+| Plugin Usage                            |               Explicit Import                |
+| --------------------------------------- | :------------------------------------------: |
+| `<ol-interaction-drag-rotate-and-zoom>` | `<Interactions.OlInteractionDragrotatezoom>` |
 
 ::: code-group
 
diff --git a/docs/componentsguide/mapcontrols/scaleline/index.md b/docs/componentsguide/mapcontrols/scaleline/index.md
@@ -1,4 +1,4 @@
-# ol-scaleline-control
+# ol-scale-line-control
 
 > A Scale Line control for OpenLayers.
 
@@ -20,9 +20,9 @@ import ScalelineControlDemo from "@demos/ScalelineControlDemo.vue"
 
 ## Usage
 
-| Plugin Usage             |          Explicit Import           |
-| ------------------------ | :--------------------------------: |
-| `<ol-scaleline-control>` | `<MapControls.OlScalelineControl>` |
+| Plugin Usage              |          Explicit Import           |
+| ------------------------- | :--------------------------------: |
+| `<ol-scale-line-control>` | `<MapControls.OlScalelineControl>` |
 
 ::: code-group
 
diff --git a/docs/componentsguide/styles/flowline/index.md b/docs/componentsguide/styles/flowline/index.md
@@ -1,4 +1,4 @@
-# ol-style-flowline
+# ol-style-flow-line
 
 > Style of a flowline in a vector layer
 
@@ -19,9 +19,9 @@ import FlowLineDemo from "@demos/FlowLineDemo.vue"
 
 ## Usage
 
-| Plugin Usage          |      Explicit Import       |
-| --------------------- | :------------------------: |
-| `<ol-style-flowline>` | `<Styles.OlStyleFlowline>` |
+| Plugin Usage           |      Explicit Import       |
+| ---------------------- | :------------------------: |
+| `<ol-style-flow-line>` | `<Styles.OlStyleFlowline>` |
 
 ::: code-group
 
diff --git a/src/components/interaction/index.ts b/src/components/interaction/index.ts
@@ -16,7 +16,7 @@ import type { Vue3OpenlayersGlobalOptions } from "@/types";
 function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("OlInteractionClusterSelect", OlInteractionClusterSelect);
   app.component("OlInteractionDragBox", OlInteractionDragBox);
-  app.component("OlInteractionDragAndRotate", OlInteractionDragRotate);
+  app.component("OlInteractionDragRotate", OlInteractionDragRotate);
   app.component(
     "OlInteractionDragRotateAndZoom",
     OlInteractionDragRotateAndZoom,
diff --git a/src/demos/AppDemo.vue b/src/demos/AppDemo.vue
@@ -77,7 +77,7 @@
       </ol-tile-layer>
     </ol-overview-map-control>
 
-    <ol-scaleline-control />
+    <ol-scale-line-control />
     <ol-rotate-control />
     <ol-zoom-control />
     <ol-zoom-slider-control />
@@ -230,7 +230,7 @@
       <ol-source-vector>
         <ol-feature ref="animationPath">
           <ol-geom-line-string :coordinates="path"></ol-geom-line-string>
-          <ol-style-flowline
+          <ol-style-flow-line
             color="red"
             color2="yellow"
             :width="10"
diff --git a/src/demos/DragRotateDemo.vue b/src/demos/DragRotateDemo.vue
@@ -15,7 +15,7 @@
       <ol-source-osm />
     </ol-tile-layer>
 
-    <ol-interaction-dragrotate />
+    <ol-interaction-drag-rotate />
   </ol-map>
 </template>
 
diff --git a/src/demos/DragRotateZoomDemo.vue b/src/demos/DragRotateZoomDemo.vue
@@ -15,7 +15,7 @@
       <ol-source-osm />
     </ol-tile-layer>
 
-    <ol-interaction-dragrotatezoom />
+    <ol-interaction-drag-rotate-and-zoom />
   </ol-map>
 </template>
 
diff --git a/src/demos/FlowLineDemo.vue b/src/demos/FlowLineDemo.vue
@@ -15,7 +15,7 @@
       <ol-source-vector>
         <ol-feature ref="animationPath">
           <ol-geom-line-string :coordinates="path"></ol-geom-line-string>
-          <ol-style-flowline
+          <ol-style-flow-line
             color="red"
             color2="yellow"
             :width="10"
diff --git a/src/demos/ScalelineControlDemo.vue b/src/demos/ScalelineControlDemo.vue
@@ -10,7 +10,7 @@
     <ol-tile-layer>
       <ol-source-osm />
     </ol-tile-layer>
-    <ol-scaleline-control :bar="showAsBar" />
+    <ol-scale-line-control :bar="showAsBar" />
   </ol-map>
 </template>
 
diff --git a/src/demos/VectorSourceDemo1.vue b/src/demos/VectorSourceDemo1.vue
@@ -37,13 +37,13 @@
       </ol-source-vector>
     </ol-vector-layer>
 
-    <ol-interaction-dragbox
+    <ol-interaction-drag-box
       :condition="shiftKeyOnly"
       @boxstart="log('boxstart', $event)"
       @boxdrag="log('boxdrag', $event)"
       @boxend="log('boxend', $event)"
       @boxcancel="log('boxcancel', $event)"
-    ></ol-interaction-dragbox>
+    ></ol-interaction-drag-box>
   </ol-map>
 </template>
 
diff --git a/tests/controls.test.ts b/tests/controls.test.ts
@@ -143,7 +143,7 @@ test.describe("ol-search-control", () => {
   });
 });
 
-test.describe("ol-scaleline-control", () => {
+test.describe("ol-scale-line-control", () => {
   test("should render as ScaleLine", async ({ page }) => {
     const map = new MapPage(page);
     await map.goto("/componentsguide/mapcontrols/scaleline/");
diff --git a/tests/general.test.ts b/tests/general.test.ts
@@ -40,7 +40,7 @@ test.describe("ol-overlay", () => {
   });
 });
 
-test.describe("ol-geolocation", () => {
+test.describe("ol-geo-location", () => {
   test("should render", async ({ page }) => {
     const map = new MapPage(page);
     await map.goto("/componentsguide/geolocation/");
diff --git a/tests/interactions.test.ts b/tests/interactions.test.ts
@@ -70,7 +70,7 @@ test.describe("ol-interaction-draw", () => {
   });
 });
 
-test.describe("ol-interaction-dragbox", () => {
+test.describe("ol-interaction-drag-box", () => {
   test("should drag on the map", async ({ page }) => {
     const map = new MapPage(page);
     await map.goto("/componentsguide/interactions/dragbox/");
@@ -81,7 +81,7 @@ test.describe("ol-interaction-dragbox", () => {
   });
 });
 
-test.describe("ol-interaction-dragrotate", () => {
+test.describe("ol-interaction-drag-rotate", () => {
   test("should rotate the map view by dragging on it with pressed modifiers", async ({
     page,
   }) => {
@@ -94,7 +94,7 @@ test.describe("ol-interaction-dragrotate", () => {
   });
 });
 
-test.describe("ol-interaction-dragrotatezoom", () => {
+test.describe("ol-interaction-drag-rotate-and-zoom", () => {
   test("should rotate the map view and zoom by dragging on it with pressed modifiers", async ({
     page,
   }) => {
diff --git a/tests/style.test.ts b/tests/style.test.ts
@@ -32,7 +32,7 @@ test.describe("ol-style-fill", () => {
   });
 });
 
-test.describe("ol-style-flowline", () => {
+test.describe("ol-style-flow-line", () => {
   test("should render", async ({ page }) => {
     const map = new MapPage(page);
     await map.goto("/componentsguide/styles/flowline/");

Original file line number	Diff line number	Diff line change
`@@ -255,7 +255,7 @@ export const config: UserConfig = {`
`255`	`255`	`link: "/componentsguide/mapcontrols/search/",`
`256`	`256`	`},`
`257`	`257`	`{`
`258`		`- text: "ol-scaleline-control",`
	`258`	`+ text: "ol-scale-line-control",`
`259`	`259`	`link: "/componentsguide/mapcontrols/scaleline/",`
`260`	`260`	`},`
`261`	`261`	`{`
`@@ -339,7 +339,7 @@ export const config: UserConfig = {`
`339`	`339`	`link: "/componentsguide/styles/fill/",`
`340`	`340`	`},`
`341`	`341`	`{`
`342`		`- text: "ol-style-flowline",`
	`342`	`+ text: "ol-style-flow-line",`
`343`	`343`	`link: "/componentsguide/styles/flowline/",`
`344`	`344`	`},`
`345`	`345`	`{`
`@@ -369,15 +369,15 @@ export const config: UserConfig = {`
`369`	`369`	`link: "/componentsguide/interactions/draw/",`
`370`	`370`	`},`
`371`	`371`	`{`
`372`		`- text: "ol-interaction-dragbox",`
	`372`	`+ text: "ol-interaction-drag-box",`
`373`	`373`	`link: "/componentsguide/interactions/dragbox/",`
`374`	`374`	`},`
`375`	`375`	`{`
`376`		`- text: "ol-interaction-dragrotate",`
	`376`	`+ text: "ol-interaction-drag-rotate",`
`377`	`377`	`link: "/componentsguide/interactions/dragrotate/",`
`378`	`378`	`},`
`379`	`379`	`{`
`380`		`- text: "ol-interaction-dragrotatezoom",`
	`380`	`+ text: "ol-interaction-drag-rotate-and-zoom",`
`381`	`381`	`link: "/componentsguide/interactions/dragrotatezoom/",`
`382`	`382`	`},`
`383`	`383`	`{`