@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/components/plan-version-editor/PlanVersionEditorHeader.vue

@@ -1,84 +1,52 @@
 <template>
-    <header class="pve-bar">
-        <div class="pve-bar-left">
-            <div class="pve-titlechip">
-                <span class="pve-titlechip-kicker">{{ msg.header.planKicker }}</span>
+    <AdminHero :title="title">
+        <template #before-title>
+            <span class="pve-kicker">
+                {{ msg.header.planKicker }}
                 <span class="pve-chip pve-chip--plan">{{ planKey }}</span>
-            </div>
-            <h2 class="pve-title">{{ title }}</h2>
-            <span class="pve-chip pve-chip--draft pve-chip--dot">{{ msg.header.draftChip }}</span>
-            <span class="pve-bar-note">
-                {{ msg.header.supersedeNoteBefore }}
-                <code class="pve-mono">{{ predecessorValidUntilHint }}</code>
-                {{ msg.header.supersedeNoteAfter }}
             </span>
-        </div>
-        <div class="pve-bar-right">
+        </template>
+        <template #subtitle>
+            <span class="pve-chip pve-chip--draft pve-chip--dot">{{ msg.header.draftChip }}</span>
+            {{ msg.header.supersedeNoteBefore }}
+            <code class="pve-mono">{{ predecessorValidUntilHint }}</code>
+            {{ msg.header.supersedeNoteAfter }}
+        </template>
+        <template #actions>
             <button
-                class="pve-btn"
+                class="sa-btn"
                 type="button"
                 :disabled="!hasPredecessor"
                 :title="hasPredecessor ? undefined : msg.header.noPredecessorHint"
                 @click="$emit('showDiff')"
             >
-                <span class="pve-ico" aria-hidden="true">
-                    <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
-                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                        <circle cx="12" cy="12" r="3" />
-                    </svg>
-                </span>
+                <q-icon name="visibility" size="16px" />
                 <span>{{ msg.header.diffButton }}</span>
             </button>
-            <button class="pve-btn" type="button" @click="$emit('cancel')">
-                <span class="pve-ico" style="transform: rotate(180deg)" aria-hidden="true">
-                    <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
-                        <path d="M5 12h14M13 5l7 7-7 7" />
-                    </svg>
-                </span>
+            <button class="sa-btn" type="button" @click="$emit('cancel')">
+                <q-icon name="arrow_back" size="16px" />
                 <span>{{ common.back }}</span>
             </button>
             <button
-                class="pve-btn pve-btn--primary"
+                class="sa-btn sa-btn--primary"
                 type="button"
                 :disabled="!canSave"
                 @click="$emit('save')"
             >
                 <span>{{ msg.header.saveButton }}</span>
-                <span class="pve-ico" aria-hidden="true">
-                    <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
-                        <path d="M5 12h14M13 5l7 7-7 7" />
-                    </svg>
-                </span>
+                <q-icon name="arrow_forward" size="16px" />
             </button>
