@d3-maps/vue 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -1,16 +1,12 @@
 import "@d3-maps/core/index.css";
 import * as vue6 from "vue";
 import { App, ComputedRef, InjectionKey, MaybeRef, StyleValue } from "vue";
-import { ExtendedFeature, ExtendedFeatureCollection, GeoPath, GeoProjection } from "d3-geo";
+import { ExtendedFeature, ExtendedFeatureCollection, GeoGraticuleGenerator, GeoPath, GeoProjection } from "d3-geo";
 import { Topology } from "topojson-specification";
-import { mesh } from "topojson-client";
+import "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.
  */
@@ -31,8 +27,6 @@ type MapFeature = (ExtendedFeature & Record<string, unknown>) | ExtendedFeature;
 interface MapFeatureProps<TStyle = unknown> {
   data: MapFeature;
   styles?: MapObjectStyles$1<TStyle>;
-  fill?: string;
-  stroke?: string;
 }
 //#endregion
 //#region ../core/src/lib/utils.d.ts
@@ -104,7 +98,6 @@ type ModifierArgs<P extends unknown[]> = P extends [infer Only] ? Only extends r
 type MethodsToModifiers<T extends object> = { [K in OwnKeys<T> as Extract<T[K], AnyFn> extends never ? never : HasArgs<Extract<T[K], AnyFn>> extends true ? K : never]?: ModifierArgs<Extract<SetterArgs<Extract<T[K], AnyFn>>, unknown[]>> };
 //#endregion
 //#region ../core/src/lib/map.d.ts
