@myelophone/nuxt 0.18.2

package/app/components/view/AnimatedCounter.vue

@@ -0,0 +1,121 @@
+<template>
+	<span
+		ref="target"
+		class="relative inline-flex flex-col items-center justify-center tabular-nums leading-none whitespace-nowrap"
+		:aria-label="`${prefix}${to}${suffix}`"
+	>
+		<span
+			class="opacity-0 select-none pointer-events-none"
+			aria-hidden="true"
+		>
+			{{ prefix }}{{ formattedTarget }}{{ suffix }}
+		</span>
+		<span
+			class="absolute inset-0 flex items-center justify-center"
+			aria-hidden="true"
+		>
+			{{ prefix }}{{ formattedCurrent }}{{ suffix }}
+		</span>
+	</span>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	to: number;
+	from?: number;
+	duration?: number;
+	prefix?: string;
+	suffix?: string;
+	decimals?: number;
+	separator?: string;
+	once?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	from: 0,
+	duration: 1500,
+	prefix: "",
+	suffix: "",
+	decimals: 0,
+	separator: " ",
+	once: true,
+});
+
+const target = ref<HTMLElement | null>(null);
+const current = ref(props.from);
+const hasAnimated = ref(false);
+
+const formatNumber = (num: number) => {
+	return new Intl.NumberFormat("ru-RU", {
+		minimumFractionDigits: props.decimals,
+		maximumFractionDigits: props.decimals,
+	})
+		.format(num)
+		.replace(/,/g, ".");
+};
+
+const formattedTarget = computed(() => formatNumber(props.to));
+const formattedCurrent = computed(() => formatNumber(current.value));
+
+const animate = () => {
+	const startTimestamp = performance.now();
+	const startValue = current.value;
+	const endValue = props.to;
+	const diff = endValue - startValue;
+
+	const step = (timestamp: number) => {
+		const elapsed = timestamp - startTimestamp;
+		const progress = Math.min(elapsed / props.duration, 1);
+
+		const ease = 1 - Math.pow(1 - progress, 4);
+
+		current.value = startValue + diff * ease;
+
+		if (progress < 1) {
+			requestAnimationFrame(step);
+		} else {
+			current.value = endValue;
+		}
+	};
+
+	requestAnimationFrame(step);
+};
+
+onMounted(() => {
+	if (typeof IntersectionObserver === "undefined") {
+		animate();
+		return;
+	}
+
+	const observer = new IntersectionObserver(
+		(entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					if (props.once && hasAnimated.value) return;
+
+					if (!hasAnimated.value) current.value = props.from;
+
+					animate();
+					hasAnimated.value = true;
+
+					if (props.once) observer.disconnect();
+				}
+			});
+		},
+		{ threshold: 0.2 },
+	);
+
+	if (target.value) {
+		observer.observe(target.value);
+	}
+});
+
+watch(
+	() => props.to,
+	() => {
+		if (hasAnimated.value) {
+			animate();
+		}
+	},
+);
+</script>

