@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/vue/use-pagination.ts

@@ -0,0 +1,63 @@
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue';
+
+// Client-side paging for a list that is already fully loaded.
+//
+// Most admin lists fetch everything and filter in the browser; without this
+// they would each carry the same three lines of `slice()` plus the same
+// off-the-end guard. Lists that page on the server (see `useApiList`) bind
+// AdminPaginator to their own state instead and do not need this.
+
+/** Quasar's convention: 0 rows per page means no paging at all. */
+export const ALL_ROWS = 0;
+
+/** Starting page size for every list; AdminPaginator restores a stored one. */
+export const DEFAULT_ROWS_PER_PAGE = 10;
+
+/** The sizes a locally paged list offers, in order. */
+export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, ALL_ROWS] as const;
+
+/**
+ * The same without "all". A server-paged list cannot honour it: the admin API
+ * caps `pageSize` at 200 and falls back to 50 when it is omitted, so the
+ * option would claim to show everything while showing the first fifty.
+ */
+export const SERVER_PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;
+
+export interface UsePaginationResult<T> {
+    page: Ref<number>;
+    rowsPerPage: Ref<number>;
+    /** Total across all pages — what AdminPaginator counts with. */
+    total: ComputedRef<number>;
+    /** The slice to render. */
+    pagedRows: ComputedRef<T[]>;
+}
+
+export function usePagination<T>(
+    rows: Ref<readonly T[]> | ComputedRef<readonly T[]>,
+    initialRowsPerPage = DEFAULT_ROWS_PER_PAGE,
+): UsePaginationResult<T> {
+    const page = ref(1);
+    const rowsPerPage = ref(initialRowsPerPage);
+
+    const total = computed(() => rows.value.length);
+
+    const pageCount = computed(() =>
+        rowsPerPage.value === ALL_ROWS
+            ? 1
+            : Math.max(1, Math.ceil(total.value / rowsPerPage.value)),
+    );
+
+    // Filtering can shrink a list under the current page — without this the
+    // table would render an empty slice and look like it lost its rows.
+    watch(pageCount, (count) => {
+        if (page.value > count) page.value = count;
+    });
+
+    const pagedRows = computed(() => {
+        if (rowsPerPage.value === ALL_ROWS) return [...rows.value];
+        const start = (page.value - 1) * rowsPerPage.value;
+        return rows.value.slice(start, start + rowsPerPage.value);
+    });
+
+    return { page, rowsPerPage, total, pagedRows };
+}

package/src/vue/use-plans.ts

@@ -1,5 +1,5 @@
 // usePlans + usePlanVersions — Vue 3 composables for the SuperAdmin
-// plan management. SPEC_V2 §11.1 M6:
+// plan management.:
 //   Pack 1 → usePlans (root CRUD)
 //   Pack 2a → usePlanVersions (draft/publish lifecycle)
 
