@myelophone/nuxt 0.18.2

package/app/components/ui/GeoDependent.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+interface GeoRules {
+	whitelist?: string[];
+	blacklist?: string[];
+}
+
+const props = defineProps<{
+	rules: GeoRules;
+	geoData?: { country?: string };
+}>();
+
+const { geo, resolve } = useGeoFetch();
+const localVisible = ref(false);
+
+const checkVisibility = (countryCode: string) => {
+	const current = countryCode.trim().toUpperCase();
+	const normalize = (list: string[]) =>
+		list.map((i) => i.trim().toUpperCase());
+
+	if (props.rules.whitelist) {
+		return normalize(props.rules.whitelist).includes(current);
+	}
+	if (props.rules.blacklist) {
+		return !normalize(props.rules.blacklist).includes(current);
+	}
+	return true;
+};
+
+watchEffect(async () => {
+	const countrySource =
+		props.geoData?.country ||
+		(geo.value.resolved ? geo.value.country : null);
+
+	if (countrySource !== null) {
+		const shouldShow = checkVisibility(countrySource);
+		if (shouldShow) {
+			await nextTick();
+			localVisible.value = true;
+		} else {
+			localVisible.value = false;
+		}
+	}
+});
+
+onMounted(() => {
+	if (!props.geoData) {
+		resolve();
+	}
+});
+</script>
+
+<template>
+	<ClientOnly>
+		<Transition name="fade" appear>
+			<div v-if="localVisible" class="geo-wrapper" data-nosnippet>
+				<slot />
+			</div>
+		</Transition>
+	</ClientOnly>
+</template>
+
+<style scoped>
+.fade-enter-active {
+	transition: opacity 0.6s ease-out;
+}
+.fade-enter-from {
+	opacity: 0;
+}
+.geo-wrapper {
+	display: contents;
+}
+</style>

package/app/components/ui/Heading.vue

@@ -0,0 +1,51 @@
+<template>
+	<component :is="tag" :class="headingClass">
+		<slot />
+	</component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	level?: 1 | 2 | 3 | 4 | 5 | 6;
+	size?: "xs" | "sm" | "md" | "lg" | "xl" | "display";
+	class?: string;
+}>();
+
+const tag = computed(() => `h${props.level || 2}`);
+
+const defaultClasses: Record<number, string> = {
+	1: "text-4xl font-semibold",
+	2: "text-3xl font-semibold",
+	3: "text-2xl font-semibold",
+	4: "text-xl font-medium",
+	5: "text-lg font-medium",
+	6: "text-base font-normal",
+};
+
+const fontWeightClasses: Record<number, string> = {
+	1: "font-semibold",
+	2: "font-semibold",
+	3: "font-semibold",
+	4: "font-medium",
+	5: "font-medium",
+	6: "font-normal",
+};
+
+const sizeClasses = {
+	xs: "text-xl",
+	sm: "text-2xl",
+	md: "text-3xl",
+	lg: "text-4xl md:text-5xl",
+	xl: "text-5xl md:text-6xl",
+	display: "text-5xl md:text-7xl lg:text-8xl",
+} as const;
+
+const headingClass = computed(() => {
+	const level = props.level || 1;
+	const typography = props.size
+		? `${sizeClasses[props.size]} ${fontWeightClasses[level]}`
+		: defaultClasses[level];
+
+	return `${typography} ${props.class || ""}`.trim();
+});
+</script>

package/app/components/ui/Icon.vue

