@d3-maps/vue 0.3.0 → 0.4.0

package/README.md

@@ -47,6 +47,12 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
+## Styling
+
+Importing `@d3-maps/vue` automatically includes `@d3-maps/core/index.css`
+
+If you need strict stylesheet ordering, load your global reset/theme styles before importing the adapter entry
+
 ## License
 
 MIT licensed. Copyright © 2020 Georgii Bukharov. See [LICENSE](./LICENSE) for more details.

package/dist/index.d.ts

@@ -1,18 +1,22 @@
 import "@d3-maps/core/index.css";
-import * as vue4 from "vue";
-import { App, StyleValue } from "vue";
+import * as vue6 from "vue";
+import { App, ComputedRef, InjectionKey, MaybeRef, StyleValue } from "vue";
 import { ExtendedFeature, ExtendedFeatureCollection, GeoPath, GeoProjection } from "d3-geo";
 import { Topology } from "topojson-specification";
 import { mesh } from "topojson-client";
 import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
 
 //#region ../core/src/lib/mapObject.d.ts
+type MapObjectFocusEventType = 'focus' | 'blur';
+type MapObjectMouseEventType = 'mouseenter' | 'mouseleave' | 'mousedown' | 'mouseup';
+type MapObjectEventType = MapObjectFocusEventType | MapObjectMouseEventType;
+type MapObjectEvent<E> = E extends MapObjectFocusEventType ? FocusEvent : MouseEvent;
 /**
  * Supported interaction states for map objects.
  */
 declare const mapObjectState: readonly ["default", "hover", "active"];
 type MapObjectState = typeof mapObjectState[number];
-type MapObjectStyles<TStyle> = Partial<Record<MapObjectState, TStyle>>;
+type MapObjectStyles$1<TStyle> = Partial<Record<MapObjectState, TStyle>>;
 //#endregion
 //#region ../core/src/lib/feature.d.ts
 /**
@@ -26,7 +30,7 @@ type MapFeature = (ExtendedFeature & Record<string, unknown>) | ExtendedFeature;
  */
 interface MapFeatureProps<TStyle = unknown> {
   data: MapFeature;
-  styles?: MapObjectStyles<TStyle>;
+  styles?: MapObjectStyles$1<TStyle>;
   fill?: string;
   stroke?: string;
 }