-        </div>
-    </header>
+        </template>
+    </AdminHero>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+// The editor takes over the page hero while it is open: its actions depend on
+// the draft's validity and on the diff dialog, both of which live in this view.
+import AdminHero from '../admin-page/AdminHero.vue';
 
 const props = defineProps<{
     planKey: string;

package/src/index.ts

@@ -39,6 +39,7 @@ export * from './vue/use-super-admin-i18n.js';
 // ---------------------------------------------------------------------------
 export * from './vue/create-admin-routes.js';
 export * from './vue/use-api-list.js';
+export * from './vue/use-pagination.js';
 export * from './vue/use-tenants.js';
 export * from './vue/use-audit-entries.js';
 export * from './vue/use-entitlement.js';

package/src/pages-standard/AdminLayout.vue

@@ -1,5 +1,5 @@
 <template>
-    <q-layout view="lHh Lpr lFf">
+    <q-layout view="lHh Lpr lFf" class="sa-admin-layout">
         <div v-if="isProduction" class="sa-admin-banner sa-admin-banner--prod">
             <q-icon name="warning" size="14px" />
             <strong>PRODUCTION</strong> — {{ msg.header.productionWarning }}
@@ -24,7 +24,7 @@
                         <div class="text-body2 text-weight-semibold">{{ userName }}</div>
                         <div class="text-caption sa-admin-user__email">{{ userEmail }}</div>
                     </div>
-                    <q-btn flat round dense icon="logout" size="sm" @click="emit('logout')">
+                    <q-btn flat round dense icon="logout" size="sm" @click="onLogoutClick">
                         <q-tooltip>{{ msg.header.logout }}</q-tooltip>
                     </q-btn>
                 </div>
@@ -86,21 +86,24 @@
         </q-drawer>
 
         <q-page-container>
-            <div :class="['sa-admin-content', { 'sa-admin-content--fullbleed': isFullbleed }]">
+            <!-- The document's only <main>. Pages must not add one of their
+                 own, and must not use QPage, which renders <main> itself. -->
+            <main :class="['sa-admin-content', { 'sa-admin-content--fullbleed': isFullbleed }]">
                 <router-view />
-            </div>
+            </main>
         </q-page-container>
     </q-layout>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, getCurrentInstance } from 'vue';
 import { useRoute } from 'vue-router';
 import type { AdminManifest, StandardPageKey } from '@saasicat/types';
 import { buildRoutes, buildSidebar, defaultSectionOrder } from '../client/nav-builder.js';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import { SUPER_ADMIN_BRAND_KEY, SUPER_ADMIN_MANIFEST_KEY } from '../vue/super-admin-context.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
+import { useSignOut } from '../vue/use-sign-out.js';
 import { ADMIN_UI_VERSION } from '../client/version.js';
 
 // SuperAdmin layout — universal platform shell for all consumer apps.
@@ -187,6 +190,29 @@ const emit = defineEmits<{
     (e: 'logout'): void;
 }>();
 
+const signOut = useSignOut();
+const instance = getCurrentInstance();
+
+/**
+ * Signs out, and only emits instead when the app is actually listening.
+ *
+ * The layout is mounted as a plain route record in every consumer we have
+ * (`{ path: '/admin', component: AdminLayout }`), and a route record attaches
+ * no listeners — so `emit('logout')` alone made the header's sign-out button
+ * do nothing at all. Apps that pass `@logout` keep full control.
+ */
+function onLogoutClick(): void | Promise<void> {
+    // Both spellings: `@logout` lands on `onLogout`, `@logout.once` on
+    // `onLogoutOnce`. Checking only the first would run the platform default
+    // and never emit — silently ignoring a listener the consumer did attach.
+    const listeners = instance?.vnode.props ?? {};
+    if (listeners.onLogout || listeners.onLogoutOnce) {
+        emit('logout');
+        return;
+    }
+    return signOut();
+}
+
 const route = useRoute();
 const msg = useSaMessages('shell');
 const { messages } = useSuperAdminI18n();
