@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/vue/use-super-admin-i18n.ts

@@ -0,0 +1,82 @@
+// Reactive i18n context for the SuperAdmin shell. `createSuperAdminApp()`
+// provides one instance; pages, components and composables read it via
+// `useSuperAdminI18n()` or the namespace-focused `useSaMessages()`.
+//
+// Design: no vue-i18n dependency. The platform ships complete typed catalogs
+// (`SA_MESSAGES`, German reference + English translation) and consumers switch
+// the locale or override individual strings through the bootstrap option.
+// Without a provider the composables fall back to a shared German instance, so
+// isolated mounts and unit tests need no setup.
+
+import { computed, inject, isRef, ref, type ComputedRef, type InjectionKey, type Ref } from 'vue';
+
+import {
+    DEFAULT_SA_LOCALE,
+    SA_INTL_LOCALES,
+    resolveMessages,
+    type SaLocale,
+    type SaMessages,
+    type SaMessagesOverrides,
+} from '../client/i18n/index.js';
+
+export interface SuperAdminI18n {
+    /** Active UI locale — mutable; switching re-renders all catalog texts. */
+    locale: Ref<SaLocale>;
+    /** Resolved catalog for the active locale (platform + app overrides). */
+    messages: ComputedRef<SaMessages>;
+    /** BCP-47 tag for `Intl`/`toLocaleString` formatting in the active locale. */
+    intlLocale: ComputedRef<string>;
+}
+
+export interface SuperAdminI18nOptions {
+    /**
+     * Initial UI locale, default `'de'`. Pass a `Ref` when the app wants to
+     * keep control (e.g. a user-profile setting or a header switcher).
+     */
+    locale?: SaLocale | Ref<SaLocale>;
+    /** Per-locale string overrides layered over the platform catalog. */
+    overrides?: Partial<Record<SaLocale, SaMessagesOverrides>>;
+}
+
+// `Symbol.for` — see super-admin-context.ts: dist- and src-imported module
+// instances must resolve to the same injection key.
+export const SUPER_ADMIN_I18N_KEY: InjectionKey<SuperAdminI18n> = Symbol.for(
+    '@saasicat/ui-vue/SUPER_ADMIN_I18N',
+);
+
+export function createSuperAdminI18n(options: SuperAdminI18nOptions = {}): SuperAdminI18n {
+    const locale = isRef(options.locale)
+        ? options.locale
+        : ref(options.locale ?? DEFAULT_SA_LOCALE);
+    const messages = computed(() =>
+        resolveMessages(locale.value, options.overrides?.[locale.value]),
+    );
+    const intlLocale = computed(() => SA_INTL_LOCALES[locale.value]);
+    return { locale, messages, intlLocale };
+}
+
+let fallbackI18n: SuperAdminI18n | null = null;
+
+/**
+ * Returns the i18n context provided by `createSuperAdminApp()`. Outside a
+ * shell (isolated mounts, tests) a shared German default instance is returned
+ * so callers never have to guard for a missing context.
+ */
+export function useSuperAdminI18n(): SuperAdminI18n {
+    const injected = inject(SUPER_ADMIN_I18N_KEY, null);
+    if (injected) return injected;
+    fallbackI18n ??= createSuperAdminI18n();
+    return fallbackI18n;
+}
+
+/**
+ * Focused accessor for one catalog namespace:
+ * `const msg = useSaMessages('plans')` → `msg.value.title` /
+ * template `msg.title`.
+ */
+export function useSaMessages<K extends keyof SaMessages>(
+    namespace: K,
+): ComputedRef<SaMessages[K]> {
+    const { messages } = useSuperAdminI18n();
+    return computed(() => messages.value[namespace]);
+}

package/src/{use-tenant-action-flow.ts → vue/use-tenant-action-flow.ts}

@@ -13,8 +13,10 @@
 
 import { computed, type ComputedRef, type Ref } from 'vue';
 import type { AdminManifest, TenantActionDef, TenantDto } from '@saasicat/types';