package/app/components/view/AnnouncementBar.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		title?: string;
+		description?: string;
+
+		icon?: string;
+
+		color?: "primary" | "gray" | "info" | "success" | "warning" | "error";
+		variant?: "solid" | "soft" | "outline";
+
+		sticky?: boolean;
+		closable?: boolean;
+	}>(),
+	{
+		color: "primary",
+		variant: "soft",
+		sticky: false,
+		closable: false,
+	},
+);
+
+const visible = ref(true);
+
+const close = () => {
+	visible.value = false;
+};
+
+const colorVariants: Record<
+	NonNullable<typeof props.color>,
+	Record<NonNullable<typeof props.variant>, string>
+> = {
+	gray: {
+		solid: "bg-gray-800 text-white border-b border-gray-800/30",
+		soft: "bg-gray-100 text-gray-900 border-b border-gray-300",
+		outline: "bg-transparent text-gray-900 border-b border-gray-400",
+	},
+	primary: {
+		solid: "bg-primary-600 text-white border-b border-primary-600/30",
+		soft: "bg-primary-100 text-primary-900 border-b border-primary-300",
+		outline: "bg-transparent text-primary-900 border-b border-primary-400",
+	},
+	info: {
+		solid: "bg-blue-600 text-white border-b border-blue-600/30",
+		soft: "bg-blue-100 text-blue-900 border-b border-blue-300",
+		outline: "bg-transparent text-blue-900 border-b border-blue-400",
+	},
+	success: {
+		solid: "bg-emerald-600 text-white border-b border-emerald-600/30",
+		soft: "bg-emerald-100 text-emerald-900 border-b border-emerald-300",
+		outline: "bg-transparent text-emerald-900 border-b border-emerald-400",
+	},
+	warning: {
+		solid: "bg-amber-500 text-white border-b border-amber-500/30",
+		soft: "bg-amber-100 text-amber-900 border-b border-amber-300",
+		outline: "bg-transparent text-amber-900 border-b border-amber-400",
+	},
+	error: {
+		solid: "bg-red-600 text-white border-b border-red-600/30",
+		soft: "bg-red-100 text-red-900 border-b border-red-300",
+		outline: "bg-transparent text-red-900 border-b border-red-400",
+	},
+};
+
+const classes = computed(() => [
+	"w-full flex items-center gap-4 px-4 py-2 text-sm",
+	props.sticky ? "sticky top-0 z-50" : null,
+	colorVariants[props.color][props.variant],
+]);
+</script>
+
+<template>
+	<div v-if="visible" role="region" :class="classes">
+		<div v-if="icon" class="flex items-center shrink-0">
+			<UiIcon :name="icon" class="h-5 w-5" />
+		</div>
+
+		<div class="flex-1 min-w-0 flex items-center gap-2">
+			<span v-if="$slots.title || title" class="font-medium">
+				<slot name="title">{{ title }}</slot>
+			</span>
+
+			<span
+				v-if="$slots.default || description"
+				class="opacity-90 truncate"
+			>
+				<slot>{{ description }}</slot>
+			</span>
+		</div>
+
+		<div v-if="$slots.actions" class="flex items-center gap-2 shrink-0">
+			<slot name="actions" />
+		</div>
+
+		<button
+			v-if="closable"
+			@click="close"
+			class="ml-2 opacity-60 hover:opacity-100 transition shrink-0"
+			aria-label="Close announcement"
+		>
+			<UiIcon name="heroicons:x-mark" class="h-4 w-4" />
+		</button>
+	</div>
+</template>

package/app/components/view/AvatarGroup.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { Fragment, isVNode } from "vue";
+
+interface Props {
+	size?: "sm" | "md" | "lg" | "xl";
+	max?: number;
+	class?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: "md",
+	max: 7,
+});
+
+const slots = useSlots();
+
+function flatten(nodes: any[]): any[] {
+	const out: any[] = [];
+
+	for (const n of nodes) {
+		if (!n) continue;
+
+		if (Array.isArray(n)) {
+			out.push(...flatten(n));
+			continue;
+		}
+
+		if (isVNode(n) && n.type === Fragment && Array.isArray(n.children)) {
+			out.push(...flatten(n.children as any[]));
+			continue;
+		}
+
+		if (isVNode(n) && (n.type === Text || n.type === Comment)) continue;
+
+		out.push(n);
+	}
+
+	return out;
+}
+
+const children = computed(() => flatten(slots.default?.() ?? []));
+
+const visibleChildren = computed(() => {
+	if (!props.max) return children.value;
+	return children.value.slice(0, props.max);
+});
+
+const remainingCount = computed(() => {
+	return Math.max(0, children.value.length - (props.max || 0));
+});
+
+const baseItemClass =
+	"relative -ml-2 ring-2 ring-white dark:ring-zinc-900 transition-transform hover:z-50";
+
+const rendered = computed(() => {
+	const list = [...visibleChildren.value].reverse();
+
+	return list.map((child: any, index: number) => {
+		if (!isVNode(child)) return child;
+
+		const childProps = (child.props ?? {}) as Record<string, any>;
+
+		return h(
+			child.type as any,
+			{
+				...childProps,
+				key: child.key ?? index,
+				size: props.size,
+				class: [baseItemClass, childProps.class],
+				style: [childProps.style, { zIndex: index + 1 }],
+			},
+			child.children as any,
+		);
+	});
+});
+</script>
+
+<template>
+	<div
+		:class="[
+			'flex items-center justify-start flex-row-reverse',
+			props.class,
+		]"
+	>
+		<UiAvatar
+			v-if="remainingCount > 0"
+			:text="`+${remainingCount}`"
+			:size="size"
+			class="relative -ml-2 ring-2 ring-white dark:ring-zinc-900 z-0"
+		/>
+
+		<component
+			v-for="node in rendered"
+			:key="(node as any)?.key"
+			:is="node"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.flex-row-reverse > *:last-child {
+	margin-left: 0;
+}
+</style>

