@d3-maps/vue 0.5.1 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
 # @d3-maps/vue
 
-`@d3-maps/vue` provides Vue bindings for `@d3-maps/core` to build SVG maps with Vue, [d3](https://github.com/d3/d3) and [TopoJSON-client](https://github.com/TopoJSON/TopoJSON-client).
+Reactive SVG maps, powered by D3.  
 
 [docs](https://souljorje.github.io/d3-maps)
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import "@d3-maps/core/index.css";
-import * as vue0 from "vue";
+import * as vue6 from "vue";
 import { App, ComputedRef, InjectionKey, MaybeRef, StyleValue } from "vue";
 import { ExtendedFeature, ExtendedFeatureCollection, GeoGraticuleGenerator, GeoPath, GeoProjection } from "d3-geo";
 import { Topology } from "topojson-specification";
@@ -12,7 +12,9 @@ import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
  */
 declare const mapObjectState: readonly ["default", "hover", "active"];
 type MapObjectState = typeof mapObjectState[number];
-type MapObjectStyles$1<TStyle> = Partial<Record<MapObjectState, TStyle>>;
+interface MapObjectProps<TStyle = unknown> {
+  styles?: Partial<Record<MapObjectState, TStyle>>;
+}
 //#endregion
 //#region ../core/src/lib/feature.d.ts
 /**
@@ -24,9 +26,14 @@ type MapFeature = (ExtendedFeature & Record<string, unknown>) | ExtendedFeature;
 /**
  * Shared props contract for a single rendered feature.
  */
-interface MapFeatureProps<TStyle = unknown> {
+interface MapFeatureProps<TStyle = unknown> extends MapObjectProps<TStyle> {
   data: MapFeature;
-  styles?: MapObjectStyles$1<TStyle>;
+}
+/**
+ * Shared props contract for feature collections rendered from the current map context.
+ */
+interface MapFeaturesProps<TStyle = unknown> extends Omit<MapFeatureProps<TStyle>, 'data'> {
+  idKey?: string;
 }
 //#endregion
 //#region ../core/src/lib/utils.d.ts
@@ -110,11 +117,11 @@ type DataTransformer = (features: MapFeature[]) => MapFeature[];
  */
 interface ProjectionConfig extends Omit<MethodsToModifiers<GeoProjection>, 'invert' | 'stream'> {}
 /**
- * Input configuration for creating a map context.
+ * Shared props contract for the `Map` component.
  *
  * In adapters, this is usually passed as component props.
  */
-interface MapConfig {
+interface MapProps {
   width?: number;
   height?: number;
   aspectRatio?: number;
@@ -163,15 +170,22 @@ interface MapContext {
  * @see https://d3js.org/d3-geo/shape#geoGraticule
  */
 interface GraticuleConfig extends MethodsToModifiers<GeoGraticuleGenerator> {}
+/**
+ * Shared props contract for graticule layers.
+ */
+interface MapGraticuleProps<TStyle = unknown> extends MapObjectProps<TStyle> {
+  config?: GraticuleConfig;
+  background?: boolean | string;
+  border?: boolean | string;
+}
 //#endregion
 //#region ../core/src/lib/marker.d.ts
 type MapMarkerCoordinates = [number, number];
 /**
  * Shared props contract for marker layers.
  */
-interface MapMarkerProps<TStyle = unknown> {
+interface MapMarkerProps<TStyle = unknown> extends MapObjectProps<TStyle> {
   coordinates?: MapMarkerCoordinates;
-  styles?: MapObjectStyles$1<TStyle>;
 }
 //#endregion
 //#region ../core/src/lib/zoom.d.ts
@@ -194,11 +208,11 @@ interface ZoomProps {
 }
 interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
 //#endregion
-//#region src/components/Map.vue.d.ts
+//#region src/components/MapBase.vue.d.ts
 type __VLS_Slots$3 = {
   default?: (props: MapContext) => unknown;
 };
-declare const __VLS_base$3: vue0.DefineComponent<MapConfig, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<MapConfig> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base$3: vue6.DefineComponent<MapProps, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<MapProps> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$6: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
 declare const _default: typeof __VLS_export$6;
 type __VLS_WithSlots$3<T, S> = T & {
@@ -208,35 +222,21 @@ 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$5: vue0.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+type __VLS_Props$4 = MapFeatureProps<StyleValue>;
+declare const __VLS_export$5: vue6.DefineComponent<__VLS_Props$4, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$4> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const _default$1: typeof __VLS_export$5;
 //#endregion
-//#region src/hooks/useMapObject.d.ts
-type MapObjectStyles = MapObjectStyles$1<StyleValue>;
-interface UseMapObjectResult {
-  style: ComputedRef<StyleValue | undefined>;
-  onMouseenter: (event: MouseEvent) => void;
-  onMouseleave: (event: MouseEvent) => void;
-  onMousedown: (event: MouseEvent) => void;
-  onMouseup: (event: MouseEvent) => void;
-}
-declare function useMapObject(styles: MaybeRef<MapObjectStyles | undefined>): UseMapObjectResult;
-//#endregion
 //#region src/components/MapFeatures.vue.d.ts
-interface Props$2 {
-  idKey?: string;
-  styles?: MapObjectStyles;
-}
+type __VLS_Props$3 = MapFeaturesProps<StyleValue>;
 declare var __VLS_1$2: {
   features: MapFeature[];
 };
 type __VLS_Slots$2 = {} & {
   default?: (props: typeof __VLS_1$2) => any;
 };
-declare const __VLS_base$2: vue0.DefineComponent<Props$2, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<Props$2> & Readonly<{}>, {
+declare const __VLS_base$2: vue6.DefineComponent<__VLS_Props$3, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$3> & Readonly<{}>, {
   idKey: string;
-}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$4: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
 declare const _default$2: typeof __VLS_export$4;
 type __VLS_WithSlots$2<T, S> = T & {
@@ -246,24 +246,19 @@ type __VLS_WithSlots$2<T, S> = T & {
 };
 //#endregion
 //#region src/components/MapGraticule.vue.d.ts
-interface Props$1 {
-  config?: GraticuleConfig;
-  background?: boolean | string;
-  border?: boolean | string;
-  styles?: MapObjectStyles;
-}
-declare const __VLS_export$3: vue0.DefineComponent<Props$1, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<Props$1> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+type __VLS_Props$2 = MapGraticuleProps<StyleValue>;
+declare const __VLS_export$3: vue6.DefineComponent<__VLS_Props$2, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$2> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const _default$3: typeof __VLS_export$3;
 //#endregion
 //#region src/components/MapMarker.vue.d.ts
-type __VLS_Props = MapMarkerProps<StyleValue>;
+type __VLS_Props$1 = MapMarkerProps<StyleValue>;
 declare var __VLS_1$1: {};
 type __VLS_Slots$1 = {} & {
   default?: (props: typeof __VLS_1$1) => any;
 };
-declare const __VLS_base$1: vue0.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {
   coordinates: MapMarkerCoordinates;
-}, {}, {}, {}, string, vue0.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$4: typeof __VLS_export$2;
 type __VLS_WithSlots$1<T, S> = T & {
@@ -273,10 +268,8 @@ type __VLS_WithSlots$1<T, S> = T & {
 };
 //#endregion
 //#region src/components/MapMesh.vue.d.ts
-interface Props {
-  styles?: MapObjectStyles;
-}
-declare const __VLS_export$1: vue0.DefineComponent<Props, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = MapObjectProps<StyleValue>;
+declare const __VLS_export$1: vue6.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const _default$5: typeof __VLS_export$1;
 //#endregion
 //#region src/components/MapZoom.vue.d.ts
@@ -284,14 +277,14 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: vue0.DefineComponent<ZoomProps, {
-  container: vue0.Ref<SVGGElement | null, SVGGElement | null>;
-  zoomBehavior: vue0.ComputedRef<DefaultZoomBehavior>;
-}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.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, vue0.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;
@@ -300,7 +293,7 @@ declare const __VLS_base: vue0.DefineComponent<ZoomProps, {
   zoom: number;
   minZoom: number;
   maxZoom: number;
-}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default$6: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
@@ -313,6 +306,16 @@ type __VLS_WithSlots<T, S> = T & {
 declare const mapContextKey: InjectionKey<ComputedRef<MapContext>>;
 declare function useMapContext(): ComputedRef<MapContext> | undefined;
 //#endregion
+//#region src/hooks/useMapObject.d.ts
+interface UseMapObjectResult {
+  style: ComputedRef<StyleValue | undefined>;
+  onMouseenter: (event: MouseEvent) => void;
+  onMouseleave: (event: MouseEvent) => void;
+  onMousedown: (event: MouseEvent) => void;
+  onMouseup: (event: MouseEvent) => void;
+}
+declare function useMapObject(styles: MaybeRef<Partial<Record<MapObjectState, StyleValue>> | undefined>): UseMapObjectResult;
+//#endregion
 //#region src/plugin.d.ts
 /**
  * Vue plugin that registers all d3-maps components globally.
@@ -321,4 +324,4 @@ declare const plugin: {
   install(app: App): void;
 };
 //#endregion
-export { _default as Map, _default$1 as MapFeature, _default$2 as MapFeatures, _default$3 as MapGraticule, _default$4 as MapMarker, _default$5 as MapMesh, MapObjectStyles, _default$6 as MapZoom, UseMapObjectResult, mapContextKey, plugin, useMapContext, useMapObject };
+export { _default as MapBase, _default$1 as MapFeature, _default$2 as MapFeatures, _default$3 as MapGraticule, _default$4 as MapMarker, _default$5 as MapMesh, _default$6 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`);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){let t=(0,n.ref)(`default`),i=e=>()=>{t.value=(0,r.getObjectStateUpdate)(e)};return{style:(0,n.computed)(()=>(0,r.resolveObjectStyle)(t.value,(0,n.unref)(e))),onMouseenter:i(`mouseenter`),onMouseleave:i(`mouseleave`),onMousedown:i(`mousedown`),onMouseup:i(`mouseup`)}}let d=[`d`];var f=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{}},setup(e){let t=e,{style:r,...i}=u((0,n.toRef)(t,`styles`)),a=s(),o=(0,n.computed)(()=>a?.value.path(t.data)??void 0);return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:o.value,style:(0,n.unref)(r)},i,{name:`feature`}),null,16,d))}});let p={name:`features`};var m=(0,n.defineComponent)({__name:`MapFeatures`,props:{idKey:{default:`id`},styles:{}},setup(e){let t=s(),i=(0,n.computed)(()=>t?.value.features??[]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,p,[(0,n.renderSlot)(t.$slots,`default`,{features:i.value},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.value,(t,i)=>((0,n.openBlock)(),(0,n.createBlock)(f,{key:(0,n.unref)(r.getFeatureKey)(t,e.idKey,i),data:t,styles:e.styles},null,8,[`data`,`styles`]))),128))])]))}});let h=[`d`,`fill`],g=[`d`],_=[`d`,`stroke`];var v=(0,n.defineComponent)({inheritAttrs:!1,__name:`MapGraticule`,props:{config:{},background:{type:[Boolean,String]},border:{type:[Boolean,String]},styles:{}},setup(e){let t=e,i=s(),a=(0,n.useAttrs)(),o=(0,n.computed)(()=>{if(i?.value)return(0,r.renderGraticule)(i.value,t.config)??void 0}),c=(0,n.computed)(()=>{if(i?.value)return(0,r.renderOutline)(i.value)??void 0}),l=(0,n.computed)(()=>(0,r.isString)(t.background)?t.background:void 0),d=(0,n.computed)(()=>(0,r.isString)(t.border)?t.border:void 0),{style:f,...p}=u((0,n.toRef)(t,`styles`));return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,null,[e.background?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:0,d:c.value,fill:l.value,"pointer-events":`none`,name:`background`},null,8,h)):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`path`,(0,n.mergeProps)({d:o.value,fill:`none`,style:(0,n.unref)(f)},(0,n.mergeProps)(p,(0,n.unref)(a)),{name:`graticule`}),null,16,g),e.border?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:1,d:c.value,fill:`none`,stroke:d.value,"pointer-events":`none`,name:`border`},null,8,_)):(0,n.createCommentVNode)(`v-if`,!0)]))}});let y=[`transform`];var b=(0,n.defineComponent)({__name:`MapMarker`,props:{coordinates:{default:()=>[0,0]},styles:{}},setup(e){let t=e,i=s(),a=(0,n.computed)(()=>(0,r.getMarkerTransform)(i?.value,t.coordinates)),{style:o,...c}=u((0,n.toRef)(t,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,(0,n.mergeProps)({transform:a.value,style:(0,n.unref)(o)},c,{name:`marker`}),[(0,n.renderSlot)(e.$slots,`default`)],16,y))}});let x=[`d`];var S=(0,n.defineComponent)({__name:`MapMesh`,props:{styles:{}},setup(e){let t=e,r=s(),i=(0,n.computed)(()=>r?.value.renderMesh()??void 0),{style:a,...o}=u((0,n.toRef)(t,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:i.value,fill:`none`,style:(0,n.unref)(a)},o,{name:`mesh`}),null,16,x))}}),C=(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,name:`zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),w=a({Map:()=>l,MapFeature:()=>f,MapFeatures:()=>m,MapGraticule:()=>v,MapMarker:()=>b,MapMesh:()=>S,MapZoom:()=>C});e.Map=l,e.MapFeature=f,e.MapFeatures=m,e.MapGraticule=v,e.MapMarker=b,e.MapMesh=S,e.MapZoom=C,e.mapContextKey=o,e.plugin={install(e){Object.entries(w).forEach(([t,n])=>{e.component(t,n)})}},e.useMapContext=s,e.useMapObject=u})(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:`MapBase`,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))}});let u=Symbol(`InsideZoom`);function d(){return(0,n.inject)(u,!1)}function f(e){let t=(0,n.ref)(`default`),{onMouseenter:i,onMouseleave:a,onMouseup:o,onMousedown:s,dispose:c}=(0,r.useMapObjectEvents)(e=>{t.value=e},d());return(0,n.onBeforeUnmount)(()=>{c()}),{style:(0,n.computed)(()=>(0,r.resolveObjectStyle)(t.value,(0,n.unref)(e))),onMouseenter:i,onMouseleave:a,onMousedown:s,onMouseup:o}}let p=[`d`];var m=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{}},setup(e){let t=e,{style:r,...i}=f((0,n.toRef)(t,`styles`)),a=s(),o=(0,n.computed)(()=>a?.value.path(t.data)??void 0);return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:o.value,style:(0,n.unref)(r)},i,{name:`feature`}),null,16,p))}});let h={name:`features`};var g=(0,n.defineComponent)({__name:`MapFeatures`,props:{idKey:{default:`id`},styles:{}},setup(e){let t=s(),i=(0,n.computed)(()=>t?.value.features??[]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,h,[(0,n.renderSlot)(t.$slots,`default`,{features:i.value},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.value,(t,i)=>((0,n.openBlock)(),(0,n.createBlock)(m,{key:(0,n.unref)(r.getFeatureKey)(t,e.idKey,i),data:t,styles:e.styles},null,8,[`data`,`styles`]))),128))])]))}});let _=[`d`,`fill`],v=[`d`],y=[`d`,`stroke`];var b=(0,n.defineComponent)({inheritAttrs:!1,__name:`MapGraticule`,props:{config:{},background:{type:[Boolean,String]},border:{type:[Boolean,String]},styles:{}},setup(e){let t=e,i=s(),a=(0,n.useAttrs)(),o=(0,n.computed)(()=>{if(i?.value)return(0,r.renderGraticule)(i.value,t.config)??void 0}),c=(0,n.computed)(()=>{if(i?.value)return(0,r.renderOutline)(i.value)??void 0}),l=(0,n.computed)(()=>(0,r.isString)(t.background)?t.background:void 0),u=(0,n.computed)(()=>(0,r.isString)(t.border)?t.border:void 0),{style:d,...p}=f((0,n.toRef)(t,`styles`));return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,null,[e.background?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:0,d:c.value,fill:l.value,"pointer-events":`none`,name:`background`},null,8,_)):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`path`,(0,n.mergeProps)({d:o.value,fill:`none`,style:(0,n.unref)(d)},(0,n.mergeProps)(p,(0,n.unref)(a)),{name:`graticule`}),null,16,v),e.border?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:1,d:c.value,fill:`none`,stroke:u.value,"pointer-events":`none`,name:`border`},null,8,y)):(0,n.createCommentVNode)(`v-if`,!0)]))}});let x=[`transform`];var S=(0,n.defineComponent)({__name:`MapMarker`,props:{coordinates:{default:()=>[0,0]},styles:{}},setup(e){let t=e,i=s(),a=(0,n.computed)(()=>(0,r.getMarkerTransform)(i?.value,t.coordinates)),{style:o,...c}=f((0,n.toRef)(t,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,(0,n.mergeProps)({transform:a.value,style:(0,n.unref)(o)},c,{name:`marker`}),[(0,n.renderSlot)(e.$slots,`default`)],16,x))}});let C=[`d`];var w=(0,n.defineComponent)({__name:`MapMesh`,props:{styles:{}},setup(e){let t=e,r=s(),i=(0,n.computed)(()=>r?.value.renderMesh()??void 0),{style:a,...o}=f((0,n.toRef)(t,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:i.value,fill:`none`,style:(0,n.unref)(a)},o,{name:`mesh`}),null,16,C))}}),T=(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();(0,n.provide)(u,!0);let d=(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)(d,e=>{c.value&&(0,r.setupZoom)({element:c.value,behavior:e,center:a.center,zoom:a.zoom})},{immediate:!0}),(0,n.watch)(()=>[d.value,a.center[0],a.center[1],a.zoom],()=>{c.value&&(0,r.applyZoomTransform)({element:c.value,behavior:d.value,center:a.center,zoom:a.zoom})})}),t({container:c,zoomBehavior:d}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{ref_key:`container`,ref:c,name:`zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),E=a({MapBase:()=>l,MapFeature:()=>m,MapFeatures:()=>g,MapGraticule:()=>b,MapMarker:()=>S,MapMesh:()=>w,MapZoom:()=>T});e.MapBase=l,e.MapFeature=m,e.MapFeatures=g,e.MapGraticule=b,e.MapMarker=S,e.MapMesh=w,e.MapZoom=T,e.mapContextKey=o,e.plugin={install(e){Object.entries(E).forEach(([t,n])=>{e.component(t,n)})}},e.useMapContext=s,e.useMapObject=f})(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, createElementVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onMounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, useAttrs, watch } from "vue";
-import { applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, isString, makeMapContext, renderGraticule, renderOutline, resolveObjectStyle, setupZoom } from "@d3-maps/core";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, useAttrs, watch } from "vue";
+import { applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, isString, makeMapContext, renderGraticule, renderOutline, resolveObjectStyle, setupZoom, useMapObjectEvents } from "@d3-maps/core";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
@@ -26,10 +26,10 @@ function useMapContext() {
 }
 
 //#endregion
-//#region src/components/Map.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/MapBase.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$5 = ["viewBox"];
-var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "Map",
+var MapBase_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "MapBase",
 	props: {
 		width: {},
 		height: {},
@@ -58,22 +58,32 @@ var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 });
 
 //#endregion
-//#region src/components/Map.vue
-var Map_default = Map_vue_vue_type_script_setup_true_lang_default;
+//#region src/components/MapBase.vue
+var MapBase_default = MapBase_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/hooks/useInsideZoom.ts
+const insideZoomKey = Symbol("InsideZoom");
+function useInsideZoom() {
+	return inject(insideZoomKey, false);
+}
 
 //#endregion
 //#region src/hooks/useMapObject.ts
 function useMapObject(styles) {
 	const state = ref("default");
-	const eventCallbackFactory = (eventName) => () => {
-		state.value = getObjectStateUpdate(eventName);
-	};
+	const { onMouseenter, onMouseleave, onMouseup, onMousedown, dispose } = useMapObjectEvents((nextState) => {
+		state.value = nextState;
+	}, useInsideZoom());
+	onBeforeUnmount(() => {
+		dispose();
+	});
 	return {
 		style: computed(() => resolveObjectStyle(state.value, unref(styles))),
-		onMouseenter: eventCallbackFactory("mouseenter"),
-		onMouseleave: eventCallbackFactory("mouseleave"),
-		onMousedown: eventCallbackFactory("mousedown"),
-		onMouseup: eventCallbackFactory("mouseup")
+		onMouseenter,
+		onMouseleave,
+		onMousedown,
+		onMouseup
 	};
 }
 
@@ -267,6 +277,7 @@ var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const emit = __emit;
 		const container = ref(null);
 		const context = useMapContext();
+		provide(insideZoomKey, true);
 		const zoomBehavior = computed(() => {
 			return createZoomBehavior(context?.value, {
 				minZoom: props.minZoom,
@@ -326,7 +337,7 @@ var MapZoom_default = MapZoom_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 //#region src/components/index.ts
 var components_exports = /* @__PURE__ */ __exportAll({
-	Map: () => Map_default,
+	MapBase: () => MapBase_default,
 	MapFeature: () => MapFeature_default,
 	MapFeatures: () => MapFeatures_default,
 	MapGraticule: () => MapGraticule_default,
@@ -347,4 +358,4 @@ const plugin = { install(app) {
 } };
 
 //#endregion
-export { Map_default as Map, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapGraticule_default as MapGraticule, MapMarker_default as MapMarker, MapMesh_default as MapMesh, MapZoom_default as MapZoom, mapContextKey, plugin, useMapContext, useMapObject };
+export { MapBase_default as MapBase, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapGraticule_default as MapGraticule, 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.5.1",
+  "version": "0.7.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.5.0"
+    "@d3-maps/core": "0.7.0"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.16",