-import { ActionRegistry } from './action-registry.js';
+import { ActionRegistry } from '../client/action-registry.js';
+import { formatMessage } from '../client/i18n/format.js';
 import { useSuperAdminActions } from './use-super-admin-context.js';
+import { useSaMessages } from './use-super-admin-i18n.js';
 
 /**
  * Input the app-side handler receives. `mfaCode` is populated when
@@ -125,6 +127,7 @@ export function useTenantActionFlow<TRow extends TenantDto = TenantDto>(
     providers: TenantActionFlowProviders<TRow> = {},
 ): UseTenantActionFlowResult<TRow> {
     const handlers = useSuperAdminActions();
+    const msg = useSaMessages('tenants');
     const registry = computed<ActionRegistry | null>(() => {
         if (!manifest.value) return null;
         return new ActionRegistry(manifest.value, handlers);
@@ -151,7 +154,8 @@ export function useTenantActionFlow<TRow extends TenantDto = TenantDto>(
             .filter((def) => !providers.visibleForRow || providers.visibleForRow(def, row))
             .map((def) => ({
                 def,
-                invoke: (r: TRow) => runFlow(def, r ?? row, reg, providers),
+                invoke: (r: TRow) =>
+                    runFlow(def, r ?? row, reg, providers, msg.value.actions.successNotify),
             }));
     }
 
@@ -184,6 +188,7 @@ async function runFlow<TRow extends TenantDto>(
     row: TRow,
     registry: ActionRegistry,
     providers: TenantActionFlowProviders<TRow>,
+    successTemplate: string,
 ): Promise<unknown> {
     let reason: string | null = null;
     let extras: Record<string, unknown> = {};
@@ -191,8 +196,8 @@ async function runFlow<TRow extends TenantDto>(
     if (def.confirmType && def.confirmType !== 'none') {
         if (!providers.confirm) {
             throw new Error(
-                `useTenantActionFlow: Action "${def.id}" verlangt confirmType="${def.confirmType}", ` +
-                    `aber kein \`confirm\`-Provider übergeben.`,
+                `useTenantActionFlow: action "${def.id}" requires confirmType="${def.confirmType}", ` +
+                    `but no \`confirm\` provider was supplied.`,
             );
         }
         const c = await providers.confirm(def, { row });
@@ -205,8 +210,8 @@ async function runFlow<TRow extends TenantDto>(
     if (def.requiresMfa) {
         if (!providers.mfa) {
             throw new Error(
-                `useTenantActionFlow: Action "${def.id}" verlangt MFA, aber kein ` +
-                    `\`mfa\`-Provider übergeben.`,
+                `useTenantActionFlow: action "${def.id}" requires MFA, but no ` +
+                    `\`mfa\` provider was supplied.`,
             );
         }
         mfaCode = await providers.mfa(def, { row });
@@ -225,7 +230,7 @@ async function runFlow<TRow extends TenantDto>(
     try {
         const input: TenantActionInput<TRow> = { row, mfaCode, reason, extras };
         const result = await resolved.handler(input);
-        providers.notify?.('positive', `${def.label}: erfolgreich.`);
+        providers.notify?.('positive', formatMessage(successTemplate, { action: def.label }));
         providers.onSuccess?.(def, { row });
         return result;
     } catch (err) {

package/src/{use-tenant-billing-catalog.ts → vue/use-tenant-billing-catalog.ts}

@@ -8,8 +8,8 @@
 
 import { ref, type Ref } from 'vue';
 import type { FeatureUiRegistry } from '@saasicat/types';
-import { defaultHttpClient, type HttpClient } from './types.js';
-import { trimTrailingSlashes } from './http-json.js';
+import { defaultHttpClient, type HttpClient } from '../client/types.js';
+import { trimTrailingSlashes } from '../client/http-json.js';
 
 export interface CatalogPlan {
     id: string;

package/src/{use-tenant-billing.ts → vue/use-tenant-billing.ts}

@@ -11,8 +11,8 @@
 // has `/api` as its baseURL — the result would be `/api/api/billing/...` (404).
 
 import { ref, type Ref } from 'vue';
-import { defaultHttpClient, type HttpClient } from './types.js';
-import { trimTrailingSlashes } from './http-json.js';
+import { defaultHttpClient, type HttpClient } from '../client/types.js';
+import { trimTrailingSlashes } from '../client/http-json.js';
 
 export type BillingCycleStr = 'MONTHLY' | 'YEARLY';
 

package/src/{use-tenant-manifest.ts → vue/use-tenant-manifest.ts}

@@ -8,7 +8,7 @@
 // Spec: handoff/superadmin/QUICKSTART_SIMPLIFICATIONS.md §P14.
 
 import { ref, type Ref } from 'vue';
-import { defaultHttpClient, type HttpClient } from './types.js';
+import { defaultHttpClient, type HttpClient } from '../client/types.js';
 
 export interface TenantManifestNavItem {
     id: string;
@@ -48,9 +48,7 @@ export interface UseTenantManifestResult {
 
 export function useTenantManifest(options: UseTenantManifestOptions): UseTenantManifestResult {
     if (!options?.endpoint) {
-        throw new Error(
-            'useTenantManifest: `endpoint` ist Pflicht (z. B. "/api/tenant/manifest").',
-        );
+        throw new Error('useTenantManifest: `endpoint` is required (e.g. "/api/tenant/manifest").');
     }
     const http = options.http ?? defaultHttpClient();
     const manifest = ref<TenantManifestShape | null>(null);

package/src/{use-tenant-subscription-bundles.ts → vue/use-tenant-subscription-bundles.ts}

@@ -5,7 +5,7 @@
 
 import { ref, type Ref } from 'vue';
 import type { SubscriptionBundleRecord } from '@saasicat/types';
-import { defaultHttpClient, type HttpClient } from './types.js';
+import { defaultHttpClient, type HttpClient } from '../client/types.js';
 
 export interface UseTenantSubscriptionBundlesOptions {
     /** App-global API prefix incl. `/billing` (e.g. `/api/v1`). */
