@saasicat/ui-vue 0.21.0 → 0.22.0

package/src/pages-standard/UsersPage.vue

@@ -1,81 +1,66 @@
 <template>
     <AdminPage class="sa-users">
-        <AdminHero :title="resolvedTitle" :subtitle="subtitle">
-            <template #actions>
-                <q-btn
-                    unelevated
-                    color="primary"
-                    icon="search"
-                    :label="common.search"
-                    @click="reload"
-                />
-            </template>
-        </AdminHero>
+        <AdminHero :title="resolvedTitle" :subtitle="subtitle" />
 
-        <div class="sa-stats">
-            <button
-                v-for="tile in statTiles"
-                :key="tile.id"
-                class="sa-stat"
-                :class="[
-                    tile.tone ? `sa-stat--${tile.tone}` : null,
-                    statusFilter === tile.id ? 'sa-stat--active' : null,
-                ]"
-                @click="statusFilter = tile.id"
-            >
-                <span class="sa-stat__num">{{ tile.count }}</span>
-                <span class="sa-stat__label">{{ tile.label }}</span>
-            </button>
-        </div>
+        <AdminBody>
+            <AdminSection>
+                <AdminStatistics :label="resolvedTitle">
+                    <AdminKpi
+                        v-for="tile in statTiles"
+                        :key="tile.id"
+                        :label="tile.label"
+                        :value="tile.count"
+                        :tone="tile.tone"
+                        :selected="statusFilter === tile.id"
+                        :action="() => (statusFilter = tile.id)"
+                    />
+                </AdminStatistics>
+            </AdminSection>
 
-        <div class="sa-users__filter">
-            <q-input
-                v-model="filter.q"
-                outlined
-                dense
-                :label="msg.filterQuery"
-                clearable
-                @keyup.enter="reload"
-                @clear="reload"
-            />
-            <q-input
-                v-model="filter.tenant"
-                outlined
-                dense
-                :label="msg.filterTenant"
-                clearable
-                @keyup.enter="reload"
-                @clear="reload"
-            />
-            <slot name="filters-extra" />
-        </div>
+            <AdminSection :title="common.results" class="sa-users__card">
+                <AdminFilters class="q-mb-lg">
+                    <q-input
+                        v-model="filter.q"
+                        outlined
+                        dense
+                        :label="msg.filterQuery"
+                        clearable
+                        debounce="250"
+                        @update:model-value="reload"
+                    />
+                    <q-input
+                        v-model="filter.tenant"
+                        outlined
+                        dense
+                        :label="msg.filterTenant"
+                        clearable
+                        debounce="250"
+                        @update:model-value="reload"
+                    />
+                    <slot name="filters-extra" />
+                </AdminFilters>
 
-        <div class="sa-users__card">
-            <q-table
-                flat
-                :rows="filteredRows"
-                :columns="effectiveColumns"
-                row-key="id"
-                :pagination="{ rowsPerPage: 0 }"
-                :loading="loading"
-                hide-pagination
-            >
-                <template #body-cell-status="{ row }">
-                    <q-td>
-                        <q-badge
-                            :color="row.isActive ? 'positive' : 'grey'"
-                            :label="row.isActive ? msg.statusActive : msg.statusDeactivated"
-                        />
-                        <q-badge
-                            v-if="row.invitationStatus === 'PENDING'"
-                            color="amber-7"
-                            :label="msg.badgePending"
-                            class="q-ml-xs"
-                        />
-                    </q-td>
-                </template>
-                <template #body-cell-actions="{ row }">
-                    <q-td>
+                <AdminTable
+                    :rows="filteredRows"
+                    :columns="effectiveColumns"
+                    :loading="loading"
+                    storage-key="users"
+                >
+                    <template #body-cell-status="{ row }">
+                        <q-td>
+                            <q-badge
+                                :color="row.isActive ? 'positive' : 'grey'"
+                                :label="row.isActive ? msg.statusActive : msg.statusDeactivated"
+                            />
+                            <q-badge
+                                v-if="row.invitationStatus === 'PENDING'"
+                                color="amber-7"
+                                :label="msg.badgePending"
+                                class="q-ml-xs"
+                            />
+                        </q-td>
+                    </template>
+                    <template #row-actions="{ row }">
                         <slot name="row-actions" :row="row">
                             <q-btn
                                 v-for="action in visibleActions(row)"
