@nuxt/scripts 2.0.0-beta.6 → 2.0.0-beta.8

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

@@ -4,17 +4,142 @@
 
 <script setup>
 import { toRaw, watch } from "vue";
-import { useMapLibreResource } from "./useMapLibreResource";
+import { reportMapLibreResourceError, useMapLibreResource } from "./useMapLibreResource";
 const props = defineProps({
   sourceId: { type: String, required: true },
   data: { type: null, required: true },
   sourceOptions: { type: Object, required: false },
   layers: { type: Array, required: true },
-  beforeId: { type: String, required: false }
+  beforeId: { type: String, required: false },
+  cursor: { type: String, required: false }
 });
+const emit = defineEmits(["error", "click", "dblclick", "mouseenter", "mousemove", "mouseleave", "sourceready"]);
 let ownedLayerIds = [];
 let ownedSourceId;
+let appliedStructure;
+let appliedStyleSignature;
+let appliedStyles = [];
+let layerSubscriptions = [];
+let restoreCursor;
+let isPointerOverLayer = false;
+let hoveredLayerKey = "";
+let pendingHoverKey = "";
+let isStyleMutable = false;
+let hasPendingSync = false;
+let capturedErrors;
+function toError(event) {
+  return event.error instanceof Error ? event.error : new Error(event.error.message, { cause: event.error });
+}
+function applyStyleChange(change) {
+  const errors = [];
+  capturedErrors = errors;
+  try {
+    change();
+  } finally {
+    capturedErrors = void 0;
+  }
+  if (errors.length === 1)
+    throw errors[0];
+  if (errors.length > 1)
+    throw new AggregateError(errors, errors.map((error) => error.message).join("\n"));
+}
+function onMapError(event) {
+  if (capturedErrors) {
+    capturedErrors.push(toError(event));
+    return;
+  }
+  const isOwnSource = ownedSourceId !== void 0 && event.sourceId === ownedSourceId;
+  const isOwnLayer = event.layer?.id !== void 0 && ownedLayerIds.includes(event.layer.id);
+  if (isOwnSource || isOwnLayer)
+    reportMapLibreResourceError(toError(event), (failure) => emit("error", failure));
+}
+function layerStructure(layer) {
+  const structure = { ...layer };
+  delete structure.paint;
+  delete structure.layout;
+  delete structure.filter;
+  return structure;
+}
+function structureSignature() {
+  return JSON.stringify([
+    props.sourceId,
+    props.sourceOptions ?? null,
+    props.beforeId ?? null,
+    props.layers.map(layerStructure)
+  ]);
+}
+function readLayerStyles() {
+  return props.layers.map((layer) => {
+    const source = layer;
+    return {
+      paint: source.paint ?? {},
+      layout: source.layout ?? {},
+      filter: source.filter
+    };
+  });
+}
+function styleSignature() {
+  return JSON.stringify(readLayerStyles());
+}
+function detachLayerStyles(signature) {
+  return JSON.parse(signature);
+}
+function applyCursor(map, cursor) {
+  const canvas = map.getCanvas();
+  if (!canvas)
+    return;
+  if (cursor === void 0) {
+    if (restoreCursor !== void 0)
+      canvas.style.cursor = restoreCursor;
+    restoreCursor = void 0;
+    return;
+  }
+  restoreCursor ??= canvas.style.cursor;
+  canvas.style.cursor = cursor;
+}
+function unbindLayerEvents(map) {
+  for (const subscription of layerSubscriptions)
+    subscription.unsubscribe();
+  layerSubscriptions = [];
+  if (isPointerOverLayer)
+    pendingHoverKey = hoveredLayerKey;
+  isPointerOverLayer = false;
+  if (restoreCursor !== void 0)
+    applyCursor(map, void 0);
+}
+function bindLayerEvents(map, carryHover) {
+  unbindLayerEvents(map);
+  const carriedHoverKey = pendingHoverKey;
+  pendingHoverKey = "";
+  if (!ownedLayerIds.length)
+    return;
+  const layerIds = [...ownedLayerIds];
+  const layerKey = layerIds.join("\n");
+  layerSubscriptions = [
+    map.on("click", layerIds, (event) => emit("click", event)),
+    // The emit must stay synchronous, so `event.preventDefault()` still stops
+    // MapLibre's double-click zoom.
+    map.on("dblclick", layerIds, (event) => emit("dblclick", event)),
+    map.on("mousemove", layerIds, (event) => emit("mousemove", event)),
+    map.on("mouseenter", layerIds, (event) => {
+      isPointerOverLayer = true;
+      hoveredLayerKey = layerKey;
+      applyCursor(map, props.cursor || void 0);
+      emit("mouseenter", event);
+    }),
+    map.on("mouseleave", layerIds, (event) => {
+      isPointerOverLayer = false;
+      applyCursor(map, void 0);
+      emit("mouseleave", event);
+    })
+  ];
+  if (carryHover && carriedHoverKey === layerKey) {
+    isPointerOverLayer = true;
+    applyCursor(map, props.cursor || void 0);
+  }
+}
 function removeOwnedResources(map) {
+  unbindLayerEvents(map);
   for (const layerId of [...ownedLayerIds].reverse()) {
     if (map.getLayer(layerId))
       map.removeLayer(layerId);
@@ -23,47 +148,127 @@ function removeOwnedResources(map) {
   if (ownedSourceId && map.getSource(ownedSourceId))
     map.removeSource(ownedSourceId);
   ownedSourceId = void 0;
+  appliedStructure = void 0;
+  appliedStyleSignature = void 0;
+  appliedStyles = [];
 }
-function syncResources(map) {
-  if (!map.isStyleLoaded())
+function syncResources(map, carryHover = false) {
+  if (!isStyleMutable && map.isStyleLoaded() !== true) {
+    appliedStructure = void 0;
+    appliedStyleSignature = void 0;
+    hasPendingSync = true;
     return;
+  }
+  hasPendingSync = false;
   removeOwnedResources(map);
   const sourceId = props.sourceId;
   try {
-    map.addSource(sourceId, {
+    applyStyleChange(() => map.addSource(sourceId, {
       ...toRaw(props.sourceOptions),
       type: "geojson",
       data: toRaw(props.data)
-    });
+    }));
     ownedSourceId = sourceId;
     for (const layer of props.layers) {
       const nextLayer = {
         ...toRaw(layer),
         source: layer.source || sourceId
       };
-      map.addLayer(nextLayer, props.beforeId);
+      applyStyleChange(() => map.addLayer(nextLayer, props.beforeId));
+      if (!map.getLayer(nextLayer.id))
+        throw new Error(`MapLibre did not add the layer "${nextLayer.id}".`);
       ownedLayerIds.push(nextLayer.id);
     }
+    appliedStructure = structureSignature();
+    appliedStyleSignature = styleSignature();
+    appliedStyles = detachLayerStyles(appliedStyleSignature);
+    bindLayerEvents(map, carryHover);
   } catch (error) {
     removeOwnedResources(map);
     throw error;
   }
+  emit("sourceready", { map, sourceId });
+}
+function applyStyleBlock(before, after, set) {
+  for (const name of /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)])) {
+    if (JSON.stringify(before[name]) !== JSON.stringify(after[name]))
+      set(name, after[name]);
+  }
+}
+function updateLayerStyles(map) {
+  const signature = styleSignature();
+  const nextStyles = detachLayerStyles(signature);
+  nextStyles.forEach((next, index) => {
+    const before = appliedStyles[index];
+    const layerId = ownedLayerIds[index];
+    if (!before || !layerId || !map.getLayer(layerId))
+      return;
+    applyStyleBlock(before.paint, next.paint, (name, value) => {
+      applyStyleChange(() => map.setPaintProperty(layerId, name, value));
+    });
+    applyStyleBlock(before.layout, next.layout, (name, value) => {
+      applyStyleChange(() => map.setLayoutProperty(layerId, name, value));
+    });
+    if (JSON.stringify(before.filter) !== JSON.stringify(next.filter))
+      applyStyleChange(() => map.setFilter(layerId, next.filter));
+  });
+  if (isPointerOverLayer) {
+    isPointerOverLayer = false;
+    applyCursor(map, void 0);
+  }
+  appliedStyles = nextStyles;
+  appliedStyleSignature = signature;
+}
+function trySyncResources(map, carryHover = false) {
+  try {
+    syncResources(map, carryHover);
+  } catch (error) {
+    reportMapLibreResourceError(error, (failure) => emit("error", failure));
+  }
+}
+function tryUpdateLayerStyles(map) {
+  try {
+    updateLayerStyles(map);
+  } catch (error) {
+    reportMapLibreResourceError(error, (failure) => emit("error", failure));
+  }
 }
 const geoJson = useMapLibreResource({
   create({ map }) {
-    const onStyleLoad = () => syncResources(map);
+    isStyleMutable = map.isStyleLoaded() === true;
+    const onStyleLoad = () => {
+      isStyleMutable = true;
+      trySyncResources(map, true);
+    };
     const onLoad = () => {
+      isStyleMutable = true;
       if (!ownedSourceId)
-        syncResources(map);
+        trySyncResources(map);
+    };
+    const onStyleDataLoading = () => {
+      isStyleMutable = false;
+      hasPendingSync = true;
+    };
+    const onIdle = () => {
+      isStyleMutable = true;
+      if (hasPendingSync)
+        trySyncResources(map);
     };
     map.on("style.load", onStyleLoad);
     map.on("load", onLoad);
-    syncResources(map);
-    return { map, onLoad, onStyleLoad };
+    map.on("styledataloading", onStyleDataLoading);
+    map.on("idle", onIdle);
+    map.on("error", onMapError);
+    trySyncResources(map);
+    return { map, onLoad, onStyleLoad, onStyleDataLoading, onIdle, onError: onMapError };
   },
+  onError: (error) => emit("error", error),
   cleanup(resource) {
     resource.map.off("load", resource.onLoad);
     resource.map.off("style.load", resource.onStyleLoad);
+    resource.map.off("styledataloading", resource.onStyleDataLoading);
+    resource.map.off("idle", resource.onIdle);
+    resource.map.off("error", resource.onError);
     removeOwnedResources(resource.map);
   }
 });