@@ -48,7 +48,7 @@ export function useTenantSubscriptionBundles(
 ): UseTenantSubscriptionBundlesResult {
     if (!options?.billingEndpoint) {
         throw new Error(
-            'useTenantSubscriptionBundles: `billingEndpoint` ist Pflicht (z. B. "/api/v1").',
+            'useTenantSubscriptionBundles: `billingEndpoint` is required (e.g. "/api/v1").',
         );
     }
     const http = options.http ?? defaultHttpClient();
@@ -75,7 +75,7 @@ export function useTenantSubscriptionBundles(
             throw new TenantSubscriptionBundlesApiError(
                 res.status,
                 body,
-                `SubscriptionBundle-API antwortete mit HTTP ${res.status}`,
+                `SubscriptionBundle API responded with HTTP ${res.status}`,
             );
         }
         return body as T;
@@ -103,7 +103,7 @@ export function useTenantSubscriptionBundles(
             body: JSON.stringify(data),
         });
         if (!result) {
-            throw new TenantSubscriptionBundlesApiError(0, null, 'add gab keinen Body zurück');
+            throw new TenantSubscriptionBundlesApiError(0, null, 'add returned no body');
         }
         const hydrated = rehydrateDates(result);
         bundles.value = [hydrated, ...bundles.value];
@@ -119,7 +119,7 @@ export function useTenantSubscriptionBundles(
             { method: 'DELETE', body: JSON.stringify(opts) },
         );
         if (!result) {
-            throw new TenantSubscriptionBundlesApiError(0, null, 'cancel gab keinen Body zurück');
+            throw new TenantSubscriptionBundlesApiError(0, null, 'cancel returned no body');
         }
         const hydrated = rehydrateDates(result);
         bundles.value = bundles.value.map((b) => (b.id === subscriptionBundleId ? hydrated : b));

package/src/{use-tenants.ts → vue/use-tenants.ts}

