@revenexx/cover 0.1.0 → 0.1.2

package/app/app.config.ts

@@ -4,7 +4,7 @@ import { DEFAULT_ICON_WEIGHT, nuxtUiIcons } from "./config/icons";
  * Layer defaults for the BFF service registry. Every server data domain is
  * resolved through a registry key — `mock` serves the bundled demo data.
  * Consuming apps override individual keys in their own app.config.ts to
- * switch a domain to a live implementation (e.g. accountService: "sdk").
+ * switch a domain to a live implementation (e.g. accountService: "api").
  *
  * `ui.icons` maps Nuxt UI's built-in icons to Solar in the default weight;
  * the theme store re-applies them with the active theme's weight at runtime.

package/app/components/account/AccountSidebar.vue

@@ -1,8 +1,17 @@
 <script setup lang="ts">
 import { accountNavigation } from "../../config/navigation";
+import type { AccountNavGroup } from "../../config/navigation";
 
 const { icon } = useIcons();
 
+// Consumers can replace the full B2B navigation tree with their own
+// (e.g. a lean storefront theme exposing only orders + profile) via
+// app.config — `accountNavigation: AccountNavGroup[]`.
+const appConfig = useAppConfig();
+const navigation = computed<AccountNavGroup[]>(() =>
+	(appConfig.accountNavigation as AccountNavGroup[] | undefined) ?? accountNavigation,
+);
+
 /**
  * The full B2B account navigation tree (structure from the relation
  * prototype). Implemented entries route to real pages, the rest leads to the
@@ -41,7 +50,7 @@ function isActive(to: string): boolean {
 	>
 		<ul class="divide-y divide-default">
 			<li
-				v-for="group in accountNavigation"
+				v-for="group in navigation"
 				:key="group.labelKey"
 				class="py-4"
 			>

package/app/components/account/address/AccountAddressCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AccountAddress, AccountAddressFormState } from "../../../interfaces/account/address-list";
+import { COUNTRIES } from "../../../config/countries";
 
 const { icon } = useIcons();
 
@@ -23,7 +24,6 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
-const { validate: validateAddress } = useFormValidation<AccountAddressFormState>("accountAddress");
 
 const confirmDeleteOpen = ref(false);
 
@@ -120,116 +120,97 @@ function confirmDelete() {
 			<div>{{ address.country }}</div>
 		</address>
 
-		<UForm
+		<FormKit
 			v-else
-			:state="formState"
-			:validate="validateAddress"
-			class="space-y-4"
+			type="form"
+			:actions="false"
 			@submit="emit('submit')"
 		>
 			<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-				<UFormField
+				<FormKit
+					v-model="formState.label"
+					type="text"
 					:label="t('addresses.fields.label')"
 					name="label"
-					class="sm:col-span-2"
-				>
-					<UInput
-						v-model="formState.label"
-						class="w-full"
-					/>
-				</UFormField>
-				<UFormField
+					validation="required|length:2,200"
+					outer-class="sm:col-span-2"
+				/>
+				<FormKit
+					v-model="formState.company"
+					type="text"
 					:label="t('addresses.fields.company')"
 					name="company"
-					class="sm:col-span-2"
-				>
-					<UInput
-						v-model="formState.company"
-						autocomplete="organization"
-						class="w-full"
-					/>
-				</UFormField>
-				<UFormField
+					validation="companyName"
+					:validation-messages="{ companyName: t('validation.invalidCompanyName') }"
+					autocomplete="organization"
+					outer-class="sm:col-span-2"
+				/>
+				<FormKit
+					v-model="formState.firstName"
+					type="text"
 					:label="t('addresses.fields.firstName')"
 					name="firstName"
-				>
-					<UInput
-						v-model="formState.firstName"
-						autocomplete="given-name"
-						class="w-full"
-					/>
-				</UFormField>
-				<UFormField
+					validation="required|length:2,100"
+					autocomplete="given-name"
+				/>
+				<FormKit
+					v-model="formState.lastName"
+					type="text"
 					:label="t('addresses.fields.lastName')"
 					name="lastName"
-				>
-					<UInput
-						v-model="formState.lastName"
-						autocomplete="family-name"
-						class="w-full"
-					/>
-				</UFormField>
-				<UFormField
+					validation="required|length:2,100"
+					autocomplete="family-name"
+				/>
+				<FormKit
+					v-model="formState.street"
+					type="text"
 					:label="t('addresses.fields.street')"
 					name="street"
-				>
-					<UInput
-						v-model="formState.street"
-						autocomplete="street-address"
-						class="w-full"
-					/>
-				</UFormField>
-				<UFormField
+					validation="required|length:2,200"
+					autocomplete="street-address"
+				/>
+				<FormKit
+					v-model="formState.streetNumber"
+					type="text"
 					:label="t('addresses.fields.streetNumber')"
 					name="streetNumber"
-				>
-					<UInput
-						v-model="formState.streetNumber"
-						class="w-full"
-					/>
-				</UFormField>
-				<UFormField
+					validation="required"
+				/>
+				<FormKit
+					v-model="formState.zip"
+					type="text"
 					:label="t('addresses.fields.zip')"
 					name="zip"
-				>
-					<UInput
-						v-model="formState.zip"
-						autocomplete="postal-code"
-						class="w-full"
-					/>
-				</UFormField>
-				<UFormField
+					validation="required|zip"
+					:validation-messages="{ zip: t('validation.invalidZipCode') }"
+					autocomplete="postal-code"
+				/>
+				<FormKit
+					v-model="formState.city"
+					type="text"
 					:label="t('addresses.fields.city')"
 					name="city"
-				>
-					<UInput
-						v-model="formState.city"
-						autocomplete="address-level2"
-						class="w-full"
-					/>
-				</UFormField>
-				<UFormField
+					validation="required|length:2,100"
+					autocomplete="address-level2"
+				/>
+				<FormKit
+					v-model="formState.country"
+					type="select"
 					:label="t('addresses.fields.country')"
 					name="country"
-					class="sm:col-span-2"
-				>
-					<UiFormsCountrySelection
-						v-model="formState.country"
-						class="w-full"
-					/>
-				</UFormField>
-				<UFormField
+					validation="required"
+					:options="COUNTRIES"
+					outer-class="sm:col-span-2"
+				/>
+				<FormKit
+					v-model="formState.type"
+					type="select"
 					:label="t('addresses.fields.type')"
 					name="type"
-					class="sm:col-span-2"
-				>
-					<USelect
-						v-model="formState.type"
-						:items="typeOptions"
-						value-key="value"
-						class="w-full"
-					/>
-				</UFormField>
+					validation="required"
+					:options="typeOptions"
+					outer-class="sm:col-span-2"
+				/>
 				<div class="sm:col-span-2">
 					<UCheckbox
 						:model-value="formState.isDefault"
@@ -256,7 +237,7 @@ function confirmDelete() {
 					:label="t('addresses.actions.save')"
 				/>
 			</div>
-		</UForm>
+		</FormKit>
 	</UCard>
 
 	<UModal

package/app/components/auth/AuthRegisterPanel.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
 import { COUNTRIES } from "../../config/countries";
-import { required } from "../../validations/required";
-import { zipCode } from "../../validations/zipCode";
-import type { FormError } from "@nuxt/ui";
-
 import type { RegisterFormState, RegistrationMode, RegistrationProfile } from "../../interfaces/auth";
 
 /**
@@ -47,36 +43,13 @@ const modes: { value: RegistrationMode; icon: string }[] = [
 	{ value: "existing", icon: "key" },
 ];
 
-const salutationItems = computed(() =>
-	(["mr", "ms", "none"] as const).map(value => ({
+const salutationItems = computed(() => [
+	{ value: "", label: "—" },
+	...(["mr", "ms", "none"] as const).map(value => ({
 		value,
 		label: t(`auth.register.fields2.salutations.${value}`),
-	})));
-
-const countryItems = COUNTRIES;
-
-/* ---- validation: static base + mode-dependent fields ------------------- */
-const { validate: validateBase } = useFormValidation<RegisterFormState>("register");
-
-function validate(formState: RegisterFormState): FormError[] {
-	const errors = validateBase(formState);
-	const push = (name: string, key: string | null) => {
-		if (key !== null) {
-			errors.push({ name, message: t(key) });
-		}
-	};
-	if (formState.mode === "new") {
-		push("street", required(formState.street));
-		push("streetNumber", required(formState.streetNumber));
-		push("zip", required(formState.zip) ?? zipCode(formState.zip));
-		push("city", required(formState.city));
-		push("country", required(formState.country));
-	}
-	else {
-		push("customerNumber", required(formState.customerNumber));
-	}
-	return errors;
-}
+	})),
+]);
 
 function buildProfile(): RegistrationProfile {
 	return {
@@ -164,9 +137,9 @@ async function onSubmit(): Promise<void> {
 			</div>
 		</fieldset>
 
-		<UForm
-			:state="state"
-			:validate="validate"
+		<FormKit
+			type="form"
+			:actions="false"
 			class="space-y-7 pt-7"
 			@submit="onSubmit"
 		>
@@ -175,46 +148,38 @@ async function onSubmit(): Promise<void> {
 				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
 					{{ t('auth.register.sections.company') }}
 				</h3>
-				<UFormField
+				<FormKit
+					v-model="state.company"
+					type="text"
 					:label="t('auth.register.fields.company')"
 					name="company"
-					required
-					:hint="t('auth.register.companyRequiredHint')"
-				>
-					<UInput
-						v-model="state.company"
-						autocomplete="organization"
-						class="w-full"
-					/>
-				</UFormField>
+					validation="required|companyName"
+					:validation-messages="{ companyName: t('validation.invalidCompanyName') }"
+					:help="t('auth.register.companyRequiredHint')"
+					autocomplete="organization"
+				/>
 				<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-					<UFormField
+					<FormKit
 						v-if="state.mode === 'existing'"
+						v-model="state.customerNumber"
+						type="text"
 						:label="t('auth.register.fields2.customerNumber')"
 						name="customerNumber"
-						required
-						:hint="t('auth.register.fields2.customerNumberHint')"
-					>
-						<UInput
-							v-model="state.customerNumber"
-							class="w-full"
-						/>
-					</UFormField>
-					<UFormField
+						validation="required"
+						:help="t('auth.register.fields2.customerNumberHint')"
+					/>
+					<FormKit
+						v-model="state.vatId"
+						type="text"
 						:label="t('auth.register.fields2.vatId')"
 						name="vatId"
-						:hint="t('auth.register.fields2.vatIdHint')"
-					>
-						<UInput
-							v-model="state.vatId"
-							class="w-full"
-							placeholder="DE123456789"
-						/>
-					</UFormField>
+						:help="t('auth.register.fields2.vatIdHint')"
+						placeholder="DE123456789"
+					/>
 				</div>
 			</section>
 
-			<!-- Billing address (new customers) -->
+			<!-- Billing address (new customers only) -->
 			<section
 				v-if="state.mode === 'new'"
 				class="space-y-4"
@@ -223,66 +188,52 @@ async function onSubmit(): Promise<void> {
 					{{ t('auth.register.sections.address') }}
 				</h3>
 				<div class="grid grid-cols-3 gap-4">
-					<UFormField
+					<FormKit
+						v-model="state.street"
+						type="text"
 						:label="t('auth.register.fields2.street')"
 						name="street"
-						required
-						class="col-span-2"
-					>
-						<UInput
-							v-model="state.street"
-							autocomplete="address-line1"
-							class="w-full"
-						/>
-					</UFormField>
-					<UFormField
+						validation="required"
+						autocomplete="address-line1"
+						outer-class="col-span-2"
+					/>
+					<FormKit
+						v-model="state.streetNumber"
+						type="text"
 						:label="t('auth.register.fields2.streetNumber')"
 						name="streetNumber"
-						required
-					>
-						<UInput
-							v-model="state.streetNumber"
-							autocomplete="address-line2"
-							class="w-full"
-						/>
-					</UFormField>
+						validation="required"
+						autocomplete="address-line2"
+					/>
 				</div>
 				<div class="grid grid-cols-3 gap-4">
-					<UFormField
+					<FormKit
+						v-model="state.zip"
+						type="text"
 						:label="t('auth.register.fields2.zip')"
 						name="zip"
-						required
-					>
-						<UInput
-							v-model="state.zip"
-							autocomplete="postal-code"
-							class="w-full"
-						/>
-					</UFormField>
-					<UFormField
+						validation="required|zip"
+						:validation-messages="{ zip: t('validation.invalidZipCode') }"
+						autocomplete="postal-code"
+					/>
+					<FormKit
+						v-model="state.city"
+						type="text"
 						:label="t('auth.register.fields2.city')"
 						name="city"
-						required
-						class="col-span-2"
-					>
-						<UInput
-							v-model="state.city"
-							autocomplete="address-level2"
-							class="w-full"
-						/>
-					</UFormField>
+						validation="required"
+						autocomplete="address-level2"
+						outer-class="col-span-2"
+					/>
 				</div>
-				<UFormField
+				<FormKit
+					v-model="state.country"
+					type="select"
 					:label="t('auth.register.fields2.country')"
 					name="country"
-					required
-				>
-					<USelect
-						v-model="state.country"
-						:items="countryItems"
-						class="w-full"
-					/>
-				</UFormField>
+					validation="required"
+					:options="COUNTRIES"
+				/>
 			</section>
 
 			<!-- Contact person -->
@@ -291,63 +242,47 @@ async function onSubmit(): Promise<void> {
 					{{ t('auth.register.sections.contact') }}
 				</h3>
 				<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-					<UFormField
+					<FormKit
+						v-model="state.salutation"
+						type="select"
 						:label="t('auth.register.fields2.salutation')"
 						name="salutation"
-					>
-						<USelect
-							v-model="state.salutation"
-							:items="salutationItems"
-							class="w-full"
-						/>
-					</UFormField>
-					<UFormField
+						:options="salutationItems"
+					/>
+					<FormKit
+						v-model="state.firstName"
+						type="text"
 						:label="t('auth.register.fields.firstName')"
 						name="firstName"
-						required
-					>
-						<UInput
-							v-model="state.firstName"
-							autocomplete="given-name"
-							class="w-full"
-						/>
-					</UFormField>
-					<UFormField
+						validation="required"
+						autocomplete="given-name"
+					/>
+					<FormKit
+						v-model="state.lastName"
+						type="text"
 						:label="t('auth.register.fields.lastName')"
 						name="lastName"
-						required
-					>
-						<UInput
-							v-model="state.lastName"
-							autocomplete="family-name"
-							class="w-full"
-						/>
-					</UFormField>
+						validation="required"
+						autocomplete="family-name"
+					/>
 				</div>
 				<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-					<UFormField
+					<FormKit
+						v-model="state.jobTitle"
+						type="text"
 						:label="t('auth.register.fields2.jobTitle')"
 						name="jobTitle"
-						:hint="t('auth.register.fields2.jobTitleHint')"
-					>
-						<UInput
-							v-model="state.jobTitle"
-							autocomplete="organization-title"
-							class="w-full"
-						/>
-					</UFormField>
-					<UFormField
+						:help="t('auth.register.fields2.jobTitleHint')"
+						autocomplete="organization-title"
+					/>
+					<FormKit
+						v-model="state.phone"
+						type="tel"
 						:label="t('auth.register.fields2.phone')"
 						name="phone"
-						:hint="t('auth.register.fields2.phoneHint')"
-					>
-						<UInput
-							v-model="state.phone"
-							type="tel"
-							autocomplete="tel"
-							class="w-full"
-						/>
-					</UFormField>
+						:help="t('auth.register.fields2.phoneHint')"
+						autocomplete="tel"
+					/>
 				</div>
 			</section>
 
@@ -356,53 +291,46 @@ async function onSubmit(): Promise<void> {
 				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
 					{{ t('auth.register.sections.account') }}
 				</h3>
-				<UFormField
+				<FormKit
+					v-model="state.email"
+					type="email"
 					:label="t('auth.register.fields.email')"
 					name="email"
-					required
-				>
-					<UInput
-						v-model="state.email"
-						type="email"
-						autocomplete="email"
-						class="w-full"
-						:placeholder="t('auth.register.fields.emailPlaceholder')"
-					/>
-				</UFormField>
+					validation="required|email"
+					autocomplete="email"
+					:placeholder="t('auth.register.fields.emailPlaceholder')"
+				/>
 				<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-					<UFormField
+					<FormKit
+						v-model="state.password"
+						type="password"
 						:label="t('auth.register.fields.password')"
 						name="password"
-						required
-					>
-						<UiFormsPasswordInput
-							v-model="state.password"
-							autocomplete="new-password"
-							:placeholder="t('auth.register.fields.passwordPlaceholder')"
-							show-strength
-						/>
-					</UFormField>
-					<UFormField
+						validation="required|length:8"
+						autocomplete="new-password"
+						:placeholder="t('auth.register.fields.passwordPlaceholder')"
+					/>
+					<FormKit
+						v-model="state.passwordConfirm"
+						type="password"
 						:label="t('auth.register.fields.passwordConfirm')"
 						name="passwordConfirm"
-						required
-					>
-						<UiFormsPasswordInput
-							v-model="state.passwordConfirm"
-							autocomplete="new-password"
-							:placeholder="t('auth.register.fields.passwordConfirmPlaceholder')"
-						/>
-					</UFormField>
+						validation="required|confirm:password"
+						autocomplete="new-password"
+						:placeholder="t('auth.register.fields.passwordConfirmPlaceholder')"
+					/>
 				</div>
 			</section>
 
-			<UFormField name="acceptTerms">
-				<UCheckbox
-					v-model="state.acceptTerms"
-					:label="t('auth.register.fields.acceptTerms')"
-					:description="t('auth.register.fields.acceptTermsDescription')"
-				/>
-			</UFormField>
+			<FormKit
+				v-model="state.acceptTerms"
+				type="checkbox"
+				:label="t('auth.register.fields.acceptTerms')"
+				name="acceptTerms"
+				validation="accepted"
+				:validation-messages="{ accepted: t('validation.termsRequired') }"
+				:help="t('auth.register.fields.acceptTermsDescription')"
+			/>
 
 			<UAlert
 				color="info"
@@ -426,6 +354,6 @@ async function onSubmit(): Promise<void> {
 				:loading="loading"
 				:label="t('auth.register.submit')"
 			/>
-		</UForm>
+		</FormKit>
 	</div>
 </template>