@saasicat/ui-vue 0.19.0 → 0.21.0

package/src/pages-standard/marketing-catalog/MarketingCatalogPreview.vue

@@ -1,75 +1,90 @@
 <template>
-    <div class="mc-window">
-        <div class="mc-chrome">
-            <span class="mc-chrome-dot" style="background: #ef4444" />
-            <span class="mc-chrome-dot" style="background: #f59e0b" />
-            <span class="mc-chrome-dot" style="background: #10b981" />
-            <div class="mc-chrome-url">{{ previewUrl }}</div>
+    <div class="sa-marketing-window">
+        <div class="sa-marketing-chrome">
+            <span class="sa-marketing-chrome-dot" style="background: #ef4444" />
+            <span class="sa-marketing-chrome-dot" style="background: #f59e0b" />
+            <span class="sa-marketing-chrome-dot" style="background: #10b981" />
+            <div class="sa-marketing-chrome-url">{{ previewUrl }}</div>
         </div>
-        <div class="mc-canvas">
-            <div class="mc-eyebrow">{{ msg.preview.eyebrow }}</div>
-            <h1 class="mc-hero">{{ msg.preview.hero }}</h1>
-            <p class="mc-sub">{{ msg.preview.sub }}</p>
+        <div class="sa-marketing-canvas">
+            <div class="sa-marketing-eyebrow">{{ msg.preview.eyebrow }}</div>
+            <!-- Not a heading element: this is a picture of the public landing
+                 page inside a browser mock-up, and assistive technology cannot
+                 tell a mock-up from the document it is embedded in — a real
+                 <h1> here would be a second page heading. -->
+            <div class="sa-marketing-hero">{{ msg.preview.hero }}</div>
+            <p class="sa-marketing-sub">{{ msg.preview.sub }}</p>
 
-            <div v-if="visibleRows.length === 0" class="mc-banner mc-banner--info">
+            <div
+                v-if="visibleRows.length === 0"
+                class="sa-marketing-banner sa-marketing-banner--info"
+            >
                 {{ msg.preview.emptyBefore }} <strong>{{ msg.tabs.admin }}</strong
                 >{{ msg.preview.emptyAfter }}
             </div>
 
-            <div v-else class="mc-grid">
+            <div v-else class="sa-marketing-grid">
                 <div
                     v-for="row in visibleRows"
                     :key="row.plan.id"
-                    class="mc-card"
+                    class="sa-marketing-card"
                     :class="{ featured: row.m.highlight, 'has-promo': !!promoOf(row) }"
                 >
                     <div
                         v-if="promoOf(row)"
-                        class="mc-promo-ribbon"
+                        class="sa-marketing-promo-ribbon"
                         :style="{ background: promoColorOf(row) }"
                     >
                         {{ promoBadgeOf(row) }}
                     </div>
-                    <span v-else-if="row.m.badge" class="mc-card-badge">{{ row.m.badge }}</span>
-                    <div class="mc-card-key">{{ row.plan.planKey }}</div>
-                    <div class="mc-card-name">
+                    <span v-else-if="row.m.badge" class="sa-marketing-card-badge">{{
+                        row.m.badge
+                    }}</span>
+                    <div class="sa-marketing-card-key">{{ row.plan.planKey }}</div>
+                    <div class="sa-marketing-card-name">
                         {{ row.m.displayLabel || row.plan.label }}
                     </div>
-                    <div class="mc-card-desc">
+                    <div class="sa-marketing-card-desc">
                         {{ row.m.description || row.plan.description || '—' }}
                     </div>
 
-                    <div class="mc-card-price">
+                    <div class="sa-marketing-card-price">
                         <template v-if="row.m.priceTag">
-                            <span class="mc-card-price-big" style="font-size: 22px">
+                            <span class="sa-marketing-card-price-big" style="font-size: 22px">
                                 {{ row.m.priceTag }}
                             </span>
                         </template>
                         <template v-else-if="!row.liveVersion">
