@chelone/vue 0.5.0 → 0.7.0

package/dist/components/maps/geo-json-layers.vue.d.ts

@@ -1,8 +1,9 @@
-import type { GeoJsonValue, ShapeStyle } from "@chelone/core";
+import type { JsonObject, ShapeStyle } from "@chelone/core";
+import type { Feature, FeatureCollection, Geometry } from "geojson";
 /** Props for {@link GeoJsonLayers}. */
 export interface GeoJsonLayersProps {
     /** A Geometry, Feature or FeatureCollection. */
-    data: GeoJsonValue;
+    data: Geometry | Feature<Geometry | null, JsonObject | null> | FeatureCollection<Geometry | null, JsonObject | null>;
     /** Partial over `DEFAULT_SHAPE_STYLE`. */
     shapeStyle?: ShapeStyle;
     /** Frame the map around the data. Defaults to true. */
@@ -12,9 +13,10 @@ export interface GeoJsonLayersProps {
     /** The highest zoom a fit may reach, which also sets a single Point's zoom. Defaults to 18. */
     maxFitZoom?: number;
 }
-declare const _default: import("vue").DefineComponent<GeoJsonLayersProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GeoJsonLayersProps> & Readonly<{}>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<GeoJsonLayersProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GeoJsonLayersProps> & Readonly<{}>, {
     fitBounds: boolean;
     fitPadding: number;
     maxFitZoom: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/maps/geo-json-layers.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { uniqueGeoJsonSourceId, useGeoJsonSource } from "./use-geo-json-source.js";
+import { useMap } from "./use-map.js";
+import { computed, defineComponent, toRaw, watch } from "vue";
+import { asFeatureCollection, geoBounds, isLngLatBox } from "@chelone/core";
+// src/components/maps/geo-json-layers.vue?vue&type=script&setup=true&lang.ts
+var geo_json_layers_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "geo-json-layers",
+	props: {
+		data: {},
+		shapeStyle: {},
+		fitBounds: {
+			type: Boolean,
+			default: true
+		},
+		fitPadding: { default: 20 },
+		maxFitZoom: { default: 18 }
+	},
+	setup(__props) {
+		/**
+		* Draws a Geometry, Feature or FeatureCollection on the surrounding
+		* `MapCanvas` and frames the map around it. Throws outside a `MapCanvas`: use
+		* `GeoJsonView` for a map of its own.
+		*
+		* @example
+		* <MapCanvas>
+		*   <GeoJsonLayers :data="{ type: 'Point', coordinates: [2.35, 48.85] }" />
+		* </MapCanvas>
+		*/
+		const props = __props;
+		const map = useMap();
+		const value = computed(() => toRaw(props.data));
+		const collection = computed(() => asFeatureCollection(value.value));
+		useGeoJsonSource(uniqueGeoJsonSourceId(), collection, () => props.shapeStyle ?? {});
+		const box = computed(() => geoBounds(value.value));
+		const boxKey = computed(() => box.value ? box.value.join(",") : "");
+		watch([() => props.fitBounds, boxKey], () => {
+			if (!props.fitBounds || !isLngLatBox(box.value)) return;
+			map.fitBounds(box.value, {
+				padding: props.fitPadding,
+				maxZoom: props.maxFitZoom,
+				duration: 0
+			});
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+export { geo_json_layers_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/maps/geo-json-view.js

@@ -0,0 +1,4 @@
+import geo_json_view_vue_vue_type_script_setup_true_lang_default from "./geo-json-view.vue_vue_type_script_setup_true_lang.js";
+// src/components/maps/geo-json-view.vue
+var geo_json_view_default = geo_json_view_vue_vue_type_script_setup_true_lang_default;
+export { geo_json_view_default as default };

package/dist/components/maps/geo-json-view.vue.d.ts

@@ -10,10 +10,11 @@ export interface GeoJsonViewProps extends GeoJsonLayersProps {
     scrollZoom?: boolean;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<GeoJsonViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GeoJsonViewProps> & Readonly<{}>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<GeoJsonViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GeoJsonViewProps> & Readonly<{}>, {
     scrollZoom: boolean;
     fitBounds: boolean;
     fitPadding: number;
     maxFitZoom: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/maps/geo-json-view.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import geo_json_layers_default from "./geo-json-layers.js";
+import map_canvas_default from "./map-canvas.js";
+import { createBlock, createVNode, defineComponent, normalizeClass, openBlock, withCtx } from "vue";
+// src/components/maps/geo-json-view.vue?vue&type=script&setup=true&lang.ts
+var geo_json_view_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "geo-json-view",
+	props: {
+		height: {},
+		mapStyle: {},
+		scrollZoom: {
+			type: Boolean,
+			default: false
+		},
+		class: {},
+		data: {},
+		shapeStyle: {},
+		fitBounds: {
+			type: Boolean,
+			default: true
+		},
+		fitPadding: { default: 20 },
+		maxFitZoom: { default: 18 }
+	},
+	setup(__props) {
+		/**
+		* A map showing a Geometry, Feature or FeatureCollection, framed to fit it.
+		* `GeoJsonField` and the drawing inputs' read-only state use it. To draw on a
+		* `MapCanvas` you already have, use `GeoJsonLayers`.
+		*
+		* @example
+		* <GeoJsonView :data="{ type: 'Point', coordinates: [2.35, 48.85] }" />
+		*/
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(map_canvas_default, {
+				height: props.height,
+				"map-style": props.mapStyle,
+				"scroll-zoom": props.scrollZoom,
+				class: normalizeClass(props.class)
+			}, {
+				default: withCtx(() => [createVNode(geo_json_layers_default, {
+					data: props.data,
+					"shape-style": props.shapeStyle,
+					"fit-bounds": props.fitBounds,
+					"fit-padding": props.fitPadding,
+					"max-fit-zoom": props.maxFitZoom
+				}, null, 8, [
+					"data",
+					"shape-style",
+					"fit-bounds",
+					"fit-padding",
+					"max-fit-zoom"
+				])]),
+				_: 1
+			}, 8, [
+				"height",
+				"map-style",
+				"scroll-zoom",
+				"class"
+			]);
+		};
+	}
+});
+export { geo_json_view_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/maps/lat-lng-field.js

@@ -0,0 +1,4 @@
+import lat_lng_field_vue_vue_type_script_setup_true_lang_default from "./lat-lng-field.vue_vue_type_script_setup_true_lang.js";
+// src/components/maps/lat-lng-field.vue
+var lat_lng_field_default = lat_lng_field_vue_vue_type_script_setup_true_lang_default;
+export { lat_lng_field_default as default };

package/dist/components/maps/lat-lng-field.vue.d.ts

@@ -1,12 +1,12 @@
 import type { MapStyleInput, SourceProp } from "@chelone/core";
 /** Props for {@link LatLngField}. */
-export interface LatLngFieldProps {
+export interface LatLngFieldProps<TRecord = unknown> {
     /** The record property holding the latitude. */
     latSource: SourceProp;
     /** The record property holding the longitude. */
     lngSource: SourceProp;
     /** Defaults to the ambient record. */
-    record?: Record<string, unknown>;
+    record?: TRecord;
     zoom?: number;
     /** In pixels, or any CSS length. Defaults to 300. */
     height?: number | string;
@@ -14,5 +14,21 @@ export interface LatLngFieldProps {
     mapStyle?: MapStyleInput;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<LatLngFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LatLngFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: <TRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<LatLngFieldProps<TRecord>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/maps/lat-lng-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,70 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import map_canvas_default from "./map-canvas.js";
+import { useCoordinates } from "./use-coordinates.js";
+import { MapMarker } from "./use-map.js";
+import { computed, createBlock, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref, withCtx } from "vue";
+// src/components/maps/lat-lng-field.vue?vue&type=script&setup=true&lang.ts
+var lat_lng_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "lat-lng-field",
+	props: {
+		latSource: {},
+		lngSource: {},
+		record: {},
+		zoom: {},
+		height: {},
+		mapStyle: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* Shows a point held in two record fields on a map. A missing, null,
+		* non-numeric or out-of-range coordinate shows a text panel in its place; `0`
+		* is a position.
+		*
+		* @example
+		* <LatLngField lat-source="latitude" lng-source="longitude" />
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const coordinates = useCoordinates(props);
+		/** MapLibre throws on a coordinate outside its range, so the field treats one as missing. */
+		function inRange(value, limit) {
+			return value !== null && Math.abs(value) <= limit ? value : null;
+		}
+		const lat = computed(() => inRange(coordinates.lat.value, 90));
+		const lng = computed(() => inRange(coordinates.lng.value, 180));
+		const cssHeight = computed(() => {
+			const height = props.height ?? 300;
+			return typeof height === "number" ? `${height}px` : height;
+		});
+		return (_ctx, _cache) => {
+			return lat.value === null || lng.value === null ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				"data-slot": "lat-lng-field-empty",
+				class: normalizeClass(unref(cn)("flex items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground", props.class)),
+				style: normalizeStyle({ height: cssHeight.value })
+			}, toDisplayString(unref(translate)("chelone.map.no_coordinates", { _: "No coordinates available" })), 7)) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				"data-slot": "lat-lng-field",
+				class: normalizeClass(props.class)
+			}, [(openBlock(), createBlock(map_canvas_default, {
+				key: `${lat.value},${lng.value}`,
+				center: [lat.value, lng.value],
+				zoom: props.zoom,
+				height: props.height,
+				"map-style": props.mapStyle,
+				"scroll-zoom": false
+			}, {
+				default: withCtx(() => [createVNode(unref(MapMarker), { position: [lat.value, lng.value] }, null, 8, ["position"])]),
+				_: 1
+			}, 8, [
+				"center",
+				"zoom",
+				"height",
+				"map-style"
+			]))], 2));
+		};
+	}
+});
+export { lat_lng_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/maps/lat-lng-input.js

@@ -0,0 +1,4 @@
+import lat_lng_input_vue_vue_type_script_setup_true_lang_default from "./lat-lng-input.vue_vue_type_script_setup_true_lang.js";
+// src/components/maps/lat-lng-input.vue
+var lat_lng_input_default = lat_lng_input_vue_vue_type_script_setup_true_lang_default;
+export { lat_lng_input_default as default };

package/dist/components/maps/lat-lng-input.vue.d.ts

@@ -24,15 +24,16 @@ export interface LatLngInputProps {
     disabled?: boolean;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<LatLngInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<LatLngInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     positionChange: (lat: number, lng: number) => any;
 }, string, import("vue").PublicProps, Readonly<LatLngInputProps> & Readonly<{
     onPositionChange?: ((lat: number, lng: number) => any) | undefined;
 }>, {
     disabled: boolean;
     label: string | false;
-    height: number | string;
+    height: string | number;
     zoom: number;
     defaultPosition: readonly [lat: number, lng: number];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/maps/lat-lng-input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,258 @@
+import { useInput } from "../../form/use-input.js";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import field_label_text_default from "../admin/common/field-label-text.js";
+import input_helper_text_default from "../admin/common/input-helper-text.js";
+import validation_error_default from "../admin/common/validation-error.js";
+import { Field, FieldError, FieldLabel } from "../ui/field.js";
+import input_default from "../ui/input.js";
+import map_canvas_default from "./map-canvas.js";
+import { MapMarker, useMap } from "./use-map.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
+import { latitude, longitude, toCoordinate } from "@chelone/core";
+// src/components/maps/lat-lng-input.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-invalid"];
+var _hoisted_2 = {
+	key: 0,
+	class: "mb-1.5 text-sm font-medium"
+};
+var _hoisted_3 = { class: "grid grid-cols-2 gap-3" };
+var _hoisted_4 = { key: 0 };
+var positionKey = (position) => position ? `${position[0]},${position[1]}` : null;
+/**
+* Lives in the `MapCanvas` slot, where `useMap()` works. Reports a click
+* unless the input is disabled, and recentres the map on a position the form
+* changed from outside.
+*/
+var MapBindings = defineComponent((props, { emit }) => {
+	const map = useMap();
+	const onClick = (event) => {
+		if (props.disabled) return;
+		emit("place", event.lngLat.lat, event.lngLat.lng);
+	};
+	map.on("click", onClick);
+	onBeforeUnmount(() => {
+		map.off("click", onClick);
+	});
+	const start = props.position;
+	if (start && positionKey(start) !== positionKey(props.built)) map.easeTo({ center: [start[1], start[0]] });
+	watch(() => positionKey(props.position), (key) => {
+		const position = props.position;
+		if (key === null || !position) return;
+		const own = props.gesture.current;
+		props.gesture.current = null;
+		if (own && positionKey(own) === key) return;
+		map.easeTo({ center: [position[1], position[0]] });
+	});
+	return () => null;
+}, {
+	name: "LatLngInputMapBindings",
+	props: {
+		position: {
+			type: null,
+			default: null
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		gesture: {
+			type: null,
+			required: true
+		},
+		built: {
+			type: null,
+			required: true
+		}
+	},
+	emits: { place: (_lat, _lng) => true }
+});
+var lat_lng_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "lat-lng-input",
+	props: {
+		latSource: {},
+		lngSource: {},
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		helperText: {},
+		latValidate: {},
+		lngValidate: {},
+		defaultPosition: { default: () => [0, 0] },
+		zoom: { default: 13 },
+		height: { default: 300 },
+		mapStyle: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	},
+	emits: ["positionChange"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* Edits a latitude and a longitude held in two form fields, by typing or by
+		* clicking a map. The pin shows once both are numbers; dragging it or clicking
+		* the map writes both fields rounded to 6 decimals and emits `positionChange`.
+		*
+		* Needs the optional `maplibre-gl` peer.
+		*
+		* @example
+		* <LatLngInput lat-source="latitude" lng-source="longitude" label="Location" />
+		*/
+		const props = __props;
+		const emit = __emit;
+		const translate = useTranslate();
+		const toText = (value) => value === null ? "" : `${value}`;
+		function toArray(validate) {
+			if (validate === void 0) return [];
+			return typeof validate === "function" ? [validate] : validate;
+		}
+		/** About 10 cm, so the text fields stay readable. */
+		const round6 = (value) => Math.round(value * 1e6) / 1e6;
+		/** A click on a repeated copy of the world reports a longitude past 180. */
+		const wrapLng = (lng) => Math.abs(lng) <= 180 ? lng : ((lng + 180) % 360 + 360) % 360 - 180;
+		/** Digits with an optional sign and point: what a coordinate looks like while it is typed. */
+		const TYPING = /^[+-]?\d*\.?\d*$/;
+		/** MapLibre throws on a coordinate outside its range. */
+		function inRange(value, limit) {
+			return value !== null && Math.abs(value) <= limit;
+		}
+		function useCoordinate(source, validate, range) {
+			const input = useInput({
+				source,
+				parse: toCoordinate,
+				format: (value) => toText(toCoordinate(value)),
+				validate: [range, ...validate]
+			});
+			const draft = ref(null);
+			const stored = computed(() => toCoordinate(input.value.value));
+			const text = computed(() => draft.value !== null && toCoordinate(draft.value) === stored.value ? draft.value : toText(stored.value));
+			return {
+				...input,
+				stored,
+				invalid: computed(() => input.touched.value && input.error.value != null),
+				text,
+				onType(event) {
+					const element = event.target;
+					if (!(element instanceof HTMLInputElement)) return;
+					if (!TYPING.test(element.value)) {
+						element.value = text.value;
+						return;
+					}
+					draft.value = element.value;
+					input.setValue(element.value);
+				},
+				onBlur() {
+					if (draft.value !== null && toCoordinate(draft.value) === null) draft.value = null;
+					input.blur();
+				}
+			};
+		}
+		const lat = useCoordinate(props.latSource, toArray(props.latValidate), latitude());
+		const lng = useCoordinate(props.lngSource, toArray(props.lngValidate), longitude());
+		const fields = computed(() => [{
+			source: props.latSource,
+			input: lat
+		}, {
+			source: props.lngSource,
+			input: lng
+		}]);
+		const position = computed(() => {
+			const a = lat.stored.value;
+			const b = lng.stored.value;
+			return inRange(a, 90) && inRange(b, 180) ? [a, b] : null;
+		});
+		const center = computed(() => position.value ?? props.defaultPosition);
+		const invalid = computed(() => lat.invalid.value || lng.invalid.value);
+		const built = center.value;
+		const gesture = { current: null };
+		function place(rawLat, rawLng) {
+			const nextLat = round6(rawLat);
+			const nextLng = round6(wrapLng(rawLng));
+			gesture.current = [nextLat, nextLng];
+			lat.setValue(nextLat);
+			lat.blur();
+			lng.setValue(nextLng);
+			lng.blur();
+			emit("positionChange", nextLat, nextLng);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("fieldset", {
+				"data-slot": "lat-lng-input",
+				class: normalizeClass(unref(cn)("flex min-w-0 flex-col gap-3 border-0 p-0", props.class)),
+				"data-invalid": invalid.value || void 0
+			}, [
+				props.label ? (openBlock(), createElementBlock("legend", _hoisted_2, toDisplayString(unref(translate)(props.label, { _: props.label })), 1)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(fields.value, ({ source, input }) => {
+					return openBlock(), createBlock(unref(Field), {
+						key: source,
+						"data-invalid": input.invalid.value || void 0
+					}, {
+						default: withCtx(() => [
+							createVNode(unref(FieldLabel), { "html-for": input.id }, {
+								default: withCtx(() => [createVNode(field_label_text_default, { source }, null, 8, ["source"]), input.isRequired ? (openBlock(), createElementBlock("span", _hoisted_4, " *")) : createCommentVNode("", true)]),
+								_: 2
+							}, 1032, ["html-for"]),
+							createVNode(input_default, {
+								id: input.id,
+								name: input.name,
+								inputmode: "decimal",
+								"model-value": input.text.value,
+								disabled: props.disabled,
+								"aria-invalid": input.invalid.value,
+								onInput: input.onType,
+								onBlur: input.onBlur
+							}, null, 8, [
+								"id",
+								"name",
+								"model-value",
+								"disabled",
+								"aria-invalid",
+								"onInput",
+								"onBlur"
+							]),
+							input.invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 0 }, {
+								default: withCtx(() => [createVNode(validation_error_default, { error: input.error.value }, null, 8, ["error"])]),
+								_: 2
+							}, 1024)) : createCommentVNode("", true)
+						]),
+						_: 2
+					}, 1032, ["data-invalid"]);
+				}), 128))]),
+				createVNode(input_helper_text_default, { "helper-text": props.helperText }, null, 8, ["helper-text"]),
+				createVNode(map_canvas_default, {
+					center: center.value,
+					zoom: props.zoom,
+					height: props.height,
+					"map-style": props.mapStyle
+				}, {
+					default: withCtx(() => [createVNode(unref(MapBindings), {
+						position: position.value,
+						built: unref(built),
+						disabled: props.disabled,
+						gesture,
+						onPlace: place
+					}, null, 8, [
+						"position",
+						"built",
+						"disabled"
+					]), position.value ? (openBlock(), createBlock(unref(MapMarker), {
+						key: 0,
+						position: position.value,
+						draggable: !props.disabled,
+						onDragEnd: place
+					}, null, 8, ["position", "draggable"])) : createCommentVNode("", true)]),
+					_: 1
+				}, 8, [
+					"center",
+					"zoom",
+					"height",
+					"map-style"
+				])
+			], 10, _hoisted_1);
+		};
+	}
+});
+export { lat_lng_input_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/maps/map-canvas.js

@@ -0,0 +1,4 @@
+import map_canvas_vue_vue_type_script_setup_true_lang_default from "./map-canvas.vue_vue_type_script_setup_true_lang.js";
+// src/components/maps/map-canvas.vue
+var map_canvas_default = map_canvas_vue_vue_type_script_setup_true_lang_default;
+export { map_canvas_default as default };

package/dist/components/maps/map-canvas.vue.d.ts

@@ -16,15 +16,16 @@ export interface MapCanvasProps {
     scrollZoom?: boolean;
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MapCanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MapCanvasProps> & Readonly<{}>, {
-    height: number | string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MapCanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MapCanvasProps> & Readonly<{}>, {
+    height: string | number;
     center: readonly [lat: number, lng: number];
     zoom: number;
     scrollZoom: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/maps/map-canvas.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,89 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import { provideMap, useMapsConfig } from "./use-map.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref } from "vue";
+import { latLngToLngLat } from "@chelone/core";
+import { Map } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+// src/components/maps/map-canvas.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"data-slot": "map-canvas-error",
+	role: "alert",
+	class: "flex h-full items-center justify-center text-sm text-muted-foreground"
+};
+var map_canvas_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "map-canvas",
+	props: {
+		center: { default: () => [0, 0] },
+		zoom: { default: 13 },
+		height: { default: 300 },
+		mapStyle: {},
+		scrollZoom: {
+			type: Boolean,
+			default: true
+		},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* One MapLibre map. Center, zoom and style are read at mount: change `:key` to
+		* rebuild. Browsers cap live WebGL contexts near 16 per page, and each canvas
+		* holds one, so keep long lists of maps short. The default slot renders once
+		* the map has loaded; a map that fails to load shows a text panel instead.
+		*
+		* Needs the optional `maplibre-gl` peer.
+		*
+		* @example
+		* <MapCanvas :map-style="style" :center="[48.85, 2.35]">
+		*   <MapMarker :position="[48.85, 2.35]" />
+		* </MapCanvas>
+		*/
+		const props = __props;
+		const style = props.mapStyle ?? useMapsConfig().mapStyle;
+		if (style === void 0) throw new Error("MapCanvas needs a basemap: pass the mapStyle prop, or wrap the app in <MapsProvider :map-style=\"...\">. Build one with rasterTileStyle({ tileUrl, attribution }) or pass a MapLibre style URL.");
+		const container = ref(null);
+		const translate = useTranslate();
+		const map = shallowRef(null);
+		const failed = ref(false);
+		let created = null;
+		provideMap(map);
+		const cssHeight = computed(() => typeof props.height === "number" ? `${props.height}px` : props.height);
+		onMounted(() => {
+			const element = container.value;
+			if (!element) return;
+			const instance = new Map({
+				container: element,
+				style,
+				center: latLngToLngLat(props.center),
+				zoom: props.zoom,
+				scrollZoom: props.scrollZoom
+			});
+			created = instance;
+			instance.on("error", () => {
+				if (created === instance && map.value === null) failed.value = true;
+			});
+			instance.on("load", () => {
+				if (created !== instance) return;
+				failed.value = false;
+				map.value = instance;
+			});
+		});
+		onBeforeUnmount(() => {
+			const instance = created;
+			created = null;
+			map.value = null;
+			instance?.remove();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "container",
+				ref: container,
+				"data-slot": "map-canvas",
+				class: normalizeClass(unref(cn)("relative w-full overflow-hidden rounded-md", props.class)),
+				style: normalizeStyle({ height: cssHeight.value })
+			}, [failed.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(translate)("chelone.map.load_failed", { _: "The map could not be loaded" })), 1)) : map.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1) : createCommentVNode("", true)], 6);
+		};
+	}
+});
+export { map_canvas_vue_vue_type_script_setup_true_lang_default as default };