npm - @d3-maps/vue - Versions diffs - 0.1.0 - Mend

@d3-maps/vue 0.1.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.

Files changed (6) hide show

package/LICENCE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright © 2026 Georgii Bukharov
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,52 @@
+# @d3-maps/vue
+`@d3-maps/vue` provides Vue bindings for `@d3-maps/core` to build SVG maps with Vue, [d3](https://github.com/d3/d3) and [TopoJSON-client](https://github.com/TopoJSON/TopoJSON-client).
+[docs](https://d3-maps.netlify.app/guide/) | [examples](https://d3-maps.netlify.app/examples/) _(being updated for the new package name)_
+## Installation
+npm
+```bash
+npm install @d3-maps/vue
+```
+pnpm
+```bash
+pnpm add @d3-maps/vue
+```
+bun
+```bash
+bun add @d3-maps/vue
+```
+## Usage
+```js
+import { createApp } from 'vue'
+import { plugin as D3MapsVue } from '@d3-maps/vue'
+import App from './App.vue'
+createApp(App)
+  .use(D3MapsVue)
+  .mount('#app')
+```
+_Nuxt 3_ \
+Create `~/plugins/d3-maps-vue.client.ts`:
+```ts
+import { plugin as D3MapsVue } from '@d3-maps/vue'
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(D3MapsVue)
+})
+```
+## License
+MIT licensed. Copyright © 2020 Georgii Bukharov. See [LICENSE](./LICENSE) for more details.

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,112 @@
+import "@d3-maps/core/index.css";
+import * as vue16 from "vue";
+import { App, StyleValue } from "vue";
+import * as _d3_maps_core0 from "@d3-maps/core";
+import { MapConfig, MapContext, MapFeatureProps, MapMarkerProps, ZoomEvent, ZoomProps } from "@d3-maps/core";
+//#region src/components/Map.vue.d.ts
+type __VLS_Slots$3 = {
+  default?: (props: MapContext) => unknown;
+};
+declare const __VLS_base$3: vue16.DefineComponent<MapConfig, {}, {}, {}, {}, vue16.ComponentOptionsMixin, vue16.ComponentOptionsMixin, {}, string, vue16.PublicProps, Readonly<MapConfig> & Readonly<{}>, {}, {}, {}, {}, string, vue16.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$4: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
+declare const _default: typeof __VLS_export$4;
+type __VLS_WithSlots$3<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/MapFeature.vue.d.ts
+type __VLS_Props$2 = MapFeatureProps<StyleValue>;
+declare const __VLS_export$3: vue16.DefineComponent<__VLS_Props$2, {}, {}, {}, {}, vue16.ComponentOptionsMixin, vue16.ComponentOptionsMixin, {} & {
+  [x: string]: any;
+}, string, vue16.PublicProps, Readonly<__VLS_Props$2> & Readonly<{
+  [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, vue16.ComponentProvideOptions, false, {}, any>;
+declare const _default$1: typeof __VLS_export$3;
+//#endregion
+//#region src/components/MapFeatures.vue.d.ts
+interface Props {
+  idKey?: string;
+  fill?: string;
+  stroke?: string;
+}
+declare var __VLS_1$2: {
+  features: _d3_maps_core0.MapFeature[];
+};
+type __VLS_Slots$2 = {} & {
+  default?: (props: typeof __VLS_1$2) => any;
+};
+declare const __VLS_base$2: vue16.DefineComponent<Props, {}, {}, {}, {}, vue16.ComponentOptionsMixin, vue16.ComponentOptionsMixin, {}, string, vue16.PublicProps, Readonly<Props> & Readonly<{}>, {
+  idKey: string;
+}, {}, {}, {}, string, vue16.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$2: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
+declare const _default$2: typeof __VLS_export$2;
+type __VLS_WithSlots$2<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/MapMarker.vue.d.ts
+type __VLS_Props$1 = MapMarkerProps<StyleValue>;
+declare var __VLS_1$1: {};
+type __VLS_Slots$1 = {} & {
+  default?: (props: typeof __VLS_1$1) => any;
+};
+declare const __VLS_base$1: vue16.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue16.ComponentOptionsMixin, vue16.ComponentOptionsMixin, {} & {
+  [x: string]: any;
+}, string, vue16.PublicProps, Readonly<__VLS_Props$1> & Readonly<{
+  [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+}>, {
+  coordinates: _d3_maps_core0.MapMarkerCoordinates;
+}, {}, {}, {}, string, vue16.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
+declare const _default$3: typeof __VLS_export$1;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/MapZoom.vue.d.ts
+type __VLS_Props = ZoomProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: vue16.DefineComponent<__VLS_Props, {
+  container: vue16.Ref<SVGGElement | null, SVGGElement | null>;
+  zoomBehavior: vue16.ComputedRef<_d3_maps_core0.ZoomBehavior<SVGSVGElement, unknown>>;
+}, {}, {}, {}, vue16.ComponentOptionsMixin, vue16.ComponentOptionsMixin, {} & {
+  zoom: (payload: ZoomEvent) => any;
+  zoomstart: (payload: ZoomEvent) => any;
+  zoomend: (payload: ZoomEvent) => any;
+}, string, vue16.PublicProps, Readonly<__VLS_Props> & Readonly<{
+  onZoom?: ((payload: ZoomEvent) => any) | undefined;
+  onZoomstart?: ((payload: ZoomEvent) => any) | undefined;
+  onZoomend?: ((payload: ZoomEvent) => any) | undefined;
+}>, {
+  center: [number, number];
+  zoom: number;
+  minZoom: number;
+  maxZoom: number;
+}, {}, {}, {}, string, vue16.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default$4: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/plugin.d.ts
+/**
+ * Vue plugin that registers all d3-maps components globally.
+ */
+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 MapZoom, plugin };

package/dist/index.iife.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.js ADDED Viewed

@@ -0,0 +1,310 @@
+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, withCtx } from "vue";
+import { applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, resolveObjectStyle, setupZoom } from "@d3-maps/core";
+//#region rolldown:runtime
+var __defProp = Object.defineProperty;
+var __exportAll = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+//#endregion
+//#region src/components/MapContext.ts
+const mapContextKey = Symbol("MapContext");
+const MapProvider = defineComponent((props, { slots }) => {
+	provide(mapContextKey, props.context);
+	return () => slots.default?.() ?? null;
+}, { props: { context: {
+	type: Object,
+	required: true
+} } });
+const MapConsumer = defineComponent({
+	name: "MapConsumer",
+	setup(_, { slots }) {
+		const context = inject(mapContextKey);
+		return () => {
+			if (!slots.default) return null;
+			return slots.default(context ?? {});
+		};
+	}
+});
+function useMapContext() {
+	return inject(mapContextKey);
+}
+//#endregion
+//#region src/components/Map.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = ["viewBox"];
+var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Map",
+	props: {
+		width: {},
+		height: {},
+		aspectRatio: {},
+		projection: { type: Function },
+		projectionConfig: {},
+		data: {},
+		dataTransformer: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const context = computed(() => makeMapContext({
+			width: props.width,
+			height: props.height,
+			aspectRatio: props.aspectRatio,
+			projection: props.projection,
+			projectionConfig: props.projectionConfig,
+			data: props.data,
+			dataTransformer: props.dataTransformer
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(MapProvider), { context: context.value }, {
+				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$2))]),
+				_: 3
+			}, 8, ["context"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Map.vue
+var Map_default = Map_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+//#region src/lib/useMapObject.ts
+function useMapObject(emit, styles) {
+	const state = ref("default");
+	const eventCallbackFactory = (eventName) => ((event) => {
+		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")
+	};
+}
+//#endregion
+//#region src/components/MapFeature.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"d",
+	"fill",
+	"stroke"
+];
+var MapFeature_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "MapFeature",
+	props: {
+		data: {},
+		styles: {},
+		fill: {},
+		stroke: {}
+	},
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const context = useMapContext();
+		const path = computed(() => context?.renderPath(props.data));
+		const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
+		return (_ctx, _cache) => {
+			return path.value ? (openBlock(), createElementBlock("path", mergeProps({
+				key: 0,
+				d: path.value,
+				style: unref(computedStyle),
+				fill: __props.fill,
+				stroke: __props.stroke,
+				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))
+			}, _ctx.$attrs), null, 16, _hoisted_1$1)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/MapFeature.vue
+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
+var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "MapFeatures",
+	props: {
+		idKey: { default: "id" },
+		fill: {},
+		stroke: {}
+	},
+	setup(__props) {
+		const context = useMapContext();
+		const features = computed(() => context?.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({
+					key: unref(getFeatureKey)(feature, __props.idKey, index),
+					data: feature,
+					fill: __props.fill,
+					stroke: __props.stroke
+				}, { ref_for: true }, _ctx.$attrs), null, 16, [
+					"data",
+					"fill",
+					"stroke"
+				]);
+			}), 128))])]);
+		};
+	}
+});
+//#endregion
+//#region src/components/MapFeatures.vue
+var MapFeatures_default = MapFeatures_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+//#region src/components/MapMarker.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["transform"];
+var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "MapMarker",
+	props: {
+		coordinates: { default: () => [0, 0] },
+		styles: {}
+	},
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const context = useMapContext();
+		const transform = computed(() => {
+			return getMarkerTransform(context, props.coordinates);
+		});
+		const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("g", {
+				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);
+		};
+	}
+});
+//#endregion
+//#region src/components/MapMarker.vue
+var MapMarker_default = MapMarker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+//#region src/components/MapZoom.vue?vue&type=script&setup=true&lang.ts
+var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "MapZoom",
+	props: {
+		center: { default: () => [0, 0] },
+		zoom: { default: 1 },
+		minZoom: { default: 1 },
+		maxZoom: { default: 8 },
+		translateExtent: {},
+		modifiers: {}
+	},
+	emits: [
+		"zoomstart",
+		"zoom",
+		"zoomend"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const container = ref(null);
+		const context = useMapContext();
+		const zoomBehavior = computed(() => {
+			return createZoomBehavior(context, {
+				minZoom: props.minZoom,
+				maxZoom: props.maxZoom,
+				translateExtent: props.translateExtent,
+				modifiers: props.modifiers,
+				onZoomStart: (event) => emit("zoomstart", event),
+				onZoom: (event) => {
+					if (container.value) container.value.setAttribute("transform", event.transform.toString());
+					emit("zoom", event);
+				},
+				onZoomEnd: (event) => emit("zoomend", event)
+			});
+		});
+		onMounted(() => {
+			watch(() => [zoomBehavior], () => setupZoom({
+				element: container.value,
+				behavior: zoomBehavior.value,
+				center: props.center,
+				zoom: props.zoom
+			}), { immediate: true });
+			watch(() => [
+				props.center[0],
+				props.center[1],
+				props.zoom
+			], () => applyZoomTransform({
+				element: container.value,
+				behavior: zoomBehavior.value,
+				center: props.center,
+				zoom: props.zoom
+			}));
+		});
+		__expose({
+			container,
+			zoomBehavior
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("g", {
+				ref_key: "container",
+				ref: container,
+				class: "d3-map-zoom"
+			}, [renderSlot(_ctx.$slots, "default")], 512);
+		};
+	}
+});
+//#endregion
+//#region src/components/MapZoom.vue
+var MapZoom_default = MapZoom_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+//#region src/components/index.ts
+var components_exports = /* @__PURE__ */ __exportAll({
+	Map: () => Map_default,
+	MapFeature: () => MapFeature_default,
+	MapFeatures: () => MapFeatures_default,
+	MapMarker: () => MapMarker_default,
+	MapZoom: () => MapZoom_default
+});
+//#endregion
+//#region src/plugin.ts
+/**
+* Vue plugin that registers all d3-maps components globally.
+*/
+const plugin = { install(app) {
+	Object.entries(components_exports).forEach(([name, component]) => {
+		app.component(name, component);
+	});
+} };
+//#endregion
+export { Map_default as Map, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapMarker_default as MapMarker, MapZoom_default as MapZoom, plugin };

package/package.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "name": "@d3-maps/vue",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "description": "Vue bindings for @d3-maps/core to build reactive D3 SVG maps",
+  "author": "Georgii Bukharov <souljorje@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://d3-maps.netlify.app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/souljorje/d3-maps.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/souljorje/d3-maps/issues"
+  },
+  "keywords": [
+    "vue",
+    "d3",
+    "svg",
+    "map"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "browser": "./dist/index.iife.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "browser": "dist/index.iife.js",
+  "unpkg": "dist/index.iife.js",
+  "jsdelivr": "dist/index.iife.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*"
+  ],
+  "peerDependencies": {
+    "vue": "3.5.25"
+  },
+  "dependencies": {
+    "@d3-maps/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/geojson": "^7946.0.16",
+    "@types/topojson-client": "^3.1.5",
+    "@types/topojson-specification": "^1.0.5",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^27.3.0",
+    "tsdown": "0.19.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.15",
+    "vue": "3.5.25",
+    "vue-tsc": "^3.2.0",
+    "unplugin-vue": "^6.0.1"
+  },
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit",
+    "build": "pnpm run typecheck && tsdown",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}