docs(ol-full-screen-control): use correct element / selector for OlFullScreenControl

closes #439

Author: d-koppenhagen

docs/.vitepress/config.ts

@@ -219,7 +219,7 @@ export const config: UserConfig = {
                 link: "/componentsguide/mapcontrols/contextmenu/",
               },
               {
-                text: "ol-fullscreen-control",
+                text: "ol-full-screen-control",
                 link: "/componentsguide/mapcontrols/fullscreen/",
               },
               {

docs/componentsguide/mapcontrols/fullscreen/index.md

@@ -1,4 +1,4 @@
-# ol-fullscreen-control
+# ol-full-screen-control
 
 > A Fullscreen control for OpenLayers.
 
@@ -7,10 +7,10 @@
 ## Demo
 
 <script setup lang="ts">
-import FullscreenControlDemo from "@demos/FullscreenControlDemo.vue"
+import FullScreenControlDemo from "@demos/FullScreenControlDemo.vue"
 </script>
 <ClientOnly>
-<FullscreenControlDemo />
+<FullScreenControlDemo />
 </ClientOnly>
 
 ## Setup
@@ -19,13 +19,13 @@ import FullscreenControlDemo from "@demos/FullscreenControlDemo.vue"
 
 ## Usage
 
-| Plugin Usage              |           Explicit Import           |
-| ------------------------- | :---------------------------------: |
-| `<ol-fullscreen-control>` | `<MapControls.OlFullScreenControl>` |
+| Plugin Usage               |           Explicit Import           |
+| -------------------------- | :---------------------------------: |
+| `<ol-full-screen-control>` | `<MapControls.OlFullScreenControl>` |
 
 ::: code-group
 
-<<< ../../../../src/demos/FullscreenControlDemo.vue
+<<< ../../../../src/demos/FullScreenControlDemo.vue
 
 :::
 

src/demos/AppDemo.vue

@@ -70,7 +70,7 @@
     </ol-control-bar>
 
     <ol-mouse-position-control />
-    <ol-fullscreen-control />
+    <ol-full-screen-control />
     <ol-overview-map-control>
       <ol-tile-layer>
         <ol-source-osm />

src/demos/FullScreenControlDemo.vue

@@ -0,0 +1,22 @@
+<template>
+  <ol-map ref="map" style="height: 400px" :controls="[]">
+    <ol-view
+      ref="view"
+      :center="center"
+      :zoom="zoom"
+      :projection="projection"
+    />
+
+    <ol-tile-layer>
+      <ol-source-osm />
+    </ol-tile-layer>
+    <ol-full-screen-control />
+  </ol-map>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(8);
+</script>

src/demos/FullscreenControlDemo.vue

@@ -10,7 +10,7 @@
     <ol-tile-layer>
       <ol-source-osm />
     </ol-tile-layer>
-    <ol-fullscreen-control />
+    <ol-full-screen-control />
   </ol-map>
 </template>
 

tests/controls.test.ts

@@ -36,7 +36,7 @@ test.describe("ol-context-menu-control", () => {
   });
 });
 
-test.describe("ol-fullscreen-control", () => {
+test.describe("ol-full-screen-control", () => {
   test("should render", async ({ page }) => {
     const map = new MapPage(page);
     await map.goto("/componentsguide/mapcontrols/fullscreen/");