@nuxt/scripts 1.3.5 → 2.0.0-beta.1

package/dist/runtime/components/MapLibre/ScriptMapLibreMap.vue

@@ -0,0 +1,214 @@
+<script>
+export { MAPLIBRE_MAP_INJECTION_KEY } from "./useMapLibreResource";
+</script>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, onUnmounted, provide, shallowRef, toRaw, useId, useTemplateRef, watch } from "vue";
+import { useScriptTriggerElement } from "#nuxt-scripts/composables/useScriptTriggerElement";
+import { useScriptMapLibre } from "#nuxt-scripts/registry/maplibre";
+import ScriptAriaLoadingIndicator from "../ScriptAriaLoadingIndicator.vue";
+import { MAPLIBRE_MAP_INJECTION_KEY } from "./useMapLibreResource";
+const props = defineProps({
+  trigger: { type: [String, Array, Boolean], required: false, default: "visible" },
+  mapStyle: { type: null, required: true },
+  center: { type: null, required: true },
+  zoom: { type: Number, required: false, default: 12 },
+  bearing: { type: Number, required: false, default: 0 },
+  pitch: { type: Number, required: false, default: 0 },
+  options: { type: Object, required: false },
+  injectStyles: { type: Boolean, required: false, default: true },
+  stylesheetUrl: { type: String, required: false },
+  workerUrl: { type: String, required: false },
+  width: { type: [Number, String], required: false, default: 640 },
+  height: { type: [Number, String], required: false, default: 400 },
+  ariaLabel: { type: String, required: false, default: "Interactive map" },
+  interactive: { type: Boolean, required: false, default: true },
+  rootAttrs: { type: Object, required: false }
+});
+const emit = defineEmits(["ready", "error", "click", "move", "moveend", "zoom", "zoomend", "rotate", "rotateend", "pitch", "pitchend", "update:center", "update:zoom", "update:bearing", "update:pitch"]);
+const slots = defineSlots();
+const rootEl = useTemplateRef("rootEl");
+const mapEl = useTemplateRef("mapEl");
+const descriptionId = `maplibre-description-${useId()}`;
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
+const { load, status, onLoaded, onError } = useScriptMapLibre({
+  injectStyles: props.injectStyles,
+  stylesheetUrl: props.stylesheetUrl,
+  workerUrl: props.workerUrl,
+  scriptOptions: { trigger }
+});
+const maplibre = shallowRef();
+const map = shallowRef();
+const isMapReady = shallowRef(false);
+const loadError = shallowRef(new Error("MapLibre failed to load"));
+const initializationError = shallowRef();
+const hasError = computed(() => status.value === "error" || !!initializationError.value);
+let isUnmounted = false;
+onError((error) => {
+  loadError.value = error ?? new Error("MapLibre failed to load");
+  emit("error", loadError.value);
+});
+const exposed = { maplibre, map, load };
+defineExpose(exposed);
+provide(MAPLIBRE_MAP_INJECTION_KEY, {
+  maplibre,
+  map
+});
+function bindMapEvents(instance) {
+  instance.on("click", (event) => emit("click", event));
+  instance.on("move", (event) => emit("move", event));
+  instance.on("moveend", (event) => {
+    emit("moveend", event);
+    emit("update:center", instance.getCenter());
+  });
+  instance.on("zoom", (event) => emit("zoom", event));
+  instance.on("zoomend", (event) => {
+    emit("zoomend", event);
+    emit("update:zoom", instance.getZoom());
+  });
+  instance.on("rotate", (event) => emit("rotate", event));
+  instance.on("rotateend", (event) => {
+    emit("rotateend", event);
+    emit("update:bearing", instance.getBearing());
+  });
+  instance.on("pitch", (event) => emit("pitch", event));
+  instance.on("pitchend", (event) => {
+    emit("pitchend", event);
+    emit("update:pitch", instance.getPitch());
+  });
+  instance.on("error", (event) => {
+    loadError.value = event.error;
+    emit("error", event.error);
+  });
+}
+onMounted(() => {
+  onLoaded((instance) => {
+    if (isUnmounted || !mapEl.value)
+      return;
+    maplibre.value = instance.maplibregl;
+    let mapInstance;
+    try {
+      mapInstance = new instance.maplibregl.Map({
+        ...toRaw(props.options),
+        container: mapEl.value,
+        style: toRaw(props.mapStyle),
+        center: toRaw(props.center),
+        zoom: props.zoom,
+        bearing: props.bearing,
+        pitch: props.pitch,
+        interactive: props.interactive
+      });
+      bindMapEvents(mapInstance);
+      map.value = mapInstance;
+      mapInstance.once("load", () => {
+        if (isUnmounted)
+          return;
+        isMapReady.value = true;
+        mapInstance.resize();
+        emit("ready", exposed);
+      });
+    } catch (error) {
+      mapInstance?.remove();
+      const cause = error instanceof Error ? error : new Error("MapLibre map initialization failed");
+      initializationError.value = cause;
+      loadError.value = cause;
+      emit("error", cause);
+    }
+  });
+});
+watch(() => props.mapStyle, (mapStyle) => {
+  map.value?.setStyle(toRaw(mapStyle));
+}, { deep: 2 });
+watch(() => props.center, (center) => {
+  if (!map.value || !maplibre.value)
+    return;
+  const current = map.value.getCenter();
+  const next = maplibre.value.LngLat.convert(toRaw(center));
+  if (current.lng !== next.lng || current.lat !== next.lat)
+    map.value.jumpTo({ center: next });
+}, { deep: 1 });
+watch(() => props.zoom, (zoom) => {
+  if (map.value && map.value.getZoom() !== zoom)
+    map.value.jumpTo({ zoom });
+});
+watch(() => props.bearing, (bearing) => {
+  if (map.value && map.value.getBearing() !== bearing)
+    map.value.jumpTo({ bearing });
+});
+watch(() => props.pitch, (pitch) => {
+  if (map.value && map.value.getPitch() !== pitch)
+    map.value.jumpTo({ pitch });
+});
+const DIGITS_ONLY_RE = /^\d+$/;
+const DIGITS_PX_RE = /^\d+px$/i;
+function toCssUnit(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function isPixelValue(value) {
+  return typeof value === "number" || typeof value === "string" && (DIGITS_ONLY_RE.test(value) || DIGITS_PX_RE.test(value));
+}
+function pixelValue(value) {
+  return isPixelValue(value) ? Number.parseFloat(String(value)) : void 0;
+}
+const rootAttrs = computed(() => ({
+  ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {},
+  ...props.rootAttrs,
+  "aria-busy": status.value === "loading" ? true : void 0,
+  "style": [
+    {
+      position: "relative",
+      maxWidth: "100%",
+      width: toCssUnit(props.width),
+      height: isPixelValue(props.width) && isPixelValue(props.height) ? "auto" : toCssUnit(props.height),
+      aspectRatio: isPixelValue(props.width) && isPixelValue(props.height) ? `${pixelValue(props.width)} / ${pixelValue(props.height)}` : void 0
+    },
+    props.rootAttrs?.style
+  ]
+}));
+onBeforeUnmount(() => {
+  isUnmounted = true;
+});
+onUnmounted(() => {
+  map.value?.remove();
+  map.value = void 0;
+});
+</script>
+
+<template>
+  <div ref="rootEl" v-bind="rootAttrs">
+    <div
+      ref="mapEl"
+      :aria-describedby="interactive && slots.description ? descriptionId : void 0"
+      :aria-hidden="interactive ? void 0 : 'true'"
+      :aria-label="interactive ? ariaLabel : void 0"
+      :inert="interactive ? void 0 : true"
+      :role="interactive ? 'region' : void 0"
+      :style="{
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  maxWidth: '100%',
+  visibility: isMapReady ? 'visible' : 'hidden'
+}"
+    />
+    <div v-if="interactive && slots.description" :id="descriptionId" class="maplibre-map-description">
+      <slot name="description" />
+    </div>
+    <slot v-if="!isMapReady && !hasError" name="placeholder" />
+    <slot v-if="hasError" name="error" :error="loadError">
+      <p role="alert">
+        The map could not be loaded.
+      </p>
+    </slot>
+    <slot v-else-if="status === 'loading'" name="loading">
+      <ScriptAriaLoadingIndicator />
+    </slot>
+    <slot v-else-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.maplibre-map-description{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;clip-path:inset(50%);white-space:nowrap}
+</style>

