@leavepulse/ui 0.16.2 → 0.17.0

package/dist/chunks/LpAddressInput-D29vSoNd.js

@@ -0,0 +1,366 @@
+import { defineComponent, defineAsyncComponent, computed, ref, onMounted, watch, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, unref, createBlock, createCommentVNode, createTextVNode, toDisplayString, renderSlot, normalizeClass } from "vue";
+import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress } from "../components/address.js";
+import { flagEmoji, loadCountries } from "../components/countries.js";
+import { _ as _sfc_main$2 } from "./LpAutocomplete-DIgXmtCA.js";
+import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
+import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
+import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$5 } from "./LpInput-BauZRyzm.js";
+import { _ as _sfc_main$7 } from "./LpModal-CezA8eJ3.js";
+import { _ as _sfc_main$6 } from "./LpSelect-D5mU4cZO.js";
+const _hoisted_1 = { class: "flex flex-col gap-3" };
+const _hoisted_2 = { class: "flex items-stretch gap-2" };
+const _hoisted_3 = { class: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_10rem]" };
+const _hoisted_4 = {
+  key: 1,
+  class: "flex items-center gap-2"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "text-xs text-muted"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpAddressInput",
+  props: {
+    modelValue: {},
+    provider: {},
+    tiles: { default: () => OSM_TILES },
+    only: {},
+    secondLine: { type: Boolean },
+    minChars: { default: 3 },
+    debounce: { default: 350 },
+    language: {},
+    disabled: { type: Boolean },
+    size: { default: "md" },
+    hideMap: { type: Boolean },
+    labels: {}
+  },
+  emits: ["update:modelValue", "pick"],
+  setup(__props, { emit: __emit }) {
+    const LpMapPicker = defineAsyncComponent(() => import("../components/LpMapPicker.vue.js"));
+    const props = __props;
+    const emit = __emit;
+    const DEFAULT_LABELS = {
+      line: "Street and number",
+      linePlaceholder: "Baker Street 221B",
+      secondLine: "Apartment, suite (optional)",
+      secondLinePlaceholder: "Flat 4",
+      city: "City",
+      cityPlaceholder: "London",
+      postalCode: "Postcode",
+      postalCodePlaceholder: "NW1 6XE",
+      country: "Country",
+      countryPlaceholder: "Select country…",
+      countrySearch: "Search country…",
+      pickOnMap: "Pick on map",
+      mapTitle: "Pick a location",
+      mapHint: "Click the map to drop a pin, drag to move around.",
+      use: "Use this address",
+      cancel: "Cancel",
+      searching: "Searching…",
+      noSuggestions: "No suggestions",
+      nothingHere: "No address found here"
+    };
+    const text = computed(() => ({ ...DEFAULT_LABELS, ...props.labels }));
+    const fallbackProvider = createNominatimProvider();
+    const geocoder = computed(() => props.provider ?? fallbackProvider);
+    const value = computed(() => props.modelValue ?? emptyAddress());
+    function patch(changes) {
+      emit("update:modelValue", { ...value.value, ...changes });
+    }
+    const countries = ref([]);
+    const countryOptions = computed(
+      () => countries.value.map((country) => ({
+        value: country.iso2,
+        label: `${flagEmoji(country.iso2)} ${country.name}`
+      }))
+    );
+    onMounted(async () => {
+      const list = await loadCountries();
+      const only = props.only?.map((code) => code.toUpperCase());
+      countries.value = only?.length ? list.filter((c) => only.includes(c.iso2)) : list;
+    });
+    function useSuggestions(field) {
+      const options = ref([]);
+      const loading = ref(false);
+      let timer;
+      let controller;
+      function query(term) {
+        if (timer) clearTimeout(timer);
+        controller?.abort();
+        if (term.trim().length < props.minChars) {
+          options.value = [];
+          loading.value = false;
+          return;
+        }
+        loading.value = true;
+        timer = setTimeout(async () => {
+          controller = new AbortController();
+          try {
+            options.value = await geocoder.value.search(term.trim(), field, {
+              country: value.value.country || void 0,
+              language: props.language,
+              signal: controller.signal
+            });
+          } catch {
+            options.value = [];
+          } finally {
+            loading.value = false;
+          }
+        }, props.debounce);
+      }
+      return { options, loading, query };
+    }
+    const lineSuggestions = useSuggestions("line");
+    const citySuggestions = useSuggestions("city");
+    function applySuggestion(suggestion, keep) {
+      const parsed = suggestion.address;
+      const changes = { lat: suggestion.lat, lon: suggestion.lon };
+      if (parsed.line && keep !== "line") changes.line = parsed.line;
+      if (parsed.city) changes.city = parsed.city;
+      if (parsed.postalCode) changes.postalCode = parsed.postalCode;
+      if (parsed.country) changes.country = parsed.country;
+      patch(changes);
+    }
+    function onLineSelect(chosen) {
+      const suggestion = lineSuggestions.options.value.find((option) => option.value === chosen);
+      if (suggestion) applySuggestion(suggestion, "line");
+    }
+    function onCitySelect(chosen) {
+      const suggestion = citySuggestions.options.value.find((option) => option.value === chosen);
+      if (suggestion) applySuggestion(suggestion, "city");
+    }
+    const mapOpen = ref(false);
+    const point = ref();
+    const resolved = ref();
+    const resolving = ref(false);
+    computed(
+      () => countries.value.find((c) => c.iso2 === value.value.country)?.name
+    );
+    const preview = computed(() => {
+      if (resolving.value) return text.value.searching;
+      if (!point.value) return text.value.mapHint;
+      if (!resolved.value) return text.value.nothingHere;
+      const parsed = resolved.value.address;
+      return formatAddress(
+        {
+          line: parsed.line ?? "",
+          city: parsed.city ?? "",
+          postalCode: parsed.postalCode ?? "",
+          country: parsed.country ?? ""
+        },
+        countries.value.find((c) => c.iso2 === parsed.country)?.name
+      );
+    });
+    watch(mapOpen, (open) => {
+      if (!open) return;
+      point.value = value.value.lat != null && value.value.lon != null ? { lat: value.value.lat, lon: value.value.lon } : void 0;
+      resolved.value = void 0;
+    });
+    async function onPick(next) {
+      point.value = next;
+      resolving.value = true;
+      resolved.value = void 0;
+      try {
+        resolved.value = await geocoder.value.reverse(next.lat, next.lon, {
+          language: props.language
+        });
+      } catch {
+        resolved.value = void 0;
+      } finally {
+        resolving.value = false;
+      }
+    }
+    function confirmPoint() {
+      if (!point.value) return;
+      const parsed = resolved.value?.address ?? {};
+      patch({
+        line: parsed.line ?? value.value.line,
+        city: parsed.city ?? value.value.city,
+        postalCode: parsed.postalCode ?? value.value.postalCode,
+        country: parsed.country ?? value.value.country,
+        lat: point.value.lat,
+        lon: point.value.lon
+      });
+      emit("pick", point.value);
+      mapOpen.value = false;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, {
+          label: text.value.line
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(_sfc_main$2, {
+                class: "min-w-0 flex-1",
+                "model-value": value.value.line,
+                options: unref(lineSuggestions).options.value,
+                loading: unref(lineSuggestions).loading.value,
+                filter: false,
+                "min-chars": __props.minChars,
+                disabled: __props.disabled,
+                size: __props.size,
+                placeholder: text.value.linePlaceholder,
+                "empty-text": text.value.noSuggestions,
+                "loading-text": text.value.searching,
+                icon: "lucide:map-pin",
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = (next) => {
+                  patch({ line: next });
+                  unref(lineSuggestions).query(next);
+                }),
+                onSelect: onLineSelect
+              }, null, 8, ["model-value", "options", "loading", "min-chars", "disabled", "size", "placeholder", "empty-text", "loading-text"]),
+              !__props.hideMap ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 0,
+                variant: "soft",
+                size: __props.size,
+                square: "",
+                disabled: __props.disabled,
+                title: text.value.pickOnMap,
+                "aria-label": text.value.pickOnMap,
+                onClick: _cache[1] || (_cache[1] = ($event) => mapOpen.value = true)
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$4, {
+                    name: "lucide:map",
+                    size: 16
+                  })
+                ]),
+                _: 1
+              }, 8, ["size", "disabled", "title", "aria-label"])) : createCommentVNode("", true)
+            ])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        __props.secondLine ? (openBlock(), createBlock(_sfc_main$5, {
+          key: 0,
+          "model-value": value.value.line2 ?? "",
+          label: text.value.secondLine,
+          placeholder: text.value.secondLinePlaceholder,
+          disabled: __props.disabled,
+          size: __props.size,
+          autocomplete: "address-line2",
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = (next) => patch({ line2: next }))
+        }, null, 8, ["model-value", "label", "placeholder", "disabled", "size"])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(_sfc_main$1, {
+            label: text.value.city
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                "model-value": value.value.city,
+                options: unref(citySuggestions).options.value,
+                loading: unref(citySuggestions).loading.value,
+                filter: false,
+                "min-chars": __props.minChars,
+                disabled: __props.disabled,
+                size: __props.size,
+                placeholder: text.value.cityPlaceholder,
+                "empty-text": text.value.noSuggestions,
+                "loading-text": text.value.searching,
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = (next) => {
+                  patch({ city: next });
+                  unref(citySuggestions).query(next);
+                }),
+                onSelect: onCitySelect
+              }, null, 8, ["model-value", "options", "loading", "min-chars", "disabled", "size", "placeholder", "empty-text", "loading-text"])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          createVNode(_sfc_main$5, {
+            "model-value": value.value.postalCode,
+            label: text.value.postalCode,
+            placeholder: text.value.postalCodePlaceholder,
+            disabled: __props.disabled,
+            size: __props.size,
+            autocomplete: "postal-code",
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = (next) => patch({ postalCode: next }))
+          }, null, 8, ["model-value", "label", "placeholder", "disabled", "size"])
+        ]),
+        createVNode(_sfc_main$1, {
+          label: text.value.country
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$6, {
+              "model-value": value.value.country,
+              options: countryOptions.value,
+              placeholder: text.value.countryPlaceholder,
+              "search-placeholder": text.value.countrySearch,
+              disabled: __props.disabled,
+              size: __props.size,
+              searchable: "",
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = (next) => patch({ country: String(next ?? "") }))
+            }, null, 8, ["model-value", "options", "placeholder", "search-placeholder", "disabled", "size"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        !__props.hideMap ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          createVNode(_sfc_main$3, {
+            variant: "soft",
+            size: __props.size === "lg" ? "md" : "sm",
+            disabled: __props.disabled,
+            onClick: _cache[6] || (_cache[6] = ($event) => mapOpen.value = true)
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$4, {
+                name: "lucide:map",
+                size: 15
+              }),
+              createTextVNode(" " + toDisplayString(text.value.pickOnMap), 1)
+            ]),
+            _: 1
+          }, 8, ["size", "disabled"]),
+          value.value.lat != null && value.value.lon != null ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(value.value.lat.toFixed(5)) + ", " + toDisplayString(value.value.lon.toFixed(5)), 1)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createVNode(_sfc_main$7, {
+          open: mapOpen.value,
+          "onUpdate:open": _cache[8] || (_cache[8] = ($event) => mapOpen.value = $event),
+          title: text.value.mapTitle,
+          size: "2xl"
+        }, {
+          footer: withCtx(() => [
+            createVNode(_sfc_main$3, {
+              variant: "ghost",
+              onClick: _cache[7] || (_cache[7] = ($event) => mapOpen.value = false)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(text.value.cancel), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(_sfc_main$3, {
+              disabled: !point.value,
+              onClick: confirmPoint
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(text.value.use), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "map", {
+              point: point.value,
+              setPoint: onPick,
+              tiles: __props.tiles
+            }, () => [
+              createVNode(unref(LpMapPicker), {
+                "model-value": point.value,
+                tiles: __props.tiles,
+                "onUpdate:modelValue": onPick
+              }, null, 8, ["model-value", "tiles"])
+            ]),
+            createElementVNode("p", {
+              class: normalizeClass(["mt-3 min-h-5 text-sm", resolved.value || resolving.value ? "text-ink" : "text-muted"])
+            }, toDisplayString(preview.value), 3)
+          ]),
+          _: 3
+        }, 8, ["open", "title"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};