vue-yandex-maps
Version:
Yandex Maps 3.0 components library for VueJS.
278 lines (277 loc) • 8.93 kB
JavaScript
import { shallowRef, ref, computed, toRaw, unref, version, h, watch } from "vue";
var VueYandexMaps;
((VueYandexMaps2) => {
VueYandexMaps2.settings = safeRef({
apikey: ""
});
VueYandexMaps2.isReadyToInit = safeComputed(() => !!VueYandexMaps2.settings.value.apikey);
VueYandexMaps2.ymaps = () => ymaps3;
VueYandexMaps2.script = shallowRef(null);
class YandexMapException2 extends Error {
constructor(message) {
super(message);
this.message = message;
this.name = "YandexMapException";
}
}
VueYandexMaps2.YandexMapException = YandexMapException2;
VueYandexMaps2.loadStatus = safeRef("pending");
VueYandexMaps2.isLoaded = safeComputed(() => VueYandexMaps2.loadStatus.value === "loaded" || VueYandexMaps2.loadStatus.value === "error");
VueYandexMaps2.loadError = safeRef(null);
function importLayersExtra() {
return ymaps3.import("@yandex/ymaps3-layers-extra");
}
VueYandexMaps2.importLayersExtra = importLayersExtra;
})(VueYandexMaps || (VueYandexMaps = {}));
function safeRef(value) {
if (typeof window === "undefined") {
return {
// @ts-expect-error SSR workaround
value,
__v_isRef: true
};
}
return ref(value);
}
function safeComputed(getter, debugOptions) {
if (typeof window === "undefined") {
return {
get value() {
return getter();
},
// @ts-expect-error SSR workaround
__v_isRef: true
};
}
return computed(getter, debugOptions);
}
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
function copy(target) {
target = toRaw(unref(target));
if (Array.isArray(target)) return target.map((i) => copy(i));
if (!target || typeof target !== "object" || target?.constructor !== void 0 && target?.constructor !== Object) return target;
return Object.keys(target).reduce((carry, key) => {
const val = target[key];
carry[key] = copy(val);
return carry;
}, {});
}
function isDev() {
return typeof process !== "undefined" && (process.env?.NODE_ENV === "development" || process.dev);
}
function getException({
text,
isInternal,
warn
}) {
if (warn) {
text = `Warning: ${text}`;
}
if (isInternal) {
text += " This is likely Vue Yandex Maps internal bug.";
if (isDev()) {
text += " You can report this bug here: https://github.com/yandex-maps-unofficial/vue-yandex-maps/issues/new/choose";
}
}
return new VueYandexMaps.YandexMapException(text);
}
function throwException(settings) {
const exception = getException(settings);
if (settings.warn) {
console.warn(exception);
} else {
throw exception;
}
}
function excludeKeys(item, ignoreKeys) {
for (const [key, value] of Object.entries(item)) {
if (ignoreKeys.includes(key)) delete item[key];
if (value && typeof value === "object" && !Array.isArray(value)) {
excludeKeys(value, ignoreKeys);
if (!Object.keys(value).length) delete item[key];
}
}
}
function isVue2() {
return version.startsWith("2");
}
let fragment;
async function setFragment() {
if (fragment !== void 0) return;
if (isVue2()) {
fragment = null;
return;
}
fragment = (await import("vue")).Fragment;
}
function hF(children, props) {
if (isVue2()) {
return h("div", props, children);
}
return h(fragment, props, children);
}
function hVue2(children) {
if (isVue2() && children?.length > 1) {
return h("div", children);
}
return children;
}
function getAttrsForVueVersion(attrs) {
if (isVue2()) {
return { attrs };
}
return attrs;
}
const YandexMapException = VueYandexMaps.YandexMapException;
const allowedOptionsKeys = {
apikey: true,
servicesApikeys: true,
lang: true,
initializeOn: true,
importModules: true,
version: true,
strictMode: true,
domain: true,
mapsRenderWaitDuration: true,
mapsScriptWaitDuration: true,
scriptAttributes: true,
cdnLibraryLoading: true
};
function initYmaps() {
return new Promise((res, rej) => {
if (typeof ymaps3 !== "undefined") {
if (VueYandexMaps.loadStatus.value !== "loaded") VueYandexMaps.loadStatus.value = "loaded";
return res();
}
if (typeof window === "undefined") return rej(new YandexMapException("You must call initYmaps on Client Side only"));
if (VueYandexMaps.loadStatus.value === "loading") {
const watcher = watch(VueYandexMaps.loadStatus, (val) => {
if (!VueYandexMaps.isLoaded.value) return;
watcher();
if (val === "error") rej(VueYandexMaps.loadError);
if (val === "loaded") res();
}, {
immediate: true
});
return;
}
VueYandexMaps.loadStatus.value = "loading";
const settings = VueYandexMaps.settings.value;
if (!settings.apikey) {
throwException({
text: "apikey was not set for Yandex Maps initialization. Ensure you have attached needed plugins or called createYmapsOptions with apikey. If you need delayed init, please use VueYandexMaps.isReadyToInit computed as v-if."
});
}
const yandexMapScript = document.createElement("SCRIPT");
VueYandexMaps.script.value = yandexMapScript;
const url = new URL(`${settings.domain}/${settings.version}/`);
url.searchParams.set("lang", settings.lang || "ru_RU");
url.searchParams.set("apikey", settings.apikey);
const scriptAttributes = {
async: "",
defer: "",
referrerpolicy: "strict-origin-when-cross-origin",
type: "text/javascript",
id: "vue-yandex-maps",
src: url.toString(),
...settings.scriptAttributes || {}
};
for (const key in scriptAttributes) {
if (scriptAttributes[key] === false) continue;
yandexMapScript.setAttribute(key, scriptAttributes[key]);
}
document.head.appendChild(yandexMapScript);
yandexMapScript.onload = async () => {
try {
await VueYandexMaps.ymaps().ready;
if (settings.servicesApikeys && Object.keys(settings.servicesApikeys).length > 0) {
VueYandexMaps.ymaps().getDefaultConfig().setApikeys(settings.servicesApikeys);
}
if (typeof settings.strictMode === "boolean") VueYandexMaps.ymaps().strictMode = settings.strictMode;
if (settings.importModules) {
await Promise.all(
settings.importModules.map(
(module) => VueYandexMaps.ymaps().import(module)
)
);
}
if (settings.cdnLibraryLoading?.enabled !== false) {
VueYandexMaps.ymaps().import.registerCdn(settings.cdnLibraryLoading?.url || "https://cdn.jsdelivr.net/npm/{package}", [
...[
"@yandex/ymaps3-default-ui-theme@latest",
"@yandex/ymaps3-resizer@latest",
"@yandex/ymaps3-minimap@latest",
"@yandex/ymaps3-context-menu@latest",
"@yandex/ymaps3-drawer-control@latest",
"@yandex/ymaps3-signpost@latest",
"@yandex/ymaps3-spinner@latest"
].filter((x) => !(settings.cdnLibraryLoading?.extendLibraries ?? []).includes(x)),
...settings.cdnLibraryLoading?.extendLibraries ?? []
]);
}
VueYandexMaps.loadStatus.value = "loaded";
res();
} catch (e) {
VueYandexMaps.loadStatus.value = "error";
VueYandexMaps.loadError.value = e;
rej(e);
}
};
yandexMapScript.onerror = (e) => {
VueYandexMaps.loadError.value = e;
rej(e);
};
});
}
function createYmapsOptions(options, ignoreNoCurrentInstance = false) {
if (VueYandexMaps.isReadyToInit.value) return VueYandexMaps.settings.value;
const optionsShallowClone = {
lang: "ru_RU",
initializeOn: "onComponentMount",
importModules: [],
version: "v3",
strictMode: false,
domain: "https://api-maps.yandex.ru",
mapsRenderWaitDuration: true,
mapsScriptWaitDuration: true,
servicesApikeys: null,
scriptAttributes: {},
cdnLibraryLoading: {},
...options
};
if (!optionsShallowClone.apikey) {
throwException({
text: "You must specify apikey for createYmapsOptions"
});
}
const notAllowedKeys = Object.keys(optionsShallowClone).filter((key) => !(key in allowedOptionsKeys));
if (notAllowedKeys.length) {
throwException({
text: `You have passed unknown keys to createYmapsOptions: ${notAllowedKeys.join(", ")}. Only ${Object.keys(allowedOptionsKeys).join(", ")} are allowed.`
});
}
if (typeof window === "undefined") return optionsShallowClone;
VueYandexMaps.settings.value = optionsShallowClone;
return optionsShallowClone;
}
function importYmapsCDNModule(module) {
return ymaps3.import(module);
}
export {
VueYandexMaps as V,
copy as a,
hF as b,
createYmapsOptions as c,
getAttrsForVueVersion as d,
excludeKeys as e,
sleep as f,
getException as g,
hVue2 as h,
initYmaps as i,
isVue2 as j,
importYmapsCDNModule as k,
setFragment as s,
throwException as t
};