@@ -72,10 +277,23 @@ watch(() => props.data, (data) => {
   if (source?.type === "geojson")
     source.setData(toRaw(data));
 }, { deep: 2 });
-watch(() => [props.sourceId, props.layers, props.sourceOptions, props.beforeId], () => {
-  if (geoJson.value)
-    syncResources(geoJson.value.map);
-}, { deep: 3 });
+watch(() => props.cursor, (cursor) => {
+  if (isPointerOverLayer && geoJson.value)
+    applyCursor(geoJson.value.map, cursor || void 0);
+});
+watch(structureSignature, (structure) => {
+  if (geoJson.value && structure !== appliedStructure)
+    trySyncResources(geoJson.value.map);
+});
+watch(styleSignature, (signature) => {
+  const map = geoJson.value?.map;
+  if (!map || signature === appliedStyleSignature)
+    return;
+  if (structureSignature() === appliedStructure)
+    tryUpdateLayerStyles(map);
+  else
+    trySyncResources(map);
+});
 defineExpose({ geoJson });
 </script>
 

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

@@ -1,39 +1,30 @@
-import type { GeoJSON } from 'geojson';
 import type * as MapLibreGl from 'maplibre-gl';
-import type * as MapLibre from 'maplibre-gl';
-export type ScriptMapLibreGeoJsonLayer = Omit<MapLibre.LayerSpecification, 'source'> & {
-    /** Override the component's source ID for this layer. */
-    source?: string;
-};
-export interface ScriptMapLibreGeoJsonResource {
-    map: MapLibre.Map;
-    onLoad: () => void;
-    onStyleLoad: () => void;
-}
+import type { ScriptMapLibreGeoJsonProps, ScriptMapLibreGeoJsonResource } from './types.js';
+export type { ScriptMapLibreGeoJsonEmits, ScriptMapLibreGeoJsonLayer, ScriptMapLibreGeoJsonProps, ScriptMapLibreGeoJsonResource, } from './types.js';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    /** MapLibre source ID. Changing it rebuilds the owned source and layers. */
-    sourceId: string;
-    /** Inline GeoJSON data or a URL returning GeoJSON. */
-    data: GeoJSON | string;
-    /** GeoJSON source options. `type` and `data` are supplied by the component. */
-    sourceOptions?: Omit<MapLibreGl.GeoJSONSourceSpecification, "type" | "data">;
-    /** Style layers backed by this source. */
-    layers: ScriptMapLibreGeoJsonLayer[];
-    /** Existing layer ID before which the layers are inserted. */
-    beforeId?: string;
-}, {
+declare const __VLS_export: import("vue").DefineComponent<ScriptMapLibreGeoJsonProps, {
     geoJson: import("vue").ShallowRef<ScriptMapLibreGeoJsonResource | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    /** MapLibre source ID. Changing it rebuilds the owned source and layers. */
-    sourceId: string;
-    /** Inline GeoJSON data or a URL returning GeoJSON. */
-    data: GeoJSON | string;
-    /** GeoJSON source options. `type` and `data` are supplied by the component. */
-    sourceOptions?: Omit<MapLibreGl.GeoJSONSourceSpecification, "type" | "data">;
-    /** Style layers backed by this source. */
-    layers: ScriptMapLibreGeoJsonLayer[];
-    /** Existing layer ID before which the layers are inserted. */
-    beforeId?: string;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: Error) => any;
+    click: (event: MapLibreGl.MapLayerMouseEvent) => any;
+    dblclick: (event: MapLibreGl.MapLayerMouseEvent) => any;
+    mouseenter: (event: MapLibreGl.MapLayerMouseEvent) => any;
+    mouseleave: (event: MapLibreGl.MapLayerMouseEvent) => any;
+    mousemove: (event: MapLibreGl.MapLayerMouseEvent) => any;
+    sourceready: (payload: {
+        map: MapLibreGl.Map;
+        sourceId: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<ScriptMapLibreGeoJsonProps> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+    onClick?: ((event: MapLibreGl.MapLayerMouseEvent) => any) | undefined;
+    onDblclick?: ((event: MapLibreGl.MapLayerMouseEvent) => any) | undefined;
+    onMouseenter?: ((event: MapLibreGl.MapLayerMouseEvent) => any) | undefined;
+    onMouseleave?: ((event: MapLibreGl.MapLayerMouseEvent) => any) | undefined;
+    onMousemove?: ((event: MapLibreGl.MapLayerMouseEvent) => any) | undefined;
+    onSourceready?: ((payload: {
+        map: MapLibreGl.Map;
+        sourceId: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,25 @@
+import type * as MapLibre from 'maplibre-gl';
+import type { ScriptMapLibreGeolocateControlProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<ScriptMapLibreGeolocateControlProps, {
+    control: import("vue").ShallowRef<MapLibre.GeolocateControl | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (event: MapLibre.GeolocateErrorEvent) => any;
+    geolocate: (event: MapLibre.GeolocatePositionEvent) => any;
+    outofmaxbounds: (event: MapLibre.GeolocatePositionEvent) => any;
+    trackuserlocationstart: (event: MapLibre.GeolocateEvent) => any;
+    trackuserlocationend: (event: MapLibre.GeolocateEvent) => any;
+    userlocationfocus: (event: MapLibre.GeolocateEvent) => any;
+    userlocationlostfocus: (event: MapLibre.GeolocateEvent) => any;
+    unavailable: (reason: "unsupported" | "permission-denied") => any;
+}, string, import("vue").PublicProps, Readonly<ScriptMapLibreGeolocateControlProps> & Readonly<{
+    onError?: ((event: MapLibre.GeolocateErrorEvent) => any) | undefined;
+    onGeolocate?: ((event: MapLibre.GeolocatePositionEvent) => any) | undefined;
+    onOutofmaxbounds?: ((event: MapLibre.GeolocatePositionEvent) => any) | undefined;
+    onTrackuserlocationstart?: ((event: MapLibre.GeolocateEvent) => any) | undefined;
+    onTrackuserlocationend?: ((event: MapLibre.GeolocateEvent) => any) | undefined;
+    onUserlocationfocus?: ((event: MapLibre.GeolocateEvent) => any) | undefined;
+    onUserlocationlostfocus?: ((event: MapLibre.GeolocateEvent) => any) | undefined;
+    onUnavailable?: ((reason: "unsupported" | "permission-denied") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,49 @@
+<script setup>
+import { useMapLibreResource } from "./useMapLibreResource";
+defineOptions({ render: () => null });
+const props = defineProps({
+  position: { type: null, required: false },
+  options: { type: null, required: false }
+});
+const emit = defineEmits(["geolocate", "error", "outofmaxbounds", "trackuserlocationstart", "trackuserlocationend", "userlocationfocus", "userlocationlostfocus", "unavailable"]);
+const listeners = {
+  geolocate: (event) => emit("geolocate", event),
+  error: (event) => emit("error", event),
+  outofmaxbounds: (event) => emit("outofmaxbounds", event),
+  trackuserlocationstart: (event) => emit("trackuserlocationstart", event),
+  trackuserlocationend: (event) => emit("trackuserlocationend", event),
+  userlocationfocus: (event) => emit("userlocationfocus", event),
+  userlocationlostfocus: (event) => emit("userlocationlostfocus", event)
+};
+const eventNames = Object.keys(listeners);
+async function readAvailability() {
+  if (!("geolocation" in navigator))
+    return "unsupported";
+  if (!navigator.permissions)
+    return "available";
+  const status = await navigator.permissions.query({ name: "geolocation" }).catch(() => {
+    return void 0;
+  });
+  return status?.state === "denied" ? "permission-denied" : "available";
+}
+const control = useMapLibreResource({
+  create({ maplibre, map }) {
+    const instance = new maplibre.GeolocateControl(props.options ?? {});
+    for (const name of eventNames)
+      instance.on(name, listeners[name]);
+    map.addControl(instance, props.position);
+    readAvailability().then((availability) => {
+      if (availability !== "available" && control.value === instance)
+        emit("unavailable", availability);
+    });
+    return instance;
+  },
+  cleanup(instance, { map }) {
+    for (const name of eventNames)
+      instance.off(name, listeners[name]);
+    if (map.hasControl(instance))
+      map.removeControl(instance);
+  }
+});
+defineExpose({ control });
+</script>

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

@@ -0,0 +1,25 @@
+import type * as MapLibre from 'maplibre-gl';
+import type { ScriptMapLibreGeolocateControlProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<ScriptMapLibreGeolocateControlProps, {
+    control: import("vue").ShallowRef<MapLibre.GeolocateControl | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (event: MapLibre.GeolocateErrorEvent) => any;
+    geolocate: (event: MapLibre.GeolocatePositionEvent) => any;
+    outofmaxbounds: (event: MapLibre.GeolocatePositionEvent) => any;
+    trackuserlocationstart: (event: MapLibre.GeolocateEvent) => any;
+    trackuserlocationend: (event: MapLibre.GeolocateEvent) => any;
+    userlocationfocus: (event: MapLibre.GeolocateEvent) => any;
+    userlocationlostfocus: (event: MapLibre.GeolocateEvent) => any;
+    unavailable: (reason: "unsupported" | "permission-denied") => any;
+}, string, import("vue").PublicProps, Readonly<ScriptMapLibreGeolocateControlProps> & Readonly<{
+    onError?: ((event: MapLibre.GeolocateErrorEvent) => any) | undefined;
+    onGeolocate?: ((event: MapLibre.GeolocatePositionEvent) => any) | undefined;
+    onOutofmaxbounds?: ((event: MapLibre.GeolocatePositionEvent) => any) | undefined;
+    onTrackuserlocationstart?: ((event: MapLibre.GeolocateEvent) => any) | undefined;
+    onTrackuserlocationend?: ((event: MapLibre.GeolocateEvent) => any) | undefined;
+    onUserlocationfocus?: ((event: MapLibre.GeolocateEvent) => any) | undefined;
+    onUserlocationlostfocus?: ((event: MapLibre.GeolocateEvent) => any) | undefined;
+    onUnavailable?: ((reason: "unsupported" | "permission-denied") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,119 +1,55 @@
 import type * as MapLibre from 'maplibre-gl';
-import type { HTMLAttributes, ReservedProps, ShallowRef } from 'vue';
-import type { ElementScriptTrigger } from '#nuxt-scripts/types';
+import type { ScriptMapLibreMapExpose, ScriptMapLibreMapProps, ScriptMapLibreMapSlots } from './types.js';
+export type { ScriptMapLibreMapEmits, ScriptMapLibreMapExpose, ScriptMapLibreMapProps, ScriptMapLibreMapSlots, } from './types.js';
 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 passed to `maplibregl.setWorkerUrl()`. */
-    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;
+    load: (event: MapLibre.MapLibreEvent<unknown>) => any;
     click: (event: MapLibre.MapMouseEvent) => any;
-    move: (event: MapLibre.MapMovementEvent) => any;
     zoom: (event: MapLibre.MapMovementEvent) => any;
-    rotate: (event: MapLibre.MapMovementEvent) => any;
-    zoomend: (event: MapLibre.MapMovementEvent) => any;
+    pitch: (event: MapLibre.MapMovementEvent) => any;
+    move: (event: MapLibre.MapMovementEvent) => any;
     moveend: (event: MapLibre.MapMovementEvent) => any;
-    "update:center": (center: MapLibre.LngLat) => any;
-    "update:zoom": (zoom: number) => any;
+    zoomend: (event: MapLibre.MapMovementEvent) => any;
+    rotate: (event: MapLibre.MapMovementEvent) => any;
     rotateend: (event: MapLibre.MapMovementEvent) => any;
-    pitch: (event: MapLibre.MapMovementEvent) => any;
     pitchend: (event: MapLibre.MapMovementEvent) => any;
+    "update:center": (center: MapLibre.LngLat) => any;
+    "update:zoom": (zoom: number) => any;
+    styleload: (event: MapLibre.MapStyleLoadEvent) => 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;
+    onLoad?: ((event: MapLibre.MapLibreEvent<unknown>) => any) | undefined;
     onClick?: ((event: MapLibre.MapMouseEvent) => any) | undefined;
-    onMove?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onZoom?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    onRotate?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    onZoomend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    onPitch?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    onMove?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onMoveend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    "onUpdate:center"?: ((center: MapLibre.LngLat) => any) | undefined;
-    "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
+    onZoomend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    onRotate?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onRotateend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    onPitch?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onPitchend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    "onUpdate:center"?: ((center: MapLibre.LngLat) => any) | undefined;
+    "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
+    onStyleload?: ((event: MapLibre.MapStyleLoadEvent) => any) | undefined;
     "onUpdate:bearing"?: ((bearing: number) => any) | undefined;
     "onUpdate:pitch"?: ((pitch: number) => any) | undefined;
 }>, {
-    trigger: ElementScriptTrigger;
+    trigger: import("../../types.js").ElementScriptTrigger;
     injectStyles: boolean;
     width: number | string;
     height: number | string;
-    zoom: number;
-    ariaLabel: string;
     interactive: boolean;
-    pitch: number;
+    zoom: number;
     bearing: number;
+    pitch: number;
+    ariaLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScriptMapLibreMapSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {