@d3-maps/vue 0.1.1-next.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.d.ts +142 -17
- package/dist/index.iife.js +1 -1
- package/dist/index.js +56 -10
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
`@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).
|
|
4
4
|
|
|
5
|
-
[docs](https://
|
|
5
|
+
[docs](https://souljorje.github.io/d3-maps)
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,16 +1,126 @@
|
|
|
1
1
|
import "@d3-maps/core/index.css";
|
|
2
2
|
import * as vue6 from "vue";
|
|
3
3
|
import { App, StyleValue } from "vue";
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
4
|
+
import { Feature, FeatureCollection, MultiLineString } from "geojson";
|
|
5
|
+
import { GeoPath, GeoProjection } from "d3-geo";
|
|
6
|
+
import { Topology } from "topojson-specification";
|
|
7
|
+
import { D3ZoomEvent, ZoomBehavior, ZoomBehavior as ZoomBehavior$1 } from "d3-zoom";
|
|
6
8
|
|
|
9
|
+
//#region ../core/src/lib/mapObject.d.ts
|
|
10
|
+
/**
|
|
11
|
+
* Supported interaction states for map objects.
|
|
12
|
+
*/
|
|
13
|
+
declare const mapObjectState: readonly ["default", "hover", "active"];
|
|
14
|
+
type MapObjectState = typeof mapObjectState[number];
|
|
15
|
+
type MapObjectStyles<TStyle> = Partial<Record<MapObjectState, TStyle>>;
|
|
16
|
+
//#endregion
|
|
17
|
+
//#region ../core/src/lib/feature.d.ts
|
|
18
|
+
/**
|
|
19
|
+
* A GeoJSON Feature used by d3-maps.
|
|
20
|
+
*
|
|
21
|
+
* This type allows extra top-level fields to be attached in `dataTransformer` (e.g. choropleth colors).
|
|
22
|
+
*/
|
|
23
|
+
type MapFeature = (Feature & Record<string, unknown>) | Feature;
|
|
24
|
+
/**
|
|
25
|
+
* Shared props contract for a single rendered feature.
|
|
26
|
+
*/
|
|
27
|
+
interface MapFeatureProps<TStyle = unknown> {
|
|
28
|
+
data: MapFeature;
|
|
29
|
+
styles?: MapObjectStyles<TStyle>;
|
|
30
|
+
fill?: string;
|
|
31
|
+
stroke?: string;
|
|
32
|
+
}
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region ../core/src/lib/map.d.ts
|
|
35
|
+
type MapData = FeatureCollection | Topology;
|
|
36
|
+
type DataTransformer = (features: MapFeature[]) => MapFeature[];
|
|
37
|
+
/**
|
|
38
|
+
* Configuration for a d3-geo projection.
|
|
39
|
+
*
|
|
40
|
+
* d3-maps applies these options (if provided) before fitting the geometry to the map size.
|
|
41
|
+
*/
|
|
42
|
+
interface ProjectionConfig {
|
|
43
|
+
center?: [number, number];
|
|
44
|
+
rotate?: [number, number, number];
|
|
45
|
+
scale?: number;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Input configuration for creating a map context.
|
|
49
|
+
*
|
|
50
|
+
* In adapters, this is usually passed as component props.
|
|
51
|
+
*/
|
|
52
|
+
interface MapConfig {
|
|
53
|
+
width?: number;
|
|
54
|
+
height?: number;
|
|
55
|
+
aspectRatio?: number;
|
|
56
|
+
/**
|
|
57
|
+
* Projection factory from d3-geo (or a compatible implementation).
|
|
58
|
+
*
|
|
59
|
+
* Example: `geoEqualEarth`.
|
|
60
|
+
*/
|
|
61
|
+
projection?: () => GeoProjection;
|
|
62
|
+
projectionConfig?: ProjectionConfig;
|
|
63
|
+
/**
|
|
64
|
+
* TopoJSON or GeoJSON input.
|
|
65
|
+
*
|
|
66
|
+
* TopoJSON is automatically converted to GeoJSON features.
|
|
67
|
+
*/
|
|
68
|
+
data: MapData;
|
|
69
|
+
/**
|
|
70
|
+
* Optional feature transformer (filter/augment/normalize features).
|
|
71
|
+
*/
|
|
72
|
+
dataTransformer?: DataTransformer;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Fully computed, framework-agnostic map context.
|
|
76
|
+
*
|
|
77
|
+
* Adapters provide this context to child layers (features, markers, custom SVG).
|
|
78
|
+
*/
|
|
79
|
+
interface MapContext {
|
|
80
|
+
width: number;
|
|
81
|
+
height: number;
|
|
82
|
+
projection?: GeoProjection;
|
|
83
|
+
features: MapFeature[];
|
|
84
|
+
mesh?: MultiLineString;
|
|
85
|
+
path: GeoPath;
|
|
86
|
+
renderPath: (feature: Feature) => ReturnType<GeoPath>;
|
|
87
|
+
renderMesh: () => ReturnType<GeoPath>;
|
|
88
|
+
}
|
|
89
|
+
//#endregion
|
|
90
|
+
//#region ../core/src/lib/marker.d.ts
|
|
91
|
+
type MapMarkerCoordinates = [number, number];
|
|
92
|
+
/**
|
|
93
|
+
* Shared props contract for marker layers.
|
|
94
|
+
*/
|
|
95
|
+
interface MapMarkerProps<TStyle = unknown> {
|
|
96
|
+
coordinates?: MapMarkerCoordinates;
|
|
97
|
+
styles?: MapObjectStyles<TStyle>;
|
|
98
|
+
}
|
|
99
|
+
//#endregion
|
|
100
|
+
//#region ../core/src/lib/zoom.d.ts
|
|
101
|
+
type Extent = [[number, number], [number, number]];
|
|
102
|
+
type ZoomBehaviorMethodName<TElement extends Element, TDatum> = Extract<{ [K in keyof ZoomBehavior<TElement, TDatum>]: ZoomBehavior<TElement, TDatum>[K] extends ((...args: unknown[]) => unknown) ? K : never }[keyof ZoomBehavior<TElement, TDatum>], string>;
|
|
103
|
+
type ZoomBehaviorMethodArgs<TElement extends Element, TDatum, TMethod extends ZoomBehaviorMethodName<TElement, TDatum>> = ZoomBehavior<TElement, TDatum>[TMethod] extends ((...args: infer TArgs) => unknown) ? TArgs : never;
|
|
104
|
+
type ZoomBehaviorSingleArg<TElement extends Element, TDatum, TMethod extends ZoomBehaviorMethodName<TElement, TDatum>> = ZoomBehaviorMethodArgs<TElement, TDatum, TMethod> extends [infer TArg] ? TArg : never;
|
|
105
|
+
type ZoomModifierValue<TElement extends Element, TDatum, TMethod extends ZoomBehaviorMethodName<TElement, TDatum>> = ZoomBehaviorMethodArgs<TElement, TDatum, TMethod> | ZoomBehaviorSingleArg<TElement, TDatum, TMethod>;
|
|
106
|
+
type ZoomModifiers<TElement extends Element = SVGSVGElement, TDatum = unknown> = Partial<{ [K in ZoomBehaviorMethodName<TElement, TDatum>]: ZoomModifierValue<TElement, TDatum, K> }>;
|
|
107
|
+
interface ZoomProps<TElement extends Element = SVGSVGElement, TDatum = unknown> {
|
|
108
|
+
center?: [number, number];
|
|
109
|
+
zoom?: number;
|
|
110
|
+
minZoom?: number;
|
|
111
|
+
maxZoom?: number;
|
|
112
|
+
translateExtent?: Extent;
|
|
113
|
+
modifiers?: ZoomModifiers<TElement, TDatum>;
|
|
114
|
+
}
|
|
115
|
+
interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
|
|
116
|
+
//#endregion
|
|
7
117
|
//#region src/components/Map.vue.d.ts
|
|
8
118
|
type __VLS_Slots$3 = {
|
|
9
119
|
default?: (props: MapContext) => unknown;
|
|
10
120
|
};
|
|
11
121
|
declare const __VLS_base$3: vue6.DefineComponent<MapConfig, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<MapConfig> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
12
|
-
declare const __VLS_export$
|
|
13
|
-
declare const _default: typeof __VLS_export$
|
|
122
|
+
declare const __VLS_export$5: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
|
|
123
|
+
declare const _default: typeof __VLS_export$5;
|
|
14
124
|
type __VLS_WithSlots$3<T, S> = T & {
|
|
15
125
|
new (): {
|
|
16
126
|
$slots: S;
|
|
@@ -19,30 +129,30 @@ type __VLS_WithSlots$3<T, S> = T & {
|
|
|
19
129
|
//#endregion
|
|
20
130
|
//#region src/components/MapFeature.vue.d.ts
|
|
21
131
|
type __VLS_Props$2 = MapFeatureProps<StyleValue>;
|
|
22
|
-
declare const __VLS_export$
|
|
132
|
+
declare const __VLS_export$4: vue6.DefineComponent<__VLS_Props$2, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
|
|
23
133
|
[x: string]: any;
|
|
24
134
|
}, string, vue6.PublicProps, Readonly<__VLS_Props$2> & Readonly<{
|
|
25
135
|
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
26
136
|
}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
27
|
-
declare const _default$1: typeof __VLS_export$
|
|
137
|
+
declare const _default$1: typeof __VLS_export$4;
|
|
28
138
|
//#endregion
|
|
29
139
|
//#region src/components/MapFeatures.vue.d.ts
|
|
30
|
-
interface Props {
|
|
140
|
+
interface Props$1 {
|
|
31
141
|
idKey?: string;
|
|
32
142
|
fill?: string;
|
|
33
143
|
stroke?: string;
|
|
34
144
|
}
|
|
35
145
|
declare var __VLS_1$2: {
|
|
36
|
-
features:
|
|
146
|
+
features: MapFeature[];
|
|
37
147
|
};
|
|
38
148
|
type __VLS_Slots$2 = {} & {
|
|
39
149
|
default?: (props: typeof __VLS_1$2) => any;
|
|
40
150
|
};
|
|
41
|
-
declare const __VLS_base$2: vue6.DefineComponent<Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
151
|
+
declare const __VLS_base$2: vue6.DefineComponent<Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props$1> & Readonly<{}>, {
|
|
42
152
|
idKey: string;
|
|
43
153
|
}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
44
|
-
declare const __VLS_export$
|
|
45
|
-
declare const _default$2: typeof __VLS_export$
|
|
154
|
+
declare const __VLS_export$3: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
|
|
155
|
+
declare const _default$2: typeof __VLS_export$3;
|
|
46
156
|
type __VLS_WithSlots$2<T, S> = T & {
|
|
47
157
|
new (): {
|
|
48
158
|
$slots: S;
|
|
@@ -60,16 +170,31 @@ declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props$1, {}, {}, {}, {},
|
|
|
60
170
|
}, string, vue6.PublicProps, Readonly<__VLS_Props$1> & Readonly<{
|
|
61
171
|
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
62
172
|
}>, {
|
|
63
|
-
coordinates:
|
|
173
|
+
coordinates: MapMarkerCoordinates;
|
|
64
174
|
}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
65
|
-
declare const __VLS_export$
|
|
66
|
-
declare const _default$3: typeof __VLS_export$
|
|
175
|
+
declare const __VLS_export$2: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
|
|
176
|
+
declare const _default$3: typeof __VLS_export$2;
|
|
67
177
|
type __VLS_WithSlots$1<T, S> = T & {
|
|
68
178
|
new (): {
|
|
69
179
|
$slots: S;
|
|
70
180
|
};
|
|
71
181
|
};
|
|
72
182
|
//#endregion
|
|
183
|
+
//#region src/components/MapMesh.vue.d.ts
|
|
184
|
+
interface Props {
|
|
185
|
+
fill?: string;
|
|
186
|
+
stroke?: string;
|
|
187
|
+
styles?: MapObjectStyles<StyleValue>;
|
|
188
|
+
}
|
|
189
|
+
declare const __VLS_export$1: vue6.DefineComponent<Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
|
|
190
|
+
[x: string]: any;
|
|
191
|
+
}, string, vue6.PublicProps, Readonly<Props> & Readonly<{
|
|
192
|
+
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
193
|
+
}>, {
|
|
194
|
+
fill: string;
|
|
195
|
+
}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
196
|
+
declare const _default$4: typeof __VLS_export$1;
|
|
197
|
+
//#endregion
|
|
73
198
|
//#region src/components/MapZoom.vue.d.ts
|
|
74
199
|
type __VLS_Props = ZoomProps;
|
|
75
200
|
declare var __VLS_1: {};
|
|
@@ -78,7 +203,7 @@ type __VLS_Slots = {} & {
|
|
|
78
203
|
};
|
|
79
204
|
declare const __VLS_base: vue6.DefineComponent<__VLS_Props, {
|
|
80
205
|
container: vue6.Ref<SVGGElement | null, SVGGElement | null>;
|
|
81
|
-
zoomBehavior: vue6.ComputedRef<
|
|
206
|
+
zoomBehavior: vue6.ComputedRef<ZoomBehavior$1<SVGSVGElement, unknown>>;
|
|
82
207
|
}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
|
|
83
208
|
zoom: (payload: ZoomEvent) => any;
|
|
84
209
|
zoomstart: (payload: ZoomEvent) => any;
|
|
@@ -94,7 +219,7 @@ declare const __VLS_base: vue6.DefineComponent<__VLS_Props, {
|
|
|
94
219
|
maxZoom: number;
|
|
95
220
|
}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
96
221
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
97
|
-
declare const _default$
|
|
222
|
+
declare const _default$5: typeof __VLS_export;
|
|
98
223
|
type __VLS_WithSlots<T, S> = T & {
|
|
99
224
|
new (): {
|
|
100
225
|
$slots: S;
|
|
@@ -109,4 +234,4 @@ declare const plugin: {
|
|
|
109
234
|
install(app: App): void;
|
|
110
235
|
};
|
|
111
236
|
//#endregion
|
|
112
|
-
export { _default as Map, _default$1 as MapFeature, _default$2 as MapFeatures, _default$3 as MapMarker, _default$4 as MapZoom, plugin };
|
|
237
|
+
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 };
|
package/dist/index.iife.js
CHANGED
|
@@ -1 +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=>
|
|
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:{}},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},{ref_for:!0},t.$attrs),null,16,[`data`,`fill`,`stroke`]))),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},translateExtent:{},modifiers:{}},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,translateExtent:a.translateExtent,modifiers:a.modifiers,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);
|
package/dist/index.js
CHANGED
|
@@ -44,7 +44,7 @@ function useMapContext() {
|
|
|
44
44
|
|
|
45
45
|
//#endregion
|
|
46
46
|
//#region src/components/Map.vue?vue&type=script&setup=true&lang.ts
|
|
47
|
-
const _hoisted_1$
|
|
47
|
+
const _hoisted_1$3 = ["viewBox"];
|
|
48
48
|
var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
49
49
|
__name: "Map",
|
|
50
50
|
props: {
|
|
@@ -69,7 +69,7 @@ var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
|
|
|
69
69
|
}));
|
|
70
70
|
return (_ctx, _cache) => {
|
|
71
71
|
return openBlock(), createBlock(unref(MapProvider), { context: context.value }, {
|
|
72
|
-
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$
|
|
72
|
+
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))]),
|
|
73
73
|
_: 3
|
|
74
74
|
}, 8, ["context"]);
|
|
75
75
|
};
|
|
@@ -84,10 +84,10 @@ var Map_default = Map_vue_vue_type_script_setup_true_lang_default;
|
|
|
84
84
|
//#region src/lib/useMapObject.ts
|
|
85
85
|
function useMapObject(emit, styles) {
|
|
86
86
|
const state = ref("default");
|
|
87
|
-
const eventCallbackFactory = (eventName) => (
|
|
87
|
+
const eventCallbackFactory = (eventName) => (event) => {
|
|
88
88
|
state.value = getObjectStateUpdate(eventName);
|
|
89
89
|
emit(eventName, event);
|
|
90
|
-
}
|
|
90
|
+
};
|
|
91
91
|
return {
|
|
92
92
|
computedStyle: computed(() => resolveObjectStyle(state.value, unref(styles))),
|
|
93
93
|
onMouseEnter: eventCallbackFactory("mouseenter"),
|
|
@@ -101,7 +101,7 @@ function useMapObject(emit, styles) {
|
|
|
101
101
|
|
|
102
102
|
//#endregion
|
|
103
103
|
//#region src/components/MapFeature.vue?vue&type=script&setup=true&lang.ts
|
|
104
|
-
const _hoisted_1$
|
|
104
|
+
const _hoisted_1$2 = [
|
|
105
105
|
"d",
|
|
106
106
|
"fill",
|
|
107
107
|
"stroke"
|
|
@@ -126,7 +126,8 @@ var MapFeature_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
|
|
|
126
126
|
d: path.value,
|
|
127
127
|
style: unref(computedStyle),
|
|
128
128
|
fill: __props.fill,
|
|
129
|
-
stroke: __props.stroke
|
|
129
|
+
stroke: __props.stroke
|
|
130
|
+
}, _ctx.$attrs, {
|
|
130
131
|
onMouseenter: _cache[0] || (_cache[0] = (...args) => unref(onMouseEnter) && unref(onMouseEnter)(...args)),
|
|
131
132
|
onMouseleave: _cache[1] || (_cache[1] = (...args) => unref(onMouseLeave) && unref(onMouseLeave)(...args)),
|
|
132
133
|
onMousedown: _cache[2] || (_cache[2] = (...args) => unref(onMouseDown) && unref(onMouseDown)(...args)),
|
|
@@ -134,7 +135,7 @@ var MapFeature_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
|
|
|
134
135
|
onClick: _cache[4] || (_cache[4] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
|
|
135
136
|
onFocus: _cache[5] || (_cache[5] = (...args) => unref(onFocus) && unref(onFocus)(...args)),
|
|
136
137
|
onBlur: _cache[6] || (_cache[6] = (...args) => unref(onBlur) && unref(onBlur)(...args))
|
|
137
|
-
}
|
|
138
|
+
}), null, 16, _hoisted_1$2)) : createCommentVNode("v-if", true);
|
|
138
139
|
};
|
|
139
140
|
}
|
|
140
141
|
});
|
|
@@ -178,7 +179,7 @@ var MapFeatures_default = MapFeatures_vue_vue_type_script_setup_true_lang_defaul
|
|
|
178
179
|
|
|
179
180
|
//#endregion
|
|
180
181
|
//#region src/components/MapMarker.vue?vue&type=script&setup=true&lang.ts
|
|
181
|
-
const _hoisted_1 = ["transform"];
|
|
182
|
+
const _hoisted_1$1 = ["transform"];
|
|
182
183
|
var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
183
184
|
__name: "MapMarker",
|
|
184
185
|
props: {
|
|
@@ -204,7 +205,7 @@ var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
204
205
|
onClick: _cache[4] || (_cache[4] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
|
|
205
206
|
onFocus: _cache[5] || (_cache[5] = (...args) => unref(onFocus) && unref(onFocus)(...args)),
|
|
206
207
|
onBlur: _cache[6] || (_cache[6] = (...args) => unref(onBlur) && unref(onBlur)(...args))
|
|
207
|
-
}, [renderSlot(_ctx.$slots, "default")], 44, _hoisted_1);
|
|
208
|
+
}, [renderSlot(_ctx.$slots, "default")], 44, _hoisted_1$1);
|
|
208
209
|
};
|
|
209
210
|
}
|
|
210
211
|
});
|
|
@@ -213,6 +214,50 @@ var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
213
214
|
//#region src/components/MapMarker.vue
|
|
214
215
|
var MapMarker_default = MapMarker_vue_vue_type_script_setup_true_lang_default;
|
|
215
216
|
|
|
217
|
+
//#endregion
|
|
218
|
+
//#region src/components/MapMesh.vue?vue&type=script&setup=true&lang.ts
|
|
219
|
+
const _hoisted_1 = [
|
|
220
|
+
"d",
|
|
221
|
+
"fill",
|
|
222
|
+
"stroke"
|
|
223
|
+
];
|
|
224
|
+
var MapMesh_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
225
|
+
__name: "MapMesh",
|
|
226
|
+
props: {
|
|
227
|
+
fill: { default: "none" },
|
|
228
|
+
stroke: {},
|
|
229
|
+
styles: {}
|
|
230
|
+
},
|
|
231
|
+
setup(__props, { emit: __emit }) {
|
|
232
|
+
const props = __props;
|
|
233
|
+
const emit = __emit;
|
|
234
|
+
const context = useMapContext();
|
|
235
|
+
const path = computed(() => context?.renderMesh());
|
|
236
|
+
const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
|
|
237
|
+
return (_ctx, _cache) => {
|
|
238
|
+
return path.value ? (openBlock(), createElementBlock("path", mergeProps({
|
|
239
|
+
key: 0,
|
|
240
|
+
d: path.value,
|
|
241
|
+
style: unref(computedStyle),
|
|
242
|
+
fill: __props.fill,
|
|
243
|
+
stroke: __props.stroke
|
|
244
|
+
}, _ctx.$attrs, {
|
|
245
|
+
onMouseenter: _cache[0] || (_cache[0] = (...args) => unref(onMouseEnter) && unref(onMouseEnter)(...args)),
|
|
246
|
+
onMouseleave: _cache[1] || (_cache[1] = (...args) => unref(onMouseLeave) && unref(onMouseLeave)(...args)),
|
|
247
|
+
onMousedown: _cache[2] || (_cache[2] = (...args) => unref(onMouseDown) && unref(onMouseDown)(...args)),
|
|
248
|
+
onMouseup: _cache[3] || (_cache[3] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
|
|
249
|
+
onClick: _cache[4] || (_cache[4] = (...args) => unref(onMouseUp) && unref(onMouseUp)(...args)),
|
|
250
|
+
onFocus: _cache[5] || (_cache[5] = (...args) => unref(onFocus) && unref(onFocus)(...args)),
|
|
251
|
+
onBlur: _cache[6] || (_cache[6] = (...args) => unref(onBlur) && unref(onBlur)(...args))
|
|
252
|
+
}), null, 16, _hoisted_1)) : createCommentVNode("v-if", true);
|
|
253
|
+
};
|
|
254
|
+
}
|
|
255
|
+
});
|
|
256
|
+
|
|
257
|
+
//#endregion
|
|
258
|
+
//#region src/components/MapMesh.vue
|
|
259
|
+
var MapMesh_default = MapMesh_vue_vue_type_script_setup_true_lang_default;
|
|
260
|
+
|
|
216
261
|
//#endregion
|
|
217
262
|
//#region src/components/MapZoom.vue?vue&type=script&setup=true&lang.ts
|
|
218
263
|
var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
@@ -292,6 +337,7 @@ var components_exports = /* @__PURE__ */ __exportAll({
|
|
|
292
337
|
MapFeature: () => MapFeature_default,
|
|
293
338
|
MapFeatures: () => MapFeatures_default,
|
|
294
339
|
MapMarker: () => MapMarker_default,
|
|
340
|
+
MapMesh: () => MapMesh_default,
|
|
295
341
|
MapZoom: () => MapZoom_default
|
|
296
342
|
});
|
|
297
343
|
|
|
@@ -307,4 +353,4 @@ const plugin = { install(app) {
|
|
|
307
353
|
} };
|
|
308
354
|
|
|
309
355
|
//#endregion
|
|
310
|
-
export { Map_default as Map, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapMarker_default as MapMarker, MapZoom_default as MapZoom, plugin };
|
|
356
|
+
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 };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@d3-maps/vue",
|
|
3
|
-
"version": "0.1.1-next.0",
|
|
4
3
|
"type": "module",
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"private": false,
|
|
6
6
|
"description": "Vue bindings for @d3-maps/core to build reactive D3 SVG maps",
|
|
7
7
|
"author": "Georgii Bukharov <souljorje@gmail.com>",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"publishConfig": {
|
|
10
10
|
"access": "public"
|
|
11
11
|
},
|
|
12
|
-
"homepage": "https://d3-maps
|
|
12
|
+
"homepage": "https://souljorje.github.io/d3-maps",
|
|
13
13
|
"repository": {
|
|
14
14
|
"type": "git",
|
|
15
15
|
"url": "https://github.com/souljorje/d3-maps.git",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"vue": "3.5.25"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@d3-maps/core": "0.
|
|
47
|
+
"@d3-maps/core": "0.2.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/geojson": "^7946.0.16",
|
|
@@ -55,10 +55,10 @@
|
|
|
55
55
|
"jsdom": "^27.3.0",
|
|
56
56
|
"tsdown": "0.19.0",
|
|
57
57
|
"typescript": "^5.9.3",
|
|
58
|
+
"unplugin-vue": "^6.0.1",
|
|
58
59
|
"vitest": "^4.0.15",
|
|
59
60
|
"vue": "3.5.25",
|
|
60
|
-
"vue-tsc": "^3.2.0"
|
|
61
|
-
"unplugin-vue": "^6.0.1"
|
|
61
|
+
"vue-tsc": "^3.2.0"
|
|
62
62
|
},
|
|
63
63
|
"scripts": {
|
|
64
64
|
"typecheck": "vue-tsc --noEmit",
|