@@ -88,10 +73,10 @@
                                 @click="action.handler(row)"
                             />
                         </slot>
-                    </q-td>
-                </template>
-            </q-table>
-        </div>
+                    </template>
+                </AdminTable>
+            </AdminSection>
+        </AdminBody>
 
         <MfaPromptDialog
             v-if="needsMfaDialog"
@@ -106,12 +91,18 @@
 </template>
 
 <script setup lang="ts">
+import AdminTable from '../components/admin-page/AdminTable.vue';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
 import { useQuasar } from 'quasar';
 import { useSuperAdminNotify } from '../quasar/notify.js';
+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 AdminKpi from '../components/admin-page/AdminKpi.vue';
 import AdminPage from '../components/admin-page/AdminPage.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
+import AdminStatistics from '../components/admin-page/AdminStatistics.vue';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
@@ -318,14 +309,6 @@ const mergedActions = computed<readonly UserRowAction[]>(() => [
 
 const effectiveColumns = computed(() => {
     const cols = [...baseColumns.value];
-    if (mergedActions.value.length > 0) {
-        cols.push({
-            name: 'actions',
-            label: '',
-            field: 'id' as never,
-            align: 'right' as 'left',
-        });
-    }
     return cols;
 });
 
@@ -468,22 +451,4 @@ function onDeactivateClick(row: UserRow): void {
 }
 </script>
 
-<style scoped>
-.sa-users__filter {
-    display: flex;
-    gap: 10px;
-    margin-bottom: 12px;
-    align-items: center;
-    flex-wrap: wrap;
-}
-.sa-users__filter > * {
-    flex: 1;
-    min-width: 200px;
-}
-.sa-users__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
-</style>
+<style scoped></style>

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

@@ -12,13 +12,16 @@
                     <div class="sa-bd-card__titlerow">
                         <span class="sa-bd-card__key">{{ bundle.bundleKey }}</span>
                         <span
-                            class="sa-chip"
-                            :class="`sa-chip--${statusClass(bundle)}`"
+                            class="sa-bundle-chip"
+                            :class="`sa-bundle-chip--${statusClass(bundle)}`"
                             :title="statusTooltip(bundle)"
                         >
                             {{ statusLabel(bundle) }}
                         </span>
-                        <span v-if="i18nLocaleCount(bundle) > 0" class="sa-chip sa-chip--info">
+                        <span
+                            v-if="i18nLocaleCount(bundle) > 0"
+                            class="sa-bundle-chip sa-bundle-chip--info"
+                        >
                             {{ translationCount(bundle) }}
                         </span>
                     </div>
@@ -93,34 +96,34 @@ function translationCount(bundle: BundleRow): string {
 
 <style scoped>
 /* Status chips co-located with the markup (analogous to PlanList .pl-chip*).
-   Deliberately scoped: the identically named global .sa-chip rule in
-   DiscoveryPage.vue would otherwise override .sa-chip--live (same specificity,
+   Deliberately scoped: the identically named global .sa-bundle-chip rule in
+   DiscoveryPage.vue would otherwise override .sa-bundle-chip--live (same specificity,
    later source order) and render the "Live" tag grey instead of green. */
-.sa-chip {
+.sa-bundle-chip {
     font-size: 10px;
     font-weight: 600;
     padding: 2px 7px;
     border-radius: 6px;
-    background: #f1f5f9;
-    color: #475569;
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark);
 }
-.sa-chip--info {
-    background: #eff6ff;
-    color: #1d4ed8;
+.sa-bundle-chip--info {
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
 }
-.sa-chip--live {
+.sa-bundle-chip--live {
     background: #dcfce7;
     color: #166534;
 }
-.sa-chip--draft {
+.sa-bundle-chip--draft {
     background: #fef3c7;
     color: #92400e;
 }
-.sa-chip--supersed {
-    background: #e2e8f0;
-    color: #64748b;
+.sa-bundle-chip--supersed {
+    background: var(--sa-border);
+    color: var(--sa-muted);
 }
-.sa-chip--scheduled {
+.sa-bundle-chip--scheduled {
     background: #fef3c7;
     color: #92400e;
 }

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

@@ -1,31 +1,22 @@
 <template>
-    <div class="sa-bundles__kpis">
-        <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">{{ msg.kpis.total }}</div>
-            <div class="sa-bundles__kpi-value">{{ bundlesTotal }}</div>
-            <div class="sa-bundles__kpi-sub">{{ totalSub }}</div>
-        </div>
-        <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">{{ msg.kpis.scheduled }}</div>
-            <div class="sa-bundles__kpi-value">{{ totalScheduledVersions }}</div>
-            <div class="sa-bundles__kpi-sub">{{ msg.kpis.scheduledSub }}</div>
-        </div>
-        <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">{{ msg.kpis.drafts }}</div>
-            <div class="sa-bundles__kpi-value">{{ totalDraftVersions }}</div>
-            <div class="sa-bundles__kpi-sub">{{ draftsSub }}</div>
-        </div>
-        <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">{{ msg.kpis.translated }}</div>
-            <div class="sa-bundles__kpi-value">{{ translatedCount }}</div>
-            <div class="sa-bundles__kpi-sub">{{ translatedSub }}</div>
-        </div>
-    </div>
+    <AdminStatistics :columns="4">
+        <AdminKpi :label="msg.kpis.total" :value="bundlesTotal" :sub="totalSub" />
+        <AdminKpi
+            :label="msg.kpis.scheduled"
+            :value="totalScheduledVersions"
+            :sub="msg.kpis.scheduledSub"
+        />
+        <AdminKpi :label="msg.kpis.drafts" :value="totalDraftVersions" :sub="draftsSub" />
+        <AdminKpi :label="msg.kpis.translated" :value="translatedCount" :sub="translatedSub" />
+    </AdminStatistics>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import AdminKpi from '../../components/admin-page/AdminKpi.vue';
+import AdminStatistics from '../../components/admin-page/AdminStatistics.vue';
+
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 

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

@@ -14,16 +14,11 @@
         >
             <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>
+        <button class="sa-btn sa-btn--primary" type="button" @click="emit('create')">
+            <q-icon name="add" size="16px" />
+            <span>{{ msg.header.newBundle }}</span>
+        </button>
+        <AdminRefreshBtn :loading="loading" @refresh="emit('refresh')" />
     </div>
 </template>
 
@@ -31,6 +26,7 @@
 import { computed } from 'vue';
 
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+import AdminRefreshBtn from '../../components/admin-page/AdminRefreshBtn.vue';
 
 // 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

package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue

@@ -171,13 +171,13 @@ function copyFromDefault(locale: string): void {
     gap: 12px;
 }
 .sa-trans-lang {
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 10px;
     background: #fff;
     padding: 10px 12px;
 }
 .sa-trans-lang--source {
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
     border-color: #cbd5e1;
 }
 .sa-trans-lang__head {
@@ -189,7 +189,7 @@ function copyFromDefault(locale: string): void {
 .sa-trans-lang__code {
     font-size: 10px;
     font-weight: 700;
-    background: #0f172a;
+    background: var(--sa-heading);
     color: #fff;
     padding: 2px 6px;
     border-radius: 5px;
@@ -205,13 +205,13 @@ function copyFromDefault(locale: string): void {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: #475569;
-    background: #e2e8f0;
+    color: var(--sa-muted-dark);
+    background: var(--sa-border);
     padding: 2px 6px;
     border-radius: 5px;
 }
 .sa-trans-lang__copy {
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .sa-trans-fields {
     display: flex;
@@ -228,12 +228,12 @@ function copyFromDefault(locale: string): void {
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.3px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .sa-trans-locked {
     font-size: 13px;
     color: #334155;
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     border: 1px dashed #cbd5e1;
     border-radius: 6px;
     padding: 6px 10px;
@@ -243,7 +243,7 @@ function copyFromDefault(locale: string): void {
 }
 .sa-trans-locked__hint {
     font-size: 10px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     text-transform: uppercase;
 }
 .sa-trans__empty {
@@ -251,7 +251,7 @@ function copyFromDefault(locale: string): void {
     padding: 16px;
     text-align: center;
     font-size: 12px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     border: 1px dashed #cbd5e1;
     border-radius: 10px;
 }

package/src/pages-standard/discovery-page/DiscoveryCapList.vue

@@ -91,7 +91,7 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     gap: 10px;
     align-items: flex-start;
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 8px 10px;
 }
@@ -142,8 +142,8 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     color: #b91c1c;
 }
 .sa-caps-row__flag--gone {
-    background: #e2e8f0;
-    color: #64748b;
+    background: var(--sa-border);
+    color: var(--sa-muted);
 }
 .sa-caps-row.gone {
     opacity: 0.6;
@@ -153,7 +153,7 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     gap: 12px;
     flex-wrap: wrap;
     font-size: 11px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     margin-top: 1px;
 }
 .sa-caps-row__meta code {
@@ -165,7 +165,7 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     gap: 6px;
     font-size: 11px;
     color: #b45309;
-    background: #fffbeb;
+    background: var(--sa-warning-bg);
     border: 1px dashed #fde68a;
     border-radius: 8px;
     padding: 10px 12px;

package/src/pages-standard/discovery-page/DiscoveryFeatureCard.vue

@@ -269,7 +269,7 @@ function coverage(locale: string): number {
 
 <style scoped>
 .sa-fc {
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 10px;
     background: #fff;
     overflow: hidden;
@@ -286,7 +286,7 @@ function coverage(locale: string): number {
     cursor: pointer;
 }
 .sa-fc__icon {
-    color: #475569;
+    color: var(--sa-muted-dark);
     flex-shrink: 0;
 }
 .sa-fc__main {
@@ -302,8 +302,8 @@ function coverage(locale: string): number {
 .sa-fc__key {
     font-size: 11px;
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    background: #f1f5f9;
-    color: #475569;
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark);
     padding: 2px 6px;
     border-radius: 5px;
     white-space: nowrap;
@@ -311,7 +311,7 @@ function coverage(locale: string): number {
 .sa-fc__label {
     font-size: 13px;
     font-weight: 600;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .sa-fc__flag {
     font-size: 10px;
@@ -337,7 +337,7 @@ function coverage(locale: string): number {
 }
 .sa-fc__sub {
     font-size: 11px;
-    color: #64748b;
+    color: var(--sa-muted);
     margin-top: 1px;
 }
 .sa-fc__dot {
@@ -356,16 +356,16 @@ function coverage(locale: string): number {
     flex-shrink: 0;
 }
 .sa-fc__chev {
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     transition: transform 0.15s;
 }
 .sa-fc__chev.open {
     transform: rotate(90deg);
 }
 .sa-fc__body {
-    border-top: 1px solid #f1f5f9;
+    border-top: 1px solid var(--sa-border-soft);
     padding: 12px;
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
 }
 .sa-fc__banner {
     display: flex;
@@ -377,18 +377,18 @@ function coverage(locale: string): number {
     margin-bottom: 10px;
 }
 .sa-fc__banner.warn {
-    background: #fffbeb;
+    background: var(--sa-warning-bg);
     border: 1px solid #fde68a;
     color: #92400e;
 }
 .sa-fc__banner.mute {
-    background: #f1f5f9;
-    border: 1px solid #e2e8f0;
-    color: #475569;
+    background: var(--sa-border-soft);
+    border: 1px solid var(--sa-border);
+    color: var(--sa-muted-dark);
 }
 .sa-fc__subtabs {
     margin-bottom: 12px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid var(--sa-border);
 }
 .sa-fc__split {
     display: grid;
@@ -400,7 +400,7 @@ function coverage(locale: string): number {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     margin-bottom: 8px;
 }
 .sa-fc__split-count {
@@ -424,6 +424,6 @@ function coverage(locale: string): number {
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 </style>

package/src/pages-standard/discovery-page/DiscoveryKpis.vue

@@ -1,36 +1,40 @@
 <template>
-    <div class="sa-discovery__kpis">
-        <div class="sa-discovery__kpi">
-            <div class="sa-discovery__kpi-label">{{ msg.kpi.featuresTotal }}</div>
-            <div class="sa-discovery__kpi-value">{{ featuresCount }}</div>
-            <div class="sa-discovery__kpi-sub">{{ featuresTotalSub }}</div>
-        </div>
-        <div class="sa-discovery__kpi good">
-            <div class="sa-discovery__kpi-label">{{ msg.kpi.approved }}</div>
-            <div class="sa-discovery__kpi-value">{{ approvedCount }}</div>
-            <div class="sa-discovery__kpi-sub">{{ msg.kpi.approvedSub }}</div>
-        </div>
-        <div class="sa-discovery__kpi" :class="{ warn: pendingCount > 0 }">
-            <div class="sa-discovery__kpi-label">{{ msg.kpi.pending }}</div>
-            <div class="sa-discovery__kpi-value">{{ pendingCount }}</div>
-            <div class="sa-discovery__kpi-sub">{{ msg.kpi.pendingSub }}</div>
-        </div>
-        <div class="sa-discovery__kpi">
-            <div class="sa-discovery__kpi-label">{{ msg.kpi.outdated }}</div>
-            <div class="sa-discovery__kpi-value">{{ outdatedCount + obsoleteCount }}</div>
-            <div class="sa-discovery__kpi-sub">{{ outdatedSub }}</div>
-        </div>
-        <div class="sa-discovery__kpi" :class="{ bad: orphanCount > 0 }">
-            <div class="sa-discovery__kpi-label">{{ msg.kpi.orphans }}</div>
-            <div class="sa-discovery__kpi-value">{{ orphanCount }}</div>
-            <div class="sa-discovery__kpi-sub">{{ msg.orphansTitle }}</div>
-        </div>
-    </div>
+    <AdminStatistics :columns="5">
+        <AdminKpi :label="msg.kpi.featuresTotal" :value="featuresCount" :sub="featuresTotalSub" />
+        <AdminKpi
+            :label="msg.kpi.approved"
+            :value="approvedCount"
+            :sub="msg.kpi.approvedSub"
+            tone="positive"
+        />
+        <AdminKpi
+            :label="msg.kpi.pending"
+            :value="pendingCount"
+            :sub="msg.kpi.pendingSub"
+            :tone="pendingCount > 0 ? 'warn' : 'neutral'"
+            emphasis="surface"
+        />
+        <AdminKpi
+            :label="msg.kpi.outdated"
+            :value="outdatedCount + obsoleteCount"
+            :sub="outdatedSub"
+        />
+        <AdminKpi
+            :label="msg.kpi.orphans"
+            :value="orphanCount"
+            :sub="msg.orphansTitle"
+            :tone="orphanCount > 0 ? 'danger' : 'neutral'"
+            emphasis="surface"
+        />
+    </AdminStatistics>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import AdminKpi from '../../components/admin-page/AdminKpi.vue';
+import AdminStatistics from '../../components/admin-page/AdminStatistics.vue';
+
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';