@saasicat/ui-vue 0.19.0 → 0.22.0

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

@@ -1,79 +1,60 @@
 <template>
-    <div class="mc-page-head">
-        <div>
-            <h2 class="mc-h-title">{{ msg.header.title }}</h2>
-            <p class="mc-h-sub">{{ msg.header.subtitle }}</p>
-        </div>
-        <div class="mc-head-actions">
-            <div class="mc-locale-mgr">
-                <span class="mc-locale-mgr-label">{{ msg.header.localesLabel }}</span>
-                <span
-                    v-for="loc in activeLocaleSet"
-                    :key="loc"
-                    class="mc-locale-pill"
-                    :class="{ active: loc === activeLocale }"
+    <div class="sa-marketing-head-actions">
+        <div class="sa-marketing-locale-mgr">
+            <span class="sa-marketing-locale-mgr-label">{{ msg.header.localesLabel }}</span>
+            <span
+                v-for="loc in activeLocaleSet"
+                :key="loc"
+                class="sa-marketing-locale-pill"
+                :class="{ active: loc === activeLocale }"
+            >
+                <button
+                    type="button"
+                    class="sa-marketing-locale-pill-btn"
+                    @click="$emit('localeChange', loc)"
                 >
+                    {{ loc.toUpperCase() }}
+                    <span v-if="loc === defaultLocale" :title="msg.header.defaultLocale">★</span>
+                </button>
+                <button
+                    v-if="loc !== defaultLocale"
+                    type="button"
+                    class="sa-marketing-locale-x"
+                    :title="msg.header.deactivateLocale"
+                    @click="$emit('removeLocale', loc)"
+                >
+                    ×
+                </button>
+            </span>
+            <div class="sa-marketing-locale-add-wrap">
+                <button
+                    type="button"
+                    class="sa-marketing-locale-add"
+                    :disabled="addableLocales.length === 0"
+                    @click="$emit('update:localePickerOpen', !localePickerOpen)"
+                >
+                    {{ msg.header.addLocale }}
+                </button>
+                <div v-if="localePickerOpen" class="sa-marketing-locale-picker">
                     <button
+                        v-for="l in addableLocales"
+                        :key="l"
                         type="button"
-                        class="mc-locale-pill-btn"
-                        @click="$emit('localeChange', loc)"
-                    >
-                        {{ loc.toUpperCase() }}
-                        <span v-if="loc === defaultLocale" :title="msg.header.defaultLocale"
-                            >★</span
-                        >
-                    </button>
-                    <button
-                        v-if="loc !== defaultLocale"
-                        type="button"
-                        class="mc-locale-x"
-                        :title="msg.header.deactivateLocale"
-                        @click="$emit('removeLocale', loc)"
-                    >
-                        ×
-                    </button>
-                </span>
-                <div class="mc-locale-add-wrap">
-                    <button
-                        type="button"
-                        class="mc-locale-add"
-                        :disabled="addableLocales.length === 0"
-                        @click="$emit('update:localePickerOpen', !localePickerOpen)"
+                        class="sa-marketing-locale-picker-row"
+                        @click="$emit('addLocale', l)"
                     >
-                        {{ msg.header.addLocale }}
+                        {{ l.toUpperCase() }}
                     </button>
-                    <div v-if="localePickerOpen" class="mc-locale-picker">
-                        <button
-                            v-for="l in addableLocales"
-                            :key="l"
-                            type="button"
-                            class="mc-locale-picker-row"
-                            @click="$emit('addLocale', l)"
-                        >
-                            {{ l.toUpperCase() }}
-                        </button>
-                    </div>
                 </div>
             </div>
-            <button class="mc-btn" type="button" :disabled="busy" @click="$emit('reload')">
-                <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6" />
-                </svg>
-                <span>{{ msg.header.refresh }}</span>
-            </button>
         </div>
