From 470d465ed8431bca8cb997131c88a6ce1afbde66 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Tue, 19 Sep 2023 23:03:48 +0200
Subject: [PATCH] docs(ol-control-bar): add documentation

---
 docs/.vitepress/config.ts                     |  4 +
 .../mapcontrols/controlbar/index.md           | 20 +++++
 docs/public/sitemap.xml                       |  5 ++
 src/demos/AppDemo.vue                         |  8 +-
 src/demos/ControlBarDemo.vue                  | 87 +++++++++++++++++++
 5 files changed, 120 insertions(+), 4 deletions(-)
 create mode 100644 docs/componentsguide/mapcontrols/controlbar/index.md
 create mode 100644 src/demos/ControlBarDemo.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 8242d6e2..1ddcef47 100644
--- a/docs/.vitepress/config.ts
+++ b/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/",
diff --git a/docs/componentsguide/mapcontrols/controlbar/index.md b/docs/componentsguide/mapcontrols/controlbar/index.md
new file mode 100644
index 00000000..bb8a7d11
--- /dev/null
+++ b/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
diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml
index 348b0d9c..6ede1dd1 100644
--- a/docs/public/sitemap.xml
+++ b/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>
diff --git a/src/demos/AppDemo.vue b/src/demos/AppDemo.vue
index 694c2bc9..1027d01b 100644
--- a/src/demos/AppDemo.vue
+++ b/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')"
diff --git a/src/demos/ControlBarDemo.vue b/src/demos/ControlBarDemo.vue
new file mode 100644
index 00000000..680ffe03
--- /dev/null
+++ b/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>