@revenexx/cover 0.1.0

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

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { getLocalTimeZone, parseDate, today, type CalendarDate } from "@internationalized/date";
+import type { FormKitFrameworkContext } from "@formkit/core";
+
+/**
+ * FormKit input wrapping Nuxt UI's UCalendar in a popover: registered as
+ * `type="datepicker"` (see formkit.config.ts). Values travel as ISO
+ * "YYYY-MM-DD" strings, so the input drops into any string-backed form
+ * state. Min/max and a date filter come in via the FormKit props
+ * `minDays`/`maxDays`/`disableWeekends`.
+ */
+const props = defineProps<{
+	context: FormKitFrameworkContext;
+}>();
+
+const { icon } = useIcons();
+const { t, d } = useI18n();
+
+const open = ref(false);
+
+const timeZone = getLocalTimeZone();
+
+const calendarValue = computed<CalendarDate | null>(() => {
+	const raw = props.context._value;
+	if (typeof raw !== "string" || !raw) {
+		return null;
+	}
+	try {
+		return parseDate(raw);
+	}
+	catch {
+		return null;
+	}
+});
+
+const displayValue = computed(() =>
+	calendarValue.value
+		? d(calendarValue.value.toDate(timeZone), { dateStyle: "medium" })
+		: (props.context.attrs.placeholder as string | undefined) ?? t("formkit.datepicker.placeholder"));
+
+const minValue = computed(() => {
+	const minDays = Number(props.context.minDays ?? 0);
+	return today(timeZone).add({ days: Number.isFinite(minDays) ? minDays : 0 });
+});
+
+const maxValue = computed(() => {
+	const maxDays = Number(props.context.maxDays ?? Number.NaN);
+	return Number.isFinite(maxDays) ? today(timeZone).add({ days: maxDays }) : undefined;
+});
+
+const disableWeekends = computed(() => Boolean(props.context.disableWeekends));
+
+function isDateDisabled(date: { toDate: (tz: string) => Date }): boolean {
+	if (!disableWeekends.value) {
+		return false;
+	}
+	const day = date.toDate(timeZone).getDay();
+	return day === 0 || day === 6;
+}
+
+function onSelect(value: CalendarDate | null | undefined): void {
+	props.context.node.input(value ? value.toString() : "");
+	open.value = false;
+}
+
+function clear(): void {
+	props.context.node.input("");
+	open.value = false;
+}
+</script>
+
+<template>
+	<UPopover v-model:open="open">
+		<button
+			:id="context.id"
+			type="button"
+			tabindex="0"
+			:disabled="Boolean(context.disabled)"
+			class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm border rounded-md
+			bg-transparent border-(--ui-border) text-left cursor-pointer
+			focus:outline-none focus:ring-2 focus:ring-(--ui-primary)"
+			:class="calendarValue ? 'text-highlighted' : 'text-muted'"
+			:aria-label="(context.attrs['aria-label'] as string | undefined) ?? String(context.label ?? '')"
+			@blur="context.handlers.blur()"
+		>
+			<span class="flex items-center gap-2 min-w-0">
+				<UIcon
+					:name="icon('calendar')"
+					class="size-4 shrink-0 text-primary"
+				/>
+				<span class="truncate">{{ displayValue }}</span>
+			</span>
+			<UIcon
+				:name="icon('chevron-down')"
+				class="size-4 shrink-0 text-dimmed"
+			/>
+		</button>
+
+		<template #content>
+			<div class="p-2">
+				<UCalendar
+					:model-value="calendarValue"
+					:min-value="minValue"
+					:max-value="maxValue"
+					:is-date-unavailable="isDateDisabled"
+					@update:model-value="onSelect($event as CalendarDate | null)"
+				/>
+				<div
+					v-if="calendarValue"
+					class="flex justify-end pt-1"
+				>
+					<UButton
+						color="neutral"
+						variant="ghost"
+						size="xs"
+						tabindex="0"
+						:label="t('formkit.datepicker.clear')"
+						@click="clear"
+					/>
+				</div>
+			</div>
+		</template>
+	</UPopover>
+</template>

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

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+const { t } = useI18n();
+
+const modelValue = defineModel<string>({ required: true });
+
+const props = defineProps<{
+	placeholder?: string;
+	autocomplete?: string;
+	showStrength?: boolean;
+}>();
+
+const showPassword = ref(false);
+const inputId = useId();
+
+interface PasswordRequirement {
+	regex: RegExp;
+	key: string;
+	met: boolean;
+}
+
+function checkStrength(value: string): PasswordRequirement[] {
+	const rules = [
+		{ regex: /.{8,}/, key: "minLength" },
+		{ regex: /\d/, key: "number" },
+		{ regex: /[a-z]/, key: "lowercase" },
+		{ regex: /[A-Z]/, key: "uppercase" },
+	];
+
+	return rules.map(rule => ({
+		...rule,
+		met: rule.regex.test(value),
+	}));
+}
+
+const strength = computed(() => props.showStrength ? checkStrength(modelValue.value) : []);
+const score = computed(() => strength.value.filter(req => req.met).length);
+
+const color = computed(() => {
+	if (score.value === 0) {
+		return "primary" as const;
+	}
+	if (score.value <= 2) {
+		return "error" as const;
+	}
+	if (score.value === 3) {
+		return "warning" as const;
+	}
+	return "success" as const;
+});
+
+const strengthText = computed(() => {
+	if (score.value === 0) {
+		return t("auth.password.strength.enter");
+	}
+	if (score.value <= 2) {
+		return t("auth.password.strength.weak");
+	}
+	if (score.value === 3) {
+		return t("auth.password.strength.medium");
+	}
+	return t("auth.password.strength.strong");
+});
+</script>
+
+<template>
+	<div>
+		<UInput
+			:id="inputId"
+			v-model="modelValue"
+			:type="showPassword ? 'text' : 'password'"
+			:autocomplete="autocomplete"
+			:color="showStrength ? color : undefined"
+			:placeholder="placeholder"
+			class="w-full"
+		>
+			<template #trailing>
+				<UTooltip :text="showPassword ? t('auth.password.hide') : t('auth.password.show')">
+					<UButton
+						color="neutral"
+						variant="link"
+						size="sm"
+						:icon="showPassword ? icon('eye-off') : icon('eye')"
+						:aria-label="showPassword ? t('auth.password.hide') : t('auth.password.show')"
+						:aria-pressed="showPassword"
+						:aria-controls="inputId"
+						@click="showPassword = !showPassword"
+					/>
+				</UTooltip>
+			</template>
+		</UInput>
+
+		<template v-if="showStrength">
+			<UProgress
+				:color="color"
+				:indicator="strengthText"
+				:model-value="score"
+				:max="4"
+				size="sm"
+				class="mt-4"
+			/>
+
+			<p class="text-sm font-medium mt-4">
+				{{ `${strengthText}. ${t('auth.password.strength.mustContain')}` }}
+			</p>
+
+			<ul
+				class="space-y-1 mt-1"
+				:aria-label="t('auth.password.strength.mustContain')"
+			>
+				<li
+					v-for="req in strength"
+					:key="req.key"
+					class="flex items-center gap-0.5"
+					:class="req.met ? 'text-success' : 'text-muted'"
+				>
+					<UIcon
+						:name="req.met ? icon('success') : icon('error')"
+						class="size-4 shrink-0"
+					/>
+
+					<span class="text-xs font-light">
+						{{ t(`auth.password.strength.requirements.${req.key}`) }}
+						<span class="sr-only">
+							{{ req.met
+								? t('auth.password.strength.requirementMet')
+								: t('auth.password.strength.requirementNotMet')
+							}}
+						</span>
+					</span>
+				</li>
+			</ul>
+		</template>
+	</div>
+</template>

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

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { useDebounceFn } from "@vueuse/core";
+
+import { searchApi } from "../../../api/search";
+import type { Product } from "../../../composables/useProducts";
+
+const { icon } = useIcons();
+
+interface Suggestion {
+	id: string;
+	name: string;
+	sku: string;
+	category: string;
+	categorySlug: string;
+	subcategorySlug?: string;
+}
+
+const { t } = useI18n();
+const { search: searchConfig } = useAppConfig();
+
+const query = ref<string>("");
+const emit = defineEmits<{ search: [query: string] }>();
+
+const suggestions = ref<Suggestion[]>([]);
+const activeIndex = ref<number>(-1);
+const showDropdown = computed(() => suggestions.value.length > 0);
+
+const containerRef = ref<HTMLElement | null>(null);
+
+// Camera-based QR/barcode scanning (FormKit barcode input): the decoded
+// value becomes the search query and triggers the search immediately.
+// The input definition is loaded on first open, client-only — the package
+// re-exports from the CommonJS @zxing/library, which must never be touched
+// during SSR.
+const scannerOpen = ref(false);
+const scannedCode = ref("");
+const barcodeType = shallowRef<object | null>(null);
+
+async function openScanner(): Promise<void> {
+	if (!barcodeType.value) {
+		const { barcode } = await import("@formkit/barcode");
+		barcodeType.value = barcode;
+	}
+	scannerOpen.value = true;
+}
+
+watch(scannedCode, (code) => {
+	if (!code) {
+		return;
+	}
+	scannerOpen.value = false;
+	scannedCode.value = "";
+	query.value = code;
+	close();
+	emit("search", code);
+});
+
+const debouncedFetch = useDebounceFn(fetchSuggestions, 250);
+
+watch(query, (val) => {
+	activeIndex.value = -1;
+	if (!val.trim() || val.trim().length < searchConfig.autocompleteMinChars) {
+		suggestions.value = [];
+		return;
+	}
+	void debouncedFetch(val);
+});
+
+async function fetchSuggestions(q: string): Promise<void> {
+	const data = await $fetch<{ suggestions: Suggestion[] }>(searchApi.suggest(), {
+		method: "POST",
+		body: { q },
+	}).catch(() => ({ suggestions: [] }));
+	suggestions.value = data.suggestions;
+}
+
+function close(): void {
+	suggestions.value = [];
+	activeIndex.value = -1;
+}
+
+function select(s: Suggestion): void {
+	query.value = s.name;
+	close();
+	const url = useProductUrl({
+		id: s.id,
+		name: s.name,
+		categorySlug: s.categorySlug,
+		subcategorySlug: s.subcategorySlug,
+	} as Product);
+	void navigateTo(url.value);
+}
+
+function onEnter(): void {
+	const activeSuggestion = activeIndex.value >= 0
+		? suggestions.value[activeIndex.value]
+		: undefined;
+
+	if (activeSuggestion) {
+		select(activeSuggestion);
+	}
+	else {
+		close();
+		emit("search", query.value);
+	}
+}
+
+function onDown(): void {
+	activeIndex.value = Math.min(activeIndex.value + 1, suggestions.value.length - 1);
+}
+
+function onUp(): void {
+	activeIndex.value = Math.max(activeIndex.value - 1, -1);
+}
+
+function handleClickOutside(e: MouseEvent): void {
+	if (containerRef.value && !containerRef.value.contains(e.target as Node)) {
+		close();
+	}
+}
+
+onMounted(() => document.addEventListener("click", handleClickOutside));
+onUnmounted(() => document.removeEventListener("click", handleClickOutside));
+</script>
+
+<template>
+	<div
+		ref="containerRef"
+		class="relative w-full"
+	>
+		<UInput
+			v-model="query"
+			name="search"
+			:leading-icon="icon('search')"
+			:placeholder="t('search.input.placeholder')"
+			:aria-label="t('search.input.placeholder')"
+			size="lg"
+			color="primary"
+			variant="none"
+			:ui="{
+				root: 'w-full',
+				base: `rounded-xl bg-elevated/60 shadow-sm ring-1 ring-default
+				focus-visible:ring-2 focus-visible:ring-(--ui-primary) max-sm:text-base
+				placeholder:text-muted pr-11`,
+				leadingIcon: 'text-primary',
+			}"
+			class="w-full"
+			@keydown.enter.prevent="onEnter"
+			@keydown.down.prevent="onDown"
+			@keydown.up.prevent="onUp"
+			@keydown.escape="close"
+		>
+			<template #trailing>
+				<UTooltip :text="t('search.input.scan')">
+					<UButton
+						:icon="icon('scan')"
+						color="primary"
+						variant="ghost"
+						size="sm"
+						tabindex="0"
+						:aria-label="t('search.input.scan')"
+						class="cursor-pointer"
+						@click="openScanner"
+					/>
+				</UTooltip>
+			</template>
+		</UInput>
+
+		<UModal
+			v-model:open="scannerOpen"
+			:title="t('search.input.scanTitle')"
+			:description="t('search.input.scanHint')"
+		>
+			<template #body>
+				<FormKit
+					v-if="barcodeType"
+					v-model="scannedCode"
+					:type="barcodeType"
+					name="searchScan"
+					:label="t('search.input.scanTitle')"
+					outer-class="w-full"
+				/>
+			</template>
+		</UModal>
+		<div
+			v-if="showDropdown"
+			class="absolute z-50 w-full top-full mt-1 bg-(--ui-bg) border border-(--ui-border)
+				rounded-lg shadow-lg overflow-hidden"
+		>
+			<button
+				v-for="(s, i) in suggestions"
+				:key="s.id"
+				type="button"
+				class="w-full flex items-center gap-3 px-3 py-2 text-sm text-left
+				cursor-pointer transition-colors"
+				:class="i === activeIndex ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)'"
+				@click="select(s)"
+			>
+				<UIcon
+					:name="icon('package')"
+					class="shrink-0 text-(--ui-text-muted) size-4"
+				/>
+				<span class="flex-1 truncate font-medium">{{ s.name }}</span>
+				<UBadge
+					:label="s.sku"
+					variant="soft"
+					size="xs"
+					class="shrink-0"
+				/>
+			</button>
+		</div>
+	</div>
+</template>

