@myelophone/nuxt 0.18.2

package/app/composables/useModalState.ts

@@ -0,0 +1,37 @@
+const activeModals = ref<string[]>([]);
+
+export const useModalState = () => {
+	const register = (id: string) => {
+		if (!activeModals.value.includes(id)) {
+			activeModals.value.push(id);
+		}
+	};
+
+	const unregister = (id: string) => {
+		activeModals.value = activeModals.value.filter((m) => m !== id);
+	};
+
+	const isTop = (id: string) => {
+		return activeModals.value[activeModals.value.length - 1] === id;
+	};
+
+	watch(
+		() => activeModals.value.length,
+		(count) => {
+			if (import.meta.client) {
+				if (count > 0) {
+					document.body.style.overflow = 'hidden';
+				} else {
+					document.body.style.overflow = '';
+				}
+			}
+		},
+	);
+
+	return {
+		activeModals,
+		register,
+		unregister,
+		isTop,
+	};
+};

package/app/composables/useMultiLang.ts

@@ -0,0 +1,278 @@
+type TranslationMap = Record<string, any>;
+interface NamespaceCache {
+	[key: string]: TranslationMap;
+}
+type InterpolationParams = Record<string, string | number>;
+
+export function useMultiLang(namespaces: string | string[]) {
+	const nuxtApp = useNuxtApp();
+	const pinia = nuxtApp.$pinia;
+	const settingsStore = useSettingsStore(pinia);
+
+	const activeLang = computed(() => settingsStore.currentLocale);
+	const defaultLang = settingsStore.defaultLocale || 'en';
+
+	const nsArray = (Array.isArray(namespaces) ? namespaces : [namespaces]).map(
+		(ns) => ns.replace(/^\/+|\/+$/g, ''),
+	);
+
+	const translationsState = useState<Record<string, NamespaceCache>>(
+		'i18n_translations',
+		() => ({}),
+	);
+
+	const formatNumber = (num: number, l: string) =>
+		new Intl.NumberFormat(l).format(num);
+
+	const compactNumber = (num: number, l: string) =>
+		new Intl.NumberFormat(l, {
+			notation: 'compact',
+			maximumFractionDigits: 1,
+		}).format(num);
+
+	const isProdDist =
+		process.env.PROD_DIST === 'true' ||
+		import.meta.env.PROD_DIST === 'true';
+
+	const localesAlias = import.meta.glob('#myelophone-nuxt-locales/**/*.json');
+	const localesPlayground = import.meta.glob(
+		'~~/playground/locales/**/*.json',
+	);
+	const localesApp = import.meta.glob('~/locales/**/*.json');
+
+	const allLocales = {
+		...localesAlias,
+		...localesApp,
+		...(!isProdDist ? localesPlayground : {}),
+	};
+
+	const isPlainObject = (value: unknown): value is Record<string, any> =>
+		Object.prototype.toString.call(value) === '[object Object]';
+
+	const deepMerge = (
+		target: Record<string, any>,
+		source: Record<string, any>,
+	) => {
+		Object.entries(source).forEach(([key, value]) => {
+			if (isPlainObject(value) && isPlainObject(target[key])) {
+				deepMerge(target[key], value);
+				return;
+			}
+
+			target[key] = value;
+		});
+
+		return target;
+	};
+
+	const expandDottedKeys = (value: any): any => {
+		if (Array.isArray(value)) {
+			return value.map(expandDottedKeys);
+		}
+
+		if (!isPlainObject(value)) {
+			return value;
+		}
+
+		const result: Record<string, any> = {};
+
+		Object.entries(value).forEach(([key, rawValue]) => {
+			const expandedValue = expandDottedKeys(rawValue);
+			const keyParts = key.split('.');
+
+			if (keyParts.length === 1) {
+				if (
+					isPlainObject(result[key]) &&
+					isPlainObject(expandedValue)
+				) {
+					deepMerge(result[key], expandedValue);
+				} else {
+					result[key] = expandedValue;
+				}
+
+				return;
+			}
+
+			let current = result;
+
+			keyParts.forEach((part, index) => {
+				const isLast = index === keyParts.length - 1;
+
+				if (isLast) {
+					if (
+						isPlainObject(current[part]) &&
+						isPlainObject(expandedValue)
+					) {
+						deepMerge(current[part], expandedValue);
+					} else {
+						current[part] = expandedValue;
+					}
+
+					return;
+				}
+
+				if (!isPlainObject(current[part])) {
+					current[part] = {};
+				}
+
+				current = current[part];
+			});
+		});
+
+		return result;
+	};
+
+	const loadNamespace = async (lang: string, ns: string) => {
+		if (translationsState.value[lang]?.[ns]) return;
+
+		const targetSuffix = `locales/${lang}/${ns}.json`;
+		const matchEntry = Object.entries(allLocales).find(([filePath]) =>
+			filePath.replace(/\\/g, '/').endsWith(targetSuffix),
+		);
+
+		if (!matchEntry) return;
+
+		try {
+			const mod: any = await matchEntry[1]();
+			const data = expandDottedKeys(mod.default || mod);
+
+			if (!translationsState.value[lang]) {
+				translationsState.value[lang] = {};
+			}
+
+			translationsState.value[lang][ns] = data;
+		} catch (e) {
+			console.error(`Failed to load: ${ns}`, e);
+		}
+	};
+
+	const { pending, refresh } = useAsyncData(
+		`i18n-${activeLang.value}-${nsArray.join('_')}`,
+		async () => {
+			const mainPromises = nsArray.map((ns) =>
+				loadNamespace(activeLang.value, ns),
+			);
+			await Promise.all(mainPromises);
+
+			if (import.meta.server && activeLang.value !== defaultLang) {
+				const fallbackPromises = [];
+
+				for (const ns of nsArray) {
+					const mainDict =
+						translationsState.value[activeLang.value]?.[ns];
+
+					if (!mainDict) {
+						fallbackPromises.push(loadNamespace(defaultLang, ns));
+					}
+				}
+
+				await Promise.all(fallbackPromises);
+			}
+
+			return null;
+		},
+		{ watch: [activeLang] },
+	);
+
+	const t = (
+		key: string,
+		arg1?: InterpolationParams | number,
+		arg2?: number,
+		forceRule?: string,
+	): string => {
+		let params: InterpolationParams = {};
+		let count: number | undefined;
+
+		if (typeof arg1 === 'number') {
+			count = arg1;
+		} else if (typeof arg1 === 'object' && arg1 !== null) {
+			params = arg1;
+			if (typeof arg2 === 'number') count = arg2;
+		}
+
+		const lang = activeLang.value;
+
+		const lookup = (l: string) => {
+			const nsCache = translationsState.value[l];
+			if (!nsCache) return undefined;
+
+			for (const ns of nsArray) {
+				if (key === ns || key.startsWith(`${ns}.`)) {
+					const dict = nsCache[ns];
+					if (!dict) continue;
+
+					const internalKey = key.slice(ns.length + 1);
+					if (!internalKey && typeof count !== 'number')
+						return undefined;
+
+					if (typeof count === 'number') {
+						const pluralRule =
+							forceRule || new Intl.PluralRules(l).select(count);
+
+						const searchKeys =
+							count === 0
+								? [
+										`${internalKey}_zero`,
+										`${internalKey}_${pluralRule}`,
+										`${internalKey}_other`,
+									]
+								: [
+										`${internalKey}_${pluralRule}`,
+										`${internalKey}_other`,
+									];
+
+						for (const pk of searchKeys) {
+							const val = pk
+								.split('.')
+								.reduce((acc: any, k) => acc?.[k], dict);
+							if (typeof val === 'string') return val;
+						}
+					}
+
+					const value = internalKey
+						.split('.')
+						.reduce((acc: any, k) => acc?.[k], dict);
+					if (typeof value === 'string') return value;
+				}
+			}
+			return undefined;
+		};
+
+		let val = lookup(activeLang.value);
+
+		if (!val && activeLang.value !== defaultLang) {
+			val = lookup(defaultLang);
+
+			if (!val && import.meta.client) {
+				const ns = nsArray.find((n) => key.startsWith(n + '.'));
+				if (ns) loadNamespace(defaultLang, ns);
+			}
+		}
+
+		const finalStr = val || key;
+
+		return finalStr.replace(/\{(\w+)\}/g, (_, k) => {
+			if (k === 'count' && typeof count === 'number')
+				return formatNumber(count, lang);
+			return params[k] !== undefined ? String(params[k]) : `{${k}}`;
+		});
+	};
+
+	const tn = (
+		key: string,
+		count: number,
+		params: InterpolationParams = {},
+	): string => {
+		const lang = activeLang.value;
+
+		const rule = count >= 1000 ? 'many' : undefined;
+
+		const translated = t(key, params, count, rule);
+
+		const formattedCount = compactNumber(count, lang);
+
+		return translated.replace(formatNumber(count, lang), formattedCount);
+	};
+
+	return { t, tn, loadPromise: pending, refresh };
+}