@@ -192,7 +192,6 @@ export function usePlans(options: UsePlansOptions): UsePlansResult {
 
 // =============================================================================
 // usePlanVersions — lifecycle operations for a specific plan ID
-// (SPEC_V2 §11.1 M6 Pack 2a).
 // =============================================================================
 
 export interface UsePlanVersionsOptions {

package/src/vue/use-sign-out.ts

@@ -0,0 +1,90 @@
+// Signing out, in one place.
+//
+// Both platform affordances that offer it — the layout header button and the
+// fail-closed error page — are mounted as bare route components in every
+// consumer we know of, which means neither an `onLogout` prop nor a `@logout`
+// listener reaches them. Their fallback therefore has to be the real thing.
+//
+// Navigating to `/login` on its own is not it. An app's `isAuthenticated()`
+// typically reads a token out of storage, so a session left behind means the
+// next navigation to `/admin` passes the guard again: the operator clicked
+// "sign out", saw the login form, and is still signed in.
+//
+// The adapter that knows how to start a session is the only thing that knows
+// how to end it, hence `loginAdapter.logout`.
+
+import { inject } from 'vue';
+import { useRouter } from 'vue-router';
+
+import {
+    SUPER_ADMIN_LOGIN_ADAPTER_KEY,
+    SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY,
+} from './super-admin-context.js';
+
+/** Where `createAdminRoutes()` registers the login page. */
+export const DEFAULT_LOGIN_PATH = '/login';
+
+export interface UseSignOutOptions {
+    /** Route to land on afterwards. Default `/login`. */
+    loginPath?: string;
+}
+
+/**
+ * Returns the platform's default sign-out: end the session, then go to login.
+ *
+ * Must be called during component setup — it injects the login adapter and
+ * uses the router.
+ */
+export function useSignOut(options: UseSignOutOptions = {}): () => Promise<void> {
+    const router = useRouter();
+    const adapter = inject(SUPER_ADMIN_LOGIN_ADAPTER_KEY, undefined);
+    const clearManifestCache = inject(SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY, undefined);
+
+    return async function signOut(): Promise<void> {
+        if (adapter?.logout) {
+            try {
+                await adapter.logout();
+            } catch (err) {
+                // Navigate anyway. A rejected `logout()` — a server-side
+                // revocation that failed, say — must not strand the operator on
+                // the protected page they just asked to leave, and both callers
+                // discard this promise, so an escaping rejection would be
+                // invisible. Leaving is also the safer half: the adapter may
+                // well have cleared the local token before the request failed.
+                console.error(
+                    '[SaaSiCat] Sign-out failed while ending the session — navigating to the login page anyway. ' +
+                        'The session may still be valid on the server.',
+                    err,
+                );
+            }
+        } else {
+            // Loud rather than silent: the button looks like it worked either
+            // way, so the only place this can surface is the console.
+            console.warn(
+                '[SaaSiCat] Sign-out only navigated to the login page — the session was left ' +
+                    'intact, so the next navigation to /admin will pass the guard again. Add ' +
+                    '`logout()` to the `loginAdapter` you pass to createSuperAdminApp().',
+            );
+        }
+
+        // Unconditionally, and after the adapter either way: the manifest store
+        // stays `loaded` across a sign-out, so without this the next
+        // `ensureLoaded()` returns instantly and hands the *next* operator the
+        // previous session's manifest — their navigation, their capabilities,
+        // their project. Only a full page reload would have cleared it, and
+        // signing out does not force one.
+        if (clearManifestCache) {
+            try {
+                await clearManifestCache();
+            } catch (err) {
+                console.error(
+                    '[SaaSiCat] Sign-out could not discard the cached manifest. The next login in ' +
+                        'this tab may see the previous session’s navigation until the page reloads.',
+                    err,
+                );
+            }
+        }
+
+        await router.replace(options.loginPath ?? DEFAULT_LOGIN_PATH);
+    };
+}

package/src/vue/use-tenant-billing.ts

@@ -56,7 +56,7 @@ export interface UsageSnapshotShape {
     };
     usage: Record<string, number>;
     /**
-     * P11.4 (METAMODELL §17a): Read-only package snapshot from the
+     * P11.4: Read-only package snapshot from the
      * original CheckoutOffer. `null` for subscriptions without a
      * CheckoutOffer origin. The JSON structure matches the Offer
      * schema; the UI can read `bundleVersionIds`, `currency`,

package/src/vue/use-tenant-manifest.ts

@@ -5,7 +5,6 @@
 // backend renders per Tenant. This lets the app UI build the navigation
 // declaratively from the Manifest instead of filtering it itself.
 //
-// Spec: handoff/superadmin/QUICKSTART_SIMPLIFICATIONS.md §P14.
 
 import { ref, type Ref } from 'vue';
 import { defaultHttpClient, type HttpClient } from '../client/types.js';

package/src/components/KpiCard.vue

@@ -1,53 +0,0 @@
-<template>
-    <div class="kpi" :style="{ borderTopColor: accent }">
-        <div class="kpi__head">
-            <q-icon :name="icon" size="20px" :style="{ color: accent }" />
-            <span class="kpi__label">{{ label }}</span>
-        </div>
-        <div class="kpi__value">{{ value }}</div>
-        <slot name="footer" />
-    </div>
-</template>
-
-<script setup lang="ts">
-// Generic KPI card with icon, label, value and optional footer slot.
-// Accent color via `accent` prop (CSS color).
-
-defineProps<{
-    label: string;
-    value: string | number;
-    icon: string;
-    accent?: string;
-}>();
-</script>
-
-<style scoped>
-.kpi {
-    background: #fff;
-    border: 1px solid #e2e8f0;
-    border-top-width: 3px;
-    border-radius: 14px;
-    padding: 16px 18px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-.kpi__head {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.kpi__label {
-    font-size: 11px;
-    color: #64748b;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-weight: 700;
-}
-.kpi__value {
-    font-size: 24px;
-    font-weight: 800;
-    color: #0f172a;
-    line-height: 1.1;
-}
-</style>