@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/components/plan-cockpit/PlanCockpitVersions.vue

@@ -1,251 +0,0 @@
-<template>
-    <section class="pc-card pc-card--left">
-        <div class="pc-card-head">
-            <div class="pc-card-head-text">
-                <div class="pc-card-title">{{ msg.versions.title }}</div>
-                <div class="pc-card-sub">
-                    {{ msg.versions.subtitle }}
-                    <code class="pc-mono">supersededAt</code>
-                </div>
-            </div>
-            <button
-                class="pc-btn pc-btn--sm pc-btn--primary"
-                type="button"
-                :disabled="hasOpenDraft"
-                @click="emit('createDraft')"
-            >
-                <svg
-                    width="12"
-                    height="12"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2.5"
-                >
-                    <path d="M12 5v14M5 12h14" />
-                </svg>
-                <span>{{ newDraftButtonLabel }}</span>
-            </button>
-        </div>
-
-        <div v-if="versions.length > 0" class="pc-vtimeline">
-            <div class="pc-vtl-track">
-                <div
-                    v-for="seg in timelineSegments"
-                    :key="seg.key"
-                    :class="['pc-vtl-seg', `pc-vtl-${seg.status}`]"
-                    :style="{ flex: seg.flex }"
-                >
-                    v{{ seg.version
-                    }}<template v-if="seg.status === 'draft'">{{
-                        msg.versions.timelineDraftSuffix
-                    }}</template>
-                </div>
-            </div>
-            <div class="pc-vtl-axis">
-                <span v-for="(label, i) in timelineAxis" :key="i">{{ label }}</span>
-            </div>
-        </div>
-
-        <div class="pc-vrow pc-vrow--head">
-            <div class="pc-vrow-version pc-vrow-headlabel">{{ msg.versions.colVersion }}</div>
-            <div class="pc-vrow-cell pc-vrow-headlabel">{{ msg.versions.colValidity }}</div>
-            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">
-                {{ msg.versions.colPricing }}
-            </div>
-            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">
-                {{ msg.versions.colImpact }}
-            </div>
-            <div class="pc-vrow-note pc-vrow-headlabel">{{ msg.versions.colChangeNoteShort }}</div>
-            <div class="pc-vrow-actions" />
-        </div>
-        <div v-if="versions.length === 0" class="pc-empty">
-            {{ msg.versions.empty }}
-        </div>
-        <div
-            v-for="row in sortedVersions"
-            :key="row.id"
-            :class="['pc-vrow', row.publishedAt === null ? 'pc-vrow--active' : '']"
-        >
-            <div class="pc-vrow-version">
-                <span class="pc-vrow-vlabel">v{{ row.version }}</span>
-                <span :class="['pc-chip pc-chip--dot', statusChipClass(row)]">{{
-                    statusLabel(row)
-                }}</span>
-            </div>
-            <div class="pc-vrow-cell">
-                <div class="pc-vrow-validity">
-                    {{ row.validFrom ? row.validFrom.slice(0, 10) : '—' }}
-                    <span class="pc-vrow-arrow">→</span>
-                    <template v-if="row.validUntil">{{ row.validUntil.slice(0, 10) }}</template>
-                    <span v-else class="pc-vrow-inf">∞</span>
-                </div>
-                <div class="pc-vrow-sub">{{ updatedLabel(row) }}</div>
-            </div>
-            <div class="pc-vrow-cell pc-vrow-cell--right">
-                <div class="pc-vrow-price">
-                    {{ formatMoney(row.monthlyNet)
-                    }}<span class="pc-vrow-price-unit">{{ msg.versions.perMonthUnit }}</span>
-                </div>
-                <div class="pc-vrow-sub">
-                    {{ formatMoney(row.yearlyNet) }} {{ msg.versions.perYearUnit }}
-                </div>
-            </div>
-            <div class="pc-vrow-cell pc-vrow-cell--right">
-                <div
-                    class="pc-vrow-impact"
-                    :class="(impactByVersion[row.version] ?? 0) > 0 ? '' : 'pc-vrow-impact--zero'"
-                >
-                    {{ impactByVersion[row.version] ?? 0 }}
-                </div>
-                <div class="pc-vrow-sub">{{ msg.versions.tenants }}</div>
-            </div>
-            <div class="pc-vrow-note" :title="row.changeNote ?? ''">
-                {{ row.changeNote || '—' }}
-            </div>
-            <div class="pc-vrow-actions">
-                <button
-                    v-if="row.publishedAt === null"
-                    class="pc-btn pc-btn--sm pc-btn--primary"
-                    type="button"
-                    @click="emit('publish', row)"
-                >
-                    <svg
-                        width="12"
-                        height="12"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
-                        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
-                    </svg>
-                    <span>{{ msg.versions.publish }}</span>
-                </button>
-                <button
-                    v-if="editabilityOf(row).editable"
-                    class="pc-btn pc-btn--sm"
-                    type="button"
-                    :title="
-                        editabilityOf(row).reason === 'pre-active'
-                            ? msg.versions.preActiveTitle
-                            : msg.versions.editDraftTitle
-                    "
-                    @click="emit('editDraft', row)"
-                >
-                    <svg
-                        width="12"
-                        height="12"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
-                        <path d="M12 20h9M16.5 3.5a2.12 2.12 0 113 3L7 19l-4 1 1-4 12.5-12.5z" />
-                    </svg>
-                    <span>{{ common.edit }}</span>
-                </button>
-                <button
-                    v-if="row.publishedAt !== null && row.supersededAt === null && draftVersion"
-                    class="pc-btn pc-btn--sm"
-                    type="button"
-                    @click="emit('viewDiff', draftVersion, row)"
-                >
-                    <svg
-                        width="12"
-                        height="12"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
-                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                        <circle cx="12" cy="12" r="3" />
-                    </svg>
-                    <span>{{ msg.versions.viewDiff }}</span>
-                </button>
-            </div>
-        </div>
-    </section>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { isVersionEditable, type PlanVersionRow } from '@saasicat/types';
-import { formatMessage } from '../../client/i18n/format.js';
-import { formatCurrency } from '../../client/i18n/currency.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
-import type { TimelineSegment } from './types';
-
-const props = defineProps<{
-    versions: PlanVersionRow[];
-    sortedVersions: PlanVersionRow[];
-    timelineSegments: TimelineSegment[];
-    timelineAxis: string[];
-    hasOpenDraft: boolean;
-    nextDraftVersion: number;
-    impactByVersion: Record<number, number>;
-    draftVersion: PlanVersionRow | null;
-}>();
-
-const emit = defineEmits<{
-    (e: 'createDraft'): void;
-    (e: 'publish', version: PlanVersionRow): void;
-    (e: 'editDraft', version: PlanVersionRow): void;
-    (e: 'viewDiff', from: PlanVersionRow, to: PlanVersionRow): void;
-}>();
-
-const msg = useSaMessages('planDetail');
-const { locale } = useSuperAdminI18n();
-const common = useSaMessages('common');
-
-const newDraftButtonLabel = computed(() =>
-    formatMessage(msg.value.versions.newDraftButton, { version: props.nextDraftVersion }),
-);
-
-function editabilityOf(version: PlanVersionRow): {
-    editable: boolean;
-    reason: 'draft' | 'pre-active' | null;
-} {
-    return isVersionEditable(version);
-}
-
-function statusChipClass(row: PlanVersionRow): string {
-    if (row.publishedAt === null) return 'pc-chip--draft';
-    if (row.supersededAt !== null) return 'pc-chip--supersed';
-    return 'pc-chip--live';
-}
-
-function statusLabel(row: PlanVersionRow): string {
-    if (row.publishedAt === null) return 'draft';
-    if (row.supersededAt !== null) return 'superseded';
-    return 'live';
-}
-
-function formatMoney(raw: string | number): string {
-    const num = typeof raw === 'string' ? Number(raw) : raw;
-    if (!Number.isFinite(num)) return String(raw);
-    return formatCurrency(num, locale.value);
-}
-
-function updatedLabel(row: PlanVersionRow): string {
-    const iso =
-        row.publishedAt ??
-        (row as unknown as { updatedAt?: string }).updatedAt ??
-        (row as unknown as { createdAt?: string }).createdAt ??
-        '';
-    if (!iso) return '';
-    const d = new Date(iso);
-    if (Number.isNaN(d.getTime())) return '';
-    const diffMs = Date.now() - d.getTime();
-    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-    if (days <= 0) return msg.value.versions.updatedToday;
-    if (days < 30) return formatMessage(msg.value.versions.updatedDaysAgo, { days });
-    if (days < 365) {
-        return formatMessage(msg.value.versions.updatedMonthsAgo, {
-            months: Math.floor(days / 30),
-        });
-    }
-    return formatMessage(msg.value.versions.updatedYearsAgo, { years: Math.floor(days / 365) });
-}
-</script>