+        <AdminRefreshBtn :loading="busy" @refresh="$emit('reload')" />
     </div>
 </template>
 
 <script setup lang="ts">
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+import AdminRefreshBtn from '../../components/admin-page/AdminRefreshBtn.vue';
 
 defineProps<{
     activeLocaleSet: string[];

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/plan-versions/PlanDiffCard.vue

@@ -64,7 +64,7 @@ const changeCountLabel = computed(() => {
 <style scoped>
 .sa-pv-diff-card {
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 10px;
     margin-bottom: 12px;
     overflow: hidden;
@@ -92,7 +92,7 @@ const changeCountLabel = computed(() => {
 
 .sa-pv-diff-card__head {
     padding: 12px 16px;
-    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
+    border-bottom: 1px solid var(--sa-border-soft, var(--sa-border-soft));
     display: flex;
     align-items: center;
     gap: 12px;
@@ -110,21 +110,21 @@ const changeCountLabel = computed(() => {
 .sa-pv-diff-card__name {
     font-weight: 700;
     font-size: 14px;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
     font-family: var(--sa-font-head, system-ui, sans-serif);
 }
 .sa-pv-diff-card__ver {
     font-family: var(--sa-font-mono, ui-monospace, monospace);
     font-size: 11px;
     font-weight: 600;
-    color: var(--sa-muted, #64748b);
-    background: #f1f5f9;
+    color: var(--sa-muted, var(--sa-muted));
+    background: var(--sa-border-soft);
     padding: 2px 6px;
     border-radius: 4px;
 }
 .sa-pv-diff-card__sub {
     font-size: 11.5px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
 }
 .sa-pv-diff-card__count {
     font-size: 11px;

package/src/pages-standard/plan-versions/PlanVersionsDiff.vue

@@ -196,7 +196,7 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
 }
 .sa-pv-diff__overview {
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 12px;
     padding: 16px 20px;
     margin-bottom: 18px;
@@ -217,17 +217,17 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     text-transform: uppercase;
 }
 .sa-pv-diff__title {
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-weight: 700;
     font-size: 18px;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
 }
 .sa-pv-diff__sep {
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     font-weight: 500;
 }
 .sa-pv-diff__spacer {
@@ -244,7 +244,7 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     text-transform: uppercase;
 }
 .sa-pv-diff__stat-value {
@@ -264,7 +264,7 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-size: 14px;
     font-weight: 700;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }

package/src/pages-standard/plan-versions/PlanVersionsTimeline.vue

@@ -118,14 +118,14 @@ function metaText(s: CatalogSnapshot): string {
     width: 280px;
     flex-shrink: 0;
     background: var(--sa-bg-surface, #ffffff);
-    border-right: 1px solid var(--sa-border, #e2e8f0);
+    border-right: 1px solid var(--sa-border, var(--sa-border));
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
 .sa-pv-timeline__head {
     padding: 14px 16px;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
+    border-bottom: 1px solid var(--sa-border, var(--sa-border));
     background: #fafbfc;
 }
 .sa-pv-timeline__row {
@@ -137,13 +137,13 @@ function metaText(s: CatalogSnapshot): string {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     text-transform: uppercase;
 }
 .sa-pv-timeline__count {
     margin-top: 2px;
     font-size: 11px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
 }
 
 .sa-pv-timeline__list {
@@ -160,7 +160,7 @@ function metaText(s: CatalogSnapshot): string {
     top: 36px;
     bottom: -6px;
     width: 2px;
-    background: var(--sa-border, #e2e8f0);
+    background: var(--sa-border, var(--sa-border));
     z-index: 0;
 }
 .sa-pv-timeline__btn {
@@ -182,7 +182,7 @@ function metaText(s: CatalogSnapshot): string {
     color: inherit;
 }
 .sa-pv-timeline__btn:hover:not(.sa-pv-timeline__btn--selected) {
-    background: var(--sa-border-soft, #f1f5f9);
+    background: var(--sa-border-soft, var(--sa-border-soft));
 }
 .sa-pv-timeline__btn--selected {
     background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
@@ -210,9 +210,9 @@ function metaText(s: CatalogSnapshot): string {
     color: var(--sa-positive, #047857);
 }
 .sa-pv-timeline__node--archived {
-    background: #f1f5f9;
-    border-color: var(--sa-muted, #64748b);
-    color: var(--sa-muted, #64748b);
+    background: var(--sa-border-soft);
+    border-color: var(--sa-muted, var(--sa-muted));
+    color: var(--sa-muted, var(--sa-muted));
 }
 .sa-pv-timeline__node-dot {
     width: 6px;
@@ -237,7 +237,7 @@ function metaText(s: CatalogSnapshot): string {
     font-family: var(--sa-font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
     font-size: 12px;
     font-weight: 700;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
 }
 .sa-pv-timeline__status {
     font-size: 9.5px;
@@ -255,8 +255,8 @@ function metaText(s: CatalogSnapshot): string {
     color: var(--sa-positive, #047857);
 }
 .sa-pv-timeline__status--archived {
-    background: #f1f5f9;
-    color: var(--sa-muted, #64748b);
+    background: var(--sa-border-soft);
+    color: var(--sa-muted, var(--sa-muted));
 }
 .sa-pv-timeline__vs {
     font-size: 9.5px;
@@ -278,7 +278,7 @@ function metaText(s: CatalogSnapshot): string {
 }
 .sa-pv-timeline__meta {
     font-size: 11px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     margin-top: 2px;
     display: flex;
     align-items: center;
@@ -287,10 +287,10 @@ function metaText(s: CatalogSnapshot): string {
 
 .sa-pv-timeline__foot {
     padding: 10px 14px;
-    border-top: 1px solid var(--sa-border, #e2e8f0);
+    border-top: 1px solid var(--sa-border, var(--sa-border));
     background: #fafbfc;
     font-size: 11px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
 }
 .sa-pv-timeline__hint {
     display: flex;
@@ -300,7 +300,7 @@ function metaText(s: CatalogSnapshot): string {
 .sa-pv-timeline__clear-btn {
     margin-top: 6px;
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 6px;
     padding: 4px 10px;
     font-size: 11px;

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

@@ -1,11 +1,10 @@
 <template>
-    <section class="sa-bundles">
-        <div class="sa-bundles__head">
-            <h2 class="sa-bundles__title">{{ msg.bundleOverview.title }}</h2>
+    <AdminSection :title="msg.bundleOverview.title">
+        <template #actions>
             <span class="sa-bundles__count">{{ bundles.length }}</span>
-        </div>
+        </template>
 
-        <div v-if="bundles.length === 0" class="sa-bundles__empty">
+        <div v-if="bundles.length === 0" class="sa-bundle-overview__empty">
             {{ msg.bundleOverview.empty }}
         </div>
 
@@ -44,11 +43,12 @@
                 </q-card-section>
             </q-card>
         </div>
-    </section>
+    </AdminSection>
 </template>
 
 <script setup lang="ts">
 import type { PlanRow } from '@saasicat/types';
+import AdminSection from '../../components/admin-page/AdminSection.vue';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 interface BundleEntry {
@@ -83,30 +83,15 @@ function compatLabel(bundle: BundleEntry): string {
 </script>
 
 <style scoped>
-.sa-bundles {
-    padding: 8px 16px 32px;
-}
-.sa-bundles__head {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 8px 0 12px;
-}
-.sa-bundles__title {
-    font-size: 16px;
-    font-weight: 600;
-    margin: 0;
-    color: #0f172a;
-}
 .sa-bundles__count {
     font-size: 12px;
-    color: #64748b;
-    background: #e2e8f0;
+    color: var(--sa-muted);
+    background: var(--sa-border);
     border-radius: 999px;
     padding: 1px 8px;
 }
-.sa-bundles__empty {
-    color: #64748b;
+.sa-bundle-overview__empty {
+    color: var(--sa-muted);
     font-size: 14px;
     padding: 8px 0;
 }
@@ -120,18 +105,18 @@ function compatLabel(bundle: BundleEntry): string {
 }
 .sa-bundle__label {
     font-weight: 600;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .sa-bundle__key {
     font-size: 11px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-family: monospace;
 }
 .sa-bundle__caption {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     margin-bottom: 4px;
 }
 .sa-bundle__chips {
@@ -144,7 +129,7 @@ function compatLabel(bundle: BundleEntry): string {
     color: #3730a3;
 }
 .sa-bundle__muted {
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .sa-bundle__compat {
     padding-top: 0;

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

@@ -107,7 +107,7 @@ defineEmits<{
     margin: 4px 0;
 }
 .sa-publish-regression__old {
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     text-decoration: line-through;
 }
 .sa-publish-regression__new {