@myelophone/nuxt 0.18.2

package/app/components/view/StickyHeadingContent.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type { COL_SPAN } from "~/constants/layout";
+import type { LayoutSize } from "~/constants/layout";
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "display";
+type StickyBreakpoint = "always" | "sm" | "md" | "lg";
+
+interface Props {
+	as?: string;
+	title?: string;
+	headingSide?: "left" | "right";
+	headingLevel?: HeadingLevel;
+	headingSize?: HeadingSize;
+	headingSpan?: keyof typeof COL_SPAN;
+	contentSpan?: keyof typeof COL_SPAN;
+	containerSize?: LayoutSize;
+	sticky?: boolean;
+	stickyFrom?: StickyBreakpoint;
+	stickyOffset?: string;
+	class?: string;
+	containerClass?: string;
+	rowClass?: string;
+	headingColumnClass?: string;
+	headingClass?: string;
+	contentColumnClass?: string;
+	contentClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	as: "section",
+	title: "",
+	headingSide: "left",
+	headingLevel: 2,
+	headingSize: "lg",
+	headingSpan: 5,
+	contentSpan: 7,
+	containerSize: "content",
+	sticky: true,
+	stickyFrom: "lg",
+	stickyOffset: "6rem",
+	class: "",
+	containerClass: "",
+	rowClass: "",
+	headingColumnClass: "",
+	headingClass: "",
+	contentColumnClass: "",
+	contentClass: "",
+});
+
+const stickyClasses: Record<StickyBreakpoint, string> = {
+	always: "sticky",
+	sm: "sm:sticky",
+	md: "md:sticky",
+	lg: "lg:sticky",
+};
+
+const rootClasses = computed(() =>
+	["w-full", props.class].filter(Boolean).join(" "),
+);
+
+const containerClasses = computed(() => props.containerClass);
+
+const rowClasses = computed(() =>
+	["gap-y-8 md:-mx-6", props.rowClass].filter(Boolean).join(" "),
+);
+
+const headingColumnClasses = computed(() =>
+	[
+		"view-sticky-heading-content__heading-column md:px-6",
+		props.headingSide === "right" ? "md:order-2" : "md:order-1",
+		props.headingColumnClass,
+	]
+		.filter(Boolean)
+		.join(" "),
+);
+
+const contentColumnClasses = computed(() =>
+	[
+		"view-sticky-heading-content__content-column md:px-6",
+		props.headingSide === "right" ? "md:order-1" : "md:order-2",
+		props.contentColumnClass,
+	]
+		.filter(Boolean)
+		.join(" "),
+);
+
+const headingColumnStyles = computed(() => ({
+	"--view-sticky-heading-column-width": `${(Number(props.headingSpan) / 12) * 100}%`,
+}));
+
+const contentColumnStyles = computed(() => ({
+	"--view-sticky-content-column-width": `${(Number(props.contentSpan) / 12) * 100}%`,
+}));
+
+const stickyHeadingClasses = computed(() =>
+	["w-full self-start", props.sticky && stickyClasses[props.stickyFrom]]
+		.filter(Boolean)
+		.join(" "),
+);
+
+const stickyHeadingStyles = computed(() =>
+	props.sticky ? { top: props.stickyOffset } : undefined,
+);
+</script>
+
+<template>
+	<component :is="as" :class="rootClasses">
+		<GridContainer :size="containerSize" :class="containerClasses">
+			<GridRow align="stretch" :class="rowClasses">
+				<GridCol
+					:span="headingSpan"
+					:class="headingColumnClasses"
+					:style="headingColumnStyles"
+				>
+					<div
+						:class="stickyHeadingClasses"
+						:style="stickyHeadingStyles"
+					>
+						<UiHeading
+							:level="headingLevel"
+							:size="headingSize"
+							:class="headingClass"
+						>
+							<slot name="heading">{{ title }}</slot>
+						</UiHeading>
+
+						<slot name="heading-after" />
+					</div>
+				</GridCol>
+
+				<GridCol
+					:span="contentSpan"
+					:class="contentColumnClasses"
+					:style="contentColumnStyles"
+				>
+					<div :class="contentClass">
+						<slot />
+					</div>
+				</GridCol>
+			</GridRow>
+		</GridContainer>
+	</component>
+</template>
+
+<style>
+@media (min-width: 768px) {
+	.view-sticky-heading-content__heading-column {
+		flex-basis: var(--view-sticky-heading-column-width);
+		max-width: var(--view-sticky-heading-column-width);
+	}
+
+	.view-sticky-heading-content__content-column {
+		flex-basis: var(--view-sticky-content-column-width);
+		max-width: var(--view-sticky-content-column-width);
+	}
+}
+</style>