package/src/components/plan-cockpit/types.ts

@@ -1,72 +0,0 @@
-import type { PlanVersionRow } from '@saasicat/types';
-
-export interface AuditRow {
-    id: string;
-    createdAt: string;
-    action: string;
-    entity: string;
-    entityId: string;
-    changes: Record<string, unknown> | null;
-    user?: { email: string; firstName?: string; lastName?: string } | null;
-    userEmail?: string | null;
-}
-
-export interface ImpactTenant {
-    name: string;
-    plan: string;
-    state: 'auto' | 'review' | 'conflict';
-}
-
-export interface TenantImpact {
-    auto: number;
-    review: number;
-    conflict: number;
-    examples?: ImpactTenant[];
-}
-
-export interface DiscoveryQuota {
-    quotaKey: string;
-    label?: string | null;
-    unit?: string | null;
-}
-
-export interface FeatureMeta {
-    label?: string;
-}
-
-export interface TimelineSegment {
-    key: string;
-    version: number;
-    status: 'draft' | 'supersed' | 'live';
-    flex: number;
-}
-
-export interface PlanVersionPair {
-    from: PlanVersionRow;
-    to: PlanVersionRow;
-}
-
-export interface DiffSummary {
-    addedFeatures: string[];
-    removedFeatures: string[];
-    addedQuotas: Array<{ key: string; value: number }>;
-    removedQuotas: Array<{ key: string; value: number }>;
-    changedQuotas: Array<{ key: string; from: number; to: number }>;
-    priceChanged: boolean;
-    priceFrom: string;
-    priceTo: string;
-}
-
-export interface DiffRow {
-    id: string;
-    section: string;
-    label: string;
-    sub?: string;
-    from?: string;
-    to?: string;
-    bg: string;
-    border: string;
-    color: string;
-    sign: string;
-    tag: string;
-}

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

