@saasicat/ui-vue 0.7.0 → 0.9.0

package/src/pages-standard/PlanVersionsPage.vue

@@ -1,220 +0,0 @@
-<template>
-    <div class="sa-pv">
-        <div v-if="loading" class="sa-pv__loading">
-            <q-spinner size="32px" /> {{ msg.page.loadingCatalog }}
-        </div>
-
-        <template v-else>
-            <PlanVersionsTimeline
-                :snapshots="snapshots"
-                :selected-id="selectedId"
-                :compare-id="compareId"
-                @select="onSelect"
-                @set-compare="onSetCompare"
-                @clear-compare="compareId = null"
-            />
-
-            <main class="sa-pv__main">
-                <PlanVersionHeader
-                    v-if="selected"
-                    :snapshot="selected"
-                    :view-mode="viewMode"
-                    :compare-snapshot="compare"
-                    @view-change="viewMode = $event"
-                    @publish="emit('publish')"
-                    @clear-compare="compareId = null"
-                />
-
-                <div class="sa-pv__body">
-                    <template v-if="selected">
-                        <PlanVersionsDiff
-                            v-if="compare"
-                            :from="compare"
-                            :to="selected"
-                            :plan-accents="planAccents"
-                            :field-labels="diffFieldLabels"
-                        />
-                        <template v-else-if="viewMode === 'list'">
-                            <slot name="list" :snapshot="selected">
-                                <PlanVersionsList
-                                    :snapshot="selected"
-                                    :expected-plan-ids="expectedPlanIds"
-                                    :quota-columns="quotaColumns"
-                                    @edit-plan-draft="emit('editPlanDraft', $event)"
-                                    @create-plan-draft="emit('createPlanDraft', $event)"
-                                />
-                            </slot>
-                        </template>
-                        <template v-else-if="viewMode === 'matrix'">
-                            <slot name="matrix" :snapshot="selected">
-                                <PlanVersionsMatrix
-                                    :snapshot="selected"
-                                    :feature-registry="featureRegistry ?? {}"
-                                    :feature-groups="featureGroups"
-                                />
-                            </slot>
-                        </template>
-                        <template v-else>
-                            <slot name="audit" :snapshot="selected">
-                                <PlanVersionsAudit
-                                    v-if="loadAudit"
-                                    :snapshot="selected"
-                                    :load-audit="loadAudit"
-                                    :action-meta="auditActionMeta"
-                                />
-                                <div v-else class="sa-pv__no-audit">
-                                    {{ msg.page.noAuditLoader }}
-                                </div>
-                            </slot>
-                        </template>
-                    </template>
-                </div>
-            </main>
-        </template>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import type { CatalogSnapshot, RawCatalogData } from '../client/plan-versions-catalog.js';
-import { buildSnapshots } from '../client/plan-versions-catalog.js';
-import PlanVersionsTimeline from './plan-versions/PlanVersionsTimeline.vue';
-import PlanVersionHeader from './plan-versions/PlanVersionHeader.vue';
-import PlanVersionsList, { type QuotaColumnConfig } from './plan-versions/PlanVersionsList.vue';
-import PlanVersionsMatrix from './plan-versions/PlanVersionsMatrix.vue';
-import PlanVersionsAudit from './plan-versions/PlanVersionsAudit.vue';
-import PlanVersionsDiff from './plan-versions/PlanVersionsDiff.vue';
-import type { PlanVersionViewMode } from './plan-versions/types.js';
-import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
-
-// Platform standard page: plan versions.
-//
-// Composes the plan-versions subcomponents into the complete page. Consumers
-// pass `data` (RawCatalogData) through and receive events for the app-
-// specific edit/create flows (DraftDialog/PublishModal are intentionally
-// not part of the platform — they hang off the app feature catalog).
-//
-// Slot API for richer app-specific renderings:
-//   - `#list`: replaces the default PlanVersionsList (e.g. with feature
-//             grouping per plan + additional quota columns).
-//   - `#matrix`, `#audit`: analogous.
-
-interface FeatureGroupsConfig {
-    order: readonly string[];
-    byKey: Record<string, string>;
-    fallbackGroup?: string;
-}
-
-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;
-}
-
-const props = withDefaults(
-    defineProps<{
-        data: RawCatalogData;
-        loading?: boolean;
-        /** Plan IDs in display order (e.g. BASIC,STANDARD,PROFESSIONAL,…). */
-        planSortOrder?: readonly string[];
-        /** Expected plan IDs for the "missing packages" warning. */
-        expectedPlanIds?: readonly string[];
-        /** Accent color per plan ID (for diff cards). */
-        planAccents?: Record<string, string>;
-        /** Feature metadata (label/icon/plannedOnly) for the matrix. */
-        featureRegistry?: Record<string, { label?: string; icon?: string; plannedOnly?: boolean }>;
-        /** UX grouping of the features in the matrix. */
-        featureGroups?: FeatureGroupsConfig;
-        /** Audit loader (optional; without it disables the audit view). */
-        loadAudit?: () => Promise<AuditRow[]>;
-        /** App-specific audit action meta map. */
-        auditActionMeta?: Record<string, { icon: string; color: string; label: string }>;
-        /** Field label overrides for the diff display. */
-        diffFieldLabels?: Record<string, string>;
-        /**
-         * Optional quota columns in the list view (e.g.
-         * users/members/storage/seats). Passed through to
-         * PlanVersionsList. Default: none — old display (only package/price/features).
-         */
-        quotaColumns?: ReadonlyArray<QuotaColumnConfig>;
-    }>(),
-    {
-        loading: false,
-    },
-);
-
-const emit = defineEmits<{
-    (e: 'publish'): void;
-    (e: 'editPlanDraft', draftId: string): void;
-    (e: 'createPlanDraft', planId: string): void;
-}>();
-
-const msg = useSaMessages('planVersions');
-const { locale } = useSuperAdminI18n();
-
-const selectedId = ref<string>('drafts');
-const compareId = ref<string | null>(null);
-const viewMode = ref<PlanVersionViewMode>('list');
-
-const snapshots = computed<CatalogSnapshot[]>(() =>
-    buildSnapshots(props.data, { planSortOrder: props.planSortOrder, locale: locale.value }),
-);
-
-const selected = computed<CatalogSnapshot | null>(
-    () => snapshots.value.find((s) => s.id === selectedId.value) ?? null,
-);
-const compare = computed<CatalogSnapshot | null>(() =>
-    compareId.value ? (snapshots.value.find((s) => s.id === compareId.value) ?? null) : null,
-);
-
-watch(snapshots, (snaps) => {
-    if (!snaps.find((s) => s.id === selectedId.value)) {
-        selectedId.value = snaps[0]?.id ?? 'drafts';
-    }
-});
-
-function onSelect(id: string): void {
-    selectedId.value = id;
-}
-
-function onSetCompare(id: string): void {
-    if (id !== selectedId.value) compareId.value = id;
-}
-</script>
-
-<style scoped>
-.sa-pv {
-    display: flex;
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    min-width: 0;
-}
-.sa-pv__main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    overflow: hidden;
-}
-.sa-pv__body {
-    flex: 1;
-    overflow-y: auto;
-}
-.sa-pv__loading {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 32px;
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv__no-audit {
-    padding: 32px;
-    color: var(--sa-muted, #64748b);
-    font-style: italic;
-}
-</style>

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

@@ -1,309 +0,0 @@
-<template>
-    <header class="sa-pv-header">
-        <div class="sa-pv-header__row">
-            <div class="sa-pv-header__col">
-                <div class="sa-pv-header__chips">
-                    <span class="sa-pv-header__label">{{ snapshot.label }}</span>
-                    <PlanVersionStatusBadge :status="snapshot.status" />
-                    <template v-if="compareSnapshot">
-                        <q-icon name="compare_arrows" size="16px" class="sa-pv-header__cmp-icon" />
-                        <span class="sa-pv-header__label sa-pv-header__label--cmp">{{
-                            compareSnapshot.label
-                        }}</span>
-                        <button
-                            type="button"
-                            class="sa-pv-header__cmp-btn"
-                            @click="emit('clearCompare')"
-                        >
-                            <q-icon name="close" size="14px" /> {{ msg.compareEnd }}
-                        </button>
-                    </template>
-                </div>
-                <h1 class="sa-pv-header__title">{{ snapshot.title }}</h1>
-                <p class="sa-pv-header__desc">{{ snapshot.description }}</p>
-
-                <div class="sa-pv-header__meta">
-                    <span
-                        v-if="snapshot.publishedAt"
-                        class="sa-pv-header__meta-item sa-pv-header__meta-item--ok"
-                    >
-                        <q-icon name="rocket_launch" size="14px" />
-                        {{ publishedOnLabel }}
-                    </span>
-                    <span
-                        v-if="snapshot.kind === 'drafts'"
-                        class="sa-pv-header__meta-item sa-pv-header__meta-item--warn"
-                    >
-                        <q-icon name="edit_note" size="14px" />
-                        <strong>{{ snapshot.draftCount }}</strong> {{ msg.header.openDrafts }}
-                    </span>
-                    <span
-                        v-if="snapshot.regressionCount > 0"
-                        class="sa-pv-header__meta-item sa-pv-header__meta-item--bad"
-                    >
-                        <q-icon name="trending_down" size="14px" />
-                        <strong>{{ snapshot.regressionCount }}</strong> {{ regressionLabel }}
-                    </span>
-                </div>
-            </div>
-
-            <div class="sa-pv-header__actions">
-                <button
-                    v-if="canPublish"
-                    type="button"
-                    class="sa-pv-header__publish"
-                    @click="emit('publish')"
-                >
-                    <q-icon name="rocket_launch" size="16px" />
-                    {{ msg.header.startPublishFlow }}
-                </button>
-            </div>
-        </div>
-
-        <div class="sa-pv-header__view-row">
-            <div
-                class="sa-pv-header__switcher"
-                :class="{ 'sa-pv-header__switcher--disabled': !!compareSnapshot }"
-            >
-                <button
-                    v-for="m in resolvedModes"
-                    :key="m.id"
-                    type="button"
-                    class="sa-pv-header__mode-btn"
-                    :class="{ 'sa-pv-header__mode-btn--active': viewMode === m.id }"
-                    @click="emit('viewChange', m.id)"
-                >
-                    <q-icon :name="m.icon" size="14px" />
-                    {{ m.label }}
-                </button>
-            </div>
-            <span v-if="compareSnapshot" class="sa-pv-header__cmp-hint">
-                <q-icon name="compare_arrows" size="13px" />
-                {{ msg.header.compareModeHint }}
-            </span>
-        </div>
-    </header>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
-import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
-import { formatDate } from './format.js';
-import PlanVersionStatusBadge from './PlanVersionStatusBadge.vue';
-import type { PlanVersionViewMode } from './types.js';
-
-const props = defineProps<{
-    snapshot: CatalogSnapshot;
-    viewMode: PlanVersionViewMode;
-    compareSnapshot: CatalogSnapshot | null;
-    /** Overrides the localized default view switcher. */
-    modes?: ReadonlyArray<{ id: PlanVersionViewMode; label: string; icon: string }>;
-}>();
-
-const emit = defineEmits<{
-    (e: 'viewChange', mode: PlanVersionViewMode): void;
-    (e: 'publish'): void;
-    (e: 'clearCompare'): void;
-}>();
-
-const msg = useSaMessages('planVersions');
-const { locale } = useSuperAdminI18n();
-
-const canPublish = computed(
-    () => props.snapshot.kind === 'drafts' && props.snapshot.draftCount > 0,
-);
-
-const publishedOnLabel = computed(() =>
-    formatMessage(msg.value.header.publishedOn, {
-        date: formatDate(props.snapshot.publishedAt ?? undefined, locale.value),
-    }),
-);
-
-const regressionLabel = computed(() =>
-    props.snapshot.regressionCount === 1
-        ? msg.value.header.regressionOne
-        : msg.value.header.regressionMany,
-);
-
-const resolvedModes = computed(
-    () =>
-        props.modes ?? [
-            { id: 'list' as const, label: msg.value.header.modeList, icon: 'list' },
-            { id: 'matrix' as const, label: msg.value.header.modeMatrix, icon: 'grid_view' },
-            { id: 'audit' as const, label: msg.value.header.modeAudit, icon: 'history' },
-        ],
-);
-</script>
-
-<style scoped>
-.sa-pv-header {
-    padding: 20px 28px 18px;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-    background: var(--sa-bg-surface, #ffffff);
-}
-.sa-pv-header__row {
-    display: flex;
-    align-items: flex-start;
-    gap: 20px;
-}
-.sa-pv-header__col {
-    flex: 1;
-    min-width: 0;
-}
-.sa-pv-header__chips {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 6px;
-    flex-wrap: wrap;
-}
-.sa-pv-header__label {
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--sa-heading, #0f172a);
-    background: #f1f5f9;
-    padding: 3px 10px;
-    border-radius: 6px;
-}
-.sa-pv-header__label--cmp {
-    background: #fef3c7;
-}
-.sa-pv-header__cmp-icon {
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv-header__cmp-btn {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: var(--sa-muted, #64748b);
-    font-size: 11px;
-    font-weight: 600;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.sa-pv-header__title {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 22px;
-    color: var(--sa-heading, #0f172a);
-    letter-spacing: -0.01em;
-}
-.sa-pv-header__desc {
-    margin: 6px 0 0;
-    color: var(--sa-muted-dark, #475569);
-    font-size: 13.5px;
-    line-height: 1.55;
-    max-width: 760px;
-}
-
-.sa-pv-header__meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-top: 14px;
-    font-size: 12px;
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv-header__meta-item {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-}
-.sa-pv-header__meta-item strong {
-    color: var(--sa-body, #1e293b);
-    font-weight: 600;
-}
-.sa-pv-header__meta-item--ok :deep(.q-icon) {
-    color: var(--sa-positive, #047857);
-}
-.sa-pv-header__meta-item--warn :deep(.q-icon) {
-    color: var(--sa-warning, #b45309);
-}
-.sa-pv-header__meta-item--bad :deep(.q-icon) {
-    color: var(--sa-negative, #dc2626);
-}
-.sa-pv-header__meta-item--bad strong {
-    color: var(--sa-negative, #dc2626);
-}
-
-.sa-pv-header__actions {
-    display: flex;
-    gap: 8px;
-    flex-shrink: 0;
-}
-.sa-pv-header__publish {
-    background: var(--sa-primary, #3f6bff);
-    color: #fff;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 18px;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    box-shadow: 0 1px 3px rgba(63, 107, 255, 0.3);
-}
-
-.sa-pv-header__view-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-top: 18px;
-    flex-wrap: wrap;
-}
-.sa-pv-header__switcher {
-    display: inline-flex;
-    background: #f1f5f9;
-    padding: 3px;
-    border-radius: 9px;
-}
-.sa-pv-header__switcher--disabled {
-    opacity: 0.5;
-    pointer-events: none;
-}
-.sa-pv-header__mode-btn {
-    background: transparent;
-    color: var(--sa-body, #1e293b);
-    border: none;
-    border-radius: 7px;
-    padding: 6px 12px;
-    font-size: 12.5px;
-    font-weight: 600;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-}
-.sa-pv-header__mode-btn :deep(.q-icon) {
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv-header__mode-btn--active {
-    background: #fff;
-    color: var(--sa-primary, #3f6bff);
-    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
-}
-.sa-pv-header__mode-btn--active :deep(.q-icon) {
-    color: var(--sa-primary, #3f6bff);
-}
-
-.sa-pv-header__cmp-hint {
-    font-size: 11.5px;
-    font-weight: 600;
-    color: var(--sa-warning, #b45309);
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    padding: 4px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--sa-amber-border, rgba(245, 158, 11, 0.3));
-}
-</style>

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

@@ -1,48 +0,0 @@
-<template>
-    <span class="sa-pv-status-badge" :class="`sa-pv-status-badge--${status.toLowerCase()}`">
-        <q-icon :name="cfg.icon" size="12px" />
-        {{ cfg.label }}
-    </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-type Status = 'DRAFT' | 'ACTIVE' | 'ARCHIVED';
-const props = defineProps<{ status: Status }>();
-
-const STATUS_CFG: Record<Status, { label: string; icon: string }> = {
-    DRAFT: { label: 'DRAFT', icon: 'edit_note' },
-    ACTIVE: { label: 'AKTIV', icon: 'check_circle' },
-    ARCHIVED: { label: 'ARCHIV', icon: 'archive' },
-};
-const cfg = computed(() => STATUS_CFG[props.status]);
-</script>
-
-<style scoped>
-.sa-pv-status-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 9px;
-    border-radius: 6px;
-    font-size: 10.5px;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-}
-.sa-pv-status-badge--draft {
-    background: #fef3c7;
-    color: #92400e;
-}
-.sa-pv-status-badge--active {
-    background: #d1fae5;
-    color: #065f46;
-}
-.sa-pv-status-badge--archived {
-    background: #f1f5f9;
-    color: #64748b;
-}
-.sa-pv-status-badge :deep(.q-icon) {
-    color: inherit;
-}
-</style>