@revenexx/cover 0.1.0

package/app/components/product/detail/ProductDetailStock.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+import type { ProductDetailStock } from "../../../interfaces/product-detail";
+
+defineProps<{
+	stocks: ProductDetailStock[];
+	available: boolean;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+	<div class="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-sm">
+		<span class="inline-flex items-center gap-1.5 font-medium">
+			<span
+				class="size-2 rounded-full"
+				:class="available ? 'bg-success' : 'bg-error'"
+			/>
+			<span :class="available ? 'text-success' : 'text-error'">
+				{{ available ? t('product.stock.available') : t('product.stock.unavailable') }}
+			</span>
+		</span>
+		<template v-if="available && stocks.length">
+			<span
+				v-for="(stock, index) in stocks"
+				:key="index"
+				class="text-muted"
+			>
+				{{ t('product.stock.unitsAvailable', { count: stock.quantity.toLocaleString('de-DE') }) }}
+				· {{ t('product.stock.maxPerOrder', { max: stock.maxOrderQuantity }) }}
+			</span>
+		</template>
+	</div>
+</template>

package/app/components/search/filter/SearchFacets.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { useDebounceFn } from "@vueuse/core";
+
+import type { PriceRange, SearchFacet } from "../../../interfaces/search-facets";
+
+/**
+ * Facet filter panel: collapsible groups with value counts and a price
+ * range. Used as the desktop rail and inside the mobile filter drawer.
+ */
+const props = defineProps<{
+	facets: SearchFacet[];
+	modelValue: Record<string, string[]>;
+	priceRange: PriceRange;
+}>();
+
+const emit = defineEmits<{
+	"update:modelValue": [value: Record<string, string[]>];
+	"update:priceRange": [value: PriceRange];
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+
+const FACET_VALUE_KEY_MAP: Record<string, Record<string, string>> = {
+	available: {
+		true: "search.filters.values.inStock",
+		false: "search.filters.values.outOfStock",
+	},
+};
+
+const visibleFacets = computed(() => props.facets.filter(f => f.counts.length > 0));
+
+const hasActiveFilters = computed(() =>
+	Object.values(props.modelValue).some(v => v.length > 0)
+	|| props.priceRange.min !== undefined
+	|| props.priceRange.max !== undefined,
+);
+
+const openGroups = ref<Record<string, boolean>>({});
+
+function isOpen(field: string): boolean {
+	return openGroups.value[field] ?? true;
+}
+
+function toggleGroup(field: string): void {
+	openGroups.value = { ...openGroups.value, [field]: !isOpen(field) };
+}
+
+function activeCount(field: string): number {
+	return props.modelValue[field]?.length ?? 0;
+}
+
+function isChecked(field: string, value: string): boolean {
+	return props.modelValue[field]?.includes(value) ?? false;
+}
+
+function toggle(field: string, value: string) {
+	const current = props.modelValue[field] ?? [];
+	const next = current.includes(value)
+		? current.filter(v => v !== value)
+		: [...current, value];
+	emit("update:modelValue", { ...props.modelValue, [field]: next });
+}
+
+function clearAll() {
+	emit("update:modelValue", {});
+	emit("update:priceRange", {});
+}
+
+function facetLabel(fieldName: string): string {
+	return t(`search.filters.facets.${fieldName}`, fieldName);
+}
+
+function facetValueLabel(fieldName: string, value: string): string {
+	const key = FACET_VALUE_KEY_MAP[fieldName]?.[value];
+	return key ? t(key) : value;
+}
+
+/* ---- price range (euros, debounced) ------------------------------- */
+const localPriceMin = ref<number | undefined>(props.priceRange.min);
+const localPriceMax = ref<number | undefined>(props.priceRange.max);
+
+watch(
+	() => props.priceRange,
+	(val) => {
+		localPriceMin.value = val.min;
+		localPriceMax.value = val.max;
+	},
+	{ deep: true },
+);
+
+const emitPrice = useDebounceFn(() => {
+	emit("update:priceRange", {
+		min: typeof localPriceMin.value === "number" && !isNaN(localPriceMin.value)
+			? localPriceMin.value
+			: undefined,
+		max: typeof localPriceMax.value === "number" && !isNaN(localPriceMax.value)
+			? localPriceMax.value
+			: undefined,
+	});
+}, 400);
+
+function onPriceChange() {
+	void emitPrice();
+}
+
+const priceActive = computed(() =>
+	props.priceRange.min !== undefined || props.priceRange.max !== undefined,
+);
+</script>
+
+<template>
+	<aside :aria-label="t('search.filters.title')">
+		<div class="flex items-center justify-between pb-3">
+			<h2 class="text-sm font-semibold text-highlighted">
+				{{ t('search.filters.title') }}
+			</h2>
+			<button
+				v-if="hasActiveFilters"
+				type="button"
+				tabindex="0"
+				class="text-xs text-muted hover:text-highlighted underline underline-offset-4
+				decoration-2 transition-colors cursor-pointer"
+				@click="clearAll"
+			>
+				{{ t('search.filters.clearAll') }}
+			</button>
+		</div>
+
+		<div class="divide-y divide-(--ui-border) border-y border-(--ui-border)">
+			<!-- Facet groups -->
+			<section
+				v-for="facet in visibleFacets"
+				:key="facet.fieldName"
+				class="py-1"
+			>
+				<button
+					type="button"
+					tabindex="0"
+					class="flex w-full items-center justify-between py-2.5 text-sm
+					text-highlighted cursor-pointer group"
+					:aria-expanded="isOpen(facet.fieldName)"
+					@click="toggleGroup(facet.fieldName)"
+				>
+					<span class="font-medium flex items-center gap-2">
+						{{ facetLabel(facet.fieldName) }}
+						<UBadge
+							v-if="activeCount(facet.fieldName)"
+							color="primary"
+							variant="subtle"
+							size="sm"
+							:label="String(activeCount(facet.fieldName))"
+						/>
+					</span>
+					<UIcon
+						:name="icon(isOpen(facet.fieldName) ? 'minus' : 'plus')"
+						class="size-4 text-dimmed group-hover:text-muted transition-colors"
+					/>
+				</button>
+				<ul
+					v-show="isOpen(facet.fieldName)"
+					class="pb-3 space-y-2"
+				>
+					<li
+						v-for="item in facet.counts"
+						:key="item.value"
+					>
+						<label class="flex items-center gap-2.5 cursor-pointer group/row">
+							<UCheckbox
+								:model-value="isChecked(facet.fieldName, item.value)"
+								tabindex="0"
+								:aria-label="facetValueLabel(facet.fieldName, item.value)"
+								@update:model-value="toggle(facet.fieldName, item.value)"
+							/>
+							<span
+								class="text-sm flex-1 text-muted group-hover/row:text-highlighted
+								transition-colors"
+							>
+								{{ facetValueLabel(facet.fieldName, item.value) }}
+							</span>
+							<span class="text-xs text-dimmed tabular-nums">{{ item.count }}</span>
+						</label>
+					</li>
+				</ul>
+			</section>
+
+			<!-- Price range -->
+			<section class="py-1">
+				<button
+					type="button"
+					tabindex="0"
+					class="flex w-full items-center justify-between py-2.5 text-sm
+					text-highlighted cursor-pointer group"
+					:aria-expanded="isOpen('__price')"
+					@click="toggleGroup('__price')"
+				>
+					<span class="font-medium flex items-center gap-2">
+						{{ t('search.filters.price.label') }}
+						<UBadge
+							v-if="priceActive"
+							color="primary"
+							variant="subtle"
+							size="sm"
+							label="1"
+						/>
+					</span>
+					<UIcon
+						:name="icon(isOpen('__price') ? 'minus' : 'plus')"
+						class="size-4 text-dimmed group-hover:text-muted transition-colors"
+					/>
+				</button>
+				<div
+					v-show="isOpen('__price')"
+					class="pb-3 flex items-center gap-2"
+				>
+					<UInput
+						v-model.number="localPriceMin"
+						type="number"
+						:placeholder="t('search.filters.price.min')"
+						size="sm"
+						min="0"
+						class="w-full"
+						:aria-label="t('search.filters.price.min')"
+						@input="onPriceChange"
+					>
+						<template #trailing>
+							<span class="text-xs text-dimmed">€</span>
+						</template>
+					</UInput>
+					<span class="text-dimmed shrink-0">–</span>
+					<UInput
+						v-model.number="localPriceMax"
+						type="number"
+						:placeholder="t('search.filters.price.max')"
+						size="sm"
+						min="0"
+						class="w-full"
+						:aria-label="t('search.filters.price.max')"
+						@input="onPriceChange"
+					>
+						<template #trailing>
+							<span class="text-xs text-dimmed">€</span>
+						</template>
+					</UInput>
+				</div>
+			</section>
+		</div>
+
+		<p
+			v-if="visibleFacets.length === 0"
+			class="text-xs text-muted pt-3"
+		>
+			{{ t('search.filters.noFilters') }}
+		</p>
+	</aside>
+</template>

package/app/components/search/filter/SearchFacetsDrawer.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { PriceRange, SearchFacet } from "../../../interfaces/search-facets";
+
+const { icon } = useIcons();
+
+const props = defineProps<{
+	facets: SearchFacet[];
+	modelValue: Record<string, string[]>;
+	priceRange: PriceRange;
+}>();
+
+const emit = defineEmits<{
+	"update:modelValue": [value: Record<string, string[]>];
+	"update:priceRange": [value: PriceRange];
+}>();
+
+const { t } = useI18n();
+const isOpen = ref(false);
+
+const filtersProxy = computed({
+	get: () => props.modelValue,
+	set: (val: Record<string, string[]>) => emit("update:modelValue", val),
+});
+
+const priceRangeProxy = computed({
+	get: () => props.priceRange,
+	set: (val: PriceRange) => emit("update:priceRange", val),
+});
+</script>
+
+<template>
+	<div class="lg:hidden mb-4">
+		<UButton
+			variant="outline"
+			:icon="icon('filters')"
+			size="sm"
+			@click="isOpen = true"
+		>
+			{{ t('search.filters.openDrawer') }}
+		</UButton>
+
+		<UDrawer
+			v-model:open="isOpen"
+			direction="left"
+			:ui="{ content: 'w-72 h-full' }"
+		>
+			<template #content>
+				<div class="p-4 h-full overflow-y-auto">
+					<SearchFilterSearchFacets
+						v-model="filtersProxy"
+						v-model:price-range="priceRangeProxy"
+						:facets="facets"
+					/>
+				</div>
+			</template>
+		</UDrawer>
+	</div>
+</template>

package/app/components/ui/AppShell.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+defineSlots<{ default(): unknown }>();
+</script>
+
+<template>
+	<slot />
+</template>

package/app/components/ui/debug/PiniaStateCard.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+interface FlatEntry {
+	key: string;
+	value: string;
+}
+
+function formatValue(value: unknown): string {
+	if (typeof value === "string") {
+		return value;
+	}
+
+	if (
+		typeof value === "number"
+		|| typeof value === "boolean"
+		|| value === null
+		|| value === undefined
+	) {
+		return String(value);
+	}
+
+	try {
+		return JSON.stringify(value);
+	}
+	catch {
+		return "[unserializable]";
+	}
+}
+
+function flattenState(value: unknown, prefix = ""): FlatEntry[] {
+	if (Array.isArray(value)) {
+		if (value.length === 0) {
+			return [{ key: prefix, value: "[]" }];
+		}
+
+		return value.flatMap((item, index) => {
+			const nextPrefix = `${prefix}[${index}]`;
+			return flattenState(item, nextPrefix);
+		});
+	}
+
+	if (value && typeof value === "object") {
+		const entries = Object.entries(value as Record<string, unknown>);
+		if (entries.length === 0) {
+			return [{ key: prefix, value: "{}" }];
+		}
+
+		return entries.flatMap(([key, nestedValue]) => {
+			const nextPrefix = prefix ? `${prefix}.${key}` : key;
+			return flattenState(nestedValue, nextPrefix);
+		});
+	}
+
+	return [{ key: prefix || "root", value: formatValue(value) }];
+}
+
+const title = "Pinia Debug State";
+const keyLabel = "Key";
+const valueLabel = "Value";
+const pinia = usePinia();
+
+const flatEntries = computed<FlatEntry[]>(() => {
+	const state = pinia.state.value as Record<string, unknown>;
+	return flattenState(state);
+});
+</script>
+
+<template>
+	<UContainer class="py-3">
+		<UCard>
+			<template #header>
+				<div class="text-sm font-semibold text-highlighted">
+					{{ title }}
+				</div>
+			</template>
+
+			<div class="max-h-80 overflow-auto">
+				<table class="w-full text-xs">
+					<thead>
+						<tr class="text-left text-muted border-b border-(--ui-border)">
+							<th class="w-[250px] py-2 pr-4 font-medium">
+								{{ keyLabel }}
+							</th>
+							<th class="py-2 font-medium">
+								{{ valueLabel }}
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr
+							v-for="entry in flatEntries"
+							:key="entry.key"
+							class="align-top border-b border-(--ui-border)/60"
+						>
+							<td class="w-[250px] py-1.5 pr-4 font-mono text-xs text-highlighted break-all">
+								{{ entry.key }}
+							</td>
+							<td class="py-1.5 font-mono text-xs text-muted break-all">
+								{{ entry.value }}
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</UCard>
+	</UContainer>
+</template>

package/app/components/ui/feedback/EmptyState.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps<{
+	/** Cover icon token, Solar basename, or full Iconify name. */
+	icon: string;
+	title: string;
+	description?: string;
+}>();
+
+const { icon: resolveIcon } = useIcons();
+const resolvedIcon = computed(() => resolveIcon(props.icon));
+</script>
+
+<template>
+	<div class="mt-12 text-center text-muted">
+		<UIcon
+			:name="resolvedIcon"
+			class="size-12 mx-auto mb-3 text-primary"
+		/>
+		<p class="text-lg font-medium text-highlighted">
+			{{ title }}
+		</p>
+		<p
+			v-if="description"
+			class="text-sm text-muted mt-1"
+		>
+			{{ description }}
+		</p>
+		<slot />
+	</div>
+</template>

package/app/components/ui/feedback/ErrorBoundary.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+const { t } = useI18n();
+
+const props = defineProps<{
+	title?: string;
+	description?: string;
+	showRetry?: boolean;
+}>();
+
+const resolvedTitle = computed(() => props.title ?? t("error.title"));
+const resolvedDescription = computed(() => props.description ?? t("error.description"));
+const resolvedShowRetry = computed(() => props.showRetry ?? true);
+
+const emit = defineEmits<{
+	retry: [];
+}>();
+</script>
+
+<template>
+	<UAlert
+		class="mt-3"
+		color="error"
+		variant="soft"
+		:icon="icon('error')"
+		:title="resolvedTitle"
+		:description="resolvedDescription"
+	>
+		<template
+			v-if="resolvedShowRetry"
+			#actions
+		>
+			<UButton
+				color="error"
+				variant="outline"
+				class="cursor-pointer"
+				tabindex="0"
+				:label="t('actions.tryAgain')"
+				@click="emit('retry')"
+			/>
+		</template>
+	</UAlert>
+</template>

package/app/components/ui/feedback/NotFound.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+const { t } = useI18n();
+
+const props = defineProps<{
+	title?: string;
+	description?: string;
+}>();
+
+const resolvedTitle = computed(() => props.title ?? t("notFound.title"));
+</script>
+
+<template>
+	<div class="mt-12 text-center">
+		<p class="text-6xl font-bold text-(--ui-primary) mb-4">
+			404
+		</p>
+		<UIcon
+			:name="icon('no-results')"
+			class="size-12 mx-auto mb-3 text-primary"
+		/>
+		<p class="text-lg font-medium text-highlighted">
+			{{ resolvedTitle }}
+		</p>
+		<p
+			v-if="description"
+			class="text-sm text-muted mt-1"
+		>
+			{{ description }}
+		</p>
+		<slot />
+	</div>
+</template>

package/app/components/ui/forms/CountrySelection.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { COUNTRIES } from "../../../config/countries";
+
+const modelValue = defineModel<string>({ required: true });
+</script>
+
+<template>
+	<USelect
+		v-model="modelValue"
+		:items="COUNTRIES"
+		value-key="value"
+		v-bind="$attrs"
+	/>
+</template>