@@ -1,194 +0,0 @@
-<template>
-    <div class="pd-header">
-        <div class="pd-header-left">
-            <span class="pd-tier-chip">{{ plan.planKey }}</span>
-            <div class="pd-header-titles">
-                <div class="pd-title-wrap">
-                    <template v-if="editingName">
-                        <input
-                            ref="nameInput"
-                            v-model="nameDraft"
-                            class="pd-title-input"
-                            @keydown.enter="commitName"
-                            @keydown.escape="cancelName"
-                            @blur="commitName"
-                        />
-                        <span class="pd-title-hint">{{ msg.header.nameEditHint }}</span>
-                    </template>
-                    <template v-else>
-                        <h1 class="pd-title">{{ plan.label }}</h1>
-                        <button
-                            v-if="draftVersion"
-                            class="pd-title-edit-btn"
-                            type="button"
-                            :title="msg.header.editNameTitle"
-                            :aria-label="msg.header.editNameAria"
-                            @click="startEditName"
-                        >
-                            <svg
-                                width="14"
-                                height="14"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                            >
-                                <path
-                                    d="M12 20h9M16.5 3.5a2.12 2.12 0 113 3L7 19l-4 1 1-4 12.5-12.5z"
-                                />
-                            </svg>
-                        </button>
-                    </template>
-                </div>
-                <div class="pd-desc">{{ plan.description || msg.header.noDescription }}</div>
-            </div>
-        </div>
-        <div class="pd-actions">
-            <button class="btn" type="button" @click="$emit('back')">
-                <span class="pd-back-arrow" aria-hidden="true">
-                    <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
-                        <path d="M5 12h14M13 5l7 7-7 7" />
-                    </svg>
-                </span>
-                <span>{{ common.back }}</span>
-            </button>
-            <button
-                v-if="tenantTotal === 0 && !draftVersion && publishedCount === 0"
-                class="btn danger"
-                type="button"
-                :title="msg.header.deletePlanTitle"
-                @click="$emit('deletePlan')"
-            >
-                <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <path
-                        d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
-                    />
-                </svg>
-                <span>{{ msg.header.deletePlan }}</span>
-            </button>
-            <button class="btn" type="button" @click="$emit('clonePlan')">
-                <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <rect x="9" y="9" width="11" height="11" rx="2" />
-                    <path d="M5 15V5a2 2 0 012-2h10" />
-                </svg>
-                <span>{{ msg.header.clonePlan }}</span>
-            </button>
-            <button
-                v-if="!draftVersion"
-                class="btn primary"
-                type="button"
-                @click="$emit('createDraft')"
-            >
-                <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2.5"
-                >
-                    <path d="M12 5v14M5 12h14" />
-                </svg>
-                <span>{{ msg.header.newDraftVersion }}</span>
-            </button>
-            <button
-                v-else
-                class="btn primary"
-                type="button"
-                @click="$emit('publish', draftVersion)"
-            >
-                <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
-                </svg>
-                <span>{{ publishDraftLabel }}</span>
-            </button>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue';
-import type { PlanRow, PlanVersionRow } from '@saasicat/types';
-import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
-
-const props = defineProps<{
-    plan: PlanRow;
-    draftVersion: PlanVersionRow | null;
-    tenantTotal: number;
-    publishedCount: number;
-}>();
-
-const emit = defineEmits<{
-    (e: 'back'): void;
-    (e: 'createDraft'): void;
-    (e: 'publish', version: PlanVersionRow): void;
-    (e: 'clonePlan'): void;
-    (e: 'deletePlan'): void;
-    (e: 'updatePlan', patch: { label: string }): void;
-}>();
-
-const msg = useSaMessages('planDetail');
-const common = useSaMessages('common');
-
-const publishDraftLabel = computed(() =>
-    formatMessage(msg.value.header.publishDraft, { version: props.draftVersion?.version ?? '' }),
-);
-
-const editingName = ref(false);
-const nameDraft = ref(props.plan.label);
-const nameInput = ref<HTMLInputElement | null>(null);
-
-watch(
-    () => props.plan.label,
-    (label) => {
-        if (!editingName.value) nameDraft.value = label;
-    },
-);
-
-function startEditName(): void {
-    nameDraft.value = props.plan.label;
-    editingName.value = true;
-    void nextTick(() => nameInput.value?.focus());
-}
-
-function commitName(): void {
-    if (!editingName.value) return;
-    const next = nameDraft.value.trim();
-    editingName.value = false;
-    if (next && next !== props.plan.label) emit('updatePlan', { label: next });
-}
-
-function cancelName(): void {
-    nameDraft.value = props.plan.label;
-    editingName.value = false;
-}
-</script>

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

