@chelone/vue 0.6.0 → 0.9.0

package/dist/components/maps-osm/geocoding-input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,265 @@
+import { useCheloneFormContext, useWrappedSource } from "../../form/form-context.js";
+import { useInput } from "../../form/use-input.js";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import validation_error_default from "../admin/common/validation-error.js";
+import field_label_text_default from "../admin/common/field-label-text.js";
+import { useMapsConfig } from "../maps/use-map.js";
+import button_default from "../ui/button.js";
+import { Field, FieldError, FieldLabel } from "../ui/field.js";
+import input_default from "../ui/input.js";
+import { useGeocode } from "./use-geocode.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useId, watch, withCtx, withModifiers } from "vue";
+import { textOf } from "@chelone/core";
+// src/components/maps-osm/geocoding-input.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var _hoisted_2 = { class: "relative" };
+var _hoisted_3 = { class: "flex gap-2" };
+var _hoisted_4 = {
+	key: 0,
+	class: "absolute z-10 mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md"
+};
+var _hoisted_5 = {
+	key: 0,
+	role: "status",
+	class: "px-2 py-3 text-sm text-muted-foreground"
+};
+var _hoisted_6 = {
+	key: 1,
+	role: "alert",
+	class: "px-2 py-3 text-sm text-muted-foreground"
+};
+var _hoisted_7 = {
+	key: 2,
+	role: "status",
+	class: "px-2 py-3 text-sm text-muted-foreground"
+};
+var _hoisted_8 = [
+	"id",
+	"aria-selected",
+	"onClick"
+];
+var _hoisted_9 = { class: "flex flex-col" };
+var _hoisted_10 = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+};
+var geocoding_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "geocoding-input",
+	props: {
+		source: {},
+		latSource: {},
+		lngSource: {},
+		bboxSource: {},
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		placeholder: {},
+		provider: {},
+		minChars: { default: 3 },
+		debounceMs: { default: 300 },
+		countryCodes: {},
+		viewBox: {},
+		limit: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* A text field that searches an address with a geocoding provider and fills
+		* the form with the result the user picks. A provider that allows typeahead
+		* searches as the user types; any other searches on Enter or on the button.
+		* Typed text reaches the form when the field loses focus, so an address no
+		* provider finds can still be entered by hand, and clears `latSource`,
+		* `lngSource` and `bboxSource` so they never describe a different address; a
+		* pick writes the result's `displayName` and its coordinates.
+		*
+		* The list is a native `listbox` under a `combobox` input, since Vue's ui set
+		* has no command component.
+		*
+		* @example
+		* <GeocodingInput
+		*   source="address"
+		*   lat-source="latitude"
+		*   lng-source="longitude"
+		*   :provider="createNominatimProvider({ endpoint })"
+		* />
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const config = useMapsConfig();
+		const typeahead = computed(() => (props.provider ?? config.geocoder)?.typeahead === true);
+		const { id, value, setValue, blur, error, touched, isRequired } = useInput({ source: props.source });
+		const { form } = useCheloneFormContext();
+		const wrappedLat = props.latSource ? useWrappedSource(props.latSource) : null;
+		const wrappedLng = props.lngSource ? useWrappedSource(props.lngSource) : null;
+		const wrappedBbox = props.bboxSource ? useWrappedSource(props.bboxSource) : null;
+		const saved = computed(() => textOf(value.value));
+		const text = ref(saved.value);
+		const query = ref("");
+		const open = ref(false);
+		const active = ref(-1);
+		watch(saved, (next) => {
+			text.value = next;
+		});
+		const search = useGeocode(query, () => ({
+			provider: props.provider,
+			minChars: props.minChars,
+			debounceMs: typeahead.value ? props.debounceMs : 0,
+			countryCodes: props.countryCodes,
+			viewBox: props.viewBox,
+			limit: props.limit
+		}));
+		const results = computed(() => search.data.value ?? []);
+		const searched = computed(() => search.isFetching.value || search.status.value !== "pending");
+		const listed = computed(() => open.value && searched.value);
+		const showsOptions = computed(() => listed.value && !search.isFetching.value && results.value.length > 0);
+		watch(results, () => {
+			active.value = -1;
+		});
+		const listId = `${useId()}-listbox`;
+		const optionId = (index) => `${listId}-${index}`;
+		function onInput(next) {
+			text.value = next;
+			active.value = -1;
+			if (typeahead.value) {
+				query.value = next;
+				open.value = true;
+			} else open.value = false;
+		}
+		function runSearch() {
+			if (query.value === text.value && search.isError.value) search.refetch();
+			query.value = text.value;
+			open.value = true;
+		}
+		function writeTyped() {
+			setValue(text.value);
+			if (wrappedLat) form.ambient.setFieldValue(wrappedLat, null);
+			if (wrappedLng) form.ambient.setFieldValue(wrappedLng, null);
+			if (wrappedBbox) form.ambient.setFieldValue(wrappedBbox, null);
+		}
+		function pick(result) {
+			setValue(result.displayName);
+			text.value = result.displayName;
+			if (wrappedLat) form.ambient.setFieldValue(wrappedLat, result.lat);
+			if (wrappedLng) form.ambient.setFieldValue(wrappedLng, result.lng);
+			if (wrappedBbox && result.bbox) form.ambient.setFieldValue(wrappedBbox, [...result.bbox]);
+			open.value = false;
+			active.value = -1;
+		}
+		function move(step) {
+			const count = results.value.length;
+			if (count === 0) return;
+			open.value = true;
+			const current = active.value;
+			active.value = current < 0 ? step === 1 ? 0 : count - 1 : (current + step + count) % count;
+		}
+		function onBlur() {
+			open.value = false;
+			active.value = -1;
+			if (text.value !== saved.value) writeTyped();
+			blur();
+		}
+		function onKeydown(event) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				if (!showsOptions.value && !open.value) return;
+				event.preventDefault();
+				move(event.key === "ArrowDown" ? 1 : -1);
+			} else if (event.key === "Escape" && open.value) {
+				event.stopPropagation();
+				open.value = false;
+				active.value = -1;
+			} else if (event.key === "Enter") {
+				event.preventDefault();
+				const chosen = showsOptions.value ? results.value[active.value] : void 0;
+				if (chosen) pick(chosen);
+				else if (!typeahead.value) runSearch();
+			}
+		}
+		const invalid = computed(() => touched.value && error.value != null);
+		const placeholderText = computed(() => props.placeholder ?? translate("chelone.map.search_placeholder"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Field), {
+				"data-slot": "geocoding-input",
+				"data-invalid": invalid.value,
+				class: normalizeClass(unref(cn)(props.class))
+			}, {
+				default: withCtx(() => [
+					props.label !== false ? (openBlock(), createBlock(unref(FieldLabel), {
+						key: 0,
+						"html-for": unref(id)
+					}, {
+						default: withCtx(() => [createVNode(field_label_text_default, {
+							label: props.label,
+							source: props.source
+						}, null, 8, ["label", "source"]), unref(isRequired) ? (openBlock(), createElementBlock("span", _hoisted_1, " *")) : createCommentVNode("", true)]),
+						_: 1
+					}, 8, ["html-for"])) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createVNode(input_default, {
+						id: unref(id),
+						role: "combobox",
+						autocomplete: "off",
+						"aria-autocomplete": "list",
+						"aria-expanded": listed.value,
+						"aria-controls": showsOptions.value ? listId : void 0,
+						"aria-activedescendant": showsOptions.value && active.value >= 0 ? optionId(active.value) : void 0,
+						"aria-label": props.label === false ? unref(translate)("chelone.map.search_placeholder") : void 0,
+						name: props.source,
+						"model-value": text.value,
+						placeholder: placeholderText.value,
+						disabled: props.disabled,
+						"aria-invalid": invalid.value,
+						"onUpdate:modelValue": onInput,
+						onBlur,
+						onKeydown
+					}, null, 8, [
+						"id",
+						"aria-expanded",
+						"aria-controls",
+						"aria-activedescendant",
+						"aria-label",
+						"name",
+						"model-value",
+						"placeholder",
+						"disabled",
+						"aria-invalid"
+					]), !typeahead.value ? (openBlock(), createBlock(button_default, {
+						key: 0,
+						type: "button",
+						variant: "outline",
+						disabled: props.disabled,
+						onClick: runSearch
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.map.search_button")), 1)]),
+						_: 1
+					}, 8, ["disabled"])) : createCommentVNode("", true)]), listed.value ? (openBlock(), createElementBlock("div", _hoisted_4, [unref(search).isFetching.value ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(unref(translate)("chelone.map.searching")), 1)) : unref(search).isError.value ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(unref(translate)("chelone.map.search_failed")), 1)) : results.value.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(unref(translate)("chelone.map.no_results")), 1)) : (openBlock(), createElementBlock("ul", {
+						key: 3,
+						id: listId,
+						role: "listbox",
+						class: "max-h-64 overflow-auto p-1"
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
+						return openBlock(), createElementBlock("li", {
+							id: optionId(index),
+							key: `${result.displayName}:${result.lat}:${result.lng}`,
+							role: "option",
+							"aria-selected": index === active.value,
+							class: normalizeClass(unref(cn)("cursor-default rounded-sm px-2 py-1.5 text-sm", index === active.value && "bg-accent text-accent-foreground")),
+							onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+							onClick: ($event) => pick(result)
+						}, [createElementVNode("span", _hoisted_9, [createElementVNode("span", null, toDisplayString(result.displayName), 1), result.type ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(result.type), 1)) : createCommentVNode("", true)])], 42, _hoisted_8);
+					}), 128))]))])) : createCommentVNode("", true)]),
+					invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+						default: withCtx(() => [createVNode(validation_error_default, { error: unref(error) }, null, 8, ["error"])]),
+						_: 1
+					})) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 8, ["data-invalid", "class"]);
+		};
+	}
+});
+export { geocoding_input_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/maps-osm/map-with-search.js

@@ -0,0 +1,4 @@
+import map_with_search_vue_vue_type_script_setup_true_lang_default from "./map-with-search.vue_vue_type_script_setup_true_lang.js";
+// src/components/maps-osm/map-with-search.vue
+var map_with_search_default = map_with_search_vue_vue_type_script_setup_true_lang_default;
+export { map_with_search_default as default };

package/dist/components/maps-osm/map-with-search.vue.d.ts

@@ -15,8 +15,9 @@ export interface MapWithSearchProps {
     provider?: GeocodingProvider;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<MapWithSearchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MapWithSearchProps> & Readonly<{}>, {
-    height: number | string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<MapWithSearchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MapWithSearchProps> & Readonly<{}>, {
+    height: string | number;
     zoom: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/maps-osm/map-with-search.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,93 @@
+import { useCheloneFormContext, useWrappedSource } from "../../form/form-context.js";
+import { cn } from "../../lib/utils.js";
+import lat_lng_input_default from "../maps/lat-lng-input.js";
+import { useMapsConfig } from "../maps/use-map.js";
+import geocoding_input_default from "./geocoding-input.js";
+import { createElementBlock, createVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, unref } from "vue";
+import { DEFAULT_MAP_ZOOM, reverseGeocodeQueryOptions } from "@chelone/core";
+import { useQueryClient } from "@tanstack/vue-query";
+// src/components/maps-osm/map-with-search.vue?vue&type=script&setup=true&lang.ts
+var map_with_search_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "map-with-search",
+	props: {
+		latSource: {},
+		lngSource: {},
+		addressSource: {},
+		height: { default: 400 },
+		zoom: { default: DEFAULT_MAP_ZOOM },
+		provider: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* An address search over a map. Picking a result fills the address and the
+		* coordinates, and the marker moves there. Clicking the map or dragging the
+		* pin writes the address of that spot, unless the service finds none. The
+		* address is looked up only after such a gesture, never on mount and never
+		* after a pick, so a picked address is not overwritten.
+		*
+		* Needs the optional `maplibre-gl` peer.
+		*
+		* @example
+		* <MapWithSearch
+		*   lat-source="latitude"
+		*   lng-source="longitude"
+		*   address-source="address"
+		*   :provider="createNominatimProvider({ endpoint })"
+		* />
+		*/
+		const props = __props;
+		const queryClient = useQueryClient();
+		const config = useMapsConfig();
+		const { form } = useCheloneFormContext();
+		const wrappedAddress = useWrappedSource(props.addressSource);
+		const wrappedLat = useWrappedSource(props.latSource);
+		const wrappedLng = useWrappedSource(props.lngSource);
+		let gestures = 0;
+		onBeforeUnmount(() => {
+			gestures += 1;
+		});
+		function reverse(lat, lng) {
+			const active = props.provider ?? config.geocoder;
+			if (!active) return;
+			const gesture = ++gestures;
+			queryClient.fetchQuery(reverseGeocodeQueryOptions(active, {
+				lat,
+				lng
+			})).then((result) => {
+				if (!result || gesture !== gestures) return;
+				if (form.ambient.getFieldValue(wrappedLat) !== lat || form.ambient.getFieldValue(wrappedLng) !== lng) return;
+				form.ambient.setFieldValue(wrappedAddress, result.displayName);
+			}).catch(() => {});
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-slot": "map-with-search",
+				class: normalizeClass(unref(cn)("flex flex-col gap-3", props.class))
+			}, [createVNode(geocoding_input_default, {
+				source: props.addressSource,
+				"lat-source": props.latSource,
+				"lng-source": props.lngSource,
+				provider: props.provider
+			}, null, 8, [
+				"source",
+				"lat-source",
+				"lng-source",
+				"provider"
+			]), createVNode(lat_lng_input_default, {
+				"lat-source": props.latSource,
+				"lng-source": props.lngSource,
+				label: false,
+				height: props.height,
+				zoom: props.zoom,
+				onPositionChange: reverse
+			}, null, 8, [
+				"lat-source",
+				"lng-source",
+				"height",
+				"zoom"
+			])], 2);
+		};
+	}
+});
+export { map_with_search_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/maps-osm/osm-feature-operator.js

@@ -0,0 +1,4 @@
+import osm_feature_operator_vue_vue_type_script_setup_true_lang_default from "./osm-feature-operator.vue_vue_type_script_setup_true_lang.js";
+// src/components/maps-osm/osm-feature-operator.vue
+var osm_feature_operator_default = osm_feature_operator_vue_vue_type_script_setup_true_lang_default;
+export { osm_feature_operator_default as default };

package/dist/components/maps-osm/osm-feature-operator.vue.d.ts

@@ -16,16 +16,17 @@ export interface OsmFeatureOperatorProps {
     disabled?: boolean;
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<OsmFeatureOperatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OsmFeatureOperatorProps> & Readonly<{}>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<OsmFeatureOperatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OsmFeatureOperatorProps> & Readonly<{}>, {
     disabled: boolean;
     label: string;
     provider: OverpassProvider;
-    presets: readonly OsmPresetName[];
-    tags: readonly OsmTagInput[];
+    presets: readonly ("place" | "water" | "buildings" | "forest" | "roads" | "natural" | "building" | "landuse" | "amenity" | "leisure" | "boundary" | "man_made" | "shop" | "tourism" | "historic" | "highway" | "railway" | "waterway" | "barrier" | "power")[];
+    tags: readonly `${string}=${string}`[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/maps-osm/osm-feature-operator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,158 @@
+import { useInput } from "../../form/use-input.js";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { useNotify } from "../../notification-hooks.js";
+import { useMapsConfig } from "../maps/use-map.js";
+import button_default from "../ui/button.js";
+import spinner_default from "../ui/spinner.js";
+import { fetchOsmFeatures } from "./osm-features.js";
+import { subtractMask, unionAll } from "./osm-geometry-ops.js";
+import { createBlock, createTextVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, ref, renderSlot, toDisplayString, toRaw, unref, withCtx } from "vue";
+import { OverpassRateLimitError, areaInTypeOf, geoAreaM2, geoBounds, isGeoArea } from "@chelone/core";
+import { useQueryClient } from "@tanstack/vue-query";
+// src/components/maps-osm/osm-feature-operator.vue?vue&type=script&setup=true&lang.ts
+var osm_feature_operator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "osm-feature-operator",
+	props: {
+		source: {},
+		mode: {},
+		presets: { default: void 0 },
+		tags: { default: void 0 },
+		label: { default: void 0 },
+		provider: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* A button that edits the polygon in a form field with OpenStreetMap features
+		* from the Overpass service: `subtract` removes them, `add` merges them in.
+		* The request runs on the click. The result is written like a user edit, so
+		* the form turns dirty and the field's validators run.
+		*
+		* Needs an Overpass provider, from the `provider` prop or `MapsProvider`'s
+		* `overpass`; with neither it throws. The `icon` slot replaces the default icon.
+		*
+		* @example
+		* <OsmFeatureOperator source="area" mode="subtract" :presets="['water']" />
+		*/
+		const props = __props;
+		/**
+		* The failure of an aborted request. jsdom and browsers reject with a
+		* `DOMException`, which is not an `Error`, so both are tested.
+		*/
+		const isAbort = (error) => (error instanceof Error || error instanceof DOMException) && error.name === "AbortError";
+		/** Square kilometres to 3 decimals, from a difference in square metres. */
+		const km2 = (m2) => `${(Math.max(0, m2) / 1e6).toFixed(3)} km²`;
+		const config = useMapsConfig();
+		if (!(props.provider ?? config.overpass)) throw new Error("OsmFeatureOperator needs an Overpass provider: pass the `provider` prop or set `overpass` on <MapsProvider>.");
+		const translate = useTranslate();
+		const notify = useNotify();
+		const queryClient = useQueryClient();
+		const input = useInput({
+			source: props.source,
+			format: (v) => v ?? null
+		});
+		const running = ref(false);
+		let controller = null;
+		onBeforeUnmount(() => controller?.abort());
+		function write(geometry) {
+			input.setValue(geometry);
+			input.blur();
+		}
+		async function run() {
+			const provider = props.provider ?? config.overpass;
+			if (!provider) return;
+			const value = toRaw(input.value.value);
+			if ((props.presets?.length ?? 0) + (props.tags?.length ?? 0) === 0) {
+				notify("chelone.map.osm.no_sources", { type: "warning" });
+				return;
+			}
+			if (!isGeoArea(value)) {
+				notify("chelone.map.osm.no_polygon", { type: "warning" });
+				return;
+			}
+			const abort = new AbortController();
+			controller = abort;
+			running.value = true;
+			try {
+				const found = await fetchOsmFeatures(queryClient, geoBounds(value), {
+					presets: props.presets,
+					tags: props.tags
+				}, {
+					provider,
+					signal: abort.signal
+				});
+				if (abort.signal.aborted) return;
+				if (toRaw(input.value.value) !== value) return;
+				const matches = found?.features ?? [];
+				if (matches.length === 0) {
+					notify("chelone.map.osm.no_match", { type: "info" });
+					return;
+				}
+				if (props.mode === "subtract") {
+					const left = subtractMask(value, matches);
+					if (left === null) {
+						write(null);
+						notify("chelone.map.osm.covered", { type: "warning" });
+						return;
+					}
+					const kept = areaInTypeOf(value, left);
+					if (!kept) {
+						notify("chelone.map.osm.would_split", { type: "warning" });
+						return;
+					}
+					write(kept);
+					notify("chelone.map.osm.subtracted", {
+						type: "success",
+						messageArgs: { area: km2(geoAreaM2(value) - geoAreaM2(kept)) }
+					});
+					return;
+				}
+				const merged = unionAll([{
+					type: "Feature",
+					properties: {},
+					geometry: value
+				}, ...matches]);
+				if (merged === null) {
+					notify("chelone.map.osm.union_empty", { type: "warning" });
+					return;
+				}
+				const kept = areaInTypeOf(value, merged);
+				if (!kept) {
+					notify("chelone.map.osm.would_split", { type: "warning" });
+					return;
+				}
+				write(kept);
+				notify("chelone.map.osm.added", {
+					type: "success",
+					messageArgs: { area: km2(geoAreaM2(kept) - geoAreaM2(value)) }
+				});
+			} catch (error) {
+				if (abort.signal.aborted || isAbort(error)) return;
+				notify(error instanceof OverpassRateLimitError ? "chelone.map.osm.rate_limited" : "chelone.map.osm.error", { type: "error" });
+			} finally {
+				if (controller === abort) {
+					controller = null;
+					if (!abort.signal.aborted) running.value = false;
+				}
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(button_default, {
+				type: "button",
+				variant: "outline",
+				"data-slot": "osm-feature-operator",
+				class: normalizeClass(props.class),
+				disabled: props.disabled || running.value,
+				onClick: run
+			}, {
+				default: withCtx(() => [running.value ? (openBlock(), createBlock(spinner_default, { key: 0 })) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1), createTextVNode(" " + toDisplayString(unref(translate)(props.label ?? (props.mode === "subtract" ? "chelone.map.osm.subtract" : "chelone.map.osm.add"))), 1)]),
+				_: 3
+			}, 8, ["class", "disabled"]);
+		};
+	}
+});
+export { osm_feature_operator_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/maps-osm/osm-feature-operators.d.ts

@@ -1,6 +1,12 @@
 import { type OsmFeatureOperatorProps } from "./osm-feature-operator.vue.js";
 export type OsmFeatureSubtractProps = Omit<OsmFeatureOperatorProps, "mode">;
 export type OsmFeatureAddProps = Omit<OsmFeatureOperatorProps, "mode">;
+/**
+ * The props the operators forward to `OsmFeatureOperator`: all of them but
+ * `mode`. A prop they are not given reaches it as `undefined`, which takes its
+ * own default.
+ */
+export declare const osmFeatureOperatorKeys: readonly ["source", "presets", "tags", "label", "provider", "disabled", "class"];
 /**
  * Removes OpenStreetMap areas, such as water, from the polygon in a form field.
  * The `icon` slot replaces the default icon.

package/dist/components/maps-osm/osm-feature-operators.js

@@ -1,42 +1,57 @@
+import osm_feature_operator_default from "./osm-feature-operator.js";
 import { defineComponent, h } from "vue";
-import _sfc_main from "./osm-feature-operator.vue.js";
-const { mode: _mode, ...options } = _sfc_main.props;
-const svg = (...paths) => h(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    "stroke-width": 2,
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "aria-hidden": "true",
-    class: "size-4"
-  },
-  paths.map((d) => h("path", { d }))
-);
-const subtractIcon = () => svg(
-  "m7 21-4.3-4.3a1 1 0 0 1 0-1.4l9.6-9.6a1 1 0 0 1 1.4 0l5.6 5.6a1 1 0 0 1 0 1.4L13 21",
-  "M22 21H7",
-  "m5 11 9 9"
-);
-const addIcon = () => svg("M5 12h14", "M12 5v14");
+// src/components/maps-osm/osm-feature-operators.ts
+/**
+* The props the operators forward to `OsmFeatureOperator`: all of them but
+* `mode`. A prop they are not given reaches it as `undefined`, which takes its
+* own default.
+*/
+var osmFeatureOperatorKeys = [
+	"source",
+	"presets",
+	"tags",
+	"label",
+	"provider",
+	"disabled",
+	"class"
+];
+var svg = (...paths) => h("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": 2,
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true",
+	class: "size-4"
+}, paths.map((d) => h("path", { d })));
+/** An eraser. */
+var subtractIcon = () => svg("m7 21-4.3-4.3a1 1 0 0 1 0-1.4l9.6-9.6a1 1 0 0 1 1.4 0l5.6 5.6a1 1 0 0 1 0 1.4L13 21", "M22 21H7", "m5 11 9 9");
+/** A plus. */
+var addIcon = () => svg("M5 12h14", "M12 5v14");
 function operator(name, mode, icon) {
-  return defineComponent(
-    (props, { slots }) => () => h(_sfc_main, { ...props, mode }, { icon: slots.icon ?? icon }),
-    {
-      name,
-      props: options
-    }
-  );
+	return defineComponent((props, { slots }) => () => h(osm_feature_operator_default, {
+		...props,
+		mode
+	}, { icon: slots.icon ?? icon }), {
+		name,
+		props: [...osmFeatureOperatorKeys]
+	});
 }
-const OsmFeatureSubtract = operator(
-  "OsmFeatureSubtract",
-  "subtract",
-  subtractIcon
-);
-const OsmFeatureAdd = operator("OsmFeatureAdd", "add", addIcon);
-export {
-  OsmFeatureAdd,
-  OsmFeatureSubtract
-};
+/**
+* Removes OpenStreetMap areas, such as water, from the polygon in a form field.
+* The `icon` slot replaces the default icon.
+*
+* @example
+* <OsmFeatureSubtract source="area" :presets="['water']" />
+*/
+var OsmFeatureSubtract = operator("OsmFeatureSubtract", "subtract", subtractIcon);
+/**
+* Merges OpenStreetMap areas, such as buildings, into the polygon in a form field.
+* The `icon` slot replaces the default icon.
+*
+* @example
+* <OsmFeatureAdd source="area" :presets="['buildings']" />
+*/
+var OsmFeatureAdd = operator("OsmFeatureAdd", "add", addIcon);
+export { OsmFeatureAdd, OsmFeatureSubtract, osmFeatureOperatorKeys };