@@ -0,0 +1,42 @@
+<template>
+	<span
+		class="app-icon shadow-none"
+		:class="[props.class, !normalizedSize ? 'w-5 h-5' : '']"
+		:style="{
+			'--icon-url': `url(${iconUrl})`,
+			width: normalizedSize || undefined,
+			height: normalizedSize || undefined,
+		}"
+		role="img"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+
+interface Props {
+	name: string;
+	size?: string | number;
+	class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+
+const [prefix, iconName] = props.name.split(":");
+
+const iconUrl = computed(
+	() => `https://api.iconify.design/${prefix}/${iconName}.svg`,
+);
+
+const normalizedSize = computed(() => {
+	if (!props.size) return null;
+
+	const s = String(props.size);
+
+	if (/^\d+$/.test(s)) return `${s}px`;
+
+	if (/^\d+(\.\d+)?(px|rem|em|vh|vw|%|pt|pc|in|cm|mm)$/.test(s)) return s;
+
+	return s;
+});
+</script>

package/app/components/ui/Icon8.vue

@@ -0,0 +1,39 @@
+<template>
+	<img
+		class="inline-block"
+		:src="iconUrl"
+		:alt="icon"
+		:width="size"
+		:height="size"
+		v-bind="$attrs"
+	/>
+</template>
+
+<script setup>
+const props = defineProps({
+	icon: {
+		type: String,
+		required: true,
+	},
+	type: {
+		type: String,
+		default: "ios-filled",
+	},
+	size: {
+		type: [String, Number],
+		default: 28,
+	},
+	color: {
+		type: String,
+		default: "000000",
+	},
+});
+
+const formattedColor = computed(() => {
+	return props.color.startsWith("#") ? props.color.substring(1) : props.color;
+});
+
+const iconUrl = computed(() => {
+	return `https://img.icons8.com/${props.type}/${props.size}/${formattedColor.value}/${props.icon}.png`;
+});
+</script>

package/app/components/ui/Input.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+const props = defineProps({
+	modelValue: [String, Number],
+	id: {
+		type: String,
+		default: undefined,
+	},
+	type: {
+		type: String,
+		default: "text",
+	},
+	label: String,
+	placeholder: {
+		type: String,
+		default: " ",
+	},
+	icon: String,
+	iconPosition: {
+		type: String as () => "start" | "end",
+		default: "end",
+	},
+	disabled: Boolean,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const generatedId = ref<string | undefined>(undefined);
+
+onMounted(() => {
+	if (!props.id && !generatedId.value) {
+		generatedId.value = `input-${Math.random().toString(36).slice(2)}`;
+	}
+});
+
+const inputId = computed(() => props.id || generatedId.value);
+
+const hasValue = computed(
+	() => props.modelValue != null && props.modelValue !== "",
+);
+
+const iconClasses = computed(
+	() =>
+		`absolute inset-y-0 top-[-8px] ${
+			props.iconPosition === "start" ? "left-0 pl-3" : "right-0 pr-3"
+		} flex items-center text-[var(--ui-text)]`,
+);
+
+const inputPadding = computed(() => {
+	if (!props.icon) return "px-3";
+	return props.iconPosition === "start" ? "ps-9 pe-3" : "ps-3 pe-9";
+});
+</script>
+
+<template>
+	<label :for="inputId" class="relative block">
+		<input
+			:id="inputId"
+			:type="type"
+			:value="modelValue"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			@input="
+				emit(
+					'update:modelValue',
+					($event.target as HTMLInputElement).value,
+				)
+			"
+			class="peer w-full h-11 rounded-md border bg-(--ui-bg) text-(--ui-text) transition-all sm:text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 disabled:opacity-60 disabled:cursor-not-allowed mb-2 leading-6 pt-2.5 pb-2.5"
+			:class="inputPadding"
+		/>
+
+		<span
+			v-if="label"
+			class="absolute top-3 left-3 text-(--ui-text) text-sm font-medium bg-(--ui-bg) px-2 transition-all duration-150 peer-focus:-translate-y-5 peer-focus:scale-[0.85] peer-focus:text-blue-600 peer-focus:px-2 peer-focus:left-3 dark:peer-focus:text-blue-400 cursor-text leading-[1.1rem]"
+			:class="{
+				'-translate-y-5 scale-[0.85] text-blue-600 dark:text-blue-400 px-2 left-3':
+					hasValue,
+				'ps-9': icon && iconPosition === 'start' && !hasValue,
+			}"
+		>
+			{{ label }}
+		</span>
+
+		<span v-if="icon" :class="iconClasses">
+			<UiIcon :name="icon" class="w-4 h-4" />
+		</span>
+	</label>
+</template>

package/app/components/ui/LangLink.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+	to: string;
+	exact?: boolean;
+	replace?: boolean;
+}
+
+const props = defineProps<Props>();
+const pinia = useNuxtApp().$pinia;
+const settingsStore = useSettingsStore(pinia);
+
+const localizedTo = computed(() => {
+	const current = settingsStore.currentLocale;
+	const defaultLocale = settingsStore.defaultLocale;
+
+	if (!current || !props.to) return props.to;
+
+	if (current === defaultLocale) return props.to;
+
+	const normalized = props.to.startsWith("/") ? props.to : `/${props.to}`;
+
+	if (normalized.startsWith(`/${current}/`) || normalized === `/${current}`) {
+		return normalized;
+	}
+
+	return normalized === "/" ? `/${current}` : `/${current}${normalized}`;
+});
+</script>
+
+<template>
+	<NuxtLink :to="localizedTo" :exact="exact" :replace="replace">
+		<slot />
+	</NuxtLink>
+</template>

package/app/components/ui/LangVisible.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+interface Props {
+	only?: string | string[];
+	except?: string | string[];
+}
+
+const props = defineProps<Props>();
+
+const pinia = useNuxtApp().$pinia;
+const settings = useSettingsStore(pinia);
+
+const isVisible = computed(() => {
+	const locale = settings.currentLocale || settings.defaultLocale || "en";
+
+	if (props.only) {
+		const list = Array.isArray(props.only) ? props.only : [props.only];
+		return list.includes(locale);
+	}
+
+	if (props.except) {
+		const list = Array.isArray(props.except)
+			? props.except
+			: [props.except];
+		return !list.includes(locale);
+	}
+
+	return true;
+});
+</script>
+
+<template>
+	<slot v-if="isVisible" />
+</template>

package/app/components/ui/LanguageSelect.vue

@@ -0,0 +1,202 @@
+<template>
+	<div
+		ref="selectWrapper"
+		class="ui-lang-select"
+		:class="[
+			containerClass,
+			{
+				'is-open': isOpen,
+				'drop-up': isDropUp,
+				'drop-right': isDropRight,
+			},
+		]"
+		@mousedown.stop
+	>
+		<button
+			type="button"
+			class="lang-trigger"
+			:class="triggerClass"
+			@click.stop="toggleDropdown"
+		>
+			<slot name="trigger">
+				<span v-if="showFull" class="lang-text">{{
+					t(`common.${settingsStore.currentLocale}`)
+				}}</span>
+				<span v-else class="lang-text">{{
+					settingsStore.currentLocale
+				}}</span>
+			</slot>
+			<span class="lang-arrow"></span>
+		</button>
+
+		<div v-if="isOpen" class="lang-dropdown" :class="dropdownClass">
+			<div class="lang-dropdown-scroll">
+				<button
+					v-for="lang in uniqueLocales"
+					:key="lang"
+					type="button"
+					class="lang-option"
+					:class="[
+						optionClass,
+						{ 'is-selected': settingsStore.currentLocale === lang },
+					]"
+					@click="selectLanguage(lang)"
+				>
+					<span v-if="showFull" class="lang-text">{{
+						t(`common.${lang}`)
+					}}</span>
+					<span v-else class="lang-text">{{ lang }}</span>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	showFull?: boolean;
+	containerClass?: string;
+	triggerClass?: string;
+	dropdownClass?: string;
+	optionClass?: string;
+}>();
+
+const { t } = useMultiLang(["common"]);
+const settingsStore = useSettingsStore(useNuxtApp().$pinia);
+
+const isOpen = ref(false);
+const isDropUp = ref(false);
+const isDropRight = ref(false);
+const selectWrapper = ref<HTMLElement | null>(null);
+
+const uniqueLocales = computed(() => [...new Set(settingsStore.locales || [])]);
+
+const toggleDropdown = () => {
+	if (!isOpen.value) checkPosition();
+	isOpen.value = !isOpen.value;
+};
+
+const checkPosition = () => {
+	if (!selectWrapper.value) return;
+	const rect = selectWrapper.value.getBoundingClientRect();
+	isDropUp.value = window.innerHeight - rect.bottom < 200;
+	isDropRight.value = window.innerWidth - rect.left < 150;
+};
+
+const selectLanguage = (lang: string) => {
+	settingsStore.setLocale(lang);
+	isOpen.value = false;
+};
+
+const close = () => {
+	isOpen.value = false;
+};
+
+onMounted(() => {
+	window.addEventListener("click", close);
+	window.addEventListener("resize", close);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener("click", close);
+	window.removeEventListener("resize", close);
+});
+</script>
+
+<style scoped>
+.ui-lang-select {
+	position: relative;
+	display: inline-block;
+	--bg: var(--ui-bg);
+	--brd: var(--ui-border);
+	--txt: var(--ui-text);
+	--ui-hover: rgba(128, 128, 128, 0.1);
+}
+
+.lang-trigger {
+	cursor: pointer;
+	background: var(--bg);
+	border: 1px solid var(--brd);
+	color: var(--txt);
+	padding: 8px 14px;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	text-transform: uppercase;
+	font-family: inherit;
+	font-weight: 400;
+	transition: background 0.2s;
+}
+
+.lang-text {
+	font-size: 1rem;
+	line-height: 1;
+}
+
+.lang-trigger:hover {
+	background: var(--ui-hover);
+}
+
+.lang-arrow {
+	width: 6px;
+	height: 6px;
+	border-right: 1px solid var(--txt);
+	border-bottom: 1px solid var(--txt);
+	transform: rotate(45deg) translateY(-2px);
+	opacity: 0.6;
+}
+
+.is-open .lang-arrow {
+	transform: rotate(-135deg) translateY(1px);
+}
+
+.lang-dropdown {
+	position: absolute;
+	top: calc(100% + 4px);
+	left: 0;
+	z-index: 1000;
+	background: var(--bg);
+	border: 1px solid var(--brd);
+	min-width: 100%;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.drop-right .lang-dropdown {
+	left: auto;
+	right: 0;
+}
+.drop-up .lang-dropdown {
+	top: auto;
+	bottom: calc(100% + 4px);
+}
+
+.lang-option {
+	width: 100%;
+	padding: 12px 14px;
+	border: none;
+	background: transparent;
+	color: var(--txt);
+	text-align: left;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	text-transform: uppercase;
+	font-weight: 400;
+	transition: all 0.2s;
+}
+
+.lang-option:hover {
+	background: var(--ui-hover);
+}
+
+.lang-option.is-selected {
+	background: var(--txt);
+	color: var(--bg);
+}
+
+@media (prefers-color-scheme: light) {
+	.ui-lang-select {
+		--ui-hover: rgba(0, 0, 0, 0.05);
+	}
+}
+</style>