@@ -1,68 +0,0 @@
-<template>
-    <header class="sa-bundles__head">
-        <div>
-            <h1 class="sa-bundles__title">{{ msg.header.title }}</h1>
-            <p class="sa-bundles__sub">{{ msg.header.subtitle }}</p>
-        </div>
-        <div class="sa-bundles__head-actions">
-            <q-select
-                v-if="locales.length > 1"
-                :model-value="displayLocale"
-                :options="localeOptions"
-                outlined
-                dense
-                emit-value
-                map-options
-                class="sa-bundles__locale"
-                :label="msg.header.displayLocale"
-                @update:model-value="(value) => emit('update:displayLocale', String(value))"
-            >
-                <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>
-        </div>
-    </header>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
-
-// 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
-// default locale (DE); further options come from the active project locales.
-
-const props = defineProps<{
-    loading: boolean;
-    displayLocale: string;
-    locales: string[];
-}>();
-
-const emit = defineEmits<{
-    create: [];
-    refresh: [];
-    'update:displayLocale': [locale: string];
-}>();
-
-const msg = useSaMessages('bundles');
-
-const localeOptions = computed(() =>
-    props.locales.map((locale) => ({ label: locale.toUpperCase(), value: locale })),
-);
-</script>
-
-<style scoped>
-.sa-bundles__locale {
-    min-width: 150px;
-}
-</style>

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

@@ -1,34 +0,0 @@
-<template>
-    <header class="sa-discovery__head">
-        <div>
-            <h1 class="sa-discovery__title">{{ msg.title }}</h1>
-            <p class="sa-discovery__sub">
-                {{ msg.subtitleLead }} <b>{{ msg.subtitleEmphasis }}</b> {{ msg.subtitleTail }}
-            </p>
-        </div>
-        <div class="sa-discovery__head-actions">
-            <q-btn
-                unelevated
-                color="primary"
-                icon="bolt"
-                :label="msg.runDiscovery"
-                :loading="loading"
-                @click="emit('runDiscovery')"
-            />
-        </div>
-    </header>
-</template>
-
-<script setup lang="ts">
-import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
-
-defineProps<{
-    loading: boolean;
-}>();
-
-const emit = defineEmits<{
-    (e: 'runDiscovery'): void;
-}>();
-
-const msg = useSaMessages('discovery');
-</script>