-type MapMesh = ReturnType<typeof mesh>;
 type MapData = ExtendedFeatureCollection | Topology;
 type DataTransformer = (features: MapFeature[]) => MapFeature[];
 /**
@@ -156,12 +149,21 @@ interface MapContext {
   height: number;
   projection?: GeoProjection;
   features: MapFeature[];
-  mesh?: MapMesh;
   path: GeoPath;
-  renderPath: (feature: MapFeature) => ReturnType<GeoPath>;
   renderMesh: () => ReturnType<GeoPath>;
 }
 //#endregion
+//#region ../core/src/lib/graticule.d.ts
+/**
+ * Extra graticule generator method calls to apply before rendering.
+ *
+ * Uses d3-geo `geoGraticule()` setter method names as keys.
+ * Example: `{ step: [[10, 10]], precision: 2.5 }`
+ *
+ * @see https://d3js.org/d3-geo/shape#geoGraticule
+ */
+interface GraticuleConfig extends MethodsToModifiers<GeoGraticuleGenerator> {}
+//#endregion
 //#region ../core/src/lib/marker.d.ts
 type MapMarkerCoordinates = [number, number];
 /**
@@ -197,8 +199,8 @@ type __VLS_Slots$3 = {
   default?: (props: MapContext) => unknown;
 };
 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;
+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 & {
   new (): {
     $slots: S;
@@ -207,32 +209,23 @@ 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: vue6.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
-  [x: string]: any;
-}, string, vue6.PublicProps, Readonly<__VLS_Props$1> & Readonly<{
-  [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
-declare const _default$1: typeof __VLS_export$4;
+declare const __VLS_export$5: vue6.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$1> & 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>;
-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;
+  style: ComputedRef<StyleValue | undefined>;
+  onMouseenter: (event: MouseEvent) => void;
+  onMouseleave: (event: MouseEvent) => void;
+  onMousedown: (event: MouseEvent) => void;
+  onMouseup: (event: MouseEvent) => void;
 }
-declare function useMapObject(emit: MapObjectEmit, styles: MaybeRef<MapObjectStyles | undefined>): UseMapObjectResult;
+declare function useMapObject(styles: MaybeRef<MapObjectStyles | undefined>): UseMapObjectResult;
 //#endregion
 //#region src/components/MapFeatures.vue.d.ts
-interface Props$1 {
+interface Props$2 {
   idKey?: string;
-  fill?: string;
-  stroke?: string;
   styles?: MapObjectStyles;
 }
 declare var __VLS_1$2: {
@@ -241,32 +234,38 @@ declare var __VLS_1$2: {
 type __VLS_Slots$2 = {} & {
   default?: (props: typeof __VLS_1$2) => any;
 };
-declare const __VLS_base$2: vue6.DefineComponent<Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props$1> & Readonly<{}>, {
+declare const __VLS_base$2: vue6.DefineComponent<Props$2, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props$2> & Readonly<{}>, {
   idKey: string;
 }, {}, {}, {}, 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;
+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 & {
   new (): {
     $slots: S;
   };
 };
 //#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: vue6.DefineComponent<Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props$1> & 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>;
 declare var __VLS_1$1: {};
 type __VLS_Slots$1 = {} & {
   default?: (props: typeof __VLS_1$1) => any;
 };
-declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
-  [x: string]: any;
-}, string, vue6.PublicProps, Readonly<__VLS_Props> & Readonly<{
-  [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
-}>, {
+declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
   coordinates: MapMarkerCoordinates;
 }, {}, {}, {}, 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;
+declare const _default$4: typeof __VLS_export$2;
 type __VLS_WithSlots$1<T, S> = T & {
   new (): {
     $slots: S;
@@ -275,18 +274,10 @@ type __VLS_WithSlots$1<T, S> = T & {
 //#endregion
 //#region src/components/MapMesh.vue.d.ts
 interface Props {
-  fill?: string;
-  stroke?: string;
   styles?: MapObjectStyles;
 }
-declare const __VLS_export$1: vue6.DefineComponent<Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
-  [x: string]: any;
-}, string, vue6.PublicProps, Readonly<Props> & Readonly<{
-  [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
-}>, {
-  fill: string;
-}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
-declare const _default$4: typeof __VLS_export$1;
+declare const __VLS_export$1: vue6.DefineComponent<Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+declare const _default$5: typeof __VLS_export$1;
 //#endregion
 //#region src/components/MapZoom.vue.d.ts
 declare var __VLS_1: {};
@@ -311,7 +302,7 @@ declare const __VLS_base: vue6.DefineComponent<ZoomProps, {
   maxZoom: number;
 }, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default$5: typeof __VLS_export;
+declare const _default$6: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
@@ -330,4 +321,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, MapObjectEmit, MapObjectStyles, _default$5 as MapZoom, UseMapObjectResult, mapContextKey, plugin, useMapContext, useMapObject };
+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 };

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,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);
+(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.computed)(()=>{if(i?.value)return(0,r.renderGraticule)(i.value,t.config)??void 0}),o=(0,n.computed)(()=>{if(i?.value)return(0,r.renderOutline)(i.value)??void 0}),c=(0,n.computed)(()=>(0,r.isString)(t.background)?t.background:void 0),l=(0,n.computed)(()=>(0,r.isString)(t.border)?t.border:void 0),{style:d,...f}=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:o.value,fill:c.value,"pointer-events":`none`,name:`background`},null,8,h)):(0,n.createCommentVNode)(`v-if`,!0),a.value?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({key:1,d:a.value,fill:`none`,style:(0,n.unref)(d)},{...t.$attrs,...f},{name:`graticule`}),null,16,g)):(0,n.createCommentVNode)(`v-if`,!0),e.border?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:2,d:o.value,fill:`none`,stroke:l.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);

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 } from "vue";
-import { applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, resolveObjectStyle, setupZoom } from "@d3-maps/core";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onMounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, watch } from "vue";
+import { applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, isString, makeMapContext, renderGraticule, renderOutline, resolveObjectStyle, setupZoom } from "@d3-maps/core";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
@@ -27,7 +27,7 @@ function useMapContext() {
 
 //#endregion
 //#region src/components/Map.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$3 = ["viewBox"];
+const _hoisted_1$5 = ["viewBox"];
 var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Map",
 	props: {
@@ -52,7 +52,7 @@ var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 		}));
 		provide(mapContextKey, context);
 		return (_ctx, _cache) => {
-			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);
+			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$5);
 		};
 	}
 });
@@ -63,60 +63,39 @@ var Map_default = Map_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/hooks/useMapObject.ts
-function useMapObject(emit, styles) {
+function useMapObject(styles) {
 	const state = ref("default");
-	const eventCallbackFactory = (eventName) => (event) => {
+	const eventCallbackFactory = (eventName) => () => {
 		state.value = getObjectStateUpdate(eventName);
-		emit(eventName, event);
 	};
 	return {
-		computedStyle: computed(() => resolveObjectStyle(state.value, unref(styles))),
-		onMouseEnter: eventCallbackFactory("mouseenter"),
-		onMouseLeave: eventCallbackFactory("mouseleave"),
-		onMouseDown: eventCallbackFactory("mousedown"),
-		onMouseUp: eventCallbackFactory("mouseup"),
-		onFocus: eventCallbackFactory("focus"),
-		onBlur: eventCallbackFactory("blur")
+		style: computed(() => resolveObjectStyle(state.value, unref(styles))),
+		onMouseenter: eventCallbackFactory("mouseenter"),
+		onMouseleave: eventCallbackFactory("mouseleave"),
+		onMousedown: eventCallbackFactory("mousedown"),
+		onMouseup: eventCallbackFactory("mouseup")
 	};
 }
 
 //#endregion
 //#region src/components/MapFeature.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$2 = [
-	"d",
-	"fill",
-	"stroke"
-];
+const _hoisted_1$4 = ["d"];
 var MapFeature_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "MapFeature",
 	props: {
 		data: {},
-		styles: {},
-		fill: {},
-		stroke: {}
+		styles: {}
 	},
-	setup(__props, { emit: __emit }) {
+	setup(__props) {
 		const props = __props;
-		const emit = __emit;
+		const { style, ...events } = useMapObject(toRef(props, "styles"));
 		const context = useMapContext();
-		const path = computed(() => context?.value.renderPath(props.data));
-		const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
+		const path = computed(() => context?.value.path(props.data) ?? void 0);
 		return (_ctx, _cache) => {
-			return path.value ? (openBlock(), createElementBlock("path", mergeProps({
-				key: 0,
+			return openBlock(), createElementBlock("path", mergeProps({
 				d: path.value,
-				style: unref(computedStyle),
-				fill: __props.fill,
-				stroke: __props.stroke
-			}, _ctx.$attrs, {
-				onMouseenter: _cache[0] || (_cache[0] = (...args) => unref(onMouseEnter) && unref(onMouseEnter)(...args)),
-				onMouseleave: _cache[1] || (_cache[1] = (...args) => unref(onMouseLeave) && unref(onMouseLeave)(...args)),
-				onMousedown: _cache[2] || (_cache[2] = (...args) => unref(onMouseDown) && unref(onMouseDown)(...args)),
-				onMouseup: _cache[3] || (_cache[3] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
-				onClick: _cache[4] || (_cache[4] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
-				onFocus: _cache[5] || (_cache[5] = (...args) => unref(onFocus) && unref(onFocus)(...args)),
-				onBlur: _cache[6] || (_cache[6] = (...args) => unref(onBlur) && unref(onBlur)(...args))
-			}), null, 16, _hoisted_1$2)) : createCommentVNode("v-if", true);
+				style: unref(style)
+			}, events, { name: "feature" }), null, 16, _hoisted_1$4);
 		};
 	}
 });
@@ -127,31 +106,23 @@ var MapFeature_default = MapFeature_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/components/MapFeatures.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = { name: "features" };
 var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "MapFeatures",
 	props: {
 		idKey: { default: "id" },
-		fill: {},
-		stroke: {},
 		styles: {}
 	},
 	setup(__props) {
 		const context = useMapContext();
 		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({
+			return openBlock(), createElementBlock("g", _hoisted_1$3, [renderSlot(_ctx.$slots, "default", { features: features.value }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(features.value, (feature, index) => {
+				return openBlock(), createBlock(MapFeature_default, {
 					key: unref(getFeatureKey)(feature, __props.idKey, index),
 					data: feature,
-					fill: __props.fill,
-					stroke: __props.stroke,
 					styles: __props.styles
-				}, { ref_for: true }, _ctx.$attrs), null, 16, [
-					"data",
-					"fill",
-					"stroke",
-					"styles"
-				]);
+				}, null, 8, ["data", "styles"]);
 			}), 128))])]);
 		};
 	}
@@ -161,6 +132,69 @@ var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 //#region src/components/MapFeatures.vue
 var MapFeatures_default = MapFeatures_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/components/MapGraticule.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = ["d", "fill"];
+const _hoisted_2 = ["d"];
+const _hoisted_3 = ["d", "stroke"];
+var MapGraticule_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "MapGraticule",
+	props: {
+		config: {},
+		background: { type: [Boolean, String] },
+		border: { type: [Boolean, String] },
+		styles: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const context = useMapContext();
+		const graticulePath = computed(() => {
+			if (!context?.value) return void 0;
+			return renderGraticule(context.value, props.config) ?? void 0;
+		});
+		const outlinePath = computed(() => {
+			if (!context?.value) return void 0;
+			return renderOutline(context.value) ?? void 0;
+		});
+		const backgroundColor = computed(() => isString(props.background) ? props.background : void 0);
+		const borderColor = computed(() => isString(props.border) ? props.border : void 0);
+		const { style, ...events } = useMapObject(toRef(props, "styles"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("g", null, [
+				__props.background ? (openBlock(), createElementBlock("path", {
+					key: 0,
+					d: outlinePath.value,
+					fill: backgroundColor.value,
+					"pointer-events": "none",
+					name: "background"
+				}, null, 8, _hoisted_1$2)) : createCommentVNode("v-if", true),
+				graticulePath.value ? (openBlock(), createElementBlock("path", mergeProps({
+					key: 1,
+					d: graticulePath.value,
+					fill: "none",
+					style: unref(style)
+				}, {
+					..._ctx.$attrs,
+					...events
+				}, { name: "graticule" }), null, 16, _hoisted_2)) : createCommentVNode("v-if", true),
+				__props.border ? (openBlock(), createElementBlock("path", {
+					key: 2,
+					d: outlinePath.value,
+					fill: "none",
+					stroke: borderColor.value,
+					"pointer-events": "none",
+					name: "border"
+				}, null, 8, _hoisted_3)) : createCommentVNode("v-if", true)
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/MapGraticule.vue
+var MapGraticule_default = MapGraticule_vue_vue_type_script_setup_true_lang_default;
+
 //#endregion
 //#region src/components/MapMarker.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$1 = ["transform"];
@@ -170,26 +204,18 @@ var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		coordinates: { default: () => [0, 0] },
 		styles: {}
 	},
-	setup(__props, { emit: __emit }) {
+	setup(__props) {
 		const props = __props;
-		const emit = __emit;
 		const context = useMapContext();
 		const transform = computed(() => {
 			return getMarkerTransform(context?.value, props.coordinates);
 		});
-		const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
+		const { style, ...events } = useMapObject(toRef(props, "styles"));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("g", {
+			return openBlock(), createElementBlock("g", mergeProps({
 				transform: transform.value,
-				style: normalizeStyle(unref(computedStyle)),
-				onMouseenter: _cache[0] || (_cache[0] = (...args) => unref(onMouseEnter) && unref(onMouseEnter)(...args)),
-				onMouseleave: _cache[1] || (_cache[1] = (...args) => unref(onMouseLeave) && unref(onMouseLeave)(...args)),
-				onMousedown: _cache[2] || (_cache[2] = (...args) => unref(onMouseDown) && unref(onMouseDown)(...args)),
-				onMouseup: _cache[3] || (_cache[3] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
-				onClick: _cache[4] || (_cache[4] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
-				onFocus: _cache[5] || (_cache[5] = (...args) => unref(onFocus) && unref(onFocus)(...args)),
-				onBlur: _cache[6] || (_cache[6] = (...args) => unref(onBlur) && unref(onBlur)(...args))
-			}, [renderSlot(_ctx.$slots, "default")], 44, _hoisted_1$1);
+				style: unref(style)
+			}, events, { name: "marker" }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$1);
 		};
 	}
 });
@@ -200,40 +226,21 @@ var MapMarker_default = MapMarker_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/components/MapMesh.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = [
-	"d",
-	"fill",
-	"stroke"
-];
+const _hoisted_1 = ["d"];
 var MapMesh_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "MapMesh",
-	props: {
-		fill: { default: "none" },
-		stroke: {},
-		styles: {}
-	},
-	setup(__props, { emit: __emit }) {
+	props: { styles: {} },
+	setup(__props) {
 		const props = __props;
-		const emit = __emit;
 		const context = useMapContext();
-		const path = computed(() => context?.value.renderMesh());
-		const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
+		const path = computed(() => context?.value.renderMesh() ?? void 0);
+		const { style, ...events } = useMapObject(toRef(props, "styles"));
 		return (_ctx, _cache) => {
-			return path.value ? (openBlock(), createElementBlock("path", mergeProps({
-				key: 0,
+			return openBlock(), createElementBlock("path", mergeProps({
 				d: path.value,
-				style: unref(computedStyle),
-				fill: __props.fill,
-				stroke: __props.stroke
-			}, _ctx.$attrs, {
-				onMouseenter: _cache[0] || (_cache[0] = (...args) => unref(onMouseEnter) && unref(onMouseEnter)(...args)),
-				onMouseleave: _cache[1] || (_cache[1] = (...args) => unref(onMouseLeave) && unref(onMouseLeave)(...args)),
-				onMousedown: _cache[2] || (_cache[2] = (...args) => unref(onMouseDown) && unref(onMouseDown)(...args)),
-				onMouseup: _cache[3] || (_cache[3] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
-				onClick: _cache[4] || (_cache[4] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
-				onFocus: _cache[5] || (_cache[5] = (...args) => unref(onFocus) && unref(onFocus)(...args)),
-				onBlur: _cache[6] || (_cache[6] = (...args) => unref(onBlur) && unref(onBlur)(...args))
-			}), null, 16, _hoisted_1)) : createCommentVNode("v-if", true);
+				fill: "none",
+				style: unref(style)
+			}, events, { name: "mesh" }), null, 16, _hoisted_1);
 		};
 	}
 });
@@ -309,7 +316,7 @@ var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			return openBlock(), createElementBlock("g", {
 				ref_key: "container",
 				ref: container,
-				class: "d3-map-zoom"
+				name: "zoom"
 			}, [renderSlot(_ctx.$slots, "default")], 512);
 		};
 	}
@@ -325,6 +332,7 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	Map: () => Map_default,
 	MapFeature: () => MapFeature_default,
 	MapFeatures: () => MapFeatures_default,
+	MapGraticule: () => MapGraticule_default,
 	MapMarker: () => MapMarker_default,
 	MapMesh: () => MapMesh_default,
 	MapZoom: () => MapZoom_default
@@ -342,4 +350,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, mapContextKey, plugin, useMapContext, useMapObject };
+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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@d3-maps/vue",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.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.4.0"
+    "@d3-maps/core": "0.5.0"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.16",