@cocoar/vue-map 2.12.0

package/dist/index.js

@@ -0,0 +1,851 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createStaticVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, inject as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, shallowRef as y, toDisplayString as b, unref as x, watch as S, withCtx as C } from "vue";
+import { CoarButton as w, CoarSelect as T, CoarTextInput as E, setCoarDragImageFromElement as D, useDragDrop as O } from "@cocoar/vue-ui";
+//#region src/context.ts
+var k = Symbol.for("coar:map-config");
+//#endregion
+//#region src/internal/map-model.ts
+function A(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e.categories ?? []) t.set(n.id, n);
+	return t;
+}
+function j(e, t) {
+	return (e.category ? A(t).get(e.category) : void 0)?.color ?? "#3b82f6";
+}
+function M(e, t) {
+	return e.icon ? e.icon : (e.category ? A(t).get(e.category) : void 0)?.emoji ?? "";
+}
+function N(e, t) {
+	let n = [];
+	return e.points.forEach((e, r) => {
+		e.kind === "stop" ? n.push({
+			index: r,
+			emoji: M(e, t) || "📍",
+			label: e.label ?? "",
+			lat: e.lat,
+			lng: e.lng
+		}) : e.label && n.push({
+			index: r,
+			emoji: "•",
+			label: e.label,
+			lat: e.lat,
+			lng: e.lng
+		});
+	}), n;
+}
+function P(e, t) {
+	let n = A(t), r = /* @__PURE__ */ new Set(), i = [];
+	for (let t of e.points) {
+		if (t.kind !== "stop" || !t.category || r.has(t.category)) continue;
+		r.add(t.category);
+		let e = n.get(t.category);
+		e && i.push(e);
+	}
+	return i;
+}
+function F(e, t) {
+	let n = new Map(t.basemaps.map((e) => [e.id, e])), r = (e) => {
+		if (!e) return;
+		let t = n.get(e);
+		return t && !t.google ? t : void 0;
+	};
+	return r(e.basemap) ?? r(t.defaultBasemap) ?? t.basemaps.find((e) => !e.google) ?? null;
+}
+function I(e) {
+	if (e.length === 0) return null;
+	let t = Infinity, n = Infinity, r = -Infinity, i = -Infinity;
+	for (let a of e) a.lat < t && (t = a.lat), a.lat > r && (r = a.lat), a.lng < n && (n = a.lng), a.lng > i && (i = a.lng);
+	return [[t, n], [r, i]];
+}
+//#endregion
+//#region src/CoarMap.vue?vue&type=script&setup=true&lang.ts
+var L = {
+	key: 0,
+	class: "coar-map__fallback"
+}, ee = { class: "coar-map__fallback-emoji" }, R = { class: "coar-map__fallback-label" }, z = { class: "coar-map__fallback-coords" }, te = {
+	key: 1,
+	class: "coar-map__legend"
+}, ne = {
+	key: 0,
+	class: "coar-map__legend-emoji"
+}, re = { class: "coar-map__legend-label" }, ie = {
+	key: 2,
+	class: "coar-map__caption"
+}, ae = {
+	key: 3,
+	class: "coar-map__nocfg"
+}, B = /* @__PURE__ */ l({
+	__name: "CoarMap",
+	props: {
+		data: {},
+		config: {},
+		selected: {},
+		showLegend: { type: Boolean }
+	},
+	emits: ["update:selected", "point-click"],
+	setup(n, { expose: o, emit: c }) {
+		let l = n, v = c, x = u(k, void 0), C = t(() => l.config ?? x ?? null), w = {
+			defaultBasemap: "",
+			basemaps: []
+		}, T = g(null), E = y(null), D = g(!1), O = /* @__PURE__ */ new Map(), A = t(() => N(l.data, C.value ?? w)), B = t(() => C.value ? P(l.data, C.value) : []), V = t(() => !!l.showLegend && B.value.length > 1);
+		function H(e) {
+			return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+		}
+		function U(e) {
+			return /[;"'<>]/.test(e) ? "#3b82f6" : e;
+		}
+		function W(e) {
+			let t = document.createElement("div");
+			if (t.className = "coar-map-popup", e.label) {
+				let n = document.createElement("strong");
+				n.textContent = e.label, t.appendChild(n);
+			}
+			if (e.note) {
+				let n = document.createElement("div");
+				n.className = "coar-map-popup__note", n.textContent = e.note, t.appendChild(n);
+			}
+			return t;
+		}
+		function G(e, t) {
+			v("update:selected", e), v("point-click", {
+				point: t,
+				index: e
+			});
+		}
+		function K(e, t, n, r, i) {
+			let a = U(j(n, i)), o = M(n, i), s = e.divIcon({
+				className: "coar-map-pin-wrap",
+				html: `<span class="coar-map-pin" style="--coar-map-pin-color:${a}"><span class="coar-map-pin__emoji">${H(o)}</span></span>`,
+				iconSize: [26, 26],
+				iconAnchor: [13, 13],
+				popupAnchor: [0, -13]
+			}), c = e.marker([n.lat, n.lng], { icon: s });
+			n.label && c.bindTooltip(H(n.label)), (n.label || n.note) && c.bindPopup(W(n)), c.on("click", () => G(r, n)), c.addTo(t), O.set(r, c);
+		}
+		function q(e, t, n, r) {
+			let i = e.circleMarker([n.lat, n.lng], {
+				radius: 4,
+				color: "#475569",
+				weight: 2,
+				fillColor: "#ffffff",
+				fillOpacity: 1
+			});
+			n.label && i.bindTooltip(H(n.label)), n.note && i.bindPopup(W(n)), i.on("click", () => G(r, n)), i.addTo(t), O.set(r, i);
+		}
+		function J() {
+			E.value &&= (E.value.remove(), null), O.clear(), D.value = !1;
+		}
+		function Y(e) {
+			return O.get(e)?.getElement?.() ?? null;
+		}
+		function X() {
+			let e = l.selected ?? null;
+			for (let t of O.keys()) Y(t)?.classList.toggle("coar-map-marker--selected", t === e);
+		}
+		async function Z() {
+			let e = T.value, t = C.value;
+			if (!e || !t) return;
+			J();
+			let n = await import("leaflet"), r = n.default ?? n;
+			if (await import("leaflet/dist/leaflet.css"), T.value !== e) return;
+			let i = r.map(e);
+			E.value = i;
+			let a = F(l.data, t);
+			a && r.tileLayer(a.url, {
+				subdomains: a.subdomains ?? "abc",
+				attribution: a.attribution,
+				maxZoom: a.maxZoom ?? 19
+			}).addTo(i);
+			let o = l.data.points;
+			l.data.type === "route" && o.length >= 2 && r.polyline(o.map((e) => [e.lat, e.lng]), {
+				color: "#3b82f6",
+				weight: 4,
+				opacity: .85
+			}).addTo(i), o.forEach((e, n) => {
+				e.kind === "stop" ? K(r, i, e, n, t) : e.label && q(r, i, e, n);
+			});
+			let s = l.data.viewport;
+			if (s) i.setView([s.centerLat, s.centerLng], s.zoom);
+			else {
+				let e = I(o);
+				e ? i.fitBounds(e, { padding: [28, 28] }) : i.setView([0, 0], 2);
+			}
+			requestAnimationFrame(() => E.value?.invalidateSize()), D.value = !0, X();
+		}
+		function Q(e) {
+			let t = l.data.points[e];
+			!t || !E.value || (E.value.panTo([t.lat, t.lng]), O.get(e)?.openPopup(), (l.selected ?? null) !== e && v("update:selected", e));
+		}
+		function $(e) {
+			for (let t of O.keys()) Y(t)?.classList.toggle("coar-map-marker--highlight", t === e);
+		}
+		return o({
+			focusPoint: Q,
+			highlightPoint: $
+		}), m(Z), p(J), S([() => l.data, C], () => void Z(), { deep: !0 }), S(() => l.selected, X), (t, o) => (h(), i("div", { class: d(["coar-map", { "coar-map--ready": D.value }]) }, [
+			a("div", {
+				ref_key: "mapEl",
+				ref: T,
+				class: "coar-map__canvas"
+			}, null, 512),
+			D.value ? r("", !0) : (h(), i("ol", L, [(h(!0), i(e, null, _(A.value, (e, t) => (h(), i("li", {
+				key: t,
+				class: "coar-map__fallback-item"
+			}, [
+				a("span", ee, b(e.emoji), 1),
+				a("span", R, b(e.label), 1),
+				a("span", z, b(e.lat.toFixed(4)) + ", " + b(e.lng.toFixed(4)), 1)
+			]))), 128))])),
+			V.value ? (h(), i("ul", te, [(h(!0), i(e, null, _(B.value, (e) => (h(), i("li", {
+				key: e.id,
+				class: "coar-map__legend-item"
+			}, [
+				a("span", {
+					class: "coar-map__legend-swatch",
+					style: f({ background: e.color })
+				}, null, 4),
+				e.emoji ? (h(), i("span", ne, b(e.emoji), 1)) : r("", !0),
+				a("span", re, b(e.label), 1)
+			]))), 128))])) : r("", !0),
+			n.data.caption ? (h(), i("p", ie, b(n.data.caption), 1)) : r("", !0),
+			C.value ? r("", !0) : (h(), i("p", ae, [...o[0] ||= [
+				s("No map config provided (pass ", -1),
+				a("code", null, "config", -1),
+				s(" or provide one).", -1)
+			]]))
+		], 2));
+	}
+});
+//#endregion
+//#region src/internal/map-edit.ts
+function V(e, t) {
+	let n = Math.max(-90, Math.min(90, e)), r = ((t + 180) % 360 + 360) % 360 - 180;
+	return r === -180 && (r = 180), {
+		lat: n,
+		lng: r
+	};
+}
+function H(e, t, n, r) {
+	let { lat: i, lng: a } = V(e, t);
+	return {
+		kind: r,
+		...n,
+		lat: i,
+		lng: a
+	};
+}
+function U(e, t) {
+	return Number.isInteger(e) && e >= 0 && e < t;
+}
+function W(e, t) {
+	return {
+		...e,
+		points: t
+	};
+}
+function G(e, t, n, r = {}) {
+	if (e.type === "single" && e.points.length >= 1) return K(e, 0, t, n);
+	let i = H(t, n, r, "stop");
+	return W(e, [...e.points, i]);
+}
+function K(e, t, n, r) {
+	if (!U(t, e.points.length)) return e;
+	let { lat: i, lng: a } = V(n, r);
+	return W(e, e.points.map((e, n) => n === t ? {
+		...e,
+		lat: i,
+		lng: a
+	} : e));
+}
+function q(e, t, n) {
+	if (!U(t, e.points.length)) return e;
+	let r = {};
+	for (let [e, t] of Object.entries(n)) t !== void 0 && (r[e] = t);
+	if ("lat" in r || "lng" in r) {
+		let n = e.points[t], { lat: i, lng: a } = V(r.lat ?? n.lat, r.lng ?? n.lng);
+		r.lat = i, r.lng = a;
+	}
+	return W(e, e.points.map((e, n) => n === t ? {
+		...e,
+		...r
+	} : e));
+}
+function J(e, t) {
+	return U(t, e.points.length) ? W(e, e.points.filter((e, n) => n !== t)) : e;
+}
+function Y(e, t, n) {
+	let r = e.points.length;
+	if (!U(t, r) || !U(n, r) || t === n) return e;
+	let i = [...e.points], [a] = i.splice(t, 1);
+	return i.splice(n, 0, a), W(e, i);
+}
+function X(e, t, n, r, i = {}) {
+	if (!U(t, Math.max(0, e.points.length - 1))) return e;
+	let a = H(n, r, i, "stop"), o = [...e.points];
+	return o.splice(t + 1, 0, a), W(e, o);
+}
+function Z(e, t) {
+	if (t === null) {
+		let t = { ...e };
+		return delete t.viewport, t;
+	}
+	return {
+		...e,
+		viewport: t
+	};
+}
+function Q(e, t, n) {
+	return e === null ? null : e === t ? n : t < e && e <= n ? e - 1 : n <= e && e < t ? e + 1 : e;
+}
+function $(e, t) {
+	return e === null || e === t ? null : e > t ? e - 1 : e;
+}
+function oe(e, t, n, r, i, a) {
+	let o = i - n, s = a - r, c = o * o + s * s, l = c === 0 ? 0 : Math.max(0, Math.min(1, ((e - n) * o + (t - r) * s) / c)), u = n + l * o, d = r + l * s, f = e - u, p = t - d;
+	return {
+		distSq: f * f + p * p,
+		t: l
+	};
+}
+function se(e, t, n) {
+	if (e.length < 2) return null;
+	let r = {
+		segmentIndex: 0,
+		distSq: Infinity,
+		t: 0
+	};
+	for (let i = 0; i < e.length - 1; i++) {
+		let a = e[i], o = e[i + 1], { distSq: s, t: c } = oe(n, t, a.lng, a.lat, o.lng, o.lat);
+		s < r.distSq && (r = {
+			segmentIndex: i,
+			distSq: s,
+			t: c
+		});
+	}
+	let i = e[r.segmentIndex], a = e[r.segmentIndex + 1];
+	return {
+		segmentIndex: r.segmentIndex,
+		lat: i.lat + r.t * (a.lat - i.lat),
+		lng: i.lng + r.t * (a.lng - i.lng)
+	};
+}
+//#endregion
+//#region src/internal/use-map-editor.ts
+function ce(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function le(e) {
+	return /[;"'<>]/.test(e) ? "#3b82f6" : e;
+}
+function ue(e, n) {
+	let r = y(null), i = g(!1), a = null, o = /* @__PURE__ */ new Map(), s = null, c = !1, l = g(null), u = g(!1), d = t(() => {
+		let e = n.selected();
+		return e === null ? null : n.data().points[e] ?? null;
+	}), f = t(() => !n.readonly() && d.value !== null);
+	function h(e) {
+		n.emitData(e);
+	}
+	function _(e) {
+		let t = n.data().points[e];
+		t && (n.emitSelected(e), n.emitPointClick({
+			point: t,
+			index: e
+		}));
+	}
+	function v(e, t) {
+		let n = le(j(e, t)), r = M(e, t);
+		return a.divIcon({
+			className: "coar-map-pin-wrap",
+			html: `<span class="coar-map-pin" style="--coar-map-pin-color:${n}"><span class="coar-map-pin__emoji">${ce(r)}</span></span>`,
+			iconSize: [26, 26],
+			iconAnchor: [13, 13]
+		});
+	}
+	function b() {
+		return a.divIcon({
+			className: "coar-map-edit-vertex-wrap",
+			html: "<span class=\"coar-map-edit-vertex\"></span>",
+			iconSize: [14, 14],
+			iconAnchor: [7, 7]
+		});
+	}
+	function x() {
+		return n.data().points.map((e, t) => {
+			let n = o.get(t)?.getLatLng();
+			return n ? [n.lat, n.lng] : [e.lat, e.lng];
+		});
+	}
+	function C() {
+		s && s.setLatLngs(x());
+	}
+	function w(e, t, i) {
+		let s = r.value;
+		if (!s || !a) return;
+		let l = n.readonly(), u = e.kind === "stop" ? v(e, i) : b(), d = a.marker([e.lat, e.lng], {
+			icon: u,
+			draggable: !l
+		});
+		e.label && d.bindTooltip(ce(e.label)), d.on("click", () => _(t)), l || (d.on("dragstart", () => {
+			c = !0;
+		}), d.on("drag", C), d.on("dragend", () => {
+			c = !1;
+			let e = d.getLatLng();
+			h(K(n.data(), t, e.lat, e.lng));
+		})), d.addTo(s), o.set(t, d);
+	}
+	function T() {
+		for (let e of o.values()) e.remove();
+		o.clear(), s?.remove(), s = null;
+	}
+	function E() {
+		let e = r.value, t = n.config();
+		if (!e || !a || !t) return;
+		T();
+		let i = n.data(), o = n.readonly();
+		i.type === "route" && i.points.length >= 2 && (s = a.polyline(i.points.map((e) => [e.lat, e.lng]), {
+			color: "#3b82f6",
+			weight: 4,
+			opacity: .85,
+			bubblingMouseEvents: !1
+		}).addTo(e), o || s.on("click", A)), i.points.forEach((e, n) => {
+			(e.kind === "stop" || e.label || !o) && w(e, n, t);
+		}), O();
+	}
+	function D(e) {
+		return o.get(e)?.getElement() ?? null;
+	}
+	function O() {
+		let e = n.selected();
+		for (let t of o.keys()) D(t)?.classList.toggle("coar-map-marker--selected", t === e);
+	}
+	function k(e) {
+		if (!n.readonly()) {
+			if (n.selected() !== null) {
+				n.emitSelected(null);
+				return;
+			}
+			h(G(n.data(), e.latlng.lat, e.latlng.lng));
+		}
+	}
+	function A(e) {
+		if (n.readonly()) return;
+		let t = se(n.data().points, e.latlng.lat, e.latlng.lng);
+		t && (h(X(n.data(), t.segmentIndex, t.lat, t.lng)), n.emitSelected(null));
+	}
+	function N() {
+		let e = r.value, t = d.value;
+		if (!e || !t || n.readonly()) {
+			l.value = null;
+			return;
+		}
+		let i = e.latLngToContainerPoint([t.lat, t.lng]);
+		l.value = {
+			x: i.x,
+			y: i.y
+		}, u.value = i.y < 190;
+	}
+	function P(e) {
+		let t = n.selected();
+		t !== null && h(q(n.data(), t, e));
+	}
+	function L() {
+		let e = n.selected();
+		e !== null && V(e);
+	}
+	function ee(e) {
+		let t = n.selected();
+		t !== null && H(t, t + e);
+	}
+	function R() {
+		n.selected() !== null && n.emitSelected(null);
+	}
+	function z(e) {
+		e.key === "Escape" && !n.readonly() && n.selected() !== null && (e.stopPropagation(), R());
+	}
+	function te() {
+		T(), r.value &&= (r.value.remove(), null), i.value = !1;
+	}
+	async function ne() {
+		let t = e.value, o = n.config();
+		if (!t || !o) return;
+		te();
+		let s = await import("leaflet");
+		if (a = s.default ?? s, await import("leaflet/dist/leaflet.css"), e.value !== t) return;
+		let c = a.map(t);
+		r.value = c;
+		let l = n.data(), u = F(l, o);
+		u && a.tileLayer(u.url, {
+			subdomains: u.subdomains ?? "abc",
+			attribution: u.attribution,
+			maxZoom: u.maxZoom ?? 19
+		}).addTo(c), c.on("click", k), c.on("move zoom resize", N), E();
+		let d = l.viewport;
+		if (d) c.setView([d.centerLat, d.centerLng], d.zoom);
+		else {
+			let e = I(l.points);
+			e ? c.fitBounds(e, { padding: [28, 28] }) : c.setView([0, 0], 2);
+		}
+		requestAnimationFrame(() => r.value?.invalidateSize()), i.value = !0, N();
+	}
+	function re(e) {
+		let t = n.data().points[e];
+		!t || !r.value || (r.value.panTo([t.lat, t.lng]), n.selected() !== e && n.emitSelected(e));
+	}
+	function ie(e) {
+		for (let t of o.keys()) D(t)?.classList.toggle("coar-map-marker--highlight", t === e);
+	}
+	function ae(e, t, r) {
+		h(G(n.data(), e, t, r));
+	}
+	function B(e, t) {
+		h(q(n.data(), e, t));
+	}
+	function V(e) {
+		let t = n.selected();
+		h(J(n.data(), e)), n.emitSelected($(t, e));
+	}
+	function H(e, t) {
+		let r = Y(n.data(), e, t);
+		r !== n.data() && (h(r), n.emitSelected(Q(n.selected(), e, t)));
+	}
+	function U() {
+		let e = r.value;
+		if (!e) return;
+		let t = e.getCenter();
+		h(Z(n.data(), {
+			centerLat: t.lat,
+			centerLng: t.lng,
+			zoom: e.getZoom()
+		}));
+	}
+	return m(() => {
+		window.addEventListener("keydown", z), ne();
+	}), p(() => {
+		window.removeEventListener("keydown", z), te();
+	}), S(n.config, () => void ne()), S(n.data, () => {
+		c || E(), N();
+	}, { deep: !0 }), S([n.selected, n.readonly], () => {
+		O(), N();
+	}), {
+		ready: i,
+		editPos: l,
+		editBelow: u,
+		selectedPoint: d,
+		editing: f,
+		updateSelected: P,
+		removeSelected: L,
+		moveSelected: ee,
+		deselect: R,
+		focusPoint: re,
+		highlightPoint: ie,
+		addPoint: ae,
+		updatePoint: B,
+		removePoint: V,
+		reorder: H,
+		captureViewport: U
+	};
+}
+//#endregion
+//#region src/internal/MapPointForm.vue?vue&type=script&setup=true&lang.ts
+var de = { class: "coar-map-form" }, fe = { class: "coar-map-form__field" }, pe = { class: "coar-map-form__field" }, me = {
+	key: 0,
+	class: "coar-map-form__field"
+}, he = { class: "coar-map-form__field" }, ge = { class: "coar-map-form__actions" }, _e = /* @__PURE__ */ l({
+	__name: "MapPointForm",
+	props: {
+		point: {},
+		config: {},
+		type: {},
+		index: {},
+		count: {}
+	},
+	emits: [
+		"update",
+		"remove",
+		"move-up",
+		"move-down"
+	],
+	setup(n, { emit: o }) {
+		let l = n, u = o, d = t(() => l.point.kind === "stop"), f = t(() => l.type === "route" && l.count > 1), p = t(() => (l.config?.categories ?? []).map((e) => ({
+			value: e.id,
+			label: e.emoji ? `${e.emoji} ${e.label}` : e.label
+		})));
+		function m(e, t) {
+			u("update", { [e]: t === "" ? void 0 : t });
+		}
+		function g(e) {
+			u("update", { category: e || void 0 });
+		}
+		return (t, o) => (h(), i("div", de, [
+			a("label", fe, [o[8] ||= a("span", { class: "coar-map-form__label" }, "Label", -1), c(x(E), {
+				"model-value": n.point.label ?? "",
+				size: "s",
+				"onUpdate:modelValue": o[0] ||= (e) => m("label", e)
+			}, null, 8, ["model-value"])]),
+			a("label", pe, [o[9] ||= a("span", { class: "coar-map-form__label" }, "Note", -1), c(x(E), {
+				"model-value": n.point.note ?? "",
+				rows: 2,
+				size: "s",
+				"onUpdate:modelValue": o[1] ||= (e) => m("note", e)
+			}, null, 8, ["model-value"])]),
+			d.value ? (h(), i(e, { key: 0 }, [p.value.length ? (h(), i("label", me, [o[10] ||= a("span", { class: "coar-map-form__label" }, "Category", -1), c(x(T), {
+				"model-value": n.point.category ?? null,
+				options: p.value,
+				size: "s",
+				clearable: "",
+				placeholder: "None",
+				"onUpdate:modelValue": o[2] ||= (e) => g(e)
+			}, null, 8, ["model-value", "options"])])) : r("", !0), a("label", he, [o[11] ||= a("span", { class: "coar-map-form__label" }, "Icon", -1), c(x(E), {
+				"model-value": n.point.icon ?? "",
+				size: "s",
+				placeholder: "emoji",
+				"onUpdate:modelValue": o[3] ||= (e) => m("icon", e)
+			}, null, 8, ["model-value"])])], 64)) : r("", !0),
+			a("div", ge, [
+				c(x(w), {
+					variant: "secondary",
+					size: "s",
+					onClick: o[4] ||= (e) => u("update", { kind: d.value ? "shape" : "stop" })
+				}, {
+					default: C(() => [s(b(d.value ? "Make vertex" : "Make stop"), 1)]),
+					_: 1
+				}),
+				f.value ? (h(), i(e, { key: 0 }, [c(x(w), {
+					variant: "tertiary",
+					size: "s",
+					disabled: n.index === 0,
+					"aria-label": "Move earlier",
+					onClick: o[5] ||= (e) => u("move-up")
+				}, {
+					default: C(() => [...o[12] ||= [s("↑", -1)]]),
+					_: 1
+				}, 8, ["disabled"]), c(x(w), {
+					variant: "tertiary",
+					size: "s",
+					disabled: n.index === n.count - 1,
+					"aria-label": "Move later",
+					onClick: o[6] ||= (e) => u("move-down")
+				}, {
+					default: C(() => [...o[13] ||= [s("↓", -1)]]),
+					_: 1
+				}, 8, ["disabled"])], 64)) : r("", !0),
+				c(x(w), {
+					class: "coar-map-form__delete",
+					variant: "danger",
+					size: "s",
+					onClick: o[7] ||= (e) => u("remove")
+				}, {
+					default: C(() => [...o[14] ||= [s(" Delete ", -1)]]),
+					_: 1
+				})
+			])
+		]));
+	}
+}), ve = { class: "coar-map-editor__stage" }, ye = { class: "coar-map-edit-popup__close" }, be = {
+	key: 0,
+	class: "coar-map__caption"
+}, xe = {
+	key: 1,
+	class: "coar-map__nocfg"
+}, Se = /* @__PURE__ */ l({
+	__name: "CoarMapEditor",
+	props: {
+		data: {},
+		config: {},
+		selected: {},
+		readonly: { type: Boolean }
+	},
+	emits: [
+		"update:data",
+		"update:selected",
+		"point-click"
+	],
+	setup(e, { expose: n, emit: o }) {
+		let l = e, p = o, m = u(k, void 0), _ = t(() => l.config ?? m ?? null), y = g(null), { ready: S, editPos: T, editBelow: E, selectedPoint: D, editing: O, updateSelected: A, removeSelected: j, moveSelected: M, deselect: N, focusPoint: P, highlightPoint: F, addPoint: I, updatePoint: L, removePoint: ee, reorder: R, captureViewport: z } = ue(y, {
+			data: () => l.data,
+			config: () => _.value,
+			selected: () => l.selected ?? null,
+			readonly: () => !!l.readonly,
+			emitData: (e) => p("update:data", e),
+			emitSelected: (e) => p("update:selected", e),
+			emitPointClick: (e) => p("point-click", e)
+		});
+		return n({
+			focusPoint: P,
+			highlightPoint: F,
+			addPoint: I,
+			updatePoint: L,
+			removePoint: ee,
+			reorder: R,
+			captureViewport: z
+		}), (t, n) => (h(), i("div", { class: d(["coar-map coar-map-editor", { "coar-map--ready": x(S) }]) }, [
+			a("div", ve, [a("div", {
+				ref_key: "mapEl",
+				ref: y,
+				class: "coar-map__canvas"
+			}, null, 512), x(O) && x(T) && x(D) && e.selected != null ? (h(), i("div", {
+				key: 0,
+				class: d(["coar-map-edit-popup", { "coar-map-edit-popup--below": x(E) }]),
+				style: f({
+					left: `${x(T).x}px`,
+					top: `${x(T).y}px`
+				})
+			}, [a("div", ye, [c(x(w), {
+				variant: "ghost",
+				size: "xs",
+				"aria-label": "Close",
+				onClick: x(N)
+			}, {
+				default: C(() => [...n[2] ||= [s("×", -1)]]),
+				_: 1
+			}, 8, ["onClick"])]), v(t.$slots, "point-form", {
+				point: x(D),
+				index: e.selected,
+				update: x(A),
+				remove: x(j),
+				moveUp: () => x(M)(-1),
+				moveDown: () => x(M)(1)
+			}, () => [c(_e, {
+				point: x(D),
+				config: _.value,
+				type: e.data.type,
+				index: e.selected,
+				count: e.data.points.length,
+				onUpdate: x(A),
+				onRemove: x(j),
+				onMoveUp: n[0] ||= (e) => x(M)(-1),
+				onMoveDown: n[1] ||= (e) => x(M)(1)
+			}, null, 8, [
+				"point",
+				"config",
+				"type",
+				"index",
+				"count",
+				"onUpdate",
+				"onRemove"
+			])])], 6)) : r("", !0)]),
+			e.data.caption ? (h(), i("p", be, b(e.data.caption), 1)) : r("", !0),
+			_.value ? r("", !0) : (h(), i("p", xe, [...n[3] ||= [
+				s("No map config provided (pass ", -1),
+				a("code", null, "config", -1),
+				s(" or provide one).", -1)
+			]]))
+		], 2));
+	}
+}), Ce = ["onDragover", "onDrop"], we = ["onDragstart"], Te = ["onClick", "onMouseenter"], Ee = { class: "coar-map-point-list__emoji" }, De = { class: "coar-map-point-list__label" }, Oe = { class: "coar-map-point-list__coords" }, ke = {
+	key: 0,
+	class: "coar-map-point-list__empty"
+}, Ae = /* @__PURE__ */ l({
+	__name: "CoarMapPointList",
+	props: {
+		data: {},
+		selected: {},
+		config: {},
+		reorderable: { type: Boolean },
+		removable: { type: Boolean }
+	},
+	emits: [
+		"update:data",
+		"update:selected",
+		"focus",
+		"highlight"
+	],
+	setup(c, { emit: l }) {
+		let u = c, f = l, p = g(null), m = O({ onDropAccept: ({ items: e, insertIndex: t }) => {
+			let n = e[0];
+			n == null || t == null || k(n, t);
+		} }), y = t(() => u.data.points);
+		function S(e) {
+			return e.kind === "stop" ? u.config ? M(e, u.config) || "📍" : e.icon || "📍" : "◇";
+		}
+		function T(e) {
+			return e.label || (e.kind === "shape" ? "(vertex)" : "(unnamed stop)");
+		}
+		function E(e) {
+			f("update:selected", e), f("focus", e);
+		}
+		function k(e, t) {
+			let n = t > e ? t - 1 : t;
+			n = Math.max(0, Math.min(y.value.length - 1, n)), n !== e && (f("update:data", Y(u.data, e, n)), f("update:selected", Q(u.selected ?? null, e, n)));
+		}
+		function A(e) {
+			f("update:data", J(u.data, e)), f("update:selected", $(u.selected ?? null, e));
+		}
+		function j(e, t) {
+			let n = e.currentTarget?.closest(".coar-map-point-list__row");
+			n instanceof HTMLElement && D(e, n), m.startDrag(e, [t]);
+		}
+		function N(e, t) {
+			if (m.onDragOver(e), !m.isDragging.value) return;
+			let n = e.currentTarget.getBoundingClientRect();
+			p.value = {
+				index: t,
+				after: e.clientY > n.top + n.height / 2
+			};
+		}
+		function P(e, t) {
+			let n = p.value?.index === t ? p.value.after : !1;
+			m.onDrop(e, { insertIndex: n ? t + 1 : t }), p.value = null;
+		}
+		function F() {
+			m.endDrag(), p.value = null;
+		}
+		function I(e) {
+			return !!p.value && m.isDragging.value && p.value.index === e && !p.value.after;
+		}
+		function L(e) {
+			return !!p.value && m.isDragging.value && p.value.index === e && p.value.after;
+		}
+		return (t, l) => (h(), i("ul", {
+			class: "coar-map-point-list",
+			onDragleave: l[1] ||= (e) => x(m).onDragLeave(e)
+		}, [(h(!0), i(e, null, _(y.value, (e, u) => (h(), i("li", {
+			key: u,
+			class: d(["coar-map-point-list__row", {
+				"coar-map-point-list__row--selected": c.selected === u,
+				"coar-map-point-list__row--drop-before": I(u),
+				"coar-map-point-list__row--drop-after": L(u)
+			}]),
+			onDragover: (e) => c.reorderable && N(e, u),
+			onDrop: (e) => c.reorderable && P(e, u)
+		}, [
+			c.reorderable ? (h(), i("button", {
+				key: 0,
+				type: "button",
+				class: "coar-map-point-list__handle",
+				"aria-label": "Drag to reorder",
+				draggable: "true",
+				onDragstart: (e) => j(e, u),
+				onDragend: F
+			}, [...l[2] ||= [o("<svg viewBox=\"0 0 10 16\" width=\"10\" height=\"16\" aria-hidden=\"true\"><circle cx=\"2.5\" cy=\"3\" r=\"1.2\"></circle><circle cx=\"7.5\" cy=\"3\" r=\"1.2\"></circle><circle cx=\"2.5\" cy=\"8\" r=\"1.2\"></circle><circle cx=\"7.5\" cy=\"8\" r=\"1.2\"></circle><circle cx=\"2.5\" cy=\"13\" r=\"1.2\"></circle><circle cx=\"7.5\" cy=\"13\" r=\"1.2\"></circle></svg>", 1)]], 40, we)) : r("", !0),
+			a("button", {
+				type: "button",
+				class: "coar-map-point-list__main",
+				onClick: (e) => E(u),
+				onMouseenter: (e) => f("highlight", u),
+				onMouseleave: l[0] ||= (e) => f("highlight", null)
+			}, [v(t.$slots, "row", {
+				point: e,
+				index: u,
+				selected: c.selected === u
+			}, () => [
+				a("span", Ee, b(S(e)), 1),
+				a("span", De, b(T(e)), 1),
+				a("span", Oe, b(e.lat.toFixed(3)) + ", " + b(e.lng.toFixed(3)), 1)
+			])], 40, Te),
+			c.removable ? (h(), n(x(w), {
+				key: 1,
+				class: "coar-map-point-list__delete",
+				variant: "ghost",
+				size: "xs",
+				"aria-label": "Delete point",
+				onClick: (e) => A(u)
+			}, {
+				default: C(() => [...l[3] ||= [s("✕", -1)]]),
+				_: 1
+			}, 8, ["onClick"])) : r("", !0)
+		], 42, Ce))), 128)), y.value.length ? r("", !0) : (h(), i("li", ke, "No points yet."))], 32));
+	}
+});
+//#endregion
+export { k as COAR_MAP_CONFIG_KEY, B as CoarMap, Se as CoarMapEditor, Ae as CoarMapPointList, G as addPointForType, I as boundsOf, A as categoryMap, N as fallbackEntries, X as insertOnSegment, P as legendCategories, K as movePoint, se as nearestSegment, V as normalizeLatLng, J as removePoint, Y as reorderPoint, F as resolveBasemap, $ as selectionAfterRemove, Q as selectionAfterReorder, Z as setViewport, j as stopColor, M as stopEmoji, q as updatePoint };