@myelophone/nuxt 0.18.2

package/app/composables/useAppSeo.ts

@@ -0,0 +1,78 @@
+export const useAppSeo = (config: {
+	title?: any;
+	titleKey?: string;
+	params?: any;
+	description?: any;
+	descriptionKey?: string;
+	image?: string;
+	noIndex?: boolean;
+}) => {
+	const { t } = useMultiLang(['seo', 'common']);
+	const route = useRoute();
+
+	const unpack = (data: any) => {
+		const raw = unref(data);
+		if (!raw) return {};
+		const result: Record<string, any> = {};
+		for (const key in raw) {
+			result[key] = unref(raw[key]);
+		}
+		return result;
+	};
+
+	const resolveValue = (value: any) => {
+		const unwrappedValue = unref(value);
+		if (typeof unwrappedValue === 'function') {
+			return unwrappedValue();
+		}
+		return unwrappedValue;
+	};
+
+	const seoTitle = computed(() => {
+		if (config.title) {
+			return resolveValue(config.title);
+		}
+		if (config.titleKey) {
+			const p = unpack(config.params);
+			const translated = t(config.titleKey, p);
+			return translated !== config.titleKey
+				? translated
+				: config.titleKey;
+		}
+		return (route.meta.title as string) || '';
+	});
+
+	const seoDescription = computed(() => {
+		if (config.description) {
+			return resolveValue(config.description);
+		}
+		if (config.descriptionKey) {
+			const p = unpack(config.params);
+			const translated = t(config.descriptionKey, p);
+			return translated !== config.descriptionKey
+				? translated
+				: config.descriptionKey;
+		}
+		return '';
+	});
+
+	// TODO: add ogImage
+
+	useSeoMeta({
+		title: () => seoTitle.value,
+		ogTitle: () => seoTitle.value,
+		description: () => seoDescription.value,
+		ogDescription: () => seoDescription.value,
+		robots: config.noIndex ? 'noindex, nofollow' : 'index, follow',
+	});
+
+	watch(
+		seoTitle,
+		(val) => {
+			if (val) route.meta.breadcrumbTitle = val;
+		},
+		{ immediate: true },
+	);
+
+	return { title: seoTitle, description: seoDescription };
+};

package/app/composables/useBreadcrumbs.ts

@@ -0,0 +1,106 @@
+interface BreadcrumbItem {
+	title: string;
+	path: string;
+}
+
+export const useBreadcrumbs = () => {
+	const route = useRoute();
+	const config = useMyelophoneConfig();
+	const { t } = useMultiLang(['common', 'menu']);
+
+	const breadcrumbs = useState<BreadcrumbItem[]>(
+		'shared-breadcrumbs',
+		() => [],
+	);
+
+	const supportedLocales = (config.multi18n?.locales ?? []).map((l: string) =>
+		l.toLowerCase(),
+	);
+
+	const detectedLocale = computed(() => {
+		const firstSegment = route.path.split('/').filter(Boolean)[0];
+		return firstSegment &&
+			supportedLocales.includes(firstSegment.toLowerCase())
+			? firstSegment
+			: null;
+	});
+
+	const homePath = computed(() =>
+		detectedLocale.value ? `/${detectedLocale.value}` : '/',
+	);
+
+	const homeLabel = computed(() => {
+		const key = 'common.homepage';
+		const res = t(key);
+		return res === key ? 'Home' : res;
+	});
+
+	const truncate = (text: string, max: number) => {
+		if (!text || text.length <= max) return text;
+		const subString = text.substring(0, max);
+		const lastSpace = subString.lastIndexOf(' ');
+		return (
+			(lastSpace > 0 ? subString.substring(0, lastSpace) : subString) +
+			'...'
+		);
+	};
+
+	const updateBreadcrumbs = () => {
+		const pathSegments = route.path.split('/').filter((p) => p !== '');
+		const segments = detectedLocale.value
+			? pathSegments.slice(1)
+			: pathSegments;
+
+		const list = segments.map((path, index) => {
+			const basePath = detectedLocale.value
+				? `/${detectedLocale.value}`
+				: '';
+			const fullPath =
+				basePath + '/' + segments.slice(0, index + 1).join('/');
+
+			const routeMatch = route.matched.find(
+				(m) =>
+					m.path.replace(/\/$/, '') === fullPath.replace(/\/$/, ''),
+			);
+
+			const isLast = index === segments.length - 1;
+			let title = '';
+
+			if (isLast && route.meta.breadcrumbTitle) {
+				title = route.meta.breadcrumbTitle as string;
+			} else {
+				title = (routeMatch?.meta?.breadcrumbTitle ||
+					routeMatch?.meta?.title ||
+					'') as string;
+			}
+
+			if (!title) {
+				const translationKey = `menu.${path.replace(/-/g, '_')}`;
+				const translated = t(translationKey);
+				title = translated === translationKey ? path : translated;
+			}
+
+			return {
+				title: String(title),
+				path: fullPath,
+			};
+		});
+
+		breadcrumbs.value = list;
+	};
+
+	watch(
+		[() => route.path, () => route.meta.breadcrumbTitle],
+		() => {
+			updateBreadcrumbs();
+		},
+		{ immediate: true, deep: true },
+	);
+
+	return {
+		breadcrumbs,
+		homePath,
+		homeLabel,
+		truncate,
+	};
+};

