Docs for dynamic balloon

yandex-maps-unofficial · Oct 16, 2021 · 3cbec0e · 3cbec0e
1 parent 8a629c5
commit 3cbec0e
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 7 deletions.
diff --git a/docs/en/guide/Map.md b/docs/en/guide/Map.md
@@ -90,4 +90,4 @@ The attributes `coords`, `bounds` and `zoom` are observable. The map is react if
 | show-all-markers  | Boolean | Set to `true` to initialize map with all markers inside map bounds. Default: `false` |
 | use-html-in-layout  | Boolean | Set to `true` to define balloon properties as html. Default: `false` |
 | [options](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Map-docpage/#Map__param-options) | Object | Map options. |
-
+| balloon-component | Vue Component | Allow to use Vue Component as balloon. Need to activate runtimeCompiler(https://cli.vuejs.org/config/#runtimecompiler). **Vue 2 only**|
diff --git a/docs/en/guide/Marker.md b/docs/en/guide/Marker.md
@@ -93,6 +93,7 @@ Since version `0.10` attribute `callbacks` not supported. You can listen compone
 | properties | Object | [Marker settings](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject-docpage/#param-feature.properties) | All |
 | options | Object | [Marker options](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject-docpage/#param-options) | All |
 | [balloonTemplate](/en/examples/#custom-cluster-balloon) | String | HTML Template for balloon | All |
+| balloon-component-props | Object | Props object for balloon. _Use only for balloonComponent_ | All |
 
 ## Slots
 

diff --git a/docs/guide/Map.md b/docs/guide/Map.md
@@ -90,3 +90,4 @@
 | show-all-markers  | Boolean | Установите значение в `true`, чтобы границы карты при инициализации вмещали все маркеры. Default: `false` |
 | use-html-in-layout  | Boolean | Установите значение в `true`, чтобы передавать в поля в балун в виде html-разметки. Default: `false` |
 | [options](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Map-docpage/#Map__param-options) | Object | Опции карты |
+| balloon-component | Vue Component | Позволяет использовать компонент Vue в качестве балуна. Для работы необходима активация runtimeCompiler(https://cli.vuejs.org/config/#runtimecompiler). **Только для Vue 2**|
diff --git a/docs/guide/Marker.md b/docs/guide/Marker.md
@@ -92,7 +92,8 @@
 | cluster-name | String | Имя кластера для группировки маркеров | All |
 | properties | Object | [Свойства маркера](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject-docpage/#param-feature.properties) | All |
 | options | Object | [Опции маркера](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject-docpage/#param-options) | All |
-| [balloonTemplate](/examples/#кастомный-темпnейт-баnуна) | String | HTML Template for balloon | All |
+| [balloon-template](/examples/#кастомный-темпnейт-баnуна) | String | HTML Template for balloon | All |
+| balloon-component-props | Object | Объект пропсов для балуна. _Только при инициализации балуна через balloonComponent_ | All |
 
 ## Slots
 

diff --git a/examples/vue3/src/main.js b/examples/vue3/src/main.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import ymapPlugin from '../../../src';
+import ymapPlugin from '../../../dist/vue-yandex-maps.esm.js';
 
 const app = createApp(App)
 

diff --git a/rollup.config.js b/rollup.config.js
@@ -11,6 +11,7 @@ export default [
       file: pkg.module,
       format: 'es',
       exports: 'named',
+      globals: { vue: 'vue' },
     },
     plugins: [
       babel({
@@ -26,6 +27,7 @@ export default [
       file: pkg.main,
       format: 'umd',
       exports: 'named',
+      globals: { vue: 'vue' },
     },
     plugins: [
       babel({
@@ -42,6 +44,7 @@ export default [
       format: 'iife',
       exports: 'named',
       extend: true,
+      globals: { vue: 'vue' },
     },
     plugins: [
       babel({

diff --git a/src/Marker.js b/src/Marker.js
@@ -58,6 +58,7 @@ export default {
     balloonComponentProps: {
       type: Object,
       default: () => ({}),
+    },
     markerEvents: {
       type: Array,
       default: () => [],
@@ -70,6 +71,7 @@ export default {
   },
   mounted() {
     Object.keys(this.$props).forEach((prop) => {
+      if (prop === 'balloonComponentProps') return;
       this.unwatchArr.push(this.$watch(
         prop,
         (newVal, oldVal) => this.compareValues({
@@ -108,7 +110,7 @@ export default {
 
       if (this.$slots.balloon) {
         balloonContentLayout = ymaps.templateLayoutFactory
-        .createClass(typeof this.$slots.balloon === 'function' ? this.$slots.balloon()[0].elm.outerHTML : this.$slots.balloon[0].elm.outerHTML);
+          .createClass(typeof this.$slots.balloon === 'function' ? this.$slots.balloon()[0].elm.outerHTML : this.$slots.balloon[0].elm.outerHTML);
       }
 
       if (this.makeComponentBalloonTemplate) {

diff --git a/src/YMap.js b/src/YMap.js
@@ -233,7 +233,9 @@ export default {
         this.$emit('markers-was-change', ids);
       } else utils.addToMap(markers, config);
       this.$options.static.markers = [];
-      if (this.showAllMarkers) this.$options.static.myMap.setBounds(this.$options.static.myMap.geoObjects.getBounds());
+      if (this.showAllMarkers) {
+        this.$options.static.myMap.setBounds(this.$options.static.myMap.geoObjects.getBounds());
+      }
     },
     deleteMarkers(deletedMarkersIds) {
       this.$options.static.myMap.geoObjects.each((collection) => {
@@ -268,7 +270,9 @@ export default {
     coordinates(val) {
       if (this.disablePan) {
         if (this.$options.static.myMap.setCenter) this.$options.static.myMap.setCenter(val);
-      } else if (this.$options.static.myMap.panTo && this.$options.static.myMap.getZoom()) this.$options.static.myMap.panTo(val, { checkZoomRange: true });
+      } else if (this.$options.static.myMap.panTo && this.$options.static.myMap.getZoom()) {
+        this.$options.static.myMap.panTo(val, { checkZoomRange: true });
+      }
     },
     zoom() {
       this.$options.static.myMap.setZoom(this.zoom);
@@ -316,7 +320,9 @@ export default {
     if (this.placemarks && this.placemarks.length) throw new Error('Vue-yandex-maps: Attribute placemarks is not supported. Use marker component.');
 
     this.mapObserver = new MutationObserver((() => {
-      if (this.$options.static.myMap.container) this.$options.static.myMap.container.fitToViewport();
+      if (this.$options.static.myMap.container) {
+        this.$options.static.myMap.container.fitToViewport();
+      }
     }));
 
     // Setup the observer

diff --git a/src/utils.js b/src/utils.js
@@ -241,6 +241,7 @@ let idCounter = 1;
 let VueBalloonClass;
 
 export function setupBalloonClass(Vue) {
+  if (typeof Vue.extend !== 'function') return;
   VueBalloonClass = Vue.extend({
     props: ['marker', 'component'],
     template: '<component :is="component" v-bind="{ marker, ...props.balloonComponentProps }" v-on="listeners" />',