@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/components/admin-page/AdminTable.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class="sa-table">
+        <q-table
+            v-model:pagination="pagination"
+            v-bind="$attrs"
+            flat
+            hide-pagination
+            :rows="rows"
+            :columns="allColumns"
+            :row-key="rowKey"
+            :loading="loading"
+            :rows-number="serverSide ? total : undefined"
+        >
+            <!-- Cell and header slots stay the page's business; only the
+                 actions column is ours. -->
+            <template v-for="name in passedSlots" #[name]="slotProps" :key="name">
+                <slot :name="name" v-bind="slotProps ?? {}" />
+            </template>
+
+            <template v-if="$slots['row-actions']" #body-cell-actions="cell">
+                <q-td :props="cell" class="sa-table__actions">
+                    <slot name="row-actions" :row="cell.row" />
+                </q-td>
+            </template>
+
+            <template #no-data>
+                <slot name="no-data">
+                    <span class="sa-table__empty">{{ emptyText ?? common.noData }}</span>
+                </slot>
+            </template>
+        </q-table>
+
+        <div class="sa-table__foot">
+            <AdminPaginator
+                :page="pagerPage"
+                :rows-per-page="pagerRowsPerPage"
+                :total="serverSide ? total : rows.length"
+                :storage-key="storageKey"
+                :page-sizes="offeredPageSizes"
+                @update:page="onPageChange"
+                @update:rows-per-page="onRowsPerPageChange"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+// Attributes and listeners belong on the table, not on the wrapper: a page
+// that binds `@row-click` means the rows, and silently dropping it took the
+// email history's detail view with it.
+export default { inheritAttrs: false };
+</script>
+
+<script setup lang="ts">
+import { computed, ref, useSlots, watch } from 'vue';
+import type { QTableColumn } from 'quasar';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+import {
+    ALL_ROWS,
+    DEFAULT_ROWS_PER_PAGE,
+    PAGE_SIZE_OPTIONS,
+    SERVER_PAGE_SIZE_OPTIONS,
+} from '../../vue/use-pagination.js';
+import AdminPaginator from './AdminPaginator.vue';
+
+// Every list in the admin. Nine pages used to reach for `q-table` directly and
+// agreed on nothing: what a header looks like, where actions sit, whether
+// there was a pager at all.
+//
+// Sorting and paging live together here on purpose. A page that sliced its own
+// rows and handed the slice to a table would have that table sort the slice —
+// so "sort by name" would order the ten rows that happened to be on screen,
+// not the list. Here QTable holds every row and does both, in that order.
+//
+// The actions column is added by this component rather than declared by the
+// page: it is always last, always right-aligned, and it only exists when a
+// page fills `row-actions`.
+
+const ACTIONS_COLUMN = 'actions';
+/** Handled here, so they must not be forwarded to QTable as-is. */
+const OWN_SLOTS = new Set(['row-actions', 'no-data']);
+
+const props = withDefaults(
+    defineProps<{
+        rows: readonly Record<string, unknown>[];
+        columns: QTableColumn[];
+        rowKey?: string;
+        loading?: boolean;
+        emptyText?: string;
+        /** Remembers the page size per list; omit to keep it for the visit. */
+        storageKey?: string;
+        /**
+         * The rows are one server page already. QTable then renders them as
+         * given instead of slicing again, and the page owns page and size.
+         */
+        serverSide?: boolean;
+        page?: number;
+        rowsPerPage?: number;
+        /** Rows across all pages. Required with `serverSide`. */
+        total?: number;
+    }>(),
+    { rowKey: 'id', loading: false, serverSide: false, total: 0 },
+);
+
+const emit = defineEmits<{
+    (e: 'update:page', page: number): void;
+    (e: 'update:rowsPerPage', rows: number): void;
+}>();
+
+const slots = useSlots();
+const common = useSaMessages('common');
+
+const passedSlots = computed(() => Object.keys(slots).filter((name) => !OWN_SLOTS.has(name)));
+
+const allColumns = computed<QTableColumn[]>(() =>
+    slots['row-actions']
+        ? [
+              ...props.columns,
+              { name: ACTIONS_COLUMN, label: '', field: ACTIONS_COLUMN, align: 'right' },
+          ]
+        : props.columns,
+);
+
+// QTable's own pagination object carries the sort as well as the page, which
+// is why it is one ref rather than two props: `sortBy` and `descending` are
+// nobody else's business, while page and size belong to the pager.
+//
+// A server-paged list is handed exactly one page of rows, so QTable must not
+// page on top of that — it would hide rows the server already narrowed to.
+// There, `rowsPerPage: 0` means "render what you were given" and the real size
+// lives with the page.
+const pagination = ref({
+    page: props.serverSide ? (props.page ?? 1) : 1,
+    rowsPerPage: props.serverSide ? ALL_ROWS : DEFAULT_ROWS_PER_PAGE,
+    sortBy: null as string | null,
+    descending: false,
+});
+
+/** What the pager shows: the server's size, or the one QTable slices by. */
+const pagerRowsPerPage = computed(() =>
+    props.serverSide ? (props.rowsPerPage ?? DEFAULT_ROWS_PER_PAGE) : pagination.value.rowsPerPage,
+);
+
+const offeredPageSizes = computed(() =>
+    props.serverSide ? [...SERVER_PAGE_SIZE_OPTIONS] : [...PAGE_SIZE_OPTIONS],
+);
+
+const pagerPage = computed(() => (props.serverSide ? (props.page ?? 1) : pagination.value.page));
+
+// Filtering can shrink a list under the current page; without this the table
+// renders an empty slice and looks like it lost its rows.
+const pageCount = computed(() => {
+    const size = pagination.value.rowsPerPage;
+    if (props.serverSide || size === ALL_ROWS) return 1;
+    return Math.max(1, Math.ceil(props.rows.length / size));
+});
+
+watch(pageCount, (count) => {
+    if (pagination.value.page > count) pagination.value.page = count;
+});
+
+function onPageChange(page: number): void {
+    if (!props.serverSide) pagination.value.page = page;
+    emit('update:page', page);
+}
+
+function onRowsPerPageChange(rows: number): void {
+    if (!props.serverSide) {
+        pagination.value.rowsPerPage = rows;
+        pagination.value.page = 1;
+    }
+    emit('update:rowsPerPage', rows);
+    emit('update:page', 1);
+}
+</script>