package/app/components/ui/table/TableSortButton.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/**
+ * Sortable column header for data tables (datatable-ux): clickable label
+ * with a visible sort affordance — the icon on the active column carries
+ * the primary accent, inactive columns keep a subtle hint.
+ *
+ * Used inside UTable `#<id>-header` slots: pass the TanStack `column`
+ * from the slot context.
+ */
+interface SortableColumn {
+	getIsSorted: () => false | "asc" | "desc";
+	toggleSorting: (desc?: boolean) => void;
+}
+
+const props = defineProps<{
+	column: SortableColumn;
+	label: string;
+}>();
+
+const { icon } = useIcons();
+
+const sorted = computed(() => props.column.getIsSorted());
+
+const sortIcon = computed(() => {
+	if (sorted.value === "asc") {
+		return icon("sort-asc");
+	}
+	if (sorted.value === "desc") {
+		return icon("sort-desc");
+	}
+	return icon("sort");
+});
+</script>
+
+<template>
+	<button
+		type="button"
+		tabindex="0"
+		class="group inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide
+		text-muted hover:text-highlighted transition-colors cursor-pointer"
+		:aria-label="label"
+		@click="column.toggleSorting(sorted === 'asc')"
+	>
+		{{ label }}
+		<UIcon
+			:name="sortIcon"
+			class="size-3.5 transition-colors"
+			:class="sorted ? 'text-primary' : 'text-dimmed group-hover:text-muted'"
+		/>
+	</button>
+</template>