package/app/composables/useNetwork.ts

@@ -0,0 +1,49 @@
+export const useNetwork = () => {
+	const effectiveType = ref<string>('4g');
+	const isSlowConnection = ref(false);
+	const isOnline = ref(true);
+
+	const updateStatus = () => {
+		if (import.meta.server) return;
+		isOnline.value = navigator.onLine;
+
+		const conn =
+			(navigator as any).connection ||
+			(navigator as any).mozConnection ||
+			(navigator as any).webkitConnection;
+
+		if (conn) {
+			effectiveType.value = conn.effectiveType;
+			isSlowConnection.value =
+				['slow-2g', '2g', '3g'].includes(conn.effectiveType) ||
+				conn.saveData === true;
+		}
+	};
+
+	if (import.meta.client) {
+		updateStatus();
+
+		const conn = (navigator as any).connection;
+
+		const addListeners = () => {
+			if (conn) conn.addEventListener('change', updateStatus);
+			window.addEventListener('online', updateStatus);
+			window.addEventListener('offline', updateStatus);
+		};
+
+		const removeListeners = () => {
+			if (conn) conn.removeEventListener('change', updateStatus);
+			window.removeEventListener('online', updateStatus);
+			window.removeEventListener('offline', updateStatus);
+		};
+
+		if (getCurrentInstance()) {
+			onMounted(addListeners);
+			onUnmounted(removeListeners);
+		} else {
+			addListeners();
+		}
+	}
+
+	return { effectiveType, isSlowConnection, isOnline };
+};