package/src/components/bundle-editor/BundleCreatePanel.vue

@@ -503,18 +503,18 @@ async function submit(): Promise<void> {
     justify-content: space-between;
     gap: 16px;
     padding: 18px 22px 12px;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--sa-border);
 }
 .bcp-title {
     font-size: 18px;
     font-weight: 700;
-    color: #0f172a;
+    color: var(--sa-heading);
     letter-spacing: -0.01em;
 }
 .bcp-sub {
     margin-top: 4px;
     font-size: 12.5px;
-    color: #64748b;
+    color: var(--sa-muted);
     max-width: 580px;
     line-height: 1.5;
 }
@@ -522,13 +522,13 @@ async function submit(): Promise<void> {
     background: transparent;
     border: 0;
     cursor: pointer;
-    color: #64748b;
+    color: var(--sa-muted);
     padding: 4px;
     border-radius: 4px;
 }
 .bcp-close:hover {
-    background: #f1f5f9;
-    color: #0f172a;
+    background: var(--sa-border-soft);
+    color: var(--sa-heading);
 }
 .bcp-body {
     padding: 16px 22px;
@@ -552,7 +552,7 @@ async function submit(): Promise<void> {
     width: 24px;
     height: 24px;
     border-radius: 999px;
-    background: #2563eb;
+    background: var(--sa-primary);
     color: #fff;
     font:
         700 12px 'JetBrains Mono',
@@ -563,11 +563,11 @@ async function submit(): Promise<void> {
 .bcp-section-title {
     font-size: 14px;
     font-weight: 700;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .bcp-section-sub {
     font-size: 12px;
-    color: #64748b;
+    color: var(--sa-muted);
     margin-top: 2px;
     line-height: 1.4;
 }
@@ -587,11 +587,11 @@ async function submit(): Promise<void> {
 .bcp-field-label {
     font-size: 11.5px;
     font-weight: 600;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .bcp-field-hint {
     font-size: 10.5px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-weight: 500;
 }
 .bcp-input {
@@ -600,7 +600,7 @@ async function submit(): Promise<void> {
     border-radius: 6px;
     font-family: inherit;
     font-size: 13px;
-    color: #0f172a;
+    color: var(--sa-heading);
     background: #fff;
 }
 .bcp-input--mono {
@@ -628,9 +628,9 @@ async function submit(): Promise<void> {
     align-items: center;
     padding: 0 10px;
     font-size: 11.5px;
-    color: #64748b;
-    background: #f8fafc;
-    border-left: 1px solid #e2e8f0;
+    color: var(--sa-muted);
+    background: var(--sa-bg-surface-2);
+    border-left: 1px solid var(--sa-border);
     border-radius: 0 6px 6px 0;
 }
 .bcp-error-inline {
@@ -650,8 +650,8 @@ async function submit(): Promise<void> {
     align-items: center;
     gap: 10px;
     padding: 12px 22px;
-    border-top: 1px solid #e5e7eb;
-    background: #f8fafc;
+    border-top: 1px solid var(--sa-border);
+    background: var(--sa-bg-surface-2);
     border-radius: 0 0 12px 12px;
 }
 .bcp-foot-hint {
@@ -660,7 +660,7 @@ async function submit(): Promise<void> {
     align-items: center;
     gap: 6px;
     font-size: 12px;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .bcp-foot-hint--warn {
     color: #b91c1c;
@@ -674,21 +674,21 @@ async function submit(): Promise<void> {
     cursor: pointer;
     font-size: 12.5px;
     font-family: inherit;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .bcp-btn:hover:not(:disabled) {
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
 }
 .bcp-btn:disabled {
     cursor: not-allowed;
     opacity: 0.5;
 }
 .bcp-btn--primary {
-    background: #2563eb;
-    border-color: #2563eb;
+    background: var(--sa-primary);
+    border-color: var(--sa-primary);
     color: #fff;
 }
 .bcp-btn--primary:hover:not(:disabled) {
-    background: #1d4ed8;
+    background: var(--sa-primary-strong);
 }
 </style>

package/src/components/bundle-editor/BundleFeaturesEditor.vue

@@ -155,7 +155,7 @@ function onToggle(featureKey: string): void {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: #64748b;
+    color: var(--sa-muted);
 }
 .bd-features-row {
     display: flex;
@@ -168,19 +168,19 @@ function onToggle(featureKey: string): void {
     gap: 6px;
     padding: 6px 10px;
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 999px;
     cursor: pointer;
     font-family: inherit;
     font-size: 12px;
-    color: #0f172a;
+    color: var(--sa-heading);
     transition:
         background 0.12s,
         border-color 0.12s,
         color 0.12s;
 }
 .bd-feature-pill:hover:not(:disabled) {
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
     border-color: #cbd5e1;
 }
 .bd-feature-pill.on {
@@ -204,18 +204,18 @@ function onToggle(featureKey: string): void {
         600 10px 'JetBrains Mono',
         ui-monospace,
         monospace;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     margin-left: 4px;
 }
 .bd-feature-pill.on .bd-feature-key {
-    color: #2563eb;
+    color: var(--sa-primary);
 }
 .bd-feature-pill.overlap .bd-feature-key {
     color: #b91c1c;
 }
 .bd-features-empty {
     padding: 12px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-style: italic;
     font-size: 12.5px;
 }

package/src/components/bundle-editor/BundlePlanCompatPicker.vue

@@ -183,7 +183,7 @@ function onToggle(planKey: string): void {
 }
 .bv-compat-hint {
     font-size: 11.5px;
-    color: #64748b;
+    color: var(--sa-muted);
     line-height: 1.5;
 }
 .bv-compat-grid {
@@ -197,22 +197,22 @@ function onToggle(planKey: string): void {
     gap: 6px;
     padding: 10px 12px;
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     cursor: pointer;
     text-align: left;
     font-family: inherit;
-    color: #0f172a;
+    color: var(--sa-heading);
     transition:
         background 0.12s,
         border-color 0.12s;
 }
 .bv-compat-card:hover:not(:disabled) {
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
 }
 .bv-compat-card.on {
-    border-color: #2563eb;
-    background: #eff6ff;
+    border-color: var(--sa-primary);
+    background: var(--sa-primary-50);
 }
 .bv-compat-card.warn {
     border-color: #fca5a5;
@@ -256,10 +256,10 @@ function onToggle(planKey: string): void {
         500 11px 'JetBrains Mono',
         ui-monospace,
         monospace;
-    color: #64748b;
+    color: var(--sa-muted);
 }
 .bv-compat-check {
-    color: #2563eb;
+    color: var(--sa-primary);
     display: inline-flex;
 }
 .bv-compat-overlap {
@@ -298,7 +298,7 @@ function onToggle(planKey: string): void {
 }
 .bv-compat-empty {
     padding: 12px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-style: italic;
     font-size: 12.5px;
     text-align: center;

package/src/components/bundle-editor/BundleQuotasEditor.vue

@@ -133,7 +133,7 @@ function quotaUnit(q: DiscoveredQuota): string {
     gap: 10px;
     padding: 8px 10px;
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     transition:
         background 0.12s,
@@ -157,11 +157,11 @@ function quotaUnit(q: DiscoveredQuota): string {
     border: 1px solid #cbd5e1;
     border-radius: 6px;
     cursor: pointer;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .bd-quota-row.on .bd-quota-toggle {
-    background: #2563eb;
-    border-color: #2563eb;
+    background: var(--sa-primary);
+    border-color: var(--sa-primary);
     color: #fff;
 }
 .bd-quota-toggle:disabled {
@@ -176,14 +176,14 @@ function quotaUnit(q: DiscoveredQuota): string {
 .bd-quota-label {
     font-size: 13px;
     font-weight: 600;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .bd-quota-key {
     font:
         500 10.5px 'JetBrains Mono',
         ui-monospace,
         monospace;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .bd-quota-valwrap {
     display: inline-flex;
@@ -201,21 +201,21 @@ function quotaUnit(q: DiscoveredQuota): string {
         monospace;
     text-align: right;
     background: #fff;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .bd-quota-val:disabled {
-    background: #f1f5f9;
-    color: #94a3b8;
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-light);
     cursor: not-allowed;
 }
 .bd-quota-unit {
     font-size: 11.5px;
-    color: #64748b;
+    color: var(--sa-muted);
     min-width: 32px;
 }
 .bd-quotas-empty {
     padding: 12px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-style: italic;
     font-size: 12.5px;
 }

package/src/components/bundle-editor/BundleStatusBanner.vue

@@ -151,22 +151,22 @@ const supersededTail = computed(() =>
     line-height: 1.4;
 }
 .bv-status-live {
-    background: #ecfdf5;
+    background: var(--sa-positive-bg);
     border-color: #a7f3d0;
     color: #065f46;
 }
 .bv-status-scheduled {
-    background: #fffbeb;
+    background: var(--sa-warning-bg);
     border-color: #fde68a;
     color: #92400e;
 }
 .bv-status-superseded {
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     border-color: #cbd5e1;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .bv-status-draft {
-    background: #eff6ff;
+    background: var(--sa-primary-50);
     border-color: #bfdbfe;
     color: #1e40af;
 }
@@ -192,7 +192,7 @@ const supersededTail = computed(() =>
     gap: 5px;
     padding: 6px 10px;
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 6px;
     cursor: pointer;
     font-size: 12px;

package/src/components/bundle-editor/BundleVersionInlineEditor.vue

@@ -525,7 +525,7 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: #475569;
+    color: var(--sa-muted-dark);
     padding-top: 2px;
 }
 .bve-section-label--top {
@@ -534,7 +534,7 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
 .bve-section-count {
     font-size: 10.5px;
     font-weight: 600;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     text-transform: none;
     letter-spacing: 0;
 }
@@ -556,12 +556,12 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
 }
 .bve-field-label {
     font-size: 11px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     font-weight: 600;
 }
 .bve-field-hint {
     font-size: 10.5px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .bve-input-grp {
     display: inline-flex;
@@ -579,9 +579,9 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     align-items: center;
     padding: 0 8px;
     font-size: 11.5px;
-    color: #64748b;
-    background: #f8fafc;
-    border-left: 1px solid #e2e8f0;
+    color: var(--sa-muted);
+    background: var(--sa-bg-surface-2);
+    border-left: 1px solid var(--sa-border);
     border-radius: 0 6px 6px 0;
 }
 .bve-input {
@@ -590,16 +590,16 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     border-radius: 6px;
     font-size: 13px;
     font-family: inherit;
-    color: #0f172a;
+    color: var(--sa-heading);
     background: #fff;
 }
 .bve-input--readonly {
-    color: #94a3b8;
-    background: #f8fafc;
+    color: var(--sa-muted-light);
+    background: var(--sa-bg-surface-2);
 }
 .bve-savings {
     font-size: 11.5px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     display: inline-flex;
     align-items: center;
     gap: 8px;
@@ -622,7 +622,7 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     font-size: 13px;
 }
 .bve-toggle-label {
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .bve-textarea {
     padding: 8px 10px;
@@ -630,7 +630,7 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     border-radius: 6px;
     font-size: 13px;
     font-family: inherit;
-    color: #0f172a;
+    color: var(--sa-heading);
     background: #fff;
     resize: vertical;
 }
@@ -647,22 +647,22 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     cursor: pointer;
     font-size: 12.5px;
     font-family: inherit;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .bve-btn:hover:not(:disabled) {
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
 }
 .bve-btn:disabled {
     cursor: not-allowed;
     opacity: 0.5;
 }
 .bve-btn--primary {
-    background: #2563eb;
-    border-color: #2563eb;
+    background: var(--sa-primary);
+    border-color: var(--sa-primary);
     color: #fff;
 }
 .bve-btn--primary:hover:not(:disabled) {
-    background: #1d4ed8;
+    background: var(--sa-primary-strong);
 }
 .bve-error {
     padding: 8px 12px;