@d3-maps/vue 0.6.0 → 0.7.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 +32 -24
- package/dist/index.iife.js +1 -1
- package/dist/index.js +7 -7
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @d3-maps/vue
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Reactive SVG maps, powered by D3.
|
|
4
4
|
|
|
5
5
|
[docs](https://souljorje.github.io/d3-maps)
|
|
6
6
|
|
package/dist/index.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
|
|
|
12
12
|
*/
|
|
13
13
|
declare const mapObjectState: readonly ["default", "hover", "active"];
|
|
14
14
|
type MapObjectState = typeof mapObjectState[number];
|
|
15
|
-
interface
|
|
15
|
+
interface MapObjectProps<TStyle = unknown> {
|
|
16
16
|
styles?: Partial<Record<MapObjectState, TStyle>>;
|
|
17
17
|
}
|
|
18
18
|
//#endregion
|
|
@@ -26,9 +26,15 @@ type MapFeature = (ExtendedFeature & Record<string, unknown>) | ExtendedFeature;
|
|
|
26
26
|
/**
|
|
27
27
|
* Shared props contract for a single rendered feature.
|
|
28
28
|
*/
|
|
29
|
-
interface MapFeatureProps<TStyle = unknown> extends
|
|
29
|
+
interface MapFeatureProps<TStyle = unknown> extends MapObjectProps<TStyle> {
|
|
30
30
|
data: MapFeature;
|
|
31
31
|
}
|
|
32
|
+
/**
|
|
33
|
+
* Shared props contract for feature collections rendered from the current map context.
|
|
34
|
+
*/
|
|
35
|
+
interface MapFeaturesProps<TStyle = unknown> extends Omit<MapFeatureProps<TStyle>, 'data'> {
|
|
36
|
+
idKey?: string;
|
|
37
|
+
}
|
|
32
38
|
//#endregion
|
|
33
39
|
//#region ../core/src/lib/utils.d.ts
|
|
34
40
|
type AnyFn = (...args: any) => any;
|
|
@@ -111,11 +117,11 @@ type DataTransformer = (features: MapFeature[]) => MapFeature[];
|
|
|
111
117
|
*/
|
|
112
118
|
interface ProjectionConfig extends Omit<MethodsToModifiers<GeoProjection>, 'invert' | 'stream'> {}
|
|
113
119
|
/**
|
|
114
|
-
*
|
|
120
|
+
* Shared props contract for the `Map` component.
|
|
115
121
|
*
|
|
116
122
|
* In adapters, this is usually passed as component props.
|
|
117
123
|
*/
|
|
118
|
-
interface
|
|
124
|
+
interface MapProps {
|
|
119
125
|
width?: number;
|
|
120
126
|
height?: number;
|
|
121
127
|
aspectRatio?: number;
|
|
@@ -164,13 +170,21 @@ interface MapContext {
|
|
|
164
170
|
* @see https://d3js.org/d3-geo/shape#geoGraticule
|
|
165
171
|
*/
|
|
166
172
|
interface GraticuleConfig extends MethodsToModifiers<GeoGraticuleGenerator> {}
|
|
173
|
+
/**
|
|
174
|
+
* Shared props contract for graticule layers.
|
|
175
|
+
*/
|
|
176
|
+
interface MapGraticuleProps<TStyle = unknown> extends MapObjectProps<TStyle> {
|
|
177
|
+
config?: GraticuleConfig;
|
|
178
|
+
background?: boolean | string;
|
|
179
|
+
border?: boolean | string;
|
|
180
|
+
}
|
|
167
181
|
//#endregion
|
|
168
182
|
//#region ../core/src/lib/marker.d.ts
|
|
169
183
|
type MapMarkerCoordinates = [number, number];
|
|
170
184
|
/**
|
|
171
185
|
* Shared props contract for marker layers.
|
|
172
186
|
*/
|
|
173
|
-
interface MapMarkerProps<TStyle = unknown> extends
|
|
187
|
+
interface MapMarkerProps<TStyle = unknown> extends MapObjectProps<TStyle> {
|
|
174
188
|
coordinates?: MapMarkerCoordinates;
|
|
175
189
|
}
|
|
176
190
|
//#endregion
|
|
@@ -194,11 +208,11 @@ interface ZoomProps {
|
|
|
194
208
|
}
|
|
195
209
|
interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
|
|
196
210
|
//#endregion
|
|
197
|
-
//#region src/components/
|
|
211
|
+
//#region src/components/MapBase.vue.d.ts
|
|
198
212
|
type __VLS_Slots$3 = {
|
|
199
213
|
default?: (props: MapContext) => unknown;
|
|
200
214
|
};
|
|
201
|
-
declare const __VLS_base$3: vue6.DefineComponent<
|
|
215
|
+
declare const __VLS_base$3: vue6.DefineComponent<MapProps, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<MapProps> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
202
216
|
declare const __VLS_export$6: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
|
|
203
217
|
declare const _default: typeof __VLS_export$6;
|
|
204
218
|
type __VLS_WithSlots$3<T, S> = T & {
|
|
@@ -208,21 +222,19 @@ type __VLS_WithSlots$3<T, S> = T & {
|
|
|
208
222
|
};
|
|
209
223
|
//#endregion
|
|
210
224
|
//#region src/components/MapFeature.vue.d.ts
|
|
211
|
-
type __VLS_Props$
|
|
212
|
-
declare const __VLS_export$5: vue6.DefineComponent<__VLS_Props$
|
|
225
|
+
type __VLS_Props$4 = MapFeatureProps<StyleValue>;
|
|
226
|
+
declare const __VLS_export$5: vue6.DefineComponent<__VLS_Props$4, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$4> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
213
227
|
declare const _default$1: typeof __VLS_export$5;
|
|
214
228
|
//#endregion
|
|
215
229
|
//#region src/components/MapFeatures.vue.d.ts
|
|
216
|
-
|
|
217
|
-
idKey?: string;
|
|
218
|
-
}
|
|
230
|
+
type __VLS_Props$3 = MapFeaturesProps<StyleValue>;
|
|
219
231
|
declare var __VLS_1$2: {
|
|
220
232
|
features: MapFeature[];
|
|
221
233
|
};
|
|
222
234
|
type __VLS_Slots$2 = {} & {
|
|
223
235
|
default?: (props: typeof __VLS_1$2) => any;
|
|
224
236
|
};
|
|
225
|
-
declare const __VLS_base$2: vue6.DefineComponent<
|
|
237
|
+
declare const __VLS_base$2: vue6.DefineComponent<__VLS_Props$3, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$3> & Readonly<{}>, {
|
|
226
238
|
idKey: string;
|
|
227
239
|
}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
228
240
|
declare const __VLS_export$4: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
|
|
@@ -234,21 +246,17 @@ type __VLS_WithSlots$2<T, S> = T & {
|
|
|
234
246
|
};
|
|
235
247
|
//#endregion
|
|
236
248
|
//#region src/components/MapGraticule.vue.d.ts
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
background?: boolean | string;
|
|
240
|
-
border?: boolean | string;
|
|
241
|
-
}
|
|
242
|
-
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>;
|
|
249
|
+
type __VLS_Props$2 = MapGraticuleProps<StyleValue>;
|
|
250
|
+
declare const __VLS_export$3: vue6.DefineComponent<__VLS_Props$2, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$2> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
243
251
|
declare const _default$3: typeof __VLS_export$3;
|
|
244
252
|
//#endregion
|
|
245
253
|
//#region src/components/MapMarker.vue.d.ts
|
|
246
|
-
type __VLS_Props = MapMarkerProps<StyleValue>;
|
|
254
|
+
type __VLS_Props$1 = MapMarkerProps<StyleValue>;
|
|
247
255
|
declare var __VLS_1$1: {};
|
|
248
256
|
type __VLS_Slots$1 = {} & {
|
|
249
257
|
default?: (props: typeof __VLS_1$1) => any;
|
|
250
258
|
};
|
|
251
|
-
declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
259
|
+
declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {
|
|
252
260
|
coordinates: MapMarkerCoordinates;
|
|
253
261
|
}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
254
262
|
declare const __VLS_export$2: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
|
|
@@ -260,8 +268,8 @@ type __VLS_WithSlots$1<T, S> = T & {
|
|
|
260
268
|
};
|
|
261
269
|
//#endregion
|
|
262
270
|
//#region src/components/MapMesh.vue.d.ts
|
|
263
|
-
|
|
264
|
-
declare const __VLS_export$1: vue6.DefineComponent<
|
|
271
|
+
type __VLS_Props = MapObjectProps<StyleValue>;
|
|
272
|
+
declare const __VLS_export$1: vue6.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
265
273
|
declare const _default$5: typeof __VLS_export$1;
|
|
266
274
|
//#endregion
|
|
267
275
|
//#region src/components/MapZoom.vue.d.ts
|
|
@@ -316,4 +324,4 @@ declare const plugin: {
|
|
|
316
324
|
install(app: App): void;
|
|
317
325
|
};
|
|
318
326
|
//#endregion
|
|
319
|
-
export { _default as
|
|
327
|
+
export { _default as MapBase, _default$1 as MapFeature, _default$2 as MapFeatures, _default$3 as MapGraticule, _default$4 as MapMarker, _default$5 as MapMesh, _default$6 as MapZoom, UseMapObjectResult, mapContextKey, plugin, useMapContext, useMapObject };
|
package/dist/index.iife.js
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`);function s(){return(0,n.inject)(o)}let c=[`viewBox`];var l=(0,n.defineComponent)({__name:`
|
|
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:`MapBase`,props:{width:{},height:{},aspectRatio:{},projection:{type:Function},projectionConfig:{},data:{},dataTransformer:{type:Function}},setup(e){let t=e,i=(0,n.computed)(()=>(0,r.makeMapContext)({width:t.width,height:t.height,aspectRatio:t.aspectRatio,projection:t.projection,projectionConfig:t.projectionConfig,data:t.data,dataTransformer:t.dataTransformer}));return(0,n.provide)(o,i),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,(0,n.mergeProps)({viewBox:`0 0 ${i.value.width} ${i.value.height}`},e.$attrs,{class:`d3-map`}),[(0,n.renderSlot)(e.$slots,`default`,(0,n.normalizeProps)((0,n.guardReactiveProps)(i.value)))],16,c))}});let u=Symbol(`InsideZoom`);function d(){return(0,n.inject)(u,!1)}function f(e){let t=(0,n.ref)(`default`),{onMouseenter:i,onMouseleave:a,onMouseup:o,onMousedown:s,dispose:c}=(0,r.useMapObjectEvents)(e=>{t.value=e},d());return(0,n.onBeforeUnmount)(()=>{c()}),{style:(0,n.computed)(()=>(0,r.resolveObjectStyle)(t.value,(0,n.unref)(e))),onMouseenter:i,onMouseleave:a,onMousedown:s,onMouseup:o}}let p=[`d`];var m=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{}},setup(e){let t=e,{style:r,...i}=f((0,n.toRef)(t,`styles`)),a=s(),o=(0,n.computed)(()=>a?.value.path(t.data)??void 0);return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:o.value,style:(0,n.unref)(r)},i,{name:`feature`}),null,16,p))}});let h={name:`features`};var g=(0,n.defineComponent)({__name:`MapFeatures`,props:{idKey:{default:`id`},styles:{}},setup(e){let t=s(),i=(0,n.computed)(()=>t?.value.features??[]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,h,[(0,n.renderSlot)(t.$slots,`default`,{features:i.value},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.value,(t,i)=>((0,n.openBlock)(),(0,n.createBlock)(m,{key:(0,n.unref)(r.getFeatureKey)(t,e.idKey,i),data:t,styles:e.styles},null,8,[`data`,`styles`]))),128))])]))}});let _=[`d`,`fill`],v=[`d`],y=[`d`,`stroke`];var b=(0,n.defineComponent)({inheritAttrs:!1,__name:`MapGraticule`,props:{config:{},background:{type:[Boolean,String]},border:{type:[Boolean,String]},styles:{}},setup(e){let t=e,i=s(),a=(0,n.useAttrs)(),o=(0,n.computed)(()=>{if(i?.value)return(0,r.renderGraticule)(i.value,t.config)??void 0}),c=(0,n.computed)(()=>{if(i?.value)return(0,r.renderOutline)(i.value)??void 0}),l=(0,n.computed)(()=>(0,r.isString)(t.background)?t.background:void 0),u=(0,n.computed)(()=>(0,r.isString)(t.border)?t.border:void 0),{style:d,...p}=f((0,n.toRef)(t,`styles`));return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,null,[e.background?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:0,d:c.value,fill:l.value,"pointer-events":`none`,name:`background`},null,8,_)):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`path`,(0,n.mergeProps)({d:o.value,fill:`none`,style:(0,n.unref)(d)},(0,n.mergeProps)(p,(0,n.unref)(a)),{name:`graticule`}),null,16,v),e.border?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:1,d:c.value,fill:`none`,stroke:u.value,"pointer-events":`none`,name:`border`},null,8,y)):(0,n.createCommentVNode)(`v-if`,!0)]))}});let x=[`transform`];var S=(0,n.defineComponent)({__name:`MapMarker`,props:{coordinates:{default:()=>[0,0]},styles:{}},setup(e){let t=e,i=s(),a=(0,n.computed)(()=>(0,r.getMarkerTransform)(i?.value,t.coordinates)),{style:o,...c}=f((0,n.toRef)(t,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,(0,n.mergeProps)({transform:a.value,style:(0,n.unref)(o)},c,{name:`marker`}),[(0,n.renderSlot)(e.$slots,`default`)],16,x))}});let C=[`d`];var w=(0,n.defineComponent)({__name:`MapMesh`,props:{styles:{}},setup(e){let t=e,r=s(),i=(0,n.computed)(()=>r?.value.renderMesh()??void 0),{style:a,...o}=f((0,n.toRef)(t,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:i.value,fill:`none`,style:(0,n.unref)(a)},o,{name:`mesh`}),null,16,C))}}),T=(0,n.defineComponent)({__name:`MapZoom`,props:{center:{default:()=>[0,0]},zoom:{default:1},minZoom:{default:1},maxZoom:{default:8},config:{}},emits:[`zoomstart`,`zoom`,`zoomend`],setup(e,{expose:t,emit:i}){let a=e,o=i,c=(0,n.ref)(null),l=s();(0,n.provide)(u,!0);let d=(0,n.computed)(()=>(0,r.createZoomBehavior)(l?.value,{minZoom:a.minZoom,maxZoom:a.maxZoom,config:a.config,onZoomStart:e=>o(`zoomstart`,e),onZoom:e=>{(0,r.applyZoomGroupTransform)(c.value,e.transform),o(`zoom`,e)},onZoomEnd:e=>o(`zoomend`,e)}));return(0,n.onMounted)(()=>{(0,n.watch)(d,e=>{c.value&&(0,r.setupZoom)({element:c.value,behavior:e,center:a.center,zoom:a.zoom})},{immediate:!0}),(0,n.watch)(()=>[d.value,a.center[0],a.center[1],a.zoom],()=>{c.value&&(0,r.applyZoomTransform)({element:c.value,behavior:d.value,center:a.center,zoom:a.zoom})})}),t({container:c,zoomBehavior:d}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{ref_key:`container`,ref:c,name:`zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),E=a({MapBase:()=>l,MapFeature:()=>m,MapFeatures:()=>g,MapGraticule:()=>b,MapMarker:()=>S,MapMesh:()=>w,MapZoom:()=>T});e.MapBase=l,e.MapFeature=m,e.MapFeatures=g,e.MapGraticule=b,e.MapMarker=S,e.MapMesh=w,e.MapZoom=T,e.mapContextKey=o,e.plugin={install(e){Object.entries(E).forEach(([t,n])=>{e.component(t,n)})}},e.useMapContext=s,e.useMapObject=f})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,Vue,D3Maps);
|
package/dist/index.js
CHANGED
|
@@ -26,10 +26,10 @@ function useMapContext() {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
//#endregion
|
|
29
|
-
//#region src/components/
|
|
29
|
+
//#region src/components/MapBase.vue?vue&type=script&setup=true&lang.ts
|
|
30
30
|
const _hoisted_1$5 = ["viewBox"];
|
|
31
|
-
var
|
|
32
|
-
__name: "
|
|
31
|
+
var MapBase_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
32
|
+
__name: "MapBase",
|
|
33
33
|
props: {
|
|
34
34
|
width: {},
|
|
35
35
|
height: {},
|
|
@@ -58,8 +58,8 @@ var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
|
|
|
58
58
|
});
|
|
59
59
|
|
|
60
60
|
//#endregion
|
|
61
|
-
//#region src/components/
|
|
62
|
-
var
|
|
61
|
+
//#region src/components/MapBase.vue
|
|
62
|
+
var MapBase_default = MapBase_vue_vue_type_script_setup_true_lang_default;
|
|
63
63
|
|
|
64
64
|
//#endregion
|
|
65
65
|
//#region src/hooks/useInsideZoom.ts
|
|
@@ -337,7 +337,7 @@ var MapZoom_default = MapZoom_vue_vue_type_script_setup_true_lang_default;
|
|
|
337
337
|
//#endregion
|
|
338
338
|
//#region src/components/index.ts
|
|
339
339
|
var components_exports = /* @__PURE__ */ __exportAll({
|
|
340
|
-
|
|
340
|
+
MapBase: () => MapBase_default,
|
|
341
341
|
MapFeature: () => MapFeature_default,
|
|
342
342
|
MapFeatures: () => MapFeatures_default,
|
|
343
343
|
MapGraticule: () => MapGraticule_default,
|
|
@@ -358,4 +358,4 @@ const plugin = { install(app) {
|
|
|
358
358
|
} };
|
|
359
359
|
|
|
360
360
|
//#endregion
|
|
361
|
-
export {
|
|
361
|
+
export { MapBase_default as MapBase, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapGraticule_default as MapGraticule, MapMarker_default as MapMarker, MapMesh_default as MapMesh, MapZoom_default as MapZoom, mapContextKey, plugin, useMapContext, useMapObject };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@d3-maps/vue",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.7.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.7.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/geojson": "^7946.0.16",
|