@nxgt/material-vue 0.20.0 → 0.21.0

package/dist/map.js

@@ -0,0 +1,363 @@
+import { t as e } from "./utils-Cy-ByIEo.js";
+import { r as t, t as n } from "./icon-button-Ghucx7Ah.js";
+import { a as r, c as i, d as a, f as o, i as s, n as c, o as l, r as u, s as d, t as f, u as p } from "./HoverCardTrigger-CftN4TfW.js";
+import { computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createSlots as y, createTextVNode as b, createVNode as x, defineComponent as S, inject as C, isRef as w, mergeProps as T, normalizeClass as E, openBlock as D, ref as O, renderSlot as k, toDisplayString as A, unref as j, withCtx as M } from "vue";
+import { useGeolocation as N } from "@vueuse/core";
+import { MapPin as P } from "lucide-vue-next";
+import { useField as F } from "vee-validate";
+import { LControlZoom as I, LIcon as L, LMap as R, LMarker as z, LPopup as B, LTileLayer as V, LTooltip as H } from "@vue-leaflet/vue-leaflet";
+//#region lib/map/components/consts.ts
+var U = {
+	bottomleft: "leaflet-bottom leaflet-left",
+	bottomright: "leaflet-bottom leaflet-right",
+	topleft: "leaflet-top leaflet-left",
+	topright: "leaflet-top leaflet-right"
+};
+//#endregion
+//#region lib/map/use-geolocation.ts
+function W(e = {}) {
+	let { coords: t, locatedAt: n, error: r, resume: i, pause: a } = N({
+		enableHighAccuracy: e.enableHighAccuracy ?? !1,
+		timeout: e.timeout ?? 5e3,
+		maximumAge: e.maximumAge ?? 0,
+		immediate: e.immediate ?? !0
+	});
+	return {
+		coords: m(() => {
+			let { latitude: e, longitude: n } = t.value;
+			return Number.isNaN(e) || Number.isNaN(n) ? null : {
+				latitude: e,
+				longitude: n
+			};
+		}),
+		locatedAt: n,
+		error: r,
+		resume: i,
+		pause: a
+	};
+}
+//#endregion
+//#region lib/map/components/map.vue
+var G = /* @__PURE__ */ S({
+	__name: "map",
+	props: {
+		center: {},
+		zoom: { default: 13 },
+		zoomControl: {
+			type: Boolean,
+			default: !1
+		},
+		scrollWheelZoom: {
+			type: Boolean,
+			default: !1
+		},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, { coords: r } = W(), i = m(() => n.center ?? [r.value?.latitude ?? 5.44087, r.value?.longitude ?? 10.06843]);
+		return (r, a) => (D(), h(j(R), {
+			center: i.value,
+			zoom: t.zoom,
+			"use-global-leaflet": !1,
+			options: {
+				zoomControl: t.zoomControl,
+				scrollWheelZoom: t.scrollWheelZoom
+			},
+			class: E(j(e)("size-full ring-1 ring-primary rounded", n.class))
+		}, {
+			default: M(() => [
+				x(j(V), {
+					url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+					attribution: "© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
+					"layer-type": "base"
+				}),
+				x(j(I), { position: "topleft" }),
+				k(r.$slots, "default")
+			]),
+			_: 3
+		}, 8, [
+			"center",
+			"zoom",
+			"options",
+			"class"
+		]));
+	}
+}), K = /* @__PURE__ */ S({
+	__name: "marker",
+	props: {
+		position: {},
+		draggable: {
+			type: Boolean,
+			default: !1
+		},
+		reference: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let n = t;
+		return (t, r) => (D(), h(j(z), {
+			"lat-lng": e.position,
+			draggable: e.draggable,
+			onMoveend: r[0] ||= (e) => n("change", e.target.getLatLng())
+		}, {
+			default: M(() => [
+				e.reference || t.$slots.icon ? (D(), h(j(L), {
+					key: 0,
+					"icon-anchor": [12, 24]
+				}, {
+					default: M(() => [k(t.$slots, "icon", {}, () => [x(j(P), {
+						class: "size-6 text-primary",
+						"aria-hidden": "true"
+					})])]),
+					_: 3
+				})) : g("", !0),
+				t.$slots.popup ? (D(), h(j(B), { key: 1 }, {
+					default: M(() => [k(t.$slots, "popup")]),
+					_: 3
+				})) : g("", !0),
+				t.$slots.tooltip ? (D(), h(j(H), { key: 2 }, {
+					default: M(() => [k(t.$slots, "tooltip")]),
+					_: 3
+				})) : g("", !0)
+			]),
+			_: 3
+		}, 8, ["lat-lng", "draggable"]));
+	}
+}), q = /* @__PURE__ */ S({
+	__name: "location-preview",
+	props: {
+		position: {},
+		name: {}
+	},
+	setup(e) {
+		let t = e;
+		return (r, i) => (D(), h(u, null, {
+			default: M(() => [x(f, { "as-child": "" }, {
+				default: M(() => [k(r.$slots, "default", {}, () => [x(n, {
+					name: "map",
+					"aria-label": t.name ?? "Preview location"
+				}, null, 8, ["aria-label"])])]),
+				_: 3
+			}), x(c, { class: "p-0 overflow-hidden w-72" }, {
+				default: M(() => [x(G, {
+					center: e.position,
+					zoom: 15,
+					class: "h-48 rounded-none ring-0"
+				}, {
+					default: M(() => [x(K, {
+						reference: "",
+						position: e.position
+					}, y({ _: 2 }, [t.name ? {
+						name: "tooltip",
+						fn: M(() => [b(A(t.name), 1)]),
+						key: "0"
+					} : void 0]), 1032, ["position"])]),
+					_: 1
+				}, 8, ["center"])]),
+				_: 1
+			})]),
+			_: 3
+		}));
+	}
+}), J = /* @__PURE__ */ S({
+	__name: "location-field",
+	props: {
+		modelValue: {},
+		closeLabel: {},
+		dialogTitle: {},
+		mapClass: {},
+		readOnly: { type: Boolean },
+		label: {},
+		helperText: {},
+		error: { type: Boolean },
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {},
+		name: {},
+		placeholder: {},
+		type: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(c, { emit: u }) {
+		let f = c, g = u, _ = O(!1), v = m(() => [f.modelValue?.[0] ?? 5.44087, f.modelValue?.[1] ?? 10.06843]), y = (e) => {
+			g("update:modelValue", [Number.parseFloat(e.lat.toFixed(7)), Number.parseFloat(e.lng.toFixed(7))]);
+		};
+		return (u, m) => (D(), h(o, T(f, {
+			"model-value": v.value.join(" - "),
+			readonly: ""
+		}), {
+			leading: M(() => [x(q, { position: v.value }, {
+				default: M(() => [k(u.$slots, "leading")]),
+				_: 3
+			}, 8, ["position"])]),
+			trailing: M(() => [x(a, {
+				open: _.value,
+				"onUpdate:open": m[1] ||= (e) => _.value = e
+			}, {
+				default: M(() => [x(s, { "as-child": "" }, {
+					default: M(() => [k(u.$slots, "trailing", {}, () => [x(n, {
+						name: "location-dot",
+						variant: "tonal",
+						"data-pw": `${f.name}-trailing`,
+						"aria-label": c.dialogTitle ?? "Choose a location"
+					}, null, 8, ["data-pw", "aria-label"])])]),
+					_: 3
+				}), x(i, null, {
+					default: M(() => [
+						x(p, {
+							variant: "tonal",
+							color: "primary"
+						}),
+						x(r, null, {
+							default: M(() => [b(A(c.dialogTitle ?? "Choose a location"), 1)]),
+							_: 1
+						}),
+						x(d, { hidden: "" }),
+						x(G, {
+							center: v.value,
+							class: E(j(e)(c.mapClass))
+						}, {
+							default: M(() => [x(K, {
+								position: v.value,
+								draggable: !c.disabled && !c.readOnly,
+								reference: !c.disabled && !c.readOnly,
+								onChange: y
+							}, null, 8, [
+								"position",
+								"draggable",
+								"reference"
+							])]),
+							_: 1
+						}, 8, ["center", "class"]),
+						x(l, null, {
+							default: M(() => [x(t, { onClick: m[0] ||= (e) => _.value = !1 }, {
+								default: M(() => [b(A(c.closeLabel ?? "OK"), 1)]),
+								_: 1
+							})]),
+							_: 1
+						})
+					]),
+					_: 1
+				})]),
+				_: 3
+			}, 8, ["open"])]),
+			_: 3
+		}, 16, ["model-value"]));
+	}
+}), Y = /* @__PURE__ */ S({
+	__name: "location-form-field",
+	props: {
+		name: {},
+		closeLabel: {},
+		dialogTitle: {},
+		mapClass: {},
+		readOnly: { type: Boolean },
+		label: {},
+		helperText: {},
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {},
+		placeholder: {},
+		type: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(e) {
+		let t = e, { value: n, errorMessage: r, meta: i } = F(() => t.name), a = m(() => !!r.value || i.touched && !i.valid);
+		return (i, o) => (D(), h(J, T(t, {
+			modelValue: j(n),
+			"onUpdate:modelValue": o[0] ||= (e) => w(n) ? n.value = e : null,
+			name: e.name,
+			error: a.value,
+			"helper-text": j(r) ?? e.helperText
+		}), null, 16, [
+			"modelValue",
+			"name",
+			"error",
+			"helper-text"
+		]));
+	}
+}), X = /* @__PURE__ */ S({
+	__name: "location-marker",
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let { coords: n } = W(), r = t;
+		return (e, t) => j(n) ? (D(), h(K, T({
+			key: 0,
+			reference: "",
+			position: [j(n).latitude, j(n).longitude]
+		}, e.$attrs, { onChange: t[0] ||= (e) => r("change", e) }), y({ _: 2 }, [
+			e.$slots.icon ? {
+				name: "icon",
+				fn: M(() => [k(e.$slots, "icon")]),
+				key: "0"
+			} : void 0,
+			e.$slots.popup ? {
+				name: "popup",
+				fn: M(() => [k(e.$slots, "popup")]),
+				key: "1"
+			} : void 0,
+			e.$slots.tooltip ? {
+				name: "tooltip",
+				fn: M(() => [k(e.$slots, "tooltip")]),
+				key: "2"
+			} : void 0
+		]), 1040, ["position"])) : g("", !0);
+	}
+}), Z = { class: "leaflet-control leaflet-bar border-primary flex flex-col gap-1" }, Q = /* @__PURE__ */ S({
+	__name: "map-actions",
+	props: {
+		position: { default: "topleft" },
+		class: {}
+	},
+	setup(t) {
+		let r = t, i = C("map", void 0), { coords: a } = W(), o = (e) => {
+			let t = i?.value;
+			t && t.setZoom(t.getZoom() + e);
+		}, s = () => {
+			let e = i?.value;
+			!e || !a.value || e.panTo([a.value.latitude, a.value.longitude]);
+		};
+		return (i, c) => (D(), _("div", { class: E(j(e)(j(U)[t.position], r.class)) }, [v("div", Z, [
+			x(n, {
+				name: "plus",
+				"aria-label": "Zoom in",
+				onClick: c[0] ||= (e) => o(1)
+			}),
+			x(n, {
+				name: "minus",
+				"aria-label": "Zoom out",
+				onClick: c[1] ||= (e) => o(-1)
+			}),
+			j(a) ? (D(), h(n, {
+				key: 0,
+				name: "location-crosshairs",
+				"aria-label": "My position",
+				onClick: s
+			})) : g("", !0)
+		])], 2));
+	}
+});
+//#endregion
+export { J as LocationField, Y as LocationFormField, X as LocationMarker, q as LocationPreview, G as Map, G as MapComponent, Q as MapActions, K as Marker, U as POSITION_CLASSES, W as useGeolocation };