package/app/composables/useNuxtVersion.ts

@@ -0,0 +1,5 @@
+import { version } from 'nuxt/package.json';
+
+export function useNuxtVersion() {
+	return version || 'v4.x';
+}

package/app/composables/usePiniaStore.ts

@@ -0,0 +1,5 @@
+// biome-ignore lint/suspicious/noExplicitAny: generic type
+export function usePiniaStore<S extends (...args: any) => any>(storeFn: S) {
+	const pinia = useNuxtApp().$pinia;
+	return storeFn(pinia);
+}

package/app/composables/usePopupControl.ts

@@ -0,0 +1,57 @@
+export const usePopupControl = (
+	popupId: string,
+	daysUntilReappear: number = 7,
+) => {
+	const isOpen = useState<boolean>(`popup-state-${popupId}`, () => false);
+
+	const outputCookie = useCookie(`popup-viewed-${popupId}`, {
+		maxAge: 60 * 60 * 24 * daysUntilReappear,
+		path: '/',
+	});
+
+	const open = (force: boolean = false) => {
+		if (force) {
+			isOpen.value = true;
+		} else {
+			if (!outputCookie.value) {
+				isOpen.value = true;
+			}
+		}
+	};
+
+	const close = (persist: boolean = true) => {
+		isOpen.value = false;
+		if (persist) {
+			outputCookie.value = new Date().toISOString();
+		}
+	};
+
+	const reset = () => {
+		outputCookie.value = null;
+	};
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		if (isOpen.value && e.key === 'Escape') {
+			close(false);
+		}
+	};
+
+	onMounted(() => {
+		if (getCurrentInstance()) {
+			window.addEventListener('keydown', handleKeydown);
+		}
+	});
+
+	onUnmounted(() => {
+		if (getCurrentInstance()) {
+			window.removeEventListener('keydown', handleKeydown);
+		}
+	});
+
+	return {
+		isOpen,
+		open,
+		close,
+		reset,
+	};
+};