@@ -44,9 +44,9 @@ export function useTenants<T extends TenantDto = TenantDto>(
 ): UseTenantsResult<T> {
     if (!options?.endpoint) {
         throw new Error(
-            'useTenants: `endpoint` ist Pflicht (z. B. "/api/v1/admin/tenants" oder ' +
-                '"/api/admin/tenants"). Plattform hat keinen Default, weil Apps ' +
-                'unterschiedliche globalPrefix-Konventionen haben.',
+            'useTenants: `endpoint` is required (e.g. "/api/v1/admin/tenants" or ' +
+                '"/api/admin/tenants"). The platform has no default because apps ' +
+                'use different globalPrefix conventions.',
         );
     }
     const filter = options.filter ?? ref<TenantListFilter>({});

package/dist/testing-e2e/admin-pages-suite.d.cts

@@ -1,37 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-interface AdminPagesSuiteConfig {
-    /** Display name, e.g. 'demoapp' / 'clubapp'. */
-    appName: string;
-    /** URL of the login page (full). */
-    loginUrl: string;
-    /** Test account. */
-    email: string;
-    password: string;
-    /** Paths the smoke test should click through. */
-    pages: ReadonlyArray<{
-        /** Display name in the test description. */
-        name: string;
-        /** Path relative to the origin (e.g. '/admin/tenants'). */
-        path: string;
-        /** Optional: if set, check that this selector exists. */
-        expectVisible?: string;
-        /** Optional: HTTP patterns that are OK as 4xx/5xx (e.g. missing backend endpoints). */
-        allowedFailures?: readonly RegExp[];
-    }>;
-    /** Expected KPI card labels on the dashboard page. */
-    expectedKpiLabels: readonly string[];
-    /** Expected distribution section titles. */
-    expectedDistributionTitles?: readonly string[];
-    /** Expected shortcut titles on the dashboard. */
-    expectedShortcutTitles: readonly string[];
-    /** Shortcuts that must NOT appear (e.g. "Dashboard"). */
-    forbiddenShortcutTitles?: readonly string[];
-    /** Console error patterns that should be ignored. */
-    consoleErrorAllowlist?: readonly RegExp[];
-    /** Path to the dashboard page (default `/admin/`). */
-    dashboardPath?: string;
-}
-declare function runAdminPagesSuite(test: typeof test, expect: typeof expect, config: AdminPagesSuiteConfig): void;
-
-export { type AdminPagesSuiteConfig, runAdminPagesSuite };

package/dist/testing-e2e/admin-pages-suite.d.ts

@@ -1,37 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-interface AdminPagesSuiteConfig {
-    /** Display name, e.g. 'demoapp' / 'clubapp'. */
-    appName: string;
-    /** URL of the login page (full). */
-    loginUrl: string;
-    /** Test account. */
-    email: string;
-    password: string;
-    /** Paths the smoke test should click through. */
-    pages: ReadonlyArray<{
-        /** Display name in the test description. */
-        name: string;
-        /** Path relative to the origin (e.g. '/admin/tenants'). */
-        path: string;
-        /** Optional: if set, check that this selector exists. */
-        expectVisible?: string;
-        /** Optional: HTTP patterns that are OK as 4xx/5xx (e.g. missing backend endpoints). */
-        allowedFailures?: readonly RegExp[];
-    }>;
-    /** Expected KPI card labels on the dashboard page. */
-    expectedKpiLabels: readonly string[];
-    /** Expected distribution section titles. */
-    expectedDistributionTitles?: readonly string[];
-    /** Expected shortcut titles on the dashboard. */
-    expectedShortcutTitles: readonly string[];
-    /** Shortcuts that must NOT appear (e.g. "Dashboard"). */
-    forbiddenShortcutTitles?: readonly string[];
-    /** Console error patterns that should be ignored. */
-    consoleErrorAllowlist?: readonly RegExp[];
-    /** Path to the dashboard page (default `/admin/`). */
-    dashboardPath?: string;
-}
-declare function runAdminPagesSuite(test: typeof test, expect: typeof expect, config: AdminPagesSuiteConfig): void;
-
-export { type AdminPagesSuiteConfig, runAdminPagesSuite };