package/app/components/view/TallyForm.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+export interface TallyOptions {
+	hideTitle?: boolean;
+	transparentBackground?: boolean;
+	dynamicHeight?: boolean;
+	alignLeft?: boolean;
+	overlay?: boolean;
+	emoji?: { text: string; animation: string };
+	autoClose?: number;
+	doNotShowAfterSubmit?: boolean;
+	[key: string]: any;
+}
+
+export interface TallyColors {
+	light?: { bg?: string; text?: string };
+	dark?: { bg?: string; text?: string };
+}
+
+interface Props {
+	formId: string;
+	mode?: "standard" | "popup" | "fullscreen";
+	domain?: string;
+	initialHeight?: number | string;
+	hiddenFields?: Record<string, any>;
+	options?: TallyOptions;
+	colors?: TallyColors;
+	popupWidth?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	mode: "standard",
+	initialHeight: 400,
+	hiddenFields: () => ({}),
+	options: () => ({}),
+	colors: () => ({}),
+	popupWidth: 900,
+});
+
+const iframeId = `tally-${Math.random().toString(36).slice(2, 11)}`;
+
+const config = useMyelophoneConfig();
+const rawDomain = props.domain || config.tally?.domain || "tally.so";
+const baseUrl = `https://${rawDomain}`;
+const scriptSrc = `${baseUrl}/widgets/embed.js`;
+
+const settingsStore = useSettingsStore();
+const currentTheme = computed(() => settingsStore.theme || "light");
+
+const getPayload = (isFullscreenOverride = false) => {
+	const payload: Record<string, any> = {
+		transparentBackground: 1,
+		dynamicHeight: isFullscreenOverride ? 0 : 1,
+		...props.options,
+	};
+
+	if (props.colors.light?.bg) payload.lightbg = props.colors.light.bg;
+	if (props.colors.light?.text) payload.lighttext = props.colors.light.text;
+	if (props.colors.dark?.bg) payload.darkbg = props.colors.dark.bg;
+	if (props.colors.dark?.text) payload.darktext = props.colors.dark.text;
+
+	payload.theme = currentTheme.value;
+	if (props.hiddenFields) Object.assign(payload, props.hiddenFields);
+
+	return payload;
+};
+
+const generateUrl = (includeTheme: boolean) => {
+	const urlParams = new URLSearchParams();
+	const payload = getPayload(false);
+	if (!includeTheme) delete payload.theme;
+
+	Object.entries(payload).forEach(([key, value]) => {
+		if (
+			typeof value === "boolean" &&
+			props.options &&
+			key in props.options
+		) {
+			urlParams.set(key, value ? "1" : "0");
+		} else if (value !== undefined && value !== null) {
+			urlParams.set(key, String(value));
+		}
+	});
+	return `${baseUrl}/embed/${props.formId}?${urlParams.toString()}`;
+};
+
+const staticUrl = computed(() => generateUrl(false));
+const fullUrl = computed(() => generateUrl(true));
+
+const { load, status } = useScript(scriptSrc, {
+	trigger: "manual",
+	use() {
+		return { Tally: (window as any).Tally };
+	},
+});
+
+const getTallyApi = async () => {
+	if ((window as any).Tally) return (window as any).Tally;
+	if (status.value !== "loading" && status.value !== "loaded") load();
+
+	return new Promise((resolve) => {
+		let attempts = 0;
+		const check = setInterval(() => {
+			attempts++;
+			if ((window as any).Tally) {
+				clearInterval(check);
+				resolve((window as any).Tally);
+			}
+			if (attempts > 50) {
+				clearInterval(check);
+				resolve(null);
+			}
+		}, 100);
+	});
+};
+
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+const iframeLoaded = ref(false);
+
+onMounted(() => {
+	if (props.mode === "standard") getTallyApi();
+});
+
+const onIframeLoad = async () => {
+	iframeLoaded.value = true;
+	updateThemeInIframe(iframeRef.value?.contentWindow);
+
+	const Tally = await getTallyApi();
+	if (Tally?.loadEmbeds) {
+		setTimeout(() => {
+			Tally.loadEmbeds();
+		}, 200);
+	}
+};
+
+const openPopup = async () => {
+	const Tally = await getTallyApi();
+	if (!Tally) return;
+
+	const isFullscreen = props.mode === "fullscreen";
+	const payload = getPayload(isFullscreen);
+
+	const popupOptions = {
+		layout: isFullscreen ? "modal" : "default",
+		width: isFullscreen ? 10000 : undefined,
+		...payload,
+	};
+
+	if (isFullscreen) {
+		document.body.classList.add("tally-fullscreen-mode");
+	} else {
+		document.body.classList.remove("tally-fullscreen-mode");
+	}
+
+	setTimeout(() => {
+		Tally.openPopup(props.formId, popupOptions);
+		setTimeout(syncPopupTheme, 300);
+	}, 50);
+};
+
+const updateThemeInIframe = (w: Window | null | undefined) => {
+	w?.postMessage({ type: "setTheme", theme: currentTheme.value }, "*");
+};
+const syncPopupTheme = () => {
+	const popupFrame = document.querySelector(
+		".tally-popup iframe",
+	) as HTMLIFrameElement;
+	updateThemeInIframe(popupFrame?.contentWindow);
+};
+watch(currentTheme, () => {
+	props.mode === "standard"
+		? updateThemeInIframe(iframeRef.value?.contentWindow)
+		: syncPopupTheme();
+});
+
+defineExpose({ open: openPopup });
+</script>
+
+<template>
+	<component
+		:is="mode === 'standard' ? 'div' : 'span'"
+		class="tally-component-wrapper"
+		:class="{ 'cursor-pointer': mode !== 'standard' }"
+		@click="mode !== 'standard' && openPopup()"
+	>
+		<ClientOnly v-if="mode === 'standard'">
+			<div
+				class="relative w-full overflow-hidden"
+				:style="{
+					minHeight: iframeLoaded ? undefined : `${initialHeight}px`,
+				}"
+			>
+				<div
+					v-if="!iframeLoaded"
+					class="absolute inset-0 z-0 flex items-center justify-center bg-gray-50 dark:bg-gray-900"
+					style="background-color: var(--ui-bg)"
+				>
+					<a
+						:href="staticUrl"
+						target="_blank"
+						class="text-sm underline opacity-60"
+						>Загрузка...</a
+					>
+				</div>
+
+				<iframe
+					ref="iframeRef"
+					:id="iframeId"
+					:src="fullUrl"
+					class="relative z-10 w-full border-0 transition-opacity duration-500"
+					:class="iframeLoaded ? 'opacity-100' : 'opacity-0'"
+					loading="lazy"
+					width="100%"
+					height="100%"
+					title="Form"
+					@load="onIframeLoad"
+				/>
+			</div>
+			<template #fallback>
+				<div
+					class="relative w-full flex items-center justify-center"
+					:style="{
+						height: `${initialHeight}px`,
+						backgroundColor: 'var(--ui-bg)',
+					}"
+				>
+					<a
+						:href="staticUrl"
+						target="_blank"
+						class="text-sm underline opacity-60"
+						>Открыть форму</a
+					>
+				</div>
+			</template>
+		</ClientOnly>
+		<slot v-else />
+	</component>
+</template>
+
+<style scoped>
+.tally-component-wrapper {
+	display: inherit;
+	cursor: auto !important;
+}
+:deep(iframe) {
+	cursor: auto !important;
+}
+</style>
+
+<style>
+body.tally-fullscreen-mode .tally-overlay {
+	z-index: 2147483647 !important;
+	padding: 0 !important;
+	display: flex !important;
+	align-items: center !important;
+	justify-content: center !important;
+	background-color: transparent !important;
+}
+
+body.tally-fullscreen-mode .tally-overlay .tally-popup {
+	width: 100vw !important;
+	height: 100vh !important;
+	max-width: none !important;
+	max-height: none !important;
+	border-radius: 0 !important;
+	margin: 0 !important;
+	top: 0 !important;
+	left: 0 !important;
+	background-color: var(--ui-bg, #fff) !important;
+	display: flex !important;
+	flex-direction: column !important;
+}
+
+body.tally-fullscreen-mode .tally-overlay .tally-popup iframe {
+	width: 100% !important;
+	height: 100% !important;
+	flex: 1 !important;
+	min-height: 100vh !important;
+	border-radius: 0 !important;
+}
+
+body.tally-fullscreen-mode .tally-overlay .tally-close {
+	position: fixed !important;
+	top: 24px !important;
+	right: 24px !important;
+	color: var(--ui-text, #000) !important;
+	background: rgba(127, 127, 127, 0.2) !important;
+	border-radius: 50% !important;
+	z-index: 2147483648 !important;
+	width: 40px !important;
+	height: 40px !important;
+	display: flex !important;
+	align-items: center !important;
+	justify-content: center !important;
+}
+</style>

package/app/components/view/WarningOutdated.vue

@@ -0,0 +1,113 @@
+<template>
+	<div
+		v-if="showWarning"
+		class="fixed inset-0 bg-gray-50 flex flex-col items-center justify-center z-50 p-4"
+	>
+		<div
+			class="bg-white shadow-lg rounded-xl p-6 max-w-md w-full text-center flex flex-col items-center"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				aria-label="Nuxt"
+				class="h-8 sm:h-12"
+				viewBox="0 0 800 200"
+			>
+				<path
+					fill="#00dc82"
+					d="M168.303 200h111.522c3.543 0 7.022-.924 10.09-2.679A20.1 20.1 0 0 0 297.3 190a19.86 19.86 0 0 0 2.7-10.001 19.86 19.86 0 0 0-2.709-9.998L222.396 41.429a20.1 20.1 0 0 0-7.384-7.32 20.3 20.3 0 0 0-10.088-2.679c-3.541 0-7.02.925-10.087 2.68a20.1 20.1 0 0 0-7.384 7.32l-19.15 32.896L130.86 9.998a20.1 20.1 0 0 0-7.387-7.32A20.3 20.3 0 0 0 113.384 0c-3.542 0-7.022.924-10.09 2.679a20.1 20.1 0 0 0-7.387 7.319L2.709 170A19.85 19.85 0 0 0 0 179.999c-.002 3.511.93 6.96 2.7 10.001a20.1 20.1 0 0 0 7.385 7.321A20.3 20.3 0 0 0 20.175 200h70.004c27.737 0 48.192-12.075 62.266-35.633l34.171-58.652 18.303-31.389 54.93 94.285h-73.233zm-79.265-31.421-48.854-.011 73.232-125.706 36.541 62.853-24.466 42.01c-9.347 15.285-19.965 20.854-36.453 20.854"
+				></path>
+				<path
+					fill="currentColor"
+					d="M377 200a4 4 0 0 0 4-4v-93s5.244 8.286 15 25l38.707 66.961c1.789 3.119 5.084 5.039 8.649 5.039H470V50h-27a4 4 0 0 0-4 4v94l-17-30-36.588-62.98c-1.792-3.108-5.081-5.02-8.639-5.02H350v150zm299.203-56.143L710.551 92h-25.73a9.97 9.97 0 0 0-8.333 4.522L660.757 120.5l-15.731-23.978A9.97 9.97 0 0 0 636.693 92h-25.527l34.348 51.643L608.524 200h24.966a9.97 9.97 0 0 0 8.29-4.458l19.18-28.756 18.981 28.72a9.97 9.97 0 0 0 8.313 4.494h24.736zM724.598 92h19.714V60.071h28.251V92H800v24.857h-27.437V159.5c0 10.5 5.284 15.429 14.43 15.429H800V200h-16.869c-23.576 0-38.819-14.143-38.819-39.214v-43.929h-19.714zM590 92h-15c-3.489 0-6.218.145-8.5 2.523-2.282 2.246-2.5 3.63-2.5 7.066v52.486c0 8.058-.376 12.962-4 16.925-3.624 3.831-8.619 5-16 5-7.247 0-12.376-1.169-16-5-3.624-3.963-4-8.867-4-16.925v-52.486c0-3.435-.218-4.82-2.5-7.066C519.218 92.145 516.489 92 513 92h-15v62.422q0 21.006 11.676 33.292C517.594 195.905 529.103 200 544 200s26.204-4.095 34.123-12.286Q590 175.428 590 154.422z"
+				></path>
+			</svg>
+			<h2 class="text-2xl font-semibold mb-2 text-gray-800">
+				{{ t("outdated.browserNotSupported") }}
+			</h2>
+			<p class="text-gray-600 mb-6">
+				{{ t("outdated.useModernBrowser") }}:
+			</p>
+			<div class="flex flex-wrap justify-center gap-4 mb-4">
+				<a
+					href="https://www.google.com/chrome/"
+					target="_blank"
+					class="flex flex-col items-center gap-1 hover:scale-105 transition-transform"
+				>
+					<img
+						src="/browsers/chrome.svg"
+						alt="Chrome"
+						class="w-12 h-12"
+					/>
+					<span class="text-gray-700 text-sm">Chrome</span>
+				</a>
+				<a
+					href="https://www.microsoft.com/edge"
+					target="_blank"
+					class="flex flex-col items-center gap-1 hover:scale-105 transition-transform"
+				>
+					<img
+						src="/browsers/edge.svg"
+						alt="Edge"
+						class="w-12 h-12"
+					/>
+					<span class="text-gray-700 text-sm">Edge</span>
+				</a>
+				<a
+					href="https://www.mozilla.org/firefox/new/"
+					target="_blank"
+					class="flex flex-col items-center gap-1 hover:scale-105 transition-transform"
+				>
+					<img
+						src="/browsers/firefox.svg"
+						alt="Firefox"
+						class="w-12 h-12"
+					/>
+					<span class="text-gray-700 text-sm">Firefox</span>
+				</a>
+			</div>
+			<button
+				@click="dismiss"
+				class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition"
+			>
+				{{ t("outdated.close") }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+const showWarning = ref(false);
+const dismissedKey = "browser-warning-dismissed";
+
+const isBrowserUnsupported = () => {
+	if (!import.meta.client) return false;
+
+	if (window.location.search.includes("testBrowserWarning")) return true;
+
+	const ua = navigator.userAgent;
+	const supported = /(Chrome|Edg|Firefox|Safari)/i;
+	return !supported.test(ua);
+};
+
+const dismiss = () => {
+	showWarning.value = false;
+
+	if (import.meta.client) {
+		try {
+			sessionStorage.setItem(dismissedKey, "1");
+		} catch (e) {
+			console.warn("sessionStorage is unavailable:", e);
+		}
+	}
+};
+
+onMounted(() => {
+	const dismissed = localStorage.getItem(dismissedKey);
+	if (isBrowserUnsupported() && !dismissed) {
+		showWarning.value = true;
+	}
+});
+
+const { t } = useMultiLang(["outdated"]);
+</script>

package/app/composables/useApi.ts

@@ -0,0 +1,88 @@
+export const useApi = () => {
+	const config = useRuntimeConfig();
+	const baseURL = import.meta.server
+		? ((config.apiBaseServer as string | undefined) ??
+			(config.public.apiBase as string | undefined))
+		: 'http://localhost:3000';
+
+	const token = useCookie('auth_token');
+
+	const fetch = $fetch.create({
+		baseURL,
+		headers: {
+			'Content-Type': 'application/json',
+			...(token.value && { Authorization: `Bearer ${token.value}` }),
+		},
+		retry: 3,
+		retryDelay: 1000,
+		onRequest({ options }) {
+			const headers = new Headers(options.headers);
+
+			if (
+				typeof FormData !== 'undefined' &&
+				options.body instanceof FormData
+			) {
+				headers.delete('Content-Type');
+			}
+
+			if (token.value) {
+				headers.set('Authorization', `Bearer ${token.value}`);
+			}
+
+			options.headers = headers;
+		},
+		onResponseError({ response }) {
+			const message = response.statusText || `Error: ${response.status}`;
+			throw createError({
+				statusCode: response.status,
+				message,
+				data: response._data,
+			});
+		},
+	});
+
+	return {
+		get: <
+			TResponse,
+			TQuery extends Record<string, unknown> = Record<string, never>,
+		>(
+			url: string,
+			query?: TQuery,
+		) =>
+			fetch<TResponse>(url, {
+				method: 'GET',
+				query,
+			}),
+
+		post: <
+			TResponse,
+			TBody extends Record<string, unknown> | FormData | undefined =
+				undefined,
+		>(
+			url: string,
+			body?: TBody,
+		) =>
+			fetch<TResponse>(url, {
+				method: 'POST',
+				body,
+			}),
+
+		put: <
+			TResponse,
+			TBody extends Record<string, unknown> | FormData | undefined =
+				undefined,
+		>(
+			url: string,
+			body?: TBody,
+		) =>
+			fetch<TResponse>(url, {
+				method: 'PUT',
+				body,
+			}),
+
+		delete: <TResponse>(url: string) =>
+			fetch<TResponse>(url, {
+				method: 'DELETE',
+			}),
+	};
+};