@saasicat/ui-vue 0.19.0 → 0.21.0

package/src/components/plan-detail/PlanAuditLog.vue

@@ -1,11 +1,9 @@
 <template>
-    <section class="pd-panel pd-audit">
-        <div class="pd-panel-head">
-            <div style="min-width: 0">
-                <h3 class="pd-panel-title">{{ msg.auditLog.title }}</h3>
-                <div class="pd-panel-sub">{{ msg.auditLog.subtitle }}</div>
-            </div>
-        </div>
+    <AdminSection
+        :title="msg.auditLog.title"
+        :subtitle="msg.auditLog.subtitle"
+        class="pd-panel pd-audit"
+    >
         <div class="pd-audit-body">
             <div v-if="loadingAudit" class="pd-diff-empty">{{ msg.auditLog.loading }}</div>
             <div v-for="a in auditRows" :key="a.id" class="pd-audit-row">
@@ -16,11 +14,12 @@
                 <span class="pd-audit-what">{{ a.action }}</span>
             </div>
         </div>
-    </section>
+    </AdminSection>
 </template>
 
 <script setup lang="ts">
 import { formatMessage } from '../../client/i18n/format.js';
+import AdminSection from '../admin-page/AdminSection.vue';
 import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import type { AuditRow } from './types.js';
 

package/src/components/plan-detail/PlanDetail.vue

@@ -401,7 +401,9 @@ async function executeTerminate(): Promise<void> {
         const code = e?.body?.code;
         if (code === 'PLAN_TERMINATE_DATE_NOT_FUTURE') {
             terminateError.value = msg.value.terminateDialog.errorDateNotFuture;
-        } else if (code === 'PLAN_VERSION_NOT_LIVE') {
+        } else if (code === 'PLAN_VERSION_NOT_PUBLISHED' || code === 'PLAN_VERSION_SUPERSEDED') {
+            // Split out of the former PLAN_VERSION_NOT_LIVE; both mean the
+            // version cannot be terminated, so they share one message.
             terminateError.value = msg.value.terminateDialog.errorVersionNotLive;
         } else if (code === 'PLAN_TERMINATE_NOT_IMPLEMENTED') {
             terminateError.value = msg.value.terminateDialog.errorNotImplemented;
@@ -692,6 +694,17 @@ async function executeTerminate(): Promise<void> {
     padding: 14px 16px 12px;
     border-bottom: 1px solid #f1f5f9;
 }
+.pd-panel .sa-section__head {
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 16px 12px;
+    border-bottom: 1px solid #f1f5f9;
+    margin-bottom: 0;
+}
+.pd-panel .sa-section__sub {
+    font-size: 11.5px;
+    margin-top: 2px;
+}
 .pd-panel-title {
     font-size: 15px;
     font-weight: 700;

package/src/components/plan-detail/PlanVersionDiffPanel.vue

@@ -1,10 +1,6 @@
 <template>
-    <section class="pd-panel">
-        <div class="pd-panel-head">
-            <div style="min-width: 0">
-                <h3 class="pd-panel-title">{{ panelTitle }}</h3>
-                <div class="pd-panel-sub">{{ panelSubtitle }}</div>
-            </div>
+    <AdminSection :title="panelTitle" :subtitle="panelSubtitle" class="pd-panel">
+        <template #actions>
             <div class="pd-panel-head-right pd-diff-chips">
                 <template v-if="predecessor">
                     <span class="pd-diff-chip add">+{{ diff.featuresAdded.length }} F</span>
@@ -16,7 +12,7 @@
                     <span class="pd-diff-chip mod">{{ quotaCount(selectedVersion) }} Q</span>
                 </template>
             </div>
-        </div>
+        </template>
 
         <div v-if="predecessor" class="pd-diff-list">
             <div v-for="d in diffRows" :key="d.id" :class="['pd-diff-row', d.kind]">
@@ -123,11 +119,12 @@
                 </div>
             </template>
         </div>
-    </section>
+    </AdminSection>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import AdminSection from '../admin-page/AdminSection.vue';
 import type { PlanVersionRow } from '@saasicat/types';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';

package/src/components/plan-detail/PlanVersionsPanel.vue

@@ -1,13 +1,10 @@
 <template>
-    <section class="pd-panel">
-        <div class="pd-panel-head">
-            <div style="min-width: 0">
-                <h3 class="pd-panel-title">{{ msg.versions.title }}</h3>
-                <div class="pd-panel-sub">
-                    {{ msg.versions.subtitle }}
-                    <code class="pd-code">supersededAt</code>
-                </div>
-            </div>
+    <AdminSection :title="msg.versions.title" class="pd-panel">
+        <template #subtitle>
+            {{ msg.versions.subtitle }}
+            <code class="pd-code">supersededAt</code>
+        </template>
+        <template #actions>
             <div class="pd-panel-head-right">
                 <button
                     v-if="!draftVersion"
@@ -28,7 +25,7 @@
                     <span>{{ newDraftButtonLabel }}</span>
                 </button>
             </div>
-        </div>
+        </template>
 
         <div v-if="chronological.length > 0" class="pd-timeline">
             <div class="pd-timeline-hint">
@@ -227,11 +224,12 @@
                 </div>
             </div>
         </div>
-    </section>
+    </AdminSection>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import AdminSection from '../admin-page/AdminSection.vue';
 import type { PlanVersionRow } from '@saasicat/types';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';