@d3-maps/vue 0.2.0 → 0.3.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/dist/index.d.ts +119 -45
- package/dist/index.iife.js +1 -1
- package/dist/index.js +8 -7
- package/package.json +4 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "@d3-maps/core/index.css";
|
|
2
|
-
import * as
|
|
2
|
+
import * as vue4 from "vue";
|
|
3
3
|
import { App, StyleValue } from "vue";
|
|
4
|
-
import {
|
|
5
|
-
import { GeoPath, GeoProjection } from "d3-geo";
|
|
4
|
+
import { ExtendedFeature, ExtendedFeatureCollection, GeoPath, GeoProjection } from "d3-geo";
|
|
6
5
|
import { Topology } from "topojson-specification";
|
|
7
|
-
import {
|
|
6
|
+
import { mesh } from "topojson-client";
|
|
7
|
+
import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
|
|
8
8
|
|
|
9
9
|
//#region ../core/src/lib/mapObject.d.ts
|
|
10
10
|
/**
|
|
@@ -20,7 +20,7 @@ type MapObjectStyles<TStyle> = Partial<Record<MapObjectState, TStyle>>;
|
|
|
20
20
|
*
|
|
21
21
|
* This type allows extra top-level fields to be attached in `dataTransformer` (e.g. choropleth colors).
|
|
22
22
|
*/
|
|
23
|
-
type MapFeature = (
|
|
23
|
+
type MapFeature = (ExtendedFeature & Record<string, unknown>) | ExtendedFeature;
|
|
24
24
|
/**
|
|
25
25
|
* Shared props contract for a single rendered feature.
|
|
26
26
|
*/
|
|
@@ -31,19 +31,87 @@ interface MapFeatureProps<TStyle = unknown> {
|
|
|
31
31
|
stroke?: string;
|
|
32
32
|
}
|
|
33
33
|
//#endregion
|
|
34
|
+
//#region ../core/src/lib/utils.d.ts
|
|
35
|
+
type AnyFn = (...args: any) => any;
|
|
36
|
+
/**
|
|
37
|
+
* Extracts a union of parameter tuples from a (possibly overloaded) function type.
|
|
38
|
+
*
|
|
39
|
+
* TypeScript's built-in `Parameters<F>` only captures the *last* overload, which breaks typing
|
|
40
|
+
* for overloaded getter/setter APIs (common in d3), where the setter overload might not be last.
|
|
41
|
+
*
|
|
42
|
+
* Notes:
|
|
43
|
+
* - This helper supports up to 5 overload signatures (adjust if needed).
|
|
44
|
+
* - Getter overloads like `(): T` are filtered out later via `Exclude<..., []>` when we build
|
|
45
|
+
* setter-only config types.
|
|
46
|
+
*/
|
|
47
|
+
type OverloadedArgs<F> = F extends {
|
|
48
|
+
(...a: infer A1): any;
|
|
49
|
+
(...a: infer A2): any;
|
|
50
|
+
(...a: infer A3): any;
|
|
51
|
+
(...a: infer A4): any;
|
|
52
|
+
(...a: infer A5): any;
|
|
53
|
+
} ? A1 | A2 | A3 | A4 | A5 : F extends {
|
|
54
|
+
(...a: infer A1): any;
|
|
55
|
+
(...a: infer A2): any;
|
|
56
|
+
(...a: infer A3): any;
|
|
57
|
+
(...a: infer A4): any;
|
|
58
|
+
} ? A1 | A2 | A3 | A4 : F extends {
|
|
59
|
+
(...a: infer A1): any;
|
|
60
|
+
(...a: infer A2): any;
|
|
61
|
+
(...a: infer A3): any;
|
|
62
|
+
} ? A1 | A2 | A3 : F extends {
|
|
63
|
+
(...a: infer A1): any;
|
|
64
|
+
(...a: infer A2): any;
|
|
65
|
+
} ? A1 | A2 : F extends ((...a: infer A1) => any) ? A1 : never;
|
|
66
|
+
/**
|
|
67
|
+
* Removes 0-arg overloads (getters), leaving only setter-style overload argument tuples.
|
|
68
|
+
*/
|
|
69
|
+
type SetterArgs<F> = Exclude<OverloadedArgs<F>, []>;
|
|
70
|
+
/**
|
|
71
|
+
* True if the function has at least one overload that accepts arguments (i.e. a setter overload).
|
|
72
|
+
*/
|
|
73
|
+
type HasArgs<F> = [SetterArgs<F>] extends [never] ? false : true;
|
|
74
|
+
type OwnKeys<T> = T extends AnyFn ? Exclude<keyof T, keyof CallableFunction> : keyof T;
|
|
75
|
+
/**
|
|
76
|
+
* Converts method parameters to modifiers values
|
|
77
|
+
* - single non-array arg: `arg` | `[arg]`
|
|
78
|
+
* - multiple args/single array wrapped with array
|
|
79
|
+
*/
|
|
80
|
+
type ModifierArgs<P extends unknown[]> = P extends [infer Only] ? Only extends readonly unknown[] ? [Only] : Only | [Only] : P;
|
|
81
|
+
/**
|
|
82
|
+
* Maps methods with args to modifiers
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* type X = {
|
|
86
|
+
* a: string; // not a function - will be ignored
|
|
87
|
+
* b(): void; // has no arguments - will be ignored
|
|
88
|
+
* c(x: number): void;
|
|
89
|
+
* d(x: number, y: string): void;
|
|
90
|
+
* e(xs: string[]): void;
|
|
91
|
+
* }
|
|
92
|
+
*
|
|
93
|
+
* type R = MethodsToModifiers<X>
|
|
94
|
+
* {
|
|
95
|
+
* c: number | [number];
|
|
96
|
+
* d: [number, string];
|
|
97
|
+
* e: [string[]]; // forced wrapper (arg is array)
|
|
98
|
+
* }
|
|
99
|
+
*/
|
|
100
|
+
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[]>> };
|
|
101
|
+
//#endregion
|
|
34
102
|
//#region ../core/src/lib/map.d.ts
|
|
35
|
-
type
|
|
103
|
+
type MapMesh = ReturnType<typeof mesh>;
|
|
104
|
+
type MapData = ExtendedFeatureCollection | Topology;
|
|
36
105
|
type DataTransformer = (features: MapFeature[]) => MapFeature[];
|
|
37
106
|
/**
|
|
38
|
-
*
|
|
107
|
+
* Extra projection method calls to apply before rendering.
|
|
108
|
+
*
|
|
109
|
+
* Use projection method names as keys and method arguments as values.
|
|
110
|
+
* Example: `{ center: [[0, 20]], rotate: [[0, 0, 0]], scale: 160 }`
|
|
39
111
|
*
|
|
40
|
-
* d3-
|
|
112
|
+
* @see https://d3js.org/d3-geo/projection
|
|
41
113
|
*/
|
|
42
|
-
interface ProjectionConfig {
|
|
43
|
-
center?: [number, number];
|
|
44
|
-
rotate?: [number, number, number];
|
|
45
|
-
scale?: number;
|
|
46
|
-
}
|
|
114
|
+
interface ProjectionConfig extends Omit<MethodsToModifiers<GeoProjection>, 'invert' | 'stream'> {}
|
|
47
115
|
/**
|
|
48
116
|
* Input configuration for creating a map context.
|
|
49
117
|
*
|
|
@@ -59,6 +127,9 @@ interface MapConfig {
|
|
|
59
127
|
* Example: `geoEqualEarth`.
|
|
60
128
|
*/
|
|
61
129
|
projection?: () => GeoProjection;
|
|
130
|
+
/**
|
|
131
|
+
* Projection method arguments passed to the created projection
|
|
132
|
+
*/
|
|
62
133
|
projectionConfig?: ProjectionConfig;
|
|
63
134
|
/**
|
|
64
135
|
* TopoJSON or GeoJSON input.
|
|
@@ -81,9 +152,9 @@ interface MapContext {
|
|
|
81
152
|
height: number;
|
|
82
153
|
projection?: GeoProjection;
|
|
83
154
|
features: MapFeature[];
|
|
84
|
-
mesh?:
|
|
155
|
+
mesh?: MapMesh;
|
|
85
156
|
path: GeoPath;
|
|
86
|
-
renderPath: (feature:
|
|
157
|
+
renderPath: (feature: MapFeature) => ReturnType<GeoPath>;
|
|
87
158
|
renderMesh: () => ReturnType<GeoPath>;
|
|
88
159
|
}
|
|
89
160
|
//#endregion
|
|
@@ -98,19 +169,22 @@ interface MapMarkerProps<TStyle = unknown> {
|
|
|
98
169
|
}
|
|
99
170
|
//#endregion
|
|
100
171
|
//#region ../core/src/lib/zoom.d.ts
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
172
|
+
interface DefaultZoomBehavior extends ZoomBehavior<SVGSVGElement, unknown> {}
|
|
173
|
+
/**
|
|
174
|
+
* Extra zoom method calls to apply before rendering.
|
|
175
|
+
*
|
|
176
|
+
* Use zoom method names as keys and method arguments as values.
|
|
177
|
+
* Example: `{ scaleExtent: [[2, 9]], translateExtent: [[[0, 0], [10, 10]]] }`
|
|
178
|
+
*
|
|
179
|
+
* @see https://d3js.org/d3-zoom
|
|
180
|
+
*/
|
|
181
|
+
interface ZoomModifiers extends MethodsToModifiers<DefaultZoomBehavior> {}
|
|
182
|
+
interface ZoomProps {
|
|
108
183
|
center?: [number, number];
|
|
109
184
|
zoom?: number;
|
|
110
185
|
minZoom?: number;
|
|
111
186
|
maxZoom?: number;
|
|
112
|
-
|
|
113
|
-
modifiers?: ZoomModifiers<TElement, TDatum>;
|
|
187
|
+
config?: ZoomModifiers;
|
|
114
188
|
}
|
|
115
189
|
interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
|
|
116
190
|
//#endregion
|
|
@@ -118,7 +192,7 @@ interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
|
|
|
118
192
|
type __VLS_Slots$3 = {
|
|
119
193
|
default?: (props: MapContext) => unknown;
|
|
120
194
|
};
|
|
121
|
-
declare const __VLS_base$3:
|
|
195
|
+
declare const __VLS_base$3: vue4.DefineComponent<MapConfig, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {}, string, vue4.PublicProps, Readonly<MapConfig> & Readonly<{}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
|
|
122
196
|
declare const __VLS_export$5: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
|
|
123
197
|
declare const _default: typeof __VLS_export$5;
|
|
124
198
|
type __VLS_WithSlots$3<T, S> = T & {
|
|
@@ -128,12 +202,12 @@ type __VLS_WithSlots$3<T, S> = T & {
|
|
|
128
202
|
};
|
|
129
203
|
//#endregion
|
|
130
204
|
//#region src/components/MapFeature.vue.d.ts
|
|
131
|
-
type __VLS_Props$
|
|
132
|
-
declare const __VLS_export$4:
|
|
205
|
+
type __VLS_Props$1 = MapFeatureProps<StyleValue>;
|
|
206
|
+
declare const __VLS_export$4: vue4.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {} & {
|
|
133
207
|
[x: string]: any;
|
|
134
|
-
}, string,
|
|
208
|
+
}, string, vue4.PublicProps, Readonly<__VLS_Props$1> & Readonly<{
|
|
135
209
|
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
136
|
-
}>, {}, {}, {}, {}, string,
|
|
210
|
+
}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
|
|
137
211
|
declare const _default$1: typeof __VLS_export$4;
|
|
138
212
|
//#endregion
|
|
139
213
|
//#region src/components/MapFeatures.vue.d.ts
|
|
@@ -141,6 +215,7 @@ interface Props$1 {
|
|
|
141
215
|
idKey?: string;
|
|
142
216
|
fill?: string;
|
|
143
217
|
stroke?: string;
|
|
218
|
+
styles?: MapObjectStyles<StyleValue>;
|
|
144
219
|
}
|
|
145
220
|
declare var __VLS_1$2: {
|
|
146
221
|
features: MapFeature[];
|
|
@@ -148,9 +223,9 @@ declare var __VLS_1$2: {
|
|
|
148
223
|
type __VLS_Slots$2 = {} & {
|
|
149
224
|
default?: (props: typeof __VLS_1$2) => any;
|
|
150
225
|
};
|
|
151
|
-
declare const __VLS_base$2:
|
|
226
|
+
declare const __VLS_base$2: vue4.DefineComponent<Props$1, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {}, string, vue4.PublicProps, Readonly<Props$1> & Readonly<{}>, {
|
|
152
227
|
idKey: string;
|
|
153
|
-
}, {}, {}, {}, string,
|
|
228
|
+
}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
|
|
154
229
|
declare const __VLS_export$3: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
|
|
155
230
|
declare const _default$2: typeof __VLS_export$3;
|
|
156
231
|
type __VLS_WithSlots$2<T, S> = T & {
|
|
@@ -160,18 +235,18 @@ type __VLS_WithSlots$2<T, S> = T & {
|
|
|
160
235
|
};
|
|
161
236
|
//#endregion
|
|
162
237
|
//#region src/components/MapMarker.vue.d.ts
|
|
163
|
-
type __VLS_Props
|
|
238
|
+
type __VLS_Props = MapMarkerProps<StyleValue>;
|
|
164
239
|
declare var __VLS_1$1: {};
|
|
165
240
|
type __VLS_Slots$1 = {} & {
|
|
166
241
|
default?: (props: typeof __VLS_1$1) => any;
|
|
167
242
|
};
|
|
168
|
-
declare const __VLS_base$1:
|
|
243
|
+
declare const __VLS_base$1: vue4.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {} & {
|
|
169
244
|
[x: string]: any;
|
|
170
|
-
}, string,
|
|
245
|
+
}, string, vue4.PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
171
246
|
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
172
247
|
}>, {
|
|
173
248
|
coordinates: MapMarkerCoordinates;
|
|
174
|
-
}, {}, {}, {}, string,
|
|
249
|
+
}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
|
|
175
250
|
declare const __VLS_export$2: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
|
|
176
251
|
declare const _default$3: typeof __VLS_export$2;
|
|
177
252
|
type __VLS_WithSlots$1<T, S> = T & {
|
|
@@ -186,29 +261,28 @@ interface Props {
|
|
|
186
261
|
stroke?: string;
|
|
187
262
|
styles?: MapObjectStyles<StyleValue>;
|
|
188
263
|
}
|
|
189
|
-
declare const __VLS_export$1:
|
|
264
|
+
declare const __VLS_export$1: vue4.DefineComponent<Props, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {} & {
|
|
190
265
|
[x: string]: any;
|
|
191
|
-
}, string,
|
|
266
|
+
}, string, vue4.PublicProps, Readonly<Props> & Readonly<{
|
|
192
267
|
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
193
268
|
}>, {
|
|
194
269
|
fill: string;
|
|
195
|
-
}, {}, {}, {}, string,
|
|
270
|
+
}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
|
|
196
271
|
declare const _default$4: typeof __VLS_export$1;
|
|
197
272
|
//#endregion
|
|
198
273
|
//#region src/components/MapZoom.vue.d.ts
|
|
199
|
-
type __VLS_Props = ZoomProps;
|
|
200
274
|
declare var __VLS_1: {};
|
|
201
275
|
type __VLS_Slots = {} & {
|
|
202
276
|
default?: (props: typeof __VLS_1) => any;
|
|
203
277
|
};
|
|
204
|
-
declare const __VLS_base:
|
|
205
|
-
container:
|
|
206
|
-
zoomBehavior:
|
|
207
|
-
}, {}, {}, {},
|
|
278
|
+
declare const __VLS_base: vue4.DefineComponent<ZoomProps, {
|
|
279
|
+
container: vue4.Ref<SVGGElement | null, SVGGElement | null>;
|
|
280
|
+
zoomBehavior: vue4.ComputedRef<DefaultZoomBehavior>;
|
|
281
|
+
}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {} & {
|
|
208
282
|
zoom: (payload: ZoomEvent) => any;
|
|
209
283
|
zoomstart: (payload: ZoomEvent) => any;
|
|
210
284
|
zoomend: (payload: ZoomEvent) => any;
|
|
211
|
-
}, string,
|
|
285
|
+
}, string, vue4.PublicProps, Readonly<ZoomProps> & Readonly<{
|
|
212
286
|
onZoom?: ((payload: ZoomEvent) => any) | undefined;
|
|
213
287
|
onZoomstart?: ((payload: ZoomEvent) => any) | undefined;
|
|
214
288
|
onZoomend?: ((payload: ZoomEvent) => any) | undefined;
|
|
@@ -217,7 +291,7 @@ declare const __VLS_base: vue6.DefineComponent<__VLS_Props, {
|
|
|
217
291
|
zoom: number;
|
|
218
292
|
minZoom: number;
|
|
219
293
|
maxZoom: number;
|
|
220
|
-
}, {}, {}, {}, string,
|
|
294
|
+
}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
|
|
221
295
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
222
296
|
declare const _default$5: typeof __VLS_export;
|
|
223
297
|
type __VLS_WithSlots<T, S> = T & {
|
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=>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},
|
|
1
|
+
(function(e,t,n,r){var i=Object.defineProperty,a=(e,t)=>{let n={};for(var r in e)i(n,r,{get:e[r],enumerable:!0});return t&&i(n,Symbol.toStringTag,{value:`Module`}),n};let o=Symbol(`MapContext`),s=(0,n.defineComponent)((e,{slots:t})=>((0,n.provide)(o,e.context),()=>t.default?.()??null),{props:{context:{type:Object,required:!0}}});(0,n.defineComponent)({name:`MapConsumer`,setup(e,{slots:t}){let r=(0,n.inject)(o);return()=>t.default?t.default(r??{}):null}});function c(){return(0,n.inject)(o)}let l=[`viewBox`];var u=(0,n.defineComponent)({__name:`Map`,props:{width:{},height:{},aspectRatio:{},projection:{type:Function},projectionConfig:{},data:{},dataTransformer:{type:Function}},setup(e){let t=e,i=(0,n.computed)(()=>(0,r.makeMapContext)({width:t.width,height:t.height,aspectRatio:t.aspectRatio,projection:t.projection,projectionConfig:t.projectionConfig,data:t.data,dataTransformer:t.dataTransformer}));return(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(s),{context:i.value},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,(0,n.mergeProps)({viewBox:`0 0 ${i.value.width} ${i.value.height}`},e.$attrs,{class:`d3-map`}),[(0,n.renderSlot)(e.$slots,`default`,(0,n.normalizeProps)((0,n.guardReactiveProps)(i.value)))],16,l))]),_:3},8,[`context`]))}});function d(e,t){let i=(0,n.ref)(`default`),a=t=>n=>{i.value=(0,r.getObjectStateUpdate)(t),e(t,n)};return{computedStyle:(0,n.computed)(()=>(0,r.resolveObjectStyle)(i.value,(0,n.unref)(t))),onMouseEnter:a(`mouseenter`),onMouseLeave:a(`mouseleave`),onMouseDown:a(`mousedown`),onMouseUp:a(`mouseup`),onFocus:a(`focus`),onBlur:a(`blur`)}}let f=[`d`,`fill`,`stroke`];var p=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{},fill:{},stroke:{}},setup(e,{emit:t}){let r=e,i=t,a=c(),o=(0,n.computed)(()=>a?.renderPath(r.data)),{computedStyle:s,onMouseEnter:l,onMouseLeave:u,onMouseDown:p,onMouseUp:m,onFocus:h,onBlur:g}=d(i,(0,n.toRef)(r,`styles`));return(t,r)=>o.value?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({key:0,d:o.value,style:(0,n.unref)(s),fill:e.fill,stroke:e.stroke},t.$attrs,{onMouseenter:r[0]||=(...e)=>(0,n.unref)(l)&&(0,n.unref)(l)(...e),onMouseleave:r[1]||=(...e)=>(0,n.unref)(u)&&(0,n.unref)(u)(...e),onMousedown:r[2]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onMouseup:r[3]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onClick:r[4]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onFocus:r[5]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e),onBlur:r[6]||=(...e)=>(0,n.unref)(g)&&(0,n.unref)(g)(...e)}),null,16,f)):(0,n.createCommentVNode)(`v-if`,!0)}}),m=(0,n.defineComponent)({__name:`MapFeatures`,props:{idKey:{default:`id`},fill:{},stroke:{},styles:{}},setup(e){let t=c(),i=(0,n.computed)(()=>t?.features??[]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,null,[(0,n.renderSlot)(t.$slots,`default`,{features:i.value},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.value,(i,a)=>((0,n.openBlock)(),(0,n.createBlock)(p,(0,n.mergeProps)({key:(0,n.unref)(r.getFeatureKey)(i,e.idKey,a),data:i,fill:e.fill,stroke:e.stroke,styles:e.styles},{ref_for:!0},t.$attrs),null,16,[`data`,`fill`,`stroke`,`styles`]))),128))])]))}});let h=[`transform`];var g=(0,n.defineComponent)({__name:`MapMarker`,props:{coordinates:{default:()=>[0,0]},styles:{}},setup(e,{emit:t}){let i=e,a=t,o=c(),s=(0,n.computed)(()=>(0,r.getMarkerTransform)(o,i.coordinates)),{computedStyle:l,onMouseEnter:u,onMouseLeave:f,onMouseDown:p,onMouseUp:m,onFocus:g,onBlur:_}=d(a,(0,n.toRef)(i,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{transform:s.value,style:(0,n.normalizeStyle)((0,n.unref)(l)),onMouseenter:t[0]||=(...e)=>(0,n.unref)(u)&&(0,n.unref)(u)(...e),onMouseleave:t[1]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMousedown:t[2]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onMouseup:t[3]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onClick:t[4]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onFocus:t[5]||=(...e)=>(0,n.unref)(g)&&(0,n.unref)(g)(...e),onBlur:t[6]||=(...e)=>(0,n.unref)(_)&&(0,n.unref)(_)(...e)},[(0,n.renderSlot)(e.$slots,`default`)],44,h))}});let _=[`d`,`fill`,`stroke`];var v=(0,n.defineComponent)({__name:`MapMesh`,props:{fill:{default:`none`},stroke:{},styles:{}},setup(e,{emit:t}){let r=e,i=t,a=c(),o=(0,n.computed)(()=>a?.renderMesh()),{computedStyle:s,onMouseEnter:l,onMouseLeave:u,onMouseDown:f,onMouseUp:p,onFocus:m,onBlur:h}=d(i,(0,n.toRef)(r,`styles`));return(t,r)=>o.value?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({key:0,d:o.value,style:(0,n.unref)(s),fill:e.fill,stroke:e.stroke},t.$attrs,{onMouseenter:r[0]||=(...e)=>(0,n.unref)(l)&&(0,n.unref)(l)(...e),onMouseleave:r[1]||=(...e)=>(0,n.unref)(u)&&(0,n.unref)(u)(...e),onMousedown:r[2]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMouseup:r[3]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onClick:r[4]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onFocus:r[5]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onBlur:r[6]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e)}),null,16,_)):(0,n.createCommentVNode)(`v-if`,!0)}}),y=(0,n.defineComponent)({__name:`MapZoom`,props:{center:{default:()=>[0,0]},zoom:{default:1},minZoom:{default:1},maxZoom:{default:8},config:{}},emits:[`zoomstart`,`zoom`,`zoomend`],setup(e,{expose:t,emit:i}){let a=e,o=i,s=(0,n.ref)(null),l=c(),u=(0,n.computed)(()=>(0,r.createZoomBehavior)(l,{minZoom:a.minZoom,maxZoom:a.maxZoom,config:a.config,onZoomStart:e=>o(`zoomstart`,e),onZoom:e=>{s.value&&s.value.setAttribute(`transform`,e.transform.toString()),o(`zoom`,e)},onZoomEnd:e=>o(`zoomend`,e)}));return(0,n.onMounted)(()=>{(0,n.watch)(()=>[u],()=>(0,r.setupZoom)({element:s.value,behavior:u.value,center:a.center,zoom:a.zoom}),{immediate:!0}),(0,n.watch)(()=>[a.center[0],a.center[1],a.zoom],()=>(0,r.applyZoomTransform)({element:s.value,behavior:u.value,center:a.center,zoom:a.zoom}))}),t({container:s,zoomBehavior:u}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{ref_key:`container`,ref:s,class:`d3-map-zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),b=a({Map:()=>u,MapFeature:()=>p,MapFeatures:()=>m,MapMarker:()=>g,MapMesh:()=>v,MapZoom:()=>y});e.Map=u,e.MapFeature=p,e.MapFeatures=m,e.MapMarker=g,e.MapMesh=v,e.MapZoom=y,e.plugin={install(e){Object.entries(b).forEach(([t,n])=>{e.component(t,n)})}}})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,Vue,D3Maps);
|
package/dist/index.js
CHANGED
|
@@ -151,7 +151,8 @@ var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
151
151
|
props: {
|
|
152
152
|
idKey: { default: "id" },
|
|
153
153
|
fill: {},
|
|
154
|
-
stroke: {}
|
|
154
|
+
stroke: {},
|
|
155
|
+
styles: {}
|
|
155
156
|
},
|
|
156
157
|
setup(__props) {
|
|
157
158
|
const context = useMapContext();
|
|
@@ -162,11 +163,13 @@ var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
162
163
|
key: unref(getFeatureKey)(feature, __props.idKey, index),
|
|
163
164
|
data: feature,
|
|
164
165
|
fill: __props.fill,
|
|
165
|
-
stroke: __props.stroke
|
|
166
|
+
stroke: __props.stroke,
|
|
167
|
+
styles: __props.styles
|
|
166
168
|
}, { ref_for: true }, _ctx.$attrs), null, 16, [
|
|
167
169
|
"data",
|
|
168
170
|
"fill",
|
|
169
|
-
"stroke"
|
|
171
|
+
"stroke",
|
|
172
|
+
"styles"
|
|
170
173
|
]);
|
|
171
174
|
}), 128))])]);
|
|
172
175
|
};
|
|
@@ -267,8 +270,7 @@ var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
267
270
|
zoom: { default: 1 },
|
|
268
271
|
minZoom: { default: 1 },
|
|
269
272
|
maxZoom: { default: 8 },
|
|
270
|
-
|
|
271
|
-
modifiers: {}
|
|
273
|
+
config: {}
|
|
272
274
|
},
|
|
273
275
|
emits: [
|
|
274
276
|
"zoomstart",
|
|
@@ -284,8 +286,7 @@ var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
284
286
|
return createZoomBehavior(context, {
|
|
285
287
|
minZoom: props.minZoom,
|
|
286
288
|
maxZoom: props.maxZoom,
|
|
287
|
-
|
|
288
|
-
modifiers: props.modifiers,
|
|
289
|
+
config: props.config,
|
|
289
290
|
onZoomStart: (event) => emit("zoomstart", event),
|
|
290
291
|
onZoom: (event) => {
|
|
291
292
|
if (container.value) container.value.setAttribute("transform", event.transform.toString());
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@d3-maps/vue",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.3.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>",
|
|
@@ -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.3.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/geojson": "^7946.0.16",
|
|
@@ -56,12 +56,14 @@
|
|
|
56
56
|
"tsdown": "0.19.0",
|
|
57
57
|
"typescript": "^5.9.3",
|
|
58
58
|
"unplugin-vue": "^6.0.1",
|
|
59
|
+
"vite-tsconfig-paths": "^6.1.1",
|
|
59
60
|
"vitest": "^4.0.15",
|
|
60
61
|
"vue": "3.5.25",
|
|
61
62
|
"vue-tsc": "^3.2.0"
|
|
62
63
|
},
|
|
63
64
|
"scripts": {
|
|
64
65
|
"typecheck": "vue-tsc --noEmit",
|
|
66
|
+
"typecheck:test": "vue-tsc -p tsconfig.test.json --noEmit",
|
|
65
67
|
"build": "pnpm run typecheck && tsdown",
|
|
66
68
|
"test": "vitest run",
|
|
67
69
|
"test:watch": "vitest"
|