package/app/components/view/Breadcrumbs.vue

@@ -0,0 +1,97 @@
+<template>
+	<nav class="ui-breadcrumbs" :class="containerClass" aria-label="Breadcrumb">
+		<ol class="breadcrumb-list">
+			<li class="breadcrumb-item">
+				<NuxtLink :to="homePath" class="breadcrumb-link">
+					{{ homeLabel }}
+				</NuxtLink>
+				<span v-if="breadcrumbs.length > 0" class="separator">{{
+					separator
+				}}</span>
+			</li>
+
+			<li
+				v-for="(crumb, index) in breadcrumbs"
+				:key="crumb.path"
+				class="breadcrumb-item"
+			>
+				<span
+					v-if="index === breadcrumbs.length - 1"
+					class="current-page"
+				>
+					{{ truncate(crumb.title, maxChars) }}
+				</span>
+
+				<template v-else>
+					<NuxtLink :to="crumb.path" class="breadcrumb-link">
+						{{ truncate(crumb.title, maxChars) }}
+					</NuxtLink>
+					<span class="separator">{{ separator }}</span>
+				</template>
+			</li>
+		</ol>
+	</nav>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		maxChars?: number;
+		separator?: string;
+		containerClass?: string;
+	}>(),
+	{
+		maxChars: 30,
+		separator: "/",
+		containerClass: "",
+	},
+);
+
+const { breadcrumbs, homePath, homeLabel, truncate } = useBreadcrumbs();
+</script>
+
+<style scoped>
+.ui-breadcrumbs {
+	padding: 0.75rem 0;
+	font-size: 0.875rem;
+}
+.breadcrumb-list {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	align-items: center;
+}
+.breadcrumb-item {
+	display: flex;
+	align-items: center;
+	color: var(--ui-text);
+	line-height: 1.2;
+}
+.breadcrumb-link {
+	color: var(--ui-text);
+	opacity: 0.6;
+	text-decoration: none;
+	transition: opacity 0.2s;
+}
+.breadcrumb-link:hover {
+	opacity: 1;
+}
+.separator {
+	margin: 0 0.5rem;
+	opacity: 0.3;
+	user-select: none;
+	font-size: 0.9em;
+}
+.current-page {
+	font-weight: 500;
+	opacity: 0.9;
+	text-transform: capitalize;
+}
+@media (max-width: 640px) {
+	.ui-breadcrumbs {
+		font-size: 0.8rem;
+	}
+}
+</style>

package/app/components/view/ContentWithToc.vue