package/dist/runtime/components/MapLibre/ScriptMapLibreMap.vue.d.ts

@@ -0,0 +1,122 @@
+import type * as MapLibre from 'maplibre-gl';
+import type { HTMLAttributes, ReservedProps, ShallowRef } from 'vue';
+import type { ElementScriptTrigger } from '#nuxt-scripts/types';
+export { MAPLIBRE_MAP_INJECTION_KEY } from './useMapLibreResource.js';
+export interface ScriptMapLibreMapProps {
+    /**
+     * Defines when the MapLibre script loads.
+     * @default 'visible'
+     */
+    trigger?: ElementScriptTrigger;
+    /** MapLibre style URL or inline style specification. */
+    mapStyle: string | MapLibre.StyleSpecification;
+    /** Initial and reactively controlled map center. */
+    center: MapLibre.LngLatLike;
+    /** Initial and reactively controlled zoom level. @default 12 */
+    zoom?: number;
+    /** Initial and reactively controlled bearing in degrees. @default 0 */
+    bearing?: number;
+    /** Initial and reactively controlled pitch in degrees. @default 0 */
+    pitch?: number;
+    /** Options passed to `new maplibregl.Map()`. Dedicated props take precedence. */
+    options?: Omit<MapLibre.MapOptions, 'container'>;
+    /** Inject MapLibre's stylesheet when the script begins loading. @default true */
+    injectStyles?: boolean;
+    /** Custom MapLibre stylesheet URL. */
+    stylesheetUrl?: string;
+    /** Worker URL used with MapLibre's CSP-compatible build. */
+    workerUrl?: string;
+    /** Width reserved before the map loads. @default 640 */
+    width?: number | string;
+    /** Height reserved before the map loads. @default 400 */
+    height?: number | string;
+    /** Accessible name for an interactive map. @default 'Interactive map' */
+    ariaLabel?: string;
+    /** Disable map input and remove it from the accessibility tree when decorative. @default true */
+    interactive?: boolean;
+    /** Attributes applied to the outer layout container. */
+    rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>;
+}
+export interface ScriptMapLibreMapExpose {
+    maplibre: ShallowRef<typeof MapLibre | undefined>;
+    map: ShallowRef<MapLibre.Map | undefined>;
+    load: () => Promise<unknown> | unknown;
+}
+export interface ScriptMapLibreMapEmits {
+    'ready': [payload: ScriptMapLibreMapExpose];
+    'error': [error: Error];
+    'click': [event: MapLibre.MapEventType['click']];
+    'move': [event: MapLibre.MapEventType['move']];
+    'moveend': [event: MapLibre.MapEventType['moveend']];
+    'zoom': [event: MapLibre.MapEventType['zoom']];
+    'zoomend': [event: MapLibre.MapEventType['zoomend']];
+    'rotate': [event: MapLibre.MapEventType['rotate']];
+    'rotateend': [event: MapLibre.MapEventType['rotateend']];
+    'pitch': [event: MapLibre.MapEventType['pitch']];
+    'pitchend': [event: MapLibre.MapEventType['pitchend']];
+    'update:center': [center: MapLibre.LngLat];
+    'update:zoom': [zoom: number];
+    'update:bearing': [bearing: number];
+    'update:pitch': [pitch: number];
+}
+export interface ScriptMapLibreMapSlots {
+    default?: () => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: (props: {
+        error: Error;
+    }) => any;
+    placeholder?: () => any;
+    /** Text or links that expose the canvas map's essential information to assistive technology. */
+    description?: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScriptMapLibreMapProps, ScriptMapLibreMapExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: Error) => any;
+    ready: (payload: ScriptMapLibreMapExpose) => any;
+    click: (event: MapLibre.MapMouseEvent) => any;
+    move: (event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => any;
+    zoom: (event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => any;
+    zoomend: (event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => any;
+    moveend: (event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => any;
+    "update:center": (center: MapLibre.LngLat) => any;
+    "update:zoom": (zoom: number) => any;
+    rotate: (event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => any;
+    rotateend: (event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => any;
+    pitch: (event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => any;
+    pitchend: (event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => any;
+    "update:bearing": (bearing: number) => any;
+    "update:pitch": (pitch: number) => any;
+}, string, import("vue").PublicProps, Readonly<ScriptMapLibreMapProps> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+    onReady?: ((payload: ScriptMapLibreMapExpose) => any) | undefined;
+    onClick?: ((event: MapLibre.MapMouseEvent) => any) | undefined;
+    onMove?: ((event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => any) | undefined;
+    onZoom?: ((event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => any) | undefined;
+    onZoomend?: ((event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => any) | undefined;
+    onMoveend?: ((event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => any) | undefined;
+    "onUpdate:center"?: ((center: MapLibre.LngLat) => any) | undefined;
+    "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
+    onRotate?: ((event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => any) | undefined;
+    onRotateend?: ((event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => any) | undefined;
+    onPitch?: ((event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => any) | undefined;
+    onPitchend?: ((event: MapLibre.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => any) | undefined;
+    "onUpdate:bearing"?: ((bearing: number) => any) | undefined;
+    "onUpdate:pitch"?: ((pitch: number) => any) | undefined;
+}>, {
+    injectStyles: boolean;
+    trigger: ElementScriptTrigger;
+    width: number | string;
+    height: number | string;
+    zoom: number;
+    ariaLabel: string;
+    interactive: boolean;
+    pitch: number;
+    bearing: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScriptMapLibreMapSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MapLibre/ScriptMapLibreMarker.d.vue.ts

@@ -0,0 +1,35 @@
+import type * as MapLibre from 'maplibre-gl';
+type __VLS_Props = {
+    /** Reactive marker position in `[longitude, latitude]` order. */
+    position: MapLibre.LngLatLike;
+    /** Accessible name for the marker element. */
+    ariaLabel?: string;
+    /** Tooltip text for the marker element. */
+    title?: string;
+    /** Options passed to `new maplibregl.Marker()`. Options with public setters also update reactively. */
+    options?: MapLibre.MarkerOptions;
+};
+type __VLS_Slots = {
+    default?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    marker: import("vue").ShallowRef<MapLibre.Marker | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+    drag: (event: MapLibre.Event) => any;
+    dragend: (event: MapLibre.Event) => any;
+    dragstart: (event: MapLibre.Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onDrag?: ((event: MapLibre.Event) => any) | undefined;
+    onDragend?: ((event: MapLibre.Event) => any) | undefined;
+    onDragstart?: ((event: MapLibre.Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MapLibre/ScriptMapLibreMarker.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { onMounted, provide, watch } from "vue";
+import { MAPLIBRE_MARKER_INJECTION_KEY, useMapLibreResource } from "./useMapLibreResource";
+const props = defineProps({
+  position: { type: null, required: true },
+  ariaLabel: { type: String, required: false },
+  title: { type: String, required: false },
+  options: { type: null, required: false }
+});
+const emit = defineEmits(["click", "dragstart", "drag", "dragend"]);
+defineSlots();
+let clickHandler;
+let markerClassNames = new Set((props.options?.className || "").split(/\s+/).filter(Boolean));
+let fallbackAriaLabel = null;
+const dragStartHandler = (event) => emit("dragstart", event);
+const dragHandler = (event) => emit("drag", event);
+const dragEndHandler = (event) => emit("dragend", event);
+function syncMarkerElement(instance) {
+  const element = instance.getElement();
+  if (props.ariaLabel)
+    element.setAttribute("aria-label", props.ariaLabel);
+  else if (fallbackAriaLabel)
+    element.setAttribute("aria-label", fallbackAriaLabel);
+  else
+    element.removeAttribute("aria-label");
+  if (props.title)
+    element.setAttribute("title", props.title);
+  else
+    element.removeAttribute("title");
+}
+const marker = useMapLibreResource({
+  create({ maplibre, map }) {
+    const instance = new maplibre.Marker(props.options).setLngLat(props.position).addTo(map);
+    markerClassNames = new Set((props.options?.className || "").split(/\s+/).filter(Boolean));
+    fallbackAriaLabel = instance.getElement().getAttribute("aria-label");
+    instance.on("dragstart", dragStartHandler);
+    instance.on("drag", dragHandler);
+    instance.on("dragend", dragEndHandler);
+    clickHandler = (event) => emit("click", event);
+    instance.getElement().addEventListener("click", clickHandler);
+    syncMarkerElement(instance);
+    return instance;
+  },
+  cleanup(instance) {
+    if (clickHandler)
+      instance.getElement().removeEventListener("click", clickHandler);
+    clickHandler = void 0;
+    fallbackAriaLabel = null;
+    instance.off("dragstart", dragStartHandler);
+    instance.off("drag", dragHandler);
+    instance.off("dragend", dragEndHandler);
+    instance.remove();
+  }
+});
+provide(MAPLIBRE_MARKER_INJECTION_KEY, { marker });
+defineExpose({ marker });
+onMounted(() => {
+  if (import.meta.dev && !props.ariaLabel)
+    console.warn("[nuxt-scripts] <ScriptMapLibreMarker> should have a unique `aria-label` for screen reader users.");
+});
+watch(() => props.position, (position) => marker.value?.setLngLat(position), { deep: 1 });
+watch(() => props.ariaLabel, () => marker.value && syncMarkerElement(marker.value));
+watch(() => props.title, () => marker.value && syncMarkerElement(marker.value));
+watch(() => props.options, (options) => {
+  if (!marker.value || !options)
+    return;
+  if (options.draggable !== void 0)
+    marker.value.setDraggable(options.draggable);
+  if (options.rotation !== void 0)
+    marker.value.setRotation(options.rotation);
+  if (options.rotationAlignment !== void 0)
+    marker.value.setRotationAlignment(options.rotationAlignment);
+  if (options.pitchAlignment !== void 0)
+    marker.value.setPitchAlignment(options.pitchAlignment);
+  if (options.offset !== void 0)
+    marker.value.setOffset(options.offset);
+  if (options.opacity !== void 0 || options.opacityWhenCovered !== void 0)
+    marker.value.setOpacity(options.opacity, options.opacityWhenCovered);
+  if (options.subpixelPositioning !== void 0)
+    marker.value.setSubpixelPositioning(options.subpixelPositioning);
+  if (options.className !== void 0) {
+    const nextClassNames = new Set(options.className.split(/\s+/).filter(Boolean));
+    for (const className of markerClassNames) {
+      if (!nextClassNames.has(className))
+        marker.value.removeClassName(className);
+    }
+    for (const className of nextClassNames) {
+      if (!markerClassNames.has(className))
+        marker.value.addClassName(className);
+    }
+    markerClassNames = nextClassNames;
+  }
+}, { deep: 2 });
+</script>
+
+<template>
+  <slot />
+</template>

package/dist/runtime/components/MapLibre/ScriptMapLibreMarker.vue.d.ts

@@ -0,0 +1,35 @@
+import type * as MapLibre from 'maplibre-gl';
+type __VLS_Props = {
+    /** Reactive marker position in `[longitude, latitude]` order. */
+    position: MapLibre.LngLatLike;
+    /** Accessible name for the marker element. */
+    ariaLabel?: string;
+    /** Tooltip text for the marker element. */
+    title?: string;
+    /** Options passed to `new maplibregl.Marker()`. Options with public setters also update reactively. */
+    options?: MapLibre.MarkerOptions;
+};
+type __VLS_Slots = {
+    default?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    marker: import("vue").ShallowRef<MapLibre.Marker | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+    drag: (event: MapLibre.Event) => any;
+    dragend: (event: MapLibre.Event) => any;
+    dragstart: (event: MapLibre.Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onDrag?: ((event: MapLibre.Event) => any) | undefined;
+    onDragend?: ((event: MapLibre.Event) => any) | undefined;
+    onDragstart?: ((event: MapLibre.Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MapLibre/ScriptMapLibreNavigationControl.d.vue.ts

@@ -0,0 +1,12 @@
+import type * as MapLibre from 'maplibre-gl';
+type __VLS_Props = {
+    /** Position of the navigation control. */
+    position?: MapLibre.ControlPosition;
+    /** Options passed to `new maplibregl.NavigationControl()`. */
+    options?: MapLibre.NavigationControlOptions;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    control: import("vue").ShallowRef<MapLibre.NavigationControl | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MapLibre/ScriptMapLibreNavigationControl.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { useMapLibreResource } from "./useMapLibreResource";
+const props = defineProps({
+  position: { type: null, required: false },
+  options: { type: null, required: false }
+});
+const control = useMapLibreResource({
+  create({ maplibre, map }) {
+    const instance = new maplibre.NavigationControl(props.options);
+    map.addControl(instance, props.position);
+    return instance;
+  },
+  cleanup(instance, { map }) {
+    if (map.hasControl(instance))
+      map.removeControl(instance);
+  }
+});
+defineExpose({ control });
+</script>
+
+<template>
+  <!-- nuxt-scripts: MapLibre navigation control -->
+</template>

package/dist/runtime/components/MapLibre/ScriptMapLibreNavigationControl.vue.d.ts

@@ -0,0 +1,12 @@
+import type * as MapLibre from 'maplibre-gl';
+type __VLS_Props = {
+    /** Position of the navigation control. */
+    position?: MapLibre.ControlPosition;
+    /** Options passed to `new maplibregl.NavigationControl()`. */
+    options?: MapLibre.NavigationControlOptions;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    control: import("vue").ShallowRef<MapLibre.NavigationControl | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MapLibre/ScriptMapLibrePopup.d.vue.ts

@@ -0,0 +1,31 @@
+import type * as MapLibre from 'maplibre-gl';
+type __VLS_Props = {
+    /** Position for a standalone popup. Omit when nested inside a marker. */
+    position?: MapLibre.LngLatLike;
+    /** Whether the popup is open. @default false */
+    open?: boolean;
+    /** Options passed to `new maplibregl.Popup()`. Options with public setters also update reactively. */
+    options?: MapLibre.PopupOptions;
+};
+type __VLS_Slots = {
+    default?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    popup: import("vue").ShallowRef<MapLibre.Popup | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: MapLibre.Event) => any;
+    open: (event: MapLibre.Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((event: MapLibre.Event) => any) | undefined;
+    onOpen?: ((event: MapLibre.Event) => any) | undefined;
+}>, {
+    open: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};