@saasicat/ui-vue 0.21.0 → 0.22.1

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

@@ -1,43 +1,38 @@
 <template>
-    <div class="pd-kpis">
-        <div class="pd-kpi">
-            <div class="pd-kpi-label">{{ msg.kpis.activeVersion }}</div>
-            <div class="pd-kpi-big">
+    <AdminStatistics :columns="4">
+        <AdminKpi :label="msg.kpis.activeVersion" :sub="activeVersionSub">
+            <template #value>
                 <template v-if="liveVersion">
                     v{{ liveVersion.version }}
                     <span class="chip live dot">live</span>
                 </template>
                 <template v-else>—</template>
-            </div>
-            <div class="pd-kpi-sub">{{ activeVersionSub }}</div>
-        </div>
+            </template>
+        </AdminKpi>
 
-        <div class="pd-kpi">
-            <div class="pd-kpi-label">{{ msg.kpis.tenantImpact }}</div>
-            <div class="pd-kpi-big">{{ tenantTotal }}</div>
-            <div class="pd-kpi-sub">{{ msg.kpis.tenantsOnPlan }}</div>
-        </div>
+        <AdminKpi
+            :label="msg.kpis.tenantImpact"
+            :value="tenantTotal"
+            :sub="msg.kpis.tenantsOnPlan"
+        />
 
-        <div class="pd-kpi">
-            <div class="pd-kpi-label">{{ msg.kpis.versions }}</div>
-            <div class="pd-kpi-big">{{ versionCount }}</div>
-            <div class="pd-kpi-sub">{{ versionsSummary }}</div>
-        </div>
+        <AdminKpi :label="msg.kpis.versions" :value="versionCount" :sub="versionsSummary" />
 
-        <div :class="['pd-kpi', draftVersion ? 'draft' : '']">
-            <div class="pd-kpi-label">{{ msg.kpis.openDraft }}</div>
-            <div class="pd-kpi-big" :style="draftVersion ? '' : 'color:#cbd5e1'">
-                {{ draftVersion ? `v${draftVersion.version}` : '—' }}
-            </div>
-            <div class="pd-kpi-sub">
-                {{ draftVersion ? msg.kpis.readyToEdit : msg.kpis.noOpenDraft }}
-            </div>
-        </div>
-    </div>
+        <AdminKpi
+            :label="msg.kpis.openDraft"
+            :value="draftVersion ? `v${draftVersion.version}` : null"
+            :sub="draftVersion ? msg.kpis.readyToEdit : msg.kpis.noOpenDraft"
+            :tone="draftVersion ? 'warn' : 'neutral'"
+            emphasis="surface"
+        />
+    </AdminStatistics>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+
+import AdminKpi from '../admin-page/AdminKpi.vue';
+import AdminStatistics from '../admin-page/AdminStatistics.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/PlanTitleEdit.vue

@@ -0,0 +1,133 @@
+<template>
+    <span class="pd-title-edit">
+        <template v-if="editing">
+            <input
+                ref="nameInput"
+                v-model="nameDraft"
+                class="pd-title-edit__input"
+                :aria-label="msg.header.editNameAria"
+                @keydown.enter="commit"
+                @keydown.escape="cancel"
+                @blur="commit"
+            />
+            <span class="pd-title-edit__hint">{{ msg.header.nameEditHint }}</span>
+        </template>
+        <template v-else>
+            {{ plan.label }}
+            <button
+                v-if="editable"
+                class="pd-title-edit__btn"
+                type="button"
+                :title="msg.header.editNameTitle"
+                :aria-label="msg.header.editNameAria"
+                @click="start"
+            >
+                <q-icon name="edit" size="15px" />
+            </button>
+        </template>
+    </span>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue';
+import type { PlanRow } from '@saasicat/types';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
+// The plan name as the page heading, renameable in place.
+//
+// It goes into AdminHero's `title` slot rather than carrying a heading of its
+// own: the plan detail used to render a second <h1> below the hero's, which
+// left the page with two top-level headings and a title block that had to
+// restate the hero's type scale to match it. Here the hero owns the element
+// and the size; this only fills it.
+const props = defineProps<{
+    plan: PlanRow;
+    /** Renaming a plan is only offered while an unpublished draft exists. */
+    editable: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'updatePlan', patch: { label: string }): void;
+}>();
+
+const msg = useSaMessages('planDetail');
+
+const editing = ref(false);
+const nameDraft = ref(props.plan.label);
+const nameInput = ref<HTMLInputElement | null>(null);
+
+watch(
+    () => props.plan.label,
+    (label) => {
+        if (!editing.value) nameDraft.value = label;
+    },
+);
+
+function start(): void {
+    nameDraft.value = props.plan.label;
+    editing.value = true;
+    void nextTick(() => nameInput.value?.focus());
+}
+
+function commit(): void {
+    if (!editing.value) return;
+    const next = nameDraft.value.trim();
+    editing.value = false;
+    if (next && next !== props.plan.label) emit('updatePlan', { label: next });
+}
+
+function cancel(): void {
+    nameDraft.value = props.plan.label;
+    editing.value = false;
+}
+</script>
+
+<style scoped>
+.pd-title-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+/* `font: inherit` on purpose: the heading's type comes from the hero, so the
+ * input keeps matching it when that changes. */
+.pd-title-edit__input {
+    font: inherit;
+    color: var(--sa-heading);
+    border: 0;
+    background: var(--sa-warning-bg);
+    outline: 2px solid var(--sa-amber-light);
+    padding: 2px 8px;
+    border-radius: var(--sa-radius-control);
+    min-width: 220px;
+}
+.pd-title-edit__hint {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--sa-warning);
+    background: var(--sa-warning-bg);
+    border: 1px solid var(--sa-amber-border);
+    border-radius: var(--sa-radius-control);
+    padding: 3px 8px;
+}
+.pd-title-edit__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--sa-radius-control);
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--sa-muted-light);
+    cursor: pointer;
+    transition:
+        background 0.12s,
+        color 0.12s,
+        border-color 0.12s;
+}
+.pd-title-edit__btn:hover {
+    background: var(--sa-border-soft);
+    color: var(--sa-primary);
+    border-color: var(--sa-border);
+}
+</style>