-                            <span class="mc-card-price-big" style="font-size: 22px">
+                            <span class="sa-marketing-card-price-big" style="font-size: 22px">
                                 {{ msg.preview.priceOnRequest }}
                             </span>
                         </template>
                         <template v-else-if="promoResultOf(row)">
-                            <span class="mc-card-price-big">
+                            <span class="sa-marketing-card-price-big">
                                 {{ formatEuro(promoResultOf(row)?.discounted ?? 0) }}
                             </span>
-                            <span class="mc-card-price-unit">{{ msg.preview.perMonth }}</span>
+                            <span class="sa-marketing-card-price-unit">{{
+                                msg.preview.perMonth
+                            }}</span>
                         </template>
                         <template v-else>
-                            <span class="mc-card-price-big">
+                            <span class="sa-marketing-card-price-big">
                                 {{ formatEuro(monthlyOf(row)) }}
                             </span>
-                            <span class="mc-card-price-unit">{{ msg.preview.perMonth }}</span>
+                            <span class="sa-marketing-card-price-unit">{{
+                                msg.preview.perMonth
+                            }}</span>
                         </template>
                     </div>
-                    <div v-if="promoResultOf(row)" class="mc-card-price-strike">
+                    <div v-if="promoResultOf(row)" class="sa-marketing-card-price-strike">
                         <s>{{ formatEuro(promoResultOf(row)?.original ?? 0) }}</s>
-                        <span class="mc-price-regular">{{ msg.preview.regularPrice }}</span>
+                        <span class="sa-marketing-price-regular">{{
+                            msg.preview.regularPrice
+                        }}</span>
                     </div>
                     <div
                         v-else-if="row.liveVersion && yearlyOf(row) > 0 && !row.m.priceTag"