package/app/components/ui/table/TableToolbar.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * Data table toolbar (datatable-ux): a prominent, wide search input plus
+ * minimalist filter pills for the primary dimension (usually status) —
+ * the two features every table needs to scale. The `actions` slot holds
+ * the primary action (e.g. the Add button).
+ */
+export interface TableToolbarFilterItem {
+	value: string;
+	label: string;
+	count?: number;
+}
+
+defineProps<{
+	searchPlaceholder?: string;
+	filterItems?: TableToolbarFilterItem[];
+}>();
+
+const search = defineModel<string>("search", { default: "" });
+const filter = defineModel<string>("filter", { default: "all" });
+
+const { icon } = useIcons();
+</script>
+
+<template>
+	<div class="mb-4 space-y-3">
+		<div class="flex flex-wrap items-center gap-3">
+			<UInput
+				v-model="search"
+				:icon="icon('search')"
+				:placeholder="searchPlaceholder"
+				class="w-full sm:w-auto sm:flex-1 sm:max-w-md"
+			/>
+			<div
+				v-if="$slots.actions"
+				class="flex items-center gap-2 ms-auto"
+			>
+				<slot name="actions" />
+			</div>
+		</div>
+
+		<div
+			v-if="filterItems?.length"
+			class="flex flex-wrap items-center gap-1"
+		>
+			<UButton
+				v-for="item in filterItems"
+				:key="item.value"
+				:color="filter === item.value ? 'primary' : 'neutral'"
+				:variant="filter === item.value ? 'soft' : 'ghost'"
+				size="sm"
+				tabindex="0"
+				@click="filter = item.value"
+			>
+				{{ item.label }}
+				<span
+					v-if="item.count !== undefined"
+					class="text-xs tabular-nums"
+					:class="filter === item.value ? 'text-primary/70' : 'text-dimmed'"
+				>
+					{{ item.count }}
+				</span>
+			</UButton>
+		</div>
+	</div>
+</template>

package/app/composables/useAccount.ts

@@ -0,0 +1,27 @@
+import { accountApi } from "../api/account";
+import type { AccountProfile, AccountProfileUpdateInput } from "../interfaces/account/profile";
+
+export const useAccount = () => {
+	const { data: user } = useFetch<AccountProfile>(accountApi.profile(), {
+		key: "account-user",
+		default: (): AccountProfile => ({
+			name: "",
+			email: "",
+			initials: "",
+			phone: "",
+			company: "",
+		}),
+	});
+
+	const updateProfile = async (payload: AccountProfileUpdateInput): Promise<AccountProfile> => {
+		const updated = await $fetch<AccountProfile>(accountApi.profile(), {
+			method: "PUT",
+			body: payload,
+		});
+
+		user.value = updated;
+		return updated;
+	};
+
+	return { user, updateProfile };
+};