@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/maps-draw/use-terra-draw.js

@@ -0,0 +1,261 @@
+import { fromEditorFeatures, toEditorFeatures, editorStyles } from "@chelone/core";
+import { TerraDraw, TerraDrawPointMode, TerraDrawLineStringMode, TerraDrawPolygonMode, TerraDrawRectangleMode, TerraDrawCircleMode, TerraDrawSelectMode, TerraDrawRenderMode } from "terra-draw";
+import { TerraDrawMapLibreGLAdapter } from "terra-draw-maplibre-gl-adapter";
+import { shallowRef, ref, computed, onMounted, onBeforeUnmount, watch, toRaw } from "vue";
+import { useMap } from "../maps/use-map.js";
+const TOOL_MODES = {
+  "draw-point": "point",
+  "draw-line": "linestring",
+  "draw-polygon": "polygon",
+  "draw-rectangle": "rectangle",
+  "draw-circle": "circle",
+  // Draws like a polygon; the finished drawing is a cutter, not a feature.
+  cut: "polygon",
+  edit: "select",
+  move: "select-move"
+};
+function toolMode(tool, disabled = false) {
+  return !tool || disabled ? "render" : TOOL_MODES[tool];
+}
+const NONE_REFUSED = [];
+function selectFlags(kind, snappable) {
+  const area = {
+    feature: kind === "edit" ? {
+      draggable: false,
+      rotateable: true,
+      coordinates: {
+        midpoints: true,
+        draggable: true,
+        deletable: true,
+        snappable
+      }
+    } : { draggable: true, rotateable: true }
+  };
+  return {
+    // A point has one coordinate: dragging the feature is the edit.
+    point: { feature: { draggable: true } },
+    linestring: area,
+    polygon: area,
+    rectangle: area,
+    circle: area
+  };
+}
+function buildModes(snappable, pointerDistance, shapeStyle) {
+  const styles = editorStyles(shapeStyle);
+  const snapping = snappable ? { toCoordinate: true, toLine: true } : void 0;
+  const asStyles = (value) => value;
+  return [
+    new TerraDrawPointMode({
+      modeName: "point",
+      pointerDistance,
+      styles: asStyles(styles.point)
+    }),
+    new TerraDrawLineStringMode({
+      modeName: "linestring",
+      pointerDistance,
+      snapping,
+      styles: asStyles(styles.linestring)
+    }),
+    new TerraDrawPolygonMode({
+      modeName: "polygon",
+      pointerDistance,
+      snapping,
+      styles: asStyles(styles.polygon)
+    }),
+    new TerraDrawRectangleMode({
+      modeName: "rectangle",
+      pointerDistance,
+      styles: asStyles(styles.rectangle)
+    }),
+    new TerraDrawCircleMode({
+      modeName: "circle",
+      pointerDistance,
+      styles: asStyles(styles.circle)
+    }),
+    new TerraDrawSelectMode({
+      modeName: "select",
+      pointerDistance,
+      flags: selectFlags("edit", snappable),
+      styles: asStyles(styles.select)
+    }),
+    new TerraDrawSelectMode({
+      modeName: "select-move",
+      pointerDistance,
+      flags: selectFlags("move", snappable),
+      styles: asStyles(styles.select)
+    }),
+    new TerraDrawRenderMode({
+      modeName: "render",
+      styles: asStyles(styles.render)
+    })
+  ];
+}
+function sameValue(a, b) {
+  if (a === b) return true;
+  if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  const left = a;
+  const right = b;
+  const keys = Object.keys(left).filter((key) => left[key] !== void 0);
+  const other = Object.keys(right).filter((key) => right[key] !== void 0);
+  return keys.length === other.length && keys.every((key) => sameValue(left[key], right[key]));
+}
+function userIds(snapshot) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const entry of snapshot) {
+    if (entry.id != null && fromEditorFeatures([entry]).length > 0) {
+      ids.add(entry.id);
+    }
+  }
+  return ids;
+}
+function useTerraDraw(options) {
+  const map = useMap();
+  const draw = shallowRef(null);
+  const selectedId = ref(null);
+  let refusedNow = NONE_REFUSED;
+  const refused = shallowRef(NONE_REFUSED);
+  const setRefused = (next) => {
+    refusedNow = next.length ? next : NONE_REFUSED;
+    refused.value = refusedNow;
+  };
+  let syncing = false;
+  let knownIds = /* @__PURE__ */ new Set();
+  const features = computed(() => options.state().features);
+  const mode = computed(() => {
+    const { tool, disabled } = options.state();
+    return toolMode(tool, disabled);
+  });
+  let instance = null;
+  let active = false;
+  onMounted(() => {
+    const built = new TerraDraw({
+      adapter: new TerraDrawMapLibreGLAdapter({ map }),
+      modes: buildModes(
+        options.snappable ?? true,
+        options.snapDistance ?? 20,
+        options.shapeStyle ?? {}
+      )
+    });
+    instance = built;
+    active = true;
+    const report = (type) => {
+      const snapshot = built.getSnapshot();
+      knownIds = userIds(snapshot);
+      options.onEdit?.({ type, features: fromEditorFeatures(snapshot) });
+    };
+    built.on("ready", () => {
+      if (active) draw.value = built;
+    });
+    const reportCut = (id) => {
+      const snapshot = built.getSnapshot();
+      const [cutter] = fromEditorFeatures(snapshot.filter((e) => e.id === id));
+      const rest = snapshot.filter((e) => e.id !== id);
+      syncing = true;
+      try {
+        built.removeFeatures([id]);
+      } finally {
+        syncing = false;
+      }
+      knownIds = userIds(rest);
+      if (!cutter) return;
+      options.onEdit?.({
+        type: "cut",
+        features: fromEditorFeatures(rest),
+        cutter
+      });
+    };
+    built.on("finish", (id, context) => {
+      if (!active || syncing) return;
+      if (context.action === "draw" && options.state().tool === "cut") {
+        reportCut(id);
+        return;
+      }
+      report(context.action === "draw" ? "draw" : "edit");
+    });
+    built.on("change", (ids, type) => {
+      if (!active || syncing || type !== "delete") return;
+      if (!ids.some((id) => knownIds.has(id))) return;
+      report("delete");
+    });
+    built.on("select", (id) => {
+      if (active) selectedId.value = id;
+    });
+    built.on("deselect", (id) => {
+      if (active && selectedId.value === id) selectedId.value = null;
+    });
+    built.start();
+  });
+  onBeforeUnmount(() => {
+    active = false;
+    draw.value = null;
+    selectedId.value = null;
+    setRefused(NONE_REFUSED);
+    try {
+      instance?.stop();
+    } catch {
+    }
+    instance = null;
+  });
+  watch(
+    [draw, features],
+    ([current, next]) => {
+      if (!current) return;
+      const snapshot = current.getSnapshot();
+      knownIds = userIds(snapshot);
+      const wanted = toRaw(next);
+      const stillRefused = refusedNow.filter(
+        (entry) => wanted.some((feature) => sameValue(feature, entry))
+      );
+      const drawn = wanted.filter(
+        (feature) => !stillRefused.some((entry) => sameValue(feature, entry))
+      );
+      if (stillRefused.length === refusedNow.length && sameValue(fromEditorFeatures(snapshot), drawn)) {
+        return;
+      }
+      const pairs = wanted.flatMap((feature) => {
+        const editor = toEditorFeatures(
+          [feature],
+          () => current.getFeatureId()
+        )[0];
+        return editor ? [{ feature, editor }] : [];
+      });
+      const refusedEntries = [];
+      syncing = true;
+      try {
+        current.clear();
+        const answers = current.addFeatures(
+          pairs.map((pair) => pair.editor)
+        );
+        answers.forEach((answer, i) => {
+          const pair = pairs[i];
+          if (!answer.valid && pair) refusedEntries.push(pair.feature);
+        });
+      } finally {
+        syncing = false;
+      }
+      knownIds = userIds(current.getSnapshot());
+      setRefused(refusedEntries);
+      selectedId.value = null;
+    },
+    { immediate: true }
+  );
+  watch(
+    [draw, mode],
+    ([current, next]) => {
+      current?.setMode(next);
+    },
+    { immediate: true }
+  );
+  function deleteSelected() {
+    const current = draw.value;
+    if (current && selectedId.value !== null) {
+      current.removeFeatures([selectedId.value]);
+    }
+  }
+  return { selectedId, deleteSelected, refused };
+}
+export {
+  toolMode,
+  useTerraDraw
+};