-                        class="mc-card-price-y"
+                        class="sa-marketing-card-price-y"
                     >
                         {{
                             formatMessage(msg.preview.orYearly, {
@@ -78,18 +93,21 @@
                         }}
                     </div>
 
-                    <button type="button" class="mc-card-cta">{{ ctaText(row) }}</button>
-                    <div v-if="showTrialNote(row) && !promoOf(row)" class="mc-card-trialnote">
+                    <button type="button" class="sa-marketing-card-cta">{{ ctaText(row) }}</button>
+                    <div
+                        v-if="showTrialNote(row) && !promoOf(row)"
+                        class="sa-marketing-card-trialnote"
+                    >
                         {{ formatMessage(msg.preview.trialNote, { days: row.m.trialDays }) }}
                     </div>
-                    <div v-if="promoFineprintOf(row)" class="mc-card-fineprint">
+                    <div v-if="promoFineprintOf(row)" class="sa-marketing-card-fineprint">
                         {{ promoFineprintOf(row) }}
                     </div>
 
-                    <div class="mc-card-includes">{{ msg.topFeatures }}</div>
-                    <ul v-if="row.m.topFeatures.length > 0" class="mc-card-features">
+                    <div class="sa-marketing-card-includes">{{ msg.topFeatures }}</div>
+                    <ul v-if="row.m.topFeatures.length > 0" class="sa-marketing-card-features">
                         <li v-for="(f, i) in row.m.topFeatures" :key="i">
-                            <span class="mc-tick">
+                            <span class="sa-marketing-tick">
                                 <svg
                                     width="14"
                                     height="14"
@@ -107,7 +125,7 @@
                             </span>
                         </li>
                     </ul>
-                    <div v-else class="mc-card-features-empty">
+                    <div v-else class="sa-marketing-card-features-empty">
                         {{ msg.preview.noTopFeatures }}
                     </div>
                 </div>

package/src/pages-standard/marketing-catalog/MarketingCatalogToolbar.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="mc-toolbar">
-        <div class="mc-tabbar">
+    <div class="sa-marketing-toolbar">
+        <div class="sa-marketing-tabbar">
             <button
                 type="button"
-                class="mc-tab"
+                class="sa-marketing-tab"
                 :class="{ active: tab === 'preview' }"
                 @click="$emit('update:tab', 'preview')"
             >
@@ -11,7 +11,7 @@
             </button>
             <button
                 type="button"
-                class="mc-tab"
+                class="sa-marketing-tab"
                 :class="{ active: tab === 'admin' }"
                 @click="$emit('update:tab', 'admin')"
             >
@@ -19,17 +19,17 @@
             </button>
             <button
                 type="button"
-                class="mc-tab"
+                class="sa-marketing-tab"
                 :class="{ active: tab === 'promos' }"
                 @click="$emit('update:tab', 'promos')"
             >
                 {{ msg.tabs.promos }}
-                <span v-if="activePromoCount > 0" class="mc-tab-count">
+                <span v-if="activePromoCount > 0" class="sa-marketing-tab-count">
                     {{ activePromoCount }}
                 </span>
             </button>
         </div>
-        <div class="mc-meta">
+        <div class="sa-marketing-meta">
             <span>catalogVersion</span>
             <code>{{ catalogVersion }}</code>
             <span>·</span>

package/src/pages-standard/plans-page/PlansPageToast.vue

@@ -1,5 +1,5 @@
 <template>
-    <transition name="pl-toast">
+    <transition name="sa-plans-toast">
         <div v-if="message" class="sa-plans__toast">
             <span class="sa-plans__toast-tick" aria-hidden="true">
                 <svg
@@ -55,14 +55,14 @@ defineProps<{
     place-items: center;
     flex: 0 0 auto;
 }
-.pl-toast-enter-active,
-.pl-toast-leave-active {
+.sa-plans-toast-enter-active,
+.sa-plans-toast-leave-active {
     transition:
         opacity 0.22s ease,
         transform 0.22s ease;
 }
-.pl-toast-enter-from,
-.pl-toast-leave-to {
+.sa-plans-toast-enter-from,
+.sa-plans-toast-leave-to {
     opacity: 0;
     transform: translate(-50%, 12px);
 }

package/src/pages-standard/sa-theme.css

@@ -37,18 +37,43 @@
 }
 
 /* ─────────────────────────────────────────────────────────────
- * Shared page chrome — header strip, stat pills, toolbar, card.
- * Pattern from the plan simulation; pages use it instead of creating their own
- * BEM variants, so the look stays consistent across the entire
- * SuperAdmin surface.
+ * Shared page chrome — page frame, header strip, section, stat pills, card.
+ *
+ * These classes are the styling half of the page shell. The structural half is
+ * the `AdminPage` / `AdminHero` / `AdminSection` components in
+ * `components/admin-page/`, and pages are expected to reach for those rather
+ * than write the markup by hand: a component with a required `title` prop
+ * cannot be half-adopted the way a class name can.
+ *
+ * The classes stay public and unprefixed by scoping on purpose, so a consumer
+ * app can restyle `.sa-page-head__title` from its own CSS without patching the
+ * platform.
  * ───────────────────────────────────────────────────────────── */
 
+/* Page frame — canvas, min-height and the page padding, in one place
+ * instead of once per page (see AdminPage). */
+.sa-page {
+    min-height: calc(100vh - 56px);
+    background: var(--sa-bg-app, #f1f5f9);
+    padding: 20px 28px 28px;
+}
+
+/* The hero reads as a banner rather than as the first paragraph of the page:
+ * a tinted, bordered block that separates "which page am I on" from the
+ * content below it. Tint and border come from the primary token, so an app
+ * that overrides `--sa-primary` re-tints the hero with it. */
 .sa-page-head {
+    /* Top-aligned, so the controls sit level with the title rather than
+     * drifting down with the subtitle's height. */
     display: flex;
-    align-items: flex-end;
+    align-items: flex-start;
     gap: 20px;
-    margin-bottom: 16px;
+    margin-bottom: 20px;
     flex-wrap: wrap;
+    padding: 13px 22px 15px;
+    border: 1px solid var(--sa-primary-border);
+    border-radius: 16px;
+    background: linear-gradient(135deg, var(--sa-primary-soft) 0%, var(--sa-primary-softer) 100%);
 }
 .sa-page-head__title {
     margin: 0;
@@ -56,11 +81,13 @@
     font-size: 22px;
     font-weight: 700;
     letter-spacing: -0.02em;
+    line-height: 1.25;
     color: var(--sa-heading);
 }
 .sa-page-head__sub {
-    margin: 3px 0 0;
+    margin: 1px 0 0;
     font-size: 12.5px;
+    line-height: 1.35;
     color: var(--sa-muted);
 }
 .sa-page-head__actions {
@@ -175,35 +202,64 @@
         0 2px 6px rgba(168, 85, 247, 0.1);
 }
 
-/* Toolbar (search + filter buttons + sort). */
-.sa-toolbar {
+/* Page body — everything below the hero (see AdminBody), including the
+ * loading and empty states the pages used to spell out one by one. */
+.sa-page-body__state {
+    padding: 32px 0;
+    color: var(--sa-muted);
     display: flex;
     align-items: center;
-    gap: 8px;
-    margin-bottom: 14px;
-    flex-wrap: wrap;
+    gap: 12px;
 }
-.sa-toolbar__search {
-    flex: 1;
-    min-width: 220px;
+.sa-page-body__state--empty {
+    font-size: 13px;
+}
+
+/* Rhythm only for sections sitting directly in the page flow. Deliberately a
+ * child selector: sections placed inside a grid or flex container get their
+ * spacing from that container, and a blanket margin would fight it. */
+.sa-page > .sa-section,
+.sa-page-body > .sa-section {
+    margin-bottom: 16px;
+}
+.sa-page > .sa-section:last-child,
+.sa-page-body > .sa-section:last-child {
+    margin-bottom: 0;
+}
+/* Section — a labelled block within a page (see AdminSection). Purely
+ * structural: it carries the heading scale and the rhythm between blocks, not
+ * a surface. A section that should read as a card adds `.sa-card` alongside. */
+.sa-section__head {
     display: flex;
     align-items: center;
-    gap: 9px;
-    background: var(--sa-bg-surface);
-    border: 1px solid var(--sa-border);
-    border-radius: 10px;
-    padding: 6px 12px;
+    gap: 10px;
+    margin-bottom: 12px;
 }
-.sa-toolbar__search input {
-    flex: 1;
-    border: 0;
-    outline: 0;
-    background: transparent;
-    font: 13px var(--sa-font-body);
-    color: var(--sa-body);
+.sa-section__title {
+    margin: 0;
+    font-family: var(--sa-font-head);
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: -0.005em;
+    color: var(--sa-heading);
 }
-.sa-toolbar__search input::placeholder {
-    color: #94a3b8;
+.sa-section__sub {
+    margin: 2px 0 0;
+    font-size: 12.5px;
+    color: var(--sa-muted);
+}
+.sa-section__actions {
+    margin-left: auto;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+/* Key-value grid — the layout `KvBlock` is meant to sit in. */
+.sa-kv-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
 }
 
 /* Generic card (cards in dashboard/detail sections). */

package/src/pages-standard/tenant-detail/TenantMasterData.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="sa-kv-grid">
+        <KvBlock :label="labels.plan" :value="data.subscription?.plan ?? EMPTY" />
+        <KvBlock :label="labels.status" :value="data.subscription?.status ?? EMPTY" />
+        <KvBlock :label="labels.pilot" :value="data.subscription?.isPilot ? yes : no" />
+        <KvBlock :label="labels.trialEnd" :value="formatDate(data.subscription?.trialEndsAt)" />
+        <KvBlock :label="labels.pilotEnd" :value="formatDate(data.subscription?.pilotEndsAt)" />
+        <KvBlock v-if="data.vatId" :label="labels.vatId" :value="data.vatId" />
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import KvBlock from '../../components/KvBlock.vue';
+import type { TenantDetailData, TenantMasterDataLabels } from './types.js';
+
+// The subscription facts of a tenant. Pure presentation: the page resolves the
+// labels and the date format, so this block has no i18n and no data access.
+defineProps<{
+    data: TenantDetailData;
+    labels: TenantMasterDataLabels;
+    formatDate: (value: string | null | undefined) => string;
+    yes: string;
+    no: string;
+}>();
+
+const EMPTY = '—';
+</script>

package/src/pages-standard/tenant-detail/TenantUsage.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="sa-kv-grid">
+        <KvBlock
+            v-for="(field, i) in fields"
+            :key="field.label + i"
+            :label="field.label"
+            :value="resolve(field)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import KvBlock from '../../components/KvBlock.vue';
+import type { TenantDetailData, VerbrauchField } from './types.js';
+
+// Usage counters. A field either names a key in `data.counts` or brings its own
+// getter, so a consumer can surface a number the platform knows nothing about.
+const props = defineProps<{
+    data: TenantDetailData;
+    fields: readonly VerbrauchField[];
+}>();
+
+const EMPTY = '—';
+
+function resolve(field: VerbrauchField): string {
+    if (field.getter) return String(field.getter(props.data));
+    if (!field.key) return EMPTY;
+    const value = props.data.counts?.[field.key];
+    return value === undefined || value === null ? '0' : String(value);
+}
+</script>

package/src/pages-standard/tenant-detail/TenantUsers.vue

@@ -0,0 +1,21 @@
+<template>
+    <q-table
+        flat
+        :rows="users"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        hide-pagination
+    />
+</template>
+
+<script setup lang="ts">
+import type { QTableColumn } from 'quasar';
+
+// The tenant's users. The column set comes from the page, which falls back to
+// the platform default when the consumer supplies none.
+defineProps<{
+    users: Array<Record<string, unknown> & { id: string }>;
+    columns: QTableColumn[];
+}>();
+</script>

package/src/pages-standard/tenant-detail/types.ts

@@ -0,0 +1,38 @@
+export interface TenantDetailData {
+    id: string;
+    slug: string;
+    name: string;
+    isActive: boolean;
+    vatId?: string | null;
+    subscription?: {
+        plan?: string | null;
+        status?: string | null;
+        isPilot?: boolean | null;
+        trialEndsAt?: string | null;
+        pilotEndsAt?: string | null;
+    } | null;
+    users?: Array<Record<string, unknown> & { id: string }>;
+    /** Freely selectable usage numbers — the page renders them via `verbrauchFields`. */
+    counts?: Record<string, number | string>;
+}
+
+export interface VerbrauchField {
+    label: string;
+    /** Lookup key in `data.counts`. */
+    key?: string;
+    /** Alternative: custom getter. Takes precedence over `key`. */
+    getter?: (data: TenantDetailData) => string | number;
+}
+
+/**
+ * The resolved labels for the master-data block. The page owns the i18n
+ * lookup and the per-label prop overrides; the block only renders them.
+ */
+export interface TenantMasterDataLabels {
+    plan: string;
+    status: string;
+    pilot: string;
+    trialEnd: string;
+    pilotEnd: string;
+    vatId: string;
+}

package/src/vue/use-mfa-prompt.ts

@@ -0,0 +1,72 @@
+import { ref, type Ref } from 'vue';
+
+/**
+ * Turns the MFA dialog into an awaitable step.
+ *
+ * A write flow that needs a second factor wants to read as one function:
+ * ask for the code, then call the API with it. What that needs is a promise
+ * the dialog resolves — and the plumbing for that (a visibility flag, an
+ * error slot, a description, and a resolver held between two event handlers)
+ * was spelled out identically on five standard pages.
+ *
+ * Cancelling resolves to `null` rather than rejecting: a user closing the
+ * dialog is an outcome, not an error, and `if (!code) return` reads better at
+ * the call site than a try/catch around the happy path.
+ */
+export interface MfaPrompt {
+    /** Bind to the dialog's `model-value`. */
+    readonly show: Ref<boolean>;
+    /** Bind to the dialog's `description`. */
+    readonly description: Ref<string>;
+    /** Bind to the dialog's `error`; set it to keep the dialog open on a failed code. */
+    readonly error: Ref<string>;
+    /** Resolves with the entered code, or `null` when the user cancels. */
+    prompt: (description: string) => Promise<string | null>;
+    /** Bind to the dialog's `confirm` event. */
+    onConfirm: (code: string) => void;
+    /** Bind to the dialog's `update:model-value` event. */
+    onVisibility: (open: boolean) => void;
+    /** Closes the dialog and cancels a pending prompt. */
+    close: () => void;
+}
+
+export function useMfaPrompt(): MfaPrompt {
+    const show = ref(false);
+    const description = ref('');
+    const error = ref('');
+    let pendingResolve: ((code: string | null) => void) | null = null;
+
+    function settle(code: string | null): void {
+        const resolve = pendingResolve;
+        pendingResolve = null;
+        resolve?.(code);
+    }
+
+    return {
+        show,
+        description,
+        error,
+        prompt(next: string): Promise<string | null> {
+            // A prompt opening while another is pending would strand the first
+            // caller's promise forever; cancel it rather than leak it.
+            settle(null);
+            description.value = next;
+            error.value = '';
+            show.value = true;
+            return new Promise((resolve) => {
+                pendingResolve = resolve;
+            });
+        },
+        onConfirm(code: string): void {
+            settle(code);
+        },
+        onVisibility(open: boolean): void {
+            show.value = open;
+            if (!open) settle(null);
+        },
+        close(): void {
+            show.value = false;
+            settle(null);
+        },
+    };
+}

package/src/pages-standard/bundles-page/BundlesHeader.vue

@@ -1,68 +0,0 @@
-<template>
-    <header class="sa-bundles__head">
-        <div>
-            <h1 class="sa-bundles__title">{{ msg.header.title }}</h1>
-            <p class="sa-bundles__sub">{{ msg.header.subtitle }}</p>
-        </div>
-        <div class="sa-bundles__head-actions">
-            <q-select
-                v-if="locales.length > 1"
-                :model-value="displayLocale"
-                :options="localeOptions"
-                outlined
-                dense
-                emit-value
-                map-options
-                class="sa-bundles__locale"
-                :label="msg.header.displayLocale"
-                @update:model-value="(value) => emit('update:displayLocale', String(value))"
-            >
-                <template #prepend><q-icon name="translate" size="18px" /></template>
-            </q-select>
-            <q-btn
-                unelevated
-                color="primary"
-                icon="add"
-                :label="msg.header.newBundle"
-                @click="emit('create')"
-            />
-            <q-btn flat icon="refresh" :loading="loading" @click="emit('refresh')">
-                <q-tooltip>{{ msg.header.reload }}</q-tooltip>
-            </q-btn>
-        </div>
-    </header>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
-
-// The language selector controls which locale feature/quota labels are resolved
-// on the create form and in the detail view (fallback locale → DE → key). The default is the
-// default locale (DE); further options come from the active project locales.
-
-const props = defineProps<{
-    loading: boolean;
-    displayLocale: string;
-    locales: string[];
-}>();
-
-const emit = defineEmits<{
-    create: [];
-    refresh: [];
-    'update:displayLocale': [locale: string];
-}>();
-
-const msg = useSaMessages('bundles');
-
-const localeOptions = computed(() =>
-    props.locales.map((locale) => ({ label: locale.toUpperCase(), value: locale })),
-);
-</script>
-
-<style scoped>
-.sa-bundles__locale {
-    min-width: 150px;
-}
-</style>