@nuxt/scripts 1.0.0-beta.7 → 1.0.0-rc.10

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsPolyline.vue

@@ -1,14 +1,10 @@
-<template>
-
-</template>
-
 <script setup>
-import { inject, onUnmounted } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { watch } from "vue";
+import { bindGoogleMapsEvents, useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
+const emit = defineEmits(["click", "contextmenu", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "drag", "dragend", "dragstart"]);
 const eventsWithPolyMouseEventPayload = [
   "click",
   "contextmenu",
@@ -24,37 +20,26 @@ const eventsWithMapMouseEventPayload = [
   "dragend",
   "dragstart"
 ];
-const emit = defineEmits([]);
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-let polyline = void 0;
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  polyline = new mapContext.mapsApi.value.Polyline({
-    map: mapContext.map.value,
-    ...props.options
-  });
-  setupPolylineEventListeners(polyline);
-  whenever(() => props.options, (options) => {
-    polyline?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  if (!polyline || !mapContext?.mapsApi.value) {
-    return;
+const polyline = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const p = new mapsApi.Polyline({ map, ...props.options });
+    bindGoogleMapsEvents(p, emit, {
+      withPayload: [...eventsWithPolyMouseEventPayload, ...eventsWithMapMouseEventPayload]
+    });
+    return p;
+  },
+  cleanup(p, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(p);
+    p.setMap(null);
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(polyline);
-  polyline.setMap(null);
 });
-function setupPolylineEventListeners(polyline2) {
-  eventsWithPolyMouseEventPayload.forEach((event) => {
-    polyline2.addListener(event, (payload) => emit(event, payload));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    polyline2.addListener(event, (payload) => emit(event, payload));
-  });
-}
+watch(() => props.options, (options) => {
+  if (polyline.value && options) {
+    polyline.value.setOptions(options);
+  }
+}, { deep: true });
 </script>
+
+<template>
+
+</template>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsPolyline.vue.d.ts

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the polyline overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions
+     */
     options?: Omit<google.maps.PolylineOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.PolyMouseEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     contextmenu: (payload: google.maps.PolyMouseEvent) => any;
+    click: (payload: google.maps.PolyMouseEvent) => any;
     dblclick: (payload: google.maps.PolyMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;
     dragend: (payload: google.maps.MapMouseEvent) => any;
@@ -14,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     mouseover: (payload: google.maps.PolyMouseEvent) => any;
     mouseup: (payload: google.maps.PolyMouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onContextmenu?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDblclick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDrag?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDragend?: ((payload: google.maps.MapMouseEvent) => any) | undefined;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsRectangle.d.vue.ts

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the rectangle overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#RectangleOptions
+     */
     options?: Omit<google.maps.RectangleOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.MapMouseEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     contextmenu: (payload: google.maps.MapMouseEvent) => any;
+    click: (payload: google.maps.MapMouseEvent) => any;
     dblclick: (payload: google.maps.MapMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;
     dragend: (payload: google.maps.MapMouseEvent) => any;
@@ -15,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     mouseup: (payload: google.maps.MapMouseEvent) => any;
     bounds_changed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onContextmenu?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDblclick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDrag?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDragend?: ((payload: google.maps.MapMouseEvent) => any) | undefined;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsRectangle.vue

@@ -1,14 +1,10 @@
-<template>
-
-</template>
-
 <script setup>
-import { inject, onUnmounted } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { watch } from "vue";
+import { bindGoogleMapsEvents, useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
+const emit = defineEmits(["bounds_changed", "click", "contextmenu", "dblclick", "drag", "dragend", "dragstart", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"]);
 const eventsWithoutPayload = [
   "bounds_changed"
 ];
@@ -25,37 +21,27 @@ const eventsWithMapMouseEventPayload = [
   "mouseover",
   "mouseup"
 ];
-const emit = defineEmits([]);
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-let rectangle = void 0;
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  rectangle = new mapContext.mapsApi.value.Rectangle({
-    map: mapContext.map.value,
-    ...props.options
-  });
-  setupRectangleEventListeners(rectangle);
-  whenever(() => props.options, (options) => {
-    rectangle?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  if (!rectangle || !mapContext?.mapsApi.value) {
-    return;
+const rectangle = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const r = new mapsApi.Rectangle({ map, ...props.options });
+    bindGoogleMapsEvents(r, emit, {
+      noPayload: eventsWithoutPayload,
+      withPayload: eventsWithMapMouseEventPayload
+    });
+    return r;
+  },
+  cleanup(r, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(r);
+    r.setMap(null);
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(rectangle);
-  rectangle.setMap(null);
 });
-function setupRectangleEventListeners(rectangle2) {
-  eventsWithoutPayload.forEach((event) => {
-    rectangle2.addListener(event, () => emit(event));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    rectangle2.addListener(event, (payload) => emit(event, payload));
-  });
-}
+watch(() => props.options, (options) => {
+  if (rectangle.value && options) {
+    rectangle.value.setOptions(options);
+  }
+}, { deep: true });
 </script>
+
+<template>
+
+</template>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsRectangle.vue.d.ts

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the rectangle overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#RectangleOptions
+     */
     options?: Omit<google.maps.RectangleOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.MapMouseEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     contextmenu: (payload: google.maps.MapMouseEvent) => any;
+    click: (payload: google.maps.MapMouseEvent) => any;
     dblclick: (payload: google.maps.MapMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;
     dragend: (payload: google.maps.MapMouseEvent) => any;
@@ -15,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     mouseup: (payload: google.maps.MapMouseEvent) => any;
     bounds_changed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onContextmenu?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDblclick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDrag?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDragend?: ((payload: google.maps.MapMouseEvent) => any) | undefined;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsStaticMap.d.vue.ts

@@ -0,0 +1,200 @@
+export type StaticMapFormat = 'png' | 'jpg' | 'gif' | 'png8' | 'png32' | 'jpg-baseline';
+export type StaticMapType = 'roadmap' | 'satellite' | 'terrain' | 'hybrid';
+import type { ImgHTMLAttributes, ReservedProps } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * The center of the map. Accepts a "lat,lng" string or a LatLngLiteral object.
+     */
+    center?: string | {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * Zoom level (0-21).
+     */
+    zoom?: number;
+    /**
+     * Explicit pixel size for the Static Maps API request, e.g. "640x400".
+     * When omitted, the component measures its rendered dimensions on mount and uses those.
+     * Falls back to "640x400" during SSR or when dimensions can't be measured.
+     */
+    size?: `${number}x${number}`;
+    /**
+     * Device pixel ratio for the static map image (1 or 2).
+     */
+    scale?: 1 | 2;
+    /**
+     * Image format.
+     */
+    format?: StaticMapFormat;
+    /**
+     * Map type.
+     */
+    maptype?: StaticMapType;
+    /**
+     * Cloud-based map styling ID.
+     */
+    mapId?: string;
+    /**
+     * Map markers. Supports multiple markers via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Markers
+     */
+    markers?: string | string[];
+    /**
+     * Polyline paths. Supports multiple paths via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Paths
+     */
+    path?: string | string[];
+    /**
+     * Locations that should be visible on the map.
+     */
+    visible?: string | string[];
+    /**
+     * Map styling. Accepts raw Static Maps API style strings or Google Maps JS API MapTypeStyle objects.
+     */
+    style?: string | string[] | google.maps.MapTypeStyle[];
+    /**
+     * Language code for map labels.
+     */
+    language?: string;
+    /**
+     * Region bias.
+     */
+    region?: string;
+    /**
+     * Digital signature for requests without an API key.
+     */
+    signature?: string;
+    /**
+     * API key override. When the proxy is enabled, this is ignored and the server-side key is used instead.
+     */
+    apiKey?: string;
+    /**
+     * CSS width for the container element.
+     */
+    width?: number | string;
+    /**
+     * CSS height for the container element.
+     */
+    height?: number | string;
+    /**
+     * Image loading strategy.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Object-fit for the image within its container.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    /**
+     * Additional attributes for the `<img>` element.
+     */
+    imgAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
+}, {
+    src: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The center of the map. Accepts a "lat,lng" string or a LatLngLiteral object.
+     */
+    center?: string | {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * Zoom level (0-21).
+     */
+    zoom?: number;
+    /**
+     * Explicit pixel size for the Static Maps API request, e.g. "640x400".
+     * When omitted, the component measures its rendered dimensions on mount and uses those.
+     * Falls back to "640x400" during SSR or when dimensions can't be measured.
+     */
+    size?: `${number}x${number}`;
+    /**
+     * Device pixel ratio for the static map image (1 or 2).
+     */
+    scale?: 1 | 2;
+    /**
+     * Image format.
+     */
+    format?: StaticMapFormat;
+    /**
+     * Map type.
+     */
+    maptype?: StaticMapType;
+    /**
+     * Cloud-based map styling ID.
+     */
+    mapId?: string;
+    /**
+     * Map markers. Supports multiple markers via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Markers
+     */
+    markers?: string | string[];
+    /**
+     * Polyline paths. Supports multiple paths via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Paths
+     */
+    path?: string | string[];
+    /**
+     * Locations that should be visible on the map.
+     */
+    visible?: string | string[];
+    /**
+     * Map styling. Accepts raw Static Maps API style strings or Google Maps JS API MapTypeStyle objects.
+     */
+    style?: string | string[] | google.maps.MapTypeStyle[];
+    /**
+     * Language code for map labels.
+     */
+    language?: string;
+    /**
+     * Region bias.
+     */
+    region?: string;
+    /**
+     * Digital signature for requests without an API key.
+     */
+    signature?: string;
+    /**
+     * API key override. When the proxy is enabled, this is ignored and the server-side key is used instead.
+     */
+    apiKey?: string;
+    /**
+     * CSS width for the container element.
+     */
+    width?: number | string;
+    /**
+     * CSS height for the container element.
+     */
+    height?: number | string;
+    /**
+     * Image loading strategy.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Object-fit for the image within its container.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    /**
+     * Additional attributes for the `<img>` element.
+     */
+    imgAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
+}> & Readonly<{}>, {
+    loading: "eager" | "lazy";
+    width: number | string;
+    height: number | string;
+    zoom: number;
+    objectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    scale: 1 | 2;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        src: string;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsStaticMap.vue

@@ -0,0 +1,170 @@
+<script>
+import { scriptRuntimeConfig } from "#nuxt-scripts/utils";
+import { defu } from "defu";
+import { useHead, useRuntimeConfig } from "nuxt/app";
+import { withQuery } from "ufo";
+import { computed, onMounted, ref } from "vue";
+import { useScriptProxyUrl } from "../../composables/useScriptProxyUrl";
+</script>
+
+<script setup>
+const props = defineProps({
+  center: { type: [String, Object], required: false },
+  zoom: { type: Number, required: false, default: 15 },
+  size: { type: null, required: false },
+  scale: { type: Number, required: false, default: 2 },
+  format: { type: String, required: false },
+  maptype: { type: String, required: false },
+  mapId: { type: String, required: false },
+  markers: { type: [String, Array], required: false },
+  path: { type: [String, Array], required: false },
+  visible: { type: [String, Array], required: false },
+  style: { type: [String, Array], required: false },
+  language: { type: String, required: false },
+  region: { type: String, required: false },
+  signature: { type: String, required: false },
+  apiKey: { type: String, required: false },
+  width: { type: [Number, String], required: false, default: 640 },
+  height: { type: [Number, String], required: false, default: 400 },
+  loading: { type: String, required: false, default: "lazy" },
+  objectFit: { type: String, required: false, default: "cover" },
+  imgAttrs: { type: Object, required: false }
+});
+defineSlots();
+const runtimeConfig = useRuntimeConfig();
+const proxyConfig = runtimeConfig.public["nuxt-scripts"]?.googleStaticMapsProxy;
+const apiKey = props.apiKey || scriptRuntimeConfig("googleMaps")?.apiKey;
+const useProxy = !props.apiKey && proxyConfig?.enabled;
+const proxyUrl = useScriptProxyUrl();
+if (import.meta.dev) {
+  if (!apiKey && !useProxy)
+    console.warn("[nuxt-scripts] ScriptGoogleMapsStaticMap requires a Google Maps API key with Static Maps API access. Set NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY in your .env, or enable the proxy via `scripts.registry.googleMaps`.");
+}
+const rootEl = ref();
+const measuredSize = ref();
+function clampStaticMapSize(width, height, max = 640) {
+  const ratio = Math.min(1, max / Math.max(width, height));
+  return `${Math.max(1, Math.floor(width * ratio))}x${Math.max(1, Math.floor(height * ratio))}`;
+}
+onMounted(() => {
+  if (props.size || !rootEl.value)
+    return;
+  const { offsetWidth, offsetHeight } = rootEl.value;
+  if (offsetWidth > 0 && offsetHeight > 0) {
+    measuredSize.value = clampStaticMapSize(offsetWidth, offsetHeight);
+  }
+});
+function toCssUnit(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+const PIXEL_VALUE_RE = /^\d+(?:px)?$/i;
+function isPixelValue(value) {
+  if (typeof value === "number")
+    return true;
+  return PIXEL_VALUE_RE.test(value);
+}
+function transformMapStyles(styles) {
+  return styles.map((s) => {
+    const feature = s.featureType ? `feature:${s.featureType}` : "";
+    const element = s.elementType ? `element:${s.elementType}` : "";
+    const rules = (s.stylers || []).map((styler) => {
+      return Object.entries(styler).map(([key, value]) => {
+        if (key === "color" && typeof value === "string")
+          value = value.replace("#", "0x");
+        return `${key}:${value}`;
+      }).join("|");
+    }).filter(Boolean).join("|");
+    return [feature, element, rules].filter(Boolean).join("|");
+  }).filter(Boolean);
+}
+function resolveStyle(style) {
+  if (!style)
+    return void 0;
+  if (typeof style === "string")
+    return style;
+  if (Array.isArray(style) && style.length > 0 && typeof style[0] === "string")
+    return style;
+  return transformMapStyles(style);
+}
+function resolveCenter(center) {
+  if (!center)
+    return void 0;
+  if (typeof center === "string")
+    return center;
+  return `${center.lat},${center.lng}`;
+}
+const resolvedSize = computed(() => {
+  if (props.size)
+    return props.size;
+  if (measuredSize.value)
+    return measuredSize.value;
+  if (isPixelValue(props.width) && isPixelValue(props.height))
+    return clampStaticMapSize(Number.parseInt(String(props.width)), Number.parseInt(String(props.height)));
+  return "640x400";
+});
+const src = computed(() => {
+  const query = {
+    center: resolveCenter(props.center),
+    zoom: props.zoom,
+    size: resolvedSize.value,
+    scale: props.scale,
+    format: props.format,
+    maptype: props.maptype,
+    map_id: props.mapId,
+    markers: props.markers,
+    path: props.path,
+    visible: props.visible,
+    style: resolveStyle(props.style),
+    language: props.language,
+    region: props.region,
+    signature: props.signature,
+    key: useProxy ? void 0 : apiKey
+  };
+  for (const key of Object.keys(query)) {
+    if (query[key] === void 0)
+      delete query[key];
+  }
+  if (useProxy) {
+    return proxyUrl("/_scripts/proxy/google-static-maps", query);
+  }
+  return withQuery("https://maps.googleapis.com/maps/api/staticmap", query);
+});
+const imgAttributes = computed(() => {
+  return defu(props.imgAttrs, {
+    src: src.value,
+    alt: "Google Maps",
+    loading: props.loading,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: props.objectFit,
+      display: "block"
+    }
+  });
+});
+const rootStyle = computed(() => ({
+  width: toCssUnit(props.width),
+  height: toCssUnit(props.height),
+  maxWidth: "100%",
+  overflow: "hidden"
+}));
+if (import.meta.server) {
+  useHead({
+    link: [
+      {
+        rel: props.loading === "eager" ? "preconnect" : "dns-prefetch",
+        href: useProxy ? void 0 : "https://maps.googleapis.com"
+      }
+    ].filter((l) => l.href)
+  });
+}
+defineExpose({ src });
+</script>
+
+<template>
+  <div ref="rootEl" :style="rootStyle">
+    <slot :src="src">
+      <img v-bind="imgAttributes">
+    </slot>
+  </div>
+</template>