Merge pull request #3 from systragroup/test

add vitepress

.gitignore

@@ -52,3 +52,6 @@ vue-mapbox-demo
 checklist.txt
 .flowconfig
 docs_source/.vuepress/dist
+
+docs/.vitepress/dist
+docs/.vitepress/cache

docs/.vitepress/config.mjs

@@ -0,0 +1,59 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "VueMapbox 3",
+  description: "A Vue3 mapbox wrapper",
+  base:"/vue-mapbox/",
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/README' },
+      { text: 'API', link: '/api/README' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Quickstart', link: '/guide/README' },
+          { text: 'Base map', link: '/guide/basemap' },
+          { text: 'Composition', link: '/guide/composition' },
+          { text: 'Controls', link: '/guide/controls' },
+          { text: 'Markers and popups', link: '/guide/markers&popups' },
+          { text: 'Layers and sources', link: '/guide/layers&sources' }
+        ]
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'GlMap', link: '/api/README' },
+          { text: 'Controls', link: '/api/controls' },
+          { text: 'MapMarker', link: '/api/marker' },
+          { text: 'Popup', link: '/api/popup' },
+          { text: 'Layer commons', link: '/api/Layers/README' },
+          { text: 'Geojson Layer', link: '/api/Layers/geojsonlayer' },
+          { text: 'Vector Layer', link: '/api/Layers/vectorlayer' },
+          { text: 'Raster Layer', link: '/api/Layers/rasterlayer' },
+          { text: 'Image Layer', link: '/api/Layers/imagelayer' },
+          { text: 'Video Layer', link: '/api/Layers/videolayer' },
+          { text: 'Canvas Layer', link: '/api/Layers/canvaslayer' },
+        ]
+      },
+      {
+        text: 'Plugin components',
+        items: [
+          { text: 'Using plugin components', link: '/plugin_components/README' },
+          { text: 'Create a plugin component', link: '/plugin_components/plugin_components_development' },
+
+        ]
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/systragroup/vue-mapbox' }
+    ],
+    footer:{message: 'Released under the MIT License.'}
+  }
+})

docs/api/Layers/canvaslayer.md

@@ -11,4 +11,4 @@ All common [layers props](/api/Layers/README.md#props)
 
 ## Events
 
-All common layer [events](/api/Layers/#events)
+All common layer [events](/api/Layers/README.md#events)

docs/api/Layers/geojsonlayer.md

@@ -80,4 +80,4 @@ All common [layers props](/api/Layers/README.md#props)
 
 ## Events
 
-All common layer [events](/api/Layers/#events)
+All common layer [events](/api/Layers/README.md#events)

docs/api/Layers/imagelayer.md

@@ -1,5 +1,4 @@
 # ImageLayer
-
 ## Props
 
 All common [layers props](/api/Layers/README.md#props)
@@ -18,4 +17,4 @@ If you change their value, changes automatically applied to the map.
 
 ## Events
 
-All common layer [events](/api/Layers/#events)
+All common layer [events](/api/Layers/README.md#events)

docs/api/Layers/rasterlayer.md

@@ -13,4 +13,4 @@ All common [layers props](/api/Layers/README.md#props)
 
 ## Events
 
-All common layer [events](/api/Layers/#events)
+All common layer [events](/api/Layers/README.md#events)

docs/api/Layers/vectorlayer.md

@@ -47,4 +47,4 @@ All common [layers props](/api/Layers/README.md#props)
 
 ## Events
 
-All common layer [events](/api/Layers/#events)
+All common layer [events](/api/Layers/README.md#events)

docs/api/marker.md

@@ -1,5 +1,4 @@
 # Marker
-
 ## Props
 
 ### `offset`

docs/guide/README.md

@@ -4,68 +4,29 @@
 
 ### Installation
 
-You can install vue-mapbox via npm. Take note that you need to install mapbox-gl as peer dependency:
+You can install vue-mapbox via npm. Take note that you need to install mapbox-gl and map-promisified as peer dependency:
 
 ```bash
-npm install --save vue-mapbox mapbox-gl
+npm i vue-mapbox mapbox-gl
+npm i map-promisified
+npm i mapbox-gl
 ```
 
-Add mapbox JS and CSS files to the files where you need them:
+in your vite.config.js add:
 
 ```js
-import "mapbox-gl/dist/mapbox-gl.css";
-import Mapbox from "mapbox-gl";
-import { MglMap } from "vue-mapbox";
+  optimizeDeps: {
+    include: ['map-promisified'],
+  }
 ```
 
-## Using in browser
 
-### Installation
-
-Add Vue, MapboxGL and Vue-mapbox scripts on your page:
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <!-- ... -->
-    <!-- Mapbox GL CSS -->
-    <link
-      href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css"
-      rel="stylesheet"
-    />
-    <!-- Vue-mapbox CSS -->
-    <link
-      href="https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.css"
-      rel="stylesheet"
-    />
-    <!-- Mapbox GL JS -->
-    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
-    <!-- VueJS -->
-    <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
-    <!-- Vue-mapbox -->
-    <script
-      type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.min.js"
-    ></script>
-    <!-- ... -->
-  </head>
-</html>
-```
 
-All components will be placed in global VueMapbox object (`VueMapbox.MglMap` etc.)
-
-## Migration from version 0.1.x
-
-In version `0.2` you don't need to register VueMapbox as Vue plugin.
-
-So you don't need this code anymore:
+Add mapbox JS and CSS files to the files where you need them:
 
 ```js
-import VueMapbox from "vue-mapbox";
+import "mapbox-gl/dist/mapbox-gl.css";
 import Mapbox from "mapbox-gl";
-
-Vue.use(VueMapbox, { mapboxgl: Mapbox });
+import { MglMap } from "vue-mapbox";
 ```
 
-Now you're ready for mapping. See how to [create a map](/guide/basemap.md).

docs/guide/basemap.md

@@ -58,7 +58,7 @@ If none is passed, VueMapbox imports Mapbox-gl internally.
 You can control map parameters like zoom, bearing, pitch etc. by changing props.
 If you set `.sync` modifier ([Vue docs](https://vuejs.org/v2/guide/components.html#sync-Modifier)) to prop, it will updates when you use operations that takes time to proceed. For example, if you use `flyTo` method, props `zoom`, `center`, `bearing`, `pitch` will be updated when animation ends.
 
-Full list of props see in [API docs](/api/#props), note field 'Synced' in description
+Full list of props see in [API docs](/api/README.md#props), note field 'Synced' in description
 
 ## Map loading
 
@@ -132,12 +132,12 @@ export deafult {
 </script>
 ```
 
-See full list of actions on [API](/api/#actions) page.
+See full list of actions on [API](/api/README.md#actions) page.
 
 ### Method `actions.stop()`
 
 Method `.stop()` just stops all animations on map, updates props with new positions and return Promise with map parameters at the moment when `.stop()` called.
 
 ### Events
 
-See list of events on [API](/api/#events) page.
+See list of events on [API](/api/README.md#events) page.