package/app/composables/useChangeUrl.ts

@@ -0,0 +1,73 @@
+import type { LocationQuery, RouteLocationAsPathGeneric } from 'vue-router';
+
+export interface ChangeUrlOptions {
+	replace?: boolean;
+	mergeQuery?: boolean;
+}
+
+export const useChangeUrl = () => {
+	const router = useRouter();
+	const route = useRoute();
+	const requestUrl = useRequestURL();
+
+	const changeUrl = async (
+		target:
+			string | { path?: string; query?: LocationQuery; hash?: string },
+		options: ChangeUrlOptions = {},
+	) => {
+		const { replace = true, mergeQuery = true } = options;
+
+		let nextPath = route.path;
+		let nextQuery: LocationQuery = mergeQuery ? { ...route.query } : {};
+		let nextHash = route.hash;
+
+		if (typeof target === 'string') {
+			const url = new URL(target, requestUrl.origin);
+			nextPath = url.pathname;
+			nextHash = url.hash;
+
+			const searchParams = Object.fromEntries(url.searchParams.entries());
+			nextQuery = mergeQuery
+				? { ...route.query, ...searchParams }
+				: searchParams;
+		} else {
+			if (target.path !== undefined) nextPath = target.path;
+			if (target.hash !== undefined) nextHash = target.hash;
+			if (target.query !== undefined) {
+				nextQuery = mergeQuery
+					? { ...route.query, ...target.query }
+					: target.query;
+			}
+		}
+
+		const to: RouteLocationAsPathGeneric = {
+			path: nextPath,
+			query: nextQuery,
+			hash: nextHash,
+		};
+
+		if (import.meta.client) {
+			return replace ? await router.replace(to) : await router.push(to);
+		}
+	};
+
+	const updateQuery = async (
+		newQuery: Record<string, string | number | boolean | null | undefined>,
+		options: ChangeUrlOptions = {},
+	) => {
+		const cleanedQuery: LocationQuery = {};
+
+		Object.entries(newQuery).forEach(([key, val]) => {
+			if (val !== null && val !== undefined) {
+				cleanedQuery[key] = String(val);
+			}
+		});
+
+		return await changeUrl({ query: cleanedQuery }, options);
+	};
+
+	return {
+		changeUrl,
+		updateQuery,
+	};
+};

package/app/composables/useCommand.ts