package/dist/components/maps-osm/geocoding-input.vue.d.ts

@@ -0,0 +1,34 @@
+import type { GeoBBox, GeocodingProvider } from "@chelone/core";
+/** Props for {@link GeocodingInput}. */
+export interface GeocodingInputProps {
+    /** The form field holding the address text. */
+    source: string;
+    /** Written with the picked result's latitude. Left alone when unset. */
+    latSource?: string;
+    /** Written with the picked result's longitude. Left alone when unset. */
+    lngSource?: string;
+    /** Written with the picked result's `[west, south, east, north]`, when it has one. */
+    bboxSource?: string;
+    /** A string is translated; `false` renders none. Defaults to the label of `source`. */
+    label?: string | false;
+    /** Defaults to `chelone.map.search_placeholder`. */
+    placeholder?: string;
+    /** Defaults to the `geocoder` of `MapsProvider`. One of the two is required. */
+    provider?: GeocodingProvider;
+    /** Shortest trimmed query that searches. Defaults to 3. */
+    minChars?: number;
+    /** Typeahead providers only: wait after the last key. Defaults to 300. */
+    debounceMs?: number;
+    countryCodes?: string[];
+    viewBox?: GeoBBox;
+    limit?: number;
+    disabled?: boolean;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<GeocodingInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GeocodingInputProps> & Readonly<{}>, {
+    label: string | false;
+    disabled: boolean;
+    debounceMs: number;
+    minChars: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,268 @@
+import { defineComponent, computed, ref, watch, useId, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode, createElementBlock, createCommentVNode, createElementVNode, createTextVNode, toDisplayString, Fragment, renderList, withModifiers } from "vue";
+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 _sfc_main$4 from "../admin/common/validation-error.vue.js";
+import _sfc_main$1 from "../admin/common/field-label-text.vue.js";
+import { useMapsConfig } from "../maps/use-map.js";
+import _sfc_main$3 from "../ui/button.vue.js";
+import { Field, FieldLabel, FieldError } from "../ui/field.js";
+import _sfc_main$2 from "../ui/input.vue.js";
+import { useGeocode } from "./use-geocode.js";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { class: "relative" };
+const _hoisted_3 = { class: "flex gap-2" };
+const _hoisted_4 = {
+  key: 0,
+  class: "absolute z-10 mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md"
+};
+const _hoisted_5 = {
+  key: 0,
+  role: "status",
+  class: "px-2 py-3 text-sm text-muted-foreground"
+};
+const _hoisted_6 = {
+  key: 1,
+  role: "alert",
+  class: "px-2 py-3 text-sm text-muted-foreground"
+};
+const _hoisted_7 = {
+  key: 2,
+  role: "status",
+  class: "px-2 py-3 text-sm text-muted-foreground"
+};
+const _hoisted_8 = ["id", "aria-selected", "onClick"];
+const _hoisted_9 = { class: "flex flex-col" };
+const _hoisted_10 = {
+  key: 0,
+  class: "text-xs text-muted-foreground"
+};
+const _sfc_main = /* @__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) {
+    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 toText = (raw) => typeof raw === "string" ? raw : raw == null ? "" : String(raw);
+    const saved = computed(() => toText(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) {
+        void search.refetch();
+      }
+      query.value = text.value;
+      open.value = true;
+    }
+    function writeTyped() {
+      setValue(text.value);
+      if (wrappedLat) form.setFieldValue(wrappedLat, null);
+      if (wrappedLng) form.setFieldValue(wrappedLng, null);
+      if (wrappedBbox) form.setFieldValue(wrappedBbox, null);
+    }
+    function pick(result) {
+      setValue(result.displayName);
+      text.value = result.displayName;
+      if (wrappedLat) form.setFieldValue(wrappedLat, result.lat);
+      if (wrappedLng) form.setFieldValue(wrappedLng, result.lng);
+      if (wrappedBbox && result.bbox) {
+        form.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;
+      active.value = (active.value + 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(_sfc_main$1, {
+                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(_sfc_main$2, {
+                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(_sfc_main$3, {
+                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(_sfc_main$4, { error: unref(error) }, null, 8, ["error"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["data-invalid", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/maps-osm/geocoding-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./geocoding-input.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,22 @@
+import type { GeocodingProvider } from "@chelone/core";
+/** Props for {@link MapWithSearch}. */
+export interface MapWithSearchProps {
+    /** The form field holding the latitude. */
+    latSource: string;
+    /** The form field holding the longitude. */
+    lngSource: string;
+    /** The form field holding the address text. */
+    addressSource: string;
+    /** In pixels, or any CSS length. Defaults to 400. */
+    height?: number | string;
+    /** Read once at mount. Defaults to 13. */
+    zoom?: number;
+    /** Defaults to the `geocoder` of `MapsProvider`. One of the two is required. */
+    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;
+    zoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,70 @@
+import { defineComponent, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createVNode } from "vue";
+import { reverseGeocodeQueryOptions } from "@chelone/core";
+import { useQueryClient } from "@tanstack/vue-query";
+import { useCheloneFormContext, useWrappedSource } from "../../form/form-context.js";
+import { cn } from "../../lib/utils.js";
+import _sfc_main$2 from "../maps/lat-lng-input.vue.js";
+import { useMapsConfig } from "../maps/use-map.js";
+import _sfc_main$1 from "./geocoding-input.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "map-with-search",
+  props: {
+    latSource: {},
+    lngSource: {},
+    addressSource: {},
+    height: { default: 400 },
+    zoom: { default: 13 },
+    provider: {},
+    class: {}
+  },
+  setup(__props) {
+    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.getFieldValue(wrappedLat) !== lat || form.getFieldValue(wrappedLng) !== lng) {
+          return;
+        }
+        form.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(_sfc_main$1, {
+          source: props.addressSource,
+          "lat-source": props.latSource,
+          "lng-source": props.lngSource,
+          provider: props.provider
+        }, null, 8, ["source", "lat-source", "lng-source", "provider"]),
+        createVNode(_sfc_main$2, {
+          "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 {
+  _sfc_main as default
+};

package/dist/components/maps-osm/map-with-search2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./map-with-search.vue.js";
+export {
+  _sfc_main as default
+};