diff --git a/docs/en/guide/Map.md b/docs/en/guide/Map.md index 0ee5b10..e031484 100644 --- 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 index 3bbd3e6..77a146c 100644 --- 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 index cf26c87..4f5512b 100644 --- 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 index a51b678..55b6e6d 100644 --- 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 index 0c30686..0f6a3a5 100644 --- 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 index 875e6a2..a21a626 100644 --- 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 index ff2e0e0..08e9a6b 100644 --- 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 index 953b712..2d1f0b0 100755 --- 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 index 069af4d..d1f2de6 100644 --- 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: '',