@saasicat/ui-vue 0.7.0 → 0.9.0

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

@@ -1,261 +0,0 @@
-<template>
-    <div class="sa-pv-matrix">
-        <div class="sa-pv-matrix__card">
-            <div class="sa-pv-matrix__head" :style="gridStyle">
-                <div class="sa-pv-matrix__th">Feature</div>
-                <div v-for="plan in snapshot.plans" :key="plan.planId" class="sa-pv-matrix__plan">
-                    <div class="sa-pv-matrix__plan-name">{{ plan.planId }}</div>
-                    <div class="sa-pv-matrix__plan-price">
-                        {{ fmtEuro(plan.monthlyNet) }}/Mo · v{{ plan.version }}
-                    </div>
-                </div>
-            </div>
-
-            <template v-for="grp in groupsWithItems" :key="grp.name">
-                <div v-if="grp.name" class="sa-pv-matrix__group">{{ grp.name }}</div>
-                <div
-                    v-for="f in grp.items"
-                    :key="f.key"
-                    class="sa-pv-matrix__row"
-                    :style="gridStyle"
-                >
-                    <div class="sa-pv-matrix__feat-cell">
-                        <div class="sa-pv-matrix__feat-icon">
-                            <q-icon :name="f.icon" size="14px" />
-                        </div>
-                        <div>
-                            <div class="sa-pv-matrix__feat-label">
-                                {{ f.label }}
-                                <span v-if="f.plannedOnly" class="sa-pv-matrix__planned"
-                                    >PLANNED</span
-                                >
-                            </div>
-                            <div class="sa-pv-matrix__feat-key">{{ f.key }}</div>
-                        </div>
-                    </div>
-                    <div
-                        v-for="plan in snapshot.plans"
-                        :key="plan.planId"
-                        class="sa-pv-matrix__cell"
-                        :class="{ 'sa-pv-matrix__cell--off': !plan.features.includes(f.key) }"
-                    >
-                        <span v-if="plan.features.includes(f.key)" class="sa-pv-matrix__check">
-                            <q-icon name="check" size="14px" />
-                        </span>
-                        <span v-else class="sa-pv-matrix__dash" aria-hidden="true" />
-                    </div>
-                </div>
-            </template>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
-import { fmtEuro } from './format.js';
-
-// Generic feature matrix. Apps pass `featureRegistry` for label/icon/
-// plannedOnly hint and optionally `featureGroups` for the UX grouping of
-// the rows (e.g. Core, Billing, Data, …).
-//
-// Without `featureGroups` the matrix renders a single group without a header.
-
-interface FeatureMeta {
-    label?: string;
-    icon?: string;
-    plannedOnly?: boolean;
-}
-
-interface FeatureGroupsConfig {
-    /** Order of the group headers. */
-    order: readonly string[];
-    /** Map featureKey → group name. Unassigned features land in "Sonstige". */
-    byKey: Record<string, string>;
-    /** Default bucket for features without a `byKey` entry. Default: 'Sonstige'. */
-    fallbackGroup?: string;
-}
-
-const props = defineProps<{
-    snapshot: CatalogSnapshot;
-    featureRegistry: Record<string, FeatureMeta>;
-    featureGroups?: FeatureGroupsConfig;
-}>();
-
-const gridStyle = computed(() => ({
-    gridTemplateColumns: `minmax(280px, 1.5fr) repeat(${props.snapshot.plans.length}, minmax(110px, 1fr))`,
-}));
-
-interface MatrixFeature {
-    key: string;
-    label: string;
-    icon: string;
-    plannedOnly: boolean;
-}
-
-const groupsWithItems = computed<Array<{ name: string | null; items: MatrixFeature[] }>>(() => {
-    const allItems: MatrixFeature[] = Object.entries(props.featureRegistry).map(([key, meta]) => ({
-        key,
-        label: meta.label ?? key,
-        icon: meta.icon ?? 'extension',
-        plannedOnly: meta.plannedOnly === true,
-    }));
-
-    if (!props.featureGroups) {
-        return allItems.length > 0 ? [{ name: null, items: allItems }] : [];
-    }
-
-    const fallback = props.featureGroups.fallbackGroup ?? 'Sonstige';
-    const byGroup = new Map<string, MatrixFeature[]>();
-    for (const item of allItems) {
-        const group = props.featureGroups.byKey[item.key] ?? fallback;
-        const list = byGroup.get(group) ?? [];
-        list.push(item);
-        byGroup.set(group, list);
-    }
-    const orderWithFallback = [
-        ...props.featureGroups.order,
-        ...(byGroup.has(fallback) && !props.featureGroups.order.includes(fallback)
-            ? [fallback]
-            : []),
-    ];
-    return orderWithFallback.flatMap((g) => {
-        const items = byGroup.get(g);
-        return items && items.length > 0 ? [{ name: g, items }] : [];
-    });
-});
-</script>
-
-<style scoped>
-.sa-pv-matrix {
-    padding: 20px 28px;
-}
-.sa-pv-matrix__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
-
-.sa-pv-matrix__head {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    display: grid;
-    background: #fafbfc;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-}
-.sa-pv-matrix__th {
-    padding: 12px 16px;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
-    text-transform: uppercase;
-    border-right: 1px solid var(--sa-border, #e2e8f0);
-}
-.sa-pv-matrix__plan {
-    padding: 12px 14px;
-    text-align: center;
-    border-right: 1px solid var(--sa-border, #e2e8f0);
-}
-.sa-pv-matrix__plan-name {
-    font-size: 12.5px;
-    font-weight: 700;
-    color: var(--sa-heading, #0f172a);
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-}
-.sa-pv-matrix__plan-price {
-    font-size: 10.5px;
-    color: var(--sa-muted, #64748b);
-    margin-top: 1px;
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-}
-
-.sa-pv-matrix__group {
-    padding: 8px 16px;
-    background: var(--sa-border-soft, #f1f5f9);
-    font-size: 10.5px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
-    text-transform: uppercase;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-}
-.sa-pv-matrix__row {
-    display: grid;
-    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-
-.sa-pv-matrix__feat-cell {
-    padding: 10px 16px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    border-right: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-.sa-pv-matrix__feat-icon {
-    width: 24px;
-    height: 24px;
-    border-radius: 6px;
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-.sa-pv-matrix__feat-icon :deep(.q-icon) {
-    color: var(--sa-primary, #3f6bff);
-}
-.sa-pv-matrix__feat-label {
-    font-size: 12.5px;
-    font-weight: 600;
-    color: var(--sa-heading, #0f172a);
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-.sa-pv-matrix__planned {
-    font-size: 9px;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    background: #fef3c7;
-    color: #92400e;
-    padding: 1px 5px;
-    border-radius: 3px;
-}
-.sa-pv-matrix__feat-key {
-    font-size: 10.5px;
-    color: var(--sa-muted, #64748b);
-    margin-top: 1px;
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-}
-
-.sa-pv-matrix__cell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-right: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-.sa-pv-matrix__cell--off {
-    background: #fafbfc;
-}
-.sa-pv-matrix__check {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    background: var(--sa-positive-soft, rgba(4, 120, 87, 0.1));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.sa-pv-matrix__check :deep(.q-icon) {
-    color: var(--sa-positive, #047857);
-}
-.sa-pv-matrix__dash {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    border: 1px dashed var(--sa-border, #e2e8f0);
-}
-</style>

package/src/pages-standard/plan-versions/types.ts

@@ -1,33 +0,0 @@
-// Shared types of the plan version views.
-//
-// Phase 2c: ported from a consumer admin;
-// source type generic over the platform version rows.
-
-import type { PlanVersionRow } from '@saasicat/types';
-
-export type PlanVersionViewMode = 'list' | 'matrix' | 'audit';
-
-export type DraftKind = 'plan';
-
-export interface DraftEntry {
-    kind: DraftKind;
-    id: string;
-    label: string;
-    detail: string;
-    source: PlanVersionRow;
-    baseId: string | null;
-    hasChangeNote: boolean;
-}
-
-export interface ValidationCheck {
-    ok: boolean;
-    label: string;
-    detail: string;
-}
-
-export interface PublishResult {
-    id: string;
-    label: string;
-    ok: boolean;
-    error?: string;
-}

package/src/vue/use-plan-versions.ts

@@ -1,83 +0,0 @@
-// usePlanVersionsCatalog — composable for the plan-versions page
-// (`<app> /admin/plans`).
-//
-// **Endpoint is mandatory** and is supplied by the app consumer, because
-// apps have different `globalPrefix` conventions
-// (e.g. `/api/admin/...` or `/api/v1/admin/...`).
-//
-// Platform pure functions (`assertDraftPublishable` etc. from
-// `@saasicat/nest/billing`) validate the drafts before the
-// publish POST.
-
-import { ref, type Ref } from 'vue';
-import { useApiList, type UseApiListOptions, type UseApiListResult } from './use-api-list.js';
-
-/**
- * Generic filter shape for versions lists.
- * `state`: 'draft' (publishedAt null), 'live' (publishedAt set, supersededAt null),
- *          'superseded' (supersededAt set), 'all' (default).
- */
-export interface PlanVersionListFilter {
-    state?: 'draft' | 'live' | 'superseded' | 'all';
-    /** PlanId (`'BASIC'`, `'STANDARD'`, …). */
-    planId?: string;
-}
-
-/**
- * Generic versions row shape. Depending on the endpoint, the consumer backend
- * returns slightly different fields; the platform composable takes the universal ones.
- */
-export interface PlanVersionRow {
-    id: string;
-    version: number;
-    publishedAt: string | null;
-    supersededAt: string | null;
-    nonRegressive: boolean;
-    changeNote?: string;
-    [extra: string]: unknown;
-}
-
-export interface VersionsOptions {
-    /**
-     * Fully qualified versions-list endpoint including the app globalPrefix
-     * (`/api/admin/plan-versions`, `/api/v1/admin/plan-versions`, …). Mandatory.
-     */
-    endpoint: string;
-    filter?: Ref<PlanVersionListFilter>;
-    http?: UseApiListOptions<Record<string, unknown>>['http'];
-    getAuthToken?: () => string | null;
-    autoLoad?: boolean;
-}
-
-export interface VersionsResult extends UseApiListResult<PlanVersionRow> {
-    filter: Ref<PlanVersionListFilter>;
-}
-
-function buildVersionsComposable(label: string) {
-    return function (options: VersionsOptions): VersionsResult {
-        if (!options?.endpoint) {
-            throw new Error(
-                `${label}: \`endpoint\` is required (e.g. "/api/admin/${label}" ` +
-                    `or "/api/v1/admin/${label}"). The platform has no default ` +
-                    `because apps use different globalPrefix conventions.`,
-            );
-        }
-        const filter = options.filter ?? ref<PlanVersionListFilter>({});
-        const list = useApiList<PlanVersionRow>({
-            endpoint: options.endpoint,
-            filter: filter as unknown as Ref<Record<string, unknown>>,
-            http: options.http,
-            getAuthToken: options.getAuthToken,
-            autoLoad: options.autoLoad,
-        });
-        return { ...list, filter };
-    };
-}
-
-/**
- * Read-only catalog view for PlanVersions (lift-and-shift from a
- * consumer admin).
- * Called `usePlanVersionsCatalog` since M6 Pack 2a, because `usePlanVersions`
- * from `use-plans.ts` is now the lifecycle editor (createDraft/publish).
- */
-export const usePlanVersionsCatalog = buildVersionsComposable('plan-versions');