@@ -124,7 +128,7 @@ interface MapConfig {
   /**
    * Projection factory from d3-geo (or a compatible implementation).
    *
-   * Example: `geoEqualEarth`.
+   * Example: `geoNaturalEarth1`.
    */
   projection?: () => GeoProjection;
   /**
@@ -165,7 +169,7 @@ type MapMarkerCoordinates = [number, number];
  */
 interface MapMarkerProps<TStyle = unknown> {
   coordinates?: MapMarkerCoordinates;
-  styles?: MapObjectStyles<TStyle>;
+  styles?: MapObjectStyles$1<TStyle>;
 }
 //#endregion
 //#region ../core/src/lib/zoom.d.ts
@@ -192,7 +196,7 @@ interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
 type __VLS_Slots$3 = {
   default?: (props: MapContext) => unknown;
 };
-declare const __VLS_base$3: vue4.DefineComponent<MapConfig, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {}, string, vue4.PublicProps, Readonly<MapConfig> & Readonly<{}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base$3: vue6.DefineComponent<MapConfig, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<MapConfig> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$5: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
 declare const _default: typeof __VLS_export$5;
 type __VLS_WithSlots$3<T, S> = T & {
@@ -203,19 +207,33 @@ type __VLS_WithSlots$3<T, S> = T & {
 //#endregion
 //#region src/components/MapFeature.vue.d.ts
 type __VLS_Props$1 = MapFeatureProps<StyleValue>;
-declare const __VLS_export$4: vue4.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {} & {
+declare const __VLS_export$4: vue6.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
   [x: string]: any;
-}, string, vue4.PublicProps, Readonly<__VLS_Props$1> & Readonly<{
+}, string, vue6.PublicProps, Readonly<__VLS_Props$1> & Readonly<{
   [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const _default$1: typeof __VLS_export$4;
 //#endregion
+//#region src/hooks/useMapObject.d.ts
+type MapObjectStyles = MapObjectStyles$1<StyleValue>;
+type MapObjectEmit = <E extends MapObjectEventType>(event: E, payload: MapObjectEvent<E>) => void;
+interface UseMapObjectResult {
+  computedStyle: ComputedRef<StyleValue | undefined>;
+  onMouseEnter: (event: MouseEvent) => void;
+  onMouseLeave: (event: MouseEvent) => void;
+  onMouseDown: (event: MouseEvent) => void;
+  onMouseUp: (event: MouseEvent) => void;
+  onFocus: (event: FocusEvent) => void;
+  onBlur: (event: FocusEvent) => void;
+}
+declare function useMapObject(emit: MapObjectEmit, styles: MaybeRef<MapObjectStyles | undefined>): UseMapObjectResult;
+//#endregion
 //#region src/components/MapFeatures.vue.d.ts
 interface Props$1 {
   idKey?: string;
   fill?: string;
   stroke?: string;
-  styles?: MapObjectStyles<StyleValue>;
+  styles?: MapObjectStyles;
 }
 declare var __VLS_1$2: {
   features: MapFeature[];
@@ -223,9 +241,9 @@ declare var __VLS_1$2: {
 type __VLS_Slots$2 = {} & {
   default?: (props: typeof __VLS_1$2) => any;
 };
-declare const __VLS_base$2: vue4.DefineComponent<Props$1, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {}, string, vue4.PublicProps, Readonly<Props$1> & Readonly<{}>, {
+declare const __VLS_base$2: vue6.DefineComponent<Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props$1> & Readonly<{}>, {
   idKey: string;
-}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$3: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
 declare const _default$2: typeof __VLS_export$3;
 type __VLS_WithSlots$2<T, S> = T & {
@@ -240,13 +258,13 @@ declare var __VLS_1$1: {};
 type __VLS_Slots$1 = {} & {
   default?: (props: typeof __VLS_1$1) => any;
 };
-declare const __VLS_base$1: vue4.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {} & {
+declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
   [x: string]: any;
-}, string, vue4.PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, vue6.PublicProps, Readonly<__VLS_Props> & Readonly<{
   [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
   coordinates: MapMarkerCoordinates;
-}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$2: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
 declare const _default$3: typeof __VLS_export$2;
 type __VLS_WithSlots$1<T, S> = T & {
@@ -259,15 +277,15 @@ type __VLS_WithSlots$1<T, S> = T & {
 interface Props {
   fill?: string;
   stroke?: string;
-  styles?: MapObjectStyles<StyleValue>;
+  styles?: MapObjectStyles;
 }
-declare const __VLS_export$1: vue4.DefineComponent<Props, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {} & {
+declare const __VLS_export$1: vue6.DefineComponent<Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
   [x: string]: any;
-}, string, vue4.PublicProps, Readonly<Props> & Readonly<{
+}, string, vue6.PublicProps, Readonly<Props> & Readonly<{
   [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
   fill: string;
-}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const _default$4: typeof __VLS_export$1;
 //#endregion
 //#region src/components/MapZoom.vue.d.ts
@@ -275,14 +293,14 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: vue4.DefineComponent<ZoomProps, {
-  container: vue4.Ref<SVGGElement | null, SVGGElement | null>;
-  zoomBehavior: vue4.ComputedRef<DefaultZoomBehavior>;
-}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {} & {
+declare const __VLS_base: vue6.DefineComponent<ZoomProps, {
+  container: vue6.Ref<SVGGElement | null, SVGGElement | null>;
+  zoomBehavior: vue6.ComputedRef<DefaultZoomBehavior>;
+}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
   zoom: (payload: ZoomEvent) => any;
   zoomstart: (payload: ZoomEvent) => any;
   zoomend: (payload: ZoomEvent) => any;
-}, string, vue4.PublicProps, Readonly<ZoomProps> & Readonly<{
+}, string, vue6.PublicProps, Readonly<ZoomProps> & Readonly<{
   onZoom?: ((payload: ZoomEvent) => any) | undefined;
   onZoomstart?: ((payload: ZoomEvent) => any) | undefined;
   onZoomend?: ((payload: ZoomEvent) => any) | undefined;
@@ -291,7 +309,7 @@ declare const __VLS_base: vue4.DefineComponent<ZoomProps, {
   zoom: number;
   minZoom: number;
   maxZoom: number;
-}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default$5: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
@@ -300,6 +318,10 @@ type __VLS_WithSlots<T, S> = T & {
   };
 };
 //#endregion
+//#region src/hooks/useMapContext.d.ts
+declare const mapContextKey: InjectionKey<ComputedRef<MapContext>>;
+declare function useMapContext(): ComputedRef<MapContext> | undefined;
+//#endregion
 //#region src/plugin.d.ts
 /**
  * Vue plugin that registers all d3-maps components globally.
@@ -308,4 +330,4 @@ declare const plugin: {
   install(app: App): void;
 };
 //#endregion
-export { _default as Map, _default$1 as MapFeature, _default$2 as MapFeatures, _default$3 as MapMarker, _default$4 as MapMesh, _default$5 as MapZoom, plugin };
+export { _default as Map, _default$1 as MapFeature, _default$2 as MapFeatures, _default$3 as MapMarker, _default$4 as MapMesh, MapObjectEmit, MapObjectStyles, _default$5 as MapZoom, UseMapObjectResult, mapContextKey, plugin, useMapContext, useMapObject };

package/dist/index.iife.js

@@ -1 +1 @@
-(function(e,t,n,r){var i=Object.defineProperty,a=(e,t)=>{let n={};for(var r in e)i(n,r,{get:e[r],enumerable:!0});return t&&i(n,Symbol.toStringTag,{value:`Module`}),n};let o=Symbol(`MapContext`),s=(0,n.defineComponent)((e,{slots:t})=>((0,n.provide)(o,e.context),()=>t.default?.()??null),{props:{context:{type:Object,required:!0}}});(0,n.defineComponent)({name:`MapConsumer`,setup(e,{slots:t}){let r=(0,n.inject)(o);return()=>t.default?t.default(r??{}):null}});function c(){return(0,n.inject)(o)}let l=[`viewBox`];var u=(0,n.defineComponent)({__name:`Map`,props:{width:{},height:{},aspectRatio:{},projection:{type:Function},projectionConfig:{},data:{},dataTransformer:{type:Function}},setup(e){let t=e,i=(0,n.computed)(()=>(0,r.makeMapContext)({width:t.width,height:t.height,aspectRatio:t.aspectRatio,projection:t.projection,projectionConfig:t.projectionConfig,data:t.data,dataTransformer:t.dataTransformer}));return(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(s),{context:i.value},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,(0,n.mergeProps)({viewBox:`0 0 ${i.value.width} ${i.value.height}`},e.$attrs,{class:`d3-map`}),[(0,n.renderSlot)(e.$slots,`default`,(0,n.normalizeProps)((0,n.guardReactiveProps)(i.value)))],16,l))]),_:3},8,[`context`]))}});function d(e,t){let i=(0,n.ref)(`default`),a=t=>n=>{i.value=(0,r.getObjectStateUpdate)(t),e(t,n)};return{computedStyle:(0,n.computed)(()=>(0,r.resolveObjectStyle)(i.value,(0,n.unref)(t))),onMouseEnter:a(`mouseenter`),onMouseLeave:a(`mouseleave`),onMouseDown:a(`mousedown`),onMouseUp:a(`mouseup`),onFocus:a(`focus`),onBlur:a(`blur`)}}let f=[`d`,`fill`,`stroke`];var p=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{},fill:{},stroke:{}},setup(e,{emit:t}){let r=e,i=t,a=c(),o=(0,n.computed)(()=>a?.renderPath(r.data)),{computedStyle:s,onMouseEnter:l,onMouseLeave:u,onMouseDown:p,onMouseUp:m,onFocus:h,onBlur:g}=d(i,(0,n.toRef)(r,`styles`));return(t,r)=>o.value?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({key:0,d:o.value,style:(0,n.unref)(s),fill:e.fill,stroke:e.stroke},t.$attrs,{onMouseenter:r[0]||=(...e)=>(0,n.unref)(l)&&(0,n.unref)(l)(...e),onMouseleave:r[1]||=(...e)=>(0,n.unref)(u)&&(0,n.unref)(u)(...e),onMousedown:r[2]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onMouseup:r[3]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onClick:r[4]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onFocus:r[5]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e),onBlur:r[6]||=(...e)=>(0,n.unref)(g)&&(0,n.unref)(g)(...e)}),null,16,f)):(0,n.createCommentVNode)(`v-if`,!0)}}),m=(0,n.defineComponent)({__name:`MapFeatures`,props:{idKey:{default:`id`},fill:{},stroke:{},styles:{}},setup(e){let t=c(),i=(0,n.computed)(()=>t?.features??[]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,null,[(0,n.renderSlot)(t.$slots,`default`,{features:i.value},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.value,(i,a)=>((0,n.openBlock)(),(0,n.createBlock)(p,(0,n.mergeProps)({key:(0,n.unref)(r.getFeatureKey)(i,e.idKey,a),data:i,fill:e.fill,stroke:e.stroke,styles:e.styles},{ref_for:!0},t.$attrs),null,16,[`data`,`fill`,`stroke`,`styles`]))),128))])]))}});let h=[`transform`];var g=(0,n.defineComponent)({__name:`MapMarker`,props:{coordinates:{default:()=>[0,0]},styles:{}},setup(e,{emit:t}){let i=e,a=t,o=c(),s=(0,n.computed)(()=>(0,r.getMarkerTransform)(o,i.coordinates)),{computedStyle:l,onMouseEnter:u,onMouseLeave:f,onMouseDown:p,onMouseUp:m,onFocus:g,onBlur:_}=d(a,(0,n.toRef)(i,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{transform:s.value,style:(0,n.normalizeStyle)((0,n.unref)(l)),onMouseenter:t[0]||=(...e)=>(0,n.unref)(u)&&(0,n.unref)(u)(...e),onMouseleave:t[1]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMousedown:t[2]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onMouseup:t[3]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onClick:t[4]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onFocus:t[5]||=(...e)=>(0,n.unref)(g)&&(0,n.unref)(g)(...e),onBlur:t[6]||=(...e)=>(0,n.unref)(_)&&(0,n.unref)(_)(...e)},[(0,n.renderSlot)(e.$slots,`default`)],44,h))}});let _=[`d`,`fill`,`stroke`];var v=(0,n.defineComponent)({__name:`MapMesh`,props:{fill:{default:`none`},stroke:{},styles:{}},setup(e,{emit:t}){let r=e,i=t,a=c(),o=(0,n.computed)(()=>a?.renderMesh()),{computedStyle:s,onMouseEnter:l,onMouseLeave:u,onMouseDown:f,onMouseUp:p,onFocus:m,onBlur:h}=d(i,(0,n.toRef)(r,`styles`));return(t,r)=>o.value?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({key:0,d:o.value,style:(0,n.unref)(s),fill:e.fill,stroke:e.stroke},t.$attrs,{onMouseenter:r[0]||=(...e)=>(0,n.unref)(l)&&(0,n.unref)(l)(...e),onMouseleave:r[1]||=(...e)=>(0,n.unref)(u)&&(0,n.unref)(u)(...e),onMousedown:r[2]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMouseup:r[3]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onClick:r[4]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onFocus:r[5]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onBlur:r[6]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e)}),null,16,_)):(0,n.createCommentVNode)(`v-if`,!0)}}),y=(0,n.defineComponent)({__name:`MapZoom`,props:{center:{default:()=>[0,0]},zoom:{default:1},minZoom:{default:1},maxZoom:{default:8},config:{}},emits:[`zoomstart`,`zoom`,`zoomend`],setup(e,{expose:t,emit:i}){let a=e,o=i,s=(0,n.ref)(null),l=c(),u=(0,n.computed)(()=>(0,r.createZoomBehavior)(l,{minZoom:a.minZoom,maxZoom:a.maxZoom,config:a.config,onZoomStart:e=>o(`zoomstart`,e),onZoom:e=>{s.value&&s.value.setAttribute(`transform`,e.transform.toString()),o(`zoom`,e)},onZoomEnd:e=>o(`zoomend`,e)}));return(0,n.onMounted)(()=>{(0,n.watch)(()=>[u],()=>(0,r.setupZoom)({element:s.value,behavior:u.value,center:a.center,zoom:a.zoom}),{immediate:!0}),(0,n.watch)(()=>[a.center[0],a.center[1],a.zoom],()=>(0,r.applyZoomTransform)({element:s.value,behavior:u.value,center:a.center,zoom:a.zoom}))}),t({container:s,zoomBehavior:u}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{ref_key:`container`,ref:s,class:`d3-map-zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),b=a({Map:()=>u,MapFeature:()=>p,MapFeatures:()=>m,MapMarker:()=>g,MapMesh:()=>v,MapZoom:()=>y});e.Map=u,e.MapFeature=p,e.MapFeatures=m,e.MapMarker=g,e.MapMesh=v,e.MapZoom=y,e.plugin={install(e){Object.entries(b).forEach(([t,n])=>{e.component(t,n)})}}})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,Vue,D3Maps);
+(function(e,t,n,r){var i=Object.defineProperty,a=(e,t)=>{let n={};for(var r in e)i(n,r,{get:e[r],enumerable:!0});return t&&i(n,Symbol.toStringTag,{value:`Module`}),n};let o=Symbol(`MapContext`);function s(){return(0,n.inject)(o)}let c=[`viewBox`];var l=(0,n.defineComponent)({__name:`Map`,props:{width:{},height:{},aspectRatio:{},projection:{type:Function},projectionConfig:{},data:{},dataTransformer:{type:Function}},setup(e){let t=e,i=(0,n.computed)(()=>(0,r.makeMapContext)({width:t.width,height:t.height,aspectRatio:t.aspectRatio,projection:t.projection,projectionConfig:t.projectionConfig,data:t.data,dataTransformer:t.dataTransformer}));return(0,n.provide)(o,i),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,(0,n.mergeProps)({viewBox:`0 0 ${i.value.width} ${i.value.height}`},e.$attrs,{class:`d3-map`}),[(0,n.renderSlot)(e.$slots,`default`,(0,n.normalizeProps)((0,n.guardReactiveProps)(i.value)))],16,c))}});function u(e,t){let i=(0,n.ref)(`default`),a=t=>n=>{i.value=(0,r.getObjectStateUpdate)(t),e(t,n)};return{computedStyle:(0,n.computed)(()=>(0,r.resolveObjectStyle)(i.value,(0,n.unref)(t))),onMouseEnter:a(`mouseenter`),onMouseLeave:a(`mouseleave`),onMouseDown:a(`mousedown`),onMouseUp:a(`mouseup`),onFocus:a(`focus`),onBlur:a(`blur`)}}let d=[`d`,`fill`,`stroke`];var f=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{},fill:{},stroke:{}},setup(e,{emit:t}){let r=e,i=t,a=s(),o=(0,n.computed)(()=>a?.value.renderPath(r.data)),{computedStyle:c,onMouseEnter:l,onMouseLeave:f,onMouseDown:p,onMouseUp:m,onFocus:h,onBlur:g}=u(i,(0,n.toRef)(r,`styles`));return(t,r)=>o.value?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({key:0,d:o.value,style:(0,n.unref)(c),fill:e.fill,stroke:e.stroke},t.$attrs,{onMouseenter:r[0]||=(...e)=>(0,n.unref)(l)&&(0,n.unref)(l)(...e),onMouseleave:r[1]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMousedown:r[2]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onMouseup:r[3]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onClick:r[4]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onFocus:r[5]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e),onBlur:r[6]||=(...e)=>(0,n.unref)(g)&&(0,n.unref)(g)(...e)}),null,16,d)):(0,n.createCommentVNode)(`v-if`,!0)}}),p=(0,n.defineComponent)({__name:`MapFeatures`,props:{idKey:{default:`id`},fill:{},stroke:{},styles:{}},setup(e){let t=s(),i=(0,n.computed)(()=>t?.value.features??[]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,null,[(0,n.renderSlot)(t.$slots,`default`,{features:i.value},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.value,(i,a)=>((0,n.openBlock)(),(0,n.createBlock)(f,(0,n.mergeProps)({key:(0,n.unref)(r.getFeatureKey)(i,e.idKey,a),data:i,fill:e.fill,stroke:e.stroke,styles:e.styles},{ref_for:!0},t.$attrs),null,16,[`data`,`fill`,`stroke`,`styles`]))),128))])]))}});let m=[`transform`];var h=(0,n.defineComponent)({__name:`MapMarker`,props:{coordinates:{default:()=>[0,0]},styles:{}},setup(e,{emit:t}){let i=e,a=t,o=s(),c=(0,n.computed)(()=>(0,r.getMarkerTransform)(o?.value,i.coordinates)),{computedStyle:l,onMouseEnter:d,onMouseLeave:f,onMouseDown:p,onMouseUp:h,onFocus:g,onBlur:_}=u(a,(0,n.toRef)(i,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{transform:c.value,style:(0,n.normalizeStyle)((0,n.unref)(l)),onMouseenter:t[0]||=(...e)=>(0,n.unref)(d)&&(0,n.unref)(d)(...e),onMouseleave:t[1]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMousedown:t[2]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onMouseup:t[3]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e),onClick:t[4]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e),onFocus:t[5]||=(...e)=>(0,n.unref)(g)&&(0,n.unref)(g)(...e),onBlur:t[6]||=(...e)=>(0,n.unref)(_)&&(0,n.unref)(_)(...e)},[(0,n.renderSlot)(e.$slots,`default`)],44,m))}});let g=[`d`,`fill`,`stroke`];var _=(0,n.defineComponent)({__name:`MapMesh`,props:{fill:{default:`none`},stroke:{},styles:{}},setup(e,{emit:t}){let r=e,i=t,a=s(),o=(0,n.computed)(()=>a?.value.renderMesh()),{computedStyle:c,onMouseEnter:l,onMouseLeave:d,onMouseDown:f,onMouseUp:p,onFocus:m,onBlur:h}=u(i,(0,n.toRef)(r,`styles`));return(t,r)=>o.value?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({key:0,d:o.value,style:(0,n.unref)(c),fill:e.fill,stroke:e.stroke},t.$attrs,{onMouseenter:r[0]||=(...e)=>(0,n.unref)(l)&&(0,n.unref)(l)(...e),onMouseleave:r[1]||=(...e)=>(0,n.unref)(d)&&(0,n.unref)(d)(...e),onMousedown:r[2]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMouseup:r[3]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onClick:r[4]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onFocus:r[5]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onBlur:r[6]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e)}),null,16,g)):(0,n.createCommentVNode)(`v-if`,!0)}}),v=(0,n.defineComponent)({__name:`MapZoom`,props:{center:{default:()=>[0,0]},zoom:{default:1},minZoom:{default:1},maxZoom:{default:8},config:{}},emits:[`zoomstart`,`zoom`,`zoomend`],setup(e,{expose:t,emit:i}){let a=e,o=i,c=(0,n.ref)(null),l=s(),u=(0,n.computed)(()=>(0,r.createZoomBehavior)(l?.value,{minZoom:a.minZoom,maxZoom:a.maxZoom,config:a.config,onZoomStart:e=>o(`zoomstart`,e),onZoom:e=>{(0,r.applyZoomGroupTransform)(c.value,e.transform),o(`zoom`,e)},onZoomEnd:e=>o(`zoomend`,e)}));return(0,n.onMounted)(()=>{(0,n.watch)(u,e=>{c.value&&(0,r.setupZoom)({element:c.value,behavior:e,center:a.center,zoom:a.zoom})},{immediate:!0}),(0,n.watch)(()=>[u.value,a.center[0],a.center[1],a.zoom],()=>{c.value&&(0,r.applyZoomTransform)({element:c.value,behavior:u.value,center:a.center,zoom:a.zoom})})}),t({container:c,zoomBehavior:u}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{ref_key:`container`,ref:c,class:`d3-map-zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),y=a({Map:()=>l,MapFeature:()=>f,MapFeatures:()=>p,MapMarker:()=>h,MapMesh:()=>_,MapZoom:()=>v});e.Map=l,e.MapFeature=f,e.MapFeatures=p,e.MapMarker=h,e.MapMesh=_,e.MapZoom=v,e.mapContextKey=o,e.plugin={install(e){Object.entries(y).forEach(([t,n])=>{e.component(t,n)})}},e.useMapContext=s,e.useMapObject=u})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,Vue,D3Maps);

package/dist/index.js

@@ -1,6 +1,6 @@
 import "@d3-maps/core/index.css";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, normalizeStyle, onMounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, watch, withCtx } from "vue";
-import { applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, resolveObjectStyle, setupZoom } from "@d3-maps/core";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, normalizeStyle, onMounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, watch } from "vue";
+import { applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, resolveObjectStyle, setupZoom } from "@d3-maps/core";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
@@ -19,25 +19,8 @@ var __exportAll = (all, symbols) => {
 };
 
 //#endregion
-//#region src/components/MapContext.ts
+//#region src/hooks/useMapContext.ts
 const mapContextKey = Symbol("MapContext");
-const MapProvider = defineComponent((props, { slots }) => {
-	provide(mapContextKey, props.context);
-	return () => slots.default?.() ?? null;
-}, { props: { context: {
-	type: Object,
-	required: true
-} } });
-const MapConsumer = defineComponent({
-	name: "MapConsumer",
-	setup(_, { slots }) {
-		const context = inject(mapContextKey);
-		return () => {
-			if (!slots.default) return null;
-			return slots.default(context ?? {});
-		};
-	}
-});
 function useMapContext() {
 	return inject(mapContextKey);
 }
@@ -67,11 +50,9 @@ var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 			data: props.data,
 			dataTransformer: props.dataTransformer
 		}));
+		provide(mapContextKey, context);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(MapProvider), { context: context.value }, {
-				default: withCtx(() => [(openBlock(), createElementBlock("svg", mergeProps({ viewBox: `0 0 ${context.value.width} ${context.value.height}` }, _ctx.$attrs, { class: "d3-map" }), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(context.value)))], 16, _hoisted_1$3))]),
-				_: 3
-			}, 8, ["context"]);
+			return openBlock(), createElementBlock("svg", mergeProps({ viewBox: `0 0 ${context.value.width} ${context.value.height}` }, _ctx.$attrs, { class: "d3-map" }), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(context.value)))], 16, _hoisted_1$3);
 		};
 	}
 });
@@ -81,7 +62,7 @@ var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 var Map_default = Map_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-//#region src/lib/useMapObject.ts
+//#region src/hooks/useMapObject.ts
 function useMapObject(emit, styles) {
 	const state = ref("default");
 	const eventCallbackFactory = (eventName) => (event) => {
@@ -118,7 +99,7 @@ var MapFeature_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const props = __props;
 		const emit = __emit;
 		const context = useMapContext();
-		const path = computed(() => context?.renderPath(props.data));
+		const path = computed(() => context?.value.renderPath(props.data));
 		const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
 		return (_ctx, _cache) => {
 			return path.value ? (openBlock(), createElementBlock("path", mergeProps({
@@ -156,7 +137,7 @@ var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	},
 	setup(__props) {
 		const context = useMapContext();
-		const features = computed(() => context?.features ?? []);
+		const features = computed(() => context?.value.features ?? []);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("g", null, [renderSlot(_ctx.$slots, "default", { features: features.value }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(features.value, (feature, index) => {
 				return openBlock(), createBlock(MapFeature_default, mergeProps({
@@ -194,7 +175,7 @@ var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const emit = __emit;
 		const context = useMapContext();
 		const transform = computed(() => {
-			return getMarkerTransform(context, props.coordinates);
+			return getMarkerTransform(context?.value, props.coordinates);
 		});
 		const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
 		return (_ctx, _cache) => {
@@ -235,7 +216,7 @@ var MapMesh_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const props = __props;
 		const emit = __emit;
 		const context = useMapContext();
-		const path = computed(() => context?.renderMesh());
+		const path = computed(() => context?.value.renderMesh());
 		const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
 		return (_ctx, _cache) => {
 			return path.value ? (openBlock(), createElementBlock("path", mergeProps({
@@ -283,35 +264,42 @@ var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const container = ref(null);
 		const context = useMapContext();
 		const zoomBehavior = computed(() => {
-			return createZoomBehavior(context, {
+			return createZoomBehavior(context?.value, {
 				minZoom: props.minZoom,
 				maxZoom: props.maxZoom,
 				config: props.config,
 				onZoomStart: (event) => emit("zoomstart", event),
 				onZoom: (event) => {
-					if (container.value) container.value.setAttribute("transform", event.transform.toString());
+					applyZoomGroupTransform(container.value, event.transform);
 					emit("zoom", event);
 				},
 				onZoomEnd: (event) => emit("zoomend", event)
 			});
 		});
 		onMounted(() => {
-			watch(() => [zoomBehavior], () => setupZoom({
-				element: container.value,
-				behavior: zoomBehavior.value,
-				center: props.center,
-				zoom: props.zoom
-			}), { immediate: true });
+			watch(zoomBehavior, (behavior) => {
+				if (!container.value) return;
+				setupZoom({
+					element: container.value,
+					behavior,
+					center: props.center,
+					zoom: props.zoom
+				});
+			}, { immediate: true });
 			watch(() => [
+				zoomBehavior.value,
 				props.center[0],
 				props.center[1],
 				props.zoom
-			], () => applyZoomTransform({
-				element: container.value,
-				behavior: zoomBehavior.value,
-				center: props.center,
-				zoom: props.zoom
-			}));
+			], () => {
+				if (!container.value) return;
+				applyZoomTransform({
+					element: container.value,
+					behavior: zoomBehavior.value,
+					center: props.center,
+					zoom: props.zoom
+				});
+			});
 		});
 		__expose({
 			container,
@@ -354,4 +342,4 @@ const plugin = { install(app) {
 } };
 
 //#endregion
-export { Map_default as Map, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapMarker_default as MapMarker, MapMesh_default as MapMesh, MapZoom_default as MapZoom, plugin };
+export { Map_default as Map, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapMarker_default as MapMarker, MapMesh_default as MapMesh, MapZoom_default as MapZoom, mapContextKey, plugin, useMapContext, useMapObject };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@d3-maps/vue",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": false,
   "description": "Vue bindings for @d3-maps/core to build reactive D3 SVG maps",
   "author": "Georgii Bukharov <souljorje@gmail.com>",
@@ -44,7 +44,7 @@
     "vue": "3.5.25"
   },
   "dependencies": {
-    "@d3-maps/core": "0.3.0"
+    "@d3-maps/core": "0.4.0"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.16",