docs(ol-control-bar): add documentation

docs/.vitepress/config.ts

@@ -333,6 +333,10 @@ export default defineConfig({
         text: "Map Controls",
         collapsed: true,
         items: [
+          {
+            text: "ol-control-bar",
+            link: "/componentsguide/mapcontrols/controlbar/",
+          },
           {
             text: "ol-attribution-control",
             link: "/componentsguide/mapcontrols/attribution/",

docs/componentsguide/mapcontrols/controlbar/index.md

@@ -0,0 +1,20 @@
+# ol-control-bar
+
+> A group of controls
+
+<script setup>
+import ControlBarDemo from "@demos/ControlBarDemo.vue"
+</script>
+<ClientOnly>
+<ControlBarDemo />
+</ClientOnly>
+
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/ControlBarDemo.vue
+
+:::
+
+## Properties

docs/public/sitemap.xml

@@ -307,6 +307,11 @@
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>
   <priority>0.80</priority>
 </url>
+<url>
+  <loc>https://vue3openlayers.netlify.app/componentsguide/mapcontrols/controlbar/</loc>
+  <lastmod>2023-09-19T23:00:00+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
 <url>
   <loc>https://vue3openlayers.netlify.app/componentsguide/mapcontrols/contextmenu/</loc>
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>

src/demos/AppDemo.vue

@@ -42,25 +42,25 @@
 
     <ol-control-bar>
       <ol-toggle-control
-        html="<i class='fas fa-map-marker'></i>"
+        html="🔘"
         className="edit"
         title="Point"
         :onToggle="(active) => changeDrawType(active, 'Point')"
       />
       <ol-toggle-control
-        html="<i class='fas fa-draw-polygon'></i>"
+        html="🔹"
         className="edit"
         title="Polygon"
         :onToggle="(active) => changeDrawType(active, 'Polygon')"
       />
       <ol-toggle-control
-        html="<i class='fas fa-circle'></i>"
+        html="🟢"
         className="edit"
         title="Circle"
         :onToggle="(active) => changeDrawType(active, 'Circle')"
       />
       <ol-toggle-control
-        html="<i class='fas fa-grip-lines'></i>"
+        html="〰️"
         className="edit"
         title="LineString"
         :onToggle="(active) => changeDrawType(active, 'LineString')"

src/demos/ControlBarDemo.vue

@@ -0,0 +1,87 @@
+<template>
+  <ol-map
+    ref="map"
+    :loadTilesWhileAnimating="true"
+    :loadTilesWhileInteracting="true"
+    style="height: 800px"
+  >
+    <ol-view
+      ref="view"
+      :center="center"
+      :rotation="rotation"
+      :zoom="zoom"
+      :projection="projection"
+    />
+    <ol-tile-layer ref="osmLayer" title="OSM">
+      <ol-source-osm />
+    </ol-tile-layer>
+
+    <ol-control-bar>
+      <ol-toggle-control
+        html="🔘"
+        className="edit"
+        title="Point"
+        :onToggle="(active) => changeDrawType(active, 'Point')"
+      />
+      <ol-toggle-control
+        html="🔹"
+        className="edit"
+        title="Polygon"
+        :onToggle="(active) => changeDrawType(active, 'Polygon')"
+      />
+      <ol-toggle-control
+        html="🟢"
+        className="edit"
+        title="Circle"
+        :onToggle="(active) => changeDrawType(active, 'Circle')"
+      />
+      <ol-toggle-control
+        html="〰️"
+        className="edit"
+        title="LineString"
+        :onToggle="(active) => changeDrawType(active, 'LineString')"
+      />
+      <ol-videorecorder-control @stop="videoStopped" />
+      <ol-printdialog-control />
+    </ol-control-bar>
+
+    <ol-interaction-draw
+      :type="drawType"
+      @drawend="drawend"
+      @drawstart="drawstart"
+    >
+    </ol-interaction-draw>
+  </ol-map>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const center = ref([34, 39.13]);
+const projection = ref("EPSG:4326");
+const zoom = ref(6);
+const rotation = ref(0);
+const view = ref(null);
+
+const drawEnable = ref(false);
+const drawType = ref("Point");
+
+const changeDrawType = (active, draw) => {
+  drawEnable.value = active;
+  drawType.value = draw;
+};
+
+const drawstart = (event) => {
+  console.log(event);
+};
+
+const drawend = (event) => {
+  console.log(event);
+};
+
+const videoStopped = (event) => {
+  console.log(event);
+};
+
+const osmLayer = ref(null);
+</script>