@@ -293,7 +319,7 @@ const currentPageTitle = computed(() => {
 }
 
 .sa-admin-header {
-    background: var(--sa-admin-header-bg, linear-gradient(90deg, #0f172a, #1e293b));
+    background: var(--sa-admin-header-bg, linear-gradient(90deg, var(--sa-heading), #1e293b));
     color: var(--sa-admin-header-fg, #fff);
 }
 .sa-admin-header__sub {
@@ -304,7 +330,7 @@ const currentPageTitle = computed(() => {
 
 .sa-admin-badge {
     background: var(--sa-admin-badge-bg, #f59e0b);
-    color: var(--sa-admin-badge-fg, #0f172a);
+    color: var(--sa-admin-badge-fg, var(--sa-heading));
     font-weight: 800;
     letter-spacing: 0.08em;
     font-size: 10px;
@@ -331,7 +357,7 @@ const currentPageTitle = computed(() => {
 .sa-admin-drawer :deep(.q-drawer__content),
 .sa-admin-drawer__stack {
     background: var(--sa-admin-drawer-bg, #0b1220);
-    color: var(--sa-admin-drawer-fg, #f1f5f9);
+    color: var(--sa-admin-drawer-fg, var(--sa-border-soft));
 }
 .sa-admin-drawer__stack {
     display: flex;
@@ -351,7 +377,7 @@ const currentPageTitle = computed(() => {
     height: 36px;
     border-radius: 10px;
     background: var(--sa-admin-drawer-logo-bg, linear-gradient(135deg, #f59e0b, #d97706));
-    color: var(--sa-admin-drawer-logo-fg, #0f172a);
+    color: var(--sa-admin-drawer-logo-fg, var(--sa-heading));
     font-weight: 800;
     display: flex;
     align-items: center;
@@ -376,7 +402,7 @@ const currentPageTitle = computed(() => {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 0.12em;
-    color: var(--sa-admin-drawer-section-fg, #64748b);
+    color: var(--sa-admin-drawer-section-fg, var(--sa-muted));
     padding: 14px 18px 6px;
     font-weight: 600;
 }
@@ -394,7 +420,7 @@ const currentPageTitle = computed(() => {
     padding-right: 8px;
 }
 .sa-admin-drawer__list :deep(.q-item .q-icon) {
-    color: #e2e8f0;
+    color: var(--sa-border);
 }
 .sa-admin-drawer__list :deep(.q-item:hover) {
     background: var(--sa-admin-drawer-hover-bg, rgba(245, 158, 11, 0.15));
@@ -423,7 +449,7 @@ const currentPageTitle = computed(() => {
     align-items: center;
     gap: 6px;
     margin-top: 6px;
-    color: #e2e8f0;
+    color: var(--sa-border);
     text-decoration: none;
 }
 .sa-admin-drawer__doc:hover {

package/src/pages-standard/AdminManifestErrorPage.vue

@@ -11,8 +11,8 @@
                     <strong>{{ msg.manifestError.detailLabel }}</strong> {{ errorMessage }}
                 </p>
                 <div class="sa-manifest-error__actions">
-                    <q-btn unelevated color="primary" :label="common.reload" @click="onRetry" />
-                    <q-btn flat :label="msg.header.logout" @click="onLogout" />
+                    <q-btn unelevated color="primary" :label="common.reload" @click="retry" />
+                    <q-btn flat :label="msg.header.logout" @click="logout" />
                 </div>
             </q-card-section>
         </q-card>
@@ -20,21 +20,91 @@
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue';
+import { useRouter } from 'vue-router';
 import { useSaMessages } from '../vue/use-super-admin-i18n.js';
+import { useSignOut } from '../vue/use-sign-out.js';
+import { SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY } from '../vue/super-admin-context.js';
 
 // Platform standard error page for `manifestGuard.errorRoute`.
-// Consumers pass `onRetry`/`onLogout` in as callbacks and decide
-// themselves what happens (e.g. manifestStore.clearCache() + ensureLoaded,
-// authStore.logout, router.replace).
+//
+// This page is mounted BY THE ROUTER (`createAdminRoutes({ adminErrorPage })`),
+// and a route record passes no props. Every prop here must therefore be
+// optional with a default that works standalone — a required prop would be
+// unsatisfiable by construction, and its two buttons would call `undefined`
+// at the exact moment the app is already in trouble.
+//
+// Apps that want app-specific behaviour (clear the manifest cache, call
+// authStore.logout, route somewhere else) mount the page themselves with
+// `props:` on the route record and override the callbacks.
 
 const msg = useSaMessages('shell');
 const common = useSaMessages('common');
+const router = useRouter();
 
-defineProps<{
+const props = defineProps<{
     errorMessage?: string | null;
-    onRetry: () => Promise<void> | void;
-    onLogout: () => void;
+    /** Default: fresh boot into `retryPath`, which re-runs the manifest guard. */
+    onRetry?: () => Promise<void> | void;
+    /** Default: navigate to the login route `createAdminRoutes` registers. */
+    onLogout?: () => void | Promise<void>;
+    /** Login path for the default `onLogout`. */
+    loginPath?: string;
+    /** Guarded route the default `onRetry` boots into. */
+    retryPath?: string;
 }>();
+
+const signOut = useSignOut({ loginPath: props.loginPath });
+
+// Provided by the shell when the app passes `manifestGuard.clearCache`. The
+// page is route-mounted, so injection is the only route in.
+const clearManifestCache = inject(SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY, undefined);
+
+// Both handlers RETURN their promise rather than discarding it with `void`.
+// Vue's event invoker forwards a returned rejection to the app's error handler;
+// a dropped one becomes an unhandled rejection instead — and this is the page
+// that renders when things are already going wrong, so a consumer's failing
+// `onRetry` would vanish exactly where it matters most.
+function retry(): void | Promise<void> {
+    if (props.onRetry) return props.onRetry();
+    return bootIntoGuardedRoute();
+}
+
+/**
+ * Discards the cached manifest, then boots into a route the guard protects.
+ *
+ * Two things have to happen, and each covers a failure the other does not:
+ *
+ * The target must be GUARDED. `createAdminRoutes` registers `/admin-error` as
+ * `meta.public` — it has to be, or the guard would redirect to itself forever
+ * — and the guard returns before it ever reaches `ensureLoaded()` on a public
+ * route. Reloading in place therefore re-renders the same error even after the
+ * backend has recovered.
+ *
+ * And the cache must go first. The loader keeps an ETag in storage, which a
+ * full document load does not touch. Its own documented failure — "server
+ * returned 304 but the cache body is missing" — would otherwise repeat exactly:
+ * same `If-None-Match`, same 304, same missing body, straight back here.
+ *
+ * `router.resolve` rather than a bare path so an app served under a base href
+ * lands inside its own app and not at the domain root.
+ */
+async function bootIntoGuardedRoute(): Promise<void> {
+    if (clearManifestCache) {
+        try {
+            await clearManifestCache();
+        } catch (err) {
+            // Retrying with a stale cache is still better than not retrying.
+            console.warn('[SaaSiCat] Clearing the manifest cache failed before retry:', err);
+        }
+    }
+    window.location.assign(router.resolve(props.retryPath ?? '/admin').href);
+}
+
+function logout(): void | Promise<void> {
+    if (props.onLogout) return props.onLogout();
+    return signOut();
+}
 </script>
 
 <style scoped>
@@ -59,7 +129,7 @@ defineProps<{
 .sa-manifest-error__lead,
 .sa-manifest-error__detail {
     margin: 0 0 12px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     line-height: 1.6;
 }
 .sa-manifest-error__detail {

package/src/pages-standard/AuditPage.vue

@@ -1,64 +1,56 @@
 <template>
-    <div class="sa-audit">
-        <header class="sa-audit__head">
-            <div>
-                <h1 class="sa-audit__title">{{ msg.title }}</h1>
-                <p class="sa-audit__sub">
-                    {{ formatMessage(msg.subtitle, { count: rows.length }) }}
-                </p>
-            </div>
-            <q-btn
-                unelevated
-                color="primary"
-                icon="refresh"
-                :label="msg.filterButton"
-                @click="reload"
-            />
-        </header>
-
-        <div class="sa-audit__body">
-            <div class="sa-audit__filter">
-                <q-input
-                    v-model="filter.actor"
-                    outlined
-                    dense
-                    :label="msg.filters.actor"
-                    clearable
-                />
-                <q-input
-                    v-model="filter.action"
-                    outlined
-                    dense
-                    :label="msg.filters.action"
-                    clearable
-                />
-                <q-input
-                    v-model="filter.entity"
-                    outlined
-                    dense
-                    :label="msg.filters.entity"
-                    clearable
-                />
-                <q-input
-                    v-model="filter.since"
-                    outlined
-                    dense
-                    type="date"
-                    :label="msg.filters.since"
-                    clearable
-                />
-            </div>
-
-            <div class="sa-audit__card">
-                <q-table
-                    flat
-                    :rows="rows"
-                    :columns="columns"
-                    row-key="id"
-                    :pagination="{ rowsPerPage: 0 }"
-                    :loading="loading"
-                    hide-pagination
-                >
+    <AdminPage class="sa-audit">
+        <AdminHero
+            :title="msg.title"
+            :subtitle="formatMessage(msg.subtitle, { count: rows.length })"
+        >
+            <template #actions>
+                <AdminRefreshBtn :loading="loading" @refresh="reload" />
+            </template>
+        </AdminHero>
+
+        <AdminBody>
+            <AdminSection class="sa-audit__card">
+                <AdminFilters class="q-mb-lg">
+                    <q-input
+                        v-model="filter.actor"
+                        outlined
+                        dense
+                        :label="msg.filters.actor"
+                        clearable
+                        debounce="250"
+                        @update:model-value="reload"
+                    />
+                    <q-input
+                        v-model="filter.action"
+                        outlined
+                        dense
+                        :label="msg.filters.action"
+                        clearable
+                        debounce="250"
+                        @update:model-value="reload"
+                    />
+                    <q-input
+                        v-model="filter.entity"
+                        outlined
+                        dense
+                        :label="msg.filters.entity"
+                        clearable
+                        debounce="250"
+                        @update:model-value="reload"
+                    />
+                    <q-input
+                        v-model="filter.since"
+                        outlined
+                        dense
+                        type="date"
+                        :label="msg.filters.since"
+                        clearable
+                        @update:model-value="reload"
+                    />
+                </AdminFilters>
+
+                <AdminTable :rows="rows" :columns="columns" :loading="loading" storage-key="audit">
                     <template #body-cell-changes="{ row }">
                         <q-td>
                             <q-btn flat dense icon="code" color="primary" @click="openDetail(row)">
@@ -66,9 +58,9 @@
                             </q-btn>
                         </q-td>
                     </template>
-                </q-table>
-            </div>
-        </div>
+                </AdminTable>
+            </AdminSection>
+        </AdminBody>
 
         <q-dialog v-model="detailOpen">
             <q-card style="min-width: 480px; max-width: 96vw">
@@ -89,11 +81,18 @@
                 </q-card-actions>
             </q-card>
         </q-dialog>
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
+import AdminTable from '../components/admin-page/AdminTable.vue';
 import { computed, onMounted, reactive, ref } from 'vue';
+import AdminRefreshBtn from '../components/admin-page/AdminRefreshBtn.vue';
+import AdminBody from '../components/admin-page/AdminBody.vue';
+import AdminFilters from '../components/admin-page/AdminFilters.vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
@@ -206,52 +205,9 @@ function formatTs(iso: string | null | undefined): string {
 </script>
 
 <style scoped>
-.sa-audit {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-}
-.sa-audit__head {
-    padding: 20px 28px 8px;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-}
-.sa-audit__title {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 22px;
-    color: var(--sa-heading, #0f172a);
-}
-.sa-audit__sub {
-    margin: 4px 0 0;
-    color: var(--sa-muted-dark, #475569);
-    font-size: 13.5px;
-}
-.sa-audit__body {
-    padding: 12px 28px 28px;
-}
-.sa-audit__filter {
-    display: flex;
-    gap: 10px;
-    margin-bottom: 12px;
-    flex-wrap: wrap;
-}
-.sa-audit__filter > * {
-    flex: 1;
-    min-width: 180px;
-}
-.sa-audit__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-    padding: 8px 0;
-}
 .sa-audit__kv {
-    background: #f8fafc;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    background: var(--sa-bg-surface-2);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 8px;
     padding: 12px;
     font-size: 12px;