@@ -0,0 +1,152 @@
+<script lang="ts">
+import { cloneVNode, Fragment } from "vue";
+import { transliterate } from "~/utils/transliterate";
+
+function getTextFromNodes(nodes: VNode[] | VNode | string): string {
+	if (typeof nodes === "string") return nodes;
+	if (Array.isArray(nodes)) return nodes.map(getTextFromNodes).join("");
+	if (!nodes) return "";
+	if (nodes.type === Text) return (nodes.children as string) || "";
+	if (nodes.type === Fragment && Array.isArray(nodes.children))
+		return getTextFromNodes(nodes.children as VNode[]);
+	if (typeof nodes.children === "string") return nodes.children;
+	if (Array.isArray(nodes.children))
+		return getTextFromNodes(nodes.children as VNode[]);
+	if (typeof nodes.children === "object" && (nodes.children as any).default) {
+		try {
+			return getTextFromNodes((nodes.children as any).default());
+		} catch (e) {
+			return "";
+		}
+	}
+	return "";
+}
+
+function flattenFragments(nodes: VNode[]): VNode[] {
+	let result: VNode[] = [];
+	for (const node of nodes) {
+		if (node.type === Fragment && Array.isArray(node.children)) {
+			result = result.concat(flattenFragments(node.children as VNode[]));
+		} else {
+			result.push(node);
+		}
+	}
+	return result;
+}
+
+export default defineComponent({
+	name: "ContentWithToc",
+	setup(_, { slots }) {
+		const route = useRoute();
+
+		const scrollToId = (id: string, smooth = true) => {
+			const element = document.getElementById(id);
+			if (element) {
+				const headerOffset = 60;
+				const elementPosition = element.getBoundingClientRect().top;
+				const offsetPosition =
+					elementPosition + window.pageYOffset - headerOffset;
+
+				window.scrollTo({
+					top: offsetPosition,
+					behavior: smooth ? "smooth" : "auto",
+				});
+			}
+		};
+
+		const handleNavClick = (id: string) => {
+			if (history.pushState) {
+				history.pushState(null, "", `#${id}`);
+			} else {
+				window.location.hash = id;
+			}
+
+			scrollToId(id, true);
+		};
+
+		onMounted(async () => {
+			await nextTick();
+
+			if (route.hash) {
+				const id = route.hash.replace("#", "");
+				setTimeout(() => {
+					scrollToId(id, true);
+				}, 300);
+			}
+		});
+
+		return () => {
+			const rawChildren = slots.default ? slots.default() : [];
+			const children = flattenFragments(rawChildren);
+			const tocItems: { id: string; text: string }[] = [];
+
+			const modifiedChildren = children.map((node, index) => {
+				const type = node.type as any;
+				const tag =
+					typeof type === "string"
+						? type
+						: type.name || type.__name || "";
+
+				const isHeading =
+					["h2", "h3", "h4"].includes(tag) ||
+					tag.includes("Heading") ||
+					(node.props && node.props.level);
+
+				if (isHeading) {
+					const text = getTextFromNodes(node);
+					if (text && text.trim().length > 0) {
+						let id = node.props?.id;
+						if (!id) {
+							id = transliterate(text);
+							if (tocItems.find((t) => t.id === id))
+								id = `${id}-${index}`;
+						}
+						tocItems.push({ id, text });
+						return cloneVNode(node, {
+							id,
+							style: "scroll-margin-top: 1rem;",
+						});
+					}
+				}
+				return node;
+			});
+
+			const nav =
+				tocItems.length > 0
+					? h("nav", { class: "w-full mb-2" }, [
+							h(
+								"div",
+								{ class: "flex flex-wrap gap-2" },
+								tocItems.map((item) =>
+									h(
+										"a",
+										{
+											href: `#${item.id}`,
+											class: `
+                                    inline-flex items-center px-3 py-1.5 rounded-md
+                                    text-xs font-medium uppercase tracking-wide
+                                    transition-all duration-200
+
+                                    bg-gray-100 text-gray-700
+                                    dark:bg-white/5 dark:text-gray-200
+
+                                    hover:bg-gray-200 dark:hover:bg-white/10
+                                    hover:shadow-sm
+                                `,
+											onClick: (e: Event) => {
+												e.preventDefault();
+												handleNavClick(item.id);
+											},
+										},
+										item.text,
+									),
+								),
+							),
+						])
+					: null;
+
+			return h("div", { class: "relative" }, [nav, modifiedChildren]);
+		};
+	},
+});
+</script>

package/app/components/view/Copyright.vue

@@ -0,0 +1,68 @@
+<template>
+	<div class="ui-copyright" :class="containerClass">
+		<span class="copyright-text">
+			{{ symbol }} {{ yearRange }} {{ owner }}.
+		</span>
+		<span v-if="allRightsReserved" class="rights-text">
+			{{ t("common.all_rights_reserved") }}
+		</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		owner: string;
+		startYear?: number | string;
+		allRightsReserved?: boolean;
+		containerClass?: string;
+	}>(),
+	{
+		allRightsReserved: true,
+	},
+);
+
+const { t } = useMultiLang(["common"]);
+
+const symbol = "©";
+
+const yearRange = computed(() => {
+	const currentYear = new Date().getFullYear();
+	const start =
+		typeof props.startYear === "string"
+			? parseInt(props.startYear, 10)
+			: props.startYear;
+
+	if (!start || isNaN(start) || start >= currentYear) {
+		return currentYear.toString();
+	}
+
+	return `${start}-${currentYear}`;
+});
+</script>
+
+<style scoped>
+.ui-copyright {
+	color: var(--ui-text);
+	opacity: 0.7;
+	font-size: 0.875rem;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5ch;
+}
+
+.copyright-text {
+	white-space: nowrap;
+}
+
+.rights-text {
+	text-transform: capitalize;
+}
+
+@media (max-width: 640px) {
+	.ui-copyright {
+		font-size: 0.8rem;
+	}
+}
+</style>