@@ -0,0 +1,28 @@
+export const useCommand = (commandData: CommandInput) => {
+	const { $pinia } = useNuxtApp();
+	const store = useCommandStore($pinia);
+
+	let registeredId: string | null = null;
+
+	const register = () => {
+		if (!registeredId) {
+			registeredId = store.register(commandData);
+		}
+	};
+
+	const unregister = () => {
+		if (registeredId) {
+			store.unregister(registeredId);
+			registeredId = null;
+		}
+	};
+
+	if (getCurrentInstance()) {
+		onMounted(register);
+		onUnmounted(unregister);
+	} else {
+		register();
+	}
+
+	return { register, unregister };
+};

package/app/composables/useCookieControl.ts

@@ -0,0 +1,111 @@
+import {
+	type CookiePreferences,
+	type CookieSelection,
+	COOKIE_CATEGORIES,
+} from '~/types/cookie';
+
+export const useCookieControl = () => {
+	const store = useSettingsStore();
+	const { cookiePreferences, isCookieBannerVisible } = storeToRefs(store);
+
+	const config = useMyelophoneConfig();
+	const isEnabled = config.cookieControl?.enabled ?? true;
+
+	const nuxtCookie = useCookie<CookiePreferences | undefined>(
+		'privacy-preferences',
+		{
+			maxAge: 60 * 60 * 24 * 365,
+		},
+	);
+
+	const initCookieConsent = () => {
+		if (!isEnabled) {
+			store.isCookieBannerVisible = false;
+			return;
+		}
+
+		if (nuxtCookie.value && nuxtCookie.value.status) {
+			store.setCookieConsent(nuxtCookie.value);
+		}
+
+		const { status, timestamp } = store.cookiePreferences;
+
+		if (status === 'pending') {
+			store.isCookieBannerVisible = true;
+		} else if (status === 'declined') {
+			const thirtyDaysMs = 30 * 24 * 60 * 60 * 1000;
+			if (Date.now() - timestamp > thirtyDaysMs) {
+				store.isCookieBannerVisible = true;
+			} else {
+				store.isCookieBannerVisible = false;
+			}
+		} else {
+			store.isCookieBannerVisible = false;
+		}
+	};
+
+	if (import.meta.client) {
+		watch(
+			() => store.cookiePreferences,
+			(newVal) => {
+				nuxtCookie.value = newVal;
+			},
+			{ deep: true },
+		);
+	}
+
+	const acceptAll = () => {
+		const allAccepted = COOKIE_CATEGORIES.reduce((acc, cat) => {
+			acc[cat] = true;
+			return acc;
+		}, {} as CookieSelection);
+
+		store.setCookieConsent({
+			...allAccepted,
+			timestamp: Date.now(),
+			status: 'accepted',
+		});
+		store.isCookieBannerVisible = false;
+	};
+
+	const declineAll = () => {
+		const allDeclined = COOKIE_CATEGORIES.reduce((acc, cat) => {
+			acc[cat] = cat === 'necessary';
+			return acc;
+		}, {} as CookieSelection);
+
+		store.setCookieConsent({
+			...allDeclined,
+			timestamp: Date.now(),
+			status: 'declined',
+		});
+		store.isCookieBannerVisible = false;
+	};
+
+	const savePreferences = (prefs: Partial<CookieSelection>) => {
+		store.setCookieConsent({
+			...store.cookiePreferences,
+			...prefs,
+			necessary: true,
+			timestamp: Date.now(),
+			status: 'accepted',
+		});
+		store.isCookieBannerVisible = false;
+	};
+
+	const checkConsent = (category: keyof CookiePreferences) => {
+		if (!store.cookiePreferences) return false;
+		return store.cookiePreferences[category] === true;
+	};
+
+	return {
+		cookiePreferences,
+		isBannerVisible: isCookieBannerVisible,
+
+		initCookieConsent,
+		acceptAll,
+		declineAll,
+		savePreferences,
+		checkConsent,
+	};
+};

package/app/composables/useCookieModal.ts

@@ -0,0 +1,9 @@
+export const useCookieModal = () => {
+	const isOpen = useState('cookie-settings-modal-open', () => false);
+
+	const open = () => (isOpen.value = true);
+	const close = () => (isOpen.value = false);
+	const toggle = () => (isOpen.value = !isOpen.value);
+
+	return { isOpen, open, close, toggle };
+};

package/app/composables/useDevice.ts

@@ -0,0 +1,109 @@
+const batteryLevel = ref(1);
+const isLowBattery = ref(false);
+let isBatteryListenerActive = false;
+
+const initBatteryListener = async () => {
+	if (!import.meta.client || isBatteryListenerActive) return;
+
+	if (
+		'getBattery' in navigator &&
+		typeof (navigator as any).getBattery === 'function'
+	) {
+		try {
+			const batt: any = await (navigator as any).getBattery();
+			isBatteryListenerActive = true;
+
+			const updateStatus = () => {
+				batteryLevel.value = batt.level;
+				isLowBattery.value = batt.level <= 0.2 && !batt.charging;
+			};
+
+			updateStatus();
+
+			if (typeof batt.addEventListener === 'function') {
+				batt.addEventListener('levelchange', updateStatus);
+				batt.addEventListener('chargingchange', updateStatus);
+			} else {
+				batt.onlevelchange = updateStatus;
+				batt.onchargingchange = updateStatus;
+			}
+		} catch (e) {
+			console.warn('Battery API error:', e);
+		}
+	}
+};
+
+export const useDevice = () => {
+	initBatteryListener();
+
+	const headers = useRequestHeaders(['user-agent']);
+
+	const getUA = () => {
+		if (import.meta.server) return headers['user-agent'] || '';
+		return navigator.userAgent || '';
+	};
+
+	const isOutdated = computed(() => {
+		if (import.meta.server) return false;
+		const ua = getUA();
+		if (!ua) return false;
+
+		const chromeMatch = ua.match(/(?:Chrome|CriOS)\/(\d+)\./);
+		if (chromeMatch?.[1] && parseInt(chromeMatch[1], 10) < 85) return true;
+
+		const safariMatch = ua.match(/Version\/(\d+)\..*Safari/);
+		if (safariMatch?.[1] && parseInt(safariMatch[1], 10) < 14) return true;
+
+		const firefoxMatch = ua.match(/Firefox\/(\d+)\./);
+		if (firefoxMatch?.[1] && parseInt(firefoxMatch[1], 10) < 80)
+			return true;
+
+		if (/MSIE|Trident/i.test(ua)) return true;
+
+		if (import.meta.client) {
+			const supportsNuxt4 =
+				'noModule' in HTMLScriptElement.prototype &&
+				typeof Promise?.allSettled === 'function' &&
+				typeof BigInt !== 'undefined' &&
+				'replaceAll' in String.prototype;
+
+			if (!supportsNuxt4) return true;
+		}
+		return false;
+	});
+
+	const isBot = computed(() => {
+		return /bot|googlebot|crawler|spider|robot|crawling|lighthouse|inspect/i.test(
+			getUA(),
+		);
+	});
+
+	const isMobile = computed(() => {
+		return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+			getUA(),
+		);
+	});
+
+	const prefersReducedMotion = computed(() => {
+		if (import.meta.server) return false;
+		return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	});
+
+	const isStaticMode = computed(
+		() =>
+			isBot.value ||
+			prefersReducedMotion.value ||
+			isLowBattery.value ||
+			isOutdated.value,
+	);
+
+	return {
+		isBot,
+		isOutdated,
+		isMobile,
+		isStaticMode,
+		isLowBattery,
+		batteryLevel,
+		prefersReducedMotion,
+	};
+};

package/app/composables/useGeoFetch.ts

@@ -0,0 +1,139 @@
+interface GeoState {
+	country: string;
+	city: string;
+	resolved: boolean;
+}
+
+interface GeoCacheData {
+	country: string;
+	city: string;
+	timestamp: number;
+}
+
+interface WpFormsResponse {
+	country_iso?: string;
+	country_code?: string;
+	city?: string;
+	[key: string]: unknown;
+}
+
+interface CountryIsResponse {
+	country?: string;
+	[key: string]: unknown;
+}
+
+const CACHE_KEY = 'user-geo-data';
+const CACHE_TTL = 30 * 60 * 1000;
+const TIMEOUT_MS = 1000;
+
+export const useGeoFetch = () => {
+	const geo = useState<GeoState>('geo-data', () => ({
+		country: '',
+		city: '',
+		resolved: false,
+	}));
+
+	const loadFromCache = (): GeoCacheData | null => {
+		try {
+			const item = sessionStorage.getItem(CACHE_KEY);
+			if (!item) return null;
+
+			const parsed = JSON.parse(item) as GeoCacheData;
+			if (Date.now() - parsed.timestamp < CACHE_TTL) {
+				return parsed;
+			}
+			return null;
+		} catch {
+			return null;
+		}
+	};
+
+	const saveToCache = (country: string, city: string) => {
+		try {
+			const data: GeoCacheData = {
+				country,
+				city,
+				timestamp: Date.now(),
+			};
+			sessionStorage.setItem(CACHE_KEY, JSON.stringify(data));
+		} catch {}
+	};
+
+	const fetchWithTimeout = async <T>(url: string): Promise<T> => {
+		const controller = new AbortController();
+		const id = setTimeout(() => controller.abort(), TIMEOUT_MS);
+		try {
+			const res = await fetch(url, { signal: controller.signal });
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			return (await res.json()) as T;
+		} finally {
+			clearTimeout(id);
+		}
+	};
+
+	const resolve = async () => {
+		if (import.meta.server || geo.value.resolved) return;
+
+		const cached = loadFromCache();
+		if (cached) {
+			geo.value = {
+				country: cached.country,
+				city: cached.city,
+				resolved: true,
+			};
+			return;
+		}
+
+		onNuxtReady(async () => {
+			let countryCode = '';
+			let cityName = '';
+			let isSuccess = false;
+
+			try {
+				const data = await fetchWithTimeout<WpFormsResponse>(
+					'https://geo.wpforms.com/v3/geolocate/json',
+				);
+
+				const code = data.country_iso || data.country_code;
+
+				if (code) {
+					countryCode = code.toUpperCase();
+					cityName = data.city || '';
+					isSuccess = true;
+				}
+			} catch {
+				try {
+					const fallbackData =
+						await fetchWithTimeout<CountryIsResponse>(
+							'https://api.country.is/',
+						);
+
+					if (fallbackData.country) {
+						countryCode = fallbackData.country.toUpperCase();
+						cityName = '';
+						isSuccess = true;
+					}
+				} catch {
+					isSuccess = false;
+				}
+			}
+
+			if (isSuccess && countryCode) {
+				saveToCache(countryCode, cityName);
+
+				geo.value = {
+					country: countryCode,
+					city: cityName,
+					resolved: true,
+				};
+			} else {
+				geo.value = {
+					...geo.value,
+					resolved: true,
+				};
+			}
+		});
+	};
+
+	return { geo, resolve };
+};

package/app/composables/useLoadScript.ts

@@ -0,0 +1,36 @@
+export function useLoadScript() {
+	const loadedScripts = new Set<string>();
+
+	const loadScript = (
+		src: string,
+		options: { async?: boolean; defer?: boolean; cache?: boolean } = {},
+	) => {
+		return new Promise<void>((resolve, reject) => {
+			if (import.meta.server || loadedScripts.has(src)) {
+				resolve();
+				return;
+			}
+
+			const s = document.createElement('script');
+			s.src =
+				options.cache === false
+					? `${src}?${(Date.now() / 60000) | 0}`
+					: src;
+			s.async = options.async ?? true;
+			s.defer = options.defer ?? true;
+
+			s.onload = () => {
+				loadedScripts.add(src);
+				resolve();
+			};
+
+			s.onerror = (err) => {
+				reject(err);
+			};
+
+			document.body.appendChild(s);
+		});
+	};
+
+	return { loadScript };
+}