@stachelock/ui 0.6.15 → 0.6.16

package/dist/maps/UiMap.js

@@ -1,16 +1,21 @@
-import { defineComponent as fe, defineAsyncComponent as pe, ref as x, computed as u, watch as y, onMounted as he, provide as ye, createElementBlock as p, openBlock as m, normalizeStyle as T, normalizeClass as i, createCommentVNode as g, createBlock as be, renderSlot as b, unref as a, createElementVNode as c, toDisplayString as w, createVNode as v, withCtx as ve } from "vue";
-import { ExclamationCircleIcon as Ce, MapPinIcon as ke, PlusIcon as xe, MinusIcon as we } from "@heroicons/vue/24/outline";
-import { u as Me } from "../useMap-BGg0H582.js";
-import { useTheme as Be } from "../composables/useTheme.js";
-import { _ as ze } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const Se = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ze = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3 sl-text-center sl-max-w-md" }, Te = { class: "sl-text-center sl-p-6" }, De = /* @__PURE__ */ fe({
+import { defineComponent as he, defineAsyncComponent as ye, ref as v, computed as u, watch as b, onMounted as ve, provide as be, createElementBlock as h, openBlock as m, normalizeStyle as I, normalizeClass as i, createCommentVNode as g, createBlock as ke, renderSlot as k, unref as a, createElementVNode as c, toDisplayString as w, createVNode as C, withCtx as Ce } from "vue";
+import { ExclamationCircleIcon as xe, MapPinIcon as Me, PlusIcon as we, MinusIcon as Be } from "@heroicons/vue/24/outline";
+import { u as Se } from "../useMap-CM59TKX6.js";
+import { useTheme as ze } from "../composables/useTheme.js";
+import { _ as Ze } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const Te = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ie = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3 sl-text-center sl-max-w-md" }, Le = { class: "sl-text-center sl-p-6" }, De = /* @__PURE__ */ he({
   __name: "UiMap",
   props: {
-    /** Unique map ID */
+    /** Unique map ID (HTML element ID) */
     id: {
       type: String,
       default: () => `sl-map-${Date.now()}`
     },
+    /** Google Cloud Map ID (required for Advanced Markers) */
+    googleMapId: {
+      type: String,
+      default: ""
+    },
     /** Google Maps API key (optional if provided via plugin) */
     apiKey: {
       type: String,
@@ -218,44 +223,47 @@ const Se = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ze = { cla
     }
   },
   emits: ["click", "dblclick", "rightclick", "center-changed", "zoom-changed", "bounds-changed", "map-type-changed", "idle", "dragstart", "drag", "dragend", "tilt-changed", "heading-changed", "ready", "error", "update:center", "update:zoom"],
-  setup(l, { expose: D, emit: I }) {
-    const L = pe(
+  setup(l, { expose: L, emit: D }) {
+    const P = ye(
       () => import("vue3-google-map").then((e) => e.GoogleMap)
-    ), s = l, r = I, { isDark: n } = Be(), {
+    ), o = l, r = D, { isDark: n } = ze(), {
       isApiLoading: E,
-      isApiReady: M,
+      isApiReady: B,
       apiError: N,
-      apiPromise: P,
-      mapStyles: R,
+      apiPromise: R,
+      mapStyles: U,
       center: j,
       zoom: A,
-      initializeApi: B,
-      setMap: U,
-      panTo: V,
-      setZoom: H,
-      fitBounds: O
-    } = Me({
-      apiKey: s.apiKey,
-      theme: s.theme,
-      autoTheme: s.autoTheme,
-      lightTheme: s.lightTheme,
-      darkTheme: s.darkTheme,
-      customStyles: s.styles,
-      defaultCenter: s.center,
-      defaultZoom: s.zoom
-    }), o = x(null), f = x(null), C = x(!1), $ = u(() => s.id), K = u(() => ({
-      width: s.width,
-      height: s.height
-    })), W = u(() => E.value && !C.value), z = u(() => s.center || j.value), S = u(() => s.zoom ?? A.value), F = u(() => s.styles ? s.styles : R.value), G = u(() => P.value), q = u(() => {
+      initializeApi: S,
+      setMap: V,
+      panTo: H,
+      setZoom: O,
+      fitBounds: $
+    } = Se({
+      apiKey: o.apiKey,
+      theme: o.theme,
+      autoTheme: o.autoTheme,
+      lightTheme: o.lightTheme,
+      darkTheme: o.darkTheme,
+      customStyles: o.styles,
+      defaultCenter: o.center,
+      defaultZoom: o.zoom
+    }), s = v(null), f = v(null), x = v(!1), p = v(!1), F = u(() => o.id), K = u(() => ({
+      width: o.width,
+      height: o.height
+    })), W = u(() => E.value && !x.value), z = u(() => o.center || j.value), Z = u(() => o.zoom ?? A.value), G = u(() => {
+      if (!o.googleMapId)
+        return o.styles ? o.styles : U.value;
+    }), q = u(() => R.value), J = u(() => {
       const e = {
         "top-left": "sl-top-4 sl-left-4",
         "top-right": "sl-top-4 sl-right-4",
         "bottom-left": "sl-bottom-4 sl-left-4",
         "bottom-right": "sl-bottom-4 sl-right-4"
       };
-      return e[s.controlsPosition] || e["bottom-left"];
+      return e[o.controlsPosition] || e["bottom-left"];
     });
-    function J(e) {
+    function Q(e) {
       if (e.latLng) {
         const t = e;
         r("click", {
@@ -264,164 +272,172 @@ const Se = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ze = { cla
         });
       }
     }
-    function Q(e) {
+    function X(e) {
       e.latLng && r("dblclick", {
         position: { lat: e.latLng.lat(), lng: e.latLng.lng() }
       });
     }
-    function X(e) {
+    function Y(e) {
       e.latLng && r("rightclick", {
         position: { lat: e.latLng.lat(), lng: e.latLng.lng() }
       });
     }
-    function Y() {
-      const e = o.value?.map;
+    function _() {
+      const e = s.value?.map;
       if (e) {
         const t = e.getCenter();
         if (t) {
           const d = { lat: t.lat(), lng: t.lng() };
-          r("center-changed", { center: d }), r("update:center", d);
+          p.value = !0, r("center-changed", { center: d }), r("update:center", d), Promise.resolve().then(() => {
+            p.value = !1;
+          });
         }
       }
     }
-    function _() {
-      const e = o.value?.map;
+    function ee() {
+      const e = s.value?.map;
       if (e) {
         const t = e.getZoom();
-        t !== void 0 && (r("zoom-changed", { zoom: t }), r("update:zoom", t));
+        t !== void 0 && (p.value = !0, r("zoom-changed", { zoom: t }), r("update:zoom", t), Promise.resolve().then(() => {
+          p.value = !1;
+        }));
       }
     }
-    function ee() {
-      const e = o.value?.map;
+    function te() {
+      if (p.value) return;
+      const e = s.value?.map;
       if (e) {
         const t = e.getBounds();
         if (t) {
-          const d = t.getNorthEast(), h = t.getSouthWest();
+          const d = t.getNorthEast(), y = t.getSouthWest();
           r("bounds-changed", {
             bounds: {
               north: d.lat(),
-              south: h.lat(),
+              south: y.lat(),
               east: d.lng(),
-              west: h.lng()
+              west: y.lng()
             }
           });
         }
       }
     }
-    function te() {
-      const e = o.value?.map;
+    function le() {
+      const e = s.value?.map;
       if (e) {
         const t = e.getMapTypeId();
         r("map-type-changed", { mapTypeId: t });
       }
     }
-    function le() {
-      const e = o.value?.map;
-      e && !C.value && (C.value = !0, U(e), r("ready", { map: e })), r("idle");
-    }
     function ae() {
-      r("dragstart");
+      const e = s.value?.map;
+      e && !x.value && (x.value = !0, V(e), r("ready", { map: e })), r("idle");
     }
     function oe() {
-      const e = o.value?.map;
+      r("dragstart");
+    }
+    function se() {
+      const e = s.value?.map;
       if (e) {
         const t = e.getCenter();
         t && r("drag", { center: { lat: t.lat(), lng: t.lng() } });
       }
     }
-    function se() {
-      const e = o.value?.map;
+    function ne() {
+      const e = s.value?.map;
       if (e) {
         const t = e.getCenter();
         t && r("dragend", { center: { lat: t.lat(), lng: t.lng() } });
       }
     }
-    function ne() {
-      const e = o.value?.map;
+    function re() {
+      const e = s.value?.map;
       e && r("tilt-changed", { tilt: e.getTilt() || 0 });
     }
-    function re() {
-      const e = o.value?.map;
+    function ie() {
+      const e = s.value?.map;
       e && r("heading-changed", { heading: e.getHeading() || 0 });
     }
-    function ie() {
-      f.value = null, B().catch((e) => {
+    function de() {
+      f.value = null, S().catch((e) => {
         f.value = e.message, r("error", { message: e.message, error: e });
       });
     }
-    function de() {
-      const e = o.value?.map;
+    function ce() {
+      const e = s.value?.map;
       if (e) {
         const t = e.getZoom() || 10;
-        e.setZoom(Math.min(t + 1, s.maxZoom));
+        e.setZoom(Math.min(t + 1, o.maxZoom));
       }
     }
-    function ce() {
-      const e = o.value?.map;
+    function ue() {
+      const e = s.value?.map;
       if (e) {
         const t = e.getZoom() || 10;
-        e.setZoom(Math.max(t - 1, s.minZoom));
+        e.setZoom(Math.max(t - 1, o.minZoom));
       }
     }
-    function k() {
-      return o.value?.map || null;
-    }
-    function Z(e) {
-      V(e);
+    function M() {
+      return s.value?.map || null;
     }
-    function ue(e) {
+    function T(e) {
       H(e);
     }
-    function me(e, t) {
-      O(e, t);
+    function me(e) {
+      O(e);
     }
-    function ge() {
-      const e = o.value?.map;
-      e && (e.setCenter(z.value), e.setZoom(S.value));
+    function ge(e, t) {
+      $(e, t);
     }
-    return y(() => s.center, (e) => {
-      e && o.value?.map && o.value.map.setCenter(e);
-    }), y(() => s.zoom, (e) => {
-      e !== void 0 && o.value?.map && o.value.map.setZoom(e);
-    }), y(() => s.styles, (e) => {
-      e && o.value?.map && o.value.map.setOptions({ styles: e });
-    }), y(N, (e) => {
+    function fe() {
+      const e = s.value?.map;
+      e && (e.setCenter(z.value), e.setZoom(Z.value));
+    }
+    b(() => o.center, (e, t) => {
+      p.value || e && t && Math.abs(e.lat - t.lat) < 1e-5 && Math.abs(e.lng - t.lng) < 1e-5 || e && s.value?.map && s.value.map.setCenter(e);
+    }), b(() => o.zoom, (e, t) => {
+      p.value || e !== t && e !== void 0 && s.value?.map && s.value.map.setZoom(e);
+    }), b(() => o.styles, (e) => {
+      e && s.value?.map && s.value.map.setOptions({ styles: e });
+    }), b(N, (e) => {
       e && (f.value = e, r("error", { message: e }));
-    }), he(async () => {
+    }), ve(async () => {
       try {
-        await B();
+        await S();
       } catch (e) {
         const t = e instanceof Error ? e.message : "Failed to initialize map";
         f.value = t, r("error", { message: t, error: e instanceof Error ? e : void 0 });
       }
-    }), ye("slMapInstance", {
-      getMap: k,
-      isDark: n
-    }), D({
-      getMap: k,
-      panTo: Z,
+    });
+    const pe = u(() => !o.googleMapId);
+    return be("slMapInstance", {
+      getMap: M,
+      isDark: n,
+      useLegacyMarkers: pe
+    }), L({
+      getMap: M,
+      panTo: T,
       panBy: (e, t) => {
-        const d = k();
+        const d = M();
         d && d.panBy(e, t);
       },
-      setZoom: ue,
-      getZoom: () => o.value?.map?.getZoom(),
-      setCenter: Z,
+      setZoom: me,
+      getZoom: () => s.value?.map?.getZoom(),
+      setCenter: T,
       getCenter: () => {
-        const e = o.value?.map?.getCenter();
+        const e = s.value?.map?.getCenter();
         return e ? { lat: e.lat(), lng: e.lng() } : void 0;
       },
       getBounds: () => {
-        const e = o.value?.map?.getBounds();
+        const e = s.value?.map?.getBounds();
         if (!e) return;
         const t = e.getNorthEast(), d = e.getSouthWest();
         return { north: t.lat(), south: d.lat(), east: t.lng(), west: d.lng() };
       },
-      fitBounds: me,
+      fitBounds: ge,
       fitToMarkers: () => {
       },
       // Implemented in UiMapAll
-      reset: ge,
+      reset: fe,
       addMarker: () => {
       },
       // Implemented in UiMapAll
@@ -433,17 +449,17 @@ const Se = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ze = { cla
       },
       getMarkers: () => [],
       getVisibleMarkers: () => []
-    }), (e, t) => (m(), p("div", {
+    }), (e, t) => (m(), h("div", {
       class: i(["sl-map-container sl-relative", l.containerClass]),
-      style: T(K.value)
+      style: I(K.value)
     }, [
-      W.value && !l.hideLoadingState ? (m(), p("div", {
+      W.value && !l.hideLoadingState ? (m(), h("div", {
         key: 0,
         class: i(["sl-map-loading sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-z-10", [
           a(n) ? "sl-bg-gray-900/90" : "sl-bg-gray-100/90"
         ]])
       }, [
-        c("div", Se, [
+        c("div", Te, [
           c("div", {
             class: i(["sl-animate-spin sl-rounded-full sl-h-10 sl-w-10 sl-border-3 sl-border-t-transparent", a(n) ? "sl-border-primary-400" : "sl-border-primary-600"])
           }, null, 2),
@@ -452,14 +468,14 @@ const Se = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ze = { cla
           }, w(l.loadingText), 3)
         ])
       ], 2)) : g("", !0),
-      f.value && !l.hideErrorState ? (m(), p("div", {
+      f.value && !l.hideErrorState ? (m(), h("div", {
         key: 1,
         class: i(["sl-map-error sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-z-20 sl-p-4", [
           a(n) ? "sl-bg-red-900/20" : "sl-bg-red-50"
         ]])
       }, [
-        c("div", Ze, [
-          v(a(Ce), {
+        c("div", Ie, [
+          C(a(xe), {
             class: i(["sl-h-12 sl-w-12", a(n) ? "sl-text-red-400" : "sl-text-red-500"])
           }, null, 8, ["class"]),
           c("div", null, [
@@ -469,9 +485,9 @@ const Se = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ze = { cla
             c("p", {
               class: i(["sl-text-sm sl-mb-4", a(n) ? "sl-text-red-400" : "sl-text-red-600"])
             }, w(f.value), 3),
-            l.showRetry ? (m(), p("button", {
+            l.showRetry ? (m(), h("button", {
               key: 0,
-              onClick: ie,
+              onClick: de,
               class: i(["sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-rounded-lg sl-transition-colors", [
                 a(n) ? "sl-bg-red-600 sl-text-white hover:sl-bg-red-500" : "sl-bg-red-600 sl-text-white hover:sl-bg-red-700"
               ]])
@@ -479,15 +495,15 @@ const Se = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ze = { cla
           ])
         ])
       ], 2)) : g("", !0),
-      l.showAddressUnavailable ? (m(), p("div", {
+      l.showAddressUnavailable ? (m(), h("div", {
         key: 2,
         class: i(["sl-map-unavailable sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-z-10", [
           a(n) ? "sl-bg-gray-800" : "sl-bg-gray-100"
         ]])
       }, [
-        b(e.$slots, "address-unavailable", {}, () => [
-          c("div", Te, [
-            v(a(ke), {
+        k(e.$slots, "address-unavailable", {}, () => [
+          c("div", Le, [
+            C(a(Me), {
               class: i(["sl-h-12 sl-w-12 sl-mx-auto sl-mb-3", a(n) ? "sl-text-gray-600" : "sl-text-gray-400"])
             }, null, 8, ["class"]),
             c("p", {
@@ -496,15 +512,16 @@ const Se = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ze = { cla
           ])
         ], !0)
       ], 2)) : g("", !0),
-      a(M) && !f.value ? (m(), be(a(L), {
+      a(B) && !f.value ? (m(), ke(a(P), {
         key: 3,
-        id: $.value,
+        id: F.value,
+        "map-id": o.googleMapId || void 0,
         ref_key: "googleMapRef",
-        ref: o,
-        "api-promise": G.value ?? void 0,
+        ref: s,
+        "api-promise": q.value ?? void 0,
         center: z.value,
-        zoom: S.value,
-        styles: F.value,
+        zoom: Z.value,
+        styles: G.value,
         "map-type-id": l.mapTypeId,
         "disable-default-ui": l.disableDefaultUi,
         "zoom-control": l.zoomControl,
@@ -525,67 +542,67 @@ const Se = { class: "sl-flex sl-flex-col sl-items-center sl-gap-3" }, Ze = { cla
         heading: l.heading,
         restriction: l.restriction,
         class: i(["sl-w-full sl-h-full", l.mapClass]),
-        style: T(l.mapStyle),
-        onClick: J,
-        onDblclick: Q,
-        onRightclick: X,
-        onCenter_changed: Y,
-        onZoom_changed: _,
-        onBounds_changed: ee,
-        onMaptypeid_changed: te,
-        onIdle: le,
-        onDragstart: ae,
-        onDrag: oe,
-        onDragend: se,
-        onTilt_changed: ne,
-        onHeading_changed: re
+        style: I(l.mapStyle),
+        onClick: Q,
+        onDblclick: X,
+        onRightclick: Y,
+        onCenter_changed: _,
+        onZoom_changed: ee,
+        onBounds_changed: te,
+        onMaptypeid_changed: le,
+        onIdle: ae,
+        onDragstart: oe,
+        onDrag: se,
+        onDragend: ne,
+        onTilt_changed: re,
+        onHeading_changed: ie
       }, {
-        default: ve(({ ready: d, map: h }) => [
-          d && h ? b(e.$slots, "default", {
+        default: Ce(({ ready: d, map: y }) => [
+          d && y ? k(e.$slots, "default", {
             key: 0,
-            map: h,
+            map: y,
             ready: d,
             isDark: a(n)
           }, void 0, !0) : g("", !0)
         ]),
         _: 3
-      }, 8, ["id", "api-promise", "center", "zoom", "styles", "map-type-id", "disable-default-ui", "zoom-control", "map-type-control", "street-view-control", "fullscreen-control", "scale-control", "rotate-control", "clickable-icons", "gesture-handling", "keyboard-shortcuts", "scrollwheel", "disable-double-click-zoom", "draggable", "min-zoom", "max-zoom", "tilt", "heading", "restriction", "class", "style"])) : g("", !0),
-      l.showCustomControls && a(M) ? (m(), p("div", {
+      }, 8, ["id", "map-id", "api-promise", "center", "zoom", "styles", "map-type-id", "disable-default-ui", "zoom-control", "map-type-control", "street-view-control", "fullscreen-control", "scale-control", "rotate-control", "clickable-icons", "gesture-handling", "keyboard-shortcuts", "scrollwheel", "disable-double-click-zoom", "draggable", "min-zoom", "max-zoom", "tilt", "heading", "restriction", "class", "style"])) : g("", !0),
+      l.showCustomControls && a(B) ? (m(), h("div", {
         key: 4,
-        class: i(["sl-map-controls sl-absolute sl-z-10", q.value])
+        class: i(["sl-map-controls sl-absolute sl-z-10", J.value])
       }, [
-        b(e.$slots, "controls", { isDark: a(n) }, () => [
-          l.showDefaultZoomControls ? (m(), p("div", {
+        k(e.$slots, "controls", { isDark: a(n) }, () => [
+          l.showDefaultZoomControls ? (m(), h("div", {
             key: 0,
             class: i(["sl-flex sl-flex-col sl-rounded-lg sl-shadow-md sl-overflow-hidden", a(n) ? "sl-bg-gray-800" : "sl-bg-white"])
           }, [
             c("button", {
-              onClick: de,
+              onClick: ce,
               class: i(["sl-w-8 sl-h-8 sl-flex sl-items-center sl-justify-center sl-border-b sl-transition-colors", [
                 a(n) ? "sl-border-gray-700 hover:sl-bg-gray-700" : "sl-border-gray-200 hover:sl-bg-gray-50"
               ]]),
               title: "Zoom in"
             }, [
-              v(a(xe), {
+              C(a(we), {
                 class: i(["sl-w-4 sl-h-4", a(n) ? "sl-text-gray-300" : "sl-text-gray-600"])
               }, null, 8, ["class"])
             ], 2),
             c("button", {
-              onClick: ce,
+              onClick: ue,
               class: i(["sl-w-8 sl-h-8 sl-flex sl-items-center sl-justify-center sl-transition-colors", a(n) ? "hover:sl-bg-gray-700" : "hover:sl-bg-gray-50"]),
               title: "Zoom out"
             }, [
-              v(a(we), {
+              C(a(Be), {
                 class: i(["sl-w-4 sl-h-4", a(n) ? "sl-text-gray-300" : "sl-text-gray-600"])
               }, null, 8, ["class"])
             ], 2)
           ], 2)) : g("", !0)
         ], !0)
       ], 2)) : g("", !0),
-      b(e.$slots, "overlay", { isDark: a(n) }, void 0, !0)
+      k(e.$slots, "overlay", { isDark: a(n) }, void 0, !0)
     ], 6));
   }
-}), Re = /* @__PURE__ */ ze(De, [["__scopeId", "data-v-995d02bd"]]);
+}), je = /* @__PURE__ */ Ze(De, [["__scopeId", "data-v-83060ba6"]]);
 export {
-  Re as default
+  je as default
 };

package/dist/maps/UiMapAll.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiMapAll.vue_vue_type_script_setup_true_lang-11yT7mTH.js";
+import { _ as f } from "../UiMapAll.vue_vue_type_script_setup_true_lang-DKcK0HmT.js";
 export {
   f as default
 };