ablok-components 0.3.58 → 0.3.59

package/dist/components/organisms/location-finder/location-finder.vue.js

@@ -0,0 +1,634 @@
+import { defineComponent as Ce, ref as V, computed as o, watch as D, onMounted as Fe, openBlock as d, createElementBlock as m, normalizeClass as te, createBlock as ae, createCommentVNode as _, createElementVNode as s, unref as E, toDisplayString as f, createVNode as Pe, createTextVNode as U, Fragment as ne, renderList as Ve } from "vue";
+import { useI18n as $e } from "vue-i18n";
+import Ne from "../../molecules/auto-suggest/auto-suggest.vue.js";
+/* empty css                                             */
+import Ue from "../../molecules/base-map/base-map.vue.js";
+/* empty css                                     */
+import Ae from "../../molecules/location-list/location-list.vue.js";
+/* empty css                                               */
+import { useDirections as Ge } from "../../../composables/useDirections.js";
+import { useGeocoding as He } from "../../../composables/useGeocoding.js";
+import { useGeolocation as je } from "../../../composables/useGeolocation.js";
+const Oe = {
+  class: "location-finder",
+  "data-testid": "location-finder"
+}, qe = { class: "location-finder__actions" }, ze = ["disabled"], Ie = {
+  key: 1,
+  class: "location-finder__notice",
+  "data-testid": "location-finder-error"
+}, Qe = { class: "location-finder__map-panel" }, We = ["aria-label"], Ke = { class: "location-finder__legend-item" }, Ye = { class: "location-finder__legend-item" }, Je = { class: "location-finder__legend-item" }, Xe = { class: "location-finder__legend-item" }, Ze = {
+  key: 0,
+  class: "location-finder__sidebar"
+}, et = {
+  key: 1,
+  class: "location-finder__summary",
+  "data-testid": "location-finder-directions"
+}, tt = { class: "location-finder__summary-title" }, at = {
+  key: 0,
+  class: "location-finder__summary-copy"
+}, nt = { class: "location-finder__summary-grid" }, lt = { class: "location-finder__summary-label" }, ot = { "data-testid": "location-finder-distance" }, it = { class: "location-finder__summary-label" }, rt = { "data-testid": "location-finder-duration" }, st = {
+  key: 0,
+  class: "location-finder__steps"
+}, ut = { key: 0 }, ct = {
+  key: 2,
+  class: "location-finder__summary-copy"
+}, St = /* @__PURE__ */ Ce({
+  __name: "location-finder",
+  props: {
+    modelValue: {
+      type: Object,
+      default: null
+    },
+    locations: {
+      type: Array,
+      default: () => []
+    },
+    center: {
+      type: Object,
+      default: null
+    },
+    distance: {
+      type: Number,
+      default: null
+    },
+    userLocation: {
+      type: Object,
+      default: null
+    },
+    messages: {
+      type: Object,
+      default: () => ({})
+    },
+    mapHeight: {
+      type: String,
+      default: "26rem"
+    },
+    searchLabel: {
+      type: String,
+      default: ""
+    },
+    searchPlaceholder: {
+      type: String,
+      default: ""
+    },
+    resultsLabel: {
+      type: String,
+      default: ""
+    },
+    emptyText: {
+      type: String,
+      default: ""
+    },
+    locateButtonLabel: {
+      type: String,
+      default: ""
+    },
+    stopTrackingLabel: {
+      type: String,
+      default: ""
+    },
+    mapHelperText: {
+      type: String,
+      default: ""
+    },
+    enableGeocoding: {
+      type: Boolean,
+      default: !1
+    },
+    geocodingEndpoint: {
+      type: String,
+      default: "https://nominatim.openstreetmap.org/search"
+    },
+    reverseGeocodingEndpoint: {
+      type: String,
+      default: "https://nominatim.openstreetmap.org/reverse"
+    },
+    geocodingLimit: {
+      type: Number,
+      default: 5
+    },
+    geocodingMinQueryLength: {
+      type: Number,
+      default: 3
+    },
+    customGeocodingFetch: null,
+    enableDirections: {
+      type: Boolean,
+      default: !1
+    },
+    directionsEndpoint: {
+      type: String,
+      default: "https://router.project-osrm.org/route/v1"
+    },
+    routeProfile: {
+      type: String,
+      default: "driving"
+    },
+    customDirectionsFetch: null,
+    showDirectionsSummary: {
+      type: Boolean,
+      default: !0
+    },
+    showDirectionsSteps: {
+      type: Boolean,
+      default: !0
+    },
+    directionsTitle: {
+      type: String,
+      default: ""
+    },
+    directionsEmptyText: {
+      type: String,
+      default: ""
+    },
+    distanceLabel: {
+      type: String,
+      default: ""
+    },
+    durationLabel: {
+      type: String,
+      default: ""
+    },
+    routeColor: {
+      type: String,
+      default: "#2563eb"
+    },
+    routeWeight: {
+      type: Number,
+      default: 5
+    },
+    selectionRadius: {
+      type: Number,
+      default: 0
+    },
+    selectionRadiusColor: {
+      type: String,
+      default: "#2563eb"
+    },
+    selectionRadiusFillColor: {
+      type: String,
+      default: "#60a5fa"
+    },
+    mapStyle: {
+      type: String,
+      default: "streets"
+    },
+    tileLayerUrl: {
+      type: String,
+      default: ""
+    },
+    tileLayerAttribution: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    interactive: {
+      type: Boolean,
+      default: !1
+    },
+    showSearch: {
+      type: Boolean,
+      default: !0
+    },
+    showLegend: {
+      type: Boolean,
+      default: !0
+    },
+    showSidebar: {
+      type: Boolean,
+      default: !0
+    },
+    showTrackButton: {
+      type: Boolean,
+      default: !0
+    },
+    trackUser: {
+      type: Boolean,
+      default: !0
+    },
+    autoLocate: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "update:distance", "select", "search", "track-user"],
+  setup(c, { emit: le }) {
+    const q = {
+      lat: 48.8566,
+      lng: 2.3522
+    }, oe = {
+      searchLabel: "Search locations",
+      searchPlaceholder: "Search by name or address",
+      resultsLabel: "Locations",
+      emptyText: "No locations found.",
+      locateButtonLabel: "Use my location",
+      stopTrackingLabel: "Stop tracking",
+      mapHelperText: "Select a location from the list or use the map.",
+      directionsTitle: "Directions",
+      directionsEmptyText: "Select a destination and share your location to preview a route.",
+      distanceLabel: "Distance",
+      durationLabel: "ETA",
+      loadingRoute: "Loading route…",
+      legendAriaLabel: "Map marker types",
+      legendLocations: "Locations",
+      legendSelected: "Selected",
+      legendSearchResult: "Search result",
+      userLocationLabel: "Your location",
+      pinnedLocationTitle: "Pinned location",
+      selectedLocationLabel: "Selected location"
+    }, n = c, p = le, { t: ie, te: re } = $e({ useScope: "global" }), b = je(), T = He(), L = Ge(), R = V(""), k = V(M(x(n.modelValue))), v = V(M(x(n.modelValue)) ? null : x(n.modelValue)), y = V(i(n.modelValue) || i(n.center) || i(n.locations[0]) || q), h = V(!1), z = o(() => i(n.userLocation)), g = o(() => b.position.value || z.value), A = o(() => i(v.value)), C = o(() => i(k.value)), I = o(() => g.value || A.value), se = o(() => !I.value || !C.value ? null : ye(I.value, C.value)), G = o(() => i(n.modelValue) || A.value || C.value), Q = o(() => b.error.value || T.error.value || L.error.value || ""), ue = o(() => n.showSearch || n.trackUser && n.showTrackButton), H = o(() => n.enableDirections && n.showDirectionsSummary), W = o(() => n.showSidebar || H.value), ce = o(() => _e(L.distanceMeters.value)), de = o(() => Se(L.durationSeconds.value)), r = o(() => ({
+      searchLabel: u("searchLabel", n.searchLabel),
+      searchPlaceholder: u("searchPlaceholder", n.searchPlaceholder),
+      resultsLabel: u("resultsLabel", n.resultsLabel),
+      emptyText: u("emptyText", n.emptyText),
+      locateButtonLabel: u("locateButtonLabel", n.locateButtonLabel),
+      stopTrackingLabel: u("stopTrackingLabel", n.stopTrackingLabel),
+      mapHelperText: u("mapHelperText", n.mapHelperText),
+      directionsTitle: u("directionsTitle", n.directionsTitle),
+      directionsEmptyText: u("directionsEmptyText", n.directionsEmptyText),
+      distanceLabel: u("distanceLabel", n.distanceLabel),
+      durationLabel: u("durationLabel", n.durationLabel),
+      loadingRoute: u("loadingRoute"),
+      legendAriaLabel: u("legendAriaLabel"),
+      legendLocations: u("legendLocations"),
+      legendSelected: u("legendSelected"),
+      legendSearchResult: u("legendSearchResult"),
+      userLocationLabel: u("userLocationLabel"),
+      pinnedLocationTitle: u("pinnedLocationTitle"),
+      selectedLocationLabel: u("selectedLocationLabel")
+    })), fe = o(() => v.value ? F(v.value) : r.value.selectedLocationLabel), me = o(() => b.isTracking.value && h.value ? r.value.stopTrackingLabel : r.value.locateButtonLabel);
+    D(() => n.modelValue, (e) => {
+      const t = x(e), a = M(t);
+      a ? (k.value = a, v.value = null) : t && (v.value = t);
+      const l = i(e);
+      l && (y.value = l);
+    }, { immediate: !0 }), D(() => n.center, (e) => {
+      const t = i(e);
+      t && (y.value = t);
+    }, { deep: !0 }), D(g, (e) => {
+      e && h.value && (y.value = e);
+    }, { deep: !0 }), D(se, (e) => {
+      p("update:distance", e);
+    }, { immediate: !0 }), D(R, async (e) => {
+      if (p("search", e), !n.enableGeocoding) {
+        T.clearResults();
+        return;
+      }
+      const t = e.trim();
+      if (t.length < n.geocodingMinQueryLength) {
+        T.clearResults();
+        return;
+      }
+      await T.search(t, {
+        endpoint: n.geocodingEndpoint,
+        customFetch: n.customGeocodingFetch,
+        limit: n.geocodingLimit
+      });
+    }), D(
+      () => ({
+        enabled: n.enableDirections,
+        origin: g.value,
+        destination: G.value,
+        profile: n.routeProfile
+      }),
+      async ({ enabled: e, origin: t, destination: a, profile: l }) => {
+        if (!e || !t || !a || P(t, a)) {
+          L.clearRoute();
+          return;
+        }
+        await L.fetchRoute(t, a, {
+          endpoint: n.directionsEndpoint,
+          profile: l,
+          customFetch: n.customDirectionsFetch
+        });
+      },
+      { immediate: !0, deep: !0 }
+    ), Fe(async () => {
+      n.autoLocate && n.trackUser && await Z();
+    });
+    const ge = o(() => {
+      const e = J(R.value).trim();
+      return e ? n.locations.filter((t) => [F(t), X(t)].filter(Boolean).some((a) => J(a).includes(e))) : n.locations;
+    }), ve = o(() => T.results.value.map((e) => ({
+      id: e.id,
+      title: e.title,
+      address: e.address,
+      lat: e.lat,
+      lng: e.lng,
+      source: e.source
+    }))), K = o(() => {
+      if (!R.value.trim())
+        return n.locations;
+      const e = ge.value;
+      return e.length ? e : n.locations;
+    }), w = o(() => K.value), Y = o(() => Le(
+      K.value,
+      n.enableGeocoding ? ve.value : []
+    )), pe = o(() => Array.from(new Set(Y.value.map((e) => j(e))))), he = o(
+      () => w.value.map((e) => {
+        const t = i(e);
+        return t ? {
+          id: S(e),
+          label: F(e),
+          ...t,
+          type: C.value && P(t, C.value) ? "selected" : "list"
+        } : null;
+      }).filter((e) => !!e)
+    ), be = o(() => h.value && g.value ? g.value : y.value || G.value || g.value || i(w.value[0]) || q);
+    function u(e, t) {
+      const a = n.messages?.[e];
+      if (typeof a == "string" && a.trim())
+        return a;
+      if (typeof t == "string" && t.trim())
+        return t;
+      const l = `locationFinder.${String(e)}`;
+      return re(l) ? String(ie(l)) : oe[e];
+    }
+    function i(e) {
+      if (!e)
+        return null;
+      const t = Number(e.lat), a = Number(e.lng);
+      return !Number.isFinite(t) || !Number.isFinite(a) ? null : { lat: t, lng: a };
+    }
+    function x(e) {
+      if (!e)
+        return null;
+      const t = i(e);
+      return t ? {
+        ...e,
+        ...t
+      } : null;
+    }
+    function S(e) {
+      return e ? typeof e != "object" ? e : e.id ?? e.value ?? j(e) : null;
+    }
+    function M(e) {
+      return e && n.locations.find((t) => S(t) === S(e) || P(i(t), i(e))) || null;
+    }
+    function J(e) {
+      return `${e ?? ""}`.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+    }
+    function F(e) {
+      return `${e.title || e.label || e.name || "Location"}`;
+    }
+    function X(e) {
+      return `${e.address || e.description || e.subtitle || ""}`;
+    }
+    function j(e) {
+      const t = F(e), a = X(e);
+      return a ? `${t} — ${a}` : t;
+    }
+    function Le(e, t) {
+      const a = [...e];
+      return t.forEach((l) => {
+        a.some((N) => S(N) === S(l) || P(i(N), i(l))) || a.push(l);
+      }), a;
+    }
+    function P(e, t) {
+      return !e || !t ? !1 : Math.abs(e.lat - t.lat) < 1e-6 && Math.abs(e.lng - t.lng) < 1e-6;
+    }
+    function ye(e, t) {
+      const a = (Re) => Re * (Math.PI / 180), B = a(t.lat - e.lat), N = a(t.lng - e.lng), Be = a(e.lat), De = a(t.lat), ee = Math.sin(B / 2) ** 2 + Math.cos(Be) * Math.cos(De) * Math.sin(N / 2) ** 2, Ee = 2 * Math.atan2(Math.sqrt(ee), Math.sqrt(1 - ee));
+      return Math.round(6371e3 * Ee);
+    }
+    function _e(e) {
+      return e === null || !Number.isFinite(e) ? "—" : e >= 1e3 ? `${(e / 1e3).toFixed(1)} km` : `${Math.round(e)} m`;
+    }
+    function Se(e) {
+      if (e === null || !Number.isFinite(e))
+        return "—";
+      const t = Math.max(1, Math.round(e / 60));
+      if (t < 60)
+        return `${t} min`;
+      const a = Math.floor(t / 60), l = t % 60;
+      return l ? `${a} h ${l} min` : `${a} h`;
+    }
+    function $(e) {
+      const t = x(e), a = M(t);
+      if (h.value = !1, !t) {
+        p("update:modelValue", null);
+        return;
+      }
+      k.value = a || t;
+      const l = i(t);
+      l && (y.value = l), p("update:modelValue", t), p("select", t);
+    }
+    function O(e) {
+      const t = x(e), a = M(t);
+      if (h.value = !1, !t) {
+        p("update:modelValue", null);
+        return;
+      }
+      a ? (k.value = a, v.value = null) : v.value = t;
+      const l = i(t);
+      l && (y.value = l), p("update:modelValue", t), p("select", t);
+    }
+    function Te(e) {
+      const t = Y.value.find((a) => j(a) === e || F(a) === e);
+      if (t) {
+        if (M(t)) {
+          $(t), v.value = null;
+          return;
+        }
+        O(t);
+      }
+    }
+    function ke(e) {
+      $(e);
+    }
+    function we(e) {
+      if (e.id === "user-location" && g.value) {
+        y.value = g.value, h.value = !0, p("track-user", g.value);
+        return;
+      }
+      const t = w.value.find((a) => S(a) === e.id) || w.value.find((a) => {
+        const l = i(a);
+        return l && Math.abs(l.lat - e.lat) < 1e-6 && Math.abs(l.lng - e.lng) < 1e-6;
+      });
+      if (t) {
+        $(t);
+        return;
+      }
+      v.value && (S(v.value) === e.id || P(i(v.value), { lat: e.lat, lng: e.lng })) && O(v.value);
+    }
+    async function xe(e) {
+      if (y.value = e, h.value = !1, !n.interactive)
+        return;
+      const t = w.value.find((l) => {
+        const B = i(l);
+        return B && Math.abs(B.lat - e.lat) < 1e-6 && Math.abs(B.lng - e.lng) < 1e-6;
+      });
+      if (t) {
+        $(t);
+        return;
+      }
+      const a = await Me(e, r.value.pinnedLocationTitle);
+      O(a);
+    }
+    async function Me(e, t) {
+      if (!n.enableGeocoding)
+        return {
+          id: `pin-${e.lat}-${e.lng}`,
+          title: t,
+          lat: e.lat,
+          lng: e.lng
+        };
+      const a = await T.reverse(e, {
+        reverseEndpoint: n.reverseGeocodingEndpoint,
+        customFetch: n.customGeocodingFetch
+      });
+      return a ? {
+        id: a.id,
+        title: a.title || t,
+        address: a.address,
+        lat: a.lat,
+        lng: a.lng,
+        source: a.source
+      } : {
+        id: `pin-${e.lat}-${e.lng}`,
+        title: t,
+        lat: e.lat,
+        lng: e.lng
+      };
+    }
+    async function Z() {
+      if (b.isTracking.value && h.value) {
+        b.stopTracking(), h.value = !1;
+        return;
+      }
+      if (g.value) {
+        y.value = g.value, h.value = !0, p("track-user", g.value), !b.isTracking.value && !z.value && b.startTracking();
+        return;
+      }
+      const e = await b.locate();
+      e && (y.value = e, h.value = !0, p("track-user", e), b.startTracking());
+    }
+    return (e, t) => (d(), m("div", Oe, [
+      ue.value ? (d(), m("div", {
+        key: 0,
+        class: te(["location-finder__toolbar", { "location-finder__toolbar--actions-only": !n.showSearch }])
+      }, [
+        n.showSearch ? (d(), ae(Ne, {
+          key: 0,
+          modelValue: R.value,
+          "onUpdate:modelValue": t[0] || (t[0] = (a) => R.value = a),
+          class: "location-finder__search",
+          label: r.value.searchLabel,
+          placeholder: r.value.searchPlaceholder,
+          options: pe.value,
+          disabled: c.disabled,
+          "onUpdate:selection": Te
+        }, null, 8, ["modelValue", "label", "placeholder", "options", "disabled"])) : _("", !0),
+        s("div", qe, [
+          c.trackUser && n.showTrackButton ? (d(), m("button", {
+            key: 0,
+            type: "button",
+            class: "btn btn-outline-primary btn-sm location-finder__locate",
+            disabled: c.disabled || E(b).pending.value,
+            "data-testid": "location-finder-locate",
+            onClick: Z
+          }, f(me.value), 9, ze)) : _("", !0)
+        ])
+      ], 2)) : _("", !0),
+      Q.value ? (d(), m("p", Ie, f(Q.value), 1)) : _("", !0),
+      s("div", {
+        class: te(["location-finder__layout", {
+          "location-finder__layout--with-summary": H.value,
+          "location-finder__layout--full-width": !W.value
+        }])
+      }, [
+        s("div", Qe, [
+          Pe(Ue, {
+            class: "location-finder__map",
+            center: be.value,
+            markers: he.value,
+            "model-value": A.value,
+            "user-location": g.value,
+            "user-location-label": r.value.userLocationLabel,
+            "selected-location-label": fe.value,
+            "route-coordinates": E(L).routeCoordinates.value,
+            "route-color": c.routeColor,
+            "route-weight": c.routeWeight,
+            "selection-radius": c.selectionRadius,
+            "selection-radius-center": G.value,
+            "selection-radius-color": c.selectionRadiusColor,
+            "selection-radius-fill-color": c.selectionRadiusFillColor,
+            "map-style": c.mapStyle,
+            "tile-layer-url": c.tileLayerUrl,
+            "tile-layer-attribution": c.tileLayerAttribution,
+            height: c.mapHeight,
+            interactive: c.interactive,
+            disabled: c.disabled,
+            "helper-text": r.value.mapHelperText,
+            "onUpdate:modelValue": xe,
+            onMarkerClick: we
+          }, null, 8, ["center", "markers", "model-value", "user-location", "user-location-label", "selected-location-label", "route-coordinates", "route-color", "route-weight", "selection-radius", "selection-radius-center", "selection-radius-color", "selection-radius-fill-color", "map-style", "tile-layer-url", "tile-layer-attribution", "height", "interactive", "disabled", "helper-text"]),
+          n.showLegend ? (d(), m("div", {
+            key: 0,
+            class: "location-finder__legend",
+            "data-testid": "location-finder-legend",
+            "aria-label": r.value.legendAriaLabel
+          }, [
+            s("span", Ke, [
+              t[2] || (t[2] = s("span", { class: "location-finder__legend-swatch location-finder__legend-swatch--list" }, null, -1)),
+              U(" " + f(r.value.legendLocations), 1)
+            ]),
+            s("span", Ye, [
+              t[3] || (t[3] = s("span", { class: "location-finder__legend-swatch location-finder__legend-swatch--selected" }, null, -1)),
+              U(" " + f(r.value.legendSelected), 1)
+            ]),
+            s("span", Je, [
+              t[4] || (t[4] = s("span", { class: "location-finder__legend-swatch location-finder__legend-swatch--search" }, null, -1)),
+              U(" " + f(r.value.legendSearchResult), 1)
+            ]),
+            s("span", Xe, [
+              t[5] || (t[5] = s("span", { class: "location-finder__legend-swatch location-finder__legend-swatch--user" }, null, -1)),
+              U(" " + f(r.value.userLocationLabel), 1)
+            ])
+          ], 8, We)) : _("", !0)
+        ]),
+        W.value ? (d(), m("aside", Ze, [
+          n.showSidebar ? (d(), ae(Ae, {
+            key: 0,
+            modelValue: k.value,
+            "onUpdate:modelValue": t[1] || (t[1] = (a) => k.value = a),
+            class: "location-finder__results",
+            locations: w.value,
+            label: r.value.resultsLabel,
+            "empty-text": r.value.emptyText,
+            onSelect: ke
+          }, null, 8, ["modelValue", "locations", "label", "empty-text"])) : _("", !0),
+          H.value ? (d(), m("div", et, [
+            s("p", tt, f(r.value.directionsTitle), 1),
+            E(L).pending.value ? (d(), m("p", at, f(r.value.loadingRoute), 1)) : E(L).hasRoute.value ? (d(), m(ne, { key: 1 }, [
+              s("div", nt, [
+                s("div", null, [
+                  s("p", lt, f(r.value.distanceLabel), 1),
+                  s("strong", ot, f(ce.value), 1)
+                ]),
+                s("div", null, [
+                  s("p", it, f(r.value.durationLabel), 1),
+                  s("strong", rt, f(de.value), 1)
+                ])
+              ]),
+              c.showDirectionsSteps && E(L).steps.value.length ? (d(), m("ol", st, [
+                (d(!0), m(ne, null, Ve(E(L).steps.value.slice(0, 5), (a, l) => (d(), m("li", {
+                  key: `${a.instruction}-${l}`
+                }, [
+                  s("span", null, f(a.instruction), 1),
+                  a.name ? (d(), m("small", ut, f(a.name), 1)) : _("", !0)
+                ]))), 128))
+              ])) : _("", !0)
+            ], 64)) : (d(), m("p", ct, f(r.value.directionsEmptyText), 1))
+          ])) : _("", !0)
+        ])) : _("", !0)
+      ], 2)
+    ]));
+  }
+});
+export {
+  St as default
+};

package/dist/components/organisms/location-finder/location-finder.vue3.js

@@ -0,0 +1,5 @@
+import o from "./location-finder.vue.js";
+/* empty